/* ═══════════════════════════════════════════════════════════════════
   hyvoip — v1.1 Design System
   Extracted from inline <style> + color tokens applied
   All hardcoded colors replaced with CSS custom properties
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Compat aliases for legacy var references ─────────────── */
:root{
  --cm-cyan:    var(--info);
  --cm-green:   var(--accent);
  --cm-mag:     var(--purple);
  --cm-gold:    var(--warning);
  --cm-red:     var(--danger);
  --sp-green:   var(--accent);
  --glass-bg:   var(--bg-card);
  --glass-bg-light: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --glass-bg-heavy: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  --glass-border: var(--border);
  --glass-border-light: var(--border);
  --glass-border-subtle: color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.25);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,.4);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-radius: var(--radius-xl, 20px);
  --glass-radius-sm: var(--radius-ios, 14px);
  --success: var(--accent);
  --bg-input: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  --bg-card-hover: color-mix(in srgb, var(--bg-card) 85%, var(--accent) 15%);
  --bg-modal: rgba(0,0,0,.7);
  --text: var(--accent-text);
  --border-hover: var(--border-focus);
  --accent-hover: var(--accent);
  --z-sticky: 200;
  --z-dropdown: 400;
  --z-modal: 500;
  --font-mono: var(--font-ios, monospace);
  --orange: #f97316;
}


/* ─── App Styles ──────────────────────────────────────────────── */

