/* mCaptions Browser – styles (colours come from theme.css tokens) */

@font-face {
  font-family: 'DSEG7Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}

/* ── toolbar (Record, Upload, filter) ── */
#toolbar{background:var(--surface-2);padding:8px 18px;border-bottom:1px solid var(--border);
         display:flex;align-items:center;gap:12px;flex-shrink:0}
.tb-btn{border:none;color:var(--on-primary);padding:0 22px;height:40px;border-radius:8px;
        font-size:.85rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;
        letter-spacing:.3px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
        box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s}
.tb-btn i{font-size:1.05rem}
#open-rec-btn{background:var(--rec)}
#open-rec-btn:hover{background:var(--rec-hover)}
#open-upload-btn{background:var(--primary)}
#open-upload-btn:hover{background:var(--primary-hover)}
#search-wrap{position:relative;display:flex;align-items:center}
#search-wrap i{position:absolute;left:11px;color:var(--text-4);font-size:.85rem;pointer-events:none}
#search{background:var(--input-bg);border:1px solid var(--border);color:var(--text);
        padding:0 12px 0 32px;height:36px;border-radius:8px;font-size:.84rem;width:260px;
        font-family:inherit;outline:none;transition:border-color .15s}
#search:focus{border-color:var(--accent-border-strong)}
#search::placeholder{color:var(--text-4)}

.whatsnew-banner{margin:8px 12px 0}
.whatsnew-banner:empty{display:none}

/* ── main columns ── */
#cols{display:flex;flex:1;overflow:hidden;min-height:0;margin-top:8px;
      border-top:1px solid var(--border)}

/* ── job list ── */
#jobs-col{width:290px;min-width:180px;background:var(--surface-2);border-right:1px solid var(--border);
          display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}

/* draggable divider between the job list and the viewer */
#col-resizer{width:5px;flex-shrink:0;cursor:col-resize;background:transparent;
             margin-left:-3px;z-index:5;transition:background .12s}
#col-resizer:hover,#col-resizer.dragging{background:var(--accent-border-strong)}
body.col-resizing{cursor:col-resize;user-select:none}
#jobs-hdr{padding:8px 12px 6px;border-bottom:1px solid var(--border);
          font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;
          display:flex;justify-content:space-between;align-items:center}
#jobs-count{font-size:.7rem;color:var(--text-3)}
#jobs-list{overflow-y:auto;flex:1}
#load-more-btn{width:100%;padding:9px 0;background:var(--surface);border:1px dashed var(--border);
               border-top:none;color:var(--text-3);font-size:.74rem;font-family:inherit;
               cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
#load-more-btn:hover{background:var(--hover);color:var(--text-2)}
#load-more-btn:disabled{color:var(--text-5);cursor:default}
.job-card{padding:10px 12px;border-bottom:1px solid var(--border-soft);cursor:pointer;
          transition:background .15s;position:relative;border-left:3px solid transparent}
.job-card:hover{background:var(--hover)}
.job-card.active{background:var(--selected);border-left-color:var(--accent)}
.job-card.active .jid{color:var(--accent)}
.del-btn{position:absolute;top:6px;right:6px;background:none;border:none;
         color:var(--text-4);font-size:.85rem;cursor:pointer;padding:3px 6px;border-radius:4px;
         opacity:0;transition:opacity .15s,color .15s,background .15s;line-height:1}
.job-card:hover .del-btn,.del-btn:focus-visible{opacity:1}
.del-btn:hover{color:var(--danger);background:var(--danger-bg)}
.jid{font-size:.8rem;color:var(--text);font-weight:600;margin-bottom:4px;padding-right:22px;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jid.jid-bare{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;color:var(--text-2)}
.jid-id{color:var(--text-4);font-size:.68rem;margin-left:5px;font-weight:400;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.job-user{margin-left:6px;font-size:.68rem;color:var(--text-3);font-weight:400;
          font-family:ui-monospace,SFMono-Regular,Menlo,monospace;vertical-align:middle}
.job-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{font-size:.62rem;padding:2px 7px;border-radius:9px;font-weight:700;
       text-transform:uppercase;letter-spacing:.4px}
.badge-completed{background:var(--ok-bg);color:var(--ok)}
.badge-processing{background:var(--info-bg);color:var(--info)}
.badge-queued{background:var(--warn-bg);color:var(--warn)}
.badge-failed{background:var(--danger-bg);color:var(--danger)}
.badge-aborted{background:var(--orange-bg);color:var(--orange)}
.action-tag{font-size:.62rem;padding:2px 7px;border-radius:9px;font-weight:700;
            background:var(--accent-bg);color:var(--accent);letter-spacing:.3px;text-transform:uppercase}
.icon-row{display:flex;gap:9px;align-items:center;flex-shrink:0}
.icon{font-size:1.05rem;color:var(--text-5)}
.icon.ok{color:var(--ok)}
.icon.white{color:var(--text)}
.icon.dim{color:var(--text-5);opacity:.7}
.job-dur{font-size:.72rem;color:var(--text-2);display:inline-flex;align-items:center;gap:4px}
.jts{font-size:.76rem;color:var(--text-3);margin-top:5px;
     display:flex;justify-content:space-between;align-items:center;
     flex-wrap:nowrap;gap:6px}
.jts > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-progress{height:3px;background:var(--border-soft);margin-top:6px;border-radius:2px;overflow:hidden}
.job-progress-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .5s ease-out;min-width:0}
@keyframes progress-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.job-progress-bar.pulsing{width:100% !important;animation:progress-pulse 1.4s ease-in-out infinite}
#no-jobs{padding:24px 16px;color:var(--text-3);font-size:.84rem;text-align:center}

/* ── viewer column ── */
#viewer-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#empty-state{flex:1;display:flex;align-items:center;justify-content:center;
             flex-direction:column;gap:12px;color:var(--text-4)}
