/* ============================================================================
   Phone portal — THE single shared stylesheet (source of truth for the look).
   Self-contained: NEVER references WMS static paths, ZERO external deps beyond
   the Lato webfont loaded in the shell. Every color is a CSS variable (design
   token) defined in :root below — no scattered hardcoded hex in the markup.
   Loaded by _shell.html (every portal page) and by login.html (standalone).
   ============================================================================ */

:root {
    /* ----- page-accent tokens (so templates stop hardcoding hex) ----- */
    --nx-node-menu: #8430ce;   /* call-flow "menu" node icon */
    --nx-node-vm:   #e8326e;   /* call-flow "voicemail" node icon */
    --nx-closed:    #ea4335;   /* "closed" status dot */
    --nx-login-panel: #f2f3f5; /* login form background */
    --nx-accent-green: #8bc34a;/* login ribbon */
    /* ----- Material-derived tokens (kept from the original portal) ----- */
    --md-primary: #1a73e8;
    --md-on-primary: #ffffff;
    --md-primary-hover: #1557b0;
    --md-primary-container: #d3e3fd;
    --md-primary-container-hover: #c0d6f7;
    --md-on-primary-container: #041e49;
    --md-secondary: #5f6368;
    --md-surface: #ffffff;
    --md-surface-dim: #f1f3f4;
    --md-surface-container: #f8f9fa;
    --md-surface-container-high: #e8eaed;
    --md-surface-container-highest: #dadce0;
    --md-on-surface: #1f1f1f;
    --md-on-surface-variant: #5f6368;
    --md-outline: #dadce0;
    --md-outline-variant: #e8eaed;
    --md-error: #dc3545;
    --md-error-hover: #c82333;
    --md-error-container: #fce8e6;
    --md-success: #188038;
    --md-success-hover: #137333;
    --md-success-container: #e6f4ea;
    --md-warning: #f9ab00;
    --md-warning-container: #fef7e0;
    --md-on-warning-container: #6e4d00;
    --nx-fav: #f5a623;   /* favorite/star gold (distinct from warning amber) */
    --md-shadow: rgba(0, 0, 0, 0.08);
    --md-radius-sm: 8px;
    --md-radius-md: 12px;
    --md-radius-lg: 16px;
    --md-radius-xl: 28px;
    --md-radius-2xl: 22px;   /* dialer/ring panel shell */

    /* ----- Nextiva chrome tokens (lifted out of comms.html's inline CSS) ----- */
    --nx-page: #ffffff;
    --nx-canvas: #f7f8fa;
    --nx-navy: #0f1d3a;
    --nx-navy-soft: #16264a;
    --nx-avatar: #e4e7ec;
    --nx-avatar-ink: #9aa0aa;
    --nx-pill-bg: #d3e3fd;
    --nx-pill-ink: #1a73e8;
    --nx-name: #9aa0aa;
    --nx-unsaved-bg: #5f6368;
    --nx-unsaved-ink: #ffffff;
    --nx-border: #e8eaed;
    --nx-icon: #5f6368;
    --nx-icon-dim: #9aa0aa;
    --nx-online: #34a853;
    --nx-info-bg: #e8f0fe;
    --nx-info-ink: #174ea6;
    --nx-format-bg: #dde9fb;
    --nx-row-hover: #f8f9fa;        /* shared table row hover */
    --nx-empty-ink: #6b9beb;        /* icon ink inside empty-state circles */
    /* inks that sit on the dark-navy surfaces (recordings player, login) —
       --md-secondary is unreadable on navy, so navy surfaces use these. */
    --nx-navy-dim: #c6cede;
    --nx-navy-muted: #9fb0d0;
    --nx-seek-fill: #3d8bfd;
    /* dialer "Aurora" gradient accents — the light-blue stop + the decline-red.
       Tokenized so the dialer gradients follow the theme instead of drifting. */
    --nx-dialer-accent: #4a90e8;
    --nx-decline: #ec4655;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* the portal is a light-themed product; declare it so a dark-OS browser doesn't
       render form controls / scrollbars in dark chrome over our light surfaces.
       (Full dark theme is a separate, unscoped decision — Dave 2026-06-28.) */
    color-scheme: light;
    background: var(--nx-page);
    font-family: 'Lato', 'Roboto', system-ui, sans-serif;
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Shared form controls — Nextiva styles every dropdown the same clean way (white,
   rounded, 1px border, custom blue caret). This is the BASE look for every native
   <select> across the portal; page-specific classes (e.g. comms.html .chip-select
   pill filters) load later and override where they need to. Without this, Setup /
   Roles / Audio fell back to the raw grey browser dropdown.
   ============================================================================ */
select {
    font-family: inherit;
    font-size: 13px;
    color: var(--md-on-surface);
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--md-outline);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    cursor: pointer;
    line-height: 1.25;
    background-color: var(--md-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%231a73e8'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
select:hover { background-color: var(--md-surface-container); }
select:focus {
    outline: none;
    border-color: var(--nx-pill-ink);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}
select:disabled { opacity: .55; cursor: default; }

/* ============================================================================
   MUI-style ripple — reproduces the Nextiva "feel". Global ripple is wired in
   phone.js (delegated click on any .ripple element).
   ============================================================================ */
.ripple { position: relative; overflow: hidden; }
.ripple > .rip {
    position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
    background: rgba(26, 115, 232, .28); animation: rip .55s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }

/* ============================================================================
   TOP BAR (shared chrome — rendered once by _shell.html)
   ============================================================================ */
.topbar {
    display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 56px;
    background: var(--md-surface); border-bottom: 1px solid var(--nx-border);
    position: relative; z-index: 60;
}
/* App-sections menu trigger — unique "descending bars" (a list of sections), NOT
   the Nextiva 9-dot waffle. A 40px tappable icon button matching the other top-bar
   controls; lights up in the dialer's Aurora gradient when its menu is open. */
.appgrid {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: var(--md-radius-md); color: var(--nx-icon);
    cursor: pointer; transition: background .15s, color .15s; padding: 0;
}
.appgrid svg { width: 22px; height: 22px; }
.appgrid:hover { background: var(--md-primary-container); color: var(--md-primary); }
.appgrid[aria-expanded="true"] { background: linear-gradient(135deg, var(--md-primary), var(--nx-dialer-accent)); color: #fff; }
.appgrid:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
.wordmark { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--md-primary); margin: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.top-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: none; cursor: pointer;
    color: var(--nx-icon); display: inline-flex; align-items: center; justify-content: center;
    position: relative; transition: background .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.top-icon-btn:hover { background: var(--md-surface-container-high); }
.top-icon-btn svg { width: 21px; height: 21px; }
.bell-badge {
    position: absolute; top: 6px; right: 7px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--md-error); color: #fff; font-size: 10px; font-weight: 700;
    line-height: 15px; text-align: center;
}
.bell-badge[hidden] { display: none; }
.avatar-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; position: relative;
    margin-left: 4px; background: var(--nx-online); color: #fff; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.avatar-btn .online {
    position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
    background: var(--nx-online); border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
}
.avatar-btn .online svg { width: 8px; height: 8px; color: #fff; }

/* phone status pill — only when phone is NOT ready (Nextiva shows none normally) */
.phone-status {
    font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; display: none;
    align-items: center; gap: 6px; background: var(--md-warning-container);
    color: var(--md-on-warning-container); margin-right: 4px;
}
.phone-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.phone-status.show { display: inline-flex; }
.phone-status.ready { display: none !important; }
.phone-status.error { background: var(--md-error-container); color: var(--md-error); }

/* dropdown menus anchored to topbar icons (app-grid, avatar, bell, +) */
.menu-pop {
    position: absolute; top: 50px; right: 0; min-width: 230px; background: var(--md-surface);
    border: 1px solid var(--nx-border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    padding: 8px; display: none; z-index: 70;
}
.menu-pop.open { display: block; }
.menu-pop a, .menu-pop button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px;
    border: none; background: none; font-family: inherit; font-size: 14px; color: var(--md-on-surface);
    border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--md-surface-container); }
/* keyboard focus must be visible on the menu items (the menu is the app's primary
   navigation) — was hover-only before (design critic 2026-06-28). */
.menu-pop a:focus-visible, .menu-pop button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--md-primary); background: var(--md-surface-container); }
.menu-pop .menu-head { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--md-secondary); }
.menu-pop .menu-div { border-top: 1px solid var(--nx-border); margin: 6px 0; }
.menu-pop.left { left: 0; right: auto; }

