/* Scale AI Pros — shared 2026 UX layer: dark mode, command palette, loading bar.
   Works on DocuScale + AI Transcriber (shared class names + CSS vars). */

/* ---------- top loading bar ---------- */
#sap-nprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;opacity:0;
  background:linear-gradient(90deg,var(--blue,#1E50C8),var(--navy,#0F2F74));
  box-shadow:0 0 10px var(--blue,#1E50C8);transition:width .2s ease,opacity .35s ease}
#sap-nprog.on{opacity:1}

/* ---------- floating control buttons ---------- */
.sap-fab{position:fixed;z-index:9998;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line,#e6e9f2);background:#fff;font-size:17px;cursor:pointer;
  box-shadow:0 8px 20px rgba(15,47,116,.18);display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease}
.sap-fab:hover{transform:translateY(-2px)}
#sap-theme{right:14px;bottom:14px}
#sap-cmd{right:14px;bottom:66px;font-size:14px;font-weight:700}

/* ---------- command palette ---------- */
#sap-cmdk{position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:10000;display:none;
  align-items:flex-start;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#sap-cmdk.on{display:flex}
#sap-cmdk .box{margin-top:11vh;width:min(580px,92vw);background:#fff;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--line,#e6e9f2)}
#sap-cmdk input{width:100%;box-sizing:border-box;border:0;padding:16px 18px;font-size:16px;outline:none;
  border-bottom:1px solid var(--line,#e6e9f2);background:transparent;color:inherit}
#sap-cmdk ul{list-style:none;margin:0;padding:6px;max-height:52vh;overflow:auto}
#sap-cmdk li{padding:11px 14px;border-radius:10px;cursor:pointer;font-size:14px;display:flex;gap:10px;align-items:center}
#sap-cmdk li .k{margin-left:auto;font-size:11px;opacity:.6}
#sap-cmdk li.sel{background:var(--blue,#1E50C8);color:#fff}
#sap-cmdk li.sel .k{opacity:.85}
#sap-cmdk .empty{padding:18px;color:var(--muted,#64748b);font-size:14px;text-align:center}
#sap-cmdk .hint{padding:9px 14px;font-size:12px;color:var(--muted,#64748b);border-top:1px solid var(--line,#e6e9f2);display:flex;gap:14px}
#sap-cmdk kbd{background:#f1f4fb;border:1px solid var(--line,#e6e9f2);border-radius:5px;padding:1px 6px;font-size:11px;font-family:inherit}

/* ---------- DARK MODE (flips CSS vars + shared hardcoded surfaces) ---------- */
:root[data-theme="dark"]{--ink:#e6ebf5;--muted:#93a1c0;--line:#28334d;--bg:#0c1322;--blue:#5b86ff;--navy:#223a73}
:root[data-theme="dark"] body{background:#0c1322;color:var(--ink)}
:root[data-theme="dark"] .topbar{background:#111b30 !important;border-bottom-color:#28334d !important}
:root[data-theme="dark"] .card{background:#111b30 !important;border-color:#28334d !important;box-shadow:none !important;color:var(--ink)}
:root[data-theme="dark"] .card.note{background:#2a2410 !important;border-color:#6b5a1a !important;color:#f3d27a !important}
:root[data-theme="dark"] #drop{background:#0e1830 !important;border-color:#30406a !important;color:var(--muted) !important}
:root[data-theme="dark"] #drop:hover,:root[data-theme="dark"] #drop.hot{background:#13224a !important}
:root[data-theme="dark"] select,:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .search,:root[data-theme="dark"] .mini{background:#0e1830 !important;color:var(--ink) !important;border-color:#30406a !important}
:root[data-theme="dark"] .tab{background:#0e1830 !important;border-color:#30406a !important;color:var(--ink) !important}
:root[data-theme="dark"] .tab.on{background:var(--blue) !important;border-color:var(--blue) !important;color:#07122b !important}
:root[data-theme="dark"] .dl a{background:#0e1830 !important;border-color:#30406a !important;color:var(--ink) !important}
:root[data-theme="dark"] .seg.active{background:#13224a !important}
:root[data-theme="dark"] .txt:focus{background:#2a2410 !important}
:root[data-theme="dark"] .track{background:#1b2742 !important}
:root[data-theme="dark"] footer,:root[data-theme="dark"] .muted{color:var(--muted) !important}
:root[data-theme="dark"] .sap-fab{background:#111b30;border-color:#30406a;color:var(--ink)}
:root[data-theme="dark"] #sap-cmdk .box{background:#111b30;border-color:#30406a;color:var(--ink)}
:root[data-theme="dark"] #sap-cmdk kbd{background:#0e1830;border-color:#30406a}
:root[data-theme="dark"] #sap-cmdk input{border-bottom-color:#28334d}
/* tiles / generic white surfaces that use inline background:#fff */
:root[data-theme="dark"] [style*="background:#fff"],:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:white"]{background:#111b30 !important;color:var(--ink) !important}
/* class-based white surfaces (tiles, chips, chat, code, drops, tabs, library items) */
:root[data-theme="dark"] .tile{background:#111b30 !important;border-color:#28334d !important;box-shadow:none !important}
:root[data-theme="dark"] .tile:hover{border-color:var(--blue) !important}
:root[data-theme="dark"] .tile .ds,:root[data-theme="dark"] .muted,:root[data-theme="dark"] h4{color:#93a1c0 !important}
:root[data-theme="dark"] .kw{background:#17244a !important;color:#9db4ff !important}
:root[data-theme="dark"] .msg.ai,:root[data-theme="dark"] .chatlog{background:#17223d !important;color:var(--ink) !important}
:root[data-theme="dark"] pre{background:#0e1830 !important;border-color:#30406a !important;color:var(--ink) !important}
:root[data-theme="dark"] .drop,:root[data-theme="dark"] #drop{background:#0e1830 !important;border-color:#30406a !important;color:#93a1c0 !important}
:root[data-theme="dark"] .tabb{background:#0e1830 !important;border-color:#30406a !important;color:var(--ink) !important}
:root[data-theme="dark"] .tabb.on{background:var(--blue) !important;border-color:var(--blue) !important;color:#07122b !important}
:root[data-theme="dark"] .item{background:#111b30 !important;border-color:#28334d !important;color:var(--ink) !important}
:root[data-theme="dark"] .item:hover{border-color:var(--blue) !important}
:root[data-theme="dark"] .chap{border-left-color:#30406a !important}
:root[data-theme="dark"] #prev{color:#9db4ff !important}

/* ---------- clickable AI citation badges (timestamps / pages) ---------- */
.tsref,.pageref{display:inline-block;background:var(--blue,#1E50C8);color:#fff;border-radius:6px;
  padding:0 6px;margin:0 1px;font-size:.85em;font-weight:700;cursor:pointer;line-height:1.5;white-space:nowrap}
.tsref:hover,.pageref:hover{filter:brightness(1.12);text-decoration:none}
:root[data-theme="dark"] .tsref,:root[data-theme="dark"] .pageref{background:#5b86ff;color:#07122b}

/* ---------- page snippet popover (DocuScale AI citations) ---------- */
#pgpop{position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:10001;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#pgpop .box{width:min(640px,92vw);max-height:76vh;background:#fff;border:1px solid var(--line,#e6e9f2);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4)}
#pgpop .h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line,#e6e9f2)}
#pgpop .x{cursor:pointer;font-size:16px;color:var(--muted,#64748b)}
#pgpop pre{margin:0;padding:16px;overflow:auto;white-space:pre-wrap;word-wrap:break-word;font:13px/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--ink,#15213b)}
:root[data-theme="dark"] #pgpop .box{background:#111b30;border-color:#30406a}

/* ---------- voice / read-aloud buttons ---------- */
.voicebtn{border:1px solid var(--line,#e6e9f2);background:#fff;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:14px;line-height:1}
.voicebtn:hover{border-color:var(--blue,#1E50C8)}
.voicebtn.rec{background:#e11d48;border-color:#e11d48;color:#fff;animation:sappulse 1s infinite}
:root[data-theme="dark"] .voicebtn{background:#0e1830;border-color:#30406a;color:var(--ink)}
@keyframes sappulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}50%{box-shadow:0 0 0 6px rgba(225,29,72,0)}}
h4 .voicebtn,.aihead .voicebtn{padding:2px 7px;font-size:12px;vertical-align:middle;margin-left:6px}

/* ---------- extracted data table (DocuScale smart extract) ---------- */
.exttbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.exttbl th,.exttbl td{border:1px solid var(--line,#e6e9f2);padding:6px 9px;text-align:left;vertical-align:top}
.exttbl th{background:#f1f4fb;font-weight:700}
:root[data-theme="dark"] .exttbl th{background:#17244a}
:root[data-theme="dark"] .exttbl th,:root[data-theme="dark"] .exttbl td{border-color:#30406a}

/* web-page source: no timestamps to show */
.webpage .ts{display:none}
.webpage .seg{padding:5px 0}

/* ---------- side-by-side translation review ---------- */
.sbs .sbsrow,.sbs .sbshead{display:grid;grid-template-columns:52px 1fr 1fr;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line,#e6e9f2);align-items:start}
.sbs .sbshead{color:var(--muted,#64748b);font-size:12px;border-bottom:2px solid var(--line,#e6e9f2);font-weight:700}
.sbs .ts{cursor:pointer;color:var(--muted,#64748b);font-size:12px;font-variant-numeric:tabular-nums}
.sbs .col.tr{color:var(--ink,#15213b)}
:root[data-theme="dark"] .sbs .sbsrow,:root[data-theme="dark"] .sbs .sbshead{border-color:#28334d}
@media(max-width:640px){.sbs .sbsrow,.sbs .sbshead{grid-template-columns:1fr;gap:3px}.sbs .col.tr{padding-left:10px;border-left:3px solid var(--blue,#1E50C8)}.sbs .sbshead span,.sbs .sbshead .col:last-child{display:none}}

/* ---------- per-line delete (Descript-style transcript editing) ---------- */
.seg{position:relative}
.segdel{opacity:0;cursor:pointer;color:#e11d48;font-weight:700;margin-left:8px;padding:0 5px;border-radius:5px;user-select:none}
.seg:hover .segdel{opacity:.65}
.segdel:hover{opacity:1 !important;background:rgba(225,29,72,.14)}

@media (prefers-reduced-motion: reduce){
  #sap-nprog,.sap-fab,.voicebtn.rec{transition:none;animation:none}
}