/*
 * Design system for the VRS client portal.
 *
 * Architecture: two token layers. The raw palette (surfaces, ink, roles) is
 * never consumed by components. The semantic layer — page, card, input,
 * button, segment — is what components read, and it is the only thing a
 * theme overrides. Before this, light and Maple were 700 lines of
 * per-component re-specification, and every new rule had to remember to
 * re-colour itself three times or silently break a theme.
 *
 * Direction: one quiet canvas, solid layered surfaces, hairline structure,
 * and a single green reserved for the call. The 2026-era essentials —
 * consistent 4px rhythm, one segmented-control pattern everywhere tabs
 * appear, real type hierarchy instead of weight-shouting (nothing above
 * 700 now; labels used to go to 900), and motion that stays out of the
 * way at 150ms and disappears entirely under reduced-motion.
 *
 * This is an app for Deaf users: the visual channel is not decoration, it
 * is the channel. That is why the smallest type step is 12px, muted ink
 * never drops below ~4.5:1 on its surface, the focus ring is a hard 3px
 * amber, and touch targets hold at 44px minimum.
 */

/* ========================================================================
 * Raw palette (dark, the default)
 * ======================================================================== */
:root {
    /* Surfaces, deepest to most raised. Solid values, not stacked rgba:
       translucency over a gradient reads as mud once two layers overlap. */
    --vrs-surface-0: #0b1017;
    --vrs-surface-1: #111826;
    --vrs-surface-2: #161f2e;
    --vrs-surface-3: #1d2939;
    --vrs-surface-4: #263549;

    /* Ink. Muted sits near 8:1 on a card, faint near 5:1 — see the note
       above about why neither goes lower. */
    --vrs-text: #edf1f7;
    --vrs-text-muted: #b7c2d3;
    --vrs-text-faint: #8e9aae;
    --vrs-text-on-light: #16202e;

    /* Lines. */
    --vrs-line: rgba(151, 167, 190, 0.14);
    --vrs-line-strong: rgba(151, 167, 190, 0.26);
    --vrs-line-light: #d6dde7;

    /*
     * Roles. Green is the call action and nothing else — the single most
     * important control on the product, and the reason it must not be spent
     * on decoration. Blue carries every other interactive accent (links,
     * focus, active toggles) so green stays unambiguous.
     */
    /*
     * Malka's accent, from whitelabel/malka.json and the brand colour sheet:
     * #F47D22, with #E97A00 as its listed alternate. The mint that was here
     * (#2bd483) is not in the palette at all — it arrived with a design system
     * that picked its own green.
     *
     * The ink is dark on purpose. White on #F47D22 measures 2.69:1 and fails;
     * this ink is 6.51:1 on the base and 7.66:1 on the gradient's lighter end.
     */
    --vrs-accent: #F47D22;
    /* Brand green, for "this is working" — not for the call action. The accent
       was doing both jobs, so a connected indicator turned orange the moment
       the accent did. */
    --vrs-success: #89BD0E;
    --vrs-accent-strong: #FF8E3C;
    --vrs-accent-ink: #2A1402;
    --vrs-accent-deep: #E97A00;
    --vrs-info: #7ab3ff;
    --vrs-info-deep: #2f6fd6;
    --vrs-teal: #7ab3ff;
    --vrs-danger: #e5484d;
    --vrs-danger-soft: #ff8589;
    --vrs-danger-ink: #2b0709;
    --vrs-warn: #f5b84a;

    /* Type scale. Six steps, no more. The small step is 14px, not the 13px
       this file once used — phone numbers and timestamps are the content
       here, and 13px tabular figures on a dark surface made the primary
       reading task the hardest thing on the page. */
    --vrs-text-xs: 12px;
    --vrs-text-sm: 14px;
    --vrs-text-base: 15px;
    --vrs-text-lg: 18px;
    --vrs-text-xl: 22px;
    --vrs-text-2xl: 28px;

    /* Radii. Three steps plus a pill. */
    --vrs-radius-sm: 10px;
    --vrs-radius-md: 14px;
    --vrs-radius-lg: 20px;
    --vrs-radius-pill: 999px;

    /* Spacing, on a 4px grid. */
    --vrs-space-1: 4px;
    --vrs-space-2: 8px;
    --vrs-space-3: 12px;
    --vrs-space-4: 16px;
    --vrs-space-5: 24px;
    --vrs-space-6: 32px;

    /* Motion. One duration, one curve; reduced-motion turns both off. */
    --vrs-motion: 150ms;
    --vrs-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Control heights, so a row of mixed controls still lands on one line. */
    --vrs-control-sm: 36px;
    --vrs-control-md: 44px;
    --vrs-control-lg: 48px;
}

/* ========================================================================
 * Semantic layer — what components consume, and the only thing themes
 * override. Dark (default) values.
 * ======================================================================== */
:root {
    --vrs-page-bg:
        radial-gradient(1100px 520px at 18% -8%, rgba(244, 125, 34, 0.07), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(122, 179, 255, 0.05), transparent 55%),
        var(--vrs-surface-0);
    --vrs-header-bg: rgba(13, 19, 29, 0.78);

    --vrs-card-bg: var(--vrs-surface-2);
    --vrs-card-border: var(--vrs-line);

    /* Inset panels inside a card: state tiles, pickers, chat bubbles. */
    --vrs-panel-bg: rgba(151, 167, 190, 0.07);
    --vrs-panel-bg-hover: rgba(151, 167, 190, 0.12);
    --vrs-panel-border: var(--vrs-line);

    --vrs-input-bg: #0d1420;
    --vrs-input-border: var(--vrs-line-strong);
    --vrs-input-ink: var(--vrs-text);
    --vrs-input-placeholder: var(--vrs-text-faint);
    --vrs-input-focus: var(--vrs-info);

    --vrs-btn-primary-bg: var(--vrs-accent);
    --vrs-btn-primary-bg-hover: var(--vrs-accent-strong);
    --vrs-btn-primary-ink: var(--vrs-accent-ink);

    --vrs-btn-ghost-bg: transparent;
    --vrs-btn-ghost-bg-hover: var(--vrs-surface-3);
    --vrs-btn-ghost-border: var(--vrs-line-strong);
    --vrs-btn-ghost-ink: var(--vrs-text);

    /* The active pill inside a segmented control. Inverted per theme so it
       is always the highest-contrast object in its container. */
    --vrs-segment-active-bg: #e9eef6;
    --vrs-segment-active-ink: var(--vrs-text-on-light);

    --vrs-link: var(--vrs-info);
    --vrs-focus: var(--vrs-warn);
    --vrs-scroll-thumb: rgba(151, 167, 190, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:focus-visible {
    outline: 3px solid var(--vrs-focus);
    outline-offset: 3px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--vrs-page-bg);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--vrs-text);
    font-size: var(--vrs-text-base);
    line-height: 1.5;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Panels that scroll internally (history, contacts) get quiet scrollbars
   rather than the platform default, which on a dark canvas is a bright bar. */
.vrs-grid-cell--paired .section-body,
.home-directory-card .home-tabbed-body,
.composer-picker-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--vrs-scroll-thumb) transparent;
}

.vrs-grid-cell--paired .section-body::-webkit-scrollbar,
.home-directory-card .home-tabbed-body::-webkit-scrollbar,
.composer-picker-panel::-webkit-scrollbar {
    width: 8px;
}

.vrs-grid-cell--paired .section-body::-webkit-scrollbar-thumb,
.home-directory-card .home-tabbed-body::-webkit-scrollbar-thumb,
.composer-picker-panel::-webkit-scrollbar-thumb {
    background: var(--vrs-scroll-thumb);
    border-radius: var(--vrs-radius-pill);
}

/* ========================================================================
 * Header
 * ======================================================================== */
.profile-header {
    gap: var(--vrs-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: var(--vrs-space-3) var(--vrs-space-6);
    background: var(--vrs-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--vrs-line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: var(--vrs-space-3);
    flex: 1 1 auto;
    min-width: 0;
}

.profile-header-logo {
    height: 38px;
    width: auto;
}

.profile-header-title {
    font-size: var(--vrs-text-lg);
    font-weight: 300;
    margin: 0;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header shows the logo alone. The title stays in the document for anyone
   navigating by headings; it is clipped, not display:none, so it remains in
   the accessibility tree as the page's heading. */
.profile-header-title--visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.profile-header-right {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--vrs-space-2);
    justify-content: flex-end;
    min-width: 0;
}

.profile-user-name {
    flex: 0 1 auto;
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    font-weight: 500;
    min-width: 0;
    max-width: min(220px, 28vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================================================
 * Connection status
 *
 * Rendered after the header in the DOM, so it cannot sit inside the bar.
 * Pinned to the container's right edge just below it — a small pill with a
 * state dot, not the orphaned centered grey caption it used to be, which
   read as a stray line of content rather than a status. */
.ws-status {
    align-items: center;
    background: var(--vrs-card-bg);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-text-faint);
    display: flex;
    font-size: var(--vrs-text-xs);
    font-weight: 500;
    gap: var(--vrs-space-2);
    padding: var(--vrs-space-1) var(--vrs-space-3);
    position: absolute;
    right: var(--vrs-space-6);
    top: 78px;
    z-index: 90;
}

.ws-status::before {
    border-radius: 50%;
    content: '';
    height: 7px;
    width: 7px;
}

.ws-connected { color: var(--vrs-text-muted); }
.ws-connected::before { background: var(--vrs-success); }
.ws-disconnected::before { background: var(--vrs-danger-soft); }

/* ========================================================================
 * Buttons — one system
 *
 * Three identities, no more: primary (green, for the actions that place or
 * complete calls), ghost (everything else — navigation, secondary errands),
 * and destructive (red text on ghost). The old file carried six: Material
 * green, Material blue, white-filled, teal-filled, ghost, and dashed — and
   nothing told you which green meant "call" and which meant "save". */
.sign-out-btn,
.profile-nav-btn {
    align-items: center;
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-btn-ghost-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    justify-content: center;
    min-height: var(--vrs-control-sm);
    padding: var(--vrs-space-1) var(--vrs-space-4);
    text-decoration: none;
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease);
    white-space: nowrap;
}

.sign-out-btn:hover,
.profile-nav-btn:hover {
    background: var(--vrs-btn-ghost-bg-hover);
    border-color: var(--vrs-line-strong);
}

.sign-out-btn:hover {
    border-color: rgba(229, 72, 77, 0.5);
    color: var(--vrs-danger-soft);
}

.profile-nav-btn.active {
    background: var(--vrs-surface-3);
    border-color: var(--vrs-line-strong);
    color: var(--vrs-text);
}

.settings-btn {
    background: var(--vrs-btn-primary-bg);
    border: none;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-btn-primary-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    min-height: var(--vrs-control-md);
    padding: var(--vrs-space-2) var(--vrs-space-5);
    transition: background var(--vrs-motion) var(--vrs-ease),
        transform var(--vrs-motion) var(--vrs-ease);
}

.settings-btn:hover { background: var(--vrs-btn-primary-bg-hover); }
.settings-btn:active { transform: scale(0.98); }

.settings-btn.secondary {
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    color: var(--vrs-btn-ghost-ink);
}

.settings-btn.secondary:hover {
    background: var(--vrs-btn-ghost-bg-hover);
}

.quick-action-btn {
    align-items: center;
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    justify-content: center;
    min-height: var(--vrs-control-md);
    padding: var(--vrs-space-2) var(--vrs-space-3);
    text-align: center;
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.quick-action-btn:hover {
    background: var(--vrs-btn-ghost-bg-hover);
    border-color: var(--vrs-line-strong);
}

.start-call-btn {
    width: 100%;
    padding: var(--vrs-space-3) var(--vrs-space-4);
    background: var(--vrs-btn-primary-bg);
    border: none;
    border-radius: var(--vrs-radius-md);
    color: var(--vrs-btn-primary-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-base);
    font-weight: 650;
    min-height: var(--vrs-control-md);
    transition: background var(--vrs-motion) var(--vrs-ease),
        transform var(--vrs-motion) var(--vrs-ease);
}

.start-call-btn:hover { background: var(--vrs-btn-primary-bg-hover); }
.start-call-btn:active { transform: scale(0.98); }

/* Blue is gone from the dialer: it is a path to the same green action. */
.dialer-btn {
    padding: var(--vrs-space-2) var(--vrs-space-5);
    background: var(--vrs-btn-primary-bg);
    border: none;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-btn-primary-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    min-height: var(--vrs-control-md);
    transition: background var(--vrs-motion) var(--vrs-ease);
    white-space: nowrap;
}

.dialer-btn:hover { background: var(--vrs-btn-primary-bg-hover); }
.dialer-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.join-room-btn {
    padding: var(--vrs-space-1) var(--vrs-space-4);
    background: var(--vrs-btn-primary-bg);
    border: none;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-btn-primary-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    min-height: var(--vrs-control-sm);
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.join-room-btn:hover { background: var(--vrs-btn-primary-bg-hover); }

.call-back-btn {
    padding: var(--vrs-space-1) var(--vrs-space-3);
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    min-height: var(--vrs-control-sm);
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.call-back-btn:hover { background: var(--vrs-btn-ghost-bg-hover); }

.sign-out-btn:focus-visible,
.profile-nav-btn:focus-visible,
.settings-btn:focus-visible,
.quick-action-btn:focus-visible,
.start-call-btn:focus-visible,
.dialer-btn:focus-visible,
.composer-route-tab:focus-visible,
.composer-input:focus-visible,
.composer-vco-toggle:focus-visible,
.composer-start-btn:focus-visible,
.composer-picker-item:focus-visible,
.composer-participant-chip:focus-visible,
.account-context-select:focus-visible,
.account-context-input:focus-visible,
.account-context-notes:focus-visible,
.join-room-btn:focus-visible,
.call-back-btn:focus-visible,
.add-speed-dial-btn:focus-visible,
.contact-card:focus-visible,
.speed-dial-card:focus-visible {
    outline: 3px solid var(--vrs-focus);
    outline-offset: 3px;
}

/* ========================================================================
 * Main layout
 * ======================================================================== */
.profile-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--vrs-space-6) var(--vrs-space-5) 80px;
    display: grid;
    gap: var(--vrs-space-5);
}

.profile-hero {
    display: grid;
    gap: var(--vrs-space-5);
    grid-template-columns: minmax(420px, 1.1fr) minmax(0, 0.9fr);
    align-items: stretch;
}

.profile-hero.vrs-home-hero {
    grid-template-columns: 1fr;
}

.vrs-home-lower {
    display: grid;
    gap: var(--vrs-space-5);
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: start;
}

.profile-stack {
    display: grid;
    gap: var(--vrs-space-5);
}

.profile-summary {
    display: grid;
    gap: var(--vrs-space-4);
}

.profile-summary-top {
    align-items: start;
    display: flex;
    justify-content: space-between;
    gap: var(--vrs-space-4);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--vrs-space-3);
}

.vrs-action-strip {
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 0.7fr) minmax(260px, 1fr);
}

.vrs-secondary-actions,
.dialer-actions {
    display: grid;
    gap: var(--vrs-space-2);
}

.vrs-action-strip .dialer-row {
    margin-bottom: 0;
}

.vrs-action-strip .start-call-btn,
.vrs-action-strip .quick-action-btn,
.vrs-action-strip .dialer-btn {
    min-height: var(--vrs-control-md);
    padding: var(--vrs-space-2) var(--vrs-space-3);
}

/* ========================================================================
 * Cards and sections
 * ======================================================================== */
.card {
    background: var(--vrs-card-bg);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-lg);
    padding: var(--vrs-space-5);
}