/* bell dropdown items — latest unread events (wired by phone.js on every page) */
.menu-pop a.bell-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    font-size: 13px; min-width: 0;
}
.bell-item .bi-num { font-weight: 700; white-space: nowrap; flex: none; }
.bell-item .bi-kind { color: var(--md-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-item .bi-time { color: var(--md-secondary); font-size: 12px; white-space: nowrap; flex: none; }
.bell-empty { padding: 9px 12px; font-size: 13px; color: var(--md-secondary); }
/* admin bell scope toggle (your missed ⇄ everyone's) — quiet full-width footer */
.menu-pop button.bell-scope { width: 100%; text-align: center; border: none; border-top: 1px solid var(--nx-border);
    background: none; color: var(--md-primary); font-size: 12px; font-weight: 700; padding: 9px 12px; cursor: pointer; }
.menu-pop button.bell-scope:hover { background: var(--md-surface-container); }

/* ============================================================================
   SHELL LAYOUT (topbar / sidebar / page main / right strip) — rendered by
   _shell.html. The center area is filled by each page's {% block center %}.
   ============================================================================ */
/* ---- "Viewing as" (impersonation) banner — slim warning-toned bar above the
   top bar, shown only while the super admin is impersonating. Uses the warning
   design tokens (clear but not garish). body.impersonating shrinks the shell +
   shifts the fixed side panel so the 34px bar never adds a scrollbar. ---- */
.imp-banner {
    display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px;
    background: var(--md-warning-container); color: var(--md-on-warning-container);
    border-bottom: 1px solid var(--md-warning); font-size: 13px; font-weight: 600;
    position: relative; z-index: 61;
}
.imp-banner-eye { display: inline-flex; }
.imp-banner-eye svg { width: 16px; height: 16px; }
.imp-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-banner-text strong { font-weight: 800; }
.imp-banner-exit {
    border: 1px solid var(--md-on-warning-container); background: transparent;
    color: var(--md-on-warning-container); font: inherit; font-weight: 700;
    padding: 3px 14px; border-radius: 999px; cursor: pointer; flex: none;
    transition: background .15s, color .15s;
}
.imp-banner-exit:hover { background: var(--md-on-warning-container); color: var(--md-warning-container); }
.imp-banner-exit:disabled { opacity: .6; cursor: default; }

/* Height = the user's VISIBLE view, not the device screen. On phones 100vh is the
   FULL screen behind the address bar/toolbars (taller than what's actually shown),
   which pushed the conversation's input bar past the visible area. 100dvh is the
   current visible viewport; the 100vh line stays first as a fallback for old
   browsers that don't support dvh (Dave 2026-06-25). */
.shell { display: grid; grid-template-columns: 250px 1fr 52px; height: calc(100vh - 56px); height: calc(100dvh - 56px); }
/* with the 34px banner present, the usable height drops by another 34px */
body.impersonating .shell { height: calc(100vh - 56px - 34px); height: calc(100dvh - 56px - 34px); }
body.impersonating .side-panel { top: 90px; }
/* Collapsed = a slim ICON rail (NOT zero-width). The expand chevron lives inside
   the rail, so collapsing it to 0 hid the only way back — the whole left menu
   vanished with no escape (Dave 2026-06-18). A 64px icon rail keeps every icon
   and the chevron clickable, and reads more like Nextiva. */
.shell.collapsed { grid-template-columns: 64px 1fr 52px; }
/* pages that render their own right strip inside the center (the Phone page)
   suppress the shared strip — the shell becomes a 2-column grid. */
.shell.no-strip { grid-template-columns: 250px 1fr; }
.shell.no-strip.collapsed { grid-template-columns: 64px 1fr; }
.shell.collapsed .rail { width: 64px; min-width: 64px; padding: 0; overflow-x: hidden; }
.shell.collapsed .rail .lbl,
.shell.collapsed .rail-sec-head,
.shell.collapsed .org-head .org-name,
.shell.collapsed .rail-foot { display: none; }
.shell.collapsed .org-head { justify-content: center; padding-left: 0; padding-right: 0; }
.shell.collapsed .rail-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }

/* ----- LEFT SIDEBAR (shared portal navigation) ----- */
.rail {
    background: var(--md-surface); border-right: 1px solid var(--nx-border);
    display: flex; flex-direction: column; overflow-y: auto; transition: width .18s ease;
}
.org-head { display: flex; align-items: center; gap: 8px; padding: 18px 20px 16px; }
.org-head .org-name { font-size: 16px; font-weight: 700; color: var(--md-on-surface); flex: 1; white-space: nowrap; }
.org-head .collapse {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--nx-border);
    background: var(--md-surface); cursor: pointer; color: var(--nx-icon);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.org-head .collapse:hover { background: var(--md-surface-container); }
.org-head .collapse svg { width: 14px; height: 14px; transition: transform .18s ease; }
.rail-sec-head { font-size: 14px; font-weight: 700; color: var(--md-on-surface); padding: 14px 20px 8px; }
.rail-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 20px; font-size: 14px;
    color: var(--md-on-surface); cursor: pointer; text-decoration: none; position: relative; white-space: nowrap;
}
.rail-item:hover { background: var(--md-surface-container); }
.rail-item.active { background: var(--md-surface-container-high); font-weight: 700; }
.rail-item .ico { flex: none; width: 18px; height: 18px; color: var(--nx-icon); display: inline-flex; }
.rail-item.active .ico { color: var(--md-on-surface); }
.rail-item .lbl { flex: 1; }
.pill {
    background: var(--nx-pill-bg); color: var(--nx-pill-ink); border-radius: 3px; font-size: 12px;
    font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex;
    align-items: center; justify-content: center;
}
.pill[hidden] { display: none !important; }
.rail-sub {
    padding: 8px 20px 8px 49px; font-size: 13px; color: var(--md-on-surface); cursor: pointer;
    display: flex; align-items: center;
}
.rail-sub:hover { background: var(--md-surface-container); }
.rail-sub.active { background: var(--md-surface-container-high); font-weight: 700; }
.rail-sub .lbl { flex: 1; }
.rail-divider { border-top: 1px solid var(--nx-border); margin: 12px 0; }
.rail-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--nx-border); }
.rail-foot .who { font-size: 13px; font-weight: 700; color: var(--md-on-surface); }
.rail-foot .who small { display: block; font-weight: 400; color: var(--md-secondary); font-size: 11px; }
.rail-foot a.logout { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--md-primary); text-decoration: none; }
.rail-foot a.logout:hover { text-decoration: underline; }

/* ----- PAGE MAIN (scrolling content area for the simple pages) ----- */
.shell-main { background: var(--nx-canvas); overflow-y: auto; min-width: 0; }
.shell-main.flush { padding: 0; background: var(--nx-canvas); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 28px 60px; }

/* ----- FAR-RIGHT ICON STRIP (shared chrome) ----- */
.strip {
    background: var(--md-surface); border-left: 1px solid var(--nx-border); display: flex;
    flex-direction: column; align-items: center; padding: 14px 0; gap: 8px;
}
.strip .plus {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--md-primary);
    color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; position: relative;
}
.strip .plus:hover { background: var(--md-primary-hover); }
.strip .sb {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer;
    color: var(--nx-icon-dim); display: inline-flex; align-items: center; justify-content: center; margin-top: 6px;
}
.strip .sb:hover { background: var(--md-surface-container); color: var(--nx-icon); }
.strip .sb svg { width: 20px; height: 20px; }
/* Parked-calls count badge — mirrors .bell-badge, anchored to the strip icon so
   it's visible even when the Parked panel is closed. */
.strip .sb-parked, .feed-strip .sb-parked { position: relative; }
.sb-badge {
    position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--md-error); color: #fff; font-size: 10px; font-weight: 700;
    line-height: 15px; text-align: center; pointer-events: none;
}
.sb-badge[hidden] { display: none; }
.strip .help {
    margin-top: auto; width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
    color: var(--md-primary); cursor: pointer; font-family: inherit; font-size: 16px;
}

