/* The floating dictation controls: a small translucent replica of the recorder's own buttons that
   hovers over a record while a dictation is running, so a provider reading through the pages can see
   that it is still recording and can reach the controls without going back to the Dictation tab.

   It is a MIRROR, never a second recorder: the state it shows and the presses it makes both travel
   over the recorder bus (js/communication/broadcast.js), so the recorder in the main window remains
   the only thing that knows anything. Loaded by the main window and by both viewer pages. */

.rec-bar {
    position: fixed;
    z-index: 2147482000;                       /* over the record, under the withdrawn notice and the launch screen */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 13px 9px;
    border-radius: 18px;                       /* two rows now: a pill would leave the corners empty */
    background: rgba(15, 40, 68, .82);         /* the brand navy, so it reads as Lantern's own */
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 6px 22px rgba(9, 24, 44, .28);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    color: #f4f7fb;
    font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    cursor: grab;
    transition: opacity .35s ease;
    opacity: .94;
}
.rec-bar[hidden] { display: none; }
.rec-bar.dragging { cursor: grabbing; transition: none; }
/* Out of the way while nothing is happening; back the moment anything does */
.rec-bar.resting { opacity: .42; }
.rec-bar:hover { opacity: 1; }

.rec-bar button {
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform .09s ease, filter .12s ease;
}
.rec-bar button img { width: 26px; height: 26px; display: block; pointer-events: none; filter: brightness(1.06); }
.rec-bar button:hover { filter: brightness(1.12); }
/* The press, whether it came from this window's button or a key held down in the other one.
   The recorder's own buttons travel 5px, but they are 48px tall against 30px here: the same drop at
   this size reads as a lurch, so it is a little under proportional rather than a little over.
   Nothing stays held down: while something is playing, its button wears pause, and a pause button
   held down would read as "paused", which is the opposite of what is happening. */
.rec-bar button.pressed { transform: translateY(2px); filter: brightness(1.25); }
.rec-bar button:disabled { opacity: .38; cursor: default; }

.rec-bar .rec-time {
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    min-width: 8.4em;                          /* the recorder's own "0:00:00 / 0:00:00" fits without shuffling */
    text-align: right;
    font-size: 11.5px;
}
/* "It can hear me": the bars move with the voice, so silence is visible too */
.rec-bar .rec-level { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; width: 34px; }
.rec-bar .rec-level i {
    flex: 1 1 auto; border-radius: 1.5px; background: #7d8ba0;
    transition: background .1s ease, opacity .1s ease;
    opacity: .5;
}
.rec-bar .rec-level i:nth-child(1) { height: 6px; }
.rec-bar .rec-level i:nth-child(2) { height: 9px; }
.rec-bar .rec-level i:nth-child(3) { height: 12px; }
.rec-bar .rec-level i:nth-child(4) { height: 16px; }
.rec-bar .rec-level i:nth-child(5) { height: 20px; }
.rec-bar .rec-level i.on { background: var(--lantern-amber, #F9BF62); opacity: 1; }
/* The controls on one row, the playhead beneath them across the whole width */
.rec-bar .rec-row { display: flex; align-items: center; gap: 5px; }

/* The playhead. Given the full width of the bar, a ten-minute dictation runs about a second and a
   half to the pixel, which is close enough to land on a sentence. */
.rec-bar .rec-seek {
    position: relative; height: 14px; margin: 0 2px;
    cursor: pointer; touch-action: none;
    display: flex; align-items: center;
}
.rec-bar .rec-seek::before {
    content: ''; position: absolute; left: 0; right: 0; height: 4px;
    border-radius: 3px; background: rgba(255, 255, 255, .18);
}
.rec-bar .rec-seek i {
    position: absolute; left: 0; height: 4px; width: 0;
    border-radius: 3px; background: var(--lantern-blue, #82A1C6);
    transition: width .18s linear;
}
.rec-bar .rec-seek b {
    position: absolute; left: 0; width: 11px; height: 11px; margin-left: -5.5px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(6, 18, 34, .5);
    transition: left .18s linear, transform .12s ease;
}
.rec-bar .rec-seek:hover b, .rec-bar .rec-seek:focus-visible b { transform: scale(1.18); }
.rec-bar .rec-seek:focus-visible { outline: 2px solid var(--lantern-amber, #F9BF62); outline-offset: 3px; border-radius: 4px; }
.rec-bar .rec-seek.scrubbing i, .rec-bar .rec-seek.scrubbing b { transition: none; }
.rec-bar.playing .rec-seek i { background: var(--lantern-amber, #F9BF62); }
/* Nothing to move through yet, or the head is at the end being written to */
.rec-bar .rec-seek.off { cursor: default; opacity: .45; }
.rec-bar .rec-seek.off b { display: none; }
.rec-bar .rec-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #e5484d; flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, .55);
}
.rec-bar.live .rec-dot { animation: rec-pulse 1.8s ease-in-out infinite; }
.rec-bar.paused .rec-dot { background: #c9ced6; animation: none; }
.rec-bar.idle .rec-dot { background: #8b95a3; animation: none; }   /* the recorder is open, but not recording */
@keyframes rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); }
    50%      { box-shadow: 0 0 0 5px rgba(229, 72, 77, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .rec-bar, .rec-bar button, .rec-bar .rec-level i, .rec-bar .rec-seek i, .rec-bar .rec-seek b { transition: none; }
    .rec-bar.live .rec-dot { animation: none; }
}