/* ==========================================================
   Giant Phone - modern dark/light theme
   ========================================================== */

*,*::before,*::after{box-sizing:border-box}
/* Author rules with display:flex override the UA [hidden]=display:none default.
   Force it back so el.hidden=true actually hides modals/overlays. */
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font:14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  color:var(--fg);
  background:var(--bg);
  letter-spacing:-0.01em;
}

/* ---------- Theme tokens (Giant mint #00d9a7 + supporting palette) ---------- */
body[data-theme="dark"]{
  --bg:#05070a;
  --bg-elev:rgba(22,28,36,.58);
  --bg-elev-solid:#161c24;
  --bg-elev-2:rgba(255,255,255,.04);
  --bg-input:rgba(13,17,22,.6);
  --border:transparent;
  --border-strong:transparent;
  --fg:#ecf1f5;
  --fg-muted:#8a97a8;
  --fg-dim:#5d6776;
  --accent:#00d9a7;
  --accent-2:#00b88e;
  --accent-3:#00f0b5;
  --accent-warm:#ffd36b;
  --accent-lav:#b897ff;
  --accent-glow:rgba(0,217,167,.35);
  --accent-grad:linear-gradient(135deg,#00f0b5 0%,#00d9a7 45%,#00a784 100%);
  --success:#00d9a7;
  --danger:#ff4757;
  --danger-2:#e63946;
  --warn:#ffb946;
  --shadow:none;
  --shadow-sm:none;
  --shadow-accent:none;
  --glass-blur:blur(36px) saturate(1.7);
}
body[data-theme="light"]{
  --bg:#edf4f2;
  --bg-elev:rgba(255,255,255,.62);
  --bg-elev-solid:#ffffff;
  --bg-elev-2:rgba(12,22,19,.04);
  --bg-input:rgba(255,255,255,.78);
  --border:transparent;
  --border-strong:transparent;
  --fg:#0c1613;
  --fg-muted:#5a6768;
  --fg-dim:#8a9697;
  --accent:#00b88e;
  --accent-2:#00a37d;
  --accent-3:#00d9a7;
  --accent-warm:#e89a26;
  --accent-lav:#8268d4;
  --accent-glow:rgba(0,184,142,.28);
  --accent-grad:linear-gradient(135deg,#00d9a7 0%,#00b88e 55%,#008a6c 100%);
  --success:#00a37d;
  --danger:#e63946;
  --danger-2:#c92d3a;
  --warn:#d97706;
  --shadow:none;
  --shadow-sm:none;
  --shadow-accent:none;
  --glass-blur:blur(28px) saturate(1.8);
}

/* ---------- Screen router ---------- */
.screen{display:none;height:100%;width:100%}
body[data-screen="login"] .screen-login{display:flex}
body[data-screen="app"]   .screen-app{display:flex}

/* ===================== LIVING MESH BACKGROUND =====================
   Multi-blob gradient field behind a subtle noise-esque mask.
   Drifts slowly, always on — gives the app a "place" to live. */
body{background:var(--bg);position:relative;isolation:isolate}
body::before,body::after{
  content:"";position:fixed;inset:-20vmax;z-index:-2;
  pointer-events:none;will-change:transform;
}
body::before{
  background:
    radial-gradient(40vmax 40vmax at 12% 18%, var(--amb-1, rgba(0,240,181,.22)), transparent 60%),
    radial-gradient(34vmax 34vmax at 82% 6%, var(--amb-2, rgba(184,151,255,.18)), transparent 60%),
    radial-gradient(46vmax 46vmax at 70% 90%, var(--amb-3, rgba(0,217,167,.16)), transparent 62%),
    radial-gradient(30vmax 30vmax at 18% 85%, var(--amb-4, rgba(255,211,107,.08)), transparent 60%);
  animation:meshDrift 28s ease-in-out infinite alternate;
  filter:blur(4px);
  transition:background 4s ease-in-out;
}
body::after{
  /* grain */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.06;mix-blend-mode:overlay;
}
body[data-theme="light"]::after{opacity:.045}
@keyframes meshDrift{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  50% {transform:translate3d(-2%,2%,0) rotate(6deg)}
  100%{transform:translate3d(2%,-3%,0) rotate(-4deg)}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}

/* ===================== LOGIN ===================== */
.screen-login{
  align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.login-card{
  width:100%;max-width:440px;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:28px;
  padding:36px 34px 30px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  animation:loginIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* flat login card — no gradient border / bloom */
.brand{text-align:center;margin-bottom:28px;position:relative;z-index:1}
.brand-logo-img{
  display:block;margin:0 auto 18px;
  max-width:180px;max-height:80px;width:auto;height:auto;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
.brand h1{
  margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-sub{margin:6px 0 0;color:var(--fg-muted);font-size:13px;letter-spacing:.02em}

#login-form{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
#login-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--fg-muted);font-weight:500}
#login-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#login-form input[type=text],
#login-form input[type=tel],
#login-form input[type=password]{
  padding:11px 12px;font:inherit;color:var(--fg);
  background:var(--bg-input);
  border:1px solid var(--border);border-radius:10px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
#login-form input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.checkbox{flex-direction:row!important;align-items:center;gap:8px;color:var(--fg)!important;font-size:13px!important;font-weight:400!important}
.muted{color:var(--fg-dim);font-weight:400}
.fine{margin:18px 0 0;text-align:center;color:var(--fg-dim);font-size:12px;line-height:1.5}

.install-btn{
  margin-top:14px;width:100%;justify-content:center;
  font-size:13px;font-weight:600;
  background:rgba(0,217,167,.08);color:var(--accent);
}
.install-btn:hover{background:rgba(0,217,167,.16)}
.install-btn svg{margin-right:2px}

/* "Powered by Giant" attribution */
.powered-by{
  display:inline-flex;align-items:center;gap:8px;
  margin:16px auto 0;padding:6px 4px;
  color:var(--fg-muted);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  opacity:.8;transition:opacity .2s;
  justify-content:center;
}
.powered-by span{line-height:1}
.powered-by:hover{opacity:1}
.giant-logo{height:14px;width:auto;display:block}
.settings .powered-by{margin:12px 0 0;padding:0;display:flex}

/* Theme-aware swap */
body[data-theme="dark"] .giant-logo-light{display:none}
body[data-theme="light"] .giant-logo-dark{display:none}

/* Fallback wordmark when the SVG isn't found (same theme-swap rules apply) */
.giant-fallback{
  font:700 13px/1 inherit;letter-spacing:-.01em;text-transform:none;
  color:var(--fg);
}
body[data-theme="light"] .giant-fallback{color:var(--fg)}
.dialer-powered .giant-fallback{font-size:11px}

/* Login card: centre the attribution under its content */
.login-card > .powered-by{display:flex;margin:18px auto 4px}

/* Dialer variant — shown beneath the dialer card */
.dialer-powered{
  display:flex;margin:10px auto 0;
  font-size:10px;letter-spacing:.18em;
}
.dialer-powered .giant-logo{height:12px}
@media (max-width:720px){
  .dialer-powered{margin-top:6px;font-size:9px}
  .dialer-powered .giant-logo{height:11px}
}

/* ===================== NATIVE APP BADGES ===================== */
.native-apps{
  margin:22px 0 0;padding-top:18px;
  border-top:1px solid var(--border);
  text-align:center;
}
.native-title{
  margin:0 0 12px;font-size:12px;color:var(--fg-dim);
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}
.native-badges{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.native-badge{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
  color:var(--fg);text-decoration:none;
  transition:background .2s,border-color .2s,transform .1s,color .2s;
}
body[data-theme="light"] .native-badge{background:rgba(12,22,19,.03)}
.native-badge:hover{
  border-color:var(--accent);
  background:rgba(0,217,167,.08);
  color:var(--accent);
  transform:translateY(-1px);
}
.native-badge svg{width:22px;height:22px;flex:0 0 22px}
.native-badge span{display:flex;flex-direction:column;min-width:0;text-align:left}
.native-badge small{font-size:10px;color:var(--fg-muted);line-height:1.1;letter-spacing:.02em}
.native-badge strong{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.native-badge:hover small{color:var(--accent)}

@media (max-width:340px){
  .native-badges{grid-template-columns:1fr}
}

/* ===================== APP BANNER (mobile) ===================== */
.app-banner{
  position:fixed;top:0;left:0;right:0;z-index:95;
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--bg-elev-solid);
  border-bottom:1px solid var(--border);
  animation:bannerIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes bannerIn{from{transform:translateY(-100%)}to{transform:none}}
.app-banner-close{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:transparent;border:none;color:var(--fg-dim);
  font-size:22px;line-height:1;cursor:pointer;padding:0;
}
.app-banner-close:hover{color:var(--fg)}
.app-banner-icon{
  width:40px;height:40px;border-radius:9px;
  object-fit:contain;background:rgba(255,255,255,.04);padding:4px;
  flex:0 0 40px;
}
.app-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.app-banner-text strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-banner-text span{font-size:12px;color:var(--fg-muted)}
.app-banner-cta{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;
  background:var(--accent);color:#052a22;font-weight:700;font-size:13px;
  text-decoration:none;letter-spacing:.02em;
  transition:filter .2s;
}
.app-banner-cta:hover{filter:brightness(1.08)}
/* Push the app down a touch when the banner is showing */
body.has-banner .screen-login{padding-top:72px}
body.has-banner .screen-app{padding-top:76px}
.error{
  margin:4px 0 0;padding:8px 12px;
  background:rgba(239,68,68,.1);color:var(--danger);
  border:1px solid rgba(239,68,68,.25);border-radius:8px;font-size:13px;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;border:1px solid transparent;
  background:var(--bg-elev-2);color:var(--fg);
  font:inherit;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s,opacity .15s;
  user-select:none;
}
.btn:hover{background:var(--border)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-elev-2)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-2);border-color:var(--danger-2)}
.btn-lg{padding:13px 18px;font-size:15px;border-radius:12px}
/* Circular FAB-style dialer Call button */
.call-row-dialer{display:flex;justify-content:center;padding:6px 0 2px}
.fab-call-solid{
  position:relative;
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;color:#052a22;cursor:pointer;
  background:var(--accent-grad);
  transition:transform .12s cubic-bezier(.22,1,.36,1),filter .2s;
}
.fab-call-solid::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--accent);
  opacity:.45;
  animation:callPing 1.8s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events:none;
}
@keyframes callPing{
  0%  {transform:scale(.92);opacity:.55}
  80%,100%{transform:scale(1.24);opacity:0}
}
.fab-call-solid:hover{filter:brightness(1.08)}
.fab-call-solid:active{transform:scale(.94)}
.fab-call-solid svg{width:28px;height:28px;position:relative;z-index:1}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--fg-muted);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.icon-btn:hover{background:var(--bg-elev-2);color:var(--fg);border-color:var(--border)}
.icon-btn svg{width:18px;height:18px}

/* ===================== WINDOW CONTROLS OVERLAY (PWA) =====================
   When installed and running with display-mode: window-controls-overlay,
   the OS draws min/max/close at the top right (or top left on macOS) and
   gives us env(titlebar-area-*) for the safe zone. We carve out a draggable
   header strip and shift the app content down. */
@supports (padding-top: env(titlebar-area-height)) {
  @media (display-mode: window-controls-overlay) {
    .titlebar{
      position:fixed;left:env(titlebar-area-x,0);top:env(titlebar-area-y,0);
      width:env(titlebar-area-width,100%);height:env(titlebar-area-height,32px);
      -webkit-app-region:drag;app-region:drag;
      display:flex;align-items:center;gap:10px;padding:0 12px;
      z-index:200;color:var(--fg-muted);font-size:11px;letter-spacing:.05em;
      pointer-events:auto;
    }
    .titlebar img{height:14px;width:auto;-webkit-app-region:no-drag;app-region:no-drag}
    .titlebar strong{font-weight:700;color:var(--fg);letter-spacing:-.01em;font-size:12px}
    .screen-app{padding-top:calc(14px + env(titlebar-area-height,32px))}
    .screen-login{padding-top:calc(20px + env(titlebar-area-height,32px))}
    /* Buttons inside the titlebar must opt out of drag so they're clickable */
    .titlebar button, .titlebar a{-webkit-app-region:no-drag;app-region:no-drag}
  }
}
/* Outside WCO, hide the titlebar */
.titlebar{display:none}

/* ===================== APP LAYOUT ===================== */
.screen-app{display:flex;height:100%;padding:14px;gap:14px}
.sidebar{
  width:252px;flex:0 0 252px;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  padding:18px 14px 14px;
  position:relative;overflow:hidden;
}
/* flat sidebar — no inner gloss */
.sidebar-top{padding:6px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;position:relative;z-index:1}
.me{display:flex;align-items:center;gap:10px}
.me-info{min-width:0;flex:1}
.me-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-status{display:flex;align-items:center;gap:6px;color:var(--fg-muted);font-size:12px;margin-top:2px}
.me-status .dot{width:8px;height:8px;border-radius:50%;background:var(--fg-dim)}
.me-status[data-state="registered"] .dot{background:var(--success);outline:3px solid rgba(0,217,167,.18);outline-offset:0}
.me-status[data-state="connecting"] .dot{background:var(--warn);animation:pulse 1.2s infinite}
.me-status[data-state="failed"] .dot{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.nav{flex:1;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
/* Sliding pill indicator (positioned via JS) */
.nav-pill{
  position:absolute;left:0;right:0;height:40px;top:0;
  border-radius:12px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,240,181,.14),rgba(0,217,167,.08));
  border:1px solid rgba(0,217,167,.28);
  /* flat — rely on border + bg */
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .2s;
  opacity:0;
}
.nav-pill.ready{opacity:1}
.nav-btn{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;height:40px;
  background:transparent;border:none;color:var(--fg-muted);
  font:inherit;font-weight:500;text-align:left;cursor:pointer;
  transition:color .2s;
}
.nav-btn svg{width:18px;height:18px;flex:0 0 18px;transition:transform .2s}
.nav-btn:hover{color:var(--fg)}
.nav-btn:hover svg{transform:scale(1.08)}
.nav-btn.active{color:var(--fg)}
.nav-btn.active svg{color:var(--accent-3)}
.badge{
  margin-left:auto;min-width:20px;padding:2px 6px;
  border-radius:10px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700;font-style:normal;text-align:center;
}
.sidebar-bot{
  display:flex;gap:6px;padding:10px 8px 4px;
  border-top:1px solid var(--border);margin-top:8px;
  position:relative;z-index:1;
}

.content{
  flex:1;min-width:0;overflow:hidden;position:relative;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.tab{display:none;height:100%;overflow:auto;padding:28px 36px}
.tab.active{display:block;animation:tabIn .32s cubic-bezier(.22,1,.36,1) both}
/* Dialer: centred composition with greeting + handset */
.tab[data-tab="dialer"].active{
  display:flex;align-items:center;justify-content:center;
  padding:28px 24px;
}
.dialer-wrap{
  width:100%;max-width:440px;
  display:flex;flex-direction:column;gap:24px;
  animation:dialerIn .5s cubic-bezier(.22,1,.36,1) both;
}
.greet{text-align:center;margin:0}
.greet-time{
  margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--fg-dim);font-variant-numeric:tabular-nums;
}
.greet-hello{
  margin:6px 0 4px;font-size:30px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--fg) 0%,var(--accent-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.greet-stats{margin:6px 0 0;font-size:13px;color:var(--fg-muted)}

/* Today's stats — fixed in the bottom-right corner of the viewport (desktop only).
   Hidden on mobile and whenever the login screen is showing. */
.stat-strip{
  position:fixed;right:24px;bottom:24px;z-index:6;
  display:flex;gap:8px;
  padding:6px;border-radius:16px;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  pointer-events:none;
}
.stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  min-width:62px;
}
body[data-theme="light"] .stat{background:rgba(12,22,19,.04)}
.stat strong{
  font:700 18px/1 ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat span{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--fg-dim);
}
.stat-missed strong{color:var(--danger)}
.stat-missed[data-zero="true"] strong{color:var(--fg-dim)}
/* Hide on the login screen — only relevant once you're signed in */
body[data-screen="login"] .stat-strip{display:none}
/* Hide on mobile entirely */
@media (max-width:720px){
  .stat-strip{display:none!important}
}

/* Registration status chip — sits under the greeting, made prominent on failure */
.status-chip{
  display:inline-flex;align-items:center;gap:10px;
  margin:10px auto 0;padding:6px 14px 6px 12px;border-radius:999px;
  font:600 12px/1 inherit;letter-spacing:.04em;
  color:var(--fg-muted);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s,color .25s,padding .25s;
  max-width:100%;
}
body[data-theme="light"] .status-chip{background:rgba(12,22,19,.04)}
.status-chip .dot{
  width:8px;height:8px;border-radius:50%;background:var(--fg-dim);
  outline:3px solid rgba(255,255,255,.05);outline-offset:0;
  transition:background .25s,outline-color .25s;
}
/* Hide the connection chip when everything's fine — the agent-status pill
   already implies "online", and stacking three pills makes the dialer top
   feel cluttered. The chip only appears when there's a real issue
   (connecting / failed / idle) that the user actually needs to act on. */
.status-chip[data-state="registered"]{display:none}
.status-chip[data-state="connecting"]{color:var(--warn);background:rgba(255,185,70,.1)}
.status-chip[data-state="connecting"] .dot{background:var(--warn);outline-color:rgba(255,185,70,.2);animation:pulse 1.2s infinite}
.status-chip[data-state="failed"],
.status-chip[data-state="idle"]{
  color:#ff6b74;background:rgba(255,71,87,.12);
  padding:6px 6px 6px 14px;
}
.status-chip[data-state="failed"] .dot,
.status-chip[data-state="idle"] .dot{background:var(--danger);outline-color:rgba(255,71,87,.2)}

.status-retry{
  display:none;margin-left:4px;padding:6px 14px;border-radius:999px;
  background:var(--accent-grad);color:#052a22;border:none;cursor:pointer;
  font:inherit;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  transition:filter .15s,transform .08s;
}
.status-retry:hover{filter:brightness(1.08)}
.status-retry:active{transform:scale(.96)}
.status-chip[data-state="failed"] .status-retry,
.status-chip[data-state="idle"] .status-retry{display:inline-flex}

/* T9 suggestion list — pops up below the dial display when typing matches a contact/team */
.t9-suggestions{
  list-style:none;margin:0;padding:6px;
  display:flex;flex-direction:column;gap:4px;
  background:rgba(255,255,255,.04);
  border-radius:14px;
  max-height:42vh;overflow-y:auto;
  animation:vizIn .2s cubic-bezier(.22,1,.36,1);
}
body[data-theme="light"] .t9-suggestions{background:rgba(12,22,19,.04)}
.t9-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  cursor:pointer;transition:background .15s;
}
.t9-item:hover{background:rgba(0,217,167,.12)}
.t9-item .avatar{width:30px;height:30px;font-size:11px;flex:0 0 30px}
.t9-main{flex:1;min-width:0}
.t9-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t9-num{font-size:11px;color:var(--fg-muted);font-family:ui-monospace,Menlo,Consolas,monospace}
@media (max-width:720px){
  .t9-suggestions{max-height:30vh}
}

/* Favourites row above the keypad */
.favourites{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:4px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.favourites::-webkit-scrollbar{display:none}
.fav-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--fg);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .1s;
}
body[data-theme="light"] .fav-chip{background:rgba(12,22,19,.03)}
.fav-chip:hover{border-color:var(--accent);background:rgba(0,217,167,.1);transform:translateY(-1px)}
.fav-chip .avatar{width:26px;height:26px;font-size:10px;flex:0 0 26px}
.fav-chip .fav-name{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dialer behaviour pills — Status + Auto-answer */
.greet-pills{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin:14px 0 0;
  position:relative;
}
.status-wrap{position:relative}
.status-pill, .dnd-pill, .aa-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px 8px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--fg);
  font:inherit;font-weight:600;font-size:13px;
  cursor:pointer;user-select:none;
  transition:background .2s,color .2s,transform .1s;
  border:1px solid transparent;
}
body[data-theme="light"] .status-pill, body[data-theme="light"] .dnd-pill, body[data-theme="light"] .aa-pill{background:rgba(12,22,19,.04)}