/* ---- right slide-over panel (Contacts / Schedules / Attachments / Notes / Help) ---- */
.side-panel {
    position: fixed; top: 56px; right: -100vw; width: min(400px, 100vw); bottom: 0; z-index: 60;
    background: var(--md-surface); border-left: 1px solid var(--nx-border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .10); display: flex; flex-direction: column;
    transition: right .22s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-panel.open { right: 56px; }
@media (max-width: 640px) {
    .side-panel { width: 100vw; }
    .side-panel.open { right: 0; }
}
.side-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--nx-border);
    font-size: 17px; font-weight: 700;
}
.side-panel-x {
    border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer;
    color: var(--nx-icon); width: 32px; height: 32px; border-radius: 50%;
}
.side-panel-x:hover { background: var(--md-surface-container-high); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.dir-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--md-outline-variant);
}
.dir-row .avatar { width: 34px; height: 34px; }
.dir-meta { flex: 1; min-width: 0; }
.dir-name { font-size: 14px; font-weight: 700; color: var(--md-on-surface); }
.dir-sub { font-size: 12px; color: var(--md-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-call {
    border: none; background: var(--md-primary); color: #fff; border-radius: 50%;
    width: 32px; height: 32px; flex: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dir-call:hover { background: var(--md-primary-hover); }
.dir-call svg { width: 15px; height: 15px; }
/* small round icon button with an inline SVG — used by the Contacts panel
   (edit / remove, rendered by phone.js) AND the Keyboard-shortcuts rows.
   The SVG sizing MUST live here: without it the inline icons render 0×0
   (they used to be sized only inside keyboard_shortcuts.html). */
.ks-edit {
    border: none; background: none; cursor: pointer; color: var(--nx-icon);
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.ks-edit:hover { background: var(--md-surface-container-high); }
.ks-edit svg { width: 16px; height: 16px; }
.sched-card { border: 1px solid var(--nx-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.sched-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.sched-line { font-size: 13px; color: var(--md-secondary); }
.notes-area {
    width: 100%; min-height: 220px; border: 1px solid var(--md-outline); border-radius: 10px;
    padding: 12px; font-family: inherit; font-size: 14px; resize: vertical; box-sizing: border-box;
}
.panel-empty { text-align: center; color: var(--md-secondary); font-size: 13px; padding: 36px 10px; }
.help-item { padding: 10px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 13px; }
.help-item b { display: block; font-size: 14px; margin-bottom: 2px; }

/* ============================================================================
   SHARED CONTENT COMPONENTS — used by setup / flows / recordings center blocks.
   ============================================================================ */

/* Voice title + Material underline tab bar (setup + flows) */
.voice-title, .voice-head { font-size: 28px; font-weight: 700; color: var(--nx-navy); margin: 0 0 14px; letter-spacing: -0.2px; }
.voice-tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--nx-border); margin-bottom: 22px; flex-wrap: wrap; }
.voice-tabs a, .voice-tabs span, .voice-tabs button {
    position: relative; font-size: 15px; color: var(--md-secondary); text-decoration: none;
    padding: 10px 2px 12px; cursor: pointer; white-space: nowrap; border: none; background: none; font-family: inherit; font-weight: 700;
}
.voice-tabs a:hover, .voice-tabs button:hover { color: var(--md-on-surface); }
.voice-tabs .tab-active, .voice-tabs .tab.on, .voice-tabs button.on { color: var(--nx-navy); font-weight: 700; }
.voice-tabs .tab-active:after, .voice-tabs .tab.on:after, .voice-tabs button.on:after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--md-primary); border-radius: 2px 2px 0 0;
}
.section { display: none; }
.section.on { display: block; }

/* info / format banners */
.info-banner { background: var(--nx-info-bg); color: var(--nx-info-ink); border-radius: 8px; padding: 14px 18px; font-size: 14px; margin-bottom: 26px; }
.info-banner b { font-weight: 700; }
.format-banner { background: var(--nx-format-bg); color: var(--nx-navy); border-radius: 6px; padding: 18px 22px; font-size: 14px; line-height: 1.55; margin: 0 0 22px; }

/* cards */
.card { background: var(--md-surface); border: 1px solid var(--nx-border); border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.card h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--nx-navy); }
.card .hint { font-size: 12px; color: var(--md-secondary); margin: 0 0 16px; }

/* setup-help chip + body */
.help-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--md-primary-hover); background: var(--md-primary-container); border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: inherit; }
.help-body { display: none; margin-top: 10px; padding: 12px 14px; background: var(--md-surface-container); border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--nx-navy); }
.help-body.on { display: block; }
.tool-help-btn { border: 1px solid var(--md-outline); background: var(--md-surface); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--md-secondary); font-weight: 600; line-height: 1; }
.tool-help-btn:hover { background: var(--md-surface-container); }
.tool-help-panel { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; font-size: 13.5px; line-height: 1.55; }
.tool-help-panel h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.tool-help-panel ul { margin: 6px 0 0; padding-left: 18px; }
.tool-help-panel li { margin-bottom: 5px; }

/* form layout */
.form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
label { font-size: 12px; font-weight: 500; letter-spacing: .5px; color: var(--md-on-surface-variant); }
textarea.form-input { min-height: 160px; resize: vertical; }

/* form inputs (kept from the original portal sheet) */
.form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--md-outline); border-radius: var(--md-radius-sm); background: var(--md-surface); color: var(--md-on-surface); font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.form-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary-container); }
.form-input::placeholder { color: var(--md-on-surface-variant); }
/* .form-input's `background` shorthand wipes the global caret, so re-add it here
   for every .form-input <select> (keeps the dropdown arrow consistent). */
select.form-input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%231a73e8'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.form-input-sm { padding: 8px 10px; font-size: 13px; min-height: 40px; }

/* buttons (kept from the original portal sheet) */
.btn { padding: 10px 24px; border: none; border-radius: var(--md-radius-xl); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; }
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn-primary:hover { background: var(--md-primary-hover); box-shadow: 0 1px 3px var(--md-shadow); }
.btn-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.btn-tonal:hover { background: var(--md-primary-container-hover); }
.btn-outline { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); }
.btn-outline:hover { background: var(--md-surface-container); }
.btn-danger { background: var(--md-error); color: #fff; }
.btn-danger:hover { background: var(--md-error-hover); }
.btn-success { background: var(--md-success); color: #fff; }
.btn-success:hover { background: var(--md-success-hover); }
.btn-small { padding: 6px 16px; font-size: 12px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* toggle switch (setup + flows) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; cursor: pointer; inset: 0; background: var(--md-outline); border-radius: 999px; transition: .15s; }
.switch .track:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + .track { background: var(--md-primary); }
.switch input:checked + .track:before { transform: translateX(18px); }
.switch input:disabled + .track { opacity: .45; cursor: default; }
.switch-row { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 13px; color: var(--md-on-surface); }

/* Nextiva-style switch — SHARED (Roles & Permissions panel + the Setup
   slide-over editor). Markup: <label class="nx-switch"><input type="checkbox"><span class="tr"></span></label> */
.nx-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.nx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.nx-switch .tr { width: 46px; height: 24px; border-radius: 999px; background: var(--md-surface-container-highest); transition: background .18s; position: relative; }
.nx-switch .tr::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s; }
.nx-switch input:checked + .tr { background: var(--md-primary); }
.nx-switch input:checked + .tr::after { left: 24px; }
.nx-switch input:disabled + .tr { opacity: .5; cursor: default; }

/* shared search box (setup) */
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--md-outline); border-radius: 8px; padding: 0 12px; height: 40px; min-width: 260px; background: #fff; }
.search-box:focus-within { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary-container); }
.search-box svg { color: var(--nx-icon-dim); flex: none; width: 16px; height: 16px; }
.search-box input { border: none; outline: none; font-size: 14px; font-family: inherit; width: 100%; background: transparent; color: var(--md-on-surface); }
.icon-btn { border: none; background: transparent; color: var(--md-secondary); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.icon-btn:hover { background: var(--md-surface-dim); }

/* ============================================================================
   THE ONE TABLE SYSTEM — every data table in the portal (Setup numbers/users/
   devices/transfers, Recordings) shares this header + row spec. Headers:
   14px / 700 / var(--md-secondary); rows hover var(--nx-row-hover); sortable
   headers show an idle '↕' caret that flips to '▲'/'▼' when active.
   ============================================================================ */
/* horizontal-scroll wrapper for every wide data table — on phones the table
   keeps its readable min-width and the WRAPPER scrolls, so columns never
   squeeze into overlapping text. Wrap: <div class="tbl-scroll"><table…></div> */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll > table { min-width: 640px; }

table { width: 100%; border-collapse: collapse; }
table.setup-tbl th { text-align: left; font-size: 14px; font-weight: 700; color: var(--md-secondary); padding: 12px 10px; border-bottom: 1px solid var(--md-outline); white-space: nowrap; cursor: pointer; user-select: none; }
table.setup-tbl th.nosort { cursor: default; }
table.setup-tbl th .caret { color: var(--md-secondary); font-size: 10px; margin-left: 4px; }
table.setup-tbl th .arrow { color: var(--md-primary); font-size: 11px; }
table.setup-tbl td { padding: 14px 10px; border-bottom: 1px solid var(--md-outline-variant); font-size: 14px; color: var(--md-on-surface); vertical-align: middle; }
table.setup-tbl tr:hover td { background: var(--nx-row-hover); }
table.setup-tbl .form-input { padding: 7px 10px; font-size: 13px; }
.empty-row td { text-align: center; color: var(--md-secondary); padding: 28px 0; }

/* ============================================================================
   THE ONE STATUS PILL — Active/Inactive/Provisioned/Assigned chips everywhere
   (Setup devices + transfers + numbers, Call Flows cards). Base = neutral grey;
   .on = good/green, .off = bad/red, .mid = in-progress/blue.
   ============================================================================ */
.status-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 6px; background: var(--md-surface-dim); color: var(--md-secondary); line-height: 1.5; }
.status-pill.on { background: var(--md-success-container); color: var(--md-success); }
.status-pill.off { background: var(--md-error-container); color: var(--md-error); }
.status-pill.mid { background: var(--nx-info-bg); color: var(--nx-info-ink); }