#empty-state .big{font-size:2.6rem}
#empty-state p{font-size:.88rem}
/* ── loading spinners ── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-sm{display:inline-block;width:11px;height:11px;
            border:2px solid var(--border);border-top-color:var(--accent);
            border-radius:50%;animation:spin .7s linear infinite;
            vertical-align:middle;margin-left:5px}
.loading-overlay{display:flex;flex-direction:column;align-items:center;
                 justify-content:center;gap:14px;flex:1;
                 color:var(--text-3);font-size:.84rem;padding:40px}
.spinner-lg{width:34px;height:34px;border:3px solid var(--border);
            border-top-color:var(--accent);border-radius:50%;
            animation:spin .75s linear infinite}

/* ── viewer (visible when job selected) ── */
#viewer{flex:1;display:none;flex-direction:column;overflow:hidden}

/* ── viewer header ── */
#v-hdr{background:var(--surface);padding:6px 12px;border-bottom:1px solid var(--border);
       display:flex;align-items:center;gap:8px;flex-shrink:0}
#v-jid{font-size:.84rem;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-jid b{color:var(--text-strong)}
#v-jid .v-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);font-size:.92em}
#v-jid .v-user{color:var(--text-3)}
#v-dur{font-size:.76rem;color:var(--text-3);white-space:nowrap}
#v-hdr .icon-btn{color:var(--accent)}
#v-edit-btn{margin-left:auto}
#v-download-wrap{position:relative;display:none;align-items:center}
#v-download-wrap.visible{display:flex}
#v-download-picker{display:none;position:absolute;top:calc(100% + 6px);
  right:0;z-index:200;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);
  flex-direction:column;overflow:hidden;min-width:150px}
#v-download-picker.open{display:flex}
#v-download-picker button{background:none;border:none;color:var(--text);font-family:inherit;
  padding:11px 16px;font-size:.84rem;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:10px;transition:background .12s;white-space:nowrap}
#v-download-picker button:hover{background:var(--hover)}
#v-download-picker button i{color:var(--accent);width:14px;text-align:center}

#v-comments{font-size:.78rem;color:var(--text-2);background:var(--surface-2);
  border-bottom:1px solid var(--border);padding:7px 14px;white-space:pre-wrap;
  word-break:break-word;display:none}

/* ── audio player ── */
#player-wrap{background:var(--surface);padding:6px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
audio{width:100%;height:36px;accent-color:var(--accent)}
#no-audio-msg{font-size:.76rem;color:var(--danger);padding:2px 0}

/* ── timeline ── */
#tl-wrap{background:var(--bg-sunk);padding:7px 14px 3px;border-bottom:1px solid var(--border);flex-shrink:0}
#timeline{position:relative;height:50px;background:var(--timeline-bg);border-radius:6px;
          cursor:crosshair;overflow:hidden;user-select:none}
.tl-empty{padding:18px;color:var(--text-4);font-size:.78rem}
.seg{position:absolute;top:5px;height:40px;border-radius:3px;opacity:.78;
     transition:opacity .12s;cursor:pointer}
.seg:hover{opacity:1;z-index:5}
.seg.active{opacity:1;z-index:10;top:2px;height:46px;
            box-shadow:0 0 8px 2px rgba(255,255,255,.55),0 0 0 2px var(--playhead) inset;
            filter:brightness(1.2)}
.seg.dimmed{opacity:.12}
.entry.entry-hidden{display:none}
#playhead{position:absolute;top:0;width:2px;height:100%;background:var(--playhead);
          z-index:20;pointer-events:none;transition:left .1s linear}
