/*
 * DocketVox — Voice Notes for Attorneys
 * Dark / light, mobile-first, one-screen design.
 */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
:root{
  --bg:#111318;
  --bg-card:#1a1d24;
  --bg-input:#1a1d24;
  --text:#e2e4e8;
  --text-dim:#6b7280;
  --text-muted:#6b7280;
  --accent:#8b9dc9;
  --accent-hover:#6f85b8;
  --accent-bright:#b8c7e8;
  --red:#ef4444;
  --red-bg:#dc2626;
  --border:#2a2d36;
  --gradient-recording:linear-gradient(135deg,#dc2626,#ef4444);
  --radius:12px;
  --radius-lg:20px;
  --toast-success-bg:#1f3a2e;
  --toast-success-text:#6ee7b7;
  --toast-error-bg:#3a1818;
  --toast-error-text:#fca5a5;
  --toast-info-bg:#1a2e46;
  --toast-info-text:#93c5fd;
}
[data-theme="light"]{
  --bg:#f3f4f6;
  --bg-card:#ffffff;
  --bg-input:#ffffff;
  --text:#111318;
  --text-dim:#6b7280;
  --text-muted:#6b7280;
  --accent:#5c72a8;
  --accent-hover:#4a5f93;
  --accent-bright:#5c72a8;
  --border:#d1d5db;
  --toast-success-bg:#d1fae5;
  --toast-success-text:#065f46;
  --toast-error-bg:#fee2e2;
  --toast-error-text:#991b1b;
  --toast-info-bg:#dbeafe;
  --toast-info-text:#1e40af;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#sticky-banner{
  position:fixed;top:0;left:0;width:100%;
  z-index:9999;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:none;
}
#sticky-banner.visible{
  display:block !important;
}
#sticky-banner .brand-inner{
  display:flex;align-items:center;
  width:100%;max-width:480px;margin:0 auto;
  padding:6px 16px;
}
#sticky-banner .banner-col-left{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:0;
}
#sticky-banner .brand-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;flex-shrink:0;
}
#sticky-banner .brand-text{
  font-size:15px;font-weight:800;
  letter-spacing:-.3px;
  white-space:nowrap;
}
#sticky-banner .brand-text .docket{color:var(--text)}
#sticky-banner .brand-text .vox{color:var(--accent)}
#sticky-banner .brand-sub{
  font-size:10px;color:var(--text-muted);
  line-height:1.35;
}
#sticky-banner .brand-sub.line2{display:block !important}
#sticky-banner .banner-col-icons{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
  margin:0 8px;
}
#account-chip-container{display:flex;flex-direction:column;align-items:center;gap:3px}
#account-chip-container .sub-badge{margin-left:0}

/* PRF fallback notice — Safari/Firefox lack WebAuthn PRF, show passphrase-fallback truth */
#prf-fallback-notice{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 16px;font-size:13px;font-weight:600;
  background:var(--accent);color:#fff;
  text-align:center;
}
#prf-fallback-notice button{
  background:none;border:none;color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1;
}
#prf-fallback-notice button:hover{opacity:.75}

#sticky-banner .bell-btn,#sticky-banner .settings-gear,#sticky-banner #theme-toggle{
  background:none;border:none;font-size:16px;
  cursor:pointer;padding:3px;color:var(--text);
  position:relative;
}
#sticky-banner .bell-badge{
  position:absolute;top:0;right:0;
  background:var(--red,#e53e3e);color:#fff;
  font-size:8px;font-weight:700;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#sticky-banner .auth-btn{
  padding:3px 8px;border-radius:12px;
  font-size:9px;font-weight:600;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text);
  cursor:pointer;
  display:flex;align-items:center;gap:3px;
}
#sticky-banner .account-chip{padding:1px;gap:1px;border-radius:50px}
#sticky-banner .account-chip .provider-icon{width:22px;height:22px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#sticky-banner .account-chip .provider-icon svg{width:22px;height:22px;display:block}
#sticky-banner .account-chip .username-label.compact{width:20px;height:20px;font-size:11px;font-weight:700}
#sticky-banner .account-chip .logout-icon{width:20px;height:20px;font-size:12px;font-weight:700}
/* Dark mode: white outlines on banner icons and pill (default is dark) */
:root:not([data-theme="light"]) #sticky-banner .bell-btn,
:root:not([data-theme="light"]) #sticky-banner .settings-gear,
:root:not([data-theme="light"]) #sticky-banner #theme-toggle{
  border:2px solid rgba(255,255,255,0.7) !important;
  border-radius:10px;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
}
:root:not([data-theme="light"]) #sticky-banner .account-chip{
  border:2px solid rgba(255,255,255,0.7) !important;
  background:rgba(255,255,255,0.08) !important;
}
:root:not([data-theme="light"]) #sticky-banner .account-chip .logout-icon{
  color:#fff !important;
}
body.banner-active{padding-top:68px !important}

@media(min-width:768px){
  #sticky-banner .brand-inner{padding:10px 24px;max-width:720px}
  #sticky-banner .brand-sub.line2{display:block !important}
  #sticky-banner .banner-col-icons{margin:0 12px;gap:8px}
  body.banner-active{padding-top:76px !important}
}

#page-wrap{
  display:flex;flex-direction:column;align-items:center;
  width:100%;
  padding:0 16px;
  -webkit-font-smoothing:antialiased;
}

/* ── App Shell ── */
#app{
  position:relative;
  min-height:100vh;
  width:100%;
  max-width:480px;
  padding:0;
  margin:0 auto;
  transition:all .3s;
}