/* pager — ONE look everywhere: .btn .btn-outline .btn-small "Prev"/"Next" */
.pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pager .page-info { font-size: 12px; color: var(--md-secondary); }
.pager.hide { display: none; }
.muted { color: var(--md-on-surface-variant); font-size: 13px; }
.tbl-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.tbl-controls .count { font-size: 12px; color: var(--md-secondary); margin-left: auto; }

/* inline banners — BOTH modifier-class sets kept (flows uses .on/.banner-ok/.banner-err,
   recordings uses .show/.ok/.err/.info). DO NOT unify the JS that writes these. */
.banner { display: none; margin: 12px 0; padding: 11px 14px; border-radius: 10px; font-size: 13px; }
.banner.on, .banner.show { display: block; }
.banner-ok, .banner.ok { background: var(--md-success-container); color: var(--md-success); }
.banner-err, .banner.err { background: var(--md-error-container); color: var(--md-error); }
.banner.info { background: var(--nx-info-bg); color: var(--nx-info-ink); }

/* ============================================================================
   SHARED SOFTPHONE — dialer dropdown, active-call bar (+ transfer), keypad, and
   the incoming-ring modal. Rendered by _shell.html on EVERY page (#81), wired by
   phone.js. Moved here out of comms.html so the phone looks identical everywhere.
   ============================================================================ */
/* ============================================================================
   SOFTPHONE REDESIGN ("Aurora" — portal blue gradient zone + light pad). Four
   states share one #dialerPop panel via state classes: idle (default), on a call
   (.on-call), settings (.settings-open); the incoming ring is a separate modal.
   2026-06-27. Tokens only — themes with the portal.
   ============================================================================ */
.dialer-pop { position: absolute; top: 50px; right: 0; width: 344px; background: var(--md-surface); border: 1px solid var(--nx-border); border-radius: var(--md-radius-2xl); box-shadow: 0 2px 6px rgba(30,50,90,.06), 0 28px 60px -16px rgba(20,50,110,.30); padding: 0; overflow: hidden; display: none; z-index: 70; }
.dialer-pop.open { display: block; }
/* live-call indicator on the top-bar phone icon — a closed-mid-call panel still
   shows a call is in progress (tap the icon to reopen the controls). */
.top-icon-btn.in-call { position: relative; color: var(--md-success); }
.top-icon-btn.in-call::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-online); border: 2px solid var(--md-surface); }
/* state visibility: idle is the default; .on-call and .settings-open swap views */
.call-bar { display: none; }
.call-bar.show { display: block; }
.dialer-settings { display: none; }
.dialer-pop.on-call .dialer-idle { display: none; }
.dialer-pop.settings-open .dialer-idle, .dialer-pop.settings-open .call-bar { display: none; }
.dialer-pop.settings-open .dialer-settings { display: block; }

/* ---------- IDLE: number zone (blue gradient) ---------- */
.dial-numzone { position: relative; overflow: hidden; padding: 50px 22px 22px;
    background: linear-gradient(135deg, var(--md-primary-hover) 0%, var(--md-primary) 55%, var(--nx-dialer-accent) 100%); }