/* Tone-driven dot + accent — used both inside the pill and in the menu */
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--fg-dim);
  outline:3px solid rgba(255,255,255,.05);outline-offset:0;
  transition:background .25s,outline-color .25s;
  flex-shrink:0;
}
.status-dot.tone-ok,      .status-pill[data-tone="ok"]      .status-dot{background:var(--success);outline-color:rgba(0,217,167,.18);animation:pulseDotOk 2.4s ease-in-out infinite}
.status-dot.tone-busy,    .status-pill[data-tone="busy"]    .status-dot{background:#ffb946;outline-color:rgba(255,185,70,.18)}
.status-dot.tone-meeting, .status-pill[data-tone="meeting"] .status-dot{background:#b897ff;outline-color:rgba(184,151,255,.2)}
.status-dot.tone-dnd,     .status-pill[data-tone="dnd"]     .status-dot{background:var(--danger);outline-color:rgba(255,71,87,.2)}
.status-dot.tone-oncall,  .status-pill[data-tone="oncall"]  .status-dot{background:#56b8ff;outline-color:rgba(86,184,255,.2);animation:pulseDotOk 1.2s ease-in-out infinite}
.status-dot.tone-wrap,    .status-pill[data-tone="wrap"]    .status-dot{background:#ffb946;outline-color:rgba(255,185,70,.2);animation:pulseDotOk 1.4s ease-in-out infinite}
.status-dot.tone-off,     .status-pill[data-tone="off"]     .status-dot{background:var(--fg-dim)}
@keyframes pulseDotOk{0%,100%{opacity:1}50%{opacity:.55}}

.status-pill[data-tone="ok"]     {color:var(--accent)}
.status-pill[data-tone="busy"]   {color:#ffb946}
.status-pill[data-tone="meeting"]{color:#b897ff}
.status-pill[data-tone="dnd"]    {color:#ff6b74}
.status-pill[data-tone="oncall"] {color:#56b8ff}
.status-pill[data-tone="wrap"]   {color:#ffb946}
.status-pill[data-tone="off"]    {color:var(--fg-dim)}
.status-caret{opacity:.55;transition:transform .2s}
.status-pill.open .status-caret{transform:rotate(180deg)}

/* Drop-down menu */
.status-menu{
  position:absolute;left:0;top:calc(100% + 6px);
  list-style:none;margin:0;padding:6px;min-width:180px;z-index:30;
  background:var(--bg-elev-solid);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-radius:14px;
  animation:statusMenuIn .15s cubic-bezier(.22,1,.36,1);
}
@keyframes statusMenuIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.status-menu li{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--fg);
}
.status-menu li:hover{background:rgba(255,255,255,.05)}
body[data-theme="light"] .status-menu li:hover{background:rgba(12,22,19,.05)}
.dnd-pill:hover, .aa-pill:hover{background:rgba(0,217,167,.14);transform:translateY(-1px)}
.dnd-pill:active, .aa-pill:active{transform:scale(.97)}
.dnd-pill svg, .aa-pill svg{width:14px;height:14px}
.dnd-pill .dnd-ico-on{display:none}
.dnd-pill .dnd-ico-off{display:block}
.dnd-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  outline:3px solid rgba(0,217,167,.18);outline-offset:0;
  transition:background .2s,outline-color .2s;
  animation:dndAvailBreath 2.4s ease-in-out infinite;
}
@keyframes dndAvailBreath{
  0%,100%{opacity:1}
  50%    {opacity:.55}
}
/* ON state */
.dnd-pill[aria-pressed="true"]{
  background:rgba(255,71,87,.12);
  border-color:rgba(255,71,87,.45);
  color:#ff6b74;
}
.dnd-pill[aria-pressed="true"] .dnd-ico-on{display:block}
.dnd-pill[aria-pressed="true"] .dnd-ico-off{display:none}
.dnd-pill[aria-pressed="true"] .dnd-dot{
  background:#ff4757;
  outline-color:rgba(255,71,87,.18);
  animation:none;
}
.settings-note{margin:0 0 14px;font-size:12px;color:var(--fg-muted);line-height:1.5}

/* ===================== INTEGRATIONS ===================== */
.integration{
  background:rgba(255,255,255,.025);
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
}
body[data-theme="light"] .integration{background:rgba(12,22,19,.025)}
.integration-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.integration-head > div{flex:1;min-width:0}
.integration-head strong{
  font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--fg);
  display:block;margin-bottom:2px;
}
.integration-desc{
  margin:0;font-size:11px;color:var(--fg-muted);line-height:1.4;
  font-weight:400;text-transform:none;letter-spacing:0;
}
.integration-desc code{
  background:rgba(0,217,167,.12);color:var(--accent);
  padding:0 5px;border-radius:4px;font-size:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:0;
}
.integration input[type=text]{
  width:100%;padding:9px 12px;
  background:var(--bg-input);border:none;color:var(--fg);
  border-radius:10px;outline:none;font:inherit;font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;
}
.integration input[type=text]::placeholder{
  color:var(--fg-dim);font-family:ui-monospace,Menlo,Consolas,monospace;
}
.integration input[type=text]:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Tight, neutral event chips — checked state is a thin mint border, not a fill */
.integration-events{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.integration-events label{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:8px;
  background:transparent;
  font-size:11px;font-weight:600;color:var(--fg-muted);
  cursor:pointer;text-transform:none;letter-spacing:0;
  transition:background .15s,color .15s,box-shadow .15s;
  user-select:none;
}
.integration-events label:hover{color:var(--fg);background:rgba(255,255,255,.04)}
body[data-theme="light"] .integration-events label:hover{background:rgba(12,22,19,.04)}
.integration-events label:has(input:checked){
  background:rgba(0,217,167,.10);
  color:var(--accent);
}
/* Hide the native checkbox — the pill itself is the affordance */
.integration-events input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.integration .btn-sm{
  margin-top:12px;padding:7px 14px;font-size:12px;font-weight:600;
  background:rgba(0,217,167,.10);color:var(--accent);
  border-radius:8px;
}
.integration .btn-sm:hover{background:rgba(0,217,167,.18)}

/* When the integration is disabled, dim everything below the header */
.integration:has(.switch input:not(:checked)) > input,
.integration:has(.switch input:not(:checked)) > .integration-events,
.integration:has(.switch input:not(:checked)) > .btn-sm{
  opacity:.35;pointer-events:none;
}

/* Contact-centre disposition code editor */
.cc-codes{
  display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;
}
.cc-code{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 6px 5px 11px;border-radius:999px;
  background:rgba(0,217,167,.10);color:var(--accent);
  font-size:11px;font-weight:600;
}
.cc-code button{
  width:18px;height:18px;border-radius:50%;
  background:transparent;border:none;color:var(--accent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;padding:0;
}
.cc-code button:hover{background:rgba(0,217,167,.2)}

/* iOS-style toggle switch */
.switch{
  position:relative;display:inline-block;width:38px;height:22px;
  flex:0 0 38px;cursor:pointer;
}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
.switch span{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(255,255,255,.14);
  transition:background .2s;
}
body[data-theme="light"] .switch span{background:rgba(12,22,19,.14)}
.switch span::before{
  content:"";position:absolute;left:3px;top:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::before{transform:translateX(16px)}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;background:transparent!important;border:none!important;padding:4px 0 0!important}
.settings-actions .btn{flex:1;justify-content:center;min-width:140px}
#theme-toggle-mobile .theme-sun,#theme-toggle-mobile .theme-moon{width:16px;height:16px}
body[data-theme="dark"] #theme-toggle-mobile .theme-sun{display:block}
body[data-theme="dark"] #theme-toggle-mobile .theme-moon{display:none}
body[data-theme="light"] #theme-toggle-mobile .theme-sun{display:none}
body[data-theme="light"] #theme-toggle-mobile .theme-moon{display:block}

/* Auto-answer pill: OFF by default (neutral), ON = mint */
.aa-pill{
  border-color:var(--border-strong);
  background:rgba(255,255,255,.03);
  color:var(--fg-muted);
}
body[data-theme="light"] .aa-pill{background:rgba(12,22,19,.03)}
.aa-pill[aria-pressed="true"]{
  border-color:rgba(0,217,167,.45);
  background:rgba(0,217,167,.12);
  color:var(--accent);
}
.aa-pill[aria-pressed="true"] svg{animation:aaBolt 2.4s ease-in-out infinite}
@keyframes aaBolt{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.6;transform:scale(1.12)}
}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tab-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.tab-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}

/* ===================== DIALER ===================== */
.dialer{
  position:relative;width:100%;
  display:flex;flex-direction:column;gap:18px;
  padding:20px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);border-radius:24px;
}
body[data-theme="light"] .dialer{background:rgba(12,22,19,.025)}
@keyframes dialerIn{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
.display{
  position:relative;
  background:linear-gradient(180deg,rgba(13,17,22,.45) 0%,rgba(8,12,16,.2) 100%);
  border-radius:18px;padding:4px 10px 4px 16px;
  display:flex;align-items:center;gap:8px;
  transition:background .2s, transform .12s;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
}
body[data-theme="light"] .display{
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(246,250,249,.35) 100%);
}
.display.pulse{
  animation:displayPulse .28s cubic-bezier(.22,1,.36,1);
}
@keyframes displayPulse{
  0%  {border-color:var(--accent)}
  100%{border-color:var(--border)}
}
#dial-number{
  flex:1;background:transparent;border:none;outline:none;
  font:700 34px/1.1 ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--fg);
  padding:16px 4px;letter-spacing:.015em;
  min-width:0;
  font-variant-numeric:tabular-nums;
  text-align:left;
}
#dial-number::placeholder{color:var(--fg-dim);font-weight:500;letter-spacing:0}
.backspace{
  width:44px;height:44px;border-radius:14px;border:none;background:transparent;
  color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .08s;
}
.backspace:hover{background:var(--bg-elev-2);color:var(--fg)}
.backspace:active{transform:scale(.9)}
.backspace svg{width:22px;height:22px}

.keypad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  justify-items:center;
}
.keypad button{
  position:relative;
  width:100%;aspect-ratio:1/1;max-width:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--fg);border-radius:50%;
  font:inherit;cursor:pointer;
  transition:transform .12s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s,color .2s;
  user-select:none;
  overflow:hidden;
  animation:keyIn .4s cubic-bezier(.22,1,.36,1) both;
}
body[data-theme="light"] .keypad button{
  background:rgba(12,22,19,.035);
}
/* Row-then-column stagger: rows fade in one after another */
.keypad button:nth-child(1){animation-delay:.04s}
.keypad button:nth-child(2){animation-delay:.07s}
.keypad button:nth-child(3){animation-delay:.10s}
.keypad button:nth-child(4){animation-delay:.13s}
.keypad button:nth-child(5){animation-delay:.16s}
.keypad button:nth-child(6){animation-delay:.19s}
.keypad button:nth-child(7){animation-delay:.22s}
.keypad button:nth-child(8){animation-delay:.25s}
.keypad button:nth-child(9){animation-delay:.28s}
.keypad button:nth-child(10){animation-delay:.31s}
.keypad button:nth-child(11){animation-delay:.34s}
.keypad button:nth-child(12){animation-delay:.37s}
@keyframes keyIn{
  from{opacity:0;transform:scale(.82) translateY(8px)}
  to{opacity:1;transform:none}
}
/* Soft accent wash (appears on hover) */
.keypad button::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--accent-grad);opacity:0;transition:opacity .2s;pointer-events:none;
}
/* Ripple ring — radiates on press */
.keypad button::after{
  content:"";position:absolute;left:50%;top:50%;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 65%);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;pointer-events:none;
}
.keypad button:hover{border-color:var(--accent);background:rgba(0,217,167,.08)}
.keypad button:hover::before{opacity:.08}
.keypad button:active,
.keypad button.pressed{
  transform:scale(.92);
  border-color:var(--accent);
  background:rgba(0,217,167,.18);
}
.keypad button:active::before,
.keypad button.pressed::before{opacity:.22}
.keypad button.pressed::after{
  animation:ripple .45s cubic-bezier(.22,1,.36,1);
}
@keyframes ripple{
  0%  {transform:translate(-50%,-50%) scale(0);   opacity:.55}
  100%{transform:translate(-50%,-50%) scale(10);  opacity:0}
}
.keypad button strong{
  font:600 2rem/1 ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  letter-spacing:.02em;position:relative;z-index:1;
  font-variant-numeric:tabular-nums;
  transition:transform .15s cubic-bezier(.22,1,.36,1);
}
.keypad button:active strong,
.keypad button.pressed strong{transform:scale(1.08)}
.keypad button span{
  font-size:10px;color:var(--fg-muted);letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;position:relative;z-index:1;min-height:1em;
}
.keypad button:hover span,
.keypad button:hover strong{color:var(--fg)}