@keyframes gap-flash{
  0%  {background:#ffcc00;width:6px;box-shadow:0 0 14px 5px rgba(255,200,0,.85)}
  100%{background:var(--playhead);width:2px;box-shadow:none}
}
#playhead.gap-flash{animation:gap-flash .55s ease-out;transition:none}
#tl-labels{position:relative;height:16px;font-size:.64rem;color:var(--text-3);margin-top:2px}
#tl-labels span{position:absolute;white-space:nowrap;transform:translateX(-50%)}
#tl-labels span:first-child{transform:none}
#tl-labels span:last-child{transform:translateX(-100%)}

/* ── extend-job action bar ── */
#extend-bar{background:var(--surface-2);padding:6px 14px;border-bottom:1px solid var(--border);
            display:flex;gap:8px;flex-shrink:0;align-items:center;flex-wrap:wrap}
.extend-btn{padding:0 14px;height:34px;border-radius:8px;border:1px solid var(--accent-border);
            background:var(--accent-bg);color:var(--accent);font-size:.8rem;font-weight:600;
            font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
            transition:background .15s,border-color .15s}
.extend-btn:hover:not(:disabled){background:var(--accent-bg-hover);border-color:var(--accent-border-strong)}
.extend-btn:disabled{opacity:.45;cursor:not-allowed}

/* ── body row ── */
#v-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── sidebar ── */
#sidebar{width:230px;background:var(--surface);padding:10px 12px;
         overflow-y:auto;flex-shrink:0;
         display:flex;flex-direction:column;gap:12px}
/* draggable divider between the sidebar (speakers) and the transcript */
#sidebar-resizer{width:5px;flex-shrink:0;cursor:col-resize;background:var(--border);
                 z-index:5;transition:background .12s}
#sidebar-resizer:hover,#sidebar-resizer.dragging{background:var(--accent-border-strong)}
.panel-title{font-size:.7rem;color:var(--text-3);text-transform:uppercase;
             letter-spacing:1px;margin-bottom:6px;
             display:flex;justify-content:space-between;align-items:center}
.section-disabled{opacity:.28;pointer-events:none;user-select:none;filter:grayscale(.6)}
.spk-chip{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.82rem;
          word-break:break-word;cursor:pointer;border-radius:6px;padding:4px 6px;
          transition:opacity .15s,background .15s}
.spk-chip:hover{background:var(--hover)}
.spk-chip.filter-active{background:var(--selected);outline:1px solid var(--accent)}
.spk-chip.filter-inactive{opacity:.28}
.spk-chip-label{flex:1;min-width:0;cursor:pointer;display:flex;align-items:center;gap:7px}
.spk-chip-label b{font-weight:600}
.spk-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.spk-suggest-btn{flex-shrink:0;background:transparent;border:1px solid var(--border);
                 cursor:pointer;width:24px;height:24px;padding:0;font-size:.85rem;
                 font-weight:700;line-height:1;border-radius:5px;margin-left:4px;
                 display:inline-flex;align-items:center;justify-content:center;
                 transition:background .15s,color .15s,border-color .15s}
.spk-accept-btn{color:var(--ok);border-color:var(--ok-border)}
.spk-accept-btn:hover{background:var(--ok);color:var(--surface);border-color:var(--ok)}
.spk-reject-btn{color:var(--danger);border-color:var(--danger-border)}
.spk-reject-btn:hover{background:var(--danger);color:var(--surface);border-color:var(--danger)}
.spk-suggested{font-style:italic;opacity:.75}
.spk-suggested .spk-chip-label span{font-style:italic}

/* ── speaker forget / portfolio buttons ── */
#spk-forget-btn{background:none;border:none;color:var(--text-4);font-size:.7rem;cursor:pointer;
  font-family:inherit;padding:3px 7px;border-radius:4px;transition:color .15s,background .15s;
  white-space:nowrap;text-transform:none;letter-spacing:0}
#spk-forget-btn:hover{color:var(--orange);background:var(--orange-bg)}
#spk-add-portfolio-btn{display:block;width:100%;margin:8px 0 4px;
  background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);
  font-size:.76rem;font-family:inherit;cursor:pointer;padding:8px 10px;border-radius:7px;text-align:center;
  transition:background .15s,border-color .15s}
#spk-add-portfolio-btn:hover{background:var(--accent-bg-hover);border-color:var(--accent-border-strong)}

#spk-match-panel{margin:8px 0;padding:9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-3)}
.spk-match-hint{font-size:.72rem;color:var(--text-3);margin-bottom:7px}
.spk-match-row{display:flex;gap:6px}
#spk-match-group{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--border);color:var(--text);
  font-size:.76rem;font-family:inherit;border-radius:6px;padding:5px 6px;outline:none}
#spk-match-btn{white-space:nowrap;background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);
  font-size:.76rem;font-family:inherit;cursor:pointer;padding:5px 10px;border-radius:6px;
  transition:background .15s,border-color .15s}