.card-title {
    font-size: var(--vrs-text-base);
    font-weight: 650;
    margin-bottom: var(--vrs-space-4);
    color: var(--vrs-text);
    display: flex;
    align-items: center;
    gap: var(--vrs-space-2);
}

.section-card {
    padding: 0;
    overflow: hidden;
}

.section-card > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--vrs-text-base);
    font-weight: 650;
    justify-content: space-between;
    list-style: none;
    padding: var(--vrs-space-4) var(--vrs-space-5);
}

.section-card > summary::-webkit-details-marker {
    display: none;
}

.section-card > summary::after {
    content: '+';
    font-size: var(--vrs-text-lg);
    font-weight: 500;
    opacity: 0.55;
}

.section-card[open] > summary::after {
    content: '-';
}

.section-body {
    border-top: 1px solid var(--vrs-line);
    padding: var(--vrs-space-5);
}

.settings-view {
    max-width: 980px;
}

.profile-alert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vrs-space-5);
}

.profile-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vrs-space-5);
    align-items: start;
}

.profile-section-column {
    display: grid;
    gap: var(--vrs-space-5);
}

.settings-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--vrs-space-5);
}

.settings-group {
    display: grid;
    gap: var(--vrs-space-3);
}

.settings-group-title {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.settings-help {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    line-height: 1.5;
}

/* VRS Number card */
.vrs-number {
    font-size: var(--vrs-text-2xl);
    font-weight: 700;
    color: var(--vrs-accent);
    margin: var(--vrs-space-2) 0 var(--vrs-space-4);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.vrs-number-label {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ========================================================================
 * Segmented controls and filter pills
 *
 * One pattern everywhere tabs appear. The page used to run three different
 * tab systems at once — teal-underlined panel tabs, white-pill route tabs,
 * and outline filter pills — which is a large part of why it read as
   cluttered: the eye had to relearn "selected" three times per screen. */
.composer-route-tabs {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    display: grid;
    grid-auto-columns: minmax(74px, 1fr);
    grid-auto-flow: column;
    min-height: 44px;
    overflow: hidden;
    padding: 3px;
}

.composer-route-tab {
    background: transparent;
    border: 0;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    min-height: 38px;
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease);
}

.composer-route-tab:hover {
    color: var(--vrs-text);
}

.composer-route-tab.active {
    background: var(--vrs-segment-active-bg);
    color: var(--vrs-segment-active-ink);
}

/* Every panel had exactly two tabs, so this was repeat(2, 1fr). The merged
   reference panel has four, which wrapped them into two stretched rows that
   read as two separate tab strips. auto-fit sizes to however many there are. */
.home-panel-tabs {
    display: grid;
    flex: 0 0 auto;
    gap: var(--vrs-space-1);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: var(--vrs-space-2) var(--vrs-space-2) 0;
}

.home-panel-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--vrs-text-muted);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    gap: var(--vrs-space-2);
    justify-content: center;
    margin-bottom: calc(-1 * var(--vrs-space-2));
    min-height: 44px;
    padding: var(--vrs-space-2) var(--vrs-space-2) var(--vrs-space-3);
    transition: color var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.home-panel-tab:only-child {
    grid-column: 1 / -1;
}

.home-panel-tab:hover {
    color: var(--vrs-text);
}

.home-panel-tab.is-active {
    border-bottom-color: var(--vrs-accent);
    color: var(--vrs-text);
}

.home-tabbed-body {
    border-top: 1px solid var(--vrs-line);
    padding: var(--vrs-space-4) var(--vrs-space-4) var(--vrs-space-5);
}

.home-tabbed-card,
.home-activity-card {
    min-height: 0;
}

/* The composer panel shares a three-across grid row, so its card is ~370px
   wide even on a 1440px window. The composer's side-by-side rows are sized
   for the wide cards it was written against, and a viewport media query
   cannot see this — only the container can. Making the card a container and
   responding to its width keeps the same layout in wide hosts and stacks
   gracefully in the grid cell, at any window size. */
.home-call-card {
    container-type: inline-size;
}

.home-directory-card .home-tabbed-body {
    max-height: min(680px, 72vh);
    overflow-y: auto;
}

.call-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
    margin-bottom: var(--vrs-space-3);
}

.call-filter-tab {
    background: transparent;
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-xs);
    font-weight: 600;
    padding: 5px 12px;
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease);
}

.call-filter-tab:hover {
    background: var(--vrs-panel-bg-hover);
    color: var(--vrs-text);
}

.call-filter-tab.is-active {
    background: var(--vrs-surface-4);
    border-color: transparent;
    color: var(--vrs-text);
}

/* Sits with the filters but is a destructive action, not a filter — pushed to
   the far end and tinted so it cannot be hit by accident while filtering. */
.call-history-clear {
    margin-left: auto;
    color: var(--vrs-danger-soft);
}

.call-history-clear:hover {
    background: rgba(229, 72, 77, 0.14);
}

.call-filter-tab:focus-visible,
.dialpad-key:focus-visible,
.dialpad-secondary:focus-visible {
    outline: 2px solid var(--vrs-focus);
    outline-offset: 2px;
}

/* ========================================================================
 * Fields
 *
 * One field treatment for every input, select and textarea; before, the
 * composer, dialer, settings and auth surfaces each specified their own. */
.composer-input,
.account-context-select,
.account-context-input,
.account-context-notes,
.settings-input,
.settings-select,
.settings-textarea,
.inline-form input,
.dialer-input,
.contact-search,
.auth-field,
.vri-invite-input {
    background: var(--vrs-input-bg);
    border: 1px solid var(--vrs-input-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-input-ink);
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    min-height: var(--vrs-control-md);
    padding: var(--vrs-space-2) var(--vrs-space-3);
    transition: border-color var(--vrs-motion) var(--vrs-ease),
        box-shadow var(--vrs-motion) var(--vrs-ease);
}

.composer-input {
    font-size: var(--vrs-text-base);
    min-height: var(--vrs-control-lg);
    padding: 0 var(--vrs-space-4);
}

.composer-input::placeholder,
.account-context-input::placeholder,
.account-context-notes::placeholder,
.inline-form input::placeholder,
.dialer-input::placeholder,
.contact-search::placeholder,
.auth-field::placeholder {
    color: var(--vrs-input-placeholder);
}

.composer-input:focus,
.account-context-select:focus,
.account-context-input:focus,
.account-context-notes:focus,
.settings-input:focus,
.settings-select:focus,
.settings-textarea:focus,
.inline-form input:focus,
.dialer-input:focus,
.contact-search:focus,
.auth-field:focus {
    outline: none;
    border-color: var(--vrs-input-focus);
    box-shadow: 0 0 0 3px rgba(122, 179, 255, 0.18);
}

.account-context-select option,
.settings-select option,
.self-device-select option {
    background: var(--vrs-surface-1);
    color: var(--vrs-text);
}

.account-context-notes,
.settings-textarea {
    min-height: 76px;
    resize: vertical;
}

.dialer-input {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: var(--vrs-text-base);
    letter-spacing: 0.02em;
}

/* ========================================================================
 * New-call composer
 * ======================================================================== */
.vrs-call-composer {
    display: grid;
    gap: var(--vrs-space-4);
}

.composer-header {
    align-items: start;
    display: grid;
    gap: var(--vrs-space-4);
    grid-template-columns: minmax(220px, 1fr) minmax(260px, auto);
}