/* ── Brand Header ── */
.brand-header{
  width:100%;
  padding:16px 0 12px;
  background:var(--bg);
}
.brand-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:480px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-icon{
  width:54px;height:54px;
  background:linear-gradient(135deg,#d4a017,#b8860b);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em;
  flex-shrink:0;
}
.brand-text{
  font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--accent);
}
.brand-text .docket{color:#000}
.brand-text .vox{color:var(--accent)}
:root:not([data-theme="light"]) .brand-text .docket{color:var(--text)}
.brand-sub{
  font-size:11px;color:var(--text-dim);line-height:1.3;
}
.brand-sub.line2{
  margin-top:0;
}

/* ── Account Chip (banner, top-right) ── */
.account-chip{
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 6px 3px 3px;
  border-radius:100px;
  background:var(--bg-card);
  border:1px solid var(--border);
  cursor:default;
  transition:all .15s;
  width:fit-content;
  max-width:none;
  flex-shrink:0;
}
.account-chip .av-initial{
  width:22px;height:22px;border-radius:50%;
  color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.account-chip .provider-icon{
  width:22px;height:22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.account-chip .provider-icon svg{width:22px;height:22px;display:block}
.account-chip .username-label{
  font-size:10px;font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  min-width:0;
  flex:1;
}
.account-chip .username-label.compact{
  width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;flex:none;
  color:#fff;
}
.account-chip .logout-icon{
  width:20px;height:20px;border-radius:50%;border:none;
  background:transparent;color:var(--text-dim);font-size:10px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;padding:0;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.account-chip .logout-icon:hover{background:rgba(239,68,68,.12);color:var(--red)}
.account-chip .logout-icon:active{transform:scale(.9)}
.auth-btn.sign-in{
  display:flex;align-items:center;gap:12px;
  padding:12px 28px 12px 22px;border-radius:100px;
  font-size:22px;font-weight:600;
  background:var(--accent);color:#fff;border:none;
  cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.auth-btn.sign-in:active{transform:scale(.97)}
.auth-btn.sign-in .si-icon{font-size:21px}

/* ── Gear Icon (settings trigger) ── */
.settings-gear{
  width:36px;height:36px;
  border-radius:10px;border:1.5px solid var(--accent);
  background:var(--bg-card);
  color:var(--accent-bright);
  font-size:18px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  flex-shrink:0;
  box-shadow:0 0 8px rgba(139,157,201,.25),0 1px 3px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent;
}
.settings-gear:hover{background:rgba(139,157,201,.12);color:var(--accent-bright);box-shadow:0 0 12px rgba(139,157,201,.35)}
.settings-gear:active{transform:scale(.92)}

/* ── Bell Icon (reminders trigger) ── */
.bell-btn{
  width:36px;height:36px;
  border-radius:10px;border:1.5px solid var(--accent);
  background:var(--bg-card);
  color:var(--accent-bright);
  font-size:18px;
  cursor:pointer;
  display:none;align-items:center;justify-content:center;
  transition:all .15s;
  flex-shrink:0;
  position:relative;
  box-shadow:0 0 8px rgba(139,157,201,.25),0 1px 3px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.bell-btn.visible{display:flex}
.bell-btn:hover{background:rgba(139,157,201,.12);color:var(--accent-bright);box-shadow:0 0 12px rgba(139,157,201,.35)}
.bell-btn:active{transform:scale(.92)}
.bell-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:14px;height:14px;
  border-radius:10px;
  background:var(--red);
  color:#fff;
  font-size:9px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  padding:0 3px;
  box-shadow:0 0 0 2px var(--bg);
  line-height:1;
}

/* ── Subscription Badge ── */
.sub-badge {
  display: none;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
  align-self: center;
}
.sub-badge.sub-trial {
  background: rgba(124, 137, 196, 0.18);
  color: var(--accent);
  border: 1px solid rgba(124, 137, 196, 0.35);
}
.sub-badge.sub-pro {
  background: rgba(166, 138, 86, 0.2);
  color: var(--brass, #A68A56);
  border: 1px solid rgba(166, 138, 86, 0.4);
}

.bell-badge.visible{display:flex}

/* ── Subscription Status (Settings) ── */
#subscription-status-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  font-size:12px;
  line-height:1.6;
}
#subscription-status-box .sub-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
#subscription-status-box .sub-label{color:var(--text-muted)}
#subscription-status-box .sub-value{color:var(--text);font-weight:600;text-align:right}
#subscription-status-box .sub-pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
#subscription-status-box .sub-pill.active{background:rgba(34,197,94,.16);color:#22c55e}
#subscription-status-box .sub-pill.trialing{background:rgba(124,137,196,.18);color:var(--accent)}
#subscription-status-box .sub-pill.past_due{background:rgba(234,179,8,.18);color:#eab308}
#subscription-status-box .sub-pill.none{background:var(--border);color:var(--text-muted)}

/* ── Subscription Gate Banner (soft) ── */
#sub-gate-banner{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:rgba(124,137,196,.1);
  border:1px solid rgba(124,137,196,.3);
  border-radius:var(--radius);
  margin:0 0 12px;
  font-size:13px;
  color:var(--text);
  flex-wrap:wrap;
}
#sub-gate-banner .gate-text{flex:1;min-width:200px;line-height:1.5}
#sub-gate-banner .gate-btn{
  padding:8px 16px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
#sub-gate-banner .gate-btn:hover{background:var(--accent-hover)}

/* ── Settings Overlay ── */
/* Status pill inside the mic button */
#status-bar{
  position:absolute;
  bottom:39px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;font-weight:600;
  color:var(--accent);
  padding:7px 20px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:all .3s;
  text-align:center;
  white-space:nowrap;
  z-index:2;
  pointer-events:none;
}
#status-bar.recording{
  color:#fff;
  background:rgba(239,68,68,.7);
  border-color:rgba(239,68,68,.5);
}
#rec-timer{
  position:absolute;
  bottom:62px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums;
  z-index:2;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  pointer-events:none;
}
#rec-timer.hidden{display:none}
#settings-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.35);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s;
  /* offset for sticky banner */
  padding-top:72px;
}
#settings-overlay.hidden{display:none;opacity:0}
#settings-panel{
  width:90%;max-width:480px;
  max-height:85vh;
  overflow-y:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  position:relative;
}
#settings-panel h2{
  margin:0 0 20px;
  font-size:18px;
  font-weight:700;
}
#settings-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;border:none;
  background:transparent;color:var(--text-dim);
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
#settings-close:hover{background:var(--bg-card);color:var(--text)}
.settings-category{
  margin:26px 0 10px;
  padding:6px 0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.settings-category:first-of-type{margin-top:4px}
.settings-group{
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.settings-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.settings-group h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
}
.settings-group p{
  margin:0 0 10px;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.5;
}
.settings-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  border-radius:100px;
  background:var(--bg-card);
  border:1px solid var(--border);
  font-size:12px;font-weight:500;
  color:var(--text-dim);
  cursor:default;
}
.settings-chip .sc-icon{font-size:14px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-row .setting-label{font-size:13px;font-weight:500;color:var(--text)}
/* ── Toggle Switch ── */
.toggle{position:relative;width:40px;height:24px;flex-shrink:0;cursor:pointer}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:12px;background:var(--border);transition:.2s}
.toggle .slider::before{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.toggle input:checked+.slider{background:var(--accent)}
.toggle input:checked+.slider::before{transform:translateX(16px)}
/* ── Pin Input Group ── */
.pin-group{display:flex;align-items:center;gap:8px;margin-top:8px}
.pin-input{width:100px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;font-weight:600;text-align:center;letter-spacing:4px;font-family:monospace;outline:none}
.pin-input:focus{border-color:var(--accent)}
.pin-2fa{font-size:13px;color:var(--text-muted);margin-top:6px}
/* ── Settings button ── */
.settings-btn{background:var(--bg-card);border:1px solid var(--border);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text);transition:all.15s;font-family:inherit}
.settings-btn:active{transform:scale(.97)}
.settings-btn:hover{background:var(--border)}
/* ── Pin Unlock Overlay ── */
.pin-unlock-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100%;
  background:var(--bg);
  z-index:2147483647;
  display:flex;align-items:center;justify-content:center;
  -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
  will-change:transform;
}
.pin-unlock-overlay.hidden{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.pin-unlock-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  text-align:center;
  max-width:280px;
  width:100%;
}