#spk-match-btn:hover:not(:disabled){background:var(--accent-bg-hover);border-color:var(--accent-border-strong)}
#spk-match-btn:disabled{opacity:.5;cursor:not-allowed}
.threshold-row{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.74rem;color:var(--text-2)}
.threshold-row input{width:66px;background:var(--input-bg);border:1px solid var(--border);color:var(--text);
                      padding:4px 6px;border-radius:6px;font-size:.76rem;text-align:center;font-family:inherit}

/* speaker inline-rename popover */
#spk-rename-pop{position:fixed;z-index:9999;display:none;align-items:center;gap:8px;
                background:var(--surface);border:1px solid var(--border);border-radius:8px;
                padding:8px 10px;box-shadow:var(--shadow)}
.spk-rename-inp{background:var(--input-bg);border:1px solid var(--border);border-radius:6px;
                color:var(--text);padding:6px 9px;font-size:.86rem;width:180px;outline:none;font-family:inherit}
.spk-rename-inp:focus{border-color:var(--accent)}
.spk-rename-hint{color:var(--text-4);font-size:.72rem;white-space:nowrap}

/* ── transcript ── */
#transcript{flex:1;overflow-y:auto;padding:6px 14px;min-height:0}
/* When a summary is present, split the panel: summary stays pinned at the top
   and scrolls internally; the transcript entries scroll independently below. */
#transcript.has-summary{display:flex;flex-direction:column;overflow:hidden;padding:0}
#transcript.has-summary .summary-box{flex-shrink:0;margin:10px 14px 6px;
                                     max-height:45%;overflow-y:auto}
/* the divider between summary and transcript (drag to resize; hidden while folded) */
.summary-grip{flex-shrink:0;height:12px;margin:-2px 14px 2px;cursor:row-resize;touch-action:none;
              display:flex;align-items:center;justify-content:center}
.summary-grip::before{content:'';width:44px;height:4px;border-radius:2px;background:var(--border)}
.summary-grip:hover::before,.summary-grip:active::before{background:var(--accent)}
.summary-box.collapsed{height:auto !important}
.summary-box.collapsed + .summary-grip{display:none}
#transcript.has-summary .transcript-entries{flex:1;overflow-y:auto;
                                            padding:0 14px 6px;min-height:0}
#transcript.has-summary .transcript-header{margin-top:0;padding-top:4px;
                                           position:sticky;top:0;background:var(--bg);z-index:1}
/* In the split layout the summary-box does its own scrolling — drop the inner
   double scroller on .summary-body so users don't get two nested scrollbars. */
#transcript.has-summary .summary-body{max-height:none;overflow:visible}

/* the open job's progress (an extension too): only where the job list is hidden */
#v-progress{display:none}
.v-prog-text{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text-2);
             margin-bottom:6px}
.v-prog-text i{color:var(--accent)}
.v-prog-pct{margin-left:auto;font-weight:600;color:var(--text)}
.v-prog-track{height:6px;background:var(--bg-sunk);border-radius:3px;overflow:hidden}
.v-prog-bar{height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .4s}
.v-prog-bar.pulsing{width:100% !important;animation:progress-pulse 1.4s ease-in-out infinite}
@media (max-width:768px){
  #v-progress:not([hidden]){display:block;padding:10px 12px;background:var(--surface-2);
                            border-bottom:1px solid var(--border)}
}