.composer-eyebrow,
.composer-picker-title {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.composer-title {
    color: var(--vrs-text);
    font-size: var(--vrs-text-lg);
    font-weight: 650;
    line-height: 1.25;
    margin: var(--vrs-space-1) 0 0;
}

/*
 * country chip | input | VCO, with the start button on its own line beneath.
 *
 * Four controls across left the input at ~200px — narrower than its own
 * button, in the field the page exists for. Dropping the button to its own row
 * gives the input the width instead, and makes the primary action full-width,
 * which is what it should have been while it was a standalone button.
 */
.composer-input-row {
    align-items: stretch;
    display: grid;
    gap: var(--vrs-space-2);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.composer-start-btn {
    grid-column: 1 / -1;
}

.composer-vco-toggle,
.composer-start-btn,
.composer-picker-item,
.composer-participant-chip {
    border-radius: var(--vrs-radius-sm);
    cursor: pointer;
    font-family: inherit;
}

.composer-vco-toggle {
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    font-weight: 700;
    min-height: var(--vrs-control-lg);
    padding: 0 var(--vrs-space-4);
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.composer-vco-toggle.active {
    background: rgba(122, 179, 255, 0.18);
    border-color: rgba(122, 179, 255, 0.5);
    color: var(--vrs-info);
}

.composer-start-btn {
    background: var(--vrs-btn-primary-bg);
    border: 0;
    color: var(--vrs-btn-primary-ink);
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    min-height: var(--vrs-control-lg);
    padding: 0 var(--vrs-space-5);
    white-space: nowrap;
    transition: background var(--vrs-motion) var(--vrs-ease),
        transform var(--vrs-motion) var(--vrs-ease);
}

.composer-start-btn:hover { background: var(--vrs-btn-primary-bg-hover); }
.composer-start-btn:active { transform: scale(0.98); }

.composer-help,
.composer-status,
.composer-empty {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    line-height: 1.5;
}

/* Live "Will dial +1 (604) 365-9444" confirmation under the phone input.
   Empty until the number is dialable, so it never renders as a stray line. */
.composer-dial-preview {
    color: var(--vrs-accent);
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    line-height: 1.4;
    min-height: 0;
    font-variant-numeric: tabular-nums;
}

.composer-dial-preview:empty {
    display: none;
}

.composer-status {
    color: var(--vrs-warn);
}

.composer-participant-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--vrs-space-2);
    min-height: 38px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.composer-participant-chip {
    align-items: center;
    background: rgba(122, 179, 255, 0.14);
    border: 1px solid rgba(122, 179, 255, 0.32);
    color: var(--vrs-text);
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--vrs-space-2);
    min-height: 36px;
    max-width: 260px;
    padding: 0 var(--vrs-space-3);
}

.composer-participant-chip small {
    color: var(--vrs-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-participant-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-picker-grid {
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.composer-picker-panel {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    display: grid;
    gap: var(--vrs-space-2);
    max-height: 282px;
    min-width: 0;
    overflow-y: auto;
    padding: var(--vrs-space-3);
}

.composer-picker-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--vrs-text);
    display: grid;
    gap: 2px;
    min-height: 52px;
    min-width: 0;
    padding: var(--vrs-space-2) var(--vrs-space-3);
    text-align: left;
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.composer-picker-item:hover {
    background: var(--vrs-panel-bg-hover);
    border-color: var(--vrs-panel-border);
}

.composer-picker-name,
.composer-picker-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-picker-name {
    font-size: var(--vrs-text-sm);
    font-weight: 600;
}

.composer-picker-meta {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
}

/* Narrow host (the home-grid cell): stack what cannot fit. The route tabs
   drop under the title, and the input row becomes field-above,
   toggle-and-start-below, so the Start button never clips. */
@container (max-width: 520px) {
    .composer-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .composer-input-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .composer-input {
        grid-column: 1 / -1;
    }
}

/* Legacy composer classes kept for older surfaces still rendering them. */
.vrs-composer { display: flex; flex-direction: column; gap: var(--vrs-space-4); }
.composer-chips { display: flex; flex-wrap: wrap; gap: var(--vrs-space-2); }
.composer-chip {
    background: var(--vrs-panel-bg); color: var(--vrs-text-muted);
    border: 1px solid var(--vrs-panel-border); border-radius: var(--vrs-radius-pill);
    cursor: pointer; font-family: inherit; font-size: var(--vrs-text-sm); font-weight: 600; padding: 7px 14px;
}
.composer-chip:hover { background: var(--vrs-panel-bg-hover); color: var(--vrs-text); }
.composer-routes { display: flex; gap: var(--vrs-space-3); }
.composer-primary {
    flex: 2; background: var(--vrs-btn-primary-bg); color: var(--vrs-btn-primary-ink); border: none;
    border-radius: var(--vrs-radius-sm); cursor: pointer; font-family: inherit; font-size: var(--vrs-text-base); font-weight: 650;
    padding: var(--vrs-space-3) var(--vrs-space-4);
}
.composer-primary:hover { background: var(--vrs-btn-primary-bg-hover); }
.composer-secondary {
    flex: 1; background: var(--vrs-btn-ghost-bg); color: var(--vrs-text);
    border: 1px solid var(--vrs-btn-ghost-border); border-radius: var(--vrs-radius-sm);
    cursor: pointer; font-family: inherit; font-size: var(--vrs-text-base); font-weight: 600; padding: var(--vrs-space-3);
}
.composer-secondary:hover { background: var(--vrs-btn-ghost-bg-hover); }
.composer-hint { font-size: var(--vrs-text-xs); color: var(--vrs-text-muted); line-height: 1.5; }

/* ========================================================================
 * Call settings (caller ID, interpreter notes)
 * ======================================================================== */
.vrs-account-context {
    display: grid;
    gap: var(--vrs-space-3);
}

.account-context-main {
    align-items: start;
    display: grid;
    gap: var(--vrs-space-4);
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 0.8fr);
}

.account-context-fields {
    display: grid;
    gap: var(--vrs-space-2);
}

.account-context-label {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
}

.account-context-pending {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
}

.account-number-request {
    border-top: 1px solid var(--vrs-line);
    padding-top: var(--vrs-space-3);
}

.account-number-request summary {
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
}

.account-number-request-grid {
    display: grid;
    gap: var(--vrs-space-2);
    grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
    margin-top: var(--vrs-space-3);
}

/* ========================================================================
 * Self preview
 * ======================================================================== */
.self-preview-card {
    display: grid;
    gap: var(--vrs-space-3);
    min-width: 0;
    overflow: hidden;
}

.self-preview-frame {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #060a10;
    border: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius-md);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: clamp(280px, 34vw, 500px);
}

/* contain, not cover: cover fills the frame by cropping, which silently cuts
   the top of someone's head off when the camera's aspect ratio does not match
   the frame's. Letterboxing is the honest trade — on a signing product, the
   part of the picture that gets cropped is the part that carries the
   language. */
.self-preview-frame video {
    height: 100%;
    object-fit: contain;
    transform: scaleX(-1);
    width: 100%;
}

/* In flow, under the video.

   This was absolutely positioned in the frame's bottom-right corner and
   revealed on focus-within, which clipped against the frame edge and covered
   the picture it configures. Auto-fit means the two pickers sit side by side
   when there is room and stack when there is not, without a breakpoint. */
.self-device-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    /* flex, not auto-fit grid: there are exactly two controls, and auto-fit
       resolves to four tracks on a wide stacked layout, leaving the pair
       huddled at the left with dead space beside them. flex-wrap gives the
       same "side by side, then stacked" behaviour with no phantom columns. */
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2) var(--vrs-space-4);
    margin-top: var(--vrs-space-3);
    opacity: 1;
    padding: 0;
    pointer-events: auto;
    position: static;
    transform: none;
    width: 100%;
}

.self-device-panel .self-device-row {
    align-items: center;
    display: flex;
    /* Grow to share the row, but wrap rather than squeezing a device name
       down to an ellipsis. */
    flex: 1 1 240px;
    gap: var(--vrs-space-2);
    min-width: 0;
}

.self-device-panel .self-device-select {
    flex: 1 1 auto;
    min-width: 0;
}

.self-preview-frame:hover .self-device-panel,
.self-preview-frame:focus-within .self-device-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.self-device-row {
    display: grid;
    gap: var(--vrs-space-1);
}

.self-device-label {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* The selects follow the standard field treatment rather than the old bright
   white boxes, which were the loudest objects on the page for a control
   nobody looks at twice. */
.self-device-select {
    background: var(--vrs-input-bg);
    border: 1px solid var(--vrs-input-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-input-ink);
    font: inherit;
    font-size: var(--vrs-text-sm);
    min-width: 0;
    padding: var(--vrs-space-2) var(--vrs-space-2);
    width: 100%;
}

/* Height follows the column width through aspect-ratio rather than a fixed
   clamp, so the panel is sized by the layout instead of the layout being sized
   around the panel. max-height keeps a very wide window from turning the video
   into a billboard and pushing everything else below the fold. */
.vrs-callbar-preview .self-preview-frame {
    aspect-ratio: 16 / 9;
    max-height: 58vh;
    min-height: 0;
}

.self-preview-placeholder {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    line-height: 1.5;
    padding: var(--vrs-space-5);
    text-align: center;
}

.self-preview-status {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    line-height: 1.5;
}

.self-preview-actions {
    display: flex;
    gap: var(--vrs-space-2);
}

.self-preview-actions .settings-btn {
    flex: 1;
}

/* ========================================================================
 * The call bar
 *
 * The home screen used to bury its primary action three levels deep — inside
 * the second sub-tab of the fourth grid cell. This is the correction: calling
 * takes the top of the page at full width, and nothing sits beside it
 * competing for the same glance.
 *
 * Self-video is the larger half deliberately. On a product for Deaf users the
 * visual channel is the channel, and this is where someone checks their
 * framing and their light before they start signing. */
.vrs-callbar {
    display: grid;
    /* The self view keeps the larger half. On a product for Deaf users the
       visual channel is the channel, and this is where you check your framing
       and your light before you start — the composer moving in here does not
       change that. The room the composer needs comes from the start button
       taking its own line instead, not from the camera. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--vrs-space-5);
    align-items: start;
    background: linear-gradient(180deg, rgba(244, 125, 34, 0.04), transparent 46%),
        var(--vrs-card-bg);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-lg);
    padding: var(--vrs-space-5);
    margin-bottom: var(--vrs-space-4);
}

.vrs-callbar-self {
    min-width: 0;
}

/* Fills its half; the preview inside keeps its own aspect ratio. */
.vrs-callbar-preview {
    width: 100%;
    margin: 0;
}

.vrs-callbar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--vrs-space-3);
    min-width: 0;
}

/*
 * One green button, and green is spent on nothing else on this page. An accent
 * used everywhere stops meaning anything, and this is the control the whole
 * product exists to offer. The glow is subtle on purpose: it marks the
 * control without turning the page into a dashboard.
 */
.vrs-call-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vrs-space-3);
    width: 100%;
    min-height: 76px;
    padding: var(--vrs-space-4) var(--vrs-space-5);
    background: linear-gradient(180deg, var(--vrs-accent-strong), var(--vrs-accent));
    border: none;
    border-radius: var(--vrs-radius-md);
    box-shadow: 0 10px 34px rgba(244, 125, 34, 0.28);
    color: var(--vrs-accent-ink);
    font-family: inherit;
    font-size: var(--vrs-text-xl);
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow var(--vrs-motion) var(--vrs-ease),
        transform var(--vrs-motion) var(--vrs-ease),
        filter var(--vrs-motion) var(--vrs-ease);
}

.vrs-call-primary:hover {
    box-shadow: 0 14px 44px rgba(244, 125, 34, 0.36);
    filter: brightness(1.03);
}

.vrs-call-primary:active { transform: scale(0.99); }

/* The "●" glyph in the markup becomes a live dot rather than a text
   character sitting mid-baseline. */
.vrs-call-primary-icon {
    background: currentColor;
    border-radius: 50%;
    font-size: 0;
    height: 11px;
    line-height: 1;
    width: 11px;
}

.vrs-callbar-hint {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    margin: 0;
    text-align: center;
}

.vrs-callbar-secondary {
    display: flex;
    justify-content: center;
}

/* Quiet on purpose: calling a phone number is the less common errand, and a
   second filled button would make the page ask which one you meant. */
.vrs-call-secondary {
    background: transparent;
    border: 1px solid var(--vrs-btn-ghost-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    min-height: var(--vrs-control-sm);
    padding: var(--vrs-space-2) var(--vrs-space-4);
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.vrs-call-secondary:hover { background: var(--vrs-btn-ghost-bg-hover); }

/* On a phone the two halves stack, and the call button stays first because it
   is still the reason the page exists. */
@media (max-width: 900px) {
    .vrs-callbar {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vrs-space-4);
        padding: var(--vrs-space-4);
    }

    .vrs-callbar-actions { order: -1; }
}

/* ========================================================================
 * Favourites
 *
 * People, as faces you press. auto-fit rather than a fixed count so one
 * favourite does not stretch across the page and six do not crush. */
.vrs-favourites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--vrs-space-3);
    margin-bottom: var(--vrs-space-4);
}

