/* The dictation strip along the foot of the reading area (js/dictation-strip.js): the recorder's
   controls beside the record being read, in Lantern's own window. Shown while the recorder is open
   and its own tab is not the one on show. */

.dictation-strip {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    min-height: 46px;
    padding: 5px 12px 5px 10px;
    border-top: 1px solid var(--border);
    background: var(--background);
    color: var(--text-primary);
    font-size: 12.5px;
    user-select: none;
}
.dictation-strip[hidden] { display: none; }

/* Whose dictation this is, and where it stands */
.ds-what { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 34%; }
.ds-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ds-exam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-state { color: var(--text-secondary); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dictation-strip.live .ds-state { color: #c1121f; }
.ds-dot { width: 9px; height: 9px; border-radius: 50%; background: #8b95a3; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
.dictation-strip.live .ds-dot { background: #e5484d; animation: ds-pulse 1.8s ease-in-out infinite; }
.dictation-strip.paused .ds-dot { background: #c9ced6; }
.dictation-strip.armed .ds-dot { background: var(--lantern-amber, #F9BF62); }
@keyframes ds-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); }
}

/* The seven buttons, wearing the recorder's own faces */
.ds-buttons { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ds-buttons button {
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    display: grid; place-items: center;
    transition: transform .09s ease, filter .12s ease;
}
.ds-buttons button img { width: 28px; height: 28px; display: block; pointer-events: none; }
.ds-buttons button:hover { background: var(--accent-bg, #eef2f7); }
.ds-buttons button.pressed { transform: translateY(2px); filter: brightness(1.15); }
.ds-buttons button:disabled { opacity: .35; cursor: default; }
.ds-buttons button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
/* Armed: nothing recorded for the record on show yet, and Record is the one thing to press */
.dictation-strip.armed .ds-buttons button[data-id="recordBtn"] { box-shadow: 0 0 0 2px var(--lantern-amber, #F9BF62); }

/* "It can hear me" */
.ds-level { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; width: 30px; flex: 0 0 auto; }
.ds-level i { flex: 1 1 auto; border-radius: 1.5px; background: #b9c2cf; opacity: .55; transition: background .1s ease, opacity .1s ease; }
.ds-level i:nth-child(1) { height: 6px; }
.ds-level i:nth-child(2) { height: 9px; }
.ds-level i:nth-child(3) { height: 12px; }
.ds-level i:nth-child(4) { height: 16px; }
.ds-level i:nth-child(5) { height: 20px; }
.ds-level i.on { background: var(--lantern-amber, #F9BF62); opacity: 1; }

.ds-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 9em; text-align: right; color: var(--text-secondary); font-size: 11.5px; }

/* The playhead takes whatever width is left; while the drawer is up, its full-width playhead is the one to use, and this
   one greys out where it is, so that nothing on the strip moves */
body.dictation-editing .ds-seek { opacity: .3; pointer-events: none; }
body.dictation-editing .ds-seek b { display: none; }
.ds-seek { position: relative; flex: 1 1 60px; min-width: 40px; height: 16px; margin: 0 4px; cursor: pointer; touch-action: none; display: flex; align-items: center; }
.ds-seek::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: var(--border); }
.ds-seek i { position: absolute; left: 0; height: 4px; width: 0; border-radius: 3px; background: var(--lantern-blue, #82A1C6); transition: width .18s linear; }
.ds-seek b { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1px solid var(--lantern-blue, #82A1C6); box-shadow: 0 1px 3px rgba(6, 18, 34, .25); transition: left .18s linear, transform .12s ease; }
.ds-seek:hover b, .ds-seek:focus-visible b { transform: scale(1.18); }
.ds-seek:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; }
.ds-seek.scrubbing i, .ds-seek.scrubbing b { transition: none; }
.dictation-strip.playing .ds-seek i { background: var(--lantern-amber, #F9BF62); }
.ds-seek.off { cursor: default; opacity: .45; }
.ds-seek.off b { display: none; }

/* Append or Insert */
.ds-mode { flex: 0 0 auto; display: inline-flex; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; overflow: hidden; font: inherit; font-size: 11.5px; }
.ds-mode span { padding: 4px 8px; color: var(--text-secondary); }
.ds-mode span:first-child { background: var(--lantern-navy, #0f2844); color: #fff; }
.ds-mode.insert span:first-child { background: transparent; color: var(--text-secondary); }
.ds-mode.insert span:last-child { background: var(--lantern-navy, #0f2844); color: #fff; }

.ds-send { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--lantern-navy, #0f2844); border-radius: 6px; background: var(--lantern-navy, #0f2844); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.ds-send:hover { filter: brightness(1.15); }
.ds-send:disabled { background: var(--surface); color: var(--text-secondary); border-color: var(--border); cursor: default; }
.ds-send.sent:disabled { color: var(--success-color); }
.ds-take { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--lantern-amber, #F9BF62); border-radius: 6px; background: var(--lantern-amber, #F9BF62); color: #2a1e05; font: inherit; font-size: 12px; cursor: pointer; }
.ds-take:hover { filter: brightness(1.06); }
.ds-take[hidden] { display: none; }
.dictation-strip.away .ds-state { color: #8a5a00; }
.dictation-strip.away .ds-dot { background: var(--lantern-amber, #F9BF62); }
.ds-open { flex: 0 0 auto; width: 32px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-secondary); cursor: pointer; }
.ds-open svg { width: 18px; height: 18px; }
.ds-open:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.ds-open.on { background: var(--lantern-navy, #0f2844); color: #fff; border-color: var(--lantern-navy, #0f2844); }

@media (prefers-reduced-motion: reduce) {
    .ds-buttons button, .ds-level i, .ds-seek i, .ds-seek b { transition: none; }
    .dictation-strip.live .ds-dot { animation: none; }
}