/* ── PIN Recovery Warning Overlay ── */
#pin-recovery-warning-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
}
#pin-recovery-warning-overlay.hidden{display:none}
#pin-recovery-warning-sheet{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  text-align:center;
  max-width:320px;
  width:90%;
  box-shadow:0 16px 48px rgba(0,0,0,.4);
}
#pin-recovery-warning-icon{color:#eab308;margin-bottom:12px}
#pin-recovery-warning-title{
  font-size:18px;font-weight:700;color:var(--text);
  margin-bottom:8px;
}
#pin-recovery-warning-desc{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:20px}
#pin-recovery-warning-actions{display:flex;gap:10px;justify-content:center}
#pin-recovery-warning-ok{
  padding:10px 24px;border-radius:var(--radius);
  font-size:14px;font-weight:600;cursor:pointer;
  background:var(--accent);color:#fff;border:none;
  transition:all .15s;touch-action:manipulation;
}
#pin-recovery-warning-ok:active{opacity:.8;transform:scale(.97)}

/* ── Mic Hero ── */
.mic-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 0 8px;
  position:relative;
}
#mic-btn{
  width:250px;height:250px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;
  cursor:pointer;transition:all .25s;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(139,157,201,.25);
  outline:none;
}
#mic-btn:active{transform:scale(.92)}
#mic-btn.idle-pulse{
  animation:idlePulse 2.5s ease-in-out infinite;
}
#mic-btn.recording{
  background:var(--gradient-recording);
  box-shadow:0 0 0 0 rgba(220,38,38,.4);
  animation:recPulse 1.2s ease-in-out infinite;
}

/* SVG mic icon inside the button */
#mic-btn svg{
  width:83px;height:83px;
  transition:transform .2s ease;
  margin-bottom:39px;
}
#mic-btn:active svg{transform:scale(.9)}
#mic-btn.recording svg{
  animation:micWobble .3s ease-in-out infinite alternate;
}
@keyframes micWobble{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* Recording dot indicator (iPhone-style) */
#rec-dot{
  position:absolute;
  top:12px;right:12px;
  width:14px;height:14px;
  border-radius:50%;
  background:#ef4444;
  display:none;
  box-shadow:0 0 0 0 rgba(239,68,68,.6);
  border:2px solid var(--bg);
  z-index:2;
}
#rec-dot.active{
  display:block;
  animation:dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
}

@keyframes idlePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,157,201,.25)}
  50%{box-shadow:0 0 0 16px rgba(139,157,201,0)}
}
@keyframes recPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}
  50%{box-shadow:0 0 0 24px rgba(220,38,38,0)}
}

/* status-bar + rec-timer moved to #status-pill-row above */

/* ── Perm prompt (inline, not a box) ── */
.perm-hint{
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  margin:4px 0 0;
  display:none;
}
.perm-hint.visible{display:block}
.perm-hint button{
  background:none;border:none;color:var(--accent);
  cursor:pointer;font-size:12px;font-weight:600;padding:0;
  font-family:inherit;text-decoration:underline;
  -webkit-tap-highlight-color:transparent;
}

/* ── Transcription Panel ── */
#transcript-panel{
  display:block;
}
#transcript-panel.panel-hidden{display:none}
#transcript-text{
  width:100%;min-height:100px;
  padding:14px 16px;
  font-size:14px;line-height:1.7;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-input);color:var(--text);
  resize:vertical;outline:none;transition:all .2s;
  font-family:inherit;
}
#transcript-text:focus{border-color:var(--accent)}
#transcript-text::placeholder{color:var(--text-muted)}
#char-count{
  text-align:right;font-size:13px;color:var(--text-muted);
  margin-top:4px;
}
#char-count.warning{color:#f59e0b}

/* ── Note Type ── */
#note-type{
  width:100%;padding:10px 14px;
  font-size:13px;font-family:inherit;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%2364748b'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;
  margin-bottom:8px;
}
#note-type:focus{border-color:var(--accent)}
#note-type option{background:var(--bg-card);color:var(--text)}

/* ── Action Controls ── */
.action-strip{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:8px 0 20px;
}
.action-strip.hidden{display:none}
.send-area{
  display:flex;gap:8px;align-items:stretch;
}
#client-matter{
  flex:1;min-width:0;
  padding:10px 14px;font-size:clamp(11px,3.5vw,14px);
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  outline:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:border-color .2s;font-family:inherit;
}
#client-matter:focus{border-color:var(--accent)}
#client-matter::placeholder{color:var(--text-muted);font-size:clamp(10px,3vw,14px)}
#send-btn:disabled{
  background:#0f766e;
  color:#eef2fa;
  border:1px solid rgba(15,118,110,.45);
  border-bottom:2px solid rgba(15,118,110,.65);
  opacity:.8;
  cursor:not-allowed;transform:none;
}

/* ── Action Buttons (side-by-side 50%) ── */
.action-buttons{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.action-btn{
  flex:1;
  width:50%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  padding:10px 14px;
  min-height:52px;
  border:none;
  border-radius:var(--radius);
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  line-height:1.3;
}
.action-btn:active{transform:scale(.97)}
.action-btn:disabled{
  cursor:not-allowed;
  transform:none;
}
.primary-action{
  background:#0f766e;
  color:#eef2fa;
  border:1px solid rgba(15,118,110,.45);
  border-bottom:2px solid rgba(15,118,110,.65);
}
.primary-action:disabled{
  background:#0f766e;
  color:#eef2fa;
  border:1px solid rgba(15,118,110,.45);
  border-bottom:2px solid rgba(15,118,110,.65);
  }

.secure-action{
  background:#9f1239;
  color:#eef2fa;
  border:1px solid rgba(159,18,57,.45);
  border-bottom:2px solid rgba(159,18,57,.65);
}

.secure-action:disabled{
  background:#9f1239;
  color:#eef2fa;
  border:1px solid rgba(159,18,57,.45);
  border-bottom:2px solid rgba(159,18,57,.65);
  }


/* Shield icon inside secure button */
.sec-shield{
  display:flex;
  width:40px;
  height:40px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#d4a017,#b8860b);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(92,114,168,.25);
}
.sec-shield svg{
  width:24px;
  height:24px;
  stroke:#fff;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}



/* Label wrapper — stacks lines vertically, gives space from shield */
.sec-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-left:8px;
}
.action-btn-line1{
  display:block;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
}
.action-btn-line2{
  display:block;
  font-size:12px;
  font-weight:500;
  opacity:.8;
  white-space:nowrap;
}

/* Mobile adjustments */
@media(max-width:420px){
  .action-btn-line1{font-size:13px}
  .action-btn-line2{font-size:11px}
  .sec-shield{width:36px;height:36px}
}
.action-strip .bottom-row{
  display:flex;gap:8px;justify-content:flex-end;
}
/* ── Trash Can / Clear Transcription ── */
.clear-trash-section{
  display:flex;
  justify-content:center;
  margin-top:48px;
  padding-bottom:32px;
}
.clear-trash-btn{
  width:54px;height:54px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--bg-card);
  color:var(--text-dim);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.clear-trash-btn:hover,
.clear-trash-btn:focus-visible{
  border-color:var(--red);
  color:var(--red);
  background:rgba(239,68,68,.08);
}
.clear-trash-btn svg{
  width:24px;height:24px;
  transition:transform .15s;
}
.clear-trash-btn:active svg{transform:scale(.88)}

/* ── Clear Confirmation Modal ── */
#clear-confirm-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  padding:24px;
}
#clear-confirm-overlay.hidden{display:none}
#clear-confirm-sheet{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:28px 24px 20px;
  max-width:360px;
  width:100%;
  text-align:center;
}
/* Removed confirmSlide animation — Safari glitch with JS-triggered animations on position:fixed */
#clear-confirm-icon{
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(239,68,68,.12);
  color:var(--red);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