/* focus mode (⤢ in the job header): the transcript gets the screen; the player stays */
#viewer.focus #v-comments,#viewer.focus #tl-wrap,#viewer.focus #extend-bar{display:none !important}
#v-focus-btn .fa-down-left-and-up-right-to-center{display:none}
#viewer.focus #v-focus-btn .fa-down-left-and-up-right-to-center{display:inline-block}
#viewer.focus #v-focus-btn .fa-up-right-and-down-left-from-center{display:none}
#viewer.focus #v-focus-btn{color:var(--accent)}
/* on a phone, focus mode also folds away the app header: the job header has the way back */
@media (max-width:768px){ body.viewer-open:has(#viewer.focus) #hdr{display:none} }
.error-box,.load-error{margin:10px 0 6px;padding:10px 14px;background:var(--danger-surface);
           border:1px solid var(--danger-border);border-radius:8px;color:var(--danger);
           font-size:.84rem;line-height:1.55}
.error-box i{margin-right:7px;font-size:.9rem}
.summary-box{margin:10px 0 2px;padding:12px 16px;background:var(--ok-surface);
             border:1px solid var(--ok-border);border-radius:8px}
.summary-title{font-size:.7rem;color:var(--ok);text-transform:uppercase;
               letter-spacing:1px;margin-bottom:8px;font-weight:700;
               display:flex;align-items:center;gap:6px;
               width:100%;background:none;border:none;padding:0;font-family:inherit;
               text-align:left;cursor:pointer}
.summary-chevron{margin-left:auto;font-size:.75rem;transition:transform .15s}
.summary-box.collapsed .summary-chevron{transform:rotate(180deg)}
.summary-box.collapsed .summary-title{margin-bottom:0}
.summary-box.collapsed .summary-body{display:none}
.summary-body{font-size:.86rem;line-height:1.65;color:var(--text-body);white-space:pre-wrap;
              max-height:320px;overflow-y:auto}

/* the summary's Markdown (markdown.js) */
.summary-body.md{white-space:normal}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md p{margin:0 0 .6em}
.md h3,.md h4,.md h5,.md h6{margin:.9em 0 .35em;color:var(--text-strong);line-height:1.3}
.md h3{font-size:1.05rem} .md h4{font-size:.98rem} .md h5,.md h6{font-size:.9rem}
.md ul,.md ol{margin:0 0 .6em;padding-left:1.4em}
.md li{margin:.15em 0}
.md li > ul,.md li > ol{margin:.15em 0 0}
.md strong{color:var(--text-strong)}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;
         background:var(--bg-sunk);padding:1px 5px;border-radius:4px}
.md pre{background:var(--bg-sunk);padding:8px 10px;border-radius:6px;overflow-x:auto;margin:0 0 .6em}
.md pre code{background:none;padding:0}
.md blockquote{margin:0 0 .6em;padding:2px 0 2px 10px;border-left:3px solid var(--ok-border);
               color:var(--text-2)}
.md hr{border:none;border-top:1px solid var(--ok-border);margin:.8em 0}
.md a{color:var(--accent)}
.md .md-table{overflow-x:auto;margin:0 0 .6em}
.md table{border-collapse:collapse;font-size:.82rem}
.md th,.md td{border:1px solid var(--ok-border);padding:4px 8px;text-align:left;vertical-align:top}
.md th{color:var(--text-strong)}
.transcript-header{font-size:.7rem;color:var(--text-3);text-transform:uppercase;
                   letter-spacing:1px;padding:10px 0 4px;
                   border-top:1px solid var(--border);margin-top:8px}
.entry{padding:6px 9px;margin-bottom:2px;border-radius:6px;cursor:pointer;
       display:flex;gap:9px;border-left:3px solid transparent;transition:background .15s}
.entry:hover{background:var(--hover)}
.entry.active{background:var(--selected);border-left-color:var(--accent);
              box-shadow:0 0 0 1px var(--accent-border) inset}
.entry.active .ts{color:var(--accent)}
.entry.active .txt{color:var(--text-strong);font-weight:600}
.ts{font-size:.78rem;color:var(--text-3);min-width:36px;padding-top:2px;flex-shrink:0;
    font-variant-numeric:tabular-nums}
.spk-tag{font-size:.68rem;padding:2px 7px;border-radius:9px;color:#fff;cursor:text;
         white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:1px;
         text-shadow:0 1px 1px rgba(0,0,0,.25)}
.spk-tag:hover{filter:brightness(1.15)}
.txt{font-size:.88rem;line-height:1.48;color:var(--text-body)}

/* ── modals (recorder, upload, edit, summarize) ── */
.modal{display:none;position:fixed;inset:0;background:var(--overlay);
       z-index:1000;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;
           padding:22px 26px;width:390px;max-width:95vw;max-height:95dvh;overflow-y:auto;
           display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
#summarize-box{width:460px}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-hdr h2{font-size:1rem;color:var(--accent);letter-spacing:.3px;margin:0;font-weight:600;
              display:flex;align-items:center;gap:8px}
#upload-box .modal-hdr h2{color:var(--primary)}
.modal-close{background:none;border:none;color:var(--text-4);font-size:1.05rem;cursor:pointer;
             width:var(--tap);height:var(--tap);border-radius:8px;transition:color .15s,background .15s;
             line-height:1;flex-shrink:0;margin:-6px -8px -6px 0}
.modal-close:hover{color:var(--text);background:var(--hover)}
.modal-desc{margin:0;color:var(--text-3);font-size:.84rem;line-height:1.5}
.modal-desc strong{color:var(--text)}
.modal-status{font-size:.76rem;color:var(--text-3);text-align:center;min-height:16px}
/* empty status / file-name lines take no room (no gaps around Name and Submit) */
.modal-status:empty,#upload-file-name:empty{display:none}
.dim{color:var(--text-4)}

.job-settings{display:flex;flex-direction:column;gap:9px;
              border-top:1px solid var(--border);padding-top:12px}
#editmeta-settings{border-top:none;padding-top:0}
.job-settings .row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-2)}
.job-settings .row > span:first-child{min-width:82px}
#editmeta-settings .row{align-items:flex-start}
#editmeta-settings .row > span:first-child{padding-top:6px}
.job-settings select,.job-settings input[type=text],.job-settings textarea{
  background:var(--input-bg);border:1px solid var(--border);color:var(--text);
  padding:6px 9px;border-radius:6px;font-size:.82rem;flex:1;min-width:0;
  font-family:inherit;outline:none;transition:border-color .15s}
