/* mCaptions Browser – styles */

@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;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#12141d;color:#e0e0e0;
     height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ── header ── */
#hdr{background:#1a1d2e;padding:0 20px;border-bottom:1px solid #2a2d45;
     display:flex;align-items:center;gap:12px;flex-shrink:0;height:80px}
#hdr-auth{display:flex;align-items:center;gap:10px;flex-shrink:0}
#user-info{font-size:.78rem;color:#aaa;white-space:nowrap}
/* role badges (mirrors main.css) */
.role-badge{display:inline-block;padding:3px 9px;border-radius:4px;font-size:.68rem;
            font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.role-badge.role-demo{background:#6c757d;color:#fff}
.role-badge.role-full{background:#28a745;color:#fff}
.role-badge.role-power{background:#6f42c1;color:#fff}
.role-badge.role-admin{background:#faa847;color:#252e42}
#login-btn,#logout-btn{padding:4px 12px;border:1px solid #3a5080;border-radius:4px;
                        background:#1a1d2e;color:#7eb8f7;font-size:.75rem;cursor:pointer;
                        transition:background .15s}
#login-btn:hover{background:#253048}
#logout-btn{background:#2a1e1e;border-color:#804040;color:#f07070}
#logout-btn:hover{background:#3a2a2a}
.hdr-sep{flex:1}
#hdr-title-wrap{display:flex;flex-direction:column;justify-content:center}
#hdr-title{font-family:"Open Sans",sans-serif;font-size:1.5rem;color:#fff;
           font-weight:400;margin:0;padding:0;letter-spacing:.5px;white-space:nowrap}
#hdr-logo-link{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
#hdr-logo{height:69px;width:auto;display:block}
#hdr-logo-link:hover #hdr-logo{content:url('/static/Mama-ai_logo-NEGATIVE_orange_mama.png')}

/* ── toolbar (Record + search) ── */
#toolbar{background:#161928;padding:8px 18px;border-bottom:1px solid #2a2d45;
         display:flex;align-items:center;gap:14px;flex-shrink:0}
#search{background:#0e1018;border:1px solid #2a2d45;color:#e0e0e0;
        padding:6px 12px;border-radius:4px;font-size:.82rem;width:220px}
#search::placeholder{color:#888}

/* ── main columns ── */
#cols{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── job list ── */
#jobs-col{width:270px;min-width:180px;background:#161928;border-right:1px solid #2a2d45;
          display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
#jobs-hdr{padding:8px 12px 6px;border-bottom:1px solid #2a2d45;
          font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:1px;
          display:flex;justify-content:space-between;align-items:center}
#jobs-count{font-size:.7rem;color:#888}
#jobs-list{overflow-y:auto;flex:1}
#load-more-btn{width:100%;padding:7px 0;background:#1a1d2e;border:1px dashed #2a2d45;
               border-top:none;color:#666;font-size:.7rem;cursor:pointer;flex-shrink:0;
               transition:background .15s,color .15s}
#load-more-btn:hover{background:#1e2236;color:#aaa}
#load-more-btn:disabled{color:#444;cursor:default}
.job-card{padding:9px 12px;border-bottom:1px solid #1e2133;cursor:pointer;
          transition:background .15s;position:relative}