#clear-confirm-icon svg{width:26px;height:26px}
#clear-confirm-title{
  font-size:17px;font-weight:700;color:var(--text);
  margin-bottom:6px;
}
#clear-confirm-desc{
  font-size:13px;color:var(--text-dim);
  margin-bottom:24px;
}
.confirm-line{
  line-height:1.6;
}
.confirm-line:first-child{
  margin-bottom:4px;
}
#clear-confirm-actions{
  display:flex;gap:10px;
}
#clear-confirm-actions button{
  flex:1;
  padding:10px;
  border-radius:var(--radius);
  font-size:14px;font-weight:600;
  font-family:inherit;
  cursor:pointer;
  border:none;
  transition:opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
#clear-confirm-cancel{
  background:var(--bg-card);
  color:var(--text);
  border:1px solid var(--border);
}
#clear-confirm-cancel:hover{opacity:.85}
#clear-confirm-delete{
  background:var(--red);
  color:#fff;
}
#clear-confirm-delete:hover{opacity:.85}

/* ── Sign Out Confirmation Modal ── */
#signout-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  z-index:400;padding:24px;
}
#signout-overlay.hidden{display:none}
#signout-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px 20px;
  max-width:360px;width:100%;
  text-align:center;
}
#signout-panel h3{
  font-size:17px;font-weight:700;color:var(--text);
  margin-bottom:8px;
}
#signout-panel p{
  font-size:13px;color:var(--text-dim);
  margin-bottom:24px;line-height:1.5;
}
#signout-actions{display:flex;gap:10px}
#signout-actions button{
  flex:1;padding:10px;border-radius:var(--radius);
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;border:none;
  transition:opacity .15s;-webkit-tap-highlight-color:transparent;
}
#signout-cancel{background:var(--bg-input);color:var(--text);border:1px solid var(--border)}
#signout-cancel:hover{opacity:.85}
#signout-confirm{background:var(--red);color:#fff}
#signout-confirm:hover{opacity:.85}

/* ── Subscription Success Modal ── */
#sub-success-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:300;padding:24px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:subFadeIn .2s ease-out;
}
#sub-success-overlay.hidden{display:none}
@keyframes subFadeIn{
  from{opacity:0}
  to{opacity:1}
}
#sub-success-sheet{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 28px 28px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(139,157,201,.08);
  animation:subSheetIn .25s ease-out;
}
@keyframes subSheetIn{
  from{opacity:0;transform:scale(.94) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
#sub-success-icon{
  width:60px;height:60px;
  border-radius:50%;
  background:rgba(139,157,201,.12);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
#sub-success-icon svg{
  width:28px;height:28px;
  color:var(--accent);
}
#sub-success-title{
  font-size:20px;font-weight:700;color:var(--text);
  margin-bottom:8px;letter-spacing:-.01em;
}
#sub-success-detail{
  font-size:14px;color:var(--text-dim);
  line-height:1.55;margin-bottom:6px;
}
#sub-success-date{
  font-size:13px;color:var(--text-muted);
  margin-bottom:24px;
}
#sub-success-date strong{color:var(--accent);font-weight:600}
#sub-success-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:13px 24px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  font-size:15px;font-weight:600;
  font-family:inherit;
  border:none;
  cursor:pointer;
  transition:background .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
#sub-success-btn:hover{background:var(--accent-hover)}
#sub-success-btn:active{transform:scale(.97)}
#send-label{
  text-align:center;font-size:13px;color:var(--text-muted);
  margin-top:4px;
}

/* ── Recovery Code Modal ── */
.rc-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:400;padding:24px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:subFadeIn .2s ease-out;
}
.rc-overlay.hidden{display:none}
.rc-overlay .rc-sheet{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  max-width:440px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(139,157,201,.08);
  animation:subSheetIn .25s ease-out;
}
.rc-overlay .rc-title{
  font-size:20px;font-weight:700;color:var(--text);
  margin-bottom:8px;letter-spacing:-.01em;
}
.rc-overlay .rc-detail{
  font-size:14px;color:var(--text-dim);line-height:1.55;margin-bottom:18px;
}
.rc-overlay .rc-code{
  font-family:monospace;
  font-size:15px;font-weight:600;letter-spacing:1px;
  color:var(--text);
  background:var(--bg-input);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:14px 12px;
  text-align:center;
  word-break:break-all;
  margin-bottom:12px;
  user-select:all;
}
.rc-overlay .rc-copy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:11px 20px;
  border-radius:var(--radius);
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  font-size:14px;font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s,color .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
  margin-bottom:16px;
}
.rc-overlay .rc-copy-btn:hover{background:var(--accent);color:#fff}
.rc-overlay .rc-copy-btn:active{transform:scale(.97)}
.rc-overlay .rc-download-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:11px 20px;
  border-radius:var(--radius);
  background:var(--bg-input);
  color:var(--text);
  border:1px solid var(--border);
  font-size:14px;font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s,color .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
  margin-bottom:16px;
}
.rc-overlay .rc-download-btn:hover{background:var(--accent);color:#fff}
.rc-overlay .rc-download-btn:active{transform:scale(.97)}
.rc-overlay .rc-warning{
  font-size:13.5px;font-weight:600;color:#f87171;line-height:1.55;
  margin-bottom:18px;
}
.rc-overlay .rc-label{
  display:block;
  font-size:12.5px;color:var(--text-muted);
  margin-bottom:6px;
}
.rc-overlay .rc-input{
  width:100%;
  padding:11px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  outline:none;
  margin-bottom:14px;
  box-sizing:border-box;
}
.rc-overlay .rc-input:focus{border-color:var(--accent)}
.rc-overlay .rc-confirm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  padding:13px 24px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  font-size:15px;font-weight:600;
  font-family:inherit;
  border:none;
  cursor:pointer;
  transition:background .15s,transform .12s,opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.rc-overlay .rc-confirm-btn:hover:not(:disabled){background:var(--accent-hover)}
.rc-overlay .rc-confirm-btn:disabled{opacity:.4;cursor:not-allowed}
.rc-overlay .rc-confirm-btn:not(:disabled):active{transform:scale(.97)}

/* ── Auth Splash ── */
#auth-splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
#auth-splash.visible{
  opacity:1;
  pointer-events:auto;
}
#auth-splash.hidden{display:none}

#auth-splash.fade-out{
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
#auth-splash-inner{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
#splash-logo{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:var(--accent);
  color:#fff;
}
#splash-text{
  font-size:22px;font-weight:700;
  letter-spacing:-.3px;
}
#splash-text .docket{color:var(--text)}
:root:not([data-theme="light"]) #splash-text .docket{color:var(--text)}
#splash-text .vox{color:var(--accent)}