.vrs-favourite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vrs-space-2);
    background: var(--vrs-card-bg);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-md);
    color: var(--vrs-text);
    cursor: pointer;
    font-family: inherit;
    padding: var(--vrs-space-4) var(--vrs-space-3);
    transition: border-color var(--vrs-motion) var(--vrs-ease),
        background var(--vrs-motion) var(--vrs-ease),
        transform var(--vrs-motion) var(--vrs-ease);
}

.vrs-favourite:hover {
    background: var(--vrs-surface-3);
    border-color: var(--vrs-line-strong);
    transform: translateY(-1px);
}

.vrs-favourite-avatar {
    align-items: center;
    background: rgba(244, 125, 34, 0.14);
    border: 1px solid rgba(244, 125, 34, 0.3);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-accent);
    display: flex;
    font-size: var(--vrs-text-base);
    font-weight: 650;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.vrs-favourite-name {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================================================
 * Client home grid
 *
 * Three reference panels, sized by the room available rather than by a
 * column count; auto-fit means the row reflows at any width instead of at
 * two hand-chosen breakpoints.
 */
.vrs-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--vrs-space-5);
    align-items: start;
}

.vrs-grid-cell {
    min-width: 0;
}

.vrs-grid-cell:empty {
    display: none;
}

/* The panels are peers: equal width by span, equal height because each cell
   stretches to the taller of the pair and the card fills its cell. Without
   the card filling it, the shorter panel floats with a gap under it and the
   row looks broken rather than balanced. The cap exists so a history that
   runs to hundreds of calls does not decide how tall the page is — 460px
   was cramped for a list this page is about; it now breathes at 540. */
.vrs-grid-cell--paired {
    align-self: stretch;
}

.vrs-grid-cell--paired > .card,
.vrs-grid-cell--paired > .section-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 540px;
}

.vrs-grid-cell--paired > .home-tabbed-card {
    height: 100%;
}

.vrs-home-followups {
    display: grid;
    gap: var(--vrs-space-4);
}

.vrs-grid-cell--paired .section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 1040px) {
    .vrs-grid-cell,
    .vrs-grid-cell--paired {
        grid-column: 1 / -1;
    }

    /* Stacked, each panel gets more of the viewport before it scrolls. */
    .vrs-grid-cell--paired > .section-card {
        max-height: 60vh;
    }

    /* The desktop 66vh minimum combines with aspect-ratio to force a frame
       wider than a phone. Let width own the 4:3 size once things stack. */
    .vrs-callbar-preview .self-preview-frame {
        min-height: 0;
        width: 100%;
    }
}

/* ========================================================================
 * Call history
 * ======================================================================== */
.call-item {
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--vrs-space-3) var(--vrs-space-2);
    border-bottom: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius-sm);
}

.call-item:last-child {
    border-bottom: none;
}

/* Direction in a chip, not a bare glyph: a 20px arrow at 0.5 opacity was
   doing identification work it could not carry. */
.call-item-glyph {
    align-items: center;
    background: var(--vrs-panel-bg);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    display: flex;
    font-size: var(--vrs-text-sm);
    height: 32px;
    justify-content: center;
    width: 32px;
}

.call-item--incoming .call-item-glyph {
    color: var(--vrs-info);
    background: rgba(122, 179, 255, 0.12);
}

/* A missed call is the one row state worth colouring — it is the only one
   that asks the user to do something. */
.call-item--missed .call-item-glyph {
    color: var(--vrs-danger-soft);
    background: rgba(229, 72, 77, 0.14);
}

.call-item-main {
    min-width: 0;
}

/* The number or handle is the identity of the row, so it gets the weight and
   the tabular figures — a column of phone numbers that do not line up is
   markedly harder to scan. */
.call-headline {
    color: var(--vrs-text);
    font-size: var(--vrs-text-base);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-meta {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-date {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-sm);
}

.call-duration {
    color: var(--vrs-accent);
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.call-interpreter {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    margin-top: 2px;
}

.call-time {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    white-space: nowrap;
}

.call-actions {
    align-items: center;
    display: grid;
    gap: var(--vrs-space-2);
    justify-items: end;
}

.call-log-empty {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
}

.chat-log-detail {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    margin-top: var(--vrs-space-5);
    padding: var(--vrs-space-4);
}

.chat-log-header {
    align-items: flex-start;
    display: flex;
    gap: var(--vrs-space-4);
    justify-content: space-between;
    margin-bottom: var(--vrs-space-4);
}

.chat-log-messages {
    display: grid;
    gap: var(--vrs-space-3);
}

.chat-log-message {
    background: rgba(11, 16, 23, 0.55);
    border-radius: var(--vrs-radius-md);
    padding: var(--vrs-space-3);
}

.chat-log-message-meta {
    align-items: center;
    color: var(--vrs-text-faint);
    display: flex;
    gap: var(--vrs-space-3);
    justify-content: space-between;
    font-size: var(--vrs-text-xs);
}

.chat-log-message-body {
    margin-top: var(--vrs-space-1);
    white-space: pre-wrap;
    word-break: break-word;
}

.empty-state {
    color: var(--vrs-text-faint);
    text-align: center;
    padding: var(--vrs-space-6) var(--vrs-space-4);
    font-size: var(--vrs-text-sm);
}

.loading {
    color: var(--vrs-text-muted);
    text-align: center;
    padding: 40px;
}

/* ========================================================================
 * Dialpad
 * ======================================================================== */
.dialpad {
    margin-top: var(--vrs-space-3);
}

.dialpad-toggle {
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    padding: var(--vrs-space-2) 0;
}

.dialpad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vrs-space-2);
    /* Keeps the keys thumb-sized on a phone without letting them sprawl on a
       wide desktop window. */
    max-width: 320px;
    margin: var(--vrs-space-2) 0;
}

.dialpad-key {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    color: var(--vrs-text);
    cursor: pointer;
    display: grid;
    font-family: inherit;
    gap: 1px;
    justify-items: center;
    /* 44px is the minimum comfortable touch target. */
    min-height: 52px;
    padding: var(--vrs-space-1) 0;
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.dialpad-key:hover {
    background: var(--vrs-panel-bg-hover);
}

.dialpad-key:active {
    background: var(--vrs-surface-4);
}

.dialpad-digit {
    font-size: var(--vrs-text-lg);
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dialpad-letters {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    letter-spacing: 1px;
    min-height: 14px;
}

.dialpad-controls {
    display: flex;
    gap: var(--vrs-space-2);
    max-width: 320px;
}

.dialpad-secondary {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    flex: 1;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    min-height: var(--vrs-control-sm);
    padding: var(--vrs-space-2);
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.dialpad-secondary:hover {
    background: var(--vrs-panel-bg-hover);
}

/* ========================================================================
 * Phone dialer (legacy row)
 * ======================================================================== */
.dialer-row {
    display: flex;
    gap: var(--vrs-space-2);
    margin-bottom: var(--vrs-space-4);
}

.vrs-dialer-row {
    align-items: stretch;
}

/* ========================================================================
 * Speed dial
 * ======================================================================== */
.speed-dial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--vrs-space-3);
    margin-bottom: var(--vrs-space-4);
}

.speed-dial-card {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    padding: var(--vrs-space-4);
    cursor: pointer;
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
    position: relative;
}

.speed-dial-card:hover {
    background: var(--vrs-panel-bg-hover);
    border-color: var(--vrs-line-strong);
}

.speed-dial-name {
    color: var(--vrs-text);
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    margin-bottom: var(--vrs-space-1);
}

.speed-dial-number {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-sm);
    font-variant-numeric: tabular-nums;
}

.speed-dial-actions {
    position: absolute;
    top: var(--vrs-space-2);
    right: var(--vrs-space-2);
    display: flex;
    gap: var(--vrs-space-1);
}

.speed-dial-actions button {
    background: var(--vrs-surface-3);
    border: none;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-xs);
    font-weight: 600;
    padding: 3px 8px;
    opacity: 0;
    transition: opacity var(--vrs-motion) var(--vrs-ease);
}

.speed-dial-card:hover .speed-dial-actions button,
.speed-dial-card:focus-within .speed-dial-actions button {
    opacity: 1;
}

.speed-dial-actions button:hover {
    color: var(--vrs-text);
    background: var(--vrs-surface-4);
}

.add-speed-dial-btn {
    width: 100%;
    padding: var(--vrs-space-3);
    background: transparent;
    border: 1px dashed var(--vrs-line-strong);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    min-height: var(--vrs-control-md);
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.add-speed-dial-btn:hover {
    background: var(--vrs-panel-bg);
    color: var(--vrs-text);
    border-color: var(--vrs-accent);
}

/* ========================================================================
 * Contacts
 * ======================================================================== */
.contacts-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
    margin-bottom: var(--vrs-space-4);
}

.contact-search {
    flex: 1 1 180px;
}

.contact-card {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    cursor: pointer;
    display: flex;
    gap: var(--vrs-space-3);
    padding: var(--vrs-space-3);
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.contact-card + .contact-card {
    margin-top: var(--vrs-space-2);
}

.contact-card:hover {
    background: var(--vrs-panel-bg-hover);
    border-color: var(--vrs-line-strong);
}

.contact-avatar {
    align-items: center;
    background: rgba(244, 125, 34, 0.14);
    border: 1px solid rgba(244, 125, 34, 0.3);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-accent);
    display: flex;
    flex: 0 0 40px;
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.contact-main {
    min-width: 0;
}

.contact-name {
    color: var(--vrs-text);
    font-size: var(--vrs-text-sm);
    font-weight: 600;
}

.contact-meta {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-detail {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    margin-top: var(--vrs-space-4);
    padding: var(--vrs-space-4);
}

.contact-detail-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: var(--vrs-space-3);
    margin-bottom: var(--vrs-space-3);
}

.contact-detail-title {
    color: var(--vrs-text);
    font-size: var(--vrs-text-lg);
    font-weight: 650;
}

.contact-detail-subtitle {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    margin-top: var(--vrs-space-1);
}

.timeline-item,
.note-item {
    border-top: 1px solid var(--vrs-line);
    padding: var(--vrs-space-3) 0;
}

.timeline-title,
.note-content {
    color: var(--vrs-text);
    font-size: var(--vrs-text-sm);
    line-height: 1.5;
}

.timeline-time,
.note-time {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    margin-top: 2px;
}

.contact-import-grid {
    display: grid;
    gap: var(--vrs-space-2);
    margin-top: var(--vrs-space-3);
}

.contacts-import-tools { margin-bottom: var(--vrs-space-3); }
.contacts-import-tools > summary {
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    padding: var(--vrs-space-1) 0;
}
.contacts-import-tools[open] > summary { color: var(--vrs-text); }

/* Inline form */
.inline-form {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    padding: var(--vrs-space-4);
    margin-bottom: var(--vrs-space-4);
}

.inline-form input {
    width: 100%;
    margin-bottom: var(--vrs-space-2);
}

.inline-form-actions {
    display: flex;
    gap: var(--vrs-space-2);
}

.inline-form-actions button {
    flex: 1;
    padding: var(--vrs-space-2);
    border: none;
    border-radius: var(--vrs-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 650;
    min-height: var(--vrs-control-md);
}

.btn-save {
    background: var(--vrs-btn-primary-bg);
    color: var(--vrs-btn-primary-ink);
}

.btn-save:hover { background: var(--vrs-btn-primary-bg-hover); }

.btn-cancel {
    background: var(--vrs-btn-ghost-bg);
    border: 1px solid var(--vrs-btn-ghost-border);
    color: var(--vrs-text);
}

.btn-cancel:hover { background: var(--vrs-btn-ghost-bg-hover); }

/* ========================================================================
 * VideoMail
 * ======================================================================== */
.your-number-card .your-number-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
    margin: var(--vrs-space-3) 0 var(--vrs-space-2);
}

.number-chip {
    background: var(--vrs-panel-bg);
    color: var(--vrs-text-muted);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    padding: var(--vrs-space-2) var(--vrs-space-4);
    font-variant-numeric: tabular-nums;
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.number-chip:hover {
    background: var(--vrs-panel-bg-hover);
    color: var(--vrs-text);
}

.number-chip.active {
    background: rgba(244, 125, 34, 0.14);
    border-color: rgba(244, 125, 34, 0.42);
    color: var(--vrs-accent);
}

.your-number-hint {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
}

.vm-badge {
    background: var(--vrs-danger);
    border-radius: var(--vrs-radius-pill);
    color: #fff;
    display: inline-block;
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    margin-left: var(--vrs-space-2);
    min-width: 18px;
    padding: 2px 7px;
    text-align: center;
}

.vm-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--vrs-line);
    color: inherit;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    gap: var(--vrs-space-3);
    justify-content: space-between;
    padding: var(--vrs-space-3) var(--vrs-space-1);
    text-align: left;
    width: 100%;
    border-radius: var(--vrs-radius-sm);
    transition: background var(--vrs-motion) var(--vrs-ease);
}