.job-settings select:focus,.job-settings input[type=text]:focus,.job-settings textarea:focus{
  border-color:var(--accent-border-strong)}
.job-settings textarea{resize:vertical}
.job-settings input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:17px;height:17px}
.job-settings .row.check label{cursor:pointer}
.job-settings .row.check{flex-wrap:wrap;gap:8px 18px}
.check-item{display:inline-flex;align-items:center;gap:8px}

/* submit dialogs: name + Submit up front, the rest folded under Options */
.job-main{border-top:none;padding-top:0}
.job-options{border-top:1px solid var(--border);padding-top:10px}
.job-options summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text-2);
                     display:flex;align-items:center;gap:7px;list-style:none;user-select:none}
.job-options summary::-webkit-details-marker{display:none}
.job-options summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;
                            font-size:.7rem;color:var(--text-4);margin-left:auto;transition:transform .15s}
.job-options[open] summary::after{transform:rotate(180deg)}
.job-options summary:hover{color:var(--text)}
.job-options .opt-hint{font-weight:400;color:var(--text-4);font-size:.76rem;
                       overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.job-options .job-settings{border-top:none;padding-top:12px}

.submit-btn{padding:0;height:42px;background:var(--ok-btn);color:var(--on-ok);border:none;
            border-radius:8px;font-size:.88rem;font-weight:700;font-family:inherit;
            cursor:pointer;width:100%;transition:background .15s,opacity .15s}
.submit-btn:hover:not(:disabled){background:var(--ok-btn-hover)}
.submit-btn:disabled{opacity:.4;cursor:not-allowed}
.submit-btn.accent{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
.submit-btn.accent:hover:not(:disabled){background:var(--accent-bg-hover)}

/* recorder */
#rec-timer{font-size:2.4rem;font-family:'DSEG7Classic',monospace;color:var(--text);
           text-align:center;letter-spacing:2px;border-radius:8px;padding:4px 16px;
           transition:background .25s,color .25s}
.rec-pulse{background:#c44e52;color:#fff !important}
#rec-viz-wrap{display:flex;gap:6px;align-items:stretch}
#rec-vu{width:14px;flex-shrink:0;border-radius:3px;background:#0d1020;display:block}
#rec-viz{flex:1;height:112px;border-radius:6px;background:#0d1020;display:block}
#rec-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rec-btn{padding:0 18px;height:40px;border:none;border-radius:8px;font-size:.85rem;
         font-family:inherit;cursor:pointer;font-weight:600;transition:background .15s}
#btn-rec-start{background:var(--rec);color:#fff}
#btn-rec-start:hover:not(:disabled){background:var(--rec-hover)}
#btn-rec-start:disabled{opacity:.4;cursor:not-allowed}
#btn-rec-pause{background:#2a4a6a;color:#fff;display:none}
#btn-rec-pause:hover{background:#3a5a7a}
#btn-rec-stop{background:#3a5080;color:#fff;display:none}
#btn-rec-stop:hover{background:#4a6090}
#btn-rec-cancel{background:var(--hover);color:var(--text-2)}
#btn-rec-cancel:hover{color:var(--text);background:var(--selected)}
#rec-preview-wrap{display:none;flex-direction:column;gap:4px}
#rec-preview-wrap audio{width:100%;height:34px}
#rec-preview-label{font-size:.72rem;color:var(--text-3)}
#btn-rec-submit{display:none}

/* upload */
#upload-file{display:none}
#upload-file-btn{width:100%;padding:14px 0;background:var(--accent-bg);
                 border:1.5px dashed var(--accent-border-strong);border-radius:8px;color:var(--accent);
                 font-size:.86rem;text-align:center;cursor:pointer;
                 transition:background .15s;display:flex;align-items:center;
                 justify-content:center;gap:8px}
#upload-file-btn:hover,#upload-file-btn.drop-active{background:var(--accent-bg-hover)}
#upload-file-btn.drop-active{border-style:solid;border-color:var(--accent)}
#upload-file-name{font-size:.78rem;color:var(--text-2);text-align:center;min-height:16px;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}

/* Full-page file-drop overlay (dropping a media file anywhere on Browser) */
body.file-drop-active::after{
  content:attr(data-drop-label);
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  background:var(--overlay);
  color:var(--accent);font-size:1.4rem;font-weight:600;letter-spacing:1px;
  outline:3px dashed var(--accent);outline-offset:-14px;
}

/* summarize */
#summarize-box label{font-size:.8rem;color:var(--text-2)}
#summarize-prompt{background:var(--input-bg);border:1px solid var(--border);color:var(--text);
                  border-radius:8px;padding:9px 11px;font-size:.84rem;width:100%;
                  resize:vertical;min-height:90px;font-family:inherit;outline:none;
                  transition:border-color .15s}