/* ── Reminders Overlay ── */
#reminders-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.35);
  z-index:1000;
  display:flex;align-items:flex-end;
  transition:opacity .2s;
}
#reminders-overlay.hidden{display:none;opacity:0}
#reminders-panel{
  background:var(--bg-card);
  width:90%;max-width:480px;margin:0 auto;
  border-radius:var(--radius);
  padding:24px;
  max-height:85vh;
  overflow-y:auto;
  animation:slideUp .25s ease;
  box-shadow:0 16px 48px rgba(0,0,0,.25);
}
@keyframes slideUp{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.rem-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
}
.rem-header h2{font-size:18px;font-weight:600;color:var(--text);margin:0}
.rem-header button{
  background:none;border:none;color:var(--text-dim);
  font-size:18px;cursor:pointer;padding:4px;
  -webkit-tap-highlight-color:transparent;
}
.rem-header button:active{opacity:.5}

/* Reminder list */
.rem-list{display:flex;flex-direction:column;gap:8px;}
.rem-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  transition:all .15s;
}
.rem-card:hover{border-color:var(--accent)}
.rem-card.overdue{
  border-left:3px solid var(--red);
}
.rem-card.done{
  opacity:.5;
  border-left:3px solid #22c55e;
}
.rem-type-badge{
  font-size:10px;font-weight:700;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
  background:var(--accent);color:#fff;
  white-space:nowrap;flex-shrink:0;
}
.rem-type-badge.CLE{background:#3b82f6}
.rem-type-badge.Bar{background:#f59e0b}
.rem-type-badge.Court{background:#8b5cf6}
.rem-type-badge.Custom{background:var(--accent)}
.rem-info{flex:1;min-width:0}
.rem-info .rem-title{
  font-size:14px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rem-info .rem-meta{
  font-size:13px;color:var(--text-muted);margin-top:2px;
}
.rem-delete-btn{
  background:none;border:none;color:var(--text-dim);
  font-size:14px;cursor:pointer;padding:6px;
  border-radius:6px;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.rem-delete-btn:hover{background:rgba(239,68,68,.1);color:var(--red)}
.rem-delete-btn:active{opacity:.5}

/* Add form */
.rem-add-form{
  margin-top:16px;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.rem-add-form h3{
  font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px;
}
.rem-presets{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;
}
.rem-preset-btn{
  padding:6px 12px;font-size:11px;font-weight:600;
  border:1px solid var(--border);border-radius:6px;
  background:var(--bg);color:var(--text-dim);
  cursor:pointer;transition:all .15s;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.rem-preset-btn:active{transform:scale(.96)}
.rem-preset-btn.active{
  border-color:var(--accent);color:var(--accent);background:var(--bg-card);
}
.rem-field{
  width:100%;padding:10px 12px;font-size:13px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  outline:none;transition:border-color .2s;font-family:inherit;
  margin-bottom:8px;
}
.rem-field:focus{border-color:var(--accent)}
.rem-field::placeholder{color:var(--text-muted)}
textarea.rem-field{resize:vertical;min-height:50px}
.rem-row{
  display:flex;gap:8px;align-items:center;margin-bottom:10px;
}
.rem-row label{font-size:12px;color:var(--text-dim);white-space:nowrap}
.rem-row select,.rem-row input[type=number]{
  padding:6px 10px;font-size:12px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:6px;color:var(--text);outline:none;font-family:inherit;
}
.rem-row select:focus,.rem-row input:focus{border-color:var(--accent)}
.rem-submit-btn{
  width:100%;padding:10px;
  background:var(--accent);color:#fff;border:none;
  border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.rem-submit-btn:active{transform:scale(.97)}
.rem-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.rem-empty{
  text-align:center;font-size:13px;color:var(--text-muted);
  padding:24px 0;
}
.rem-note-hint{
  font-size:13px;color:var(--text-muted);margin-top:4px;
  text-align:center;
}

/* Tabs */
.rem-tabs{
  display:flex;gap:4px;margin-bottom:12px;
  border-bottom:1px solid var(--border);padding-bottom:6px;
}
.rem-tab{
  padding:5px 14px;font-size:12px;font-weight:600;
  border:none;background:transparent;color:var(--text-dim);
  cursor:pointer;border-radius:6px 6px 0 0;
  transition:all .15s;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.rem-tab.active{
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-bottom-color:var(--bg);
  margin-bottom:-1px;
}

/* Groups */
.rem-groups{display:flex;flex-direction:column;gap:12px}
.rem-group-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
}
.rem-group-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
.rem-group-header .group-title{
  font-size:13px;font-weight:700;color:var(--text);
}
.rem-group-header .group-count{
  font-size:13px;color:var(--text-muted);
}
.rem-group-children{padding:4px 14px 8px}
.rem-child-card{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px dashed var(--border);
}
.rem-child-card:last-child{border-bottom:none}
.rem-child-card .child-info{flex:1;min-width:0}
.rem-child-card .child-title{
  font-size:13px;font-weight:600;color:var(--text);
}
.rem-child-card .child-meta{
  font-size:10px;color:var(--text-muted);margin-top:1px;
}
.rem-child-card .child-badge{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;
  color:#fff;white-space:nowrap;
}
.rem-group-delete-btn{
  background:none;border:none;color:var(--text-dim);
  font-size:12px;cursor:pointer;padding:4px;border-radius:4px;
}
.rem-group-delete-btn:hover{color:var(--red)}
.rem-add-child-btn{
  font-size:11px;color:var(--accent);background:none;
  border:1px dashed var(--border);border-radius:6px;
  padding:6px;cursor:pointer;width:100%;margin-top:4px;
  font-family:inherit;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.rem-add-child-btn:hover{border-color:var(--accent)}

/* Weekday checkboxes */
.rem-weekdays{
  display:flex;gap:8px;flex-wrap:wrap;
}
.rem-wd{
  font-size:11px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:3px;
  color:var(--text-dim);
}
.rem-wd input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}

/* ── Responsive Tweaks ── */
@media(min-width:640px){
  body{padding:32px}
  #mic-btn{width:281px;height:281px}
  #mic-btn svg{width:94px;height:94px;margin-bottom:44px}
  #status-bar{bottom:44px;font-size:13px;padding:8px 22px}
  #rec-timer{bottom:78px;font-size:13px}
}

/* ── PC: full-width layout with scaled-up elements ── */
@media(min-width:1024px){
  body{padding:32px 40px !important}
  #sticky-banner{
  position:fixed;top:0;left:0;width:100%;
  z-index:9999;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:none;
}
#sticky-banner.visible{
  display:block !important;
}
#sticky-banner .brand-inner{
  display:flex;align-items:center;
  width:100%;max-width:480px;margin:0 auto;
  padding:6px 16px;
}
#sticky-banner .banner-col-left{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:0;
}
#sticky-banner .brand-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;flex-shrink:0;
}
#sticky-banner .brand-text{
  font-size:15px;font-weight:800;
  letter-spacing:-.3px;
  white-space:nowrap;
}
#sticky-banner .brand-text .docket{color:var(--text)}
#sticky-banner .brand-text .vox{color:var(--accent)}
#sticky-banner .brand-sub{
  font-size:10px;color:var(--text-muted);
  line-height:1.35;
}
#sticky-banner .brand-sub.line2{display:block !important}
#sticky-banner .banner-col-icons{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
  margin:0 8px;
}
#sticky-banner .bell-btn,#sticky-banner .settings-gear,#sticky-banner #theme-toggle{
  background:none;border:none;font-size:16px;
  cursor:pointer;padding:3px;color:var(--text);
  position:relative;
}
#sticky-banner .bell-badge{
  position:absolute;top:0;right:0;
  background:var(--red,#e53e3e);color:#fff;
  font-size:8px;font-weight:700;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#sticky-banner .auth-btn{
  padding:3px 8px;border-radius:12px;
  font-size:9px;font-weight:600;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text);
  cursor:pointer;
  display:flex;align-items:center;gap:3px;
}
#sticky-banner .account-chip{padding:1px;gap:1px;border-radius:50px}
#sticky-banner .account-chip .provider-icon{width:22px;height:22px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#sticky-banner .account-chip .provider-icon svg{width:22px;height:22px;display:block}
#sticky-banner .account-chip .username-label.compact{width:20px;height:20px;font-size:11px;font-weight:700}
#sticky-banner .account-chip .logout-icon{width:20px;height:20px;font-size:12px;font-weight:700}
/* Dark mode: white outlines on banner icons and pill (default is dark) */
:root:not([data-theme="light"]) #sticky-banner .bell-btn,
:root:not([data-theme="light"]) #sticky-banner .settings-gear,
:root:not([data-theme="light"]) #sticky-banner #theme-toggle{
  border:2px solid rgba(255,255,255,0.7) !important;
  border-radius:10px;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
}
:root:not([data-theme="light"]) #sticky-banner .account-chip{
  border:2px solid rgba(255,255,255,0.7) !important;
  background:rgba(255,255,255,0.08) !important;
}
:root:not([data-theme="light"]) #sticky-banner .account-chip .logout-icon{
  color:#fff !important;
}
body.banner-active{padding-top:68px !important}