.vm-item:last-child { border-bottom: none; }
.vm-item:hover { background: var(--vrs-panel-bg); }
.vm-item:focus-visible { outline: 2px solid var(--vrs-focus); outline-offset: 2px; }

.vm-main { display: grid; gap: 2px; min-width: 0; }

.vm-unread .vm-caller { color: var(--vrs-text); font-weight: 650; }
.vm-unread .vm-caller::before {
    background: var(--vrs-accent);
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 8px;
    margin-right: var(--vrs-space-2);
    width: 8px;
}

.vm-caller,
.vm-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-caller { color: var(--vrs-text); font-size: var(--vrs-text-sm); font-weight: 600; }
.vm-meta { color: var(--vrs-text-faint); font-size: var(--vrs-text-xs); font-variant-numeric: tabular-nums; }
.vm-play-cue { color: var(--vrs-text-faint); flex: 0 0 auto; font-size: var(--vrs-text-sm); }

.vm-player-overlay { align-items: center; display: flex; justify-content: center; }
.vm-player-card {
    background: var(--vrs-surface-1);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--vrs-space-3);
    color: var(--vrs-text);
    max-height: 92vh;
    max-width: min(960px, 94vw);
    padding: var(--vrs-space-5);
    width: 100%;
}
.vm-player-title { color: var(--vrs-text); font-size: var(--vrs-text-lg); font-weight: 650; margin: 0; }
.vm-player-meta { color: var(--vrs-text-muted); font-size: var(--vrs-text-sm); }
.vm-player-video { background: #000; border-radius: var(--vrs-radius-sm); max-height: 72vh; width: 100%; }
.vm-player-actions { display: flex; gap: var(--vrs-space-3); justify-content: flex-end; }
.vm-player-delete { color: var(--vrs-danger-soft); }
.vm-player-close { align-self: flex-end; }

/* ========================================================================
 * Active rooms and missed calls
 * ======================================================================== */
.active-room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--vrs-space-3) 0;
    border-bottom: 1px solid var(--vrs-line);
}

.active-room-item:last-child { border-bottom: none; }

.active-room-info { color: var(--vrs-text); font-size: var(--vrs-text-sm); font-weight: 600; }
.active-room-time { color: var(--vrs-text-faint); font-size: var(--vrs-text-xs); margin-top: 2px; }

.active-room-details {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    line-height: 1.5;
    margin-top: var(--vrs-space-2);
}

.active-room-details summary {
    color: var(--vrs-link);
    cursor: pointer;
    font-weight: 600;
}

/* Missed calls: one quiet danger tint on the border and the title. The old
   inline-style red title shouted louder than the actions it labeled. */
.card-missed-calls {
    border-color: rgba(229, 72, 77, 0.38);
    background: linear-gradient(180deg, rgba(229, 72, 77, 0.05), transparent 40%),
        var(--vrs-card-bg);
}

.card-missed-calls .card-title {
    color: var(--vrs-danger-soft);
}

.missed-call-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--vrs-space-3) 0;
    border-bottom: 1px solid var(--vrs-line);
}

.missed-call-item:last-child { border-bottom: none; }

.missed-call-name { color: var(--vrs-text); font-size: var(--vrs-text-sm); font-weight: 600; }
.missed-call-time { color: var(--vrs-text-faint); font-size: var(--vrs-text-xs); margin-top: 2px; }

/* ========================================================================
 * VRI console
 * ======================================================================== */
.vri-console {
    display: grid;
    gap: var(--vrs-space-5);
}

.vri-console-shell {
    display: grid;
    gap: var(--vrs-space-5);
    grid-template-columns: minmax(0, 1fr);
}

.vri-self-card {
    min-height: 0;
}

.vri-self-card .self-preview-frame {
    min-height: clamp(420px, 66vh, 760px);
}

.vri-session-card {
    display: grid;
    gap: var(--vrs-space-4);
}

.vri-action-row {
    align-items: center;
    display: grid;
    gap: var(--vrs-space-5);
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 0.58fr);
}

.vri-session-eyebrow {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vri-session-title {
    color: var(--vrs-text);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.vri-session-copy {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-base);
    line-height: 1.55;
    margin: 0;
}

.vri-request-btn {
    border-radius: var(--vrs-radius-md);
    font-size: clamp(20px, 2vw, 28px);
    min-height: 78px;
}

.vri-state-grid,
.usage-summary-grid {
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vri-state-item,
.usage-summary-card {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    padding: var(--vrs-space-4);
}

.vri-state-label,
.usage-summary-label {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vri-state-value,
.usage-summary-value {
    color: var(--vrs-text);
    font-size: var(--vrs-text-lg);
    font-weight: 650;
    margin-top: var(--vrs-space-1);
    font-variant-numeric: tabular-nums;
}

.vri-invite-panel {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    display: grid;
    gap: var(--vrs-space-3);
    padding: var(--vrs-space-4);
}

.vri-invite-form {
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.vri-invite-input {
    min-width: 0;
    color: var(--vrs-text);
}

.vri-invite-list {
    display: grid;
    gap: var(--vrs-space-2);
}

.vri-invite-item {
    align-items: center;
    display: grid;
    gap: var(--vrs-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
}

.vri-invite-url {
    background: rgba(11, 16, 23, 0.55);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    overflow: hidden;
    padding: var(--vrs-space-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vri-invite-status {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
}

.vri-inline-section {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    overflow: hidden;
}

.vri-inline-section > summary {
    color: var(--vrs-text-muted);
    cursor: pointer;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    list-style: none;
    padding: var(--vrs-space-4);
}

.vri-inline-section > summary::-webkit-details-marker {
    display: none;
}

.vri-lower-grid {
    display: grid;
    gap: var(--vrs-space-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* VRI scheduled sessions: week strip + terp status chips */
.vri-week-strip {
    align-items: stretch;
    display: flex;
    gap: var(--vrs-space-2);
    margin-bottom: var(--vrs-space-4);
}

.vri-week-day {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    color: var(--vrs-text-muted);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-family: inherit;
    gap: 2px;
    padding: var(--vrs-space-2) var(--vrs-space-1);
    transition: background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease);
}

.vri-week-day:hover {
    background: var(--vrs-panel-bg-hover);
}

.vri-week-day.today {
    border-color: rgba(245, 184, 74, 0.55);
}

.vri-week-day.active {
    background: var(--vrs-btn-primary-bg);
    border-color: transparent;
    color: var(--vrs-btn-primary-ink);
}

.vri-week-day-label {
    color: inherit;
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    opacity: 0.8;
    text-transform: uppercase;
}

.vri-week-day.active .vri-week-day-label { opacity: 1; }

.vri-week-day-num {
    font-size: var(--vrs-text-base);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.vri-week-day-dot {
    background: transparent;
    border-radius: var(--vrs-radius-pill);
    height: 6px;
    width: 6px;
}

.vri-week-day-dot.has-sessions {
    background: var(--vrs-accent);
}

.vri-week-day.active .vri-week-day-dot.has-sessions {
    background: var(--vrs-btn-primary-ink);
}

.vri-schedule-create {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
    margin-bottom: var(--vrs-space-3);
}

.vri-schedule-create input,
.vri-schedule-create select {
    background: var(--vrs-input-bg);
    border: 1px solid var(--vrs-input-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-input-ink);
    color-scheme: dark;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    min-height: var(--vrs-control-md);
    padding: var(--vrs-space-2) var(--vrs-space-3);
}

.vri-terp-chip {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-text-muted);
    display: inline-block;
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    padding: 2px 10px;
}

.vri-terp-chip.accepted {
    background: rgba(244, 125, 34, 0.13);
    border-color: rgba(244, 125, 34, 0.45);
    color: var(--vrs-accent);
}

/* ========================================================================
 * Settings
 * ======================================================================== */
.settings-grid {
    display: grid;
    gap: var(--vrs-space-4);
}

.settings-row {
    display: grid;
    gap: var(--vrs-space-2);
}

.settings-label {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-toggle {
    align-items: center;
    color: var(--vrs-text);
    display: flex;
    gap: var(--vrs-space-3);
    font-size: var(--vrs-text-sm);
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-3);
    margin-top: var(--vrs-space-1);
}

.settings-status {
    border-radius: var(--vrs-radius-sm);
    font-size: var(--vrs-text-sm);
    margin-top: var(--vrs-space-3);
    padding: var(--vrs-space-2) var(--vrs-space-3);
}

.settings-status.success {
    background: rgba(244, 125, 34, 0.12);
    color: var(--vrs-accent);
}

.settings-status.error {
    background: rgba(229, 72, 77, 0.13);
    color: var(--vrs-danger-soft);
}

/* Recovery codes are shown exactly once — the server keeps only their hashes,
   so there is no second chance to read them. The block is loud on purpose. */
.settings-recovery-codes {
    background: rgba(245, 184, 74, 0.08);
    border: 1px solid rgba(245, 184, 74, 0.34);
    border-radius: var(--vrs-radius-sm);
    padding: var(--vrs-space-4);
}

/* Amber, not --vrs-accent: that is green in this theme, and green on "you
   will lose this account" reads as reassurance. */
.settings-recovery-warning {
    color: var(--vrs-warn);
    font-size: var(--vrs-text-sm);
    line-height: 1.5;
    margin: 0 0 var(--vrs-space-3);
}

.settings-recovery-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-recovery-list code {
    color: var(--vrs-text);
    font-size: var(--vrs-text-sm);
    letter-spacing: 0.06em;
}

/* ========================================================================
 * Auth
 * ======================================================================== */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--vrs-space-6);
}

.auth-card {
    background: var(--vrs-card-bg);
    border: 1px solid var(--vrs-card-border);
    border-radius: var(--vrs-radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    padding: var(--vrs-space-6);
    width: 100%;
    max-width: 440px;
}

.auth-logo {
    display: block;
    margin: 0 auto var(--vrs-space-4);
    max-height: 56px;
    width: auto;
}

.auth-title {
    color: var(--vrs-text);
    text-align: center;
    font-size: var(--vrs-text-xl);
    font-weight: 650;
    margin-bottom: var(--vrs-space-1);
}

.auth-subtitle {
    color: var(--vrs-text-muted);
    text-align: center;
    font-size: var(--vrs-text-sm);
    margin-bottom: var(--vrs-space-5);
}

.auth-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: var(--vrs-space-5);
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-md);
    overflow: hidden;
    padding: 3px;
}

.auth-tab {
    flex: 1;
    padding: var(--vrs-space-2);
    text-align: center;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease);
}

.auth-tab.active {
    background: var(--vrs-segment-active-bg);
    color: var(--vrs-segment-active-ink);
}

.auth-tab:hover:not(.active) {
    color: var(--vrs-text);
}

.auth-field {
    width: 100%;
    min-height: var(--vrs-control-lg);
    margin-bottom: var(--vrs-space-3);
}

.auth-password-wrap {
    position: relative;
    margin-bottom: var(--vrs-space-3);
}

.auth-password-wrap .auth-field {
    padding-right: 96px;
    margin-bottom: 0;
}

.auth-password-toggle {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    height: 32px;
    justify-content: center;
    padding: 0 var(--vrs-space-3);
    position: absolute;
    right: var(--vrs-space-1);
    top: var(--vrs-space-1);
    transition: background var(--vrs-motion) var(--vrs-ease),
        color var(--vrs-motion) var(--vrs-ease);
}

.auth-password-toggle:hover {
    background: var(--vrs-panel-bg-hover);
    color: var(--vrs-text);
}

.auth-submit {
    width: 100%;
    min-height: var(--vrs-control-lg);
    padding: var(--vrs-space-3);
    background: linear-gradient(180deg, var(--vrs-accent-strong), var(--vrs-accent));
    border: none;
    border-radius: var(--vrs-radius-sm);
    box-shadow: 0 8px 24px rgba(244, 125, 34, 0.22);
    color: var(--vrs-btn-primary-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-base);
    font-weight: 650;
    transition: box-shadow var(--vrs-motion) var(--vrs-ease),
        filter var(--vrs-motion) var(--vrs-ease);
    margin-top: var(--vrs-space-1);
}

.auth-submit:hover { filter: brightness(1.04); box-shadow: 0 10px 30px rgba(244, 125, 34, 0.3); }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-error {
    background: rgba(229, 72, 77, 0.12);
    border: 1px solid rgba(229, 72, 77, 0.34);
    border-radius: var(--vrs-radius-sm);
    padding: var(--vrs-space-3);
    font-size: var(--vrs-text-sm);
    color: var(--vrs-danger-soft);
    margin-bottom: var(--vrs-space-3);
}

.auth-success {
    background: rgba(244, 125, 34, 0.12);
    border: 1px solid rgba(244, 125, 34, 0.34);
    border-radius: var(--vrs-radius-sm);
    padding: var(--vrs-space-3);
    font-size: var(--vrs-text-sm);
    color: var(--vrs-accent);
    margin-bottom: var(--vrs-space-3);
}

.auth-link {
    color: var(--vrs-link);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--vrs-text-sm);
    font-weight: 500;
}

.auth-link:hover { text-decoration: underline; }

.auth-footer {
    color: var(--vrs-text-muted);
    text-align: center;
    margin-top: var(--vrs-space-4);
    font-size: var(--vrs-text-sm);
}

.auth-divider {
    color: var(--vrs-text-faint);
    text-align: center;
    margin: var(--vrs-space-4) 0;
    font-size: var(--vrs-text-xs);
}

/* Set apart from the sign-in controls above it: this is a way off the page,
   not a third thing to fill in. */
.auth-provider-portal {
    border-top: 1px solid var(--vrs-line);
    margin-top: var(--vrs-space-5);
    padding-top: var(--vrs-space-4);
}

.help-text {
    color: var(--vrs-text-muted);
}

.auth-redirect {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    gap: var(--vrs-space-4);
}

.auth-redirect p {
    color: var(--vrs-text-muted);
}

/* ========================================================================
 * Full-screen call overlays
 * ======================================================================== */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5, 8, 13, 0.88);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    flex-direction: column;
    gap: var(--vrs-space-5);
}

.overlay-caller-name {
    color: var(--vrs-text);
    font-size: var(--vrs-text-2xl);
    font-weight: 650;
}

.overlay-status {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-lg);
}