.dial-numzone::after { content: ""; position: absolute; top: -40px; right: -30px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%); }
/* gear (settings) → top-LEFT, ✕ (close) → top-RIGHT, opposite corners (Dave) */
.dialer-gear { position: absolute; top: 9px; left: 11px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.dialer-gear:hover { background: rgba(255,255,255,.30); }
.dialer-gear svg { width: 18px; height: 18px; }
.dialer-pop.settings-open .dialer-gear { display: none; }   /* sheet has its own Done */
/* ✕ close — top-right corner, on the gradient, present in every state */
.dialer-close { position: absolute; top: 9px; right: 11px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.dialer-close:hover { background: rgba(255,255,255,.30); }
.dialer-close svg { width: 18px; height: 18px; }
/* the settings sheet has its own "Done" (returns to the dialer, where ✕ lives) —
   hide the gradient ✕/gear so they don't collide with the sheet header */
.dialer-pop.settings-open .dialer-close { display: none; }
/* end-call confirm — inline overlay over the whole panel when ✕ is pressed mid-call */
.dialer-confirm { display: none; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; padding: 22px; background: rgba(15,29,58,.55); backdrop-filter: blur(2px); }
.dialer-confirm.show { display: flex; }
.dialer-confirm-card { background: var(--md-surface); border-radius: var(--md-radius-lg); padding: 20px 18px 16px; width: 100%; max-width: 300px; box-shadow: 0 18px 44px -10px rgba(0,0,0,.4); text-align: center; }
.dialer-confirm-title { font-size: 16px; font-weight: 700; color: var(--md-on-surface); }
.dialer-confirm-sub { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 6px; }
.dialer-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.dialer-confirm-actions button { flex: 1; height: 44px; border-radius: 12px; border: none; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dialer-confirm-actions .dc-keep { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.dialer-confirm-actions .dc-end { background: linear-gradient(180deg, var(--nx-decline), var(--md-error-hover)); color: #fff; }
.dial-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
/* The number row is a real 3-part flex: [left spacer] [number] [backspace]. The
   display flexes + truncates so a long number can NEVER collide with the button
   (the old absolute backspace printed on top of the last digit at 320px — design
   critic 2026-06-28). The left spacer mirrors the button's width so the number
   stays optically centered whenever the button is shown. */
.dial-display { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; font-size: 30px; font-weight: 400; letter-spacing: .5px; text-align: center; white-space: nowrap; overflow: hidden; background: transparent; border: none; color: #fff; padding: 4px 0; outline: none; }
/* once the number overflows, left-align so scroll-to-end shows the LATEST digits
   you typed (a centered overflow can't scroll — review-frontend 2026-06-28). */
.dial-display.num-overflow { text-align: left; }
.dial-display::placeholder { font-size: 15px; font-weight: 400; letter-spacing: .2px; color: rgba(255,255,255,.72); opacity: 1; text-align: center; text-transform: none; }
/* left spacer = same width as the backspace, shown ONLY with the button, so the
   number sits optically centered between the two and never shoved off-center. */
.dial-back-pad { display: none; flex: none; width: 42px; height: 42px; }
.dial-row.has-digits .dial-back-pad { display: block; }
/* Backspace is now a SOLID, visible round button matching the gear / ✕ chips in
   the same blue bar (was a faint transparent outline that read as a watermark —
   Dave + all 3 design agents 2026-06-28). A real flex sibling, reserved width. */
.dial-back { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; font-family: inherit; user-select: none; -webkit-user-select: none; transition: background .12s ease, transform .05s ease; }
.dial-row.has-digits .dial-back { display: flex; }
.dial-back:hover { background: rgba(255,255,255,.30); }
.dial-back:active { transform: scale(.92); }
.dial-back svg { width: 22px; height: 22px; }
/* clear-all (long-press) telegraphs the destructive wipe by going red while held */
.dial-back.clearing { background: var(--nx-decline, #d93025); }
.dial-back.clearing svg { transform: scale(1.05); }
/* "Cleared · Undo" chip after a long-press wipe — an inline undo (no native popup;
   inline-feedback rule), floating over the gradient zone. */
.dial-cleared { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) translateY(6px); z-index: 5; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.dial-cleared.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.dial-undo { border: none; background: rgba(255,255,255,.22); color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; cursor: pointer; }
.dial-undo:hover { background: rgba(255,255,255,.34); }
.dial-from { position: relative; z-index: 2; text-align: center; font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.82); margin-top: 8px; min-height: 16px; }
/* "call from" line picker — CUSTOM dropdown (no native <select>), quiet pill on the
   gradient; only shown with 2+ DIDs. Menu is a light card below the button. */
.line-pick { position: relative; display: inline-block; max-width: 94%; }
.line-pick-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; outline: none; cursor: pointer;
    border: 1px solid rgba(255,255,255,.45); background-color: rgba(255,255,255,.22); color: #fff;
    font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 7px 13px 7px 15px; transition: background-color .15s, border-color .15s; }
.line-pick-btn:hover { background-color: rgba(255,255,255,.30); border-color: rgba(255,255,255,.7); }
.line-pick-btn .line-pick-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-pick-btn svg { flex: none; width: 14px; height: 14px; transition: transform .15s; }
.line-pick.open .line-pick-btn svg { transform: rotate(180deg); }
/* fixed-positioned (placed by JS) so it ESCAPES the panel/numzone overflow:hidden */
.line-pick-menu { display: none; position: fixed; z-index: 90;
    min-width: 230px; max-width: 300px; max-height: 260px; overflow-y: auto; padding: 6px;
    background: var(--md-surface); border: 1px solid var(--nx-border); border-radius: var(--md-radius-md);
    box-shadow: 0 12px 34px -6px rgba(20,40,90,.34); }
.line-pick.open .line-pick-menu { display: block; }
.line-pick-opt { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 13.5px; color: var(--md-on-surface); padding: 9px 11px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-pick-opt:hover { background: var(--md-surface-container); }
.line-pick-opt.sel { background: var(--nx-info-bg); color: var(--md-primary); font-weight: 700; }

/* ---------- IDLE: pad zone (light) ---------- */
.dial-padzone { padding: 16px 20px 20px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; justify-items: stretch; }
.keypad button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 70px; padding: 0; border-radius: var(--md-radius-lg); border: 1px solid var(--md-outline-variant); background: var(--md-surface-container); cursor: pointer; font-family: inherit; color: var(--md-on-surface); box-shadow: 0 1px 2px rgba(40,60,120,.05); transition: background .08s ease, transform .05s ease, box-shadow .12s ease; user-select: none; -webkit-user-select: none; }
.keypad button .kp-digit { font-size: 26px; line-height: 1; font-weight: 500; }
.keypad button .kp-letters { font-size: 9.5px; line-height: 1; letter-spacing: .14em; color: var(--md-secondary); font-weight: 700; min-height: 10px; }
.keypad button:hover { background: var(--md-surface-container-high); box-shadow: 0 4px 12px -2px rgba(40,60,120,.14); }
.keypad button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
.keypad button:active, .keypad button.kp-pressed { background: linear-gradient(135deg, var(--md-primary), var(--nx-dialer-accent)); border-color: transparent; transform: scale(.93); box-shadow: 0 8px 20px -4px rgba(26,115,232,.5); }
.keypad button.kp-pressed .kp-digit { color: #fff; }
.keypad button.kp-pressed .kp-letters { color: rgba(255,255,255,.85); }
.btn-call { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 0; height: 54px; border: none; border-radius: var(--md-radius-lg); background: linear-gradient(180deg, var(--md-success-hover), var(--md-success)); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 10px 26px -6px rgba(24,128,56,.5), inset 0 1px 0 rgba(255,255,255,.25); transition: filter .12s, transform .05s; }
.btn-call svg { width: 19px; height: 19px; }
.btn-call:hover { filter: brightness(1.04); }
.btn-call:active { transform: scale(.99); }

/* ---------- Keypad ⇄ Recents tabs + the Recents list ---------- */
.dial-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--md-surface-container); border-radius: var(--md-radius-xl); }
.dial-tab { flex: 1; min-height: 38px; border: none; background: transparent; border-radius: var(--md-radius-lg); font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--md-on-surface-variant); cursor: pointer; transition: background .12s, color .12s; }
.dial-tab.on { background: var(--md-surface); color: var(--md-primary); box-shadow: 0 1px 2px rgba(40,60,120,.08); }
.dial-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
.dial-seg[hidden] { display: none; }
.rec-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.rec-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 10px; border: none; background: transparent; border-radius: var(--md-radius-lg); text-align: left; font-family: inherit; cursor: pointer; }
.rec-row + .rec-row { border-top: 1px solid var(--md-outline-variant); border-radius: 0; }
.rec-row:hover { background: var(--nx-row-hover); }
.rec-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
.rec-row .dir { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rec-row .dir svg { width: 15px; height: 15px; }
.rec-row .dir.out { background: var(--md-primary-container); color: var(--md-primary); }
.rec-row .dir.in { background: var(--md-success-container); color: var(--md-success); }
.rec-row .dir.miss { background: var(--md-error-container); color: var(--md-error); }
.rec-row .rid { flex: 1; min-width: 0; }
.rec-row .who { display: block; font-size: 14px; font-weight: 600; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row.miss .who { color: var(--md-error); }
.rec-row .who .cnt { font-size: 11px; font-weight: 700; color: var(--md-secondary); }
.rec-row .line { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row .line .ldot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.rec-row .rtime { flex: none; align-self: flex-start; margin-top: 3px; font-size: 11.5px; color: var(--md-secondary); font-variant-numeric: tabular-nums; }
/* favorite ☆ — outline when unpinned, filled gold when pinned. Its own 36px tap
   target; clicking it pins/unpins without triggering the row's redial. */
.rec-row .rec-fav { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--md-secondary); cursor: pointer; padding: 0; transition: background .12s, color .12s; }
.rec-row .rec-fav svg { width: 20px; height: 20px; fill: none; }
.rec-row .rec-fav:hover { background: var(--nx-row-hover); color: var(--md-on-surface); }
.rec-row .rec-fav.on { color: var(--nx-fav); }
.rec-row .rec-fav.on svg { fill: var(--nx-fav); }
.rec-row .rec-fav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.25); }
.rec-more-btn { width: 100%; min-height: 40px; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--md-primary); border-radius: var(--md-radius-lg); cursor: pointer; margin-top: 4px; }
.rec-more-btn:hover { background: var(--md-surface-container); }
.rec-empty { text-align: center; padding: 30px 18px; }
.rec-empty.rec-loading { color: var(--md-secondary); font-size: 13px; }
.rec-empty-t { font-size: 14px; font-weight: 700; color: var(--md-on-surface); }
.rec-empty-s { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 4px; line-height: 1.45; }
/* favorites now live atop the Recents list */
#segRecents .speed-dial { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--md-outline-variant); }
.inline-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 12px; padding: 11px 13px; border-radius: 10px; font-size: 13px; background: var(--md-surface-container); border-left: 3px solid var(--md-primary); color: var(--md-on-surface-variant); }
.inline-note .note-msg { flex: 1; min-width: 0; }
.inline-note .note-x { flex: none; border: none; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .7; font-family: inherit; }
.inline-note .note-x:hover { opacity: 1; }
.inline-note[hidden] { display: none; }
.inline-note.error { background: var(--md-error-container); border-left-color: var(--md-error); color: var(--md-error); }
/* line identity footer — the user's extension + main number, kept but tidied into
   a clean centered chip (Dave 2026-06-28: keep ext + main, make it look nice) */
.line-id { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 16px 14px; padding: 9px 12px; border-radius: 12px; background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: 13px; }
.line-id svg { width: 15px; height: 15px; color: var(--md-secondary); flex: none; }
.line-id .line-id-ext { font-weight: 700; color: var(--md-on-surface); }
.line-id .line-id-dot { color: var(--md-outline); }
.line-id .line-id-num { font-variant-numeric: tabular-nums; }
.line-id[hidden] { display: none; }

/* ---------- ON A CALL: identity hero + control tiles ---------- */
.call-hero { position: relative; overflow: hidden; padding: 50px 18px 18px 18px; display: flex; align-items: center; gap: 13px;
    background: linear-gradient(135deg, var(--md-primary-hover) 0%, var(--md-primary) 55%, var(--nx-dialer-accent) 100%); }
.call-hero::after { content: ""; position: absolute; top: -30px; left: -20px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.call-avatar { position: relative; z-index: 2; flex: none; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #ffffff 0%, #e7f0fd 100%); color: var(--md-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; box-shadow: 0 6px 16px -4px rgba(0,0,0,.22), inset 0 0 0 1px rgba(26,115,232,.10); }
.call-avatar .call-dot { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; background: var(--nx-online); border: 3px solid #fff; }
.call-meta { position: relative; z-index: 2; flex: 1; min-width: 0; }
.call-bar .who { font-size: 18px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-bar .call-sub { font-size: 13px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; min-height: 16px; }
.call-bar .timer { position: relative; z-index: 2; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.call-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; padding: 18px 16px 4px; }
.call-actions .ctile { display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 0; }
.call-actions .ctile .ctile-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--md-primary); background: var(--md-primary-container); border: 1px solid transparent; transition: background .12s, color .12s, box-shadow .12s; }
.call-actions .ctile .ctile-ic svg { width: 22px; height: 22px; }
.call-actions .ctile:hover .ctile-ic { background: var(--md-primary-container); }
.call-actions .ctile .ctile-t { font-size: 11.5px; font-weight: 600; color: var(--md-on-surface-variant); }
.call-actions .ctile.on .ctile-ic { background: linear-gradient(135deg, var(--md-primary), var(--nx-dialer-accent)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -4px rgba(26,115,232,.5); }
.incall-keypad { padding: 6px 16px 4px; }
.incall-kp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 0 2px; }
.incall-kp-echo { font-size: 16px; font-weight: 600; letter-spacing: 2px; color: var(--md-on-surface); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 20px; }
.incall-kp-hide { flex: none; border: none; background: transparent; color: var(--md-primary); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; padding: 6px 8px; }
.incall-keypad .keypad { margin-bottom: 4px; }
.incall-keypad .keypad button { width: 100%; height: 56px; border-radius: var(--md-radius-lg); }
/* End call — big unmistakable red hang-up, isolated at the bottom of the call view */
.btn-endcall { display: flex; align-items: center; justify-content: center; gap: 9px;
               width: calc(100% - 32px); margin: 10px 16px 16px; padding: 0; height: 54px; border: none; cursor: pointer;
               border-radius: 16px; background: linear-gradient(180deg, var(--nx-decline), var(--md-error-hover)); color: #fff;
               font-family: inherit; font-size: 15.5px; font-weight: 700;
               box-shadow: 0 10px 26px -6px rgba(220,53,69,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-endcall:hover { filter: brightness(1.04); }
.btn-endcall svg { width: 19px; height: 19px; }
/* side-gutters for the call-view sub-panels now that #dialerPop has 0 padding */
.cw-held, .cw-alert { margin-left: 16px; margin-right: 16px; }
.xfer-panel { margin-left: 16px; margin-right: 16px; }

/* ---------- SETTINGS sheet (gear) ---------- */
.dialer-settings { padding: 18px 20px 20px; }
.dialer-settings .ds-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dialer-settings .ds-title { font-size: 16px; font-weight: 700; color: var(--md-on-surface); }
.dialer-settings .ds-done { border: none; background: transparent; color: var(--md-primary); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px; padding: 0 6px; }
.dialer-settings .ds-row { margin-bottom: 22px; }
.dialer-settings .ds-label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); margin-bottom: 12px; }
.dialer-settings .ds-label svg { width: 18px; height: 18px; color: var(--md-secondary); }
.dialer-settings .ds-val { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--md-primary); }
.dialer-settings .ds-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--md-surface-container-high); outline: none; cursor: pointer; }
.dialer-settings .ds-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--md-primary); border: 3px solid #fff; box-shadow: 0 2px 8px -1px rgba(26,115,232,.5); cursor: pointer; }
.dialer-settings .ds-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--md-primary); border: 3px solid #fff; box-shadow: 0 2px 8px -1px rgba(26,115,232,.5); cursor: pointer; }
.dialer-settings .ds-link { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 0; border: none; border-top: 1px solid var(--md-outline-variant); background: transparent; font-family: inherit; font-size: 13.5px; color: var(--md-on-surface-variant); font-weight: 500; cursor: pointer; }
.dialer-settings .ds-link:hover { color: var(--md-primary); }
.dialer-settings .ds-link .ds-muted { color: var(--md-secondary); font-size: 12px; }