@media(min-width:768px){
  #sticky-banner .brand-inner{padding:10px 24px;max-width:720px}
  #sticky-banner .brand-sub.line2{display:block !important}
  #sticky-banner .banner-col-icons{margin:0 12px;gap:8px}
  body.banner-active{padding-top:76px !important}
}

#page-wrap{padding:0 32px}
  #app{max-width:720px;padding:0}
  .brand-inner{max-width:720px}
  .brand-header{padding:16px 0 12px}
  #mic-btn{width:374px;height:374px}
  #mic-btn svg{width:125px;height:125px;margin-bottom:57px}
  #rec-dot{width:36px;height:36px;top:-8px;right:-8px}
  #status-bar{bottom:52px;font-size:15px;padding:10px 26px}
  #rec-timer{bottom:88px;font-size:14px}
  #transcript-text{font-size:16px;min-height:160px;padding:14px}
  .send-area input{font-size:15px;padding:10px 14px}
  #send-btn{font-size:15px;padding:10px 24px}
  .clear-trash-btn{width:80px;height:80px}
  .clear-trash-btn svg{width:36px;height:36px}
  .header-actions{width:200px}
  .brand{max-width:720px}
  .settings-overlay{padding:72px 48px}
  #settings-panel{max-width:600px;padding:32px}
  #reminders-panel{max-width:600px;padding:32px;box-shadow:0 16px 48px rgba(0,0,0,.25)}
  #confirm-overlay #confirm-sheet{max-width:420px}
  #modal-sheet{max-width:500px}
}

/* ── Modal ── */
#modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#modal-overlay.hidden{display:none}
#modal-sheet{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:24px;max-width:440px;width:100%;
  max-height:90dvh;overflow-y:auto;
}
#modal-close{
  float:right;background:none;border:none;
  color:var(--text-dim);font-size:22px;cursor:pointer;
  line-height:1;padding:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:background .15s;
}
#modal-close:hover{background:rgba(100,116,139,.15)}
#modal-sheet h3{
  font-size:17px;font-weight:700;
  color:var(--text);margin-bottom:20px;letter-spacing:-.01em;
}
.modal-label{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px;
}
.modal-value{
  font-size:14px;color:#cbd5e1;
  margin-bottom:14px;line-height:1.5;
}
.modal-note-box{
  background:transparent;padding:0;border-radius:0;
  font-size:14px;color:#cbd5e1;line-height:1.6;
  max-height:200px;overflow-y:auto;
  white-space:pre-wrap;margin-bottom:20px;
}
.modal-actions{
  display:flex;gap:12px;justify-content:flex-end;
  margin-top:8px;
}
#modal-cancel,#modal-confirm{
  padding:10px 20px;border-radius:var(--radius);
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;transition:all .15s;touch-action:manipulation;
}
#modal-cancel{background:#334155;color:#94a3b8}
#modal-cancel:active{background:#475569;transform:scale(.97)}
#modal-confirm{background:var(--accent);color:#fff}
#modal-confirm:active{background:var(--accent-hover);transform:scale(.97)}
#modal-confirm:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;transform:none}

/* ── External Send Modal ── */
#external-send-overlay{
  position:fixed;inset:0;z-index:110;
  background:rgba(15,23,42,.6);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
#external-send-overlay.hidden{display:none}
#external-send-sheet{
  background:var(--bg-card);border-radius:var(--radius);
  padding:28px 24px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:fadeIn .2s;
  position:relative;
}
#external-send-close{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:transparent;color:var(--text-dim);
  font-size:16px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  transition:background .15s;
}
#external-send-close:hover{background:rgba(100,116,139,.15)}
#external-send-sheet h3{font-size:16px;margin:0 0 4px;font-weight:700}
#ext-send-cancel,#ext-send-confirm{
  padding:10px 20px;border-radius:var(--radius);
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;transition:all .15s;touch-action:manipulation;
  font-family:inherit;
}
#ext-send-cancel{background:#334155;color:#94a3b8}
#ext-send-cancel:active{background:#475569;transform:scale(.97)}
#ext-send-confirm{background:var(--accent);color:#fff}
#ext-send-confirm:active{background:var(--accent-hover);transform:scale(.97)}
#ext-send-confirm:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;transform:none}
.ext-field{
  display:block;width:100%;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;font-family:inherit;
  background:var(--bg);color:var(--text);
  margin-bottom:10px;outline:none;transition:border-color .15s;
  box-sizing:border-box;
}
.ext-field:focus{border-color:var(--accent)}
#ext-send-note-preview{
  background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;
  font-size:13px;color:var(--text-dim);
  max-height:80px;overflow-y:auto;margin-bottom:4px;
  white-space:pre-wrap;word-break:break-word;
}
#ext-send-add-file{
  padding:6px 12px;border-radius:6px;
  border:1.5px dashed var(--border);
  background:transparent;color:var(--accent);
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;
}
#ext-send-add-file:hover{border-color:var(--accent);background:rgba(59,130,246,.05)}
#ext-send-dropzone{
  padding:14px 12px;border:2px dashed var(--border);border-radius:8px;
  text-align:center;font-size:12px;color:var(--text-muted);
  cursor:pointer;transition:all .15s;
}
#ext-send-dropzone.drag-over{
  border-color:var(--accent);background:rgba(59,130,246,.08);color:var(--accent);
}
#ext-send-file-list .ext-file-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;
  margin-bottom:4px;font-size:12px;
}
#ext-send-file-list .ext-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
#ext-send-file-list .ext-file-size{color:var(--text-muted);flex-shrink:0}
#ext-send-file-list .ext-file-remove{
  background:none;border:none;color:var(--red);
  cursor:pointer;font-size:13px;padding:2px 6px;
  border-radius:4px;flex-shrink:0;
}
#ext-send-file-list .ext-file-remove:hover{background:rgba(229,62,62,.1)}