.job-card:hover{background:#1e2236}
.job-card.active{background:#253048;border-left:3px solid #7eb8f7}
.job-card.active .jid{color:#7eb8f7}
.del-btn{position:absolute;top:6px;right:6px;background:none;border:none;
         color:#666;font-size:.82rem;cursor:pointer;padding:2px 5px;border-radius:3px;
         opacity:0;transition:opacity .15s,color .15s,background .15s;line-height:1}
.job-card:hover .del-btn{opacity:1}
.del-btn:hover{color:#f57c7c;background:rgba(245,124,124,.15)}
.jid{font-size:.75rem;font-family:monospace;color:#aaa;margin-bottom:3px;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{font-size:.6rem;padding:1px 5px;border-radius:8px;font-weight:600;
       text-transform:uppercase;letter-spacing:.4px}
.badge-completed{background:#1e4d2b;color:#4caf50}
.badge-processing{background:#1e3d5c;color:#5ab4f5}
.badge-queued{background:#2e2a14;color:#c8a84b}
.badge-failed{background:#4d1e1e;color:#f57c7c}
.badge-aborted{background:#3a2a1e;color:#c8844b}
.action-tag{font-size:.6rem;padding:1px 6px;border-radius:8px;font-weight:600;
            background:#1e2a3a;color:#7eb8f7;letter-spacing:.3px;text-transform:uppercase}
.icon-row{display:flex;gap:8px;align-items:center;flex-shrink:0}
.icon{font-size:1.1rem;color:#3d4a5c}
.icon.ok{color:#4caf50}
.icon.white{color:#e0e0e0}
.icon.dim{color:#2e3848}
.job-dur{font-size:.7rem;color:#e0e0e0}
.jts{font-size:.76rem;color:#777;margin-top:4px;
     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:2px;background:#1e2438;margin-top:5px;border-radius:1px;overflow:hidden}
.job-progress-bar{height:100%;background:#7eb8f7;border-radius:1px;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:20px;color:#888;font-size:.8rem;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:10px;color:#666}
#empty-state .big{font-size:2.5rem}
/* ── loading spinners ────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-sm{display:inline-block;width:11px;height:11px;
            border:2px solid #2e3d5a;border-top-color:#7eb8f7;
            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:#555;font-size:.82rem;padding:40px}
.spinner-lg{width:34px;height:34px;border:3px solid #1e2a42;
            border-top-color:#7eb8f7;border-radius:50%;
            animation:spin .75s linear infinite}

#empty-state p{font-size:.85rem}

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

/* ── viewer header ── */
#v-hdr{background:#1a1d2e;padding:6px 14px;border-bottom:1px solid #2a2d45;
       display:flex;align-items:center;gap:10px;flex-shrink:0}
#v-jid{font-size:.78rem;font-family:monospace;color:#7eb8f7}
#v-dur{font-size:.72rem;color:#888}

/* ── audio player ── */
#player-wrap{background:#1a1d2e;padding:5px 14px 7px;border-bottom:1px solid #2a2d45;flex-shrink:0}
audio{width:100%;height:34px;accent-color:#7eb8f7}
#no-audio-msg{font-size:.72rem;color:#c55;padding:2px 0}

/* ── timeline ── */
#tl-wrap{background:#0e1018;padding:6px 14px 3px;border-bottom:1px solid #2a2d45;flex-shrink:0}
#timeline{position:relative;height:50px;background:#1a1d2e;border-radius:4px;
          cursor:crosshair;overflow:hidden;user-select:none}
.seg{position:absolute;top:5px;height:40px;border-radius:3px;opacity:.75;
     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 #fff inset;
            filter:brightness(1.35)}
.seg.dimmed{opacity:.12}
.spk-tag{cursor:pointer}
.spk-tag:hover{filter:brightness(1.25)}
.entry.entry-hidden{display:none}
#playhead{position:absolute;top:0;width:2px;height:100%;background:#fff;
          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:#fff;   width:2px;box-shadow:none}
}
#playhead.gap-flash{animation:gap-flash .55s ease-out;transition:none}
#tl-labels{position:relative;height:16px;font-size:.62rem;color:#777;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%)}

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

/* ── sidebar ── */
#sidebar{width:220px;background:#1a1d2e;padding:10px 12px;
         border-right:1px solid #2a2d45;overflow-y:auto;flex-shrink:0;
         display:flex;flex-direction:column;gap:12px}
.panel-title{font-size:.68rem;color:#999;text-transform:uppercase;
             letter-spacing:1px;margin-bottom:6px}
.section-disabled{opacity:.28;pointer-events:none;user-select:none;filter:grayscale(.6)}
.spk-chip{display:flex;align-items:flex-start;gap:7px;margin-bottom:4px;font-size:.78rem;
          word-break:break-word;cursor:pointer;border-radius:4px;padding:2px 4px;
          transition:opacity .15s,background .15s}
.spk-chip:hover{background:#1e2236}
.spk-chip.filter-active{background:#253048;outline:1px solid #7eb8f7}
.spk-chip.filter-inactive{opacity:.28}
.spk-dot{margin-top:3px}
.spk-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── profile upload ── */
#upload-sec label{display:block;font-size:.72rem;color:#aaa;margin-bottom:5px}
#profile-input{display:none}
#upload-btn{display:block;width:100%;padding:5px 0;background:#253048;border:1px dashed #3a5080;
            border-radius:4px;color:#7eb8f7;font-size:.72rem;text-align:center;
            cursor:pointer;transition:background .15s}
#upload-btn:hover{background:#2e3e62}
.threshold-row{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.72rem;color:#aaa}
.threshold-row input{width:62px;background:#0e1018;border:1px solid #2a2d45;color:#e0e0e0;
                      padding:3px 6px;border-radius:4px;font-size:.72rem;text-align:center}
#upload-status{font-size:.68rem;color:#888;margin-top:4px;min-height:14px}

/* ── matrix ── */
#matrix-sec{display:none}
#matrix-sec img{max-width:100%;border-radius:4px;cursor:pointer;margin-top:4px}
#matrix-sec img:hover{opacity:.88}

/* ── transcript ── */
#transcript{flex:1;overflow-y:auto;padding:6px 14px}
.error-box{margin:10px 0 6px;padding:10px 14px;background:#3a1212;
           border:1px solid #7a2828;border-radius:6px;color:#f57c7c;
           font-size:.82rem;line-height:1.55}
.error-box i{margin-right:7px;font-size:.9rem}
.summary-box{margin:10px 0 2px;padding:12px 16px;background:#192b1e;
             border:1px solid #2a5a2a;border-radius:6px}
.summary-title{font-size:.68rem;color:#4caf50;text-transform:uppercase;
               letter-spacing:1px;margin-bottom:8px;
               display:flex;align-items:center;gap:6px}
.summary-body{font-size:.82rem;line-height:1.65;color:#ccc;white-space:pre-wrap;
              max-height:320px;overflow-y:auto}
.transcript-header{font-size:.68rem;color:#666;text-transform:uppercase;
                   letter-spacing:1px;padding:10px 0 4px;
                   border-top:1px solid #2a2d45;margin-top:8px}
.entry{padding:5px 9px;margin-bottom:2px;border-radius:5px;cursor:pointer;
       display:flex;gap:9px;border-left:3px solid transparent;transition:background .15s}
.entry:hover{background:#1e2236}
.entry.active{background:#253048;border-left-color:#7eb8f7;
              box-shadow:0 0 0 1px #3a5080 inset}
.entry.active .ts{color:#7eb8f7}
.entry.active .txt{color:#fff;font-weight:600}
.ts{font-size:.78rem;color:#777;min-width:36px;padding-top:2px;flex-shrink:0}
.spk-tag{font-size:.65rem;padding:2px 6px;border-radius:8px;color:#fff;
         white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:1px}
.txt{font-size:.83rem;line-height:1.43;color:#bbb}

/* ── recorder modal ── */
#rec-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
           z-index:1000;align-items:center;justify-content:center}
#rec-modal.open{display:flex}
#rec-box{background:#1a1d2e;border:1px solid #2a2d45;border-radius:10px;
         padding:24px 28px;width:370px;max-width:95vw;display:flex;
         flex-direction:column;gap:14px;box-shadow:0 8px 32px rgba(0,0,0,.6)}
#rec-box h2{font-size:.92rem;color:#7eb8f7;letter-spacing:1px;margin:0}
#rec-timer{font-size:2.4rem;font-family:'DSEG7Classic',monospace;color:#e0e0e0;
           text-align:center;letter-spacing:2px;border-radius:6px;padding:4px 16px;
           transition:background .25s,color .25s}
.rec-pulse{background:#c44e52;color:#fff}
#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:5px;background:#0d1020;display:block}
#rec-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rec-btn{padding:8px 18px;border:none;border-radius:5px;font-size:.82rem;
         cursor:pointer;font-weight:600;transition:background .15s}
#btn-rec-start{background:#c44e52;color:#fff}
#btn-rec-start:hover:not(:disabled){background:#e05560}
#btn-rec-start:disabled{background:#5a2e30;color:#888;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:#1e2133;color:#888}
#btn-rec-cancel:hover{color:#ccc;background:#2a2d45}
#rec-preview-wrap{display:none;flex-direction:column;gap:4px}
#rec-preview-wrap audio{width:100%;height:32px;accent-color:#7eb8f7}
#rec-preview-label{font-size:.68rem;color:#555}
#rec-settings{display:flex;flex-direction:column;gap:8px;
              border-top:1px solid #2a2d45;padding-top:10px}
#rec-settings .row{display:flex;align-items:center;gap:8px;font-size:.75rem;color:#aaa}
#rec-settings select{background:#0e1018;border:1px solid #2a2d45;color:#e0e0e0;
                      padding:3px 8px;border-radius:4px;font-size:.75rem;flex:1}
#rec-settings input[type=checkbox]{accent-color:#7eb8f7;cursor:pointer}
#btn-rec-submit{display:none;padding:9px 0;background:#2a6a2a;color:#4caf50;
                border:none;border-radius:5px;font-size:.83rem;font-weight:600;
                cursor:pointer;width:100%;transition:background .15s}
#btn-rec-submit:hover:not(:disabled){background:#3a8a3a}
#btn-rec-submit:disabled{background:#1e2e1e;color:#555;cursor:not-allowed}
#rec-status{font-size:.72rem;color:#888;text-align:center;min-height:16px}
#open-rec-btn{background:#b03040;border:none;color:#fff;
              padding:10px 24px;border-radius:6px;font-size:.82rem;font-weight:700;
              cursor:pointer;white-space:nowrap;letter-spacing:.3px;
              box-shadow:0 2px 8px rgba(180,48,64,.45);transition:background .15s,box-shadow .15s;
              display:flex;align-items:center;gap:8px}
#open-rec-btn:hover{background:#d03848;box-shadow:0 4px 14px rgba(200,56,72,.6)}
#open-upload-btn{background:#8a6800;border:none;color:#fff;
                 padding:10px 24px;border-radius:6px;font-size:.82rem;font-weight:700;
                 cursor:pointer;white-space:nowrap;letter-spacing:.3px;
                 box-shadow:0 2px 8px rgba(140,104,0,.45);transition:background .15s,box-shadow .15s;
                 display:flex;align-items:center;gap:8px}
#open-upload-btn:hover{background:#b08800;box-shadow:0 4px 14px rgba(180,136,0,.6)}

/* ── upload modal ── */
#upload-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
              z-index:1000;align-items:center;justify-content:center}
#upload-modal.open{display:flex}
#upload-box{background:#1a1d2e;border:1px solid #2a2d45;border-radius:10px;
            padding:24px 28px;width:370px;max-width:95vw;display:flex;
            flex-direction:column;gap:14px;box-shadow:0 8px 32px rgba(0,0,0,.6)}
#upload-box h2{font-size:.92rem;color:#faa847;letter-spacing:1px;margin:0}
#upload-hdr{display:flex;justify-content:space-between;align-items:center}
#upload-close-btn{background:none;border:none;color:#666;font-size:1rem;cursor:pointer;
                  padding:2px 8px;border-radius:3px;transition:color .15s;line-height:1}
#upload-close-btn:hover{color:#ccc}
#upload-file{display:none}
#upload-file-btn{display:block;width:100%;padding:12px 0;background:#253048;
                 border:1px dashed #3a5080;border-radius:5px;color:#7eb8f7;
                 font-size:.78rem;text-align:center;cursor:pointer;
                 transition:background .15s;display:flex;align-items:center;
                 justify-content:center;gap:8px}
#upload-file-btn:hover{background:#2e3e62}
#upload-file-name{font-size:.72rem;color:#aaa;text-align:center;min-height:16px;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
#upload-settings{display:flex;flex-direction:column;gap:8px;
                 border-top:1px solid #2a2d45;padding-top:10px}
#upload-settings .row{display:flex;align-items:center;gap:8px;font-size:.75rem;color:#aaa}
#upload-settings select{background:#0e1018;border:1px solid #2a2d45;color:#e0e0e0;
                         padding:3px 8px;border-radius:4px;font-size:.75rem;flex:1}
#upload-settings input[type=checkbox]{accent-color:#7eb8f7;cursor:pointer}
#btn-upload-submit{padding:9px 0;background:#2a6a2a;color:#4caf50;border:none;
                   border-radius:5px;font-size:.83rem;font-weight:600;
                   cursor:pointer;width:100%;transition:background .15s}
#btn-upload-submit:hover:not(:disabled){background:#3a8a3a}
#btn-upload-submit:disabled{background:#1e2e1e;color:#555;cursor:not-allowed}
#upload-modal-status{font-size:.72rem;color:#888;text-align:center;min-height:16px}

/* ── mobile-only controls (hidden on desktop) ── */
#back-btn,#sidebar-toggle{display:none;align-items:center;justify-content:center;
  background:none;border:none;color:#7eb8f7;font-size:1rem;cursor:pointer;
  padding:4px 8px;border-radius:5px;transition:background .15s;flex-shrink:0}
#back-btn:hover,#sidebar-toggle:hover{background:#253048}
#sidebar-backdrop{display:none}

/* ── help button ── */
#open-help-btn{background:none;border:1px solid #2a2d45;color:#5a7aaa;
               padding:6px 10px;border-radius:6px;font-size:1rem;cursor:pointer;
               transition:color .15s,border-color .15s,background .15s;line-height:1}
#open-help-btn:hover{color:#7eb8f7;border-color:#4a6090;background:#1e2236}

/* ── help modal ── */
#help-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);
            z-index:1000;align-items:flex-start;justify-content:center;
            padding:40px 16px;overflow-y:auto}
#help-modal.open{display:flex}
#help-box{background:#1a1d2e;border:1px solid #2a2d45;border-radius:10px;
          width:600px;max-width:100%;box-shadow:0 8px 32px rgba(0,0,0,.6);
          display:flex;flex-direction:column;overflow:hidden}
#help-header{display:flex;justify-content:space-between;align-items:center;
             padding:14px 18px;border-bottom:1px solid #2a2d45;
             font-size:.88rem;color:#7eb8f7;font-weight:600;letter-spacing:.3px}
#help-header button{background:none;border:none;color:#666;font-size:1rem;
                    cursor:pointer;padding:2px 6px;border-radius:3px;transition:color .15s}
#help-header button:hover{color:#ccc}
#help-body{padding:18px 22px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.help-section-title{font-size:.68rem;color:#7eb8f7;text-transform:uppercase;
                    letter-spacing:1px;margin-bottom:6px;font-weight:700}
.help-section p{font-size:.8rem;color:#aaa;line-height:1.65}
.help-section p strong{color:#ddd}
.help-section p em{color:#c8a84b;font-style:normal}
.help-section p code{font-family:monospace;font-size:.77rem;background:#0e1018;
                     padding:1px 5px;border-radius:3px;color:#7eb8f7}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 768 px
   Strategy: single-panel. Jobs column fills screen; viewer slides over it
   when body.viewer-open is set.  Recorder / upload / help go full-page.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── viewport: use dvh so browser chrome doesn't clip the bottom ── */
  body{height:100dvh}

  /* ── header ── */
  #hdr{height:52px;padding:0 10px;gap:8px}
  #hdr-title{font-size:.95rem}
  #hdr-logo{height:36px}
  #user-info,#role-badge{display:none}

  /* ── toolbar ── */
  #toolbar{padding:6px 10px;gap:8px;flex-wrap:wrap}
  #search{flex:1;min-width:80px;width:auto}
  #open-rec-btn,#open-upload-btn{padding:8px 12px;font-size:.76rem}

  /* ── single-panel columns ── */
  #cols{position:relative}
  #jobs-col{width:100%;border-right:none}
  #viewer-col{
    position:absolute;inset:0;
    display:none;flex-direction:column;
    background:#12141d;z-index:10
  }
  body.viewer-open #viewer-col{display:flex}

  /* ── viewer header: show mobile buttons ── */
  #back-btn,#sidebar-toggle{display:flex}
  #v-hdr{padding:6px 8px;gap:6px}
  #v-jid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ── sidebar: hidden drawer that slides in from the right ── */
  #v-body{position:relative;overflow:hidden}
  #sidebar{
    position:absolute;right:0;top:0;bottom:0;
    width:260px;max-width:85vw;
    transform:translateX(105%);
    transition:transform .25s ease;
    z-index:5;
    border-right:none;border-left:1px solid #2a2d45;
    box-shadow:-4px 0 20px rgba(0,0,0,.5)
  }
  #v-body.sidebar-open #sidebar{transform:translateX(0)}
  #sidebar-backdrop{
    display:block;
    position:absolute;inset:0;
    background:rgba(0,0,0,.55);
    z-index:4;
    opacity:0;pointer-events:none;
    transition:opacity .25s
  }
  #v-body.sidebar-open #sidebar-backdrop{opacity:1;pointer-events:auto}

  /* ── touch targets ── */
  .job-card{padding:12px 12px 10px}
  .del-btn{opacity:1}                    /* always visible, no hover needed */
  .rec-btn{min-height:46px;font-size:.88rem;padding:10px 16px}
  #load-more-btn{padding:13px 0;font-size:.76rem}
  audio{height:38px}

  /* ── recorder: full-page ── */
  #rec-modal{padding:0;align-items:flex-start}
  #rec-box{
    width:100%;max-width:100%;min-height:100dvh;
    border-radius:0;border:none;
    padding:28px 20px 36px;
    justify-content:space-evenly
  }
  #rec-timer{font-size:3.4rem}
  #rec-viz{height:180px}
  #rec-vu{height:180px}
  #rec-box h2{font-size:1.05rem;text-align:center}

  /* ── upload modal: full-page ── */
  #upload-modal{padding:0;align-items:flex-start}
  #upload-box{
    width:100%;max-width:100%;min-height:100dvh;
    border-radius:0;border:none;
    padding:36px 20px;
    justify-content:flex-start;gap:18px
  }
  #upload-file-btn{padding:16px 0;font-size:.85rem}

  /* ── help modal: full-page ── */
  #help-modal{padding:0}
  #help-box{width:100%;min-height:100dvh;border-radius:0;border:none}
  #help-body{max-height:none}

  /* ── misc viewer tweaks ── */
  #tl-wrap{padding:6px 10px 3px}
  #v-body{overflow-y:auto}          /* allow scrolling when sidebar is closed */
  #transcript{padding:6px 10px}
}