/* ===================== LISTS (history, contacts) ===================== */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.list .empty{
  padding:40px 20px;text-align:center;color:var(--fg-dim);
  border:1px dashed var(--border);border-radius:12px;
}
.list-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  border:1px solid transparent;
  position:relative;overflow:hidden;
}
.list-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(0,217,167,.08),transparent 60%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.list-item:hover{
  background:var(--bg-elev-2);border-color:var(--border-strong);
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
}
.list-item:hover::before{opacity:1}
.list-item .avatar{flex:0 0 36px;width:36px;height:36px;font-size:13px}
.list-item .li-main{flex:1;min-width:0}
.list-item .li-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .li-sub{color:var(--fg-muted);font-size:12px;margin-top:2px;display:flex;align-items:center;gap:6px}
.list-item .li-sub svg{width:12px;height:12px}
.li-sub.missed{color:var(--danger)}

/* Per-row quick actions (history). Hover on desktop, always-on on mobile. */
.row-acts{
  display:flex;align-items:center;gap:4px;margin-left:6px;
  opacity:0;transform:translateX(4px);
  transition:opacity .2s, transform .2s;
}
.list-item:hover .row-acts{opacity:1;transform:none}
.list-item:focus-within .row-acts{opacity:1;transform:none}
.row-act{
  width:32px;height:32px;border-radius:10px;border:none;
  background:rgba(255,255,255,.06);color:var(--fg-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
body[data-theme="light"] .row-act{background:rgba(12,22,19,.06)}
.row-act:hover{background:rgba(0,217,167,.18);color:var(--accent)}
.row-act svg{width:14px;height:14px}
.row-act-call{background:var(--accent-grad);color:#052a22}
.row-act-call:hover{background:var(--accent-grad);filter:brightness(1.08);color:#052a22}
@media (max-width:720px){
  .row-acts{opacity:1;transform:none;gap:2px}
  .row-act{width:30px;height:30px}
}

/* Call-history direction emphasis — instantly distinguish in vs out vs missed */
.hist-sub-inbound{color:var(--accent)}
.hist-sub-outbound{color:#b897ff}
.hist-sub-missed{color:var(--danger)}
.hist-sub-inbound svg, .hist-sub-outbound svg, .hist-sub-missed svg{width:14px;height:14px}
.dir-tag{
  display:inline-block;margin-left:8px;padding:1px 7px;
  border-radius:4px;
  font:700 9px/1.5 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.14em;vertical-align:middle;
}
.dir-tag-inbound{background:rgba(0,217,167,.16);color:var(--accent)}
.dir-tag-outbound{background:rgba(184,151,255,.16);color:#b897ff}
.dir-tag-missed{background:rgba(255,71,87,.16);color:#ff6b74}
.hist-missed .li-title{color:var(--fg)}
/* Subtle left-edge accent per direction */
.hist-inbound  .avatar::before,
.hist-outbound .avatar::before,
.hist-missed   .avatar::before{
  content:"";position:absolute;left:-10px;top:4px;bottom:4px;width:3px;border-radius:2px;
}
.list-item{position:relative}
.hist-inbound  .avatar::before{background:var(--accent)}
.hist-outbound .avatar::before{background:#b897ff}
.hist-missed   .avatar::before{background:var(--danger)}
.avatar{position:relative}
.list-item .li-meta{color:var(--fg-dim);font-size:12px;text-align:right;flex:0 0 auto}
.list-item .li-actions{display:flex;gap:4px;opacity:0;transition:opacity .12s}
.list-item:hover .li-actions{opacity:1}
.list-item .li-actions button{
  width:32px;height:32px;border-radius:8px;border:none;background:transparent;
  color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.list-item .li-actions button:hover{background:var(--bg-elev-2);color:var(--fg)}
.list-item .li-actions svg{width:16px;height:16px}

.search{
  position:relative;margin-bottom:16px;
}
.search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--fg-dim);
}
.search input{
  width:100%;padding:10px 12px 10px 36px;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);
  border-radius:10px;outline:none;font:inherit;
}
.search input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}

/* ===================== SMS / MESSAGES ===================== */
.sms-container{display:flex;flex-direction:column;height:100%;min-height:0}
.sms-threads{flex:0 0 auto}
.sms-thread{position:relative}
.sms-thread.unread .li-title{font-weight:700}
.sms-thread.unread::after{
  content:"";position:absolute;top:14px;right:14px;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.sms-snippet{color:var(--fg-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}

/* Conversation view — overlays the threads when active */
.sms-conversation{
  display:flex;flex-direction:column;height:100%;min-height:0;gap:8px;
}
.sms-conversation[hidden]{display:none}
.sms-container:has(.sms-conversation:not([hidden])) .sms-threads{display:none}

.sms-convo-head{
  display:flex;align-items:center;gap:12px;padding:2px 0 12px;
}
.sms-peer-info{flex:1;display:flex;flex-direction:column;min-width:0}
.sms-peer-info strong{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sms-peer-info .mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;color:var(--fg-muted);
}
.sms-call-btn{width:40px;height:40px;color:var(--accent)}
.sms-back{flex:0 0 36px}

.sms-messages{
  flex:1;min-height:0;overflow-y:auto;padding:6px 2px;
  display:flex;flex-direction:column;gap:4px;
}
.sms-msg{
  max-width:78%;padding:9px 13px;border-radius:18px;font-size:14px;line-height:1.35;
  word-wrap:break-word;animation:msgIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sms-msg-in{
  align-self:flex-start;
  background:rgba(255,255,255,.06);color:var(--fg);
  border-bottom-left-radius:6px;
}
body[data-theme="light"] .sms-msg-in{background:rgba(12,22,19,.06)}
.sms-msg-out{
  align-self:flex-end;
  background:var(--accent-grad);color:#052a22;
  border-bottom-right-radius:6px;
}
.sms-msg-time{
  font-size:10px;color:var(--fg-dim);
  align-self:center;margin:10px 0 2px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}
.sms-msg-pending{opacity:.6}

.sms-composer{
  display:flex;align-items:flex-end;gap:8px;
  padding:8px 0 0;
}
.sms-composer textarea{
  flex:1;min-height:40px;max-height:120px;padding:10px 14px;
  background:rgba(255,255,255,.04);border:none;color:var(--fg);
  border-radius:20px;outline:none;resize:none;font:inherit;font-size:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body[data-theme="light"] .sms-composer textarea{background:rgba(12,22,19,.04)}
.sms-composer textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.sms-send-btn{
  flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.sms-send-btn svg{width:18px;height:18px}
.sms-send-btn::after{display:none}
.sms-send-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}

/* Mobile: conversation takes over the tab */
@media (max-width:720px){
  .sms-peer-info strong{font-size:15px}
  .sms-msg{max-width:86%;font-size:13px}
}

/* ===================== VOICEMAIL ===================== */
.vm-item{flex-wrap:wrap;align-items:flex-start;position:relative}
.vm-item.unread .li-title{font-weight:700}
.vm-new-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:6px;
  box-shadow:0 0 8px var(--accent);
}
.vm-player{
  flex:0 0 100%;order:10;
  display:flex;align-items:center;gap:12px;
  padding:12px 4px 4px;margin-top:8px;
  border-top:1px solid var(--border);
  animation:vmIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes vmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vm-play{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:var(--accent-grad);color:#052a22;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
.vm-play:hover{filter:brightness(1.1)}
.vm-play:active{transform:scale(.93)}
.vm-play svg{width:18px;height:18px}
.vm-wave{
  flex:1;height:44px;cursor:pointer;
  touch-action:none;
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
body[data-theme="light"] .vm-wave{background:rgba(12,22,19,.03)}
.vm-time{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums;
  min-width:94px;text-align:right;
}

/* ===================== PRESENCE / TEAM ===================== */
.tab-sub{margin:2px 0 0;font-size:12px;color:var(--fg-muted)}
.tab-head > div{display:flex;flex-direction:column}
.avatar-dot{position:relative}
.presence{
  position:absolute;right:-2px;bottom:-2px;
  width:12px;height:12px;border-radius:50%;
  border:2px solid var(--bg-elev-solid);
  background:var(--fg-dim);
}
.presence-ok  {background:#00d9a7}
.presence-busy{background:#ff4757}
.presence-ring{background:#ffb946;animation:presRing 1.2s ease-in-out infinite}
.presence-off {background:#5d6776}
@keyframes presRing{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.25);opacity:.6}
}
.team-item .li-meta.mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--fg-muted);
}
/* Filter pills (team list) */
.filter-pills{display:flex;gap:6px;margin:-6px 0 14px;flex-wrap:wrap}
.filter-pill{
  padding:6px 12px;border-radius:999px;
  background:transparent;border:1px solid var(--border);
  color:var(--fg-muted);font:inherit;font-weight:600;font-size:12px;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.filter-pill:hover{color:var(--fg)}
.filter-pill.active{
  background:rgba(0,217,167,.12);
  border-color:rgba(0,217,167,.45);
  color:var(--accent);
}

.presence-dnd{
  position:absolute;left:-2px;top:-2px;
  width:16px;height:16px;border-radius:50%;
  background:#ff4757;color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-elev-solid);
}
.presence-dnd svg{width:9px;height:9px}
.dnd-tag{
  display:inline-block;margin-left:6px;vertical-align:middle;
  padding:1px 6px;border-radius:4px;
  background:rgba(255,71,87,.15);
  color:#ff6b74;
  font:700 9px/1.3 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.1em;
}

/* ===================== AVATAR ===================== */
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-grad);
  color:#052a22;font-weight:700;font-size:14px;
  flex:0 0 40px;text-transform:uppercase;letter-spacing:.02em;
  /* flat */
}
.avatar-xl{
  width:112px;height:112px;font-size:38px;font-weight:700;
}

/* ===================== SETTINGS ===================== */
.settings{display:flex;flex-direction:column;gap:16px;max-width:560px}

/* Multi-column on desktop — masonry-style packing of section cards */
@media (min-width:980px){
  .settings{
    display:block;
    columns:2;
    column-gap:18px;
    max-width:1080px;
  }
  .settings > section{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    display:block;
    margin-bottom:16px;
  }
  .settings > section:last-child{margin-bottom:0}
}
@media (min-width:1400px){
  .settings{columns:3;max-width:1400px}
}
.settings section{
  background:var(--bg-elev);border:1px solid var(--border);
  border-radius:14px;padding:18px 20px;
}
.settings h3{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.settings label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;color:var(--fg-muted)}
.settings label:last-of-type{margin-bottom:0}
.settings select, .settings input[type=text], .settings input[type=tel]{
  padding:9px 10px;background:var(--bg-input);border:1px solid var(--border);color:var(--fg);
  border-radius:8px;outline:none;font:inherit;
}
.settings select:focus, .settings input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.settings .checkbox{flex-direction:row;align-items:center;gap:10px;color:var(--fg)}
.settings .slider{flex-direction:row;align-items:center;gap:10px;color:var(--fg)}
.settings .slider input[type=range]{flex:1}
.kv{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--fg-muted)}
.kv b{color:var(--fg);font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* Re-register button — primary, full width, with state cue when registration fails */
.reregister-btn{
  width:100%;justify-content:center;margin-top:14px;
  font-size:14px;letter-spacing:.02em;
  padding:13px 16px;
}
.reregister-btn svg{width:16px;height:16px}
.reregister-btn:hover svg{animation:spin 1.2s linear}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* When the body's me-status is failed/idle, make the button shout */
body[data-screen="app"] .me-status[data-state="failed"] ~ * .reregister-btn,
body:has(.me-status[data-state="failed"]) .reregister-btn,
body:has(.me-status[data-state="idle"]) .reregister-btn{
  background:linear-gradient(135deg,#ff6b74,#e63946);
  color:#fff;border:none;
  animation:reregPulse 2s ease-in-out infinite;
}
@keyframes reregPulse{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(1.15)}
}

/* ===================== AUDIO VISUALISERS ===================== */
.viz{
  display:block;width:100%;height:28px;
  background:transparent;
  border-radius:6px;
  image-rendering:-webkit-optimize-contrast;
}
/* Persistent soft-wave pinned to the bottom of the content area */
.viz-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:110px;
  pointer-events:none;
  z-index:1;
  opacity:.95;
}
/* Push tab content above the viz so it never gets covered */
.tab{padding-bottom:118px}
.tab[data-tab="dialer"].active{padding-bottom:110px}
@media (max-width:720px){
  .viz-bottom{height:56px;opacity:.8}
  .tab{padding-bottom:68px}
  .tab[data-tab="dialer"].active{padding-bottom:60px}
}
.viz-duo{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:18px;width:100%;
  animation:vizIn .35s cubic-bezier(.22,1,.36,1) .15s both;
}
@keyframes vizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.viz-lane{display:flex;flex-direction:column;gap:4px;align-items:center}
.viz-label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--fg-dim);
}
.viz-call{
  height:40px;
  background:linear-gradient(180deg,var(--bg-elev-2),transparent);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
}

/* Orbit + pulse around the in-call avatar / orb */
.avatar-wrap{
  position:relative;margin-bottom:10px;padding:20px;
  width:180px;height:180px;
}
.call-orb{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.orb-initials{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:3;color:rgba(5,42,34,.9);
  font-weight:700;font-size:32px;letter-spacing:.02em;
  text-transform:uppercase;pointer-events:none;
  mix-blend-mode:overlay;
  text-shadow:0 0 22px rgba(255,255,255,.35);
}
body[data-theme="light"] .orb-initials{color:rgba(4,38,30,.8);mix-blend-mode:multiply}
@media (max-width:720px){
  .avatar-wrap{width:150px;height:150px;padding:16px}
  .orb-initials{font-size:28px}
}
.avatar-wrap::before,
.avatar-wrap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(0,217,167,.18);
  pointer-events:none;
}
.avatar-wrap::before{
  inset:-4px;
  animation:orbitA 16s linear infinite;
  border-color:rgba(0,217,167,.22);
  border-style:dashed;
  border-width:1px;
}
.avatar-wrap::after{
  inset:8px;
  animation:orbitB 22s linear infinite reverse;
  border-color:rgba(184,151,255,.18);
}
@keyframes orbitA{to{transform:rotate(360deg)}}
@keyframes orbitB{to{transform:rotate(360deg)}}
.pulse-ring{
  position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 68%);
  opacity:0;transform:scale(.9);
  transition:opacity .15s ease, transform .18s cubic-bezier(.22,1,.36,1);
  pointer-events:none;z-index:0;
}
.avatar-wrap .avatar{position:relative;z-index:2}

/* ===================== CALL OVERLAY ===================== */
.call-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(8,10,14,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .2s ease;
}
body[data-theme="light"] .call-overlay{background:rgba(30,40,55,.55)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.call-card{
  width:100%;max-width:440px;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:28px;padding:36px 28px 28px;
  position:relative;
  /* flat — rely on border + backdrop blur for depth */
  text-align:center;
  position:relative;overflow:hidden;
  animation:callCardIn .4s cubic-bezier(.22,1,.36,1);
}
/* flat call card */
@keyframes callCardIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}

/* Pop-out button (top-right corner of the call card) */
.call-popout{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  background:rgba(255,255,255,.06);color:var(--fg-muted);
  z-index:5;
}
body[data-theme="light"] .call-popout{background:rgba(12,22,19,.06)}
.call-popout:hover{color:var(--accent);background:rgba(0,217,167,.14)}
/* Hide on browsers that don't support Document PiP */
.no-pip .call-popout{display:none}
/* Inside a PiP window, the overlay shouldn't try to show the dimmed backdrop */
.is-pip .call-overlay{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;animation:none}
.is-pip .call-card{max-width:none;border-radius:0;border:none;background:transparent;padding:18px}
.is-pip .call-popout{display:none}
.call-peer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px}
.call-peer .avatar-xl{margin-bottom:8px}
.call-peer h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.call-peer #call-number{margin:0;color:var(--fg-muted);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.02em}
.call-state{margin:12px 0 0!important;color:var(--fg-muted);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.call-state.ringing::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin-left:4px;animation:dots 1.2s infinite}
@keyframes dots{0%,80%,100%{opacity:.3}40%{opacity:1}}
.call-timer{margin:8px 0 0!important;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
.call-quality{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;padding:5px 11px;
  border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.02);
  font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;
  color:var(--fg-muted);text-transform:uppercase;
}
body[data-theme="light"] .call-quality{background:rgba(12,22,19,.03)}
.cq-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.cq-bars i{
  display:block;width:3px;background:var(--fg-dim);border-radius:1px;
  transition:background .2s, height .2s;
}
.cq-bars i:nth-child(1){height:4px}
.cq-bars i:nth-child(2){height:6px}
.cq-bars i:nth-child(3){height:9px}
.cq-bars i:nth-child(4){height:12px}
.call-quality.q-4 .cq-bars i{background:#00d9a7}
.call-quality.q-3 .cq-bars i:nth-child(-n+3){background:#00d9a7}
.call-quality.q-2 .cq-bars i:nth-child(-n+2){background:#ffb946}
.call-quality.q-1 .cq-bars i:nth-child(1){background:#ff4757}
.call-quality.q-4{color:var(--accent);border-color:rgba(0,217,167,.3)}
.call-quality.q-3{color:var(--accent);border-color:rgba(0,217,167,.25)}
.call-quality.q-2{color:#ffb946;border-color:rgba(255,185,70,.35)}
.call-quality.q-1{color:#ff6b74;border-color:rgba(255,71,87,.35)}

.call-row{display:flex;justify-content:center;gap:48px;padding:8px 0}
.call-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.round-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px;border-radius:14px;
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--fg);
  cursor:pointer;font:inherit;font-size:11px;font-weight:500;
  transition:background .15s,border-color .15s,color .15s;
}
.round-btn svg{width:22px;height:22px}
.round-btn:hover{background:var(--border);border-color:var(--border-strong)}
.round-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fab{
  position:relative;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;color:#fff;
  transition:transform .12s cubic-bezier(.22,1,.36,1),filter .15s;
}
.fab:hover{filter:brightness(1.08)}
.fab:active{transform:scale(.94)}
.fab svg{width:28px;height:28px;position:relative;z-index:1}
.fab-call{background:var(--accent-grad);color:#052a22}
.fab-call::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--accent);
  opacity:.5;pointer-events:none;
  animation:callPing 1.6s cubic-bezier(.22,1,.36,1) infinite;
}
.fab-hang{background:linear-gradient(135deg,#ff6b74,#e63946)}
.fab-hang svg{transform:rotate(135deg)}

.inline-keypad{
  margin-top:10px;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  justify-content:stretch!important;
}
.inline-keypad button{
  aspect-ratio:1.4/1;padding:6px;width:auto!important;height:auto!important;max-width:none!important;
  border-radius:14px!important;
}
.inline-keypad button strong{font-size:1.25rem!important;font-weight:600}
.inline-keypad button span{font-size:8px;letter-spacing:.12em}
/* Tiny hint that digits go to the far end */
.inline-keypad-hint{
  text-align:center;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-dim);margin:10px 0 -4px;font-weight:600;
}

/* On mobile, when the keypad is shown we tighten the rest of the card so everything fits */
@media (max-width:720px){
  .call-card{padding:20px 18px 18px}
  .avatar-wrap{width:120px;height:120px;padding:12px}
  .orb-initials{font-size:22px}
  .call-peer h2{font-size:20px}
  .call-peer{margin-bottom:14px}
  .viz-duo{display:none}  /* the always-on bottom viz + orb cover audio feedback */
  .inline-keypad button strong{font-size:1.15rem!important}
}
.transfer-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.transfer-row input{
  flex:1 1 160px;min-width:0;padding:11px 12px;
  background:var(--bg-input);border:1px solid var(--border);color:var(--fg);
  border-radius:10px;outline:none;font:inherit;
}
.transfer-row input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}

/* Attended-transfer bar — visible while consulting the second party */
.attended-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding:10px 14px;border-radius:16px;
  background:rgba(184,151,255,.12);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  animation:vizIn .25s cubic-bezier(.22,1,.36,1);
}
.attended-info{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;font-size:13px;color:var(--fg);
}
.attended-label{
  font:700 9px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lav);
  padding:3px 7px;border-radius:5px;
  background:rgba(184,151,255,.18);
}
.attended-arrow{color:var(--fg-muted);font-weight:700}
.attended-bar .btn{padding:7px 14px;font-size:12px}

/* Second call waiting banner (inside call overlay) */
.second-call{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding:10px 12px 10px 14px;
  border-radius:16px;
  background:rgba(0,217,167,.12);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  animation:vizIn .25s cubic-bezier(.22,1,.36,1);
}
.second-call-info{flex:1;display:flex;flex-direction:column;min-width:0;text-align:left}
.second-call-info strong{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.second-call-info span{font-size:12px;color:var(--fg-muted);font-family:ui-monospace,Menlo,Consolas,monospace}
.second-call .fab{width:40px;height:40px;flex:0 0 40px}
.second-call .fab svg{width:18px;height:18px}
.second-call .fab::after{display:none}

/* ===================== SHEET (slide-up detail view) ===================== */
.sheet{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,10,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fade .15s ease;
}
.sheet-card{
  width:100%;max-width:560px;max-height:85vh;
  background:var(--bg-elev-solid);
  border:1px solid var(--border);
  border-radius:24px 24px 0 0;
  padding:20px 22px 24px;
  display:flex;flex-direction:column;gap:14px;
  animation:sheetUp .3s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;gap:14px}
.sheet-identity{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.sheet-identity h2{margin:0;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-identity p{margin:3px 0 0;color:var(--fg-muted);font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
.avatar-lg{width:56px;height:56px;font-size:18px;flex:0 0 56px}
.person-call{width:48px;height:48px;flex:0 0 48px}
.person-call svg{width:20px;height:20px}
.person-call::after{display:none}
.sheet-body{flex:1;overflow-y:auto;padding-bottom:6px}
.sheet-body section{margin-bottom:18px}
.sheet-body section:last-child{margin-bottom:0}
.sheet-body h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)}

@media (min-width:720px){
  .sheet{align-items:center;padding:30px}
  .sheet-card{border-radius:24px;max-height:min(80vh,680px)}
  @keyframes sheetUp{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
}

/* ===================== MODAL ===================== */
.modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(8,10,14,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .15s ease;
}
.modal-card{
  width:100%;max-width:440px;
  background:var(--bg-elev);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-radius:22px;padding:26px 26px 22px;
}
.modal-card h3{margin:0 0 18px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.modal-card form{display:flex;flex-direction:column;gap:14px}
.modal-card label{
  display:flex;flex-direction:column;gap:7px;
  font-size:11px;color:var(--fg-muted);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.modal-card input,
.modal-card textarea{
  padding:12px 14px;background:var(--bg-input);border:none;
  color:var(--fg);border-radius:12px;outline:none;font:inherit;
  font-size:14px;line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;
  transition:outline-color .15s;
}
.modal-card textarea{resize:vertical;min-height:96px;font-family:inherit}
.modal-card input:focus,
.modal-card textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.modal-card input::placeholder,
.modal-card textarea::placeholder{color:var(--fg-dim);font-weight:400}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
/* Disposition modal — post-call wrap-up */
.disp-meta{
  margin:-6px 0 12px;font-size:12px;color:var(--fg-muted);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.02em;
}
.disp-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.disp-chip{
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.04);
  font:inherit;font-size:12px;font-weight:600;color:var(--fg);
  cursor:pointer;border:none;
  transition:background .15s,color .15s;
}
body[data-theme="light"] .disp-chip{background:rgba(12,22,19,.04)}
.disp-chip:hover{background:rgba(0,217,167,.12);color:var(--accent)}
.disp-chip.selected{
  background:var(--accent-grad);color:#052a22;
}

/* What's-new modal */
.changelog-card{max-width:540px}
.changelog-body{
  display:flex;flex-direction:column;gap:18px;
  max-height:60vh;overflow-y:auto;padding-right:4px;
}
.changelog-rel header{
  display:flex;align-items:baseline;gap:10px;margin-bottom:6px;
}
.changelog-ver{
  font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;
  color:var(--accent);letter-spacing:.04em;
  padding:3px 8px;border-radius:6px;
  background:rgba(0,217,167,.12);
}
.changelog-date{font-size:11px;color:var(--fg-dim);letter-spacing:.06em}
.changelog-rel ul{
  margin:0;padding:0 0 0 18px;
  display:flex;flex-direction:column;gap:5px;
  font-size:13px;line-height:1.45;color:var(--fg-muted);
}
.changelog-rel li::marker{color:var(--accent)}
.whats-new-btn{margin-top:8px;width:100%;justify-content:center;font-size:12px;padding:8px}

.shortcuts{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.shortcuts li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.shortcuts li:last-child{border-bottom:none}
.shortcuts li span{color:var(--fg-muted)}
.shortcuts kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:24px;padding:0 7px;
  background:var(--bg-input);border:1px solid var(--border-strong);border-radius:6px;
  color:var(--fg);font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em;
  flex-shrink:0;
}
.shortcuts kbd + kbd{margin-left:-4px}

/* ===================== TOASTS ===================== */
.toasts{position:fixed;bottom:16px;right:16px;z-index:110;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{
  padding:12px 16px;border-radius:12px;
  background:var(--bg-elev);border:1px solid var(--border);
  color:var(--fg);box-shadow:var(--shadow);
  font-size:13px;line-height:1.4;
  animation:toastIn .2s ease;
}
.toast.error{border-color:rgba(239,68,68,.4)}
.toast.success{border-color:rgba(16,185,129,.4)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== THEME TOGGLE ===================== */
body[data-theme="dark"] #theme-toggle .theme-sun{display:block}
body[data-theme="dark"] #theme-toggle .theme-moon{display:none}
body[data-theme="light"] #theme-toggle .theme-sun{display:none}
body[data-theme="light"] #theme-toggle .theme-moon{display:block}

/* ===================== SCROLLBAR ===================== */
.tab::-webkit-scrollbar{width:10px;height:10px}
.tab::-webkit-scrollbar-track{background:transparent}
.tab::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;border:2px solid var(--bg)}
.tab::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:720px){
  /* Kill the big outer padding + floating-panel look — true edge-to-edge */
  .screen-app{flex-direction:column-reverse;padding:0;gap:0}
  .content{
    border:none;border-radius:0;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .sidebar{
    width:100%;flex:0 0 auto;flex-direction:row;align-items:center;
    padding:6px 8px;border:none;border-top:1px solid var(--border);
    border-radius:0;background:var(--bg-elev-solid);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    position:relative;z-index:5;
  }
  .sidebar-top{display:none}
  .nav{flex-direction:row;flex:1;gap:2px;justify-content:space-around}
  .nav-btn{
    flex-direction:column;gap:3px;padding:6px 2px;font-size:10px;
    flex:1;min-width:0;min-height:48px;
    justify-content:center;align-items:center;text-align:center;overflow:visible;
    position:relative;
  }
  .nav-btn svg{width:20px;height:20px;flex:0 0 20px}
  /* Hide the long label, render the short one from data-short attribute */
  .nav-btn[data-short] > span{display:none}
  .nav-btn[data-short]::after{
    content:attr(data-short);
    font-size:10px;line-height:1.2;font-weight:500;
    color:inherit;
    white-space:nowrap;
  }
  .nav-btn .badge{
    top:0;right:50%;left:auto;
    transform:translate(140%,-30%);
    margin-left:0;font-size:10px;min-width:16px;padding:1px 4px;
  }
  .nav-btn.active{color:var(--accent)}
  .nav-btn .badge{position:absolute;top:2px;right:6px;margin-left:0}
  .nav-pill{display:none}  /* sliding pill isn't useful in a bottom tab bar */
  /* Hide the theme+logout icon tray on mobile — they live in Settings instead */
  .sidebar-bot{display:none}
  .tab{padding:12px 14px}
  .call-grid{grid-template-columns:repeat(2,1fr)}

  /* Dialer: drop the card entirely on mobile — everything flush, centred, no scroll */
  .tab[data-tab="dialer"].active{
    padding:14px 12px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .dialer-wrap{gap:10px;max-width:none}
  .dialer{
    padding:0;background:transparent;border:none;border-radius:0;
  }
  .dialer::before, .dialer::after{display:none}

  /* Compact greeting — just a name + pills, no time/stats line */
  .greet{text-align:center}
  .greet-time, .greet-stats{display:none}
  .greet-hello{font-size:17px;margin:0;font-weight:700}
  .greet-pills{margin:6px 0 0;justify-content:center;gap:6px;flex-wrap:wrap}
  .status-pill, .dnd-pill, .aa-pill{padding:5px 10px 5px 8px;font-size:11px;gap:6px}
  .status-pill svg, .dnd-pill svg, .aa-pill svg{width:12px;height:12px}
  .status-dot, .dnd-dot{width:6px;height:6px}
  /* Connection chip stays compact when it does appear */
  .status-chip{font-size:11px;padding:4px 12px 4px 10px;margin-top:8px}
  .status-chip .dot{width:6px;height:6px}
  .status-retry{font-size:10px;padding:4px 10px;letter-spacing:.05em}

  /* Compact fixed-size keypad — centred, never balloons */
  .keypad{
    gap:10px;
    grid-template-columns:repeat(3, 78px);
    justify-content:center;
  }
  .keypad button{width:78px;height:78px;max-width:78px;aspect-ratio:unset}
  .keypad button strong{font-size:2.5rem;font-weight:600;line-height:1}
  .keypad button span{font-size:9px;letter-spacing:.16em;min-height:0.9em}

  /* Flatter display */
  .display{border-radius:14px;padding:2px 8px 2px 12px}
  #dial-number{font-size:28px;padding:10px 2px}

  /* Smaller viz strip */
  .viz-dialer{height:30px;padding:2px}

  /* Smaller call FAB on mobile */
  .fab-call-solid{width:64px;height:64px}
  .fab-call-solid svg{width:24px;height:24px}
  .call-row-dialer{padding:2px 0 0}

  /* List views: a bit tighter */
  .list-item{padding:10px 10px}

  /* Hide the desktop-only "native apps" block on mobile since the banner handles it */
  .native-apps{margin-top:16px;padding-top:14px}
  .native-badges{grid-template-columns:1fr 1fr;gap:6px}
  .native-badge{padding:8px 10px}
  .native-badge strong{font-size:12px}
  .native-badge small{font-size:9px}
}

/* Ensure the whole viewport is used (covers iOS safe-area insets) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width:720px){
    .sidebar{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
    .tab[data-tab="dialer"].active{padding-top:calc(10px + env(safe-area-inset-top))}
  }
}

@media (max-width:720px){
  /* Login: allow natural scroll on mobile so the native-app badges + fine
     print never get clipped below the fold on small screens. */
  .screen-login{
    align-items:flex-start;
    padding:20px 16px calc(40px + env(safe-area-inset-bottom));
  }
}

@media (max-width:420px){
  .login-card{padding:22px 20px}
  #login-form .row{grid-template-columns:1fr}
  .call-card{padding:26px 20px 20px}
  .call-peer .avatar-xl{width:80px;height:80px;font-size:28px}
  .call-peer h2{font-size:20px}
  /* Even tighter keypad on small phones so everything fits without scroll */
  .keypad{gap:8px;grid-template-columns:repeat(3, 70px)}
  .keypad button{width:70px;height:70px;max-width:70px}
  .keypad button strong{font-size:2.15rem;line-height:1}
  .dialer-wrap{gap:8px}
}

/* Very short screens (landscape phones) — collapse further */
@media (max-width:720px) and (max-height:640px){
  .greet-hello{font-size:18px}
  .greet-pills{display:none}  /* pills still available via settings screen */
  .viz-dialer{display:none}
  .keypad{gap:6px}
  .display{padding:0 8px 0 12px}
  #dial-number{font-size:24px;padding:8px 2px}
  .fab-call-solid{width:56px;height:56px}
  .fab-call-solid svg{width:22px;height:22px}
}