/* ================================================================
   Call Center — Apple-inspired UI
   ================================================================ */

:root {
  /* --- Apple-ish palette --- */
  --bg:            #fbfbfd;
  --bg-2:          #f5f5f7;
  --surface:       #ffffff;
  --ink:           #1d1d1f;
  --ink-2:         #424245;
  --ink-3:         #6e6e73;
  --ink-4:         #86868b;
  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);

  /* --- Accents --- */
  --blue:          #0071e3;
  --blue-h:        #0077ed;
  --blue-d:        #0063c7;
  /* Aliases used across the app (previously only worked via hardcoded fallbacks,
     which were a slightly different blue/grey → off-brand). Define them on-brand
     so every `var(--primary)` / `var(--muted)` matches the palette. */
  --primary:       #0071e3;
  --muted:         #6e6e73;
  /* Aliases that were previously only reachable via hardcoded var() fallbacks
     (so they were technically "undefined"). Defined here to their existing,
     uniform fallback value → no visual change, just removes the latent gap that
     caused bugs like the --accent one. Vars with conflicting fallbacks across the
     file are intentionally left out to avoid shifting any element's colour. */
  --card:          #ffffff;
  --bg-1:          #ffffff;
  --bg-3:          #eceef1;
  --danger:        #dc2626;
  --hover:         #f0f4ff;
  --line:          #e5e7eb;

  /* --- Canonical agent-status palette (single source of truth) ---
     RTM chips/avatars (RTM_STATUS_CONFIG in app.js) and the donut use the same
     hexes; the summary cards reference these vars so colour == status everywhere. */
  --status-ready:    #22c55e; --status-ready-d:    #15803d;
  --status-oncall:   #6366f1; --status-oncall-d:   #4338ca;
  --status-break:    #f59e0b; --status-break-d:    #b45309;
  --status-wrap:     #8b5cf6; --status-wrap-d:     #6d28d9;
  --status-dialing:  #3b82f6; --status-dialing-d:  #1d4ed8;
  --status-offline:  #94a3b8; --status-offline-d:  #475569;
  --green:         #30d158;
  --orange:        #ff9f0a;
  --red:           #ff3b30;
  --purple:        #5e5ce6;

  /* --- Shadows: soft and diffuse, Apple-style --- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04);
  --shadow:     0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);

  /* --- Radius --- */
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* --- Type --- */
  --f-ui:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Transitions — match Apple's snappy-but-smooth feel */
  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-med:  220ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
*:focus { outline: none; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--f-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: 28px; letter-spacing: -0.025em; }
h3 { font-size: 20px; }
.h-sub { font-size: 22px; font-weight: 600; color: var(--ink); }

p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-2);
}

.hidden { display: none !important; }
.muted  { color: var(--ink-3); font-size: 15px; }
.err    {
  color: var(--red); font-size: 14px; min-height: 1em;
  margin-top: 4px;
}

/* ================================================================
   Buttons
   ================================================================ */
.btn {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 980px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--blue);
  color: white;
}
.btn-primary:hover:not(:disabled)  { background: var(--blue-h); }
.btn-primary:active:not(:disabled) { background: var(--blue-d); transform: scale(0.98); }