/* ── External Send Success Modal ── */
#ext-send-success-overlay{
  position:fixed;inset:0;z-index:120;
  background:rgba(15,23,42,.6);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
#ext-send-success-overlay.hidden{display:none}
#ext-send-success-sheet{
  background:var(--bg-card);border-radius:var(--radius);
  padding:32px 24px;max-width:420px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:fadeIn .2s;
}
#ext-send-success-sheet h3{font-size:16px;margin:0;font-weight:700}

/* ── Encryption badges (send modal) ── */
.enc-badge{
  display:inline-block;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  margin-left:4px;vertical-align:middle;
}
.enc-badge.encrypted{background:rgba(74,222,128,.15);color:#4ade80}
.enc-badge.unencrypted{background:rgba(180,66,42,.15);color:#B4402A}

/* ── Toast ── */
#toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  padding:12px 24px;border-radius:var(--radius);
  font-size:14px;font-weight:500;max-width:90%;
  pointer-events:none;transition:opacity .25s,transform .25s;
  /* Must sit above PIN unlock overlay (inline z-index:10000) so forgot-PIN errors are visible */
  z-index:2147483647;
}
#toast.hidden{opacity:0;transform:translateX(-50%) translateY(8px)}
#toast.success{
  background:var(--toast-success-bg);color:var(--toast-success-text);
  box-shadow:0 4px 16px rgba(6,95,70,.35);
}
#toast.error{
  background:var(--toast-error-bg);color:var(--toast-error-text);
  box-shadow:0 4px 16px rgba(127,29,29,.35);
}
#toast.info{
  background:var(--toast-info-bg);color:var(--toast-info-text);
  box-shadow:0 4px 16px rgba(30,58,95,.35);
}

/* ── Footer Info ── */
.app-footer{
  text-align:center;font-size:13px;color:var(--text-muted);
  margin-top:24px;line-height:1.6;
}
#theme-toggle{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--bg-card);color:var(--text);font-size:18px;
  cursor:pointer;transition:all .2s;display:flex;
  align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
#theme-toggle:active{transform:scale(.9)}
.banner-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}