.overlay-media {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--vrs-space-3);
    max-width: min(520px, 82vw);
}

.overlay-media img,
.overlay-media video {
    border-radius: var(--vrs-radius-md);
    max-height: 34vh;
    max-width: 100%;
    object-fit: contain;
}

.overlay-media-caption {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-base);
    line-height: 1.5;
    max-width: 460px;
    text-align: center;
}

.overlay-buttons {
    display: flex;
    gap: var(--vrs-space-5);
    margin-top: var(--vrs-space-3);
}

.overlay-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: var(--vrs-text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--vrs-motion) var(--vrs-ease);
}

.overlay-btn:hover { transform: scale(1.08); }

.overlay-btn-accept {
    background: var(--vrs-accent);
    color: var(--vrs-accent-ink);
    box-shadow: 0 12px 36px rgba(244, 125, 34, 0.35);
}

.overlay-btn-decline {
    background: var(--vrs-danger);
    color: var(--vrs-danger-ink);
}

.overlay-btn-cancel {
    background: var(--vrs-surface-3);
    color: var(--vrs-text);
    width: 60px;
    height: 60px;
    font-size: var(--vrs-text-xl);
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.pulse-animation {
    position: relative;
}

.pulse-animation::before {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border-radius: 50%;
    border: 3px solid var(--vrs-info);
    animation: pulse-ring 1.5s ease-out infinite;
}

/* ========================================================================
 * Light theme — token overrides only
 * ======================================================================== */
body.theme-light:not(.theme-maple) {
    --vrs-page-bg:
        radial-gradient(1100px 520px at 18% -8%, rgba(23, 160, 94, 0.06), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(47, 111, 214, 0.05), transparent 55%),
        #eef1f6;
    --vrs-header-bg: rgba(255, 255, 255, 0.8);

    --vrs-surface-2: #ffffff;
    --vrs-card-bg: #ffffff;
    --vrs-card-border: rgba(22, 32, 46, 0.12);
    --vrs-surface-3: #eef1f6;
    --vrs-surface-4: #e3e8f0;

    --vrs-text: #16202e;
    --vrs-text-muted: #4a5a70;
    --vrs-text-faint: #66738a;

    --vrs-line: rgba(22, 32, 46, 0.1);
    --vrs-line-strong: rgba(22, 32, 46, 0.22);

    /*
     * Brand orange again, stepped darker. #F47D22 as TEXT on white is 2.69:1
     * and fails; #A8500B is 5.5:1 and still reads as the same colour. The
     * button below keeps the dark ink the dark theme uses, so the primary
     * action looks the same in both.
     */
    --vrs-accent: #A8500B;
    --vrs-accent-strong: #8F4409;
    --vrs-accent-ink: #2A1402;
    --vrs-info: #1f66d6;

    --vrs-panel-bg: rgba(22, 32, 46, 0.045);
    --vrs-panel-bg-hover: rgba(22, 32, 46, 0.09);
    --vrs-panel-border: rgba(22, 32, 46, 0.1);

    --vrs-input-bg: #ffffff;
    --vrs-input-border: #b9c4d3;
    --vrs-input-focus: #1f66d6;

    /* The brand orange with dark ink: 6.51:1, and identical to the dark
       theme's primary button, which is what a brand colour should do. */
    --vrs-btn-primary-bg: #F47D22;
    --vrs-btn-primary-bg-hover: #E97A00;
    --vrs-btn-primary-ink: #2A1402;

    /* The dark theme's red and amber were carried into light mode unchanged:
       #e5484d on white is 3.91 and the amber focus ring is 1.77, below even
       the 3:1 bar for non-text. Both are darkened for light surfaces only. */
    --vrs-danger: #c0272c;
    --vrs-danger-soft: #b3181e;
    --vrs-focus: #b06f00;

    --vrs-btn-ghost-bg: transparent;
    --vrs-btn-ghost-bg-hover: rgba(22, 32, 46, 0.06);
    --vrs-btn-ghost-border: rgba(22, 32, 46, 0.18);
    --vrs-btn-ghost-ink: #16202e;

    --vrs-segment-active-bg: #16202e;
    --vrs-segment-active-ink: #ffffff;

    --vrs-link: #1f66d6;
    --vrs-scroll-thumb: rgba(22, 32, 46, 0.2);

    color: var(--vrs-text);
}

/* The light theme flips the segment pill to ink-on-light, so the tabs and
   auth surfaces that hard-code dark ink on the active pill need the inverse. */
body.theme-light:not(.theme-maple) .composer-route-tab.active,
body.theme-light:not(.theme-maple) .auth-tab.active {
    color: var(--vrs-segment-active-ink);
}

/* VideoMail unread dot and call-history glyphs sit on tinted chips; the dark
   accent green disappears on white, so point them at the deeper green. */
body.theme-light:not(.theme-maple) .vm-unread .vm-caller::before { background: #A8500B; }
body.theme-light:not(.theme-maple) .call-item--missed .call-item-glyph { color: #c53338; background: rgba(229, 72, 77, 0.1); }
body.theme-light:not(.theme-maple) .call-item--incoming .call-item-glyph { color: #1f66d6; background: rgba(47, 111, 214, 0.1); }
body.theme-light:not(.theme-maple) .card-missed-calls .card-title { color: #c53338; }
body.theme-light:not(.theme-maple) .composer-vco-toggle.active {
    background: rgba(47, 111, 214, 0.1);
    border-color: rgba(47, 111, 214, 0.4);
    color: #1f66d6;
}
body.theme-light:not(.theme-maple) .composer-participant-chip {
    background: rgba(47, 111, 214, 0.08);
    border-color: rgba(47, 111, 214, 0.28);
}
body.theme-light:not(.theme-maple) .composer-dial-preview { color: #A8500B; }
body.theme-light:not(.theme-maple) .call-duration { color: #A8500B; }
body.theme-light:not(.theme-maple) .vrs-number { color: #A8500B; }

/* Recovery-code amber on a white panel was ~2:1 — unreadable on the one
   paragraph nobody can afford to skim past. */
body.theme-light:not(.theme-maple) .settings-recovery-warning { color: #8f4700; }
body.theme-light:not(.theme-maple) .settings-recovery-codes {
    background: #fdf3e4;
    border-color: rgba(143, 71, 0, 0.3);
}

/* Options inside a native select render on the OS chrome, not the page, so
   they need solid light values. */
body.theme-light:not(.theme-maple) .account-context-select option,
body.theme-light:not(.theme-maple) .settings-select option,
body.theme-light:not(.theme-maple) .self-device-select option {
    background: #ffffff;
    color: #16202e;
}

/* ========================================================================
 * Maple theme — red brand over the same system
 * ======================================================================== */
body.theme-maple {
    --vrs-accent: #e5231f;
    --vrs-accent-strong: #f03531;
    --vrs-accent-ink: #ffffff;
    --vrs-accent-deep: #b40d0a;
    --vrs-btn-primary-bg: #d21613;
    --vrs-btn-primary-bg-hover: #e5231f;
    --vrs-btn-primary-ink: #ffffff;
    --vrs-link: #d21613;
    --vrs-input-focus: #d21613;
    --vrs-page-bg:
        radial-gradient(1100px 520px at 18% -8%, rgba(229, 35, 31, 0.08), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(229, 35, 31, 0.04), transparent 55%),
        #f5f5f6;
    --vrs-header-bg: #ffffff;
    --vrs-card-bg: #ffffff;
    --vrs-card-border: rgba(17, 17, 17, 0.12);
    --vrs-panel-bg: rgba(17, 17, 17, 0.045);
    --vrs-panel-bg-hover: rgba(17, 17, 17, 0.09);
    --vrs-panel-border: rgba(17, 17, 17, 0.1);
    --vrs-input-bg: #ffffff;
    --vrs-input-border: #b9b9bd;
    --vrs-text: #16181d;
    --vrs-text-muted: #4b4f58;
    --vrs-text-faint: #676c77;
    --vrs-line: rgba(17, 17, 17, 0.1);
    --vrs-line-strong: rgba(17, 17, 17, 0.22);
    --vrs-btn-ghost-ink: #16181d;
    --vrs-btn-ghost-bg-hover: rgba(17, 17, 17, 0.06);
    --vrs-btn-ghost-border: rgba(17, 17, 17, 0.18);
    --vrs-segment-active-bg: #16181d;
    --vrs-segment-active-ink: #ffffff;
    --vrs-scroll-thumb: rgba(17, 17, 17, 0.2);

    background: var(--vrs-page-bg);
    color: var(--vrs-text);
}

/* Maple's logo is red-on-transparent and needs its white chip to sit on a
   white bar. */
body.theme-maple .profile-header-logo {
    background: #fff;
    border-radius: var(--vrs-radius-sm);
    height: 48px;
    object-fit: contain;
    padding: 5px 10px;
    width: auto;
}

body.theme-maple .auth-logo { max-width: 280px; }

body.theme-maple .vrs-number,
body.theme-maple .call-duration,
body.theme-maple .composer-dial-preview,
body.theme-maple .auth-link { color: #d21613; }

body.theme-maple .vrs-favourite-avatar,
body.theme-maple .contact-avatar {
    background: rgba(229, 35, 31, 0.1);
    border-color: rgba(229, 35, 31, 0.3);
    color: #d21613;
}

body.theme-maple .vm-unread .vm-caller::before { background: #d21613; }
body.theme-maple .number-chip.active {
    background: rgba(229, 35, 31, 0.09);
    border-color: rgba(229, 35, 31, 0.4);
    color: #d21613;
}

body.theme-maple .account-context-select option,
body.theme-maple .settings-select option,
body.theme-maple .self-device-select option {
    background: #ffffff;
    color: #16181d;
}

/* Maple, dark variant: same surfaces as the default dark theme with the red
   accent swapped in — one token block instead of the forty-odd per-component
   rules this used to take. */
body.theme-maple:not(.theme-light) {
    --vrs-page-bg:
        radial-gradient(1100px 520px at 18% -8%, rgba(229, 35, 31, 0.09), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(229, 35, 31, 0.05), transparent 55%),
        #100507;
    --vrs-header-bg: rgba(18, 7, 9, 0.78);
    --vrs-card-bg: #1d1013;
    --vrs-card-border: rgba(214, 140, 140, 0.14);
    --vrs-panel-bg: rgba(214, 140, 140, 0.07);
    --vrs-panel-bg-hover: rgba(214, 140, 140, 0.13);
    --vrs-panel-border: rgba(214, 140, 140, 0.14);
    --vrs-input-bg: #150a0d;
    --vrs-surface-3: #2a161b;
    --vrs-surface-4: #381e24;
    --vrs-text: #f6edef;
    --vrs-text-muted: #d3b6b9;
    --vrs-text-faint: #ab8d91;
    --vrs-line: rgba(214, 140, 140, 0.14);
    --vrs-line-strong: rgba(214, 140, 140, 0.28);
    --vrs-accent: #ff5a56;
    --vrs-accent-strong: #ff6d6a;
    --vrs-accent-ink: #2b0608;
    --vrs-btn-primary-bg: #e5231f;
    --vrs-btn-primary-bg-hover: #f03531;
    --vrs-btn-primary-ink: #ffffff;
    --vrs-link: #ff8a86;
    --vrs-input-focus: #ff8a86;
    --vrs-segment-active-bg: #f0dcdd;
    --vrs-segment-active-ink: #2b0608;
    --vrs-scroll-thumb: rgba(214, 140, 140, 0.24);

    background: var(--vrs-page-bg);
    color: var(--vrs-text);
}

body.theme-maple:not(.theme-light) .vrs-number,
body.theme-maple:not(.theme-light) .call-duration,
body.theme-maple:not(.theme-light) .composer-dial-preview { color: #ff8a86; }

body.theme-maple:not(.theme-light) .vrs-favourite-avatar,
body.theme-maple:not(.theme-light) .contact-avatar {
    background: rgba(255, 90, 86, 0.13);
    border-color: rgba(255, 90, 86, 0.34);
    color: #ff8a86;
}

body.theme-maple:not(.theme-light) .vm-unread .vm-caller::before { background: #ff5a56; }

/* The glow shadows hard-code green; Maple's hero button glows red instead. */
body.theme-maple .vrs-call-primary {
    box-shadow: 0 10px 34px rgba(229, 35, 31, 0.3);
}

body.theme-maple .vrs-call-primary:hover {
    box-shadow: 0 14px 44px rgba(229, 35, 31, 0.38);
}

body.theme-maple .auth-submit {
    box-shadow: 0 8px 24px rgba(229, 35, 31, 0.22);
}

body.theme-maple .overlay-btn-accept {
    box-shadow: 0 12px 36px rgba(229, 35, 31, 0.35);
}

body.theme-maple .overlay-btn-decline {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ========================================================================
 * Responsive
 * ======================================================================== */
@media (max-width: 768px) {
    .profile-main {
        padding: var(--vrs-space-4) var(--vrs-space-4) 64px;
    }

    .profile-hero,
    .profile-sections,
    .profile-alert-grid,
    .vrs-home-lower,
    .vri-console-shell,
    .vri-lower-grid,
    .settings-columns {
        grid-template-columns: 1fr;
    }

    .vri-console-shell {
        min-height: auto;
    }

    .vri-self-card .self-preview-frame {
        min-height: clamp(300px, 58vh, 520px);
    }

    .vri-action-row,
    .vri-state-grid,
    .vrs-action-strip,
    .account-context-main,
    .account-number-request-grid,
    .composer-header,
    .composer-input-row,
    .composer-picker-grid,
    .vrs-dialer-row,
    .usage-summary-grid {
        grid-template-columns: 1fr;
    }

    .vrs-dialer-row {
        display: grid;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .profile-header {
        padding: var(--vrs-space-2) var(--vrs-space-4);
        flex-wrap: wrap;
        gap: var(--vrs-space-2);
    }

    .profile-header-left,
    .profile-header-right {
        width: 100%;
    }

    .profile-header-right {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .profile-header-title {
        display: none;
    }

    .profile-user-name {
        max-width: 100%;
    }

    /* The status pill is pinned to the top-right on desktop; under a
       wrapped two-row header there is no clean spot to pin it to, so it
       goes back in flow, centered. */
    .ws-status {
        position: static;
        justify-self: center;
        margin: var(--vrs-space-2) auto 0;
        width: max-content;
    }

    .call-item {
        /* Keep the direction chip beside the name on narrow screens; only
           the actions column drops to its own row. */
        grid-template-columns: auto minmax(0, 1fr);
    }

    .call-actions {
        grid-column: 1 / -1;
        align-items: stretch;
        justify-items: stretch;
    }

    .overlay-caller-name { font-size: var(--vrs-text-xl); }
}

/* ---------------------------------------------------------------------------
   Waiting for a call, inside the call bar.

   This replaces a full-screen overlay that sat at z-index 10000 for the whole
   wait — around a minute — with an unlabelled ✕ as the only exit. The portal
   was unusable for that minute: no history, no contacts, no voicemail. The
   self-view deliberately keeps running beside this, because on a sign-language
   call your framing is the call and the wait is when you would fix it.
   --------------------------------------------------------------------------- */
.vrs-callbar-waiting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vrs-space-3);
}

.vrs-waiting-title {
    color: var(--vrs-text);
    font-size: var(--vrs-text-xl);
    font-weight: 700;
    margin: 0;
}

.vrs-waiting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
}

.vrs-waiting-chip {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: 999px;
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    padding: 4px 12px;
}

/* Tabular figures so the clock does not jitter as the digits change. */
.vrs-waiting-elapsed {
    color: var(--vrs-text);
    font-variant-numeric: tabular-nums;
}

.vrs-callbar-waiting .vrs-call-secondary {
    margin-top: var(--vrs-space-1);
}

.vrs-callbar-waiting--matched .vrs-waiting-title {
    color: var(--vrs-accent);
}

/* ---------------------------------------------------------------------------
   Composer: one input, a country chip, and a button that says what it will do.

   The route tabs are gone. __startComposerCall always decided the route from
   the target anyway — it reclassified a point-to-point attempt as VRS the
   moment the target looked like a plain phone number — so the tabs asked
   people to classify something the app then re-decided. The route now reads
   off the input and is shown before the press rather than discovered after.
   --------------------------------------------------------------------------- */
.composer-header-actions {
    align-items: center;
    display: flex;
    gap: var(--vrs-space-3);
}

/* The route colour is its own channel. Green stays the call action and blue
   stays the interactive accent; spending either here would make both mean
   two things. */
.composer-route-chip {
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: 999px;
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
}

.composer-route-chip.route-vrs { border-color: rgba(122, 179, 255, 0.5); color: #9ec8ff; }
.composer-route-chip.route-p2p,
.composer-route-chip.route-group { border-color: rgba(167, 139, 250, 0.5); color: #c4b5fd; }
.composer-route-chip.route-interpreter { border-color: rgba(244, 125, 34, 0.45); color: #7ee2b0; }

.composer-cc-link {
    background: none;
    border: none;
    color: var(--vrs-link);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    padding: 0;
    text-decoration: underline;
}

/* Country chip. The border takes the flag's colour, so the number itself
   stays high-contrast — the same rule the native picker documents. */
.composer-country-chip {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    font-weight: 600;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
}

.composer-country-flag { font-size: 18px; }
.composer-country-dial { font-variant-numeric: tabular-nums; }

.composer-country-picker {
    background: var(--vrs-surface-2);
    border: 1px solid var(--vrs-line-strong);
    border-radius: var(--vrs-radius-md);
    margin-top: var(--vrs-space-3);
    padding: var(--vrs-space-3);
}

.composer-country-search {
    background: var(--vrs-input-bg);
    border: 1px solid var(--vrs-input-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-input-ink);
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    margin-bottom: var(--vrs-space-2);
    min-height: 44px;
    padding: 0 12px;
    width: 100%;
}

/* 242 rows: capped and scrolled, never allowed to set the page height. */
.composer-country-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.composer-country-row {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--vrs-text-sm);
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
    width: 100%;
}

.composer-country-row:hover,
.composer-country-row.active { background: var(--vrs-panel-bg-hover); }
.composer-country-row .composer-country-name { flex: 1; }
.composer-country-row .composer-country-dial { color: var(--vrs-text-muted); }

.composer-country-empty {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    padding: var(--vrs-space-3);
    text-align: center;
}

/* Route-dependent blocks are always in the DOM and only hidden, because
   typing skips render() to keep the caret and cannot add or remove nodes. */
.composer-route-hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   VideoMail: list and message together.

   Opening one used to raise a full-screen player over the portal, so reading a
   message cost you the page and going back to the list meant closing it. The
   full-width panel has the room for both now.
   --------------------------------------------------------------------------- */
.vm-split {
    display: grid;
    gap: var(--vrs-space-4);
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
}

/* The list scrolls; the message it is next to does not move. */
.vm-split-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
}

.vm-split-detail {
    display: flex;
    flex-direction: column;
    gap: var(--vrs-space-3);
}

.vm-item.vm-selected {
    background: var(--vrs-panel-bg-hover);
    border-color: var(--vrs-line-strong);
}

.vm-detail-title {
    color: var(--vrs-text);
    font-size: var(--vrs-text-lg);
    font-weight: 700;
    margin: 0;
}

.vm-detail-meta {
    color: var(--vrs-text-muted);
    font-size: var(--vrs-text-sm);
    margin: 0;
}

/*
 * The frame holds its shape; the video sits inside it.
 *
 * Setting width:100% on the video alone let it collapse to the element's
 * default 150px height, so a message rendered as a wide letterbox strip — and
 * a portrait clip from a phone would have been squashed into it. The container
 * reserves a 16/9 area and the video is contained within, so any source keeps
 * its own proportions against a black surround.
 */
.vm-detail-video {
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius-md);
    overflow: hidden;
    width: 100%;
}

.vm-detail-video video {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

/*
 * Expanded: the message takes the whole card and the list steps aside. A
 * signed message is the content — at half the panel width it was smaller than
 * the list beside it.
 */
.vm-split--expanded {
    grid-template-columns: minmax(0, 1fr);
}

.vm-split--expanded .vm-split-list {
    display: none;
}

.vm-split--expanded .vm-detail-video {
    max-height: 70vh;
}

.vm-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vrs-space-2);
}

/* Download is an <a> so the browser saves the file; it still has to look and
   size like the buttons beside it. */
.vm-detail-actions .settings-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
    text-decoration: none;
}

.vm-detail-empty {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 220px;
}

/* Below this the two columns cannot both be useful, so the message goes under
   the list rather than squeezing it. */
@media (max-width: 900px) {
    .vm-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .vm-split-list {
        max-height: 260px;
    }
}

/* ---------------------------------------------------------------------------
   New Call, second pass.

   The section had four elements saying what one control does: an eyebrow
   ("NEW CALL"), a title that changed with the route, a chip naming the route,
   and a help block explaining it. The route has one home now — the note under
   the button — and the header is a title and one quiet link.
   --------------------------------------------------------------------------- */
.composer-header {
    align-items: baseline;
    display: flex;
    gap: var(--vrs-space-4);
    grid-template-columns: none;
    justify-content: space-between;
}

.composer-title {
    font-size: var(--vrs-text-lg);
    margin: 0;
}

/*
 * The one line that says what the button will do. The dot carries the route
 * colour, which is its own channel: green stays the call action and blue stays
 * the interactive accent, so neither is spent naming a route.
 */
.composer-route-note {
    align-items: baseline;
    color: var(--vrs-text-muted);
    display: flex;
    font-size: var(--vrs-text-sm);
    gap: var(--vrs-space-2);
    line-height: 1.45;
    margin: 0;
}

.composer-route-dot {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 8px;
    transform: translateY(-1px);
    width: 8px;
}

.composer-route-dot.route-interpreter { background: var(--vrs-accent); }
.composer-route-dot.route-vrs { background: #7ab3ff; }
.composer-route-dot.route-p2p,
.composer-route-dot.route-group { background: #c4b5fd; }
.composer-route-dot.route-cc { background: var(--vrs-warn); }

/* "VCO" told you nothing unless you already knew. The word is plain now, and
   the toggle reads as a toggle rather than a mystery square. */
.composer-vco-toggle {
    white-space: nowrap;
}

/*
 * The keypad is the point of the product on a phone-shaped task, and it was a
 * bare disclosure triangle. Now it reads as a control.
 */
.dialpad-toggle {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    display: inline-flex;
    gap: var(--vrs-space-2);
    list-style: none;
    min-height: 40px;
    padding: 0 var(--vrs-space-4);
    width: fit-content;
}

.dialpad-toggle::-webkit-details-marker { display: none; }
.dialpad-toggle::marker { content: ''; }
.dialpad-toggle:hover { background: var(--vrs-panel-bg-hover); }
.dialpad-toggle-icon { font-size: 15px; }

.dialpad[open] .dialpad-toggle {
    border-color: var(--vrs-line-strong);
    color: var(--vrs-text);
    margin-bottom: var(--vrs-space-3);
}

/* An error belongs beside the control that produced it, not under the pickers
   at the bottom of the card. */
.vrs-call-composer > .composer-status {
    margin-top: var(--vrs-space-1);
}

/*
 * The keypad was capped at 320px and pinned left, which was right when the
 * composer lived in a ~380px grid cell. In the call bar it left half the card
 * empty beside it and read as unfinished rather than deliberate. Slightly
 * wider, and centred so the space around it is symmetric — a keypad stretched
 * to a 680px card would be worse than one that is merely narrow.
 */
.vrs-callbar .dialpad-grid,
.vrs-callbar .dialpad-controls {
    margin-inline: auto;
    max-width: 380px;
}

.vrs-callbar .dialpad-grid {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Call bar, aesthetic pass.

   It read as "just some bar": a flat panel with a 1px border, no elevation,
   and — with the composer in it — 242px of dead space under the self view,
   because the two columns had no relationship to each other. The fixes are
   presence (a surface that sits above the page rather than beside it) and
   proportion (a self view that fills its half).
   --------------------------------------------------------------------------- */
.vrs-callbar {
    /*
     * Stretch the COLUMNS, never the frame. Both columns run the full height
     * of the card, so the shorter one's content can fill it; the preview frame
     * inside keeps its 16/9 and sits at the top of its column. Conflating
     * those two is what cropped the camera feed.
     */
    align-items: stretch;
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(244, 125, 34, 0.10), transparent 58%),
        linear-gradient(180deg, var(--vrs-surface-3), var(--vrs-card-bg) 42%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.32),
        0 18px 44px -22px rgba(0, 0, 0, 0.7);
    padding: var(--vrs-space-6);
    position: relative;
}

/* A hairline of accent along the top edge. It is the surface the call action
   lives on, and this is the cheapest way to say so without colouring anything
   that has a meaning already. */
.vrs-callbar::before {
    background: linear-gradient(90deg, transparent, rgba(244, 125, 34, 0.55), transparent 72%);
    border-radius: var(--vrs-radius-lg) var(--vrs-radius-lg) 0 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/*
 * Framing only. An earlier cut of this made the frame fill the column -
 * aspect-ratio:auto, flex:1, and object-fit:cover on the video - to close a
 * gap under the preview. Two things were wrong with that. The gap was mostly
 * an artefact of a test harness that stubbed the whole preview card down to a
 * bare div, so the real card (title, frame, device pickers, status, on/off
 * button) is far taller than what I measured. And cover-cropping a camera feed
 * on a product for signing cuts the hands out of the picture, which is the one
 * thing this frame exists to show.
 */
.vrs-callbar-preview .self-preview-frame {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 60px rgba(0, 0, 0, 0.35);
}

/*
 * Keys you can feel.
 *
 * They were flat rectangles in the same colour as every other panel on the
 * page — nothing about them said "press me", and on a dialler the keys are the
 * one thing that should. A top-lit face, a firmer edge, and a press that
 * actually moves.
 */
.vrs-callbar .dialpad-key {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 52%),
        var(--vrs-surface-3);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.28);
    transition:
        background var(--vrs-motion) var(--vrs-ease),
        transform 90ms var(--vrs-ease),
        box-shadow 90ms var(--vrs-ease);
}

.vrs-callbar .dialpad-key:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 52%),
        var(--vrs-surface-4);
}

.vrs-callbar .dialpad-key:active {
    background: var(--vrs-surface-4);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
    transform: translateY(1px);
}

/* The digit is the content; the letters are a legend. They were competing at
   nearly the same weight. */
.vrs-callbar .dialpad-digit {
    font-size: var(--vrs-text-xl);
    font-weight: 650;
}

.vrs-callbar .dialpad-letters {
    color: var(--vrs-text-faint);
    font-size: 10px;
    letter-spacing: 1.4px;
    opacity: 0.85;
}

.vrs-callbar .dialpad-secondary:active {
    transform: translateY(1px);
}


@media (prefers-reduced-motion: reduce) {
    .vrs-callbar .dialpad-key,
    .vrs-callbar .dialpad-secondary {
        transition: none;
    }

    .vrs-callbar .dialpad-key:active,
    .vrs-callbar .dialpad-secondary:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Keypad and country picker as popovers under the field they write into.

   The keypad used to be an inline disclosure in the middle of the card:
   opening it pushed 300px of content down the page, and the trigger — a chip
   floating in the column — said nothing about what it belonged to. A modal was
   the alternative and was rejected: this section exists because two modals were
   removed for taking the page away mid-task. Anchoring to the input keeps the
   number, the button and the keys in one glance.
   --------------------------------------------------------------------------- */
.vrs-call-composer {
    position: relative;
}

.composer-keypad-btn {
    align-items: center;
    background: var(--vrs-panel-bg);
    border: 1px solid var(--vrs-panel-border);
    border-radius: var(--vrs-radius-sm);
    color: var(--vrs-text-muted);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    transition: background var(--vrs-motion) var(--vrs-ease), color var(--vrs-motion) var(--vrs-ease);
}

.composer-keypad-btn:hover { background: var(--vrs-panel-bg-hover); color: var(--vrs-text); }

.composer-keypad-btn.active {
    background: var(--vrs-surface-4);
    border-color: var(--vrs-line-strong);
    color: var(--vrs-text);
}

.dialpad-popover,
.composer-country-picker {
    background: var(--vrs-surface-2);
    border: 1px solid var(--vrs-line-strong);
    border-radius: var(--vrs-radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 48px -18px rgba(0, 0, 0, 0.85);
    left: 0;
    margin-top: 6px;
    padding: var(--vrs-space-3);
    position: absolute;
    right: 0;
    /* Above the card's own contents, below any real dialog. */
    z-index: 30;
}

/* The row is country | input | keypad | voice, with the start button below. */
.composer-input-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.dialpad-popover .dialpad-grid,
.dialpad-popover .dialpad-controls {
    margin-inline: auto;
    max-width: 340px;
}

.dialpad-popover .dialpad-grid {
    margin-bottom: var(--vrs-space-2);
    width: 100%;
}

@media (max-width: 560px) {
    .composer-input-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .composer-vco-toggle {
        grid-column: 2 / -1;
    }
}

/* The input row is the anchor: both popovers hang off its bottom edge, so they
   read as belonging to the field rather than floating in the column. */
.composer-input-row {
    position: relative;
}

.dialpad-popover,
.composer-country-picker {
    top: 100%;
}

/* They are grid children of the row, so they must not claim a column. */
.composer-input-row > .dialpad-popover,
.composer-input-row > .composer-country-picker {
    grid-column: 1 / -1;
}

/*
 * The preview card (title, frame, two device pickers, status, on/off button)
 * is taller than the composer, so the composer column had trailing space
 * beneath the pickers. Rather than stretch the video to match — which is what
 * an earlier cut did, cropping the signer out of frame — the contact and
 * recent lists take the room. They are the one thing here that is genuinely
 * better for being longer.
 */
.vrs-callbar .vrs-call-composer {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.vrs-callbar .composer-picker-grid {
    flex: 1;
    min-height: 120px;
}

.vrs-callbar .composer-picker-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   Picker panels: the same care the keys got.

   They were plain boxes with plain rows — the one part of the section that had
   not been looked at, and the part you actually press to call somebody.
   --------------------------------------------------------------------------- */
.vrs-callbar .composer-picker-panel {
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius-md);
    padding: var(--vrs-space-3);
}

.vrs-callbar .composer-picker-title {
    padding: 0 var(--vrs-space-2) var(--vrs-space-2);
}

/* A row is a person, so it reads as one: mark, name, detail. */
.vrs-callbar .composer-picker-item {
    align-items: center;
    display: flex;
    gap: var(--vrs-space-3);
    padding: var(--vrs-space-2);
    text-align: left;
    transition:
        background var(--vrs-motion) var(--vrs-ease),
        border-color var(--vrs-motion) var(--vrs-ease),
        transform 90ms var(--vrs-ease);
    width: 100%;
}

.vrs-callbar .composer-picker-item:hover {
    background: var(--vrs-panel-bg-hover);
    border-color: var(--vrs-line-strong);
}

/* Presses like the keys do, because it does the same kind of thing. */
.vrs-callbar .composer-picker-item:active {
    background: var(--vrs-surface-4);
    transform: translateY(1px);
}

.composer-picker-avatar {
    align-items: center;
    background: rgba(244, 125, 34, 0.14);
    border: 1px solid rgba(244, 125, 34, 0.3);
    border-radius: var(--vrs-radius-pill);
    color: var(--vrs-accent);
    display: flex;
    flex: 0 0 34px;
    font-size: var(--vrs-text-xs);
    font-weight: 650;
    height: 34px;
    justify-content: center;
    letter-spacing: 0.02em;
}

/* A call with no name behind it is not a person, so it does not get a person's
   colour — otherwise every unknown number looks like a saved contact. */
.composer-picker-avatar.is-number {
    background: var(--vrs-panel-bg);
    border-color: var(--vrs-panel-border);
    color: var(--vrs-text-muted);
    font-size: 15px;
}

.composer-picker-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.vrs-callbar .composer-picker-name,
.vrs-callbar .composer-picker-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An empty panel that answers the question instead of stating a negative. */
.vrs-callbar .composer-empty {
    align-content: center;
    display: grid;
    /* Fills the panel so it centres in it, rather than sitting at the top with
       a hundred pixels of nothing underneath. */
    flex: 1;
    gap: 4px;
    justify-items: center;
    min-height: 120px;
    padding: var(--vrs-space-4) var(--vrs-space-3);
    text-align: center;
}

.composer-empty-glyph {
    font-size: 20px;
    line-height: 1;
    opacity: 0.5;
}

.composer-empty-title {
    color: var(--vrs-text);
    font-size: var(--vrs-text-sm);
    font-weight: 650;
}

.composer-empty-detail {
    color: var(--vrs-text-faint);
    font-size: var(--vrs-text-xs);
    line-height: 1.45;
    max-width: 26ch;
}

@media (prefers-reduced-motion: reduce) {
    .vrs-callbar .composer-picker-item,
    .vrs-callbar .composer-picker-item:active {
        transform: none;
        transition: none;
    }
}