.btn-secondary {
  background: var(--bg-2);
  color: var(--ink);
}
.btn-secondary:hover:not(:disabled) { background: #ececee; }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  padding: 8px 14px;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-2); }

.btn-danger {
  background: var(--red);
  color: white;
}
.btn-danger:hover:not(:disabled) { background: #e03128; }

.btn-link {
  background: transparent;
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 15px;
}
.btn-link:hover:not(:disabled) { background: rgba(0,113,227,0.08); text-decoration: none; }

.btn-block { width: 100%; padding: 14px 22px; font-size: 17px; }

.btn-icon {
  background: transparent;
  color: var(--ink-3);
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.btn-icon:hover { background: var(--bg-2); color: var(--ink); }

/* Small pill buttons used inside tables */
.btn-sm {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border: none;
  border-radius: 980px;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--ink);
  margin-right: 6px;
  transition: background var(--t-fast);
}
.btn-sm:hover { background: #ececee; }
.btn-sm.primary { background: var(--blue); color: #fff; }
.btn-sm.primary:hover { background: var(--blue-h); }
.btn-sm.danger  { background: #fee; color: var(--red); }
.btn-sm.danger:hover { background: #fdd; }
.btn-sm.ok      { background: #dcfce7; color: #0a7b3d; }
.btn-sm.ok:hover{ background: #bbf7d0; }
.btn-sm.info    { background: #e3f0ff; color: #0063c7; }
.btn-sm.info:hover { background: #cfe3fb; }

/* ================================================================
   LOGIN VIEW
   ================================================================ */
.view-login, .login-view {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(1200px 600px at 50% -100px, #eef3ff 0%, transparent 60%),
    radial-gradient(800px 400px at 50% 110%, #fff4e8 0%, transparent 60%),
    var(--bg);
}
.login-hero {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-title {
  text-align: center;
  margin-top: 20px;
  background: linear-gradient(180deg, #1d1d1f 0%, #3c3c43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  text-align: center;
  color: var(--ink-3);
  font-size: 19px;
  margin-bottom: 28px;
  max-width: 420px;
}
.login-brand {
  display: flex;
  flex-flow: row wrap;          /* logo + name share the first line */
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  margin-bottom: 4px;
  text-align: center;
}
/* tagline + subtitle drop to their own full-width lines below the lockup */
.login-brand > p { flex-basis: 100%; margin: 0; }
.login-brand h1 { margin: 0; }
.login-logo {
  font-size: 48px;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: center;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
/* Account-type selector (Business / User) */
.login-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
}
.login-seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast, .15s);
  color: var(--ink-3, #64748b);
}
.login-seg-btn:hover { background: var(--surface, #fff); }
.login-seg-btn .seg-title { font-size: 14px; font-weight: 700; line-height: 1.1; }
.login-seg-btn .seg-desc  { font-size: 11px; opacity: .8; }
.login-seg-btn.active {
  background: var(--surface, #fff);
  border-color: var(--primary, #0070f3);
  color: var(--primary, #0070f3);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Duplicate-session takeover dialog (agent login from this page) — matches the
   agent portal's styled modal. */
.dup-session-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.dup-session-box {
  background: #fff; border-radius: 16px; padding: 32px 28px;
  max-width: 380px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dup-session-icon { font-size: 40px; margin-bottom: 10px; }
.dup-session-title { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.dup-session-msg { font-size: 13px; color: #64748b; line-height: 1.6; margin-bottom: 22px; }
.dup-session-btns { display: flex; flex-direction: column; gap: 8px; }
.dup-session-btns .btn { padding: 10px; font-size: 14px; border-radius: 8px; cursor: pointer; border: none; }
.dup-session-btns .btn-primary { background: #6366f1; color: #fff; }
.dup-session-btns .btn-primary:hover { background: #4f46e5; }
.dup-session-btns .btn-secondary { background: #f1f5f9; color: #475569; }
.dup-session-btns .btn-secondary:hover { background: #e2e8f0; }
.login-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 4px;
}
.login-footer {
  color: var(--ink-4);
  font-size: 13px;
  margin-top: 40px;
}

/* ================================================================
   Fields
   ================================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0;
}
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  font-family: var(--f-ui);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.15);
}
input[type="file"] { padding: 10px 12px; cursor: pointer; }

/* ================================================================
   TEXT-LIKE INPUTS THE BASE RULE MISSED
   The rule above is an ALLOWLIST of type values, so anything outside it fell
   through to browser defaults — a plain grey box with none of the app's border,
   radius or focus ring. That covered 102 real inputs: 70 written without any
   `type` attribute at all (`<input class="inp" placeholder="Search…">`, which
   `input[type="text"]` cannot match), plus every date, time, tel, url and search
   field in the product.
   Deliberately NOT included: checkbox, radio, range and colour — those are not
   text boxes and giving them padding/width would break them.
   ================================================================ */
input:not([type]),
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
.inp {
  font-family: var(--f-ui);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:not([type]):focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
.inp:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.15);
  outline: none;
}
/* Full width only inside a form field, where that is the intent. Toolbar and
   inline search boxes keep their own width instead of stretching. */
.field input:not([type]),
.field input[type="search"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"] { width: 100%; }


textarea { resize: vertical; min-height: 80px; font-family: var(--f-mono); font-size: 14px; }

/* ================================================================
   NAVBAR / TOPBAR (sticky, Apple-style, with backdrop-blur)
   ================================================================ */
.navbar, .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 251, 253, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
/* .topbar is a direct flex container (no inner wrapper needed) */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 52px;
  gap: 16px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
/* Alias: .brand is used by HTML in place of .nav-brand */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav-logo {
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
}
.nav-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
}
.admin-role   { background: #ffe8d4; color: #c2410c; }
.company-role { background: #dbf3e6; color: #0a7b3d; }
/* Aliases: HTML uses .role-tag instead of .nav-role */
.role-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 6px;
}
.role-tag.admin   { background: #ffe8d4; color: #c2410c; }
.role-tag.company { background: #dbf3e6; color: #0a7b3d; }

.nav-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: flex-start;
  padding: 5px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: 52px;
  z-index: 28;
  /* thin scrollbar for overflow */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.nav-tabs::-webkit-scrollbar { height: 3px; }
.nav-tabs::-webkit-scrollbar-track { background: transparent; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.nav-tab {
  background: none;
  border: none;
  padding: 6px 9px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 7px;
  transition: background var(--t-fast), color var(--t-fast);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-tab:hover { background: var(--bg-2); color: var(--ink); }
.nav-tab.active {
  color: var(--ink);
  font-weight: 500;
  background: var(--bg-2);
}
/* Icons hidden in top-nav mode — shown only in sidebar */
.ni { font-size: 13px; line-height: 1; flex-shrink: 0; display: none; }
.nl { /* inherits nav-tab font */ }
body.layout-sidebar .ni { display: inline; }

/* Collapse toggle button — only visible in sidebar mode */
.nav-collapse-btn {
  display: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  width: 100%;
  text-align: right;
  margin-bottom: 4px;
  transition: color var(--t-fast), background var(--t-fast);
  font-family: var(--f-ui);
}
.nav-collapse-btn:hover { color: var(--ink); background: var(--bg-2); }

.nav-separator {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
  padding: 3px 8px 2px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  border-left: 2px solid var(--accent, #6366f1);
  opacity: .85;
}
.nav-separator .ni { font-size: 13px; }

/* Collapsible nav group headers (Voice Broadcast / Call Center) */
.nav-group-hdr {
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.nav-group-hdr:hover { opacity: 1; }
.nav-group-hdr .grp-caret {
  margin-left: auto;
  font-size: 9px;
  opacity: .7;
  transition: transform var(--t-fast);
}
.nav-group-hdr.collapsed .grp-caret { transform: rotate(-90deg); }
.nav-tab.grp-hidden { display: none !important; }

/* Hub sub-tab bar (inside a hub page) */
.subtab-bar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.subtab-bar.hidden { display: none; }
.subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.subtab:hover { background: var(--bg-2); color: var(--ink); }
.subtab.active {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}
.subtab .st-i { font-size: 14px; line-height: 1; }

/* Service overview cards on home page */
.svc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color var(--t-fast);
}
.svc-card:hover { border-color: var(--accent, #6366f1); }
.svc-icon { font-size: 30px; flex-shrink: 0; }
.svc-body { flex: 1; min-width: 0; }
.svc-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.svc-stats { font-size: 13px; color: var(--ink-2); }

.stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-lbl {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-user { color: var(--ink-3); font-size: 13px; }

/* Impersonation banner */
.impersonate-banner, .impersonation-banner {
  background: #fff4d6;
  color: #8a5a00;
  padding: 10px 24px;
  font-size: 14px;
  border-bottom: 1px solid #ffe6a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ================================================================
   NAV LAYOUT TOGGLE
   ================================================================ */
.nav-layout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.4;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  font-family: var(--f-ui);
}
.nav-layout-btn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--border-strong); }

/* view-content wraps nav-tabs + main; becomes flex-row in sidebar mode */
.view-content { display: block; }

body.layout-sidebar .view-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
body.layout-sidebar .nav-tabs {
  flex: none;
  flex-direction: column;
  width: 175px;
  position: sticky;
  top: 52px;
  height: calc(100dvh - 52px);
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: none;
  border-right: 1px solid var(--border);
  justify-content: flex-start;
  padding: 8px 6px;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body.layout-sidebar .nav-collapse-btn { display: block; }
body.layout-sidebar .nav-tab {
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
body.layout-sidebar .nav-tab .nl {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
body.layout-sidebar .nav-tab .ni {
  font-size: 14px;
}
body.layout-sidebar .nav-separator {
  border-left: none;
  border-top: 2px solid var(--accent, #6366f1);
  padding: 8px 6px 3px;
  margin: 5px 2px 0;
  display: flex;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
body.layout-sidebar .nav-separator .nl {
  overflow: hidden;
  text-overflow: ellipsis;
}
body.layout-sidebar .main {
  flex: 1;
  min-width: 0;
}

/* Collapsed sidebar: icon-only mode */
body.layout-sidebar.sidebar-collapsed .nav-tabs {
  width: 80px;
  padding: 8px 0;
  gap: 2px;
  overflow-x: hidden;   /* kill horizontal scrollbar "bar" */
  align-items: center;
}
body.layout-sidebar.sidebar-collapsed .nav-collapse-btn {
  text-align: center;
  padding: 6px 4px;
  font-size: 14px;
  border-bottom: none;   /* remove the "bar" line */
  width: 36px;
  border-radius: 6px;
}
body.layout-sidebar.sidebar-collapsed .nav-tab {
  justify-content: center;
  align-items: center;
  padding: 6px 2px;
  width: 100%;
  height: auto;
  min-height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Emoji icons were removed — in the collapsed rail just show the full label,
   smaller and not bold (no short codes). */
body.layout-sidebar.sidebar-collapsed .nav-tab .nl {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
body.layout-sidebar.sidebar-collapsed .nav-tab .ni { display: none; }
body.layout-sidebar.sidebar-collapsed .nav-separator {
  width: 100%;
  height: auto;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 7px 2px 3px;
  margin: 6px 0 2px;
  display: block;
  overflow: hidden;
  text-align: center;
}
/* Keep the group wordings (Platform / Call Center / Voice Broadcast) in the
   collapsed rail — small, uppercase, muted; hide the icon + collapse caret. */
body.layout-sidebar.sidebar-collapsed .nav-separator .ni,
body.layout-sidebar.sidebar-collapsed .nav-separator .grp-caret { display: none; }
body.layout-sidebar.sidebar-collapsed .nav-separator .nl {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

/* ================================================================
   MAIN
   ================================================================ */
.main {
  width: 100%;
  padding: 24px 28px 60px;
}
.tab-panel { animation: fadein var(--t-med); }
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-head, .panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.section-head h2, .panel-head h2 { margin-bottom: 4px; }
.section-head .muted, .panel-head .muted { font-size: 15px; }

/* ================================================================
   STAT CARDS (Apple-style soft cards)
   ================================================================ */
.stat-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.stat-grid .stat-card {
  flex: 1 1 0;
  min-width: 130px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.stat-card .label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.stat-card .value {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.1;
}
.stat-card .sub {
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 4px;
}

/* ================================================================
   TABLES
   ================================================================ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.tbl th, .tbl td {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.tbl th {
  background: transparent;
  color: var(--ink-3);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td strong { font-weight: 600; color: var(--ink); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: rgba(0,0,0,0.03); }
/* Header stays visible while a long list scrolls; opaque so rows pass under it. */
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
/* Align digits in columns (counts, durations, money) so they read as columns. */
.tbl td { font-variant-numeric: tabular-nums; }
.tbl td.actions {
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
  padding-top: 0;
  padding-bottom: 0;
}
.tbl td.actions .btn-sm {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 0;
  margin-left: 4px;
}
.tbl td.actions .btn-sm:first-child { margin-left: 0; }
.tbl td.empty, .tbl td.muted {
  color: var(--ink-3);
  text-align: center;
  padding: 48px 18px;
  font-size: 15px;
}

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.badge.active    { background: #dcfce7; color: #0a7b3d; }
.badge.inactive  { background: #f1f5f9; color: var(--ink-3); }
.badge.suspended { background: #fee;    color: var(--red); }

.badge.pending   { background: #fff3d4; color: #8a5a00; }
.badge.running   { background: #e3f0ff; color: #0063c7; }
.badge.paused    { background: #fde4b4; color: #7a4a00; }
.badge.stopped   { background: #ececee; color: var(--ink-2); }
.badge.completed { background: #dcfce7; color: #0a7b3d; }
.badge.failed    { background: #fee;    color: var(--red); }
.badge.cancelled { background: #f1f5f9; color: var(--ink-3); }

/* per-call statuses */
.badge.initiated { background: #ecebff; color: #3730a3; }
.badge.ringing   { background: #e3f0ff; color: #0063c7; }
.badge.answered  { background: #c8f3d4; color: #0a7b3d; }

/* ringResult outcome badges (VB report) */
.badge.no_answer      { background: #fff3d4; color: #8a5a00; }
.badge.unreachable    { background: #ffe0e0; color: #a11; }
.badge.busy           { background: #fde4b4; color: #7a4a00; }
.badge.machine        { background: #e9d5ff; color: #6b21a8; }
.badge.invalid_number { background: #f1f5f9; color: var(--ink-3); }
.badge.congestion     { background: #f1f5f9; color: var(--ink-3); }
.badge.rejected       { background: #fee;    color: var(--red); }

.chip {
  display: inline-block;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 3px 10px;
  border-radius: 980px;
  font-size: 12px;
  margin: 1px 2px 1px 0;
  font-weight: 500;
}

/* ================================================================
   MODALS
   ================================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
  animation: fadein var(--t-fast);
}
.modal, .modal-card {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pop var(--t-med);
}
.modal-lg { max-width: 960px; }
.modal-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-x:hover { background: var(--bg-2); color: var(--ink); }
@keyframes pop {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 17px; font-weight: 600; }
.modal-body {
  padding: 24px;
  overflow-y: auto;
}
.modal-body.scrollable { max-height: 72vh; }
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ================================================================
   Form stack (used inside modals)
   ================================================================ */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack .field { gap: 6px; }

.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.radio-group label {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-size: 15px;
  color: var(--ink-2);
}
.radio-group label:hover { background: var(--bg-2); }
.radio-group label.selected {
  border-color: var(--blue);
  background: rgba(0,113,227,0.06);
  color: var(--ink);
}
.radio-group input[type="radio"] { accent-color: var(--blue); margin: 0; width: auto; }

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: auto;
  accent-color: var(--blue);
  margin: 0;
}

/* ================================================================
   Nested permission groups (admin company form)
   ================================================================ */
.perm-group {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  background: var(--surface);
  overflow: hidden;
}
.perm-group .perm-group-header {
  padding: 8px 12px;
  margin: 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.perm-group .perm-group-header:last-child { border-bottom: none; }
.perm-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 12px 10px 36px;
  background: var(--bg-2);
}
.perm-sub.hidden { display: none; }
.perm-sub-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 3px 0;
  white-space: nowrap;
}
.perm-sub-check input[type="checkbox"] {
  width: auto;
  accent-color: var(--blue);
  margin: 0;
}

/* ================================================================
   Audio player sizing
   ================================================================ */
audio {
  max-width: 240px;
  height: 32px;
  vertical-align: middle;
}

/* ================================================================
   TOAST
   ================================================================ */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(29,29,31,0.92);
  color: white;
  padding: 12px 22px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: toastin var(--t-med);
  max-width: min(600px, calc(100vw - 40px));
  text-align: center;
}
.toast.err { background: rgba(255,59,48,0.95); }
@keyframes toastin {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  body { font-size: 16px; }

  .nav-inner, .topbar { padding: 0 16px; gap: 12px; }
  .nav-tabs { padding: 4px 8px; }
  .nav-tab  { font-size: 12px; padding: 5px 8px; }
  .nav-user { display: none; }

  /* Force the horizontal top-nav on mobile even if the user picked sidebar mode —
     a 175px vertical rail pinned beside the content is unusable on a phone/tablet.
     Targets both #view-admin and #view-company (shared shell); !important so it
     wins over the theme files regardless of load order. */
  body.layout-sidebar .view-content { display: block !important; }
  body.layout-sidebar .nav-tabs {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px 10px !important;
  }
  body.layout-sidebar .nav-tab { width: auto !important; justify-content: center; }
  body.layout-sidebar .nav-tab .nl { display: inline !important; }
  body.layout-sidebar .main { flex: none !important; width: 100% !important; }
  body.layout-sidebar .nav-collapse-btn { display: none !important; }
  body.layout-sidebar.sidebar-collapsed .nav-tabs { width: auto !important; }
  body.layout-sidebar.sidebar-collapsed .nav-tab .nl { display: inline !important; }
  body.layout-sidebar.sidebar-collapsed .nav-tab .ni { display: none !important; }
  /* Nav group separators read as inline chips in a horizontal bar */
  body.layout-sidebar .nav-separator { width: auto !important; }

  .main { padding: 16px 12px 60px; }

  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .section-head .btn { align-self: flex-start; }

  .tbl th, .tbl td { padding: 12px 14px; font-size: 13px; }
  .tbl th { font-size: 11px; }

  .modal-backdrop { padding: 12px; }
  .modal, .modal-card { border-radius: 14px; }
  .modal-head, .modal-body { padding: 18px; }

  .radio-group { grid-template-columns: 1fr; }

  .stat-grid { gap: 10px; }
  .stat-grid .stat-card { min-width: 110px; }
  .stat-card .value { font-size: 32px; }

  .hero-title { font-size: 34px; }
  .hero-sub   { font-size: 17px; }
  .login-card { padding: 22px; }

  /* On mobile, tables become horizontally scrollable */
  .table-wrap { overflow-x: auto; }
  .tbl { min-width: 640px; }
}

@media (max-width: 520px) {
  .nav-role, .role-tag { display: none; }
  .nav-brand, .brand { font-size: 14px; }
}

/* ══ MOBILE HARDENING ═══════════════════════════════════════════════════════
   Forms/modals across the app are built with INLINE grid-template-columns in
   app.js, which beat stylesheet media queries. These attribute-selector rules
   with !important out-rank the inline styles so every multi-column form/modal
   grid collapses to one column on a phone. */
@media (max-width: 640px) {
  .modal [style*="grid-template-columns"],
  .modal-card [style*="grid-template-columns"],
  .modal-body [style*="grid-template-columns"],
  .stack [style*="grid-template-columns"],
  .radio-group[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Modal tables that aren't wrapped in .table-wrap must not force page scroll */
  .modal .tbl, .modal-card .tbl, .modal-body .tbl { min-width: 0 !important; }
  .modal .table-wrap, .modal-card .table-wrap { overflow-x: auto; }
}

@media (max-width: 900px) {
  /* Keep the topbar on ONE line (the nav bar sticks at top:52px and assumes a
     single-row topbar — wrapping pushed the avatar/Night button onto a 2nd line
     that overlapped the nav). Drop the sidebar toggle (disabled on mobile). */
  .topbar-right { flex-wrap: nowrap; gap: 8px; }
  .nav-layout-btn { display: none !important; }
}
@media (max-width: 600px) {
  /* Hide the informational widgets so Night + account fit on one line at 360px */
  .live-calls-widget, .credits-widget { display: none !important; }
  /* The workspace chip has an inline max-width:280px — cap it so the brand +
     chip + Night + avatar stay on one line on a ~360-400px phone. */
  .co-workspace { max-width: 38vw !important; min-width: 0; overflow: hidden; }
  .topbar { gap: 8px; padding: 0 12px !important; }
  .topbar-left { min-width: 0; overflow: hidden; }
}

@media (max-width: 560px) { .dash-qh { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .vbr-detail-meta { grid-template-columns: 1fr !important; } }

@media (prefers-color-scheme: dark) {
  /* light-mode only for now — Apple-accurate dark mode is a whole project */
}


/* ================================================================
   CAMPAIGNS TABLE — alignment + responsive fix
   ================================================================ */

/* actions layout handled above */

/* Campaigns table: give columns breathing room + prevent clipping */
#tbody-campaigns td,
#tbody-campaigns th {
  white-space: nowrap;
}
#tbody-campaigns td:first-child,
#tbody-campaigns td:nth-child(3) {
  white-space: normal;            /* name + content can wrap */
  max-width: 220px;
  word-break: break-word;
}
#tbody-campaigns td.actions {
  white-space: nowrap;
  min-width: 300px;
}

/* Horizontal scroll on all table wraps */
.table-wrap { overflow-x: auto; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.pagination .page-info {
  font-size: 13px;
  color: var(--ink-3);
}
.pagination .page-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pagination .page-num {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px;
  border: none;
  border-radius: 980px;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--ink);
  transition: background var(--t-fast);
}
.pagination .page-num:hover:not(:disabled) { background: #ececee; }
.pagination .page-num.active {
  background: var(--blue);
  color: #fff;
}
.pagination .page-num:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-ellipsis {
  color: var(--ink-4);
  padding: 0 4px;
  font-size: 13px;
}
.pagination .page-size-select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: auto;
}

@media (max-width: 600px) {
  .pagination { justify-content: center; }
  .pagination .page-info { width: 100%; text-align: center; }
}

@keyframes ar-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(48,209,88,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(48,209,88,0);    }
  100% { box-shadow: 0 0 0 0   rgba(48,209,88,0);    }
}

@media (max-width: 700px) {
  .camp-bar { flex-wrap: wrap; }
  .camp-bar input[type="search"] { flex: 1 1 100%; }
}

/* ================================================================
   NEW FIXES & ADDITIONS (Apple-styled Summary & Live Counts)
   ================================================================ */

/* actions layout handled above */

/* Apple-style live count tracker */
.live-count {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* Apple-style Summary Grid (Used in Report Modal) */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.summary-box {
  background: var(--bg-2);
  padding: 16px;
  border-radius: var(--r-md);
  text-align: center;
  border: 1px solid var(--border);
}
.summary-box.highlight {
  background: #e3f0ff;
  border-color: #cfe3fb;
}
.summary-box.highlight .val {
  color: var(--blue);
}
.summary-box .val {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.summary-box .lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ================================================================
   ANTI-SQUISH TABLE FIX
   ================================================================ */

/* 1. Force the Name column to stay readable */
#tbl-campaigns th:first-child,
#tbody-campaigns td:first-child {
  min-width: 160px !important;
}

/* 2. Force the Content column to stay readable */
#tbl-campaigns th:nth-child(3),
#tbody-campaigns td:nth-child(3) {
  min-width: 180px !important;
}

/* 3. Allow the table wrapper to scroll horizontally on ALL screen sizes */
.table-wrap {
  overflow-x: auto !important;
}

/* 4. Ensure the table itself is wide enough to hold all 9 columns */
#tbl-campaigns {
  min-width: 1200px !important;
}



/* ================================================================
   Permission chips for SuperAdmin company table
   ================================================================ */
.chip.on  { background: #dcfce7; color: #0a7b3d; border: 1px solid #b6f0c9; }
.chip.off { background: #fee;    color: #b91c1c; border: 1px solid #fecaca; }

.channels-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.channels-hint.warn {
  color: var(--red);
}

.var-map-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
}
.placeholder-label {
  font-family: var(--f-mono);
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}

.tts-editor textarea {
  font-family: var(--f-mono);
  min-height: 90px;
}
.tts-editor .speed-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tts-editor .speed-row input[type="range"] {
  flex: 1;
}
.placeholders-hint {
  background: #fff7e6;
  border: 1px solid #ffe1a8;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/* CSV preview block (used in lead upload + campaign wizard) */
.csv-preview {
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 10px;
}
.csv-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.csv-preview table th,
.csv-preview table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.csv-preview table th {
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-2);
  font-size: 12px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.chip-list .chip.phone {
  background: #d1f2dc;
  color: #176028;
  border: 1px solid #9fd7ae;
}
/* ================================================================
   PROFILE PAGE
   ================================================================ */
#profile-info-wrap > div {
  max-width: 900px;
}
@media (max-width: 700px) {
  #profile-info-wrap > div {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   IVR Builder — flowchart styles (rewritten for new node types)
   ================================================================ */
:root {
  --ivr-bg:          #f5f6fa;
  --ivr-card:        #ffffff;
  --ivr-border:      #e1e4ec;
  --ivr-line:        #cbd0dc;
  --ivr-text:        #1a1d29;
  --ivr-text-muted:  #6b7280;
  --ivr-accent:      #4f46e5;
  --ivr-accent-soft: #eef2ff;
  --ivr-danger:      #ef4444;
  --ivr-radius:      14px;

  /* per-type accents */
  --t-play:      #3b82f6;
  --t-wait:      #94a3b8;
  --t-menu:      #f59e0b;
  --t-webhook:   #8b5cf6;
  --t-api:       #ec4899;
  --t-condition: #10b981;
  --t-set_var:   #14b8a6;
  --t-transfer:  #06b6d4;
  --t-goto:      #6366f1;
  --t-hangup:    #ef4444;
}

.ivr-flow-host {
  background: var(--ivr-bg);
  border-radius: var(--ivr-radius);
  padding: 0 0 28px;
  overflow: auto;
}

.ivr-flow-host.is-view-only .ivr-add-btn,
.ivr-flow-host.is-view-only .ivr-iconbtn:not(#edit-close),
.ivr-flow-host.is-view-only .ivr-branch-close,
.ivr-flow-host.is-view-only .ivr-btn-link {
  display: none !important;
}

.ivr-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;
  gap: 0;
}

.ivr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.ivr-pill.start { background: #10b981; }
.ivr-pill.end   { background: #6b7280; }

.ivr-line {
  width: 2px;
  height: 22px;
  background: var(--ivr-line);
  border-radius: 2px;
}

.ivr-branch-col.ivr-add-col {
  justify-content: flex-start;
  align-items: center;
  padding-top: 4px;
  min-width: 0;
}
.ivr-add-col-btn {
  border: 1px dashed var(--ivr-border);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--ivr-card);
}
.ivr-add-col-btn:hover { border-color: var(--ivr-accent); text-decoration: none; }
.ivr-add-btn { opacity: .55; }
.ivr-add-btn:hover { opacity: 1; }
.ivr-add-btn.ivr-add-after {
  width: auto;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 10.5px;
  white-space: nowrap;
}
.ivr-add-after-lbl {
  font-weight: 400;
  color: var(--ivr-text-muted);
  margin-left: 2px;
}
.ivr-add-btn.ivr-add-first {
  width: auto;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ivr-add-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px dashed var(--ivr-line);
  background: var(--ivr-card);
  color: var(--ivr-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ivr-add-btn:hover {
  border-color: var(--ivr-accent);
  color: var(--ivr-accent);
  background: var(--ivr-accent-soft);
  transform: scale(1.1);
}

/* ---- node card ---- */
.ivr-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ivr-node-card {
  width: 280px;
  background: var(--ivr-card);
  border: 1.5px solid var(--ivr-border);
  border-radius: var(--ivr-radius);
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ivr-node-card:hover {
  border-color: var(--ivr-accent);
  box-shadow: 0 4px 14px rgba(79,70,229,0.12);
}
.ivr-node-card.is-editing {
  border-color: var(--ivr-accent);
  box-shadow: 0 0 0 3px var(--ivr-accent-soft);
}

.ivr-node-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ivr-node-title {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--ivr-text);
}
.ivr-node-actions {
  display: flex;
  gap: 3px;
}
.ivr-iconbtn {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--ivr-border);
  background: #fff;
  color: var(--ivr-text-muted);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ivr-iconbtn:hover { background: var(--ivr-accent-soft); color: var(--ivr-accent); border-color: var(--ivr-accent); }
.ivr-iconbtn.danger:hover { background: #fef2f2; color: var(--ivr-danger); border-color: var(--ivr-danger); }

.ivr-type-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.ivr-type-icon.capture   { background: #0891b2; }
.ivr-type-icon.play      { background: var(--t-play); }
.ivr-type-icon.wait      { background: var(--t-wait); }
.ivr-type-icon.menu      { background: var(--t-menu); }
.ivr-type-icon.webhook   { background: var(--t-webhook); }
.ivr-type-icon.api       { background: var(--t-api); }
.ivr-type-icon.condition { background: var(--t-condition); }
.ivr-type-icon.set_var   { background: var(--t-set_var); }
.ivr-type-icon.transfer  { background: var(--t-transfer); }
.ivr-type-icon.goto      { background: var(--t-goto); }
.ivr-type-icon.hangup    { background: var(--t-hangup); }

.ivr-node-summary {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ivr-text-muted);
  word-break: break-word;
  line-height: 1.4;
}
.ivr-node-summary code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.ivr-help { color: var(--ivr-text-muted); font-style: italic; font-size: 11px; }
.muted { color: var(--ivr-text-muted); }

/* ---- branches / fan-out ---- */
.ivr-fanout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ivr-fanout-svg {
  display: block;
  margin: 0 auto;
}
.ivr-branches {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.ivr-branch-col {
  min-width: 280px;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Visual containment: each branch is its own soft lane, so nested branches
     (a transfer inside a webhook inside a menu) stop reading as one long
     vertical pile of nodes and + buttons. */
  border-left: 2px solid color-mix(in srgb, var(--ivr-border) 70%, transparent);
  border-radius: 8px 0 0 8px;
  padding-left: 10px;
}
.ivr-branch-label-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ivr-branch-label {
  padding: 4px 12px;
  background: var(--ivr-accent-soft);
  color: var(--ivr-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ivr-branch-label.dim {
  background: #f1f5f9;
  color: var(--ivr-text-muted);
}
.ivr-branch-close {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ivr-border);
  background: #fff;
  color: var(--ivr-text-muted);
  font-size: 11px;
  cursor: pointer;
}
.ivr-branch-close:hover { color: var(--ivr-danger); border-color: var(--ivr-danger); }
.ivr-add-branch-row {
  margin-top: 10px;
}
.ivr-btn-link {
  background: none;
  border: none;
  color: var(--ivr-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.ivr-btn-link:hover { text-decoration: underline; }

/* ---- node picker popover ---- */
.ivr-picker-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9999;
}
.ivr-picker {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--ivr-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15,23,42,0.18);
  padding: 6px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ivr-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ivr-text);
}
.ivr-picker-item:hover { background: var(--ivr-accent-soft); }
.ivr-picker-item .dot {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

/* ---- edit panel ---- */
.ivr-edit-panel {
  margin-top: 18px;
  padding: 18px;
  background: var(--ivr-card);
  border: 1px solid var(--ivr-border);
  border-radius: var(--ivr-radius);
}
.ivr-edit-panel h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
}
.ivr-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.ivr-edit-grid > .full { grid-column: 1 / -1; }
.ivr-edit-grid label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ivr-text-muted);
  margin-bottom: 4px;
}
.ivr-edit-grid input,
.ivr-edit-grid select,
.ivr-edit-grid textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ivr-border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}
.ivr-edit-grid textarea {
  font-family: monospace;
  min-height: 80px;
  resize: vertical;
}
.ivr-edit-grid input:focus,
.ivr-edit-grid select:focus,
.ivr-edit-grid textarea:focus {
  outline: none;
  border-color: var(--ivr-accent);
  box-shadow: 0 0 0 3px var(--ivr-accent-soft);
}

.ivr-kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.ivr-kv-row input {
  padding: 7px 9px;
  border: 1px solid var(--ivr-border);
  border-radius: 7px;
  font-size: 13px;
}

/* transfer destinations */
.ivr-dest-card {
  border: 1px solid var(--ivr-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fafbff;
}
.ivr-dest-head {
  display: grid;
  grid-template-columns: 2fr 1fr 28px;
  gap: 8px;
  align-items: center;
}
.ivr-dest-head .ivr-dest-kind select,
.ivr-dest-head input {
  padding: 7px 9px;
  border: 1px solid var(--ivr-border);
  border-radius: 7px;
  font-size: 13px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* ---- zoom toolbar ---- */
.ivr-zoom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ivr-bg);
  border-bottom: 1px solid var(--ivr-border);
  position: sticky;
  left: 0;
  z-index: 5;
}
.ivr-zoom-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--ivr-border);
  background: var(--ivr-card);
  color: var(--ivr-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.12s;
}
.ivr-zoom-btn:hover {
  background: var(--ivr-accent-soft);
  color: var(--ivr-accent);
  border-color: var(--ivr-accent);
}
.ivr-zoom-level {
  min-width: 46px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ivr-text-muted);
}
.ivr-zoom-reset {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ivr-border);
  background: none;
  color: var(--ivr-text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.ivr-zoom-reset:hover {
  background: var(--ivr-accent-soft);
  color: var(--ivr-accent);
  border-color: var(--ivr-accent);
}
.ivr-flow-canvas {
  padding: 20px 18px 20px;
}

/* fullscreen for IVR modal */
.modal-backdrop.ivr-is-fullscreen {
  padding: 0 !important;
}
.modal-backdrop.ivr-is-fullscreen .modal-lg {
  max-width: 100% !important;
  width: 100% !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.modal-backdrop.ivr-is-fullscreen .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.modal-backdrop.ivr-is-fullscreen .ivr-flow-host {
  min-height: 0;
}

/* ================================================================
   DISPOSITION SET VISUAL BUILDER
   ================================================================ */

/* ── Overlay shell (topbar + dp-mount) ── */
.dse-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg, #f4f6fb);
  flex-direction: column;
}
.dse-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.dse-topbar-mid {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dse-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dse-name-inp {
  padding: 6px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: var(--bg, #f4f6fb);
  min-width: 200px;
  max-width: 340px;
  color: var(--ink-1, #111);
  transition: border-color .15s;
}
.dse-name-inp:focus {
  border-color: var(--primary, #0070f3);
  outline: none;
  background: var(--card, #fff);
}
.dse-default-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2, #333);
}
.dse-err-msg {
  font-size: 12px;
  color: #ef4444;
  max-width: 200px;
}

/* ── DispBuilder inner layout ── */
.dp-host {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Canvas (scrollable tree area) */
.dp-canvas-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--bg, #f4f6fb);
  background-image: radial-gradient(circle, #9db5ce28 1px, transparent 1px);
  background-size: 22px 22px;
}
.dp-canvas {
  padding: 24px 32px 56px;
  min-width: max-content;
}

/* Zoom bar */
.dp-zoom-bar {
  position: sticky;
  top: 10px;
  right: 16px;
  float: right;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 12px;
}
.dp-zbtn {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #f8f9fa); cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ink-2, #555);
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.dp-zbtn:hover { background: var(--primary, #0070f3); color: #fff; border-color: var(--primary, #0070f3); }
.dp-zlvl { font-size: 11px; font-weight: 700; color: var(--ink-3, #888); min-width: 32px; text-align: center; }

/* Root row — top-level nodes spread horizontally */
.dp-root-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Each column (one per node, children fan out below) */
.dp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Vertical connector line (parent → fanout or parent → add-btn) */
.dp-vline {
  width: 2px;
  height: 20px;
  background: #94a3b8;
  flex-shrink: 0;
}

/* Fanout SVG container */
.dp-fan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dp-fan-svg {
  display: block;
  margin: 0 auto;
}

/* Branches row (children of a node side by side) */
.dp-branches {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Node card */
.dp-card {
  width: 200px;
  background: var(--card, #fff);
  border: 2px solid #6366f1;
  border-radius: 12px;
  padding: 12px 12px 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transition: box-shadow .15s, transform .1s;
  user-select: none;
}
.dp-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.13); transform: translateY(-2px); }
.dp-card.dp-sel { transform: translateY(-3px); }

.dp-l1 { width: 180px; }
.dp-l2 { width: 160px; }

.dp-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.dp-lv-chip {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.dp-card-acts {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.dp-add-child {
  padding: 2px 8px; font-size: 10px; font-weight: 700;
  border-radius: 5px; border: 1px solid var(--dp-ac, #3b82f6);
  color: var(--dp-ac, #3b82f6); background: transparent; cursor: pointer; white-space: nowrap;
}
.dp-add-child:hover { background: var(--dp-ac, #3b82f6); color: #fff; }
.dp-del {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(239,68,68,.35); color: #ef4444;
  background: transparent; cursor: pointer; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dp-del:hover { background: #fee2e2; border-color: #ef4444; }

.dp-lbl-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.dp-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.dp-lbl-text {
  font-size: 13px; font-weight: 700; color: var(--ink-1, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-code-tag {
  font-size: 10px; font-family: monospace; font-weight: 700; opacity: .75; margin-bottom: 3px;
}
.dp-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.dp-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #f1f5f9; color: #64748b;
}
.dp-sale { background: #d1fae5; color: #065f46; }
.dp-cb   { background: #fef3c7; color: #92400e; }
.dp-dnc  { background: #fee2e2; color: #991b1b; }
.dp-nd   { background: #f1f5f9; color: #64748b; }

/* Add-child button below a card */
.dp-add-child-btn {
  margin-top: 0;
  padding: 4px 14px; font-size: 11px; font-weight: 700;
  border-radius: 999px; border: 1.5px dashed var(--dp-ac, #3b82f6);
  color: var(--dp-ac, #3b82f6); background: transparent; cursor: pointer;
  transition: all .12s; white-space: nowrap;
}
.dp-add-child-btn:hover {
  background: var(--dp-ac, #3b82f6); color: #fff; border-style: solid;
}

/* Add-root button at bottom of canvas */
.dp-add-root-row {
  margin-top: 28px;
  display: flex;
  justify-content: flex-start;
}
.dp-add-root {
  padding: 10px 22px; font-size: 13px; font-weight: 700;
  border: 2px dashed var(--border, #cbd5e1); border-radius: 12px;
  background: transparent; color: var(--ink-3, #888); cursor: pointer;
  transition: all .15s;
}
.dp-add-root:hover {
  border-color: var(--primary, #0070f3); color: var(--primary, #0070f3);
  background: #0070f308;
}

/* Empty state */
.dp-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px 20px; text-align: center;
}
.dp-emp-h { font-size: 16px; font-weight: 700; color: var(--ink-2, #444); }
.dp-emp-s { font-size: 13px; color: var(--ink-4, #888); margin-top: 8px; line-height: 1.6; max-width: 320px; }

/* Edit panel (right sidebar) */
.dp-panel {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--card, #fff);
  border-left: 1px solid var(--border, #e2e8f0);
}
.dp-edit-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 380px; text-align: center; padding: 24px;
}
.dp-eem-h { font-size: 15px; font-weight: 700; color: var(--ink-2, #444); }
.dp-eem-s { font-size: 12px; color: var(--ink-4, #aaa); margin-top: 8px; line-height: 1.5; }
.dp-edit-inner { padding: 20px; }
.dp-edit-hdr {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 16px;
}
.dp-edit-lv {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
}
.dp-edit-name {
  font-size: 15px; font-weight: 700; color: var(--ink-1, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-field    { margin-bottom: 14px; }
.dp-flbl {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3, #888); margin-bottom: 5px;
}
.dp-inp {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px; font-size: 13px;
  background: var(--bg, #f8f9fa); color: var(--ink-1, #111);
  transition: border-color .15s;
}
.dp-inp:focus { border-color: var(--primary, #0070f3); outline: none; background: var(--card, #fff); }
.dp-mono { font-family: monospace; font-weight: 700; letter-spacing: .03em; }
.dp-color-inp {
  width: 42px; height: 34px; padding: 2px;
  border: 1.5px solid var(--border, #e2e8f0); border-radius: 8px; cursor: pointer;
}
.dp-flags-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.dp-flag-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg-2, #f8fafc); transition: all .12s; user-select: none;
}
.dp-flag-pill input { display: none; }
.dp-flag-pill.dp-flag-on {
  background: #0070f310; border-color: #0070f350; color: var(--primary, #0070f3);
}
.dp-apply-btn { width: 100%; margin-top: 8px; }

@media (max-width: 720px) {
  .dp-host { flex-direction: column; }
  .dp-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 48vh; }
}

.btn-fullscreen-ivr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-right: 8px;
  background: var(--ivr-accent-soft);
  color: var(--ivr-accent);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-fullscreen-ivr:hover {
  background: var(--ivr-accent);
  color: #fff;
}

/* ================================================================
   USER AVATAR MENU (topbar)
   ================================================================ */
.user-menu {
  position: relative;
}
.user-avatar-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar-btn:hover { background: var(--blue-h); }
.user-avatar-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  z-index: 200;
  overflow: hidden;
  animation: fadein var(--t-fast);
}
.user-dropdown.hidden { display: none !important; }
.ud-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.ud-name  { font-weight: 600; font-size: 14px; color: var(--ink); }
.ud-meta  { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.ud-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--f-ui);
  transition: background var(--t-fast);
}
.ud-item:first-of-type { border-top: none; }
.ud-item:hover { background: var(--bg-2); color: var(--ink); }
.ud-item.ud-danger { color: var(--red); }
.ud-item.ud-danger:hover { background: #fff0ef; }
.company-logo-img {
  width: 36px; height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--bg-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* ================================================================
   LOGO UPLOAD FIELD
   ================================================================ */
.logo-field-wrap { display: flex; flex-direction: column; gap: 6px; }
.logo-field-or   { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-4); margin: 2px 0; }
.logo-field-or::before,
.logo-field-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.logo-file-input { font-size: 13px; color: var(--ink-2); }

/* ================================================================
   CAMPAIGN BAR — search + filter + refresh in one row
   ================================================================ */
.camp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  flex-wrap: nowrap;
}
.camp-bar input[type="search"] {
  flex: 1 1 180px;
  min-width: 140px;
}
.camp-bar select,
.camp-bar input[type="search"] {
  font-family: var(--f-ui);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: auto;
}
.camp-bar select { flex: 0 0 auto; }
.camp-bar input:focus, .camp-bar select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
  outline: none;
}
.camp-bar-sep {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  flex-shrink: 0;
  margin: 0 2px;
}
.camp-bar .ar-status {
  font-size: 12px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 0;
  transition: color var(--t-fast);
}
.camp-bar .ar-status.ar-live { color: #0a7b3d; }
.camp-bar .ar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(48,209,88,0.6);
  animation: ar-pulse 1.6s infinite;
}
.camp-bar .filter-count {
  font-size: 12px;
  color: var(--blue);
  white-space: nowrap;
  font-weight: 500;
}

/* ================================================================
   PAGINATION (standalone — outside table-wrap)
   ================================================================ */
.tbl-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  flex-wrap: wrap;
}
.tbl-pager .page-info { font-size: 13px; color: var(--ink-3); }
.tbl-pager .page-controls { display: flex; gap: 6px; align-items: center; }
.tbl-pager .page-num {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 980px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tbl-pager .page-num:hover:not(:disabled) { background: var(--bg-2); }
.tbl-pager .page-num.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.tbl-pager .page-num:disabled { opacity: 0.4; cursor: not-allowed; }
.tbl-pager .page-ellipsis { color: var(--ink-4); padding: 0 4px; font-size: 13px; }
.tbl-pager .page-size-select {
  font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); width: auto;
}

/* ================================================================
   BILLING MODULE
   ================================================================ */

/* Credits widget in company topbar */
.credits-widget {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: default;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  margin-right: 8px;
}
.credits-widget .credits-icon {
  font-size: 13px;
  color: var(--green);
  font-weight: 700;
}
.credits-widget.credits-low {
  background: #fff0ef;
  border-color: var(--red);
  color: var(--red);
}
.credits-widget.credits-low .credits-icon { color: var(--red); }

/* Billing balance card in topup modal */
.billing-balance-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
}
.billing-balance-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.billing-balance-val {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Text colors for credit/debit */
.text-green { color: var(--green); }
.text-red   { color: var(--red); }

/* Badge variants for transaction type */
.badge.credit { background: #e8f9ef; color: #0a6e31; }
.badge.debit  { background: #fff0ef; color: #c0281c; }

.low-credit-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #fee;
  color: #c0281c;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.live-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #e6f7ec;
  color: #157347;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ── API Docs: top navigation + one-section-at-a-time ── */
.apidoc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-1, #fff);
  padding: 10px 0;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.apidoc-nav-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg-2, #f5f6f8);
  color: var(--ink-2, #444);
  cursor: pointer;
  transition: all .12s ease;
}
.apidoc-nav-btn:hover { background: var(--bg-3, #eceef1); }
.apidoc-nav-btn.active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.apidoc-section { display: none; }
.apidoc-section.active { display: block; animation: apidocFade .15s ease; }
@keyframes apidocFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.apidoc-sec-title { margin: 0 0 6px; font-size: 18px; }

/* ── API Docs: Push-Leads Builder ── */
.apidoc-gen {
  border: 1px solid var(--accent, #2563eb);
  border-radius: var(--r-sm, 8px);
  background: var(--bg-2, #f7f9ff);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.apidoc-gen-head { font-size: 14px; font-weight: 700; }
.apidoc-gen-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.apidoc-gen-cols .chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-3, #eceef1);
  color: var(--ink-2, #444);
  border: 1px solid var(--line, #e5e7eb);
}
.apidoc-gen-cols .chip.phone {
  background: #e6f7ec;
  color: #157347;
  border-color: #b7e4c7;
  font-weight: 700;
}
.apidoc-gen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.apidoc-gen .field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, #666);
  margin-bottom: 4px;
}
.apidoc-gen .field input,
.apidoc-gen .field select,
.apidoc-gen .field textarea { width: 100%; }
@media (max-width: 640px) { .apidoc-gen-grid { grid-template-columns: 1fr; } }

/* ── Voice Broadcast Reports ── */
.vbr-subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.vbr-subtab {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
  color: var(--ink-2, #444); cursor: pointer;
}
.vbr-subtab.active { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }
.vbr-filters, .vbr-subfilter {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; background: var(--surface-2, #f7f8fa);
}
.vbr-filters label, .vbr-subfilter label { font-size: 12px; font-weight: 600; color: var(--ink-3, #666); display: flex; flex-direction: column; gap: 3px; }
/* compact, theme-matched inputs inside the report filter bars */
.vbr-filters input, .vbr-filters select,
.vbr-subfilter input, .vbr-subfilter select {
  width: auto;
  font-size: 13px;
  padding: 8px 11px;
  border-radius: var(--r-sm, 8px);
  min-width: 150px;
}
.vbr-presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vbr-chip {
  font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
  color: var(--ink-2, #444); cursor: pointer; white-space: nowrap;
}
.vbr-chip:hover { border-color: var(--accent, #2563eb); }
.vbr-chip.active { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }

/* group-by-day bar chart */
.vbr-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 190px; padding: 8px 6px 0;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); overflow-x: auto;
}
.vbr-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 16px; flex: 1; height: 100%; }
.vbr-bar-stack { width: 72%; min-width: 8px; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.vbr-bar:hover .vbr-bar-stack { filter: brightness(1.08); }
.vbr-bar-ans   { background: #22c55e; }
.vbr-bar-fail  { background: #ef4444; }
.vbr-bar-other { background: #cbd5e1; }
.vbr-bar-lbl   { font-size: 9px; color: var(--ink-3, #888); margin-top: 4px; transform: rotate(-45deg); white-space: nowrap; }
.vbr-legend { font-size: 11px; color: var(--ink-3, #888); font-weight: 500; }
.vbr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 2px 0 8px; }
.vbr-legend .lg-ans  { background: #22c55e; }
.vbr-legend .lg-fail { background: #ef4444; }

/* webhook resend */
.vbr-bulkbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface-2, #f7f8fa);
}
.vbr-resend-row { background: rgba(99, 102, 241, 0.06); }
.vbr-resend-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #ede9fe; color: #6d28d9; border-radius: 4px;
  padding: 1px 5px; vertical-align: middle;
}
.vbr-wh-resend1 { cursor: pointer; border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); border-radius: 6px; padding: 3px 8px; }
.vbr-wh-resend1:hover { border-color: var(--accent, #2563eb); }
.vbr-wh-view { cursor: pointer; border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); border-radius: 6px; padding: 3px 8px; }
.vbr-wh-view:hover { border-color: var(--accent, #2563eb); }

/* webhook detail modal */
.vbr-detail-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px;
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface-2, #f7f8fa);
}
.vbr-detail-meta > div { display: flex; flex-direction: column; }
.vbr-detail-meta b { font-size: 11px; color: var(--ink-3, #888); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.vbr-detail-meta span { font-size: 14px; font-weight: 500; }
.vbr-detail-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3, #666); margin: 12px 0 4px; }

/* API form instructive help */
.api-kind-help {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--accent, #2563eb); background: rgba(37, 99, 235, 0.05);
  font-size: 13px; line-height: 1.5;
}
.api-kind-help .akh-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.api-kind-help p { margin: 6px 0; }
.api-kind-help code {
  background: var(--bg-2, #eef1f5); padding: 1px 5px; border-radius: 4px;
  font-size: 12px; white-space: nowrap;
}
.api-kind-help .akh-tags { margin-top: 8px; font-size: 12px; color: var(--ink-2, #444); line-height: 1.9; }
.api-kind-help .akh-example { margin-top: 10px; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 6px 10px; }
.api-kind-help .akh-example summary { cursor: pointer; font-weight: 600; }
.api-kind-help .akh-example ol { margin: 8px 0; padding-left: 20px; }
.api-kind-help .akh-example li { margin: 4px 0; }
.api-kind-help code.wrap, .api-kind-help .akh-example code { white-space: normal; }

/* API report-field selector */
.api-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.api-field-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; cursor: pointer; padding: 3px 0; }
.api-field-chk input { width: auto; }
.vbr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.vbr-card {
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 14px 16px;
  background: var(--surface, #fff);
}
.vbr-card-val { font-size: 24px; font-weight: 800; line-height: 1.1; }
.vbr-card-lbl { font-size: 12px; color: var(--ink-3, #666); margin-top: 4px; }
.vbr-card-sub { font-size: 11px; color: var(--accent, #2563eb); margin-top: 2px; font-weight: 600; }

/* Admin camp bar (same as camp-bar but slightly different context) */
#admin-camp-bar {
  padding: 10px 0 12px;
}

/* ================================================================
   Info / help tooltip button
   ================================================================ */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  user-select: none;
  flex-shrink: 0;
}
.info-btn .info-tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  white-space: normal;
  width: 240px;
  line-height: 1.5;
  z-index: 200;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.info-btn:hover .info-tip,
.info-btn:focus .info-tip { display: block; }

/* ================================================================
   Progress bar (live calls usage)
   ================================================================ */
.progress-bar-wrap {
  display: inline-flex;
  align-items: stretch;
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
  width: 100px;
  flex-shrink: 0;
  vertical-align: middle;
}
.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--green);
  transition: width var(--t-med);
  min-width: 2px;
}
.progress-bar.warn    { background: var(--orange); }
.progress-bar.danger  { background: var(--red); }

/* ================================================================
   API Token section
   ================================================================ */
.token-display-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.token-field {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ================================================================
   API Docs section
   ================================================================ */
.api-docs-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* Accordion category */
.api-section-acc {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.api-section-acc > summary.api-section-title {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-2);
  border-bottom: 1px solid transparent;
  transition: background var(--t-fast);
}
.api-section-acc > summary.api-section-title::-webkit-details-marker { display: none; }
.api-section-acc > summary.api-section-title::before {
  content: '▶';
  font-size: 10px;
  color: var(--ink-4);
  transition: transform var(--t-fast);
}
details[open].api-section-acc > summary.api-section-title::before { transform: rotate(90deg); }
details[open].api-section-acc > summary.api-section-title {
  border-bottom-color: var(--border);
}
.api-section-acc > summary.api-section-title:hover { background: var(--bg); }
.api-section-body {
  padding: 14px 16px;
}

/* Legacy (unused, kept for safety) */
.api-section { margin-bottom: 32px; }
.api-section-title-old {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.api-endpoint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.api-endpoint-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.api-method {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.api-method-blue   { background: #e0f0ff; color: #0056c7; }
.api-method-green  { background: #e0f8ec; color: #0a6e31; }
.api-method-orange { background: #fff3e0; color: #c05600; }
.api-method-red    { background: #fff0ef; color: #c0281c; }
.api-path {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.api-desc {
  font-size: 13px;
  color: var(--ink-3);
  margin-left: auto;
}
.api-params {
  padding: 6px 16px 10px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.api-example {
  border-top: 1px solid var(--border);
}
.api-example summary {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.api-example summary::-webkit-details-marker { display: none; }
.api-example summary::before { content: '▶ '; font-size: 10px; }
details[open].api-example summary::before { content: '▼ '; }
.api-code {
  font-family: var(--f-mono);
  font-size: 12px;
  background: #1d1d1f;
  color: #f5f5f7;
  padding: 12px 16px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* ================================================================
   Live Calls Widget (company topbar)
   ================================================================ */
.live-calls-widget {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  margin-right: 4px;
  cursor: default;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.live-calls-widget.calls-active {
  background: #dcfce7;
  border-color: #b6f0c9;
  color: #0a7b3d;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.live-dot.active {
  background: var(--green);
  animation: ar-pulse 1.6s infinite;
}

/* Live Calls by campaign cards */
.live-calls-camp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.live-camp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  min-width: 120px;
  max-width: 180px;
  flex: 1 0 120px;
}
.live-camp-card.live-camp-active {
  border-color: #b6f0c9;
  background: #f0fdf4;
}
.live-camp-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1;
}
.live-camp-card.live-camp-active .live-camp-count {
  color: #0a7b3d;
}
.live-camp-name {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  max-width: 150px;
}

/* ================================================================
   Token Blur Box
   ================================================================ */
.token-blur-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.token-blur-value {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
  word-break: break-all;
  filter: blur(5px);
  user-select: none;
  transition: filter var(--t-med);
}
.token-blur-value.unblurred {
  filter: none;
  user-select: all;
}

/* ================================================================
   API Docs — Try it panel
   ================================================================ */
.api-try-panel {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.api-try-inner {
  padding: 12px 16px;
}
.api-try-inner .try-qs,
.api-try-inner .try-body,
.api-try-inner .try-curl {
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  resize: vertical;
}
.api-try-inner .try-curl {
  color: var(--ink-2);
  background: #fafafa;
}
.try-status {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: middle;
}
.try-status.ok  { color: var(--green); }
.try-status.err { color: var(--red); }
.try-response { max-height: 280px; overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   RTM — Real-Time Monitor
   ══════════════════════════════════════════════════════════════════════════ */

/* Pulsing live indicator dot */
.rtm-live-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--green, #16a34a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green,#16a34a) 25%, transparent);
  animation: rtm-pulse 2s infinite; vertical-align: middle;
}
.rtm-dot-paused { animation: none; background: var(--muted,#9ca3af); box-shadow: none; }
@keyframes rtm-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(22,163,74,.08); }
}

/* Summary stats bar */
.rtm-stat-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px;
}
@media (max-width: 900px) { .rtm-stat-bar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .rtm-stat-bar { grid-template-columns: repeat(2, 1fr); } }

.rtm-stat {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 16px 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.rtm-stat-n {
  font-size: 32px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rtm-stat-l {
  font-size: 11px; color: var(--muted, #6b7280); margin-top: 5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}

/* Section labels */
.rtm-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted, #6b7280); margin-bottom: 8px;
}

/* Campaign summary cards */
.rtm-campaign-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.rtm-camp-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 10px 14px; min-width: 170px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rtm-camp-name { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink, #111); }
.rtm-camp-stats { display: flex; gap: 5px; flex-wrap: wrap; }
.rtm-cs {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.rtm-cs-call  { background: #dbeafe; color: #1d4ed8; }
.rtm-cs-ready { background: #dcfce7; color: #16a34a; }
.rtm-cs-wrap  { background: #fef3c7; color: #d97706; }
.rtm-cs-total { background: var(--bg2, #f3f4f6); color: var(--muted, #6b7280); }

/* Agent grid */
.rtm-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* Individual agent card */
.rtm-agent-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 14px;
  transition: box-shadow .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.rtm-agent-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 10px 10px 0 0;
  background: var(--border, #e2e8f0);
}
.rtm-agent-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.rtm-card-stale { opacity: .6; border-color: #f59e0b; }
.rtm-card-stale::before { background: #f59e0b; }

.rtm-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px;
}
.rtm-card-left { flex: 1; min-width: 0; padding-right: 8px; }
.rtm-agent-name {
  font-size: 14px; font-weight: 700; color: var(--ink, #111);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rtm-ext {
  font-size: 10px; color: var(--muted, #6b7280);
  background: var(--bg2, #f3f4f6); padding: 1px 6px; border-radius: 4px;
}
.rtm-role-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; letter-spacing: .02em;
}
.rtm-status-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.rtm-camp-lbl {
  font-size: 11px; color: var(--muted, #6b7280); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rtm-call-info {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2, #f3f4f6); border-radius: 6px; padding: 7px 10px;
  margin-top: 4px;
}
.rtm-call-num { font-size: 13px; font-weight: 600; color: var(--ink, #111); }
.rtm-call-dur {
  font-size: 13px; font-weight: 800; color: var(--primary, #0070f3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rtm-wrap-lbl  { font-size: 11px; color: #d97706; margin-top: 5px; font-weight: 600; }
.rtm-stale-lbl { font-size: 10px; color: #f59e0b; margin-top: 4px; }
.rtm-empty     { text-align: center; color: var(--muted, #6b7280); padding: 48px 20px; font-size: 14px; }


/* ── Outbound campaign stats row ────────────────────────────────────────── */
.badge-active    { background: #dcfce7; color: #0a7b3d; }
.badge-paused    { background: #fde4b4; color: #7a4a00; }
.badge-draft     { background: #f1f5f9; color: var(--ink-3, #666); }
.badge-completed { background: #dcfce7; color: #0a7b3d; }
.badge-inbound   { background: #ede9fe; color: #5b21b6; }
.badge-both      { background: #e0f2fe; color: #075985; }
.ob-stats-row { margin-top: 5px; }
.ob-stat { display: inline-flex; align-items: baseline; gap: 2px; }
.ob-sn   { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-sl   { font-size: 10px; color: var(--ink-3, #888); text-transform: uppercase; letter-spacing: .02em; }
.sel-sm  { padding: 3px 6px; font-size: 12px; }

/* ── Lead-filter dropdowns (campaign forms) ───────────────────────────────── */
.filter-dd { position: relative; }
.filter-dd > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  background: var(--bg, #fff); display: flex; align-items: center; justify-content: space-between;
}
.filter-dd > summary::-webkit-details-marker { display: none; }
.filter-dd > summary::after { content: '▾'; color: var(--muted, #94a3b8); font-size: 11px; margin-left: 8px; }
.filter-dd[open] > summary::after { content: '▴'; }
.filter-dd[open] > summary { border-color: #93c5fd; }
.filter-dd-panel {
  margin-top: 4px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  padding: 6px 8px; background: var(--bg, #fff);
}
.filter-dd-panel .ckopt {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; padding: 4px 2px; cursor: pointer; border-radius: 4px;
}
.filter-dd-panel .ckopt:hover { background: var(--bg-2, #f1f5f9); }
.filter-dd-panel .ckopt input { margin: 0; }

/* ── Inbound Route editor cards ───────────────────────────────────────────── */
.ibr-rule-card { transition: box-shadow .15s; }
.ibr-rule-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* ── Recording player ─────────────────────────────────────────────────────── */
.rec-player {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2, #f1f5f9); border-radius: 8px; padding: 6px 10px;
  min-width: 260px; box-sizing: border-box;
}
.rec-player-lg { min-width: 0; width: 100%; }
.rec-play-ico {
  min-width: 70px; height: 32px; border-radius: 6px;
  background: var(--accent, #6366f1); color: #fff; border: none;
  cursor: pointer; font-size: 12px; font-weight: 600;
  padding: 0 12px; flex-shrink: 0; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.rec-play-ico:hover { opacity: .85; }
.rec-bar { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; }
.rec-bar input[type=range] {
  width: 100%; height: 5px; cursor: pointer;
  accent-color: var(--accent, #6366f1); display: block;
}
.rec-time-lbl {
  font-size: 10px; color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rec-ff-btn {
  background: none; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; font-size: 10px; font-weight: 600;
  color: var(--muted, #64748b); cursor: pointer; padding: 4px 8px;
  flex-shrink: 0; white-space: nowrap;
}
.rec-ff-btn:hover { background: var(--bg, #fff); color: var(--ink, #0f172a); }

/* ── RTM (Real-Time Monitor) ─────────────────────────────────────────────── */
.rtm-root { padding: 0 0 32px; }

.rtm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 16px; border-bottom: 2px solid var(--border,#e2e8f0); margin-bottom: 18px;
}
.rtm-title { font-size: 20px; font-weight: 700; color: var(--ink,#0f172a); margin: 0; }
.rtm-header-left  { display: flex; align-items: center; gap: 10px; }
.rtm-header-right { display: flex; align-items: center; gap: 8px; }
.rtm-toggle-label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; cursor: pointer; }
.rtm-last-update  { font-size: 12px; color: var(--muted,#64748b); }

.rtm-live-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #22c55e; display: inline-block;
  box-shadow: 0 0 0 0 rgba(34,197,94,.4); animation: rtm-pulse 2s infinite;
}
.rtm-dot-error { background: #ef4444 !important; box-shadow: none; animation: none; }
@keyframes rtm-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Stat cards */
.rtm-cards {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.rtm-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0);
  border-radius: 12px; padding: 12px 16px; flex: 1; min-width: 110px; max-width: 180px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .15s, box-shadow .15s; cursor: default;
}
.rtm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.rtm-card-icon { font-size: 22px; flex-shrink: 0; }
.rtm-card-val  { font-size: 24px; font-weight: 800; line-height: 1.1; }
.rtm-card-lbl  { font-size: 11px; font-weight: 600; color: var(--muted,#64748b); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.rtm-card-blue    { border-left: 4px solid #3b82f6; } .rtm-card-blue    .rtm-card-val { color: #1d4ed8; }
.rtm-card-purple  { border-left: 4px solid #8b5cf6; } .rtm-card-purple  .rtm-card-val { color: #6d28d9; }
.rtm-card-green   { border-left: 4px solid #22c55e; } .rtm-card-green   .rtm-card-val { color: #15803d; }
.rtm-card-orange  { border-left: 4px solid #6366f1; } .rtm-card-orange  .rtm-card-val { color: #4338ca; }
/* Semantic status cards — colour driven by the canonical --status-* palette so the
   Ready/On-Call/Break summary cards always match the RTM chips, board and donut. */
.rtm-card-ready   { border-left: 4px solid var(--status-ready);  } .rtm-card-ready   .rtm-card-val { color: var(--status-ready-d);  }
.rtm-card-oncall  { border-left: 4px solid var(--status-oncall); } .rtm-card-oncall  .rtm-card-val { color: var(--status-oncall-d); }
.rtm-card-break   { border-left: 4px solid var(--status-break);  } .rtm-card-break   .rtm-card-val { color: var(--status-break-d);  }

/* ── Campaign-form tabs ─────────────────────────────────────────────────────── */
.ob-pane-hidden { display: none !important; }
.ob-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
  background: var(--surface, #fff);
  padding: 2px 0 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ob-tab {
  padding: 7px 14px; border: 1px solid var(--border);
  background: var(--bg-2, #f5f5f7); color: var(--ink-2, #424245);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ob-tab:hover { border-color: var(--primary); }
.ob-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rtm-card-amber   { border-left: 4px solid #f59e0b; } .rtm-card-amber   .rtm-card-val { color: #b45309; }
.rtm-card-cyan    { border-left: 4px solid #06b6d4; } .rtm-card-cyan    .rtm-card-val { color: #0e7490; }
.rtm-card-teal    { border-left: 4px solid #14b8a6; } .rtm-card-teal    .rtm-card-val { color: #0f766e; }
.rtm-card-emerald { border-left: 4px solid #10b981; } .rtm-card-emerald .rtm-card-val { color: #065f46; }
.rtm-card-rose    { border-left: 4px solid #f43f5e; } .rtm-card-rose    .rtm-card-val { color: #be123c; }
.rtm-card-sky     { border-left: 4px solid #0ea5e9; } .rtm-card-sky     .rtm-card-val { color: #0369a1; }

/* Charts */
.rtm-chart-card {
  background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* Chart card that has a filter row — header is flex */
.rtm-chart-card-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.rtm-chart-filter-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rtm-chart-title { font-size: 13px; font-weight: 700; color: var(--ink,#0f172a); margin-bottom: 8px; }
.rtm-chart-card-hdr .rtm-chart-title { margin-bottom: 0; }
/* Constrain canvas height so charts are compact */
.rtm-chart-card canvas { max-height: 150px; }

/* Charts row: 2 side-by-side */
.rtm-charts-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
@media (max-width: 700px) { .rtm-charts-2col { grid-template-columns: 1fr; } }

/* Customisable panels */
.rtm-custom-panel {
  background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden; margin-bottom: 14px;
}
.rtm-panel-ctrl-row { display: flex; align-items: center; gap: 6px; }
.rtm-panel-btns     { display: flex; gap: 3px; }
.rtm-ctrl-sm {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border,#e2e8f0); background: var(--bg,#fff);
  cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--muted,#64748b); transition: background .12s, color .12s; padding: 0;
}
.rtm-ctrl-sm:hover { background: var(--bg2,#f1f5f9); color: var(--ink,#0f172a); }

/* Resize handle */
.rtm-resize-handle {
  height: 12px; background: var(--bg2,#f8fafc);
  border-top: 1px solid var(--border,#e2e8f0);
  cursor: ns-resize; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted,#cbd5e1); letter-spacing: 4px;
  user-select: none; transition: background .12s; line-height: 1;
}
.rtm-resize-handle:hover { background: var(--border,#e2e8f0); color: var(--muted,#94a3b8); }
.rtm-resize-handle.rtm-resizing { background: #dbeafe; color: #3b82f6; }

/* Resizable body */
.rtm-resizable-body {
  overflow-y: auto; padding: 8px; min-height: 60px; position: relative;
}
/* Empty state always centred — absolute-fills the body regardless of height */
.rtm-resizable-body > .rtm-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; margin: 0;
  font-size: 13px; color: var(--muted,#94a3b8);
  pointer-events: none;
}

/* Collapsed panel */
.rtm-custom-panel.rtm-panel-collapsed .rtm-resizable-body,
.rtm-custom-panel.rtm-panel-collapsed .rtm-resize-handle { display: none; }
.rtm-custom-panel.rtm-panel-collapsed .rtm-panel-hdr {
  border-bottom: none;
}

/* Backwards-compat for code that still references old class names */
.rtm-sidebar { display: flex; flex-direction: column; gap: 12px; }
.rtm-panel-body-tall { overflow-y: auto; padding: 6px; }

/* Campaign activity rows */
.rtm-camp-row { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border,#f1f5f9); margin-bottom: 6px; }
.rtm-camp-row-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.rtm-camp-row-name { font-size: 12px; font-weight: 700; color: var(--ink,#0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rtm-camp-row-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted,#64748b); }

/* Live calls widget breakdown badge */
.lc-bd { font-size: 11px; color: var(--muted,#94a3b8); margin-left: 4px; }

/* Panels (shared between .rtm-panel and .rtm-custom-panel) */
.rtm-panel {
  background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden;
}
.rtm-panel-hdr, .rtm-custom-panel > .rtm-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg2,#f8fafc); border-bottom: 1px solid var(--border,#e2e8f0);
  flex-wrap: wrap; gap: 6px;
}
.rtm-panel-title { font-size: 14px; font-weight: 700; color: var(--ink,#0f172a); }
.rtm-panel-body  { max-height: 460px; overflow-y: auto; padding: 6px; }
.rtm-count-badge { background: var(--accent,#6366f1); color: #fff; border-radius: 12px; font-size: 11px; font-weight: 700; padding: 2px 8px; }
.rtm-empty { padding: 40px 20px; text-align: center; color: var(--muted,#94a3b8); font-size: 13px; }

/* Agent rows */
.rtm-agent-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
  border-radius: 8px; transition: background .15s; margin-bottom: 3px;
}
.rtm-agent-row:hover { background: var(--bg2,#f8fafc); }
.rtm-agent-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.rtm-agent-info   { flex: 1; min-width: 0; }
.rtm-agent-name   { font-size: 13px; font-weight: 700; color: var(--ink,#0f172a); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rtm-ext          { font-size: 11px; color: var(--muted,#94a3b8); font-weight: 400; background: var(--bg2,#f1f5f9); border-radius: 4px; padding: 0 4px; }
.rtm-agent-camp   { font-size: 11px; color: var(--muted,#94a3b8); margin-top: 2px; }
.rtm-call-info    { display: flex; gap: 5px; align-items: center; margin-top: 3px; }
.rtm-call-num     { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--ink,#0f172a); }
.rtm-call-name    { font-size: 11px; color: var(--muted,#64748b); }
.rtm-break-dur, .rtm-wrap-remain { font-size: 11px; color: #f59e0b; font-weight: 600; margin-top: 2px; }

.rtm-status-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700; margin-top: 3px;
}

.rtm-agent-actions { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-shrink: 0; }
.rtm-action-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border,#e2e8f0);
  background: var(--bg,#fff); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.rtm-action-btn:hover     { background: var(--bg2,#f1f5f9); transform: scale(1.1); }
.rtm-action-spy           { border-color: #6366f1; color: #6366f1; }
.rtm-action-spy:hover     { background: #e0e7ff; }
.rtm-action-whisper       { border-color: #8b5cf6; color: #8b5cf6; }
.rtm-action-whisper:hover { background: #f3e8ff; }
.rtm-action-barge         { border-color: #ef4444; color: #ef4444; }
.rtm-action-barge:hover   { background: #fee2e2; }
.rtm-action-end-mon       { border-color: #dc2626; color: #dc2626; }
.rtm-action-ctrl          { border-color: #64748b; color: #64748b; }
.rtm-action-ctrl:hover    { background: #f1f5f9; }

/* Live call rows */
.rtm-call-row {
  display: flex; align-items: center; gap: 8px; padding: 10px;
  border-radius: 8px; transition: background .15s; margin-bottom: 3px;
}
.rtm-call-row:hover  { background: var(--bg2,#f8fafc); }
.rtm-call-main       { flex: 1; min-width: 0; }
.rtm-call-header     { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rtm-call-dir        { font-size: 14px; }
.rtm-call-number     { font-size: 13px; font-weight: 700; color: var(--ink,#0f172a); }
.rtm-call-status-chip{ border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700; }
.rtm-call-meta       { display: flex; gap: 10px; margin-top: 4px; font-size: 11px; color: var(--muted,#64748b); flex-wrap: wrap; }
.rtm-call-timer      { font-variant-numeric: tabular-nums; font-weight: 600; color: #6366f1; }
.rtm-call-actions    { display: flex; gap: 4px; flex-shrink: 0; }
.rtm-mon-badge       { font-size: 10px; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 1px 6px; font-weight: 700; }

/* Queue */
.rtm-q-status  { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.rtm-q-queued  { background: #fef9c3; color: #854d0e; }
.rtm-q-in_ivr  { background: #dbeafe; color: #1e40af; }
.rtm-q-ringing { background: #dcfce7; color: #166534; }

/* Monitor modal mode buttons */
.rtm-mode-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border: 2px solid var(--border,#e2e8f0); border-radius: 10px;
  background: var(--bg,#fff); cursor: pointer; font-size: 12px; transition: all .15s;
}
.rtm-mode-btn span:first-child { font-size: 14px; font-weight: 700; }
.rtm-mode-btn small            { color: var(--muted,#94a3b8); font-size: 10px; }
.rtm-mode-btn.rtm-mode-sel     { border-color: var(--accent,#6366f1); background: #e0e7ff; color: #4338ca; }
.rtm-mode-btn.rtm-mode-sel small { color: #6366f1; }

/* Agent control modal */
.rtm-ctrl-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--border,#e2e8f0); border-radius: 8px; background: var(--bg,#fff);
  cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s; text-align: left;
}
.rtm-ctrl-btn:hover         { background: var(--bg2,#f8fafc); }
.rtm-ctrl-btn span:first-child { font-size: 18px; }
.rtm-ctrl-section           { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px dashed var(--border,#e2e8f0); border-radius: 8px; }
.rtm-ctrl-break             { color: #92400e; }
.rtm-ctrl-break:hover       { background: #fef9c3 !important; }
.rtm-ctrl-logout            { color: #dc2626; border-color: #fecaca; }
.rtm-ctrl-logout:hover      { background: #fee2e2 !important; }

/* RTM WebRTC SIP chip */
.rtm-sip-chip  { display: inline-flex; align-items: center; border-radius: 12px; padding: 3px 10px; font-size: 12px; font-weight: 700; transition: all .3s; margin-left: 8px; }
.rtm-sip-off   { background: #f1f5f9; color: #64748b; }
.rtm-sip-conn  { background: #fef9c3; color: #92400e; animation: rtm-sip-pulse 1.5s infinite; }
.rtm-sip-on    { background: #dcfce7; color: #16a34a; box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.rtm-sip-err   { background: #fee2e2; color: #dc2626; }
@keyframes rtm-sip-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ── Click-To-Call (CTC) ─────────────────────────────────────── */
.ctc-wrap       { max-width: 720px; margin: 0 auto; padding: 24px 20px; }
.ctc-heading    { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ctc-sub        { color: var(--muted,#64748b); font-size: 13px; margin: 0 0 24px; line-height: 1.6; }
.ctc-form-card  { background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ctc-row        { display: flex; align-items: center; gap: 12px; }
.ctc-lbl        { min-width: 220px; font-size: 13px; font-weight: 600; color: var(--text,#1e293b); }
.ctc-sel,.ctc-inp { flex: 1; padding: 8px 12px; border: 1px solid var(--border,#e2e8f0); border-radius: 8px; font-size: 13px; background: var(--bg,#fff); color: var(--text,#1e293b); }
.ctc-actions    { display: flex; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border,#e2e8f0); margin-top: 4px; }
.ctc-codegen    { margin-top: 24px; background: var(--bg,#fff); border: 1px solid var(--border,#e2e8f0); border-radius: 12px; padding: 20px; }
.ctc-code-heading { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.ctc-code-hint  { font-size: 12px; color: var(--muted,#64748b); margin: 0 0 16px; }
.ctc-code-tab-bar { display: flex; gap: 4px; margin-bottom: 12px; }
.ctc-code-tab   { padding: 5px 14px; border: 1px solid var(--border,#e2e8f0); border-radius: 6px; background: var(--bg2,#f8fafc); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.ctc-code-tab.active { background: var(--accent,#6366f1); color: #fff; border-color: var(--accent,#6366f1); }
.ctc-pre        { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 8px; font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre; margin: 0 0 10px; }
.ctc-copy-btn   { padding: 5px 14px; border: 1px solid var(--border,#e2e8f0); border-radius: 6px; background: var(--bg2,#f8fafc); font-size: 12px; cursor: pointer; }
.ctc-copy-btn:hover { background: var(--bg,#fff); }
@media (max-width: 600px) {
  .ctc-row { flex-direction: column; align-items: flex-start; }
  .ctc-lbl { min-width: unset; }
}

/* ── Speech-to-Text / Transcription ──────────────────────────────────────── */
.stt-transcript-box {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}
.stt-utterance {
  display: grid;
  grid-template-columns: 90px 80px 1fr;
  gap: 6px 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stt-utterance:last-child { border-bottom: none; }
.stt-speaker {
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
}
.stt-utime {
  color: var(--ink-3);
  font-size: 11px;
  font-family: monospace;
}
.stt-utext { line-height: 1.5; }

/* STT keyword history chips */
.stt-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 99px;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink);
}
.stt-kw-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--red, #ef4444);
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  border-radius: 99px;
  opacity: 0.7;
}
.stt-kw-del:hover { opacity: 1; background: rgba(239,68,68,.1); }

/* Working Hours */
.wh-day-lbl {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border, #dee2e6); border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; transition: background .15s, border-color .15s;
  user-select: none;
}
.wh-day-lbl:hover { background: var(--hover, #f0f4ff); border-color: var(--primary, #6366f1); }
.wh-day-lbl input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary, #6366f1); }

/* Working Hours — enhanced layout */
.wh-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card, #fff); border: 1px solid var(--border, #dee2e6);
  border-radius: 10px; padding: 16px 20px;
}
.wh-toggle-label { display: flex; flex-direction: column; gap: 3px; }
.wh-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.wh-switch input { opacity: 0; width: 0; height: 0; }
.wh-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 24px;
  cursor: pointer; transition: background .2s;
}
.wh-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.wh-switch input:checked + .wh-slider { background: var(--primary, #6366f1); }
.wh-switch input:checked + .wh-slider::before { transform: translateX(20px); }

.wh-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 860px) { .wh-cols { grid-template-columns: 1fr; } }

.wh-card {
  background: var(--card, #fff); border: 1px solid var(--border, #dee2e6);
  border-radius: 12px; padding: 20px;
}
.wh-card-head { display: flex; align-items: center; gap: 10px; }
.wh-card-icon { font-size: 20px; }
.wh-card-title { font-size: 15px; font-weight: 600; }

.wh-days-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.wh-radio-group { display: flex; flex-direction: column; gap: 10px; }
.wh-radio-lbl {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 2px solid var(--border, #dee2e6); border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wh-radio-lbl:hover { border-color: var(--primary, #6366f1); background: var(--hover, #f0f4ff); }
.wh-radio-lbl input[type=radio] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary, #6366f1); flex-shrink: 0; }
.wh-radio-lbl input[type=radio]:checked ~ .wh-radio-content .wh-radio-title { color: var(--primary, #6366f1); }
.wh-radio-content { display: flex; flex-direction: column; gap: 3px; }
.wh-radio-title { font-size: 13px; font-weight: 600; }
.wh-radio-desc { font-size: 12px; color: var(--muted, #718096); line-height: 1.4; }

/* ── Multi-shift cards ── */
.wh-shift {
  border: 1px solid var(--border, #dee2e6); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--bg, #f8fafc);
}
.wh-shift:last-child { margin-bottom: 0; }
.wh-shift-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wh-shift-name { font-weight: 600; }
.wh-night-badge {
  font-size: 12px; font-weight: 600; color: #7c3aed;
  background: #f3e8ff; border: 1px solid #e9d5ff; border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
}
.wh-hidden { display: none !important; }
.wh-shift-del {
  margin-left: auto; font-size: 12px; color: var(--danger, #dc2626);
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; cursor: pointer;
}
.wh-shift-del:hover { background: #fee2e2; border-color: #fecaca; }

/* Single / Multiple shift mode toggle + badge */
.wh-mode-seg {
  display: inline-flex; border: 1px solid var(--border, #dee2e6);
  border-radius: 8px; overflow: hidden; background: var(--bg, #f8fafc);
}
.wh-mode-btn {
  font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer;
  background: none; border: none; color: var(--muted, #718096);
}
.wh-mode-btn + .wh-mode-btn { border-left: 1px solid var(--border, #dee2e6); }
.wh-mode-btn.active { background: var(--primary, #6366f1); color: #fff; }
.wh-mode-badge {
  font-size: 11px; font-weight: 600; color: #2563eb;
  background: #dbeafe; border: 1px solid #bfdbfe; border-radius: 999px;
  padding: 2px 10px;
}
.wh-mode-badge.wh-badge-multi { color: #7c3aed; background: #f3e8ff; border-color: #e9d5ff; }

/* ============================================================
   BROADCAST NOTIFICATIONS
   ============================================================ */
/* Admin table level badges */
.badge.bc-info        { color:#1d4ed8; background:#dbeafe; border:1px solid #bfdbfe; }
.badge.bc-success     { color:#047857; background:#d1fae5; border:1px solid #a7f3d0; }
.badge.bc-warning     { color:#b45309; background:#fef3c7; border:1px solid #fde68a; }
.badge.bc-maint       { color:#6d28d9; background:#ede9fe; border:1px solid #ddd6fe; }
.badge.bc-critical    { color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; }
.badge.bc-on          { color:#047857; background:#d1fae5; border:1px solid #a7f3d0; }
.badge.bc-off         { color:#6b7280; background:#f3f4f6; border:1px solid #e5e7eb; }
.badge.bc-by-super    { color:#3730a3; background:#e0e7ff; border:1px solid #c7d2fe; }
.badge.bc-by-company  { color:#9a3412; background:#ffedd5; border:1px solid #fed7aa; }

/* Broadcast modal form bits */
.bc-radio-row { display:flex; flex-direction:column; gap:6px; }
.bc-radio-row label { display:flex; align-items:center; gap:8px; font-weight:500; cursor:pointer; }
.bc-company-picker {
  margin-top:8px; max-height:180px; overflow-y:auto;
  border:1px solid var(--border, #e5e7eb); border-radius:8px; padding:8px 10px;
  display:flex; flex-direction:column; gap:4px;
}
.bc-company-picker.hidden { display:none; }
.bc-comp-opt { display:flex; align-items:center; gap:8px; font-weight:500; cursor:pointer; }
.bc-active-row { display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }

/* Company-admin banner host — in normal flow at the very top so it PUSHES
   the topbar + content down instead of covering them. */
.broadcast-host {
  position:relative; z-index:50;
  display:flex; flex-direction:column; gap:1px;
}
.broadcast-banner {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 18px; font-size:14px; line-height:1.4;
  border-bottom:2px solid rgba(0,0,0,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  animation:bcSlideDown .25s ease;
}
@keyframes bcSlideDown { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.broadcast-banner .bc-banner-icon { font-size:18px; line-height:1.2; flex-shrink:0; }
.broadcast-banner .bc-banner-body { flex:1; }
.broadcast-banner .bc-banner-title { font-weight:700; margin-bottom:1px; }
.broadcast-banner .bc-banner-msg { font-weight:500; }
.broadcast-banner .bc-banner-x {
  flex-shrink:0; border:none; background:transparent; cursor:pointer;
  font-size:20px; line-height:1; color:inherit; opacity:.6; padding:0 2px;
}
.broadcast-banner .bc-banner-x:hover { opacity:1; }
.broadcast-banner.bc-info     { background:#eff6ff; color:#1e3a8a; border-bottom-color:#3b82f6; }
.broadcast-banner.bc-success  { background:#ecfdf5; color:#065f46; border-bottom-color:#10b981; }
.broadcast-banner.bc-warning  { background:#fffbeb; color:#92400e; border-bottom-color:#f59e0b; }
.broadcast-banner.bc-maint    { background:#f5f3ff; color:#5b21b6; border-bottom-color:#8b5cf6; }
.broadcast-banner.bc-critical { background:#fef2f2; color:#991b1b; border-bottom-color:#ef4444; }

/* ── Say Hi / Broadcast modal — clean aligned form ── */
.sh-form { max-width: 580px; display: flex; flex-direction: column; gap: 16px; }
.sh-field { display: flex; flex-direction: column; gap: 7px; }
.sh-label { font-size: 13px; font-weight: 600; color: var(--text, #1d1d1f); }
.sh-req { color: #ef4444; }
.sh-form input[type="text"], .sh-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border, #d2d2d7); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: var(--card, #fff); color: inherit;
}
.sh-form textarea { resize: vertical; min-height: 64px; }
.sh-form input:focus, .sh-form textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
/* Level chips */
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip { position: relative; cursor: pointer; }
.sh-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sh-chip span {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border, #d2d2d7); background: var(--card, #fff);
  font-size: 13px; font-weight: 500; transition: all .12s;
}
.sh-chip input:checked + span { border-color: #6366f1; background: #eef2ff; color: #4338ca; font-weight: 600; box-shadow: 0 0 0 1px #6366f1 inset; }
/* Radio option cards */
.sh-opts { display: flex; flex-direction: column; gap: 8px; }
.sh-opts-row { flex-direction: row; flex-wrap: wrap; }
.sh-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 13px; border: 1px solid var(--border, #d2d2d7); border-radius: 10px;
  font-size: 14px; font-weight: 500; flex: 1; min-width: 160px; transition: all .12s;
}
.sh-opt input { accent-color: #6366f1; width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.sh-opt:has(input:checked) { border-color: #6366f1; background: #eef2ff; }
/* Company/agent multi-select picker */
.sh-picker {
  margin-top: 4px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border, #d2d2d7); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; background: var(--bg2, #f9f9fb);
}
.sh-picker.hidden { display: none; }
.sh-comp-opt { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14px; cursor: pointer; }
.sh-comp-opt input { accent-color: #6366f1; width: 15px; height: 15px; margin: 0; }
.sh-active { display: flex; align-items: center; gap: 9px; font-weight: 600; cursor: pointer; font-size: 14px; }
.sh-active input { accent-color: #6366f1; width: 16px; height: 16px; margin: 0; }

/* ============================================================
   CONVERSATION (chat) + nav unread badge
   ============================================================ */
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  font-size:11px; font-weight:700; color:#fff; background:#ef4444;
  border-radius:999px; line-height:1;
}
.nav-badge.hidden { display:none; }

.conv-root { height:calc(100dvh - 170px); min-height:420px; }
.conv-wrap {
  display:grid; grid-template-columns:300px 1fr; height:100%;
  border:1px solid var(--border,#e5e7eb); border-radius:14px; overflow:hidden;
  background:var(--card,#fff);
}
.conv-side { border-right:1px solid var(--border,#e5e7eb); display:flex; flex-direction:column; min-height:0; background:var(--bg2,#f9f9fb); }
.conv-side-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:700; border-bottom:1px solid var(--border,#e5e7eb); }
.conv-threads { flex:1; overflow-y:auto; }
.conv-empty { padding:24px 16px; text-align:center; color:var(--muted,#9ca3af); font-size:13px; line-height:1.6; }
.conv-thread { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; border-bottom:1px solid var(--border,#f0f0f3); position:relative; }
.conv-thread:hover { background:rgba(99,102,241,.06); }
.conv-thread.active { background:rgba(99,102,241,.12); }
.conv-thread-body { flex:1; min-width:0; }
.conv-thread-top { display:flex; justify-content:space-between; gap:6px; }
.conv-thread-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-thread-time { font-size:11px; color:var(--muted,#9ca3af); flex-shrink:0; }
.conv-thread-prev { font-size:12px; color:var(--muted,#9ca3af); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-unread { background:#ef4444; color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.conv-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; background:#eef2ff; flex-shrink:0; }
.conv-av-superadmin { background:#e0e7ff; } .conv-av-company { background:#ffedd5; } .conv-av-agent { background:#dcfce7; }

.conv-main { display:flex; flex-direction:column; min-height:0; }
.conv-placeholder { margin:auto; text-align:center; color:var(--muted,#9ca3af); font-size:15px; line-height:2; }
.conv-head { display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--border,#e5e7eb); }
.conv-head-name { font-weight:700; font-size:15px; }
.conv-head-sub { font-size:11px; color:var(--muted,#9ca3af); font-weight:500; }
.conv-del { margin-left:auto; color:#dc2626; }
.conv-msgs { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px; background:var(--bg2,#f7f7fa); }
.conv-msg { display:flex; max-width:74%; }
.conv-msg.mine { align-self:flex-end; }
.conv-msg.theirs { align-self:flex-start; }
.conv-bubble { padding:8px 12px 6px; border-radius:14px; font-size:14px; line-height:1.4; position:relative; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.conv-msg.mine .conv-bubble { background:#d9fdd3; border-bottom-right-radius:4px; color:#111; }
.conv-msg.theirs .conv-bubble { background:#fff; border-bottom-left-radius:4px; color:#111; }
.conv-meta { display:block; text-align:right; font-size:10px; color:#6b7280; margin-top:2px; }
.conv-ticks { color:#9ca3af; margin-left:2px; }
.conv-ticks.seen { color:#2563eb; }
.conv-input { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border,#e5e7eb); background:var(--card,#fff); }
.conv-input input { flex:1; padding:10px 14px; border:1px solid var(--border,#d2d2d7); border-radius:999px; font-size:14px; outline:none; }
.conv-input input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

.conv-search { width:100%; box-sizing:border-box; padding:9px 12px; margin-bottom:10px; border:1px solid var(--border,#d2d2d7); border-radius:9px; font-size:14px; }
.conv-target-list { max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.conv-target { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border,#e5e7eb); border-radius:10px; background:var(--card,#fff); cursor:pointer; text-align:left; width:100%; }
.conv-target:hover { background:rgba(99,102,241,.08); border-color:#6366f1; }
.conv-target-body { display:flex; flex-direction:column; }
.conv-target-name { font-weight:600; font-size:14px; }
.conv-target-sub { font-size:12px; color:var(--muted,#9ca3af); }
.conv-back-btn { background:transparent; border:none; color:#6366f1; font-weight:600; font-size:13px; cursor:pointer; padding:2px 0 8px; }
.conv-back-btn:hover { text-decoration:underline; }
.conv-picker-co { font-weight:700; font-size:14px; margin-bottom:8px; }

/* Conversation — composer icons, emoji picker, attachments, monitor */
.conv-icon-btn { background:transparent; border:none; font-size:20px; cursor:pointer; padding:4px 6px; border-radius:8px; line-height:1; display:flex; align-items:center; }
.conv-icon-btn:hover { background:rgba(99,102,241,.1); }
.conv-emoji-panel { position:absolute; bottom:64px; left:14px; right:14px; background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.16); padding:8px; display:flex; flex-wrap:wrap; gap:2px; max-height:180px; overflow-y:auto; z-index:20; }
.conv-emoji-panel.hidden { display:none; }
.conv-emoji { background:transparent; border:none; font-size:20px; cursor:pointer; padding:4px; border-radius:6px; }
.conv-emoji:hover { background:rgba(0,0,0,.06); }
.conv-main { position:relative; }
.conv-readonly { padding:12px 16px; text-align:center; font-size:13px; color:var(--muted,#9ca3af); border-top:1px solid var(--border,#e5e7eb); background:var(--bg2,#f7f7fa); }
.conv-sender { display:block; font-size:11px; font-weight:700; color:#6d28d9; margin-bottom:2px; }
.conv-text-body { white-space:pre-wrap; }
.conv-att-img img { max-width:220px; max-height:220px; border-radius:10px; display:block; margin:2px 0; }
.conv-att-file { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; background:rgba(0,0,0,.05); border-radius:8px; color:inherit; text-decoration:none; font-size:13px; margin:2px 0; }
.conv-att-file:hover { background:rgba(0,0,0,.1); }
.conv-av-monitor { background:#e0e7ff; }

/* Tickets — status badges, system notes, controls */
.tk-badge { display:inline-block; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; }
.tk-badge.tk-open   { color:#1d4ed8; background:#dbeafe; }
.tk-badge.tk-prog   { color:#b45309; background:#fef3c7; }
.tk-badge.tk-res    { color:#047857; background:#d1fae5; }
.tk-badge.tk-closed { color:#6b7280; background:#e5e7eb; }
.tk-prev { color:var(--muted,#9ca3af); font-size:12px; }
.tk-head { gap:10px; }
.tk-head-ctl { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tk-status-sel { padding:5px 8px; border:1px solid var(--border,#d2d2d7); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.tk-del { color:#dc2626; }
.tk-filter { padding:5px 8px; border:1px solid var(--border,#d2d2d7); border-radius:8px; font-size:12px; }
.tk-sys { align-self:center; font-size:12px; color:#6b7280; background:rgba(0,0,0,.05); padding:3px 12px; border-radius:999px; margin:4px 0; }

/* ============================================================
   TICKET — helpdesk panel (Zoho/Jira style)
   ============================================================ */
.tk-wrap, .tk-detail { height:100%; display:flex; flex-direction:column; border:1px solid var(--border,#e5e7eb); border-radius:14px; overflow:hidden; background:var(--card,#fff); }
.tk-toolbar { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border,#e5e7eb); }
.tk-toolbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tk-search { flex:1; max-width:340px; padding:8px 12px; border:1px solid var(--border,#d2d2d7); border-radius:9px; font-size:14px; }
.tk-filter { padding:7px 10px; border:1px solid var(--border,#d2d2d7); border-radius:8px; font-size:13px; }
.tk-table-wrap { flex:1; overflow-y:auto; }
.tk-table { width:100%; border-collapse:collapse; }
.tk-table thead th { position:sticky; top:0; background:var(--bg2,#f7f7fa); text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#6b7280); padding:10px 14px; border-bottom:1px solid var(--border,#e5e7eb); z-index:1; }
.tk-row { cursor:pointer; border-bottom:1px solid var(--border,#f0f0f3); }
.tk-row:hover { background:rgba(99,102,241,.06); }
.tk-row td { padding:11px 14px; font-size:14px; vertical-align:middle; }
.tk-row.tk-unread td { font-weight:600; }
.tk-id { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted,#6b7280); white-space:nowrap; }
.tk-subj { max-width:420px; }
.tk-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#ef4444; margin-right:7px; vertical-align:middle; }
.tk-when { color:var(--muted,#9ca3af); font-size:12px; white-space:nowrap; }
.tk-empty { text-align:center; color:var(--muted,#9ca3af); padding:30px; }

/* status / priority badges */
.tk-badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.tk-badge.tk-open   { color:#1d4ed8; background:#dbeafe; }
.tk-badge.tk-prog   { color:#b45309; background:#fef3c7; }
.tk-badge.tk-res    { color:#047857; background:#d1fae5; }
.tk-badge.tk-closed { color:#6b7280; background:#e5e7eb; }
.tk-prio { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; }
.tk-prio.tk-p-high { color:#b91c1c; background:#fee2e2; }
.tk-prio.tk-p-norm { color:#4b5563; background:#f3f4f6; }
.tk-prio.tk-p-low  { color:#6b7280; background:#f9fafb; border:1px solid #eee; }

/* detail */
.tk-detail-bar { display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border,#e5e7eb); background:var(--bg2,#f7f7fa); }
.tk-back { background:transparent; border:none; color:#6366f1; font-weight:600; font-size:14px; cursor:pointer; }
.tk-back:hover { text-decoration:underline; }
.tk-detail-ctl { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tk-status-sel { padding:6px 10px; border:1px solid var(--border,#d2d2d7); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.tk-del { color:#dc2626; }
.tk-detail-head { padding:16px 18px; border-bottom:1px solid var(--border,#e5e7eb); }
.tk-subject { font-size:18px; font-weight:700; margin-bottom:8px; }
.tk-metaline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted,#6b7280); }
.tk-req { font-weight:600; color:var(--text,#1d1d1f); }
.tk-thread { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; background:var(--bg2,#f7f7fa); }
.tk-event { align-self:center; font-size:12px; color:#6b7280; background:rgba(0,0,0,.05); padding:4px 14px; border-radius:999px; }
.tk-card { display:flex; gap:12px; background:var(--card,#fff); border:1px solid var(--border,#e9e9ee); border-radius:12px; padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.tk-card.mine { border-color:#c7d2fe; background:#f5f7ff; }
.tk-card-avatar { width:38px; height:38px; border-radius:50%; background:#eef2ff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.tk-card-main { flex:1; min-width:0; }
.tk-card-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.tk-card-name { font-weight:700; font-size:14px; }
.tk-card-role { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#6d28d9; background:#ede9fe; padding:1px 7px; border-radius:999px; }
.tk-card-time { margin-left:auto; font-size:11px; color:var(--muted,#9ca3af); }
.tk-card-text { font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.tk-reply { border-top:1px solid var(--border,#e5e7eb); padding:12px 14px; background:var(--card,#fff); }
.tk-reply-text { width:100%; box-sizing:border-box; border:1px solid var(--border,#d2d2d7); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; min-height:60px; }
.tk-reply-text:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.tk-reply-bar { display:flex; align-items:center; gap:12px; margin-top:8px; }
.tk-attach { cursor:pointer; font-size:13px; font-weight:600; color:#6366f1; }
.tk-attach-name { font-size:12px; color:var(--muted,#9ca3af); }
.tk-send { margin-left:auto; }

/* Tickets — overview stat cards + extras */
.tk-stats { display:flex; gap:10px; padding:14px; flex-wrap:wrap; border-bottom:1px solid var(--border,#e5e7eb); background:var(--bg2,#f7f7fa); }
.tk-stat { flex:1; min-width:96px; background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all .12s; }
.tk-stat:hover { border-color:#6366f1; }
.tk-stat.active { border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.25) inset; }
.tk-stat-n { font-size:22px; font-weight:800; line-height:1; }
.tk-stat-l { font-size:11px; color:var(--muted,#6b7280); margin-top:4px; text-transform:uppercase; letter-spacing:.03em; }
.tk-stat.s-open  .tk-stat-n { color:#1d4ed8; }
.tk-stat.s-prog  .tk-stat-n { color:#b45309; }
.tk-stat.s-res   .tk-stat-n { color:#047857; }
.tk-stat.s-closed .tk-stat-n { color:#6b7280; }
.tk-stat-time { cursor:default; }
.tk-stat-time:hover { border-color:var(--border,#e5e7eb); }
.tk-stat-time .tk-stat-n { font-size:16px; color:#6d28d9; }
.tk-reopen-tag { font-size:10px; font-weight:700; color:#b45309; background:#fef3c7; padding:1px 7px; border-radius:999px; }
.tk-resolved-in { font-size:12px; color:#047857; font-weight:600; }
.tk-reopen { color:#b45309; }
input.tk-filter { padding:6px 8px; }

/* Login As panel */
.la-company { border:1px solid var(--border,#e5e7eb); border-radius:10px; margin-bottom:8px; overflow:hidden; background:var(--card,#fff); }
.la-company-head { display:flex; align-items:center; gap:10px; padding:11px 14px; }
.la-company-name { font-weight:700; font-size:15px; cursor:pointer; flex:1; }
.la-company-name:hover { color:#6366f1; }
.la-company-head .btn { margin-left:auto; }
.la-agents { display:none; border-top:1px solid var(--border,#f0f0f3); background:var(--bg2,#f9f9fb); }
.la-company.open .la-agents { display:block; }
.la-agent { display:flex; align-items:center; gap:10px; padding:9px 14px 9px 28px; border-bottom:1px solid var(--border,#f0f0f3); }
.la-agent:last-child { border-bottom:none; }
.la-agent-name { flex:1; font-size:14px; }
.la-agent .btn { margin-left:auto; }
.la-noagents { padding:10px 28px; font-size:13px; }
.la-inactive { font-size:10px; font-weight:700; color:#b91c1c; background:#fee2e2; padding:1px 6px; border-radius:999px; margin-left:6px; }

/* Live mic monitor — RTM button + floating widget */
.rtm-action-mic { }
.mic-rx-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 9000;
  display: flex; align-items: center; gap: 12px;
  background: #111827; color: #fff; padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4); min-width: 240px;
}
.mic-rx-dot { width: 12px; height: 12px; border-radius: 50%; background: #ef4444; animation: micPulse 1.2s infinite; }
@keyframes micPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.mic-rx-body { flex: 1; }
.mic-rx-name { font-weight: 700; font-size: 14px; }
.mic-rx-status { font-size: 12px; opacity: .8; }
.mic-rx-stop { background: #ef4444; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
.mic-rx-stop:hover { background: #dc2626; }

/* RTM agent "Spy" (live mic listen) button — classy labeled pill */
.rtm-action-mic {
  display: inline-flex; align-items: center; gap: 5px;
  width: auto !important; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; cursor: pointer;
  transition: all .12s;
}
.rtm-action-mic:hover { background: #cffafe; border-color: #22d3ee; color: #155e75; }

/* RTM "time in status" timer chip */
.rtm-agent-statusline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rtm-since { font-size: 11px; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* Icon-less nav/sub-tabs: collapse the (now-empty) emoji holders */
.nav-tab .ni:empty, .nav-separator .ni:empty { display: none !important; }
.subtab .st-i:empty { display: none; }

/* ── WhatsApp module — WhatsApp-Web look ──────────────────────────────────── */
.wa-chats-wrap{display:flex;height:calc(100dvh - 240px);min-height:480px;border:1px solid #d1d7db;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);background:#fff}
.wa-side{flex:0 0 350px;display:flex;flex-direction:column;background:#fff;border-right:1px solid #e9edef}
.wa-side-hd{padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:#f0f2f5;border-bottom:1px solid #e9edef}
.wa-side-hd .inp{background:#fff;border:1px solid #d3d9de;border-radius:10px;padding:10px 13px;font-size:14px;height:auto;line-height:1.35;transition:border-color .15s,box-shadow .15s}
.wa-side-hd .inp::placeholder{color:#8a9aa5}
.wa-side-hd .inp:focus{border-color:#25d366;outline:none;box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.wa-list{flex:1;overflow-y:auto;background:#fff}
.wa-li{display:flex;gap:13px;align-items:center;padding:10px 14px;cursor:pointer;border-bottom:1px solid #f3f4f6}
.wa-li:hover{background:#f5f6f6}
.wa-li.active{background:#f0f2f5}
.wa-av{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;color:#fff;text-transform:uppercase;letter-spacing:.5px}
.wa-li-main{flex:1;min-width:0}
.wa-li-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.wa-li-name{font-weight:500;font-size:15.5px;color:#111b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-li-time{font-size:11px;color:#667781;flex:0 0 auto}
.wa-li-sub{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:3px}
.wa-li-msg{font-size:13px;color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.wa-li-agent{font-size:10.5px;color:#008069;margin-top:2px;font-weight:500}
.wa-cbadge{background:#25d366;color:#fff;border-radius:11px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 6px;font-weight:600;flex:0 0 auto}
.wa-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.wa-chip{display:inline-block;color:#fff;font-size:10.5px;font-weight:600;line-height:1.4;padding:1px 8px;border-radius:10px;white-space:nowrap;letter-spacing:.2px}
.wa-sw{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent;box-sizing:border-box}
.wa-sw.sel{border-color:#111;box-shadow:0 0 0 2px #fff inset}
.wa-av-grp{font-size:18px;color:#fff}
.wa-sender{font-size:12px;font-weight:700;margin-bottom:2px;line-height:1.2}
.wa-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#efeae2}
.wa-main-hd{display:flex;align-items:center;gap:12px;padding:7px 16px;background:#f0f2f5;border-bottom:1px solid #d1d7db;min-height:59px;box-sizing:border-box}
.wa-main-hd .wa-av{flex:0 0 40px;width:40px;height:40px;font-size:15px}
.wa-hd-name{font-weight:500;font-size:16px;color:#111b21;line-height:1.2}
.wa-hd-sub{font-size:12px;color:#667781;margin-top:1px}
.wa-msgs{flex:1;overflow-y:auto;padding:14px 7%;
  background-color:#efeae2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23d8cdbf' stroke-width='1.1' opacity='.45'%3E%3Ccircle cx='18' cy='20' r='5'/%3E%3Cpath d='M48 10 l9 9 M70 30 q7 7 0 14 M30 55 l10 0 M58 60 q8 0 8 8 M12 70 l8 -8'/%3E%3C/g%3E%3C/svg%3E")}
.wa-row{display:flex;margin:3px 0}
.wa-row.out{justify-content:flex-end}
.wa-bubble{position:relative;max-width:66%;padding:6px 9px 8px;border-radius:8px;font-size:14.2px;line-height:1.34;box-shadow:0 1px .5px rgba(11,20,26,.13);color:#111b21;word-break:break-word}
.wa-bubble.in{background:#fff;border-top-left-radius:0}
.wa-bubble.out{background:#d9fdd3;border-top-right-radius:0}
.wa-bubble.in::after{content:"";position:absolute;top:0;left:-8px;width:0;height:0;border:7px solid transparent;border-top-color:#fff;border-right-width:0}
.wa-bubble.out::after{content:"";position:absolute;top:0;right:-8px;width:0;height:0;border:7px solid transparent;border-top-color:#d9fdd3;border-left-width:0}
.wa-bubble img,.wa-bubble video{border-radius:6px;display:block;max-width:260px}
.wa-meta{font-size:11px;color:#667781;float:right;margin:5px 0 -3px 12px;white-space:nowrap}
.wa-meta .rd{color:#53bdeb}
.wa-react{position:absolute;bottom:-10px;background:#fff;border-radius:11px;padding:1px 5px;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.22)}
.wa-act-btn{position:absolute;top:1px;cursor:pointer;color:#8696a0;opacity:0;font-size:16px;transition:opacity .12s}
.wa-row:hover .wa-act-btn{opacity:.85}
.wa-star{font-size:11px;margin-right:3px}
/* Quoted-reply block inside a bubble */
.wa-quote{border-left:3px solid #06cf9c;background:rgba(6,207,156,.10);border-radius:4px;padding:3px 7px;margin-bottom:4px;font-size:12.5px;line-height:1.3;max-width:100%;overflow:hidden}
.wa-quote-who{display:block;font-weight:600;color:#06967a;font-size:11.5px}
.wa-quote-txt{display:block;color:#3b4a54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Reply preview bar above the composer */
.wa-reply-bar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#f0f2f5;border-top:1px solid #e2e8f0}
.wa-reply-body{flex:1;min-width:0;border-left:3px solid #06cf9c;padding-left:8px}
.wa-reply-who{font-size:11.5px;font-weight:600;color:#06967a}
.wa-reply-txt{font-size:12.5px;color:#3b4a54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-reply-x{cursor:pointer;color:#8696a0;font-size:15px;padding:0 4px}
/* Quick-reply template popup + management rows */
.wa-tpl-item{padding:7px 9px;border-radius:6px;cursor:pointer}
.wa-tpl-item:hover{background:#f0f4ff}
.wa-tpl-t{font-size:13px;font-weight:600;color:#111b21}
.wa-tpl-sc{font-size:11px;color:#06967a;font-weight:500}
.wa-tpl-b{font-size:12px;color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-compose{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#f0f2f5}
.wa-compose .wa-icbtn{background:none;border:none;font-size:22px;cursor:pointer;color:#54656f;line-height:1;padding:0 2px}
.wa-compose .wa-inp{flex:1;border:none;border-radius:8px;padding:10px 14px;font-size:15px;background:#fff;outline:none;color:#111b21}
.wa-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;background:#00a884;color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wa-send:hover{background:#008f72}
.wa-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#667781;font-size:14px;gap:8px;text-align:center}
.wa-empty .ic{font-size:46px;opacity:.5}

/* ── WhatsApp Reports — polished pagination ───────────────────────────────── */
.wa-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 4px}
.wa-pg-info{font-size:12.5px;color:#667781;margin-right:auto}
.wa-pg-btn{min-width:34px;height:34px;padding:0 10px;border:1px solid #d1d7db;background:#fff;border-radius:8px;font-size:13px;color:#3b4a54;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.12s;font-weight:500}
.wa-pg-btn:hover:not(:disabled){background:#f0f2f5;border-color:#b9c2c8}
.wa-pg-btn:disabled{opacity:.4;cursor:not-allowed}
.wa-pg-num.active{background:#00a884;border-color:#00a884;color:#fff;font-weight:700}
.wa-pg-dots{padding:0 4px;color:#8696a0}
.wa-pg-size{margin-left:10px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#667781}
.wa-pg-size select{height:32px;border:1px solid #d1d7db;border-radius:8px;padding:0 6px;background:#fff;font-size:13px;cursor:pointer}

/* ── Accessibility: visible keyboard focus ring (was missing entirely) ───────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .ob-tab:focus-visible, .subtab:focus-visible {
  outline: 2px solid var(--primary, #0071e3);
  outline-offset: 2px;
}

/* Super-admin Downloads section */
.dl-list { display:flex; flex-direction:column; gap:12px; max-width:760px; }
.dl-card { display:flex; align-items:center; gap:16px; padding:16px 18px;
  border:1px solid var(--border, #e2e8f0); border-radius:12px; background:var(--card-bg, #fff); }
.dl-ic { width:48px; height:48px; border-radius:11px; display:grid; place-items:center;
  font-size:26px; background:rgba(56,189,248,.14); flex:0 0 auto; }
.dl-meta { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.dl-meta b { font-size:15px; }
.dl-meta span { font-size:13px; color:var(--muted, #64748b); }
.dl-sub { font-size:12px !important; opacity:.85; }
.dl-na { font-size:13px; }

/* View Agent details modal */
.ag-view { display:flex; flex-direction:column; }
.ag-view-row { display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--border,#eef2f7); }
.ag-view-label { flex:0 0 190px; font-size:12px; color:var(--muted,#64748b); font-weight:600; }
.ag-view-val { flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.ag-view-val code { background:var(--code-bg,#f1f5f9); padding:2px 8px; border-radius:6px; font-size:13px; }
.ag-view-sep { margin:14px 0 4px; font-size:12px; font-weight:700; color:var(--muted,#64748b); text-transform:uppercase; letter-spacing:.4px; }
.ag-view-sep small { text-transform:none; font-weight:500; opacity:.8; }

/* Tiny ⓘ help icon on report column headers (CDR + User Performance) */
.col-i {
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; margin-left:4px; border-radius:50%;
  background:var(--muted,#94a3b8); color:#fff;
  font-size:9px; font-weight:700; font-style:normal; line-height:1;
  vertical-align:middle; cursor:help; opacity:.65; user-select:none;
}
.col-i:hover { opacity:1; }

/* ── In-app confirm/alert dialog (uiConfirm / uiAlert) ───────────────────── */
.ui-dialog-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10050; padding: 20px;
  animation: uiDlgFade .12s ease;
}
@keyframes uiDlgFade { from { opacity: 0; } to { opacity: 1; } }
.ui-dialog {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: 100%; max-width: 420px; padding: 22px 22px 18px;
}
.ui-dialog-title {
  font-size: 15px; font-weight: 600; color: var(--ink, #1a202c);
  margin-bottom: 8px;
}
.ui-dialog-msg {
  font-size: 14px; line-height: 1.5; color: var(--ink-2, #4a5568);
  white-space: normal; word-break: break-word;
}
.ui-dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
}
@media (prefers-reduced-motion: reduce) { .ui-dialog-ov { animation: none; } }

/* ── Visible keyboard focus across interactive controls (a11y) ───────────── */
.btn:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.subtab:focus-visible,
.nav-tab:focus-visible {
  outline: 2px solid var(--primary, #0070f3);
  outline-offset: 2px;
}

/* ============================================================
   ACTIVITY LOG (super admin)
   ============================================================ */
.act-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 14px; margin-bottom: 14px;
  background: var(--card, #fff); border: 1px solid var(--border, #e4e7ec); border-radius: 12px;
}
.act-filters .field { margin: 0; min-width: 150px; }
.act-filters .field label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text2, #5b6472); }
.act-filters .act-f-grow { flex: 1 1 220px; }

.act-viewtabs { display: flex; gap: 6px; margin-bottom: 12px; }

.act-empty { padding: 40px; text-align: center; color: var(--text2, #5b6472);
  border: 1px dashed var(--border, #e4e7ec); border-radius: 12px; }

/* --- session cards --- */
.act-card { background: var(--card, #fff); border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.act-card-open { border-color: var(--primary, #3b82f6); box-shadow: 0 6px 20px -14px rgba(0,0,0,.45); }
.act-card-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; }
.act-card-head:hover { background: var(--hover, rgba(0,0,0,.02)); }
.act-card-head-static { cursor: default; }
.act-card-head-static:hover { background: transparent; }
.act-caret { width: 14px; color: var(--text2, #5b6472); }
.act-who { min-width: 190px; flex: 1 1 190px; }
.act-who-name { font-weight: 650; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.act-who-org { font-size: 12px; color: var(--text2, #5b6472); }
.act-col { min-width: 96px; font-size: 13px; }
.act-col-wide { min-width: 170px; }
.act-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2, #5b6472); margin-bottom: 2px; }

.act-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: var(--chip, #eef1f5); color: var(--text2, #5b6472); }
.act-badge-sa   { background: #ede9fe; color: #6d28d9; }
.act-badge-imp  { background: #fef3c7; color: #92400e; }
.act-badge-live { background: #dcfce7; color: #166534; }
.act-badge-out  { background: #eef1f5; color: #5b6472; }

.act-ok   { color: #16a34a; font-weight: 600; }
.act-fail { color: #dc2626; font-weight: 600; }

.act-geo { font-size: 12px; }
.act-geo-ok { color: var(--primary, #2563eb); text-decoration: none; }
.act-geo-ok:hover { text-decoration: underline; }
.act-geo-none { color: var(--text2, #8a93a2); }

/* --- timeline --- */
.act-card-body { border-top: 1px solid var(--border, #e4e7ec); }
.act-tl-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 16px;
  font-size: 12px; color: var(--text2, #5b6472); background: var(--hover, rgba(0,0,0,.02)); }
.act-tl-meta code { font-size: 11px; }

.act-tl { list-style: none; margin: 0; padding: 12px 16px 16px; position: relative; }
.act-tl::before { content: ''; position: absolute; left: 92px; top: 16px; bottom: 16px;
  width: 2px; background: var(--border, #e4e7ec); }
.act-tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; position: relative; }
.act-tl-time { width: 66px; flex: none; font-size: 11px; color: var(--text2, #5b6472);
  text-align: right; padding-top: 3px; font-variant-numeric: tabular-nums; }
.act-tl-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: var(--card, #fff); border: 2px solid var(--border, #e4e7ec); }
.act-tl-text { font-size: 13px; padding-top: 2px; }
.act-tl-detail { display: block; font-size: 11px; color: var(--text2, #5b6472); margin-top: 1px; }
.act-tl-fail .act-tl-dot { border-color: #fca5a5; }
.act-tl-open .act-tl-text { color: var(--text2, #5b6472); font-style: italic; }

.act-table td, .act-table th { font-size: 13px; }
.act-row-fail td { background: rgba(220, 38, 38, .04); }
.act-pager { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 14px; }

@media (max-width: 900px) {
  .act-card-head { flex-wrap: wrap; }
  .act-tl::before { left: 92px; }
}

/* Activity Log — time range presets */
.act-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.act-ranges-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2, #5b6472); margin-right: 4px; }
.act-range { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; background: var(--card, #fff); color: var(--text2, #5b6472);
  border: 1px solid var(--border, #e4e7ec); }
.act-range:hover { border-color: var(--primary, #3b82f6); color: var(--primary, #2563eb); }
.act-range.active { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.act-badge-clip { background: #e0f2fe; color: #075985; }
.act-del { margin-left: auto; opacity: .5; }
.act-card-head:hover .act-del { opacity: 1; }

/* Activity Log — delete scope picker */
.act-picklist { max-height: 50vh; overflow-y: auto; }
.act-pick { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; margin-bottom: 8px; }
.act-pick-name { font-weight: 600; }
.act-pick-sub { font-size: 12px; color: var(--text2, #5b6472); }

/* ============================================================
   SELF-SERVICE SIGNUP
   ============================================================ */
.signup-card { max-width: 760px; width: 100%; }
.login-alt { text-align: center; font-size: 13px; color: var(--text2, #5b6472); margin: 12px 0 0; }
.login-alt a { color: var(--primary, #2563eb); text-decoration: none; font-weight: 600; }
.login-alt a:hover { text-decoration: underline; }
.req { color: #dc2626; }

.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.su-grid .field { margin: 0; }
.su-grid .hint,
.su-modules .hint { font-size: 11.5px; color: var(--text2, #5b6472); margin-top: 3px; line-height: 1.35; }

.su-modules { margin-top: 18px; border: 1px solid var(--border, #e4e7ec); border-radius: 12px; overflow: hidden; }
.su-modules-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--hover, rgba(0,0,0,.02)); border-bottom: 1px solid var(--border, #e4e7ec); }
.su-count { flex: none; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--primary, #2563eb); color: #fff; }

.su-group { padding: 10px 14px; border-bottom: 1px solid var(--border, #e4e7ec); }
.su-group:last-child { border-bottom: 0; }
.su-group-hd { margin-bottom: 8px; }
.su-group-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2, #5b6472); }

.su-mod { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.su-mod:hover { background: var(--hover, rgba(0,0,0,.03)); }
.su-mod input { margin-top: 3px; flex: none; }
.su-mod-name { display: block; font-size: 13.5px; font-weight: 600; }
.su-mod-desc { display: block; font-size: 12px; color: var(--text2, #5b6472); margin-top: 1px; }
.su-rec { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #166534; background: #dcfce7; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }

.su-note { margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.badge.signup { background: #e0f2fe; color: #075985; }

@media (max-width: 640px) { .su-grid { grid-template-columns: 1fr; } }

/* Signup — inline field validation */
.fld-err { font-size: 11.5px; color: #dc2626; margin-top: 3px; min-height: 14px; line-height: 1.3; }
input.input-bad { border-color: #dc2626 !important; }
input.input-bad:focus { outline-color: #dc2626; }
.fld-ok { font-size: 11.5px; color: #16a34a; margin-top: 3px; min-height: 14px; line-height: 1.3; font-weight: 600; }

/* Signup — form-level banner + invalid-field feedback */
.form-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 4px 0 2px;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.form-banner::before { content: '⚠'; font-size: 15px; line-height: 1; }
.form-banner.hidden { display: none; }

@keyframes fieldShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
input.shake { animation: fieldShake .32s ease-in-out; }

/* Softer, more legible than a bare red line of text */
.fld-err { display: block; font-size: 11.5px; color: #dc2626; margin-top: 4px; min-height: 15px;
  line-height: 1.35; font-weight: 500; }
input.input-bad { border-color: #f87171 !important; background: #fff5f5; }
input.input-bad:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.fld-ok { display: block; font-size: 11.5px; color: #16a34a; margin-top: 4px; min-height: 15px;
  line-height: 1.35; font-weight: 600; }

/* Super admin — Onboarding settings */
.onb-card { background: var(--card, #fff); border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px; padding: 16px 18px; }
.onb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.onb-title { font-size: 14.5px; font-weight: 650; margin-bottom: 2px; }
#onb-modules .su-group:last-child { border-bottom: 0; }

/* Signup closed state */
.su-closed { text-align: center; padding: 12px 4px 4px; }
.su-closed-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.su-closed-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.su-closed-text { font-size: 13.5px; color: var(--text2, #5b6472); line-height: 1.55;
  margin: 0 auto 18px; max-width: 380px; }

/* ============================================================
   PROFILE PAGE (company) — sectioned cards
   ============================================================ */
.pf-section {
  background: var(--card, #fff); border: 1px solid var(--border, #e4e7ec);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.pf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border, #eef0f3); }
.pf-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pf-count { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--primary, #2563eb); color: #fff; }
.pf-count-muted { background: var(--chip, #eef1f5); color: var(--text2, #5b6472); }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.pf-grid .field { margin: 0; }
.pf-grid input[disabled] { background: var(--bg-2, #f8fafc); color: var(--text2, #475569); cursor: default; }

.pf-badges { display: flex; flex-wrap: wrap; gap: 7px; }

.mk-wallet { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

@media (max-width: 720px) { .pf-grid { grid-template-columns: 1fr; } }

/* Profile → two-level sub navigation.
   The shared .subtab-bar is a flex ROW, so a container holding two levels has to
   switch to a column — otherwise the second level sits beside the first. */
.subtab-bar.subtab-stack { flex-direction: column; align-items: stretch; gap: 0; }
.subtab-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.subtab-l2 {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px; padding: 8px 10px;
  background: var(--bg-2, #f8fafc); border: 1px solid var(--border, #e4e7ec); border-radius: 10px;
}
.subtab-l2 .subtab { font-size: 12.5px; padding: 5px 11px; }
.subtab-l2 .subtab.active { background: var(--primary, #2563eb); color: #fff; }

/* Profile → Numbers marketplace */
.mk-from { font-size: 12px; color: var(--text2, #5b6472); margin-left: auto; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.mk-card {
  border: 1px solid var(--border, #e4e7ec); border-radius: 12px; padding: 14px;
  background: var(--card, #fff); display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mk-card:hover { border-color: var(--primary, #3b82f6); box-shadow: 0 8px 20px -14px rgba(16,24,40,.45); transform: translateY(-1px); }
.mk-card-dim { opacity: .72; }
.mk-card-dim:hover { transform: none; box-shadow: none; border-color: var(--border, #e4e7ec); }
.mk-num { font-size: 17px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.mk-desc { font-size: 12px; color: var(--text2, #5b6472); line-height: 1.4;
  min-height: 32px; display: flex; align-items: flex-start; }
.mk-price-row { display: flex; align-items: baseline; gap: 6px; }
.mk-price { font-size: 18px; font-weight: 800; color: #047857; }
.mk-once { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2, #8a93a2); }
.mk-buy { margin-top: 2px; }

.mk-empty { text-align: center; padding: 28px 12px; }
.mk-empty-icon { font-size: 34px; margin-bottom: 8px; }
.mk-empty-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.mk-empty-text { font-size: 13px; color: var(--text2, #5b6472); }

/* ============================================================
   FILTER TOOLBAR + BULK ACTION BAR
   Bare .inp controls sitting on the page background read as unstyled; grouping
   them into a card gives the filters an edge and a surface.
   ============================================================ */
.filter-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--card, #fff); border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px;
  /* One row. Every control is allowed to shrink (min-width:0 defeats the implicit
     min-content floor on inputs/selects), so four filters plus the button share
     the width instead of spilling onto separate lines. */
  flex-wrap: nowrap;
}
.filter-bar .inp {
  /* height:auto + padding, NOT a fixed pixel height. Forcing 36px fought the
     base padding these controls already carry and clipped the text inside. */
  height: auto;
  padding: 10px 12px;
  line-height: 1.4;
  border-radius: 9px;
  font-size: 13.5px;
  box-sizing: border-box;
  min-width: 0; flex: 1 1 120px;
}
/* Native selects need room for their arrow, or the last character sits under it. */
.filter-bar select.inp { padding-right: 28px; }
.filter-bar .btn { flex: 0 0 auto; }

/* Search must never shrink below readability — that is what made the marketplace
   box so narrow that typed text was invisible. The SELECTS absorb the squeeze
   instead (they keep min-width:0), so the row still fits on one line. */
.search-field { position: relative; flex: 1.6 1 220px; min-width: 190px; }
.search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; opacity: .55; pointer-events: none;
}
.search-inp { width: 100%; padding-left: 34px !important; }
.search-inp:focus { border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }

@media (max-width: 860px) {
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .inp { flex: 1 1 150px; }
}

.bulk-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin-bottom: 12px; border-radius: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe;
}
.bulk-bar.hidden { display: none; }
.bulk-count { font-size: 13px; color: #1e40af; margin-right: auto; }
.bulk-count strong { font-size: 14px; }

#tbody-dids .did-cb, #did-check-all { width: 15px; height: 15px; cursor: pointer; }

/* Marketplace — view toggle, per-page, list rows */
/* Marketplace toolbar holds only search + the view toggle, so search takes the
   rest of the row; rows-per-page and the counts live in the shared pager. */
.mk-toolbar .search-field { flex: 1 1 auto; max-width: none; }

.mk-viewtog { display: inline-flex; border: 1px solid var(--border, #e4e7ec); border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.mk-vbtn { padding: 9px 12px; font-size: 12.5px; font-weight: 600; border: none; cursor: pointer;
  background: var(--card, #fff); color: var(--text2, #5b6472); }
.mk-vbtn + .mk-vbtn { border-left: 1px solid var(--border, #e4e7ec); }
.mk-vbtn.active { background: var(--primary, #2563eb); color: #fff; }
.filter-bar .mk-per { flex: 0 0 auto; min-width: 108px; }

.mk-table td, .mk-table th { vertical-align: middle; }
.mk-num-sm { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.mk-price-sm { font-weight: 700; color: #047857; }
.mk-row-sel { background: #eff6ff; }
.mk-table input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }

.mk-card-sel { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.mk-pick { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text2, #5b6472);
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.mk-pick input { width: 14px; height: 14px; cursor: pointer; }

/* DID release dialog */
.rel-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border, #e4e7ec); border-radius: 10px; cursor: pointer; margin-bottom: 8px; }
.rel-opt:hover { border-color: var(--primary, #3b82f6); background: var(--hover, rgba(0,0,0,.02)); }
.rel-opt input { margin-top: 3px; flex: none; }
.rel-opt span { display: flex; flex-direction: column; gap: 2px; }
.rel-opt small { color: var(--text2, #5b6472); font-size: 12px; line-height: 1.4; }
.btn-sm.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.mk-trunc { font-size: 12.5px; padding: 8px 12px; margin-bottom: 10px; border-radius: 9px;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Unified table search bar */
.ts-bar { margin-bottom: 12px; }
.ts-count { font-size: 12px; color: var(--text2, #5b6472); white-space: nowrap; flex: 0 0 auto; }

/* Custom STT — "try it on a recording" */
.stt-try { margin-top: 18px; padding: 14px 16px; border-radius: 10px;
  background: var(--surface-2, #f8fafc); border: 1px solid var(--border); }
.stt-try-busy { margin-top: 10px; font-size: 13px; color: var(--text2, #5b6472); }
.stt-try-res { margin-top: 12px; }
.stt-try-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px;
  color: var(--text2, #5b6472); margin-bottom: 8px; }
.stt-try-note { font-size: 12px; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.stt-try-text { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 9px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  max-height: 320px; overflow-y: auto; }
.stt-try-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Custom STT — live service/model banner */
.cstt-live { font-size: 12px; margin-top: 6px; padding: 7px 10px; border-radius: 8px; line-height: 1.45; }
.cstt-live-ok   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.cstt-live-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Upload progress */
.up-prog { padding: 10px 2px; }
.up-prog-label { font-size: 12.5px; color: var(--text2, #5b6472); margin-bottom: 6px; }
.up-prog-bar { height: 7px; border-radius: 999px; background: var(--border, #e4e7ec); overflow: hidden; }
.up-prog-fill { height: 100%; background: var(--primary, #2563eb); border-radius: 999px;
  transition: width .18s ease-out; }

/* ── Dashboard: live floor command center ─────────────────────────────────── */
.floor-clock{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:14px;font-weight:600;letter-spacing:.5px;color:var(--muted,#64748b);font-variant-numeric:tabular-nums}
.floor{margin:4px 0 18px}
.floor-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media(max-width:1100px){.floor-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.floor-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gauge{position:relative;background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:14px 14px 12px;overflow:hidden}
.gauge::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--g-accent,#94a3b8);opacity:.85}
.gauge .g-n{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:30px;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
.gauge .g-of{font-size:15px;font-weight:600;color:var(--muted,#94a3b8);letter-spacing:0}
.gauge .g-l{margin-top:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted,#64748b);display:flex;flex-direction:column;gap:1px}
.gauge .g-sub{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted,#94a3b8)}
.gauge.g-ready{--g-accent:#10b981}.gauge.g-ready .g-n{color:#059669}
.gauge.g-oncall{--g-accent:#3b82f6}.gauge.g-oncall .g-n{color:#2563eb}
.gauge.g-wrap{--g-accent:#f59e0b}.gauge.g-wrap .g-n{color:#d97706}
.gauge.g-break{--g-accent:#f97316}.gauge.g-break .g-n{color:#ea580c}
.gauge.g-queue{--g-accent:#f59e0b}
.gauge.g-live{--g-accent:#64748b}
.gauge.g-live.hot{--g-accent:#3b82f6}.gauge.g-live.hot .g-n{color:#2563eb}
.gauge.g-live.hot::before,.gauge.g-queue.hot::before{animation:floorPulse 1.6s ease-in-out infinite}
.gauge.g-ans{--g-accent:#8b5cf6}.gauge.g-talk{--g-accent:#0ea5e9}
@keyframes floorPulse{0%,100%{opacity:.35}50%{opacity:1}}

.floor-board{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;overflow:hidden}
.floor-board-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border,#e2e8f0)}
.floor-board-head h3{margin:0;font-size:15px;font-weight:700;color:var(--text,#0f172a);display:flex;align-items:baseline;gap:10px}
.fb-count{font-size:12px;font-weight:600;color:var(--muted,#64748b)}
.floor-board-scroll{overflow-x:auto}
.floor-tbl{width:100%;border-collapse:collapse;font-size:13px}
.floor-tbl thead th{text-align:left;padding:9px 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted,#94a3b8);border-bottom:1px solid var(--border,#eef2f7);white-space:nowrap;background:var(--bg2,#f8fafc)}
.floor-tbl td{padding:10px 14px;border-bottom:1px solid var(--border-light,#f1f5f9);vertical-align:middle;white-space:nowrap}
.floor-tbl tbody tr:last-child td{border-bottom:none}
.floor-tbl tbody tr.fb-out{opacity:.5}
.floor-tbl .fb-num{text-align:right;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-variant-numeric:tabular-nums}
.floor-tbl .dim{color:var(--muted,#94a3b8)}
.fb-agent{display:flex;flex-direction:column;gap:1px}
.fb-name{font-weight:600;color:var(--text,#0f172a)}
.fb-ext{font-size:11px;color:var(--muted,#94a3b8);font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace)}
.fb-lamp{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:#cbd5e1;vertical-align:middle;box-shadow:0 0 0 3px transparent}
.fb-lamp.ready{background:#10b981}.fb-lamp.idle{background:#94a3b8}
.fb-lamp.oncall{background:#3b82f6;animation:lampPulse 1.4s ease-in-out infinite}
.fb-lamp.dialing{background:#f59e0b;animation:lampPulse 1s ease-in-out infinite}
.fb-lamp.wrap{background:#f59e0b}.fb-lamp.break{background:#f97316}.fb-lamp.manual{background:#6366f1}.fb-lamp.out{background:#cbd5e1}
@keyframes lampPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 4px rgba(59,130,246,0)}}
.fb-state{font-weight:600;color:var(--text,#334155)}
.floor-timer{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:12px;font-weight:600;color:var(--text,#0f172a);font-variant-numeric:tabular-nums;margin-left:4px}
.floor-timer.dim{color:var(--muted,#94a3b8);font-weight:500}
.floor-timer.wrap-cd{color:#d97706}
.fb-login{white-space:nowrap}
.l-dot{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;margin-right:4px;background:var(--bg2,#f1f5f9);color:var(--muted,#94a3b8);border:1px solid var(--border,#e2e8f0)}
.l-dot.on{background:#10b98122;color:#059669;border-color:#10b98155}
.fb-livecall code{font-size:12px}
.fb-empty{text-align:center;color:var(--muted,#94a3b8);padding:26px!important}
@media(prefers-reduced-motion:reduce){.gauge::before,.fb-lamp{animation:none!important}}

/* Dashboard: separate the static account grid from the live floor gauges */
.floor-acct-head{margin:30px 0 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted,#94a3b8);padding-top:18px;border-top:1px solid var(--border,#e9edf2)}
#company-tab-home .stat-grid{margin-top:0}

/* Dashboard: today's-calls summary (KPIs + charts) */
.floor-summary{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:15px 18px;margin-top:16px}
.fs-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.fs-head h3{margin:0;font-size:15px;font-weight:700;color:var(--text,#0f172a)}
.fs-sub{font-size:12px;color:var(--muted,#64748b);font-weight:600}
.fs-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
@media(max-width:900px){.fs-kpis{grid-template-columns:repeat(3,1fr)}}
.fs-kpi{padding:11px 13px;border-radius:11px;background:var(--bg2,#f8fafc);border:1px solid var(--border-light,#eef2f7)}
.fs-kpi .fs-v{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:23px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fs-kpi .fs-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted,#64748b);margin-top:6px}
.fs-charts{display:grid;grid-template-columns:1.9fr 1fr;gap:24px;align-items:center}
@media(max-width:620px){.fs-charts{grid-template-columns:1fr}}
.fs-chart-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#94a3b8);margin-bottom:10px}

/* Call-mix stacked bars */
.fs-stack{display:flex;flex-direction:column;gap:12px}
.fs-srow{display:flex;align-items:center;gap:12px}
.fs-srow-lbl{flex:0 0 66px;font-size:12px;font-weight:700;color:var(--text,#0f172a)}
.fs-srow-track{flex:1;display:flex;height:26px;border-radius:7px;overflow:hidden;background:var(--bg2,#f1f5f9)}
.fs-seg{height:100%;display:flex;align-items:center;justify-content:center;min-width:3px;transition:width .5s ease}
.fs-seg span{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.fs-seg-zero{flex:1;background:transparent}
.fs-srow-tot{flex:0 0 auto;min-width:26px;text-align:right;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:15px;font-weight:800;color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
.fs-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px}
.fs-leg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted,#64748b)}
.fs-leg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.fs-leg b{color:var(--text,#0f172a);font-weight:800;font-variant-numeric:tabular-nums}
.fs-leg-off{opacity:.45}

/* Call summary: date-range control */
.fs-head-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fs-range{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.fs-range-custom{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.fs-date{font-size:12px;font-weight:600;color:var(--text,#0f172a);background:var(--bg2,#f8fafc);border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:5px 8px;min-width:0}
.fs-range-dash{color:var(--muted,#94a3b8)}
.fs-range-hint{font-size:10.5px;font-weight:600;color:var(--muted,#94a3b8);white-space:nowrap}
/* On a wide dashboard the whole date-range control sits on one row; if the summary card
   is ever too narrow, it scrolls horizontally rather than stacking. */
@media(max-width:760px){.fs-range{overflow-x:auto;max-width:100%}}
.fs-track{display:flex;align-items:flex-end;gap:16px;height:120px;padding:0 8px}
.fs-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.fs-bar .fs-bn{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:13px;font-weight:700;margin-bottom:5px;color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
.fs-bar i{width:100%;max-width:52px;min-height:3px;border-radius:6px 6px 0 0;display:block;transition:height .5s ease}
.fs-blabels{display:flex;gap:16px;margin-top:8px;padding:0 8px}
.fs-blabels span{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--muted,#64748b)}
.fs-chart-donut{display:flex;flex-direction:column;align-items:center}
.fs-donut{width:150px;height:150px;max-width:100%}
.fs-donut-n{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:26px;font-weight:800;fill:var(--text,#0f172a)}
.fs-donut-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;fill:var(--muted,#94a3b8)}

/* Dashboard: top inbound DIDs */
.fs-dids{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border,#e2e8f0)}
.fs-did-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fs-did{display:flex;align-items:center;gap:12px}
.fs-did-n{flex:0 0 160px;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:12.5px;font-weight:700;color:var(--text,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-did-bar{flex:1;height:8px;background:var(--bg2,#f1f5f9);border-radius:5px;overflow:hidden}
.fs-did-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width .5s ease}
.fs-did-c{flex:0 0 auto;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:12px;font-weight:700;color:var(--text,#0f172a);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.fs-did-empty{font-size:12px;color:var(--muted,#94a3b8);padding:4px 0}
@media(max-width:620px){.fs-did-n{flex-basis:110px}}

/* Dashboard: agent-floor header actions + status filter */
.fb-head-actions{display:flex;align-items:center;gap:10px}
.fb-filter{appearance:auto;font-size:12px;font-weight:600;color:var(--text,#0f172a);background:var(--bg2,#f8fafc);border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:6px 10px;cursor:pointer}
.fb-filter:hover{border-color:var(--muted,#94a3b8)}

/* ── Agent Campaigns — card layout (rows rendered as full-width cards) ── */
.ob-card-table thead { display: none; }
.ob-card-table, .ob-card-table tbody { display: block; }
.ob-card-table .ob-cr { display: block; }
.ob-card-table .ob-cell { display: block; padding: 0 0 12px 0; border: none; }
.ob-card-table .ob-cr[data-nomatch] { display: none; }
.ob-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--muted, #94a3b8);
  border-radius: 12px;
  padding: 14px 16px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.ob-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.07); }
.ob-card.ob-st-active { border-left-color: #22c55e; }
.ob-card.ob-st-paused { border-left-color: #f59e0b; }
.ob-card.ob-st-draft  { border-left-color: #94a3b8; }
.ob-card.ob-st-completed { border-left-color: #3b82f6; }
.ob-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ob-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-name { font-size: 16px; font-weight: 700; color: var(--text, #0f172a); }
.ob-status-pill { text-transform: capitalize; }
.ob-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ob-card-actions .ob-del { color: #ef4444; }
.ob-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 12px; font-size: 12.5px; color: var(--muted, #64748b); align-items: center; }
.ob-tag { background: var(--bg2, #f1f5f9); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 11px; color: var(--text, #0f172a); }
.ob-prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.ob-prog { flex: 1; height: 8px; background: var(--bg2, #f1f5f9); border-radius: 5px; overflow: hidden; max-width: 420px; }
.ob-prog i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .5s ease; }
.ob-prog-lbl { font-size: 12px; font-weight: 600; color: var(--muted, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2, #f8fafc); border: 1px solid var(--border-light, #eef2f7); border-radius: 999px; padding: 3px 11px; font-size: 12px; color: var(--muted, #64748b); }
.ob-chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ob-chip b { color: var(--text, #0f172a); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ob-card-top { flex-direction: column; } .ob-card-actions { width: 100%; } }

/* ── Lead Statuses — grouped list ── */
.ls-group { margin-bottom: 20px; }
.ls-group-hd { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 9px; }
.ls-group-t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text, #0f172a); }
.ls-group-s { font-size: 12px; color: var(--muted, #94a3b8); }
.ls-group-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted, #94a3b8); background: var(--bg2, #f1f5f9); border-radius: 999px; padding: 1px 9px; }
.ls-list { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; background: var(--card, #fff); }
.ls-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border-light, #eef2f7); }
.ls-row:first-child { border-top: none; }
.ls-row:hover { background: var(--bg2, #f8fafc); }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ls-name { font-weight: 600; font-size: 14px; color: var(--text, #0f172a); min-width: 130px; }
.ls-key { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--muted, #64748b); background: var(--bg2, #f1f5f9); padding: 2px 8px; border-radius: 6px; }
.ls-count { margin-left: auto; font-size: 12px; color: var(--muted, #64748b); font-variant-numeric: tabular-nums; }
.ls-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; min-width: 118px; justify-content: flex-end; }
.ls-del { color: #ef4444; }
.ls-lock { font-size: 11px; color: var(--muted, #94a3b8); }
@media (max-width: 620px) { .ls-key { display: none; } .ls-name { min-width: 90px; } }

/* Leads table: status pill (works for system + custom statuses) */
.lm-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; text-transform: none; letter-spacing: 0; }

/* ── Dashboard: act-now + analytics cards ── */
.dash-row{display:grid;gap:16px;margin-top:16px}
.dash-row-2{grid-template-columns:1fr 1fr}
.dash-grid{display:grid;gap:16px;margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media(max-width:760px){.dash-row-2{grid-template-columns:1fr}}
.dash-card{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:14px 16px}
.dash-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.dash-card-t{font-size:13px;font-weight:800;color:var(--text,#0f172a)}
.dash-sub{font-size:11px;color:var(--muted,#94a3b8)}
.dash-badge{font-size:11px;font-weight:800;color:var(--muted,#64748b);background:var(--bg2,#f1f5f9);border-radius:999px;padding:2px 10px}
.dash-badge.hot{color:#fff;background:#ef4444}
.dash-empty{font-size:12px;color:var(--muted,#94a3b8);padding:6px 0}
.dash-cb-list{display:flex;flex-direction:column;gap:2px}
.dash-cb-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer}
.dash-cb-row:hover{background:var(--bg2,#f8fafc)}
.dash-cb-row code{font-size:12px;font-weight:700;color:var(--text,#0f172a)}
.dash-cb-name{font-size:12px;color:var(--muted,#64748b);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-cb-when{font-size:11px;color:var(--muted,#94a3b8);white-space:nowrap}
.dash-cb-more{font-size:11px;color:#6366f1;padding:6px 8px;font-weight:600}
.dash-qh{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dash-qh-cell{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--bg2,#f8fafc);border:1px solid var(--border-light,#eef2f7);border-radius:10px}
.dash-qh-cell b{font-size:18px;font-weight:800;color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
.dash-qh-cell span{font-size:10.5px;color:var(--muted,#94a3b8);font-weight:600}
.dash-camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.dash-camp{border:1px solid var(--border-light,#eef2f7);border-radius:10px;padding:10px 12px}
.dash-camp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dash-camp-name{font-weight:700;font-size:13px;color:var(--text,#0f172a)}
.dash-camp-prog{height:7px;background:var(--bg2,#f1f5f9);border-radius:5px;overflow:hidden;margin-bottom:6px}
.dash-camp-prog i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:5px}
.dash-camp-meta{font-size:11px;color:var(--muted,#64748b)}
.dash-hours{display:flex;align-items:flex-end;gap:3px;height:90px}
.dash-hour{flex:1;height:100%;display:flex;align-items:flex-end}
.dash-hour i{width:100%;min-height:2px;border-radius:3px 3px 0 0;display:block;transition:height .4s}
.dash-hours-x{display:flex;justify-content:space-between;font-size:10px;color:var(--muted,#94a3b8);margin-top:4px}
.dash-disp{display:flex;flex-direction:column;gap:7px}
.dash-disp-row{display:flex;align-items:center;gap:10px}
.dash-disp-l{flex:0 0 110px;font-size:12px;color:var(--text,#0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dash-disp-bar{flex:1;height:8px;background:var(--bg2,#f1f5f9);border-radius:5px;overflow:hidden}
.dash-disp-bar i{display:block;height:100%;border-radius:5px}
.dash-disp-c{flex:0 0 auto;font-size:11px;color:var(--muted,#64748b);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.dash-lb{display:flex;flex-direction:column;gap:4px}
.dash-lb-row{display:flex;align-items:center;gap:10px;padding:6px 4px}
.dash-lb-rank{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--bg2,#f1f5f9);color:var(--muted,#64748b);flex:0 0 auto}
.dash-lb-rank.r1{background:#fde68a;color:#92400e}.dash-lb-rank.r2{background:#e5e7eb;color:#374151}.dash-lb-rank.r3{background:#fed7aa;color:#9a3412}
.dash-lb-name{flex:1;font-size:13px;font-weight:600;color:var(--text,#0f172a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-lb-hits{font-size:12px;font-weight:700;color:var(--text,#0f172a)}
.dash-lb-talk{font-size:11px;color:var(--muted,#94a3b8);min-width:44px;text-align:right}
.fs-delta{font-size:10.5px;font-weight:800;margin-top:2px}

/* ---- Field info tooltips (ⓘ) — clean hint bubble on labels ------------------ */
.info-i{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-left:5px; vertical-align:middle;
  border-radius:50%; font-size:9.5px; font-weight:700; font-style:normal;
  line-height:1; font-family:Georgia,'Times New Roman',serif;
  color:var(--muted,#7a8699); background:transparent;
  border:1.4px solid currentColor; cursor:pointer; position:relative;
  user-select:none; flex:0 0 auto; -webkit-tap-highlight-color:transparent;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.info-i:hover, .info-i.tip-open{ color:var(--primary,#6d5efc); }
.info-i:focus-visible{ outline:2px solid var(--primary,#6d5efc); outline-offset:2px; }
.info-i::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(3px);
  width:250px; max-width:64vw; padding:9px 11px;
  background:#1f2733; color:#f3f5f8;
  font-family:inherit; font-size:12px; font-weight:400; font-style:normal;
  line-height:1.5; letter-spacing:normal; text-align:left; white-space:normal;
  border-radius:9px; box-shadow:0 8px 26px rgba(15,23,42,.28); z-index:10000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.info-i::before{
  content:''; position:absolute; bottom:calc(100% + 3px); left:50%;
  transform:translateX(-50%); border:6px solid transparent; border-top-color:#1f2733;
  z-index:10001; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease;
}
.info-i:hover::after, .info-i.tip-open::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.info-i:hover::before, .info-i.tip-open::before{ opacity:1; visibility:visible; }

/* Animated Qallixo logo — the Q's three bars pulse like a live voice equalizer */
.login-logo svg g rect,
.login-icon svg g rect,
.kg-brand svg g rect,
.topbar-brand svg g rect,
.topbar-left .brand svg g rect{
  transform-box:fill-box; transform-origin:center center;
  animation:qeq 1.15s ease-in-out infinite;
}
.login-logo svg g rect:nth-child(1),.login-icon svg g rect:nth-child(1),.kg-brand svg g rect:nth-child(1),.topbar-brand svg g rect:nth-child(1),.topbar-left .brand svg g rect:nth-child(1){animation-delay:0s}
.login-logo svg g rect:nth-child(2),.login-icon svg g rect:nth-child(2),.kg-brand svg g rect:nth-child(2),.topbar-brand svg g rect:nth-child(2),.topbar-left .brand svg g rect:nth-child(2){animation-delay:.16s}
.login-logo svg g rect:nth-child(3),.login-icon svg g rect:nth-child(3),.kg-brand svg g rect:nth-child(3),.topbar-brand svg g rect:nth-child(3),.topbar-left .brand svg g rect:nth-child(3){animation-delay:.32s}
@keyframes qeq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.login-logo svg g rect,.login-icon svg g rect,.kg-brand svg g rect,.topbar-brand svg g rect,.topbar-left .brand svg g rect{animation:none}}