#summarize-prompt:focus{border-color:var(--accent-border-strong)}
#summarize-prompt::placeholder{color:var(--text-5)}
#summarize-actions{display:flex;gap:10px;justify-content:flex-end}
.sum-cancel-btn{padding:0 18px;height:38px;border-radius:8px;border:1px solid var(--border);
                background:var(--surface);color:var(--text-2);font-size:.84rem;font-family:inherit;
                cursor:pointer;transition:color .15s,background .15s}
.sum-cancel-btn:hover{color:var(--text);background:var(--hover)}
.sum-run-btn{padding:0 20px;height:38px;border-radius:8px;border:none;
             background:var(--ok-btn);color:var(--on-ok);font-size:.84rem;font-weight:700;
             font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;
             transition:background .15s}
.sum-run-btn:hover:not(:disabled){background:var(--ok-btn-hover)}
.sum-run-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── mobile-only controls (hidden on desktop) ── */
#back-btn,#sidebar-toggle{display:none}
#sidebar-backdrop{display:none}

/* ── help modal ── */
#help-modal{display:none;position:fixed;inset:0;background:var(--overlay);
            z-index:1000;align-items:flex-start;justify-content:center;
            padding:40px 16px;overflow-y:auto}
#help-modal.open{display:flex}
#help-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;
          width:640px;max-width:100%;box-shadow:var(--shadow);
          display:flex;flex-direction:column;overflow:hidden}
#help-header{display:flex;justify-content:space-between;align-items:center;
             padding:12px 18px;border-bottom:1px solid var(--border);
             font-size:.92rem;color:var(--accent);font-weight:600;letter-spacing:.3px}
#help-body{padding:18px 22px}
#help-body > div{display:flex;flex-direction:column;gap:18px}
.help-section-title{font-size:.7rem;color:var(--accent);text-transform:uppercase;
                    letter-spacing:1px;margin-bottom:6px;font-weight:700}