@keyframes copyFadeIn {
  from{opacity:0;transform:translate(-50%,-50%) scale(.92)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.note-type-row{
  display:flex;gap:8px;align-items:stretch;
}
.note-type-row > #note-type{
  flex:1;min-width:0;height:42px;box-sizing:border-box;
  padding:10px 14px;font-size:clamp(11px, 4vw, 14px);line-height:1.4;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  outline:none;font-family:inherit;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.note-type-row > #note-type:focus{border-color:var(--accent)}
.note-type-row > #client-matter{
  flex:1;min-width:0;height:42px;box-sizing:border-box;
  padding:10px 14px;font-size:clamp(11px, 4vw, 14px);line-height:1.4;
  background:var(--bg-input);border:1px solid var(--border);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius:var(--radius);color:var(--text);
  outline:none;transition:border-color .2s;font-family:inherit;
}
.note-type-row > #client-matter:focus{border-color:var(--accent)}
.note-type-row > #client-matter::placeholder{color:var(--text-muted);font-size:clamp(10px,3vw,14px)}






/* ── Encryption Box ── */
.encryption-box {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 8px auto 0;
  padding: 8px 16px;
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 10px;
  width: fit-content;
  max-align-self: stretch;
  box-sizing: border-box;
}
[data-theme="dark"] .encryption-box {
  background: #1a1d24;
  border-color: #000;
}
.shield-icon {
  height: 44px;
  width: 44px;
  min-width: 44px;
  display: block;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E') no-repeat center/contain;
  color:var(--green);
}
.shield-icon img {
  display:none;
}
.encryption-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow-wrap: break-word;
  min-width: 0;
  max-align-self: stretch;

}
.enc-row1 {
  font-size: clamp(10px, 2.8vw, 14px);
  color: #5c72a8;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.3;
  
}
[data-theme="dark"] .enc-row1 {
  color: #8b9dc9;
}
.enc-row2 {
  font-size: clamp(10px, 2.8vw, 14px);
  color: #5c72a8;
  text-decoration: none;
  opacity: 0.85;
  line-height: 1.3;
  
  cursor: pointer;
}
[data-theme="dark"] .enc-row2 {
  color: #8b9dc9;
}
.enc-row2:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ── Footer ── */
.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 16px 20px;
  background: #5c72a8;
  border-radius: 12px 12px 0 0;
  text-align: center;
  font-size: 13px;
  
  color: #ffffff;
  line-height: 1.6;
  
  box-sizing: border-box;
}
[data-theme="dark"] .app-footer {
  background: #5c72a8;
}
.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}
.footer-links a:hover {
  text-decoration: underline;
  opacity: 1;
}
.footer-copy {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.3px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.2);

}
.footer-copy .docket{color:#ffffff;opacity:0.85;font-weight:800;letter-spacing:-.3px}
.footer-copy .vox{color:#ffffff;opacity:0.9;font-weight:800;letter-spacing:-.3px}
.container > .app-footer{width:calc(100% - 48px)}
#app > .app-footer{width:100%}

/* ── Chrome autofill override ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ── TTL Picker (Encrypted External Send) ── */
.ttl-picker{display:flex;gap:6px;margin-top:4px}
.ttl-opt{flex:1;padding:8px 4px;border:1.5px solid var(--input-border,#d1d5db);border-radius:6px;background:transparent;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s;color:var(--text-muted,#9ca3af);text-align:center}
.ttl-opt:hover{border-color:var(--accent,#0f172a);color:var(--accent,#0f172a)}
.ttl-opt.active{background:var(--accent,#0f172a);color:#fff;border-color:var(--accent,#0f172a)}

/* ── Mandatory-enrollment modal (recovery vs new key) ── */
.rc-overlay .rc-divider{height:1px;background:var(--border);margin:16px 0;opacity:.6}
.rc-overlay .rc-ghost-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:12px 20px;border-radius:var(--radius);
  background:var(--bg-input);color:var(--text);
  border:1px solid var(--border);font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;
  transition:background .15s,color .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.rc-overlay .rc-ghost-btn:hover{background:var(--accent);color:#fff}
.rc-overlay .rc-ghost-btn:active{transform:scale(.97)}
.rc-overlay .rc-danger-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:13px 24px;border-radius:var(--radius);
  background:#b4402a;color:#fff;font-size:14px;font-weight:600;
  font-family:inherit;border:none;cursor:pointer;
  transition:background .15s,transform .12s,opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.rc-overlay .rc-danger-btn:hover:not(:disabled){background:#9a3522}
.rc-overlay .rc-danger-btn:disabled{opacity:.4;cursor:not-allowed}
.rc-overlay .rc-danger-btn:not(:disabled):active{transform:scale(.97)}
.rc-overlay .rc-newkey-panel{margin-top:16px}
.rc-overlay .rc-newkey-panel.hidden{display:none}
.rc-overlay .rc-close-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;margin-top:14px;padding:8px 12px;border:none;
  background:transparent;color:var(--text-dim);font-size:13px;
  font-family:inherit;cursor:pointer;text-decoration:underline;
  -webkit-tap-highlight-color:transparent;
}
.rc-overlay .rc-close-btn:hover{color:var(--text)}
.rc-overlay .rc-hint{
  font-size:12.5px;color:var(--text-dim);line-height:1.5;
  margin-top:8px;min-height:1px;
}
.rc-overlay .rc-hint:empty{display:none}

/* Mobile "Sign" shortcut — pill matching #sticky-banner .auth-btn (signing UX bundle 2026-09-06) */
#sticky-banner .sign-nav-link{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:12px;
  font-size:9px;font-weight:600;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
#sticky-banner .sign-nav-link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
:root:not([data-theme="light"]) #sticky-banner .sign-nav-link{
  border:2px solid rgba(255,255,255,0.7) !important;
  border-radius:10px;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
}
/* ── Sign & Send home cards (signing family — in-app entry) ── */
.sign-launch{
  margin:2px 0 4px;
}
.sign-eyebrow{
  display:flex;align-items:center;gap:8px;
  margin:0 0 8px;
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
}
.sign-eyebrow::after{content:"";flex:1;height:1px;background:var(--border)}
.sign-cards{display:flex;flex-direction:column;gap:8px}
.sign-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  transition:border-color .15s,transform .15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.sign-card:hover{border-color:var(--accent)}
.sign-card:active{transform:scale(.97)}
.sign-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sign-card-ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:12px;
  background:linear-gradient(135deg,#7C89C4,#5a6ca3);
}
.sign-card-ico svg{width:20px;height:20px;stroke:#fff}
.sign-card-body{display:flex;flex-direction:column;min-width:0;flex:1}
.sign-card-title{font-size:14px;font-weight:700;line-height:1.3}
.sign-card-sub{font-size:11px;color:var(--text-muted);line-height:1.4;margin-top:1px}
.sign-card-chev{color:var(--text-dim);flex-shrink:0;display:flex}
.sign-card-chev svg{width:18px;height:18px}
@media(min-width:560px){
  .sign-cards{flex-direction:row}
  .sign-card{flex:1}
}

/* ── One-page desktop layout (QA 2026-08-29): app fits within one viewport;
     internal scrolling instead of a page longer than the screen ── */
@media(min-width:768px){
  body{overflow:hidden}
  #page-wrap{height:100dvh}
  body.banner-active #page-wrap{height:calc(100dvh - 76px)}
  #app{max-width:720px;height:100%;min-height:0;overflow-y:auto}
}

/* ── Secure Requests attorney panel (B, 2026-09-05) ── */
#secure-requests-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
#secure-requests-overlay.hidden{display:none;opacity:0}
#secure-requests-sheet{background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:16px;width:100%;max-width:580px;max-height:88vh;overflow-y:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.srq-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.srq-head h3{margin:0;font-size:18px;font-weight:700;color:var(--text)}
#srq-close{background:none;border:none;font-size:16px;color:var(--text-dim);cursor:pointer;padding:6px;line-height:1}
#srq-close:hover{color:var(--text)}
.srq-sub{font-size:12px;color:var(--text-muted);margin:6px 0 14px;line-height:1.5}
.srq-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.srq-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;-webkit-tap-highlight-color:transparent}
.srq-btn:hover{background:var(--accent-hover)}
.srq-btn.ghost{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.srq-btn.ghost:hover{background:var(--border)}
.srq-btn.danger{background:var(--red,#e53e3e)}
.srq-btn.danger:hover{filter:brightness(.92)}
.srq-btn:disabled{opacity:.5;cursor:default}
.srq-list{display:flex;flex-direction:column;gap:10px}
.srq-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg-card)}
.srq-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.srq-email{font-weight:600;font-size:13px;color:var(--text);word-break:break-all}
.srq-chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;flex-shrink:0}
.srq-chip.open{background:rgba(34,197,94,.15);color:#16a34a}
.srq-chip.submitted{background:rgba(124,137,196,.18);color:#4c5aa8}
.srq-chip.voided{background:rgba(239,68,68,.12);color:#ef4444}
.srq-chip.expired{background:rgba(100,116,139,.15);color:#64748b}
.srq-matter{font-size:11px;color:var(--text-muted);margin-top:4px}
.srq-meta{font-size:11px;color:var(--text-muted);margin-top:6px;line-height:1.5}
.srq-summary{font-size:11px;color:var(--text-muted);margin-top:4px}
.srq-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.srq-field{width:100%;box-sizing:border-box;border:1px solid var(--input-border,#d1d5db);border-radius:8px;padding:9px 10px;font-size:13px;font-family:inherit;background:var(--bg-input,transparent);color:var(--text);margin-top:4px}
.srq-field:focus{outline:none;border-color:var(--accent)}
textarea.srq-field{resize:vertical;min-height:64px}
.srq-label{font-size:11px;font-weight:600;color:var(--text-dim);margin-top:12px;display:block}
.srq-ttl-row{display:flex;gap:8px;margin-top:6px}
.srq-ttl{flex:1;padding:8px 4px;border:1.5px solid var(--input-border,#d1d5db);border-radius:8px;background:transparent;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--text-muted);text-align:center;transition:all .15s}
.srq-ttl.active{background:var(--accent,#0f172a);color:#fff;border-color:var(--accent,#0f172a)}
.srq-status{font-size:11px;margin-top:10px;min-height:14px}
.srq-status.ok{color:#16a34a}
.srq-status.err{color:var(--red,#e53e3e)}
.srq-linkbox{display:flex;align-items:center;gap:8px;background:var(--bg-input,#f4f4f5);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-top:10px}
.srq-linkbox input{flex:1;border:none;background:transparent;font-size:11px;color:var(--text-dim);outline:none;font-family:inherit}
.srq-msg{white-space:pre-wrap;word-break:break-word;background:var(--bg-input,#f4f4f5);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:13px;color:var(--text);margin-top:8px;max-height:200px;overflow-y:auto}
.srq-file{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-top:6px;background:var(--bg-card);text-decoration:none;color:var(--text)}
.srq-file:hover{border-color:var(--accent)}
.srq-file .fname{font-size:12px;font-weight:600;word-break:break-all}
.srq-file .fsize{font-size:11px;color:var(--text-muted);flex-shrink:0}
.srq-back{margin-bottom:10px}
.srq-empty{font-size:13px;color:var(--text-muted);text-align:center;padding:28px 10px}
.srq-detail-head{font-size:12px;color:var(--text-dim)}
.srq-detail-head strong{color:var(--text)}
@media(max-width:480px){
  #secure-requests-sheet{padding:16px}
}

/* Rotation gate must out-rank #settings-overlay (z-index 1000) */
#rotate-gate-overlay{z-index:1100}