*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;background:var(--bg-deep,var(--bg-deep));color:var(--text,var(--accent-text));}
#hv-wrap{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1280px;margin:0 auto;padding:14px 16px 28px;gap:12px;overflow:hidden;}
#hv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#hv-title{font-size:18px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;}
#hv-title .dot{width:9px;height:9px;border-radius:50%;background:var(--accent,var(--accent));box-shadow:0 0 8px var(--accent,var(--accent));display:none;}
#hv-title .dot.live{display:inline-block;animation:hv-pulse 2s ease-in-out infinite;}
@keyframes hv-pulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
#hv-spacer{flex:1;}
#hv-tenant{display:flex;align-items:center;gap:8px;}
#hv-tenant label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,var(--muted));}
#hv-tenant select{background:var(--glass-bg-light);border:1px solid var(--glass-border);color:var(--text,var(--accent-text));padding:8px 12px;border-radius:10px;font-size:14px;font-family:inherit;outline:none;min-width:160px;}
.hv-tabs-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hv-tabs-scroll::-webkit-scrollbar{display:none;}
#hv-tabs{min-width:max-content;}
#hv-tabs .glass-tab{white-space:nowrap;flex:0 0 auto;padding:9px 14px;gap:6px;}
#hv-main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px;}
.hv-panel{display:none;}
.hv-panel.active{display:block;animation:hv-fade .18s ease;}
@keyframes hv-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.hv-grid{display:grid;gap:12px;}
.hv-kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.hv-two{grid-template-columns:1fr 1fr;}
@media(max-width:760px){.hv-two{grid-template-columns:1fr;}}
.hv-card{padding:16px;margin-bottom:12px;}
.hv-card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,var(--muted));margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.hv-kpi{padding:16px;text-align:center;}
.hv-kpi .v{font-size:24px;font-weight:800;color:var(--accent,var(--accent));line-height:1;}
.hv-kpi .l{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,var(--muted));margin-top:6px;font-weight:600;}
.hv-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:.5px solid var(--glass-border-light);font-size:13px;}
.hv-row:last-child{border-bottom:none;}
.hv-muted{color:var(--muted,var(--muted));}
.hv-empty{text-align:center;color:var(--muted,var(--muted));padding:26px;font-size:13px;}
.hv-loading{text-align:center;color:var(--muted,var(--muted));padding:30px;font-size:13px;}
.hv-btn{padding:9px 16px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg-light);color:var(--text,var(--accent-text));font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;-webkit-tap-highlight-color:transparent;}
.hv-btn:hover{border-color:var(--accent,var(--accent));color:var(--accent,var(--accent));}
.hv-btn.primary{background:var(--accent,var(--accent));color:var(--bg-deep,var(--bg-deep));border-color:var(--accent,var(--accent));}
.hv-btn.primary:hover{filter:brightness(1.08);color:var(--bg-deep,var(--bg-deep));}
.hv-btn.danger{border-color:var(--danger,var(--danger));color:var(--danger,var(--danger));}
.hv-btn.sm{padding:5px 10px;font-size:11px;border-radius:8px;}
.hv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.hv-form label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,var(--muted));margin:10px 0 4px;}
.hv-form input,.hv-form select,.hv-form textarea{width:100%;background:var(--glass-bg-light);border:1px solid var(--glass-border);color:var(--text,var(--accent-text));padding:11px 13px;border-radius:10px;font-size:16px;font-family:inherit;outline:none;}
.hv-form textarea{min-height:90px;resize:vertical;}
.hv-form input:focus,.hv-form select:focus,.hv-form textarea:focus{border-color:var(--accent,var(--accent));}
.hv-tbl{width:100%;}
.hv-tbl th,.hv-tbl td{text-align:left;}
.hv-pending{font-size:11px;color:var(--warning,var(--warning));}
.hv-pill-row{display:flex;gap:6px;flex-wrap:wrap;}
.hv-attendant{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0;}
.hv-node{background:var(--glass-bg-light);border:1px solid var(--glass-border);border-radius:12px;padding:11px 16px;min-width:210px;text-align:center;cursor:pointer;transition:.15s;}
.hv-node:hover{border-color:var(--accent,var(--accent));}
.hv-node .nt{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,var(--muted));margin-bottom:3px;}
.hv-node .nl{font-size:13px;font-weight:600;}
.hv-conn{width:2px;height:18px;background:var(--glass-border);margin:0 auto;}
.hv-branches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.hv-aimode{display:flex;align-items:center;gap:14px;padding:18px;}
.hv-aimode .glyph{font-size:34px;}
.hv-aimode .name{font-size:16px;font-weight:800;}
.hv-bh{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px;align-items:center;font-size:13px;}
.hv-bh .d{font-weight:600;}
.hv-bh input[type=time]{background:var(--glass-bg-light);border:1px solid var(--glass-border);color:var(--text,var(--accent-text));padding:6px 8px;border-radius:8px;font-size:13px;font-family:inherit;}
#hv-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--glass-bg-heavy);border:1px solid var(--accent,var(--accent));color:var(--accent,var(--accent));padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:600;display:none;box-shadow:var(--glass-shadow-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
/* ── SMS Station ── */
.sms-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.sms-subtab{padding:7px 13px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg-light);color:var(--muted,var(--muted));font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;-webkit-tap-highlight-color:transparent;}
.sms-subtab.active{background:var(--accent,var(--accent));color:var(--bg-deep,var(--bg-deep));border-color:var(--accent,var(--accent));}
.sms-sub{display:none;}
.sms-sub.active{display:block;animation:hv-fade .18s ease;}
.sms-compose-grid{display:grid;grid-template-columns:300px 1fr 320px;gap:12px;align-items:start;}
@media(max-width:1080px){.sms-compose-grid{grid-template-columns:1fr;}}
.sms-col{display:flex;flex-direction:column;gap:12px;min-width:0;}
.sms-seg{display:flex;gap:6px;background:var(--glass-bg-light);border:1px solid var(--glass-border);border-radius:10px;padding:4px;margin-bottom:10px;}
.sms-seg button{flex:1;padding:7px;border:none;border-radius:7px;background:transparent;color:var(--muted,var(--muted));font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
.sms-seg button.active{background:var(--accent,var(--accent));color:var(--bg-deep,var(--bg-deep));}
.sms-cat{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--glass-border-light);border-radius:9px;margin-bottom:6px;cursor:pointer;font-size:13px;transition:.12s;}
.sms-cat:hover{border-color:var(--accent,var(--accent));}
.sms-cat.on{border-color:var(--accent,var(--accent));background:color-mix(in srgb, var(--accent) 8%, transparent);}
.sms-cat .c{margin-left:auto;font-size:11px;color:var(--muted,var(--muted));font-weight:600;}
.sms-phone{margin:0 auto;width:230px;max-width:100%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-border);border-radius:26px;padding:16px 14px;min-height:150px;box-shadow:var(--glass-shadow-lg);}
.sms-bubble{background:var(--accent,var(--accent));color:var(--bg-deep,var(--bg-deep));padding:9px 13px;border-radius:16px 16px 4px 16px;font-size:13px;line-height:1.35;white-space:pre-wrap;word-break:break-word;margin-left:auto;max-width:90%;}
.sms-aibtns{display:flex;flex-wrap:wrap;gap:6px;}
.sms-meter{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted,var(--muted));}
.sms-funnel{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;}
.sms-funnel .f{display:flex;justify-content:space-between;padding:6px 9px;background:var(--glass-bg-light);border-radius:8px;}
.sms-funnel .f.elig{grid-column:1/-1;background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent,var(--accent));font-weight:700;}
.sms-funnel .f .n{font-weight:700;}
.sms-gate{padding:10px 12px;border-radius:10px;font-size:12px;margin-top:8px;}
.sms-gate.ok{background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid var(--accent,var(--accent));color:var(--accent,var(--accent));}
.sms-gate.bad{background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid var(--danger,var(--danger));color:var(--danger,var(--danger));}
.sms-var{padding:10px 12px;border:1px solid var(--glass-border-light);border-radius:9px;margin-bottom:8px;cursor:pointer;font-size:13px;transition:.12s;}
.sms-var:hover{border-color:var(--accent,var(--accent));}
.sms-thread{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;padding:4px;}
.sms-msg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.35;white-space:pre-wrap;}
.sms-msg.in{align-self:flex-start;background:var(--glass-bg-light);border:1px solid var(--glass-border-light);}
.sms-msg.out{align-self:flex-end;background:var(--accent,var(--accent));color:var(--bg-deep,var(--bg-deep));}
.sms-stickybar{position:sticky;bottom:0;display:flex;gap:8px;padding-top:8px;}
.sms-inbox-grid{display:grid;grid-template-columns:300px 1fr;gap:12px;align-items:start;}
@media(max-width:860px){.sms-inbox-grid{grid-template-columns:1fr;}}
.sms-thr{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--glass-border-light);border-radius:9px;margin-bottom:6px;cursor:pointer;transition:.12s;}
.sms-thr:hover{border-color:var(--accent,var(--accent));}
.sms-thr .dir{font-size:11px;font-weight:700;}
.sms-thr .dir.in{color:var(--accent,var(--accent));}
.sms-thr .dir.out{color:var(--muted,var(--muted));}
@media(max-width:1080px){.sms-stickybar{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg-deep,var(--bg-deep)) 30%);padding:10px 0 4px;}}
/* ── Extension editor ── */
.hv-ext{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--glass-border-light);border-radius:10px;margin-bottom:7px;background:var(--glass-bg-light);transition:.12s;}
.hv-ext.dragging{opacity:.4;}
.hv-ext.dragover{border-color:var(--accent,var(--accent));box-shadow:0 0 0 1px var(--accent,var(--accent));}
.hv-ext .grip{cursor:grab;color:var(--muted,var(--muted));font-size:15px;touch-action:none;}
.hv-ext .ext-num{font-weight:800;color:var(--accent,var(--accent));min-width:42px;}
.hv-ext .ext-meta{flex:1;min-width:0;}
.hv-ext .ext-meta .nm{font-weight:600;font-size:13px;}
.hv-ext .ext-meta .sub{font-size:11px;color:var(--muted,var(--muted));}
.hv-node[draggable=true]{cursor:grab;}
.hv-node.dragover{border-color:var(--accent,var(--accent));box-shadow:0 0 0 1px var(--accent,var(--accent));}