.help-section p{font-size:.84rem;color:var(--text-2);line-height:1.65}
.help-section p + p{margin-top:6px}
.help-section p strong{color:var(--text)}
.help-section p em{color:var(--warn);font-style:normal}
.help-section p code,.help-section kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
                     background:var(--bg-sunk);padding:1px 5px;border-radius:4px;color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 768 px
   Strategy: single-panel. The job list fills the screen as cards; the viewer
   slides over it when body.viewer-open is set. Modals go full-page.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── toolbar: two big action buttons, full-width filter below ── */
  #toolbar{padding:10px 12px;gap:10px;flex-wrap:wrap}
  .tb-btn{flex:1;height:48px;font-size:.95rem;padding:0 12px}
  .tb-btn i{font-size:1.25rem}
  #search-wrap{order:3;flex-basis:100%}
  #search{width:100%;height:46px;font-size:1rem;padding-left:38px;border-radius:10px}
  #search-wrap i{left:14px;font-size:1rem}
  .whatsnew-banner{margin:10px 12px 0}

  /* ── single-panel columns ── */
  #cols{position:relative;margin-top:0;border-top:none}
  #col-resizer{display:none}
  #jobs-col{width:100% !important;border-right:none;background:var(--bg)}
  #jobs-hdr{padding:10px 16px 6px;border-bottom:none;font-size:.74rem}
  #jobs-list{padding:4px 12px 12px}
  #viewer-col{position:absolute;inset:0;display:none;flex-direction:column;
              background:var(--bg);z-index:10}
  body.viewer-open #viewer-col{display:flex}
  /* an open job gets the whole screen below the header */
  body.viewer-open #toolbar,body.viewer-open .whatsnew-banner{display:none}

  /* ── job list as touch cards ── */
  .job-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
            padding:14px 14px 12px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
  .job-card.active{border-left:1px solid var(--accent);border-color:var(--accent)}
  .jid{font-size:1rem;margin-bottom:7px;padding-right:40px;white-space:normal;
       display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .jid-id{font-size:.74rem}
  .badge,.action-tag{font-size:.7rem;padding:3px 9px}
  .job-dur{font-size:.82rem}
  .jts{font-size:.84rem;margin-top:9px}
  .icon-row{gap:13px}
  .icon{font-size:1.3rem}
  .del-btn{opacity:1;top:8px;right:8px;width:40px;height:40px;font-size:1.05rem;
           display:flex;align-items:center;justify-content:center;border-radius:10px}
  #load-more-btn{height:50px;padding:0;font-size:.86rem;margin:0 12px 12px;width:calc(100% - 24px);
                 border-radius:12px;border-top:1px dashed var(--border)}

  /* ── viewer ── */
  #back-btn,#sidebar-toggle{display:inline-flex}
  #v-hdr{padding:6px 6px;gap:2px}
  #v-hdr .icon-btn{min-width:44px}
  #v-edit-btn{margin-left:0}
  #v-jid{flex:1;font-size:.95rem}
  #v-jid .v-id:not(.v-id-only),#v-jid .v-user{display:none}
  #v-dur{font-size:.84rem;padding:0 4px}
  #v-comments{font-size:.86rem;padding:8px 14px}
  #player-wrap{padding:8px 12px 10px}
  audio{height:44px}
  #tl-wrap{padding:8px 12px 4px}
  #timeline{height:56px}
  .seg{height:46px}
  .seg.active{height:52px}
  #tl-labels{font-size:.7rem}
  #tl-labels span:nth-child(even){display:none}   /* 6 labels fit a phone, 11 do not */
  #extend-bar{padding:8px 12px;gap:8px}
  .extend-btn{height:44px;font-size:.88rem;padding:0 16px;flex:1;justify-content:center}
  .extend-btn i{font-size:1.1rem}
  #v-download-picker button{padding:14px 18px;font-size:.95rem}

  /* ── speakers: hidden drawer that slides in from the right ── */
  #v-body{position:relative;overflow:hidden}
  #sidebar-resizer{display:none}
  #sidebar{position:absolute;right:0;top:0;bottom:0;
           width:300px !important;max-width:88vw;padding:14px;
           transform:translateX(105%);transition:transform .25s ease;z-index:5;
           border-left:1px solid var(--border);box-shadow:-4px 0 20px rgba(0,0,0,.3)}
  #v-body.sidebar-open #sidebar{transform:translateX(0)}
  #sidebar-backdrop{display:block;position:absolute;inset:0;background:var(--overlay);
                    z-index:4;opacity:0;pointer-events:none;transition:opacity .25s}
  #v-body.sidebar-open #sidebar-backdrop{opacity:1;pointer-events:auto}
  .panel-title{font-size:.78rem}
  .spk-chip{font-size:1rem;min-height:46px;padding:6px 8px;margin-bottom:6px;
            border:1px solid var(--border);border-radius:10px}
  .spk-dot{width:14px;height:14px}
  .spk-suggest-btn{width:36px;height:36px;font-size:1.05rem;border-radius:8px}
  #spk-forget-btn{font-size:.82rem;padding:8px 10px}
  #spk-match-group,#spk-match-btn,.threshold-row input{height:42px;font-size:.9rem}
  .spk-match-hint,.threshold-row{font-size:.84rem}
  #spk-add-portfolio-btn{padding:12px;font-size:.9rem}

  /* ── transcript: readable on a phone ── */
  #v-body{overflow-y:auto}
  #transcript{padding:8px 10px}
  .entry{padding:10px;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px;
         background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:10px}
  .entry.active{box-shadow:none}
  .ts{font-size:.82rem;padding-top:3px}
  .spk-tag{font-size:.78rem;padding:4px 10px}
  .txt{flex-basis:100%;font-size:1rem;line-height:1.55}
  .spk-rename-inp{width:60vw;font-size:1rem;height:42px}

  /* ── modals: full-page ── */
  .modal{align-items:stretch}
  .modal-box,#summarize-box{width:100%;max-width:100%;max-height:none;min-height:100dvh;
             border-radius:0;border:none;padding:max(18px,env(safe-area-inset-top)) 18px 28px;gap:16px}
  .modal-hdr h2{font-size:1.1rem}
  .modal-close{font-size:1.3rem}
  .job-settings .row{font-size:.95rem;flex-wrap:wrap}
  .job-settings .row > span:first-child{min-width:100%}
  .job-settings .row.check > *{min-width:0}
  .job-settings select,.job-settings input[type=text],.job-settings textarea{
    height:46px;font-size:1rem;border-radius:10px;padding:0 12px;flex-basis:100%}
  .job-settings textarea{height:auto;min-height:80px;padding:10px 12px}
  .job-settings input[type=checkbox]{width:22px;height:22px}
  .submit-btn{height:52px;font-size:1rem;border-radius:12px}
  #rec-box{justify-content:space-evenly}
  #rec-timer{font-size:3.4rem}
  #rec-viz,#rec-vu{height:170px}
  .rec-btn{height:50px;font-size:.95rem;padding:0 18px}
  #upload-file-btn{padding:22px 0;font-size:1rem}
  #summarize-prompt{font-size:1rem;min-height:140px}
  .sum-cancel-btn,.sum-run-btn{height:48px;font-size:.95rem;flex:1;justify-content:center}

  #help-modal{padding:0}
  #help-box{width:100%;min-height:100dvh;border-radius:0;border:none}
  #help-header{font-size:1rem;padding:8px 10px 8px 16px}
  #help-body{padding:16px 18px 28px}
  .help-section p{font-size:.95rem}
}

/* touch: the rename popover has a ✓ button, the keyboard hint is noise */
@media (pointer:coarse){ .spk-rename-hint{display:none} }