/* ---------- INCOMING CALL card (the #ringBackdrop modal) ---------- */
.ring-card { padding: 0; overflow: hidden; border-radius: var(--md-radius-2xl); max-width: 340px; width: 92vw; text-align: left; background: var(--md-surface); }
.ring-card .ring-hero { position: relative; overflow: hidden; padding: 30px 22px 26px; text-align: center;
    background: linear-gradient(135deg, var(--md-primary-hover) 0%, var(--md-primary) 55%, var(--nx-dialer-accent) 100%); }
.ring-card .ring-hero::after { content: ""; position: absolute; top: -40px; right: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%); }
.ring-card .ring-toplabel { position: relative; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.ring-card .ring-avwrap { position: relative; z-index: 2; width: 104px; height: 104px; margin: 0 auto 16px; }
.ring-card .ring-avatar { position: absolute; inset: 14px; border-radius: 50%; background: linear-gradient(135deg, #ffffff 0%, #e7f0fd 100%); color: var(--md-primary); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; box-shadow: 0 8px 22px -4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(26,115,232,.10); }
.ring-card .ring-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: ringPulse 1.8s ease-out infinite; }
.ring-card .ring-pulse.b { inset: -12px; border-color: rgba(255,255,255,.3); animation-delay: .6s; }
@keyframes ringPulse { 0% { transform: scale(.92); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ring-card .ring-pulse { animation: none; } }
.ring-card .ring-toplabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-card .ring-name { position: relative; z-index: 2; font-size: 23px; font-weight: 700; color: #fff; }
.ring-card .ring-sub { position: relative; z-index: 2; font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 4px; }
.ring-card .ring-sub .line { color: inherit; }   /* override the global amber .line */
.ring-card .ring-body { padding: 22px 26px 22px; }
.ring-card .ring-actions { display: flex; align-items: flex-start; margin-bottom: 12px; }
.ring-card .ring-gap { flex: 1; }
.ring-card .ring-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 0; }
.ring-card .ring-circle { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.ring-card .ring-circle svg { width: 27px; height: 27px; }
.ring-card .ring-decline .ring-circle { background: linear-gradient(180deg, var(--nx-decline), var(--md-error-hover)); box-shadow: 0 10px 24px -6px rgba(220,53,69,.55); }
.ring-card .ring-answer .ring-circle { background: linear-gradient(180deg, var(--md-success-hover), var(--md-success)); box-shadow: 0 10px 24px -6px rgba(24,128,56,.55); }
.ring-card .ring-lab { font-size: 12.5px; font-weight: 600; color: var(--md-on-surface-variant); }
.ring-card .ring-silence { display: block; margin: 0 auto; border: none; background: transparent; color: var(--md-secondary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px; font-family: inherit; }
.ring-card .ring-silence:hover { color: var(--md-on-surface); }

/* the idle line/error notes live outside the swapped views — hide them while a
   call or the settings sheet is up so they don't dangle under those views. */
/* hide the line-id + diagnostics during a call/settings — but NOT #phoneError:
   an error (e.g. Park failing) MUST be visible DURING the call (Dave 2026-06-28). */
.dialer-pop.on-call #lineNote, .dialer-pop.on-call #phoneDiag,
.dialer-pop.settings-open .inline-note, .dialer-pop.settings-open #phoneDiag, .dialer-pop.settings-open #lineNote { display: none; }
.dialer-pop.on-call #phoneError:not([hidden]) { display: flex; margin-top: 4px; }

/* phone-width: the 344px popover would clip off the right edge — anchor it to the
   bottom and let it use the screen width so the keypad is in thumb reach. */
@media (max-width: 640px) {
    /* phone width: anchor to the VIEWPORT (the topbar is not transformed, so fixed
       resolves against the screen) centered near the top — NOT absolute, which would
       resolve against the narrow top-bar icon container and collapse to a sliver. */
    .dialer-pop { position: fixed; top: 56px; left: 50%; right: auto; transform: translateX(-50%);
        width: calc(100vw - 16px); max-width: 400px; max-height: calc(100dvh - 70px); overflow-y: auto; }
}

/* respect reduced-motion on the key press (the ring pulse is already guarded) */
@media (prefers-reduced-motion: reduce) {
    .keypad button, .keypad button.kp-pressed, .call-actions .ctile .ctile-ic { transition: none; transform: none; }
}

/* CALL WAITING — a compact 2nd-call alert that appears INSIDE the call bar while
   you're already on a call. Deliberately NOT the full-screen ring modal: a 2nd
   call must never grab the screen or interrupt the live call's audio. It's a
   small amber strip with Answer / Decline. Hidden by default; .show reveals it. */
.cw-alert { display: none; margin-top: 11px; padding: 10px 11px; border-radius: 10px;
    background: var(--md-warning-container); border: 1px solid var(--md-warning); }
.cw-alert.show { display: block; }
.cw-alert .cw-label { font-size: 11px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--md-warning, #b06000); margin-bottom: 2px; }
.cw-alert .cw-who { font-size: 14px; font-weight: 700; color: var(--md-on-surface);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-alert .cw-actions { display: flex; gap: 7px; margin-top: 8px; }
.cw-alert .cw-actions button { flex: 1; padding: 8px 0; border: none; border-radius: 999px;
    font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: #fff; }
.cw-alert .cw-answer { background: var(--md-success); }
.cw-alert .cw-answer:hover { background: var(--md-success-hover); }
.cw-alert .cw-decline { background: var(--md-error); }
.cw-alert .cw-decline:hover { background: var(--md-error-hover); }
/* the "other call on hold" row shown on the call bar once two calls are juggled:
   a faint pill naming the held party plus a Swap control to switch which call is
   live. The held party is on SDK hold — this row just makes the state visible. */
.cw-held { display: none; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 9px; padding: 7px 10px; border-radius: 9px;
    background: var(--md-surface-container, #eef1f6); border: 1px dashed var(--md-outline);
    font-size: 12px; color: var(--md-on-surface-variant); }
.cw-held.show { display: flex; }
.cw-held .cw-held-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-held .cw-held-who b { color: var(--md-on-surface); }
.cw-swap { flex: none; border: 1px solid var(--md-outline); background: var(--md-surface);
    color: var(--md-primary); border-radius: 999px; padding: 4px 12px; font-size: 12px;
    font-weight: 700; cursor: pointer; font-family: inherit; }
.cw-swap:hover { background: var(--md-surface-container-high, #e3e7ef); }

.xfer-panel { display: none; margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--md-outline); }
.xfer-panel.open { display: block; }
.xfer-panel .xfer-hint { font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 7px; }
.xfer-panel .xfer-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.xfer-panel .xfer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.xfer-panel .xfer-actions .btn { flex: 1; justify-content: center; min-width: 110px; }
/* "…or send the caller straight to voicemail" sub-block — a faint divider so it
   reads as a distinct option below the blind/warm transfer buttons. */
.xfer-panel .xfer-vm { margin-top: 11px; padding-top: 10px; border-top: 1px dotted var(--md-outline); }

/* live conference participant list — each row gets a Remove (✕) for non-self
   parties so the user can drop one person without ending the whole call. */
.conf-parties { margin-top: 9px; display: none; flex-direction: column; gap: 5px; }
.conf-parties.show { display: flex; }
.conf-party { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 9px; border: 1px solid var(--md-outline);
    border-radius: 9px; background: var(--md-surface); font-size: 13px; }
.conf-party .conf-party-name { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.conf-party .conf-party-you { color: var(--md-on-surface-variant); font-style: italic; }
.conf-party-drop { flex: none; border: 1px solid var(--md-outline); background: transparent;
    color: var(--md-error, #b3261e); border-radius: 8px; padding: 3px 9px;
    font-size: 12px; cursor: pointer; line-height: 1.4; }
.conf-party-drop:hover { background: rgba(179, 38, 30, .08); }
.conf-party-drop:disabled { opacity: .5; cursor: default; }

/* incoming-ring + generic styled modal backdrop */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(20, 24, 31, .45); z-index: 90; align-items: center; justify-content: center; }
.modal-backdrop.show { display: flex; }
.ring-modal { background: var(--md-surface); border-radius: 18px; padding: 28px 34px; text-align: center; min-width: 300px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); }
/* Two labelled lines — "from:" (caller name + number) and "incoming:" (line
   label + line number + route phrase). Small grey labels, value left-aligned
   next to them so the two rows line up cleanly. (Dave 2026-06-18) */
.ring-row { display: flex; align-items: baseline; gap: 8px; text-align: left; }
.ring-row + .ring-row { margin-bottom: 18px; }
.ring-lbl { flex: 0 0 auto; min-width: 64px; font-size: 12px; color: var(--md-secondary); }
.ring-modal .caller { font-size: 20px; font-weight: 700; }
.ring-modal .line { font-size: 13px; color: var(--md-secondary); }
.ring-actions { display: flex; gap: 14px; }
.ring-actions button { flex: 1; padding: 13px 0; border: none; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ring-actions .ring-silence { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.ring-actions .ring-silence:disabled { opacity: .55; cursor: default; }

/* styled confirm modal (no native popups) */
.ui-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 80; align-items: center; justify-content: center; }
.ui-modal-backdrop.show { display: flex; }
.ui-modal { background: var(--md-surface); border-radius: 12px; padding: 22px 24px; max-width: 440px; width: 90%; box-shadow: 0 6px 24px var(--md-shadow); }
.ui-modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--md-on-surface); }
.ui-modal p { margin: 0 0 18px; font-size: 14px; color: var(--md-on-surface-variant); line-height: 1.5; }
.ui-modal .actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ============================================================================
   SHARED SLIDE-OVER EDITOR — the Nextiva "Actions" editing surface (same
   pattern as roles.html's .ro-panel): fixed right panel + dim overlay +
   Cancel/Save footer. Used by Phone Setup (Numbers + People). Full-width on
   phones (see the responsive layer below).
   ============================================================================ */
.so-overlay { position: fixed; inset: 0; background: rgba(15, 29, 58, .25); z-index: 70; display: none; }
.so-overlay.open { display: block; }
.so-panel { position: fixed; top: 0; right: -100vw; width: min(520px, 100vw); bottom: 0; background: var(--md-surface); z-index: 71; box-shadow: -10px 0 34px rgba(0,0,0,.18); display: flex; flex-direction: column; transition: right .24s cubic-bezier(0.4,0,0.2,1); }
.so-panel.open { right: 0; }
.so-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 12px; }
.so-head .t { font-size: 22px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.so-sub { font-size: 13px; color: var(--md-secondary); padding: 0 28px 4px; }
.so-sub:empty { display: none; }
.so-x { border: none; background: none; font-size: 26px; cursor: pointer; color: var(--nx-icon); width: 34px; height: 34px; border-radius: 50%; flex: none; }
.so-x:hover { background: var(--md-surface-container-high); }
.so-body { flex: 1; overflow-y: auto; padding: 6px 28px 20px; }
.so-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 28px; border-top: 1px solid var(--nx-border); }
.so-field-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--md-secondary); text-transform: uppercase; margin: 16px 0 6px; }
.so-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--md-outline-variant); font-size: 14.5px; }
.so-row:last-of-type { border-bottom: 1px solid var(--md-outline-variant); }
.so-row .rl { min-width: 0; }
.so-row .rl small { display: block; color: var(--md-secondary); font-size: 12.5px; margin-top: 2px; }
.so-sec { padding: 18px 0 8px; }
.so-sec .st { font-size: 16px; font-weight: 800; }
.so-sec .sd { font-size: 13px; color: var(--md-secondary); margin-top: 2px; }

/* ============================================================================
   UNIVERSAL SMALL-SCREEN LAYER — one shared media block so EVERY portal page
   behaves on a phone. Page-local tweaks stay in their templates; the shared
   chrome (shell grid, toolbars, tabs, cards, panels) collapses here.
   ============================================================================ */
@media (max-width: 640px) {
    /* the 250px sidebar + 52px strip don't fit a phone — the center column
       takes the full width and navigation lives in the top-left app grid. */
    .shell, .shell.collapsed, .shell.no-strip, .shell.no-strip.collapsed { grid-template-columns: 1fr; }
    .shell .rail, .shell .strip { display: none; }

    .wrap { padding: 14px; }

    /* toolbars wrap instead of forcing the row wide */
    .manage-bar, .tbl-controls, .panel-header { flex-wrap: wrap; gap: 8px; }
    .search-box { width: 100%; min-width: 0; }
    .tbl-controls input.form-input, .tbl-controls select.form-input { min-width: 0; }

    /* tab bars scroll sideways (thin scrollbar) instead of stacking */
    .voice-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

    /* overview stat cards stack */
    .ov-cards { grid-template-columns: 1fr; }

    /* slide-over editors take the whole screen (roles.html keeps its own
       page-local copy of the same rule for .ro-panel) */
    .so-panel { width: 100vw; }
    .so-head, .so-sub, .so-body, .so-foot { padding-left: 16px; padding-right: 16px; }

    /* (.side-panel full-width rule already lives next to its base styles above) */

    /* form rows stack cleanly */
    .form-row { gap: 10px; }
    .form-group { min-width: 100%; }
}

/* dialer self-diagnostics — bottom of the pad, admin Debug mode only */
.phone-diag { background: var(--md-surface-container); border: 1px solid var(--md-outline-variant);
              border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; }
.diag-toggle { display: block; margin: 8px 0 0 auto; border: none; background: none;
               color: var(--md-secondary); font-size: 11px; cursor: pointer; padding: 2px 4px; }
.diag-toggle:hover { color: var(--md-on-surface); text-decoration: underline; }
.phone-diag .diag-row { padding: 2px 0; color: var(--md-secondary); }
.phone-diag .diag-row.ok { color: var(--md-success); }
.phone-diag .diag-row.fail { color: var(--md-error); font-weight: 600; }

/* ============================================================================
   CANONICAL COMPONENTS — use these, do NOT reinvent them in a page <style>.
   filter chip = .chip-toggle (+.on) / chip select = .chip-select
   table = table.setup-tbl (wrap in .tbl-scroll)   status = .status-pill (.on/.off)
   slide-over = .so-overlay + .so-panel (.so-head/.so-body/.so-foot/.so-x)
   form/confirm modal = .ui-modal-backdrop + .ui-modal     input = .form-input
   button = .btn + modifier      pager = .pager
   (Pages kept re-rolling .lg-table/.ro-panel/.lg-chip because these weren't
    shared — they are now.)
   ============================================================================ */
.chip-toggle, .chip-select { font-family: inherit; }
.chip-toggle { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--md-outline);
               background: var(--md-surface); font-size: 13px; cursor: pointer;
               color: var(--md-on-surface); transition: background .2s cubic-bezier(0.4,0,0.2,1); }
.chip-toggle:hover { background: var(--md-surface-container); }
.chip-toggle.on { background: var(--nx-pill-bg); border-color: transparent;
                  color: var(--nx-pill-ink); font-weight: 700; }
.chip-select { padding: 6px 30px 6px 15px; border-radius: 999px; }

/* speed dial — starred contacts as one-tap chips under the keypad */
.speed-dial { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.speed-dial .sd-label { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .05em;
                        color: var(--md-secondary); text-transform: uppercase; }
.sd-chip { border: 1px solid var(--md-outline); background: var(--md-surface); border-radius: var(--md-radius-md);
           padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--md-on-surface);
           cursor: pointer; font-family: inherit; }
.sd-chip:hover { background: var(--nx-pill-bg); border-color: var(--nx-pill-ink); color: var(--nx-pill-ink); }

/* ===================================================================== *
 * Styled <select> enhancer (comms_select.js) — the portal-wide replacement
 * for native browser dropdowns. The real <select> stays in the DOM, visually
 * hidden (.cs-dd-native), as the source of truth; .cs-dd-btn + .cs-dd-menu are
 * the visible control. Tokens match .form-input / .menu-pop so it feels native.
 * ===================================================================== */
.cs-dd { position: relative; display: inline-block; width: 100%; }
/* the native select is hidden but kept in the DOM (so existing JS works); not
   display:none so screen readers / forms still see it as the value holder */
.cs-dd-native {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cs-dd-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    font-family: inherit; font-size: 13px; color: var(--md-on-surface);
    background: var(--md-surface); border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm); padding: 8px 12px; cursor: pointer; line-height: 1.25;
}
.cs-dd-btn:hover { background: var(--md-surface-container); }
/* match the portal's native focus RING (select:focus / .form-input:focus) so the
   styled control feels native, not browser-grey (review fix #7). */
.cs-dd-btn:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}
.cs-dd-open .cs-dd-btn { border-color: var(--md-primary); }
.cs-dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-dd-placeholder { color: var(--md-secondary); }
.cs-dd-caret { color: var(--md-primary); font-size: 12px; line-height: 1; flex: 0 0 auto; }
.cs-dd-open .cs-dd-caret { transform: rotate(180deg); }
.cs-dd-disabled .cs-dd-btn { opacity: .55; cursor: not-allowed; background: var(--md-surface-dim); }
/* compact pill variant for the feed-filter chip-selects (comms.html) */
.cs-dd-compact { width: auto; }
.cs-dd-btn-compact { border-radius: 999px; padding: 6px 12px 6px 15px; font-size: 13px; width: auto; }
.cs-dd-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80;
    background: var(--md-surface); border: 1px solid var(--md-outline);
    /* match .menu-pop's 12px radius (var(--md-radius-md)) so popups feel native */
    border-radius: var(--md-radius-md); box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    padding: 6px; max-height: 280px; overflow-y: auto;
}
.cs-dd-opt {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    font-size: 13px; color: var(--md-on-surface); border-radius: 7px; cursor: pointer;
    white-space: normal;
}
.cs-dd-opt.cs-dd-active { background: var(--md-surface-container); }
.cs-dd-opt.cs-dd-sel { font-weight: 700; color: var(--md-primary); }
.cs-dd-opt-disabled { color: var(--md-secondary); opacity: .6; cursor: not-allowed; }
.cs-dd-opt-disabled.cs-dd-active { background: transparent; }

/* ---- richer greeting picker rows (call_settings.html) ---- */
.cs-gr-row { flex-direction: column; align-items: stretch; gap: 4px; }
.cs-gr-top { display: flex; align-items: center; gap: 8px; }
.cs-gr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cs-gr-voice { color: var(--md-secondary); font-weight: 400; font-size: 12px; }
.cs-gr-chip {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    background: var(--md-surface-container-high); color: var(--md-secondary);
    border-radius: 999px; padding: 2px 8px; flex: 0 0 auto;
}
.cs-gr-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.cs-gr-act {
    border: 1px solid var(--md-outline); background: var(--md-surface);
    border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer;
    font-family: inherit; color: var(--md-on-surface); line-height: 1.2;
}
.cs-gr-act:hover { background: var(--md-surface-container); }
.cs-gr-act.danger:hover { background: var(--md-error-container); color: var(--md-error); border-color: var(--md-error); }
.cs-gr-edit { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cs-gr-edit input { flex: 1; }
.cs-gr-confirm {
    margin-top: 4px; padding: 8px 10px; border-radius: var(--md-radius-sm); font-size: 12.5px;
    background: var(--md-error-container); color: var(--md-on-surface);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* per-row inline feedback (rename/delete result + warnings) — shown right on the
   row the user acted on, not the far-away shared #msg-greeting span (review fix #4) */
.cs-gr-rowmsg {
    margin-top: 4px; padding: 6px 10px; border-radius: var(--md-radius-sm);
    font-size: 12.5px; line-height: 1.4;
}
.cs-gr-rowmsg.ok   { background: var(--md-surface-container); color: var(--md-success); }
.cs-gr-rowmsg.err  { background: var(--md-error-container); color: var(--md-error); }
.cs-gr-rowmsg.warn { background: var(--md-surface-container-high); color: var(--md-on-surface); }
/* a created-date hint on each greeting row so two same-named greetings differ (fix #11) */
.cs-gr-date { color: var(--md-secondary); font-weight: 400; font-size: 11px; flex: 0 0 auto; }

/* ============================================================================
   MOTION POLISH (Dave 2026-06-25) — tasteful micro-interactions, portal-wide.
   Per docs/design_system.md (motion standing-rules, 2026-06-18): ambient/entrance
   belongs on login + empty states ONLY; working screens get micro-interactions
   (hover/press lift, fade, pop); EVERY animation is GPU-friendly (transform/opacity)
   and wrapped in the prefers-reduced-motion guard at the bottom of this block.
   ========================================================================== */
@keyframes nxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nxPop    { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nxGlow   { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.07); } }

/* the CONVERSATION view fades up when you open it — a one-shot nav cue, not looping
   chrome (display toggle restarts it; the silent poll re-renders innerHTML, not
   display, so it doesn't re-fire). Scoped to #threadView only — the dense call feed
   stays motion-free per the design_system rule (no entrance reveals on dense ops
   dashboards). */
#threadView.center { animation: nxFadeUp .26s cubic-bezier(.2,.7,.2,1) both; }

/* buttons + interactive chips gently lift on hover, settle back on press */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.btn:active { transform: translateY(0); box-shadow: none; }
.feed-call-btn, .tc-round, .vm-act, .row-save, .unsaved-tag { transition: transform .12s ease, background .15s ease; }
.feed-call-btn:hover, .tc-round:hover, .vm-act:hover, .row-save:hover { transform: translateY(-1px); }
.feed-call-btn:active, .tc-round:active, .vm-act:active { transform: translateY(0); }

/* cards lift softly on hover */
.card { transition: box-shadow .18s ease, transform .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }

/* the "+" new-call/new-text popover rises in instead of snapping */
.menu-pop.open { animation: nxFadeUp .16s ease both; }

/* a count badge pops when its number changes (loadRail toggles .cnt-pop) — used on
   the left-nav pills AND the top-bar bell badge (the one you actually watch). */
.cnt-pop { animation: nxPop .34s cubic-bezier(.2,.7,.2,1); }

/* LOADING SKELETON — a soft shimmer placeholder so the feed and a conversation feel
   like they're loading instead of sitting blank then snapping in. */
@keyframes nxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel { background: linear-gradient(90deg, var(--md-surface-container) 25%, var(--md-surface-container-high) 50%, var(--md-surface-container) 75%);
        background-size: 200% 100%; animation: nxShimmer 1.3s linear infinite; border-radius: 10px; }
.skel-row { height: 58px; margin: 8px 0; }
.skel-bubble { height: 42px; width: 58%; margin: 14px 24px; border-radius: 14px; }
.skel-bubble.out { margin-left: auto; width: 48%; }

@media (prefers-reduced-motion: reduce) {
    #threadView.center, .menu-pop.open, .cnt-pop { animation: none !important; }
    .skel { animation: none !important; }
    .btn, .btn:hover, .btn:active,
    .feed-call-btn, .tc-round, .vm-act, .row-save, .unsaved-tag,
    .feed-call-btn:hover, .tc-round:hover, .vm-act:hover, .row-save:hover,
    .card, .card:hover { transition: none !important; transform: none !important; box-shadow: none !important; }
}