:root {
    /* Typography / weight */
    --fw-medium: 700;
    --font-family-ui: Manrope, Roboto, Arial, sans-serif;

    /*
     * Application shell geometry. Every centered workspace surface consumes
     * these tokens so the sidebar never creates a second, competing center.
     */
    --app-content-width: 62.375rem;
    --app-communications-width: 76rem;
    --app-sidebar-compact-width: 3.75rem;
    --app-sidebar-expanded-width: 14rem;
    --app-sidebar-width: 0rem;
    --app-header-primary-height: 3.94rem;
    --app-header-height: var(--app-header-primary-height);
    --app-footer-height: 4.55rem;
    --app-shell-gutter: clamp(0.5rem, 1vw, 1rem);
    /* Shared breathing room for every page-level workspace canvas. Keep this
     * separate from component padding so page density can be tuned once. */
    --app-content-inset: clamp(0.75rem, 1vw, 1rem);
    --app-content-section-gap: 1rem;
    /* Separation between major product domains. This is intentionally larger
     * than the card gap so related cards group together at a glance. */
    --app-content-domain-gap: 1.4rem;
    --app-section-gap: var(--app-content-section-gap);
    --app-content-card-gap: 0.75rem;
    --app-related-content-gap: 0.65rem;
    --app-card-content-inset: 1rem;
    --app-active-rail-width: 24rem;
    --app-active-rail-gap: 0.5rem;
    /* The dashboard's future utility rail mirrors both the Live Calls rail and
     * the persistent navigation rail, keeping the three-panel board on the
     * physical viewport centerline. */
    --app-dashboard-utility-rail-width: calc(var(--app-active-rail-width) + var(--app-sidebar-width));
    --communication-direction-rail-width: 0.375rem;

    /* Foundation */
    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-elevated: #ffffff;

    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-text-subtle: #6b7280;
    --color-text-inverse: #ffffff;

    --color-border: #d7dee8;
    --color-border-muted: #e8edf3;
    --color-border-strong: #b8c2cf;

    /*
     * Unthemed fallback. Production theme palettes and their base/accent
     * pairs are centralized in _theme_tokens.css.
     */
    --color-brand: #1e90ff;
    --color-brand-hover: #1877d8;
    --color-brand-active: #145fad;
    --color-brand-soft: #eaf4ff;
    --color-brand-text: #ffffff;
    --color-theme-base: var(--color-brand-active);
    --color-theme-base-hover: var(--color-brand-active);
    --color-theme-base-active: var(--color-brand-active);
    --color-theme-base-soft: var(--color-brand-soft);
    --color-theme-base-border: var(--color-feature-calls-border);
    --color-theme-base-text: var(--color-brand-text);
    --color-theme-accent: var(--color-brand);
    --color-theme-accent-hover: var(--color-brand-hover);
    --color-theme-accent-active: var(--color-brand-active);
    --color-theme-accent-soft: var(--color-brand-soft);
    --color-theme-accent-border: var(--color-feature-calls-border);
    --color-theme-accent-text: var(--color-brand-text);
    /* Foreground on pale accent surfaces, distinct from solid-button text. */
    --color-theme-accent-soft-text: var(--color-theme-base);

    /*
     * Framework-neutral semantic aliases. Vue components consume these
     * names now; Tailwind 4 can expose the same values through @theme later.
     */
    --background: var(--color-bg);
    --foreground: var(--color-text);
    --card: var(--color-surface-elevated);
    --card-foreground: var(--color-text);
    --popover: var(--color-surface-elevated);
    --popover-foreground: var(--color-text);
    --primary: var(--color-brand);
    --primary-foreground: var(--color-brand-text);
    --secondary: var(--color-surface-muted);
    --secondary-foreground: var(--color-text);
    --muted: var(--color-surface-muted);
    --muted-foreground: var(--color-text-muted);
    --accent: var(--color-brand-soft);
    --accent-foreground: var(--color-brand-active);
    --destructive: var(--color-danger);
    --destructive-foreground: var(--color-text-inverse);
    --border: var(--color-border-muted);
    --input: var(--color-border);
    --ring: var(--color-brand);
    --radius: 0.625rem;

    /* Floating workspace controls */
    --workspace-popover-gap: 8px;
    --workspace-popover-radius: 0.82rem;
    --workspace-popover-padding: 0.72rem;
    --workspace-popover-background: var(--color-surface-elevated);
    --workspace-popover-border: var(--color-border);
    --workspace-popover-shadow: var(--elevation-popover);
    --workspace-popover-toolbar-gap: 0.42rem;
    --workspace-popover-control-height: 2.55rem;
    --workspace-popover-control-radius: 0.62rem;
    --workspace-popover-section-gap: 0.62rem;
    --workspace-popover-section-padding: 0.72rem;
    --workspace-popover-section-radius: 0.72rem;
    --workspace-popover-section-background: color-mix(in srgb, var(--surface-panel-field-bg) 76%, transparent);
    --ui-type-title: 1rem;
    --ui-type-body: 0.9375rem;
    --ui-type-notice: 1rem;
    --ui-type-control: 0.875rem;
    --ui-type-meta: 0.8125rem;
    --ui-type-help: 0.8125rem;
    --ui-type-badge: 0.8125rem;
    --ui-type-caption: 0.75rem;
    --ui-control-min-height: 2.75rem;
    --communication-deck-action-width: 12.5rem;
    --communication-deck-control-height: 4rem;
    --communication-rail-background: #263548;
    --communication-rail-background-hover: #34465d;
    --communication-rail-text: #f1f5f9;
    --communication-rail-muted: #cbd5e1;
    --communication-rail-accent: #a8c7fa;
    --communication-rail-separator: rgba(226, 232, 240, 0.18);
    --communication-rail-online: #5eead4;
    --communication-rail-warning: #fbbf24;
    --communication-rail-error: #fda4af;
    --communication-activity-direct: #fda4af;
    --communication-activity-queue: #7dd3fc;
    --communication-activity-recent: #cbd5e1;
    --communication-activity-text: #d8b4fe;

    /* Feature accents */
    --color-feature-calls: #145fad;
    --color-feature-calls-soft: #eaf4ff;
    --color-feature-calls-border: #b8d7f2;
    --color-feature-calls-text: #ffffff;

    --color-feature-contacts: #0d4f86;
    --color-feature-contacts-soft: #edf4fa;
    --color-feature-contacts-border: #b3cadc;
    --color-feature-contacts-text: #ffffff;

    --color-feature-texts: #334155;
    --color-feature-texts-soft: #f1f5f9;
    --color-feature-texts-border: #cbd5e1;
    --color-feature-texts-text: #ffffff;

    --color-feature-summary: #0d4f86;
    --color-feature-summary-soft: #edf4fa;
    --color-feature-summary-text: #ffffff;

    --color-feature-settings: #334155;
    --color-feature-settings-soft: #f1f5f9;
    --color-feature-settings-text: #ffffff;

    /* Public marketing roles */
    --color-marketing-primary: var(--color-brand-active);
    --color-marketing-primary-hover: #104f91;
    --color-marketing-primary-active: #0d4f86;
    --color-marketing-primary-soft: var(--color-brand-soft);
    --color-marketing-secondary: var(--color-brand);
    --color-marketing-secondary-soft: var(--color-brand-soft);
    --color-marketing-dark: #0d4f86;

    /* Semantic states */
    --color-info: #0c4b5f;
    --color-info-soft: #cdeefe;
    --color-info-border: #a3defc;
    --color-info-text: #0c4b5f;

    --color-success: #155d46;
    --color-success-soft: #d1f2e2;
    --color-success-border: #a8e3c6;
    --color-success-text: #155d46;

    --color-warning: #5c4600;
    --color-warning-soft: #fff1c2;
    --color-warning-border: #ffe398;
    --color-warning-text: #5c4600;

    --color-danger: #842029;
    --color-danger-soft: #f3d5da;
    --color-danger-border: #e3aeb7;
    --color-danger-text: #842029;

    --color-neutral: #4b5563;
    --color-neutral-soft: #f3f4f6;
    --color-neutral-border: #d1d5db;
    --color-neutral-text: #374151;

    --color-inverse: #4b5563;
    --color-inverse-soft: #6b7280;
    --color-inverse-border: #374151;
    --color-inverse-text: #f9fafb;

    /* Elevated account credential indicators (orange; parent scope uses danger red). */
    --color-credential-elevated: #9a3412;
    --color-credential-elevated-soft: #ffedd5;
    --color-credential-elevated-border: #fdba74;

    /* Operational impact, separate from success/failure status. */
    --color-work-external: #9a3412;
    --color-work-external-soft: #ffedd5;
    --color-work-external-border: #fdba74;

    /* Tables */
    --table-header-bg: #eef4ff;
    --table-header-text: #2b436c;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #f2f6fb;
    --table-border: var(--color-border);

    /* Buttons */
    --button-bg: #f3f4f6;
    --button-text: #374151;
    --button-border: #d1d5db;
    --button-hover-bg: #e5e7eb;
    --button-hover-text: #111827;
    --button-hover-border: #c4ccd6;

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: var(--color-text);
    --input-placeholder: #9ca3af;
    --input-border: var(--color-border);
    --input-focus-border: var(--color-brand);
    --input-focus-ring: rgba(30, 144, 255, 0.18);

    /* Scrollbars */
    --scrollbar-size: 10px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(51, 65, 85, 0.26);
    --scrollbar-thumb-hover: rgba(51, 65, 85, 0.38);
    --scrollbar-thumb-active: rgba(51, 65, 85, 0.48);

    /* Unique / specialty */
    --color-volume-base: #9d174d;
    --color-volume-fill: #d977a9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 24, 40, 0.18);

    /* Interactive surfaces */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.10);
    --elevation-content: var(--shadow-card);
    --elevation-content-hover: var(--shadow-card-hover);
    --elevation-floating-control: var(--shadow-md);
    --elevation-popover: var(--shadow-panel);
    --elevation-drawer: var(--shadow-modal);
    --elevation-sticky-header: 0 8px 20px color-mix(in srgb, var(--color-theme-base) 12%, transparent);
    --elevation-sticky-footer: 0 -10px 26px color-mix(in srgb, var(--color-theme-base) 12%, transparent);
    --motion-card-lift: translateY(-1px);
    --motion-card-transition: border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, transform 0.16s ease;
    --motion-card-sheen: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.34) 42%, transparent 72%);

    --surface-panel-border: rgba(146, 174, 214, 0.26);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(216, 232, 255, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.58);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.92);
    --surface-panel-soft-control-bg: rgba(255, 255, 255, 0.76);
    --shadow-panel: 0 14px 34px rgba(16, 24, 40, 0.18);
    --shadow-modal: 0 18px 46px rgba(15, 23, 42, 0.24);

    /* Layering contract: content < chrome < primary drawer < modal < toast. */
    --z-app-chrome: 900;
    --z-primary-drawer: 1240;
    --z-modal: 1260;
    --z-toast: 1400;
    --ui-drawer-edge-radius: 0.9rem;

    /* Live call states */
    --color-call-active: #0f766e;
    --color-call-active-soft: #e6fffb;
    --color-call-active-border: #99f6e4;
    --shadow-call-active: rgba(15, 118, 110, 0.30);

    --color-call-ringing: #d97706;
    --color-call-ringing-soft: #fff7ed;
    --color-call-ringing-border: #fdba74;
    --shadow-call-ringing: rgba(217, 119, 6, 0.34);

    /* Overlay */
    --overlay-backdrop: rgba(15, 23, 42, 0.42);

}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

@media (min-width: 1180px) {
    :root {
        --app-sidebar-width: var(--app-sidebar-compact-width);
    }
}

/* Let the Dashboard's auxiliary rail compress independently on reduced
 * panoramic displays. Primary navigation follows the content-width threshold. */
@media (min-width: 1900px) and (max-width: 2299px) {
    :root {
        --app-active-rail-width: clamp(22rem, 18vw, 24rem);
    }
}

/* 62.375rem content + a 14rem navigation rail and balanced outer insets. */
@media (min-width: 1480px) {
    :root {
        --app-sidebar-width: var(--app-sidebar-expanded-width);
    }
}



/*
 * Central application and public-site theme authority.
 *
 * Every theme follows the same contract: a stable base color carries
 * navigation and feature identity, while one accent color supplies small
 * emphasis rails, focus details, and marketing highlights. Component files
 * consume semantic --color-* variables and do not choose theme colors.
 */

:root {
    --palette-modern-base: #145fad;
    --palette-modern-base-hover: #104f91;
    --palette-modern-base-active: #0d4f86;
    --palette-modern-base-soft: #eaf4ff;
    --palette-modern-base-border: #b8d7f2;
    --palette-modern-accent: #1e90ff;
    --palette-modern-accent-hover: #1877d8;
    --palette-modern-accent-border: #a5d3ff;

    --palette-boutique-base: #082d50;
    --palette-boutique-base-hover: #174e7d;
    --palette-boutique-base-active: #061f38;
    --palette-boutique-base-soft: #edf2f7;
    --palette-boutique-base-border: #b8c8d7;
    --palette-boutique-accent: #ce921e;
    --palette-boutique-accent-hover: #b8790d;
    --palette-boutique-accent-active: #9a670b;
    --palette-boutique-accent-soft: #fff6df;
    --palette-boutique-accent-border: #ead19b;

    --palette-cleanline-base: #0b4f55;
    --palette-cleanline-base-hover: #083f44;
    --palette-cleanline-base-active: #06383c;
    --palette-cleanline-base-soft: #e5f1f1;
    --palette-cleanline-base-border: #afd1cf;
    --palette-cleanline-accent: #0b7f83;
    --palette-cleanline-accent-hover: #096d70;
    --palette-cleanline-accent-active: #07595c;
    --palette-cleanline-accent-soft: #e3f6f4;
    --palette-cleanline-accent-border: #a8dcd7;

    --palette-brand-base: #101c2e;
    --palette-brand-base-hover: #1a304c;
    --palette-brand-base-active: #0a1320;
    --palette-brand-base-soft: #eaf4fe;
    --palette-brand-base-border: #b9cee5;
    --palette-brand-primary: #0e86f6;
    --palette-brand-primary-hover: #0875dd;
    --palette-brand-primary-active: #0966bb;
    --palette-brand-primary-soft: #eaf4fe;
    --palette-brand-accent: #f4b925;
    --palette-brand-accent-hover: #dda314;
    --palette-brand-accent-active: #b98208;
    --palette-brand-accent-soft: #fff7df;
    --palette-brand-accent-border: #f2d077;
}

:root {
    /* Communication surfaces distinguish collections, records, and inputs.
       Direction and call status retain their independent semantic palettes. */
    /* Shared call dialogue and analysis roles. */
    --call-inquiry-accent: #1479c9;
    --call-inquiry-bg: #eff6ff;
    --call-inquiry-border: #bfdbfe;
    --call-inquiry-ink: #1d4f8f;
    --call-resolution-accent: #15985f;
    --call-resolution-bg: #f0fdf4;
    --call-resolution-border: #bbf7d0;
    --call-resolution-ink: #166534;
    --communication-collection-bg: color-mix(in srgb, var(--color-theme-base) 3%, var(--color-surface));
    --communication-record-bg: var(--color-surface);
    --communication-input-bg: var(--color-surface);
    --communication-row-stripe: color-mix(in srgb, var(--color-theme-base) 4%, var(--color-surface));
    --communication-row-hover: color-mix(in srgb, var(--color-theme-base) 7%, var(--color-surface));
    --communication-record-selected: color-mix(in srgb, #dcecff 75%, var(--color-surface));
    --communication-selection-ink: #236fb5;
    /* Channel identity is independent of navigation and semantic status colors.
       Override these three colors per theme, or keep the root palette for all. */
    --communication-call-color: #087f8c;
    --communication-text-color: #5965d8;
    --communication-voicemail-color: #a65e92;
    --communication-summary-call-ink: var(--communication-call-color);
    --communication-summary-text-ink: var(--communication-text-color);
    --communication-voicemail-ink: var(--communication-voicemail-color);
    --communication-voicemail-soft: color-mix(in srgb, var(--communication-voicemail-ink) 9%, var(--color-surface));

    /* Independent context, toolbar and tab palettes. No channel or status tokens
       feed these structural surfaces; theme overrides can change each separately. */
    --workspace-context-start: var(--color-theme-base-active);
    --workspace-context-end: var(--color-theme-base);
    --workspace-context-text: #ffffff;
    --workspace-context-border: color-mix(in srgb, var(--workspace-context-text) 24%, transparent);
    --workspace-context-background: linear-gradient(135deg, var(--workspace-context-start), var(--workspace-context-end));
    --workspace-context-control-background: color-mix(in srgb, var(--workspace-context-text) 7%, transparent);
    --workspace-toolbar-background: #173753;
    --workspace-toolbar-text: #f1f5f9;
    --workspace-toolbar-muted: #cbd5e1;
    --workspace-toolbar-accent: color-mix(in srgb, var(--color-theme-accent) 35%, white);
    --workspace-toolbar-hover: color-mix(in srgb, var(--workspace-toolbar-background) 88%, white);
    --workspace-toolbar-border: color-mix(in srgb, var(--workspace-toolbar-text) 18%, transparent);
    --workspace-tab-accent: var(--color-theme-base);
    --workspace-tab-ink: var(--color-text-muted);
    --workspace-tab-active-ink: var(--workspace-tab-accent);
    --workspace-tab-background: var(--color-surface-muted);
    --workspace-tab-active-background: color-mix(in srgb, var(--workspace-tab-accent) 10%, var(--color-surface));
    --workspace-tab-hover-background: color-mix(in srgb, var(--workspace-tab-accent) 6%, var(--color-surface));
    --workspace-tab-border: color-mix(in srgb, var(--workspace-tab-accent) 23%, var(--color-surface));
    --workspace-panel-header-bg: color-mix(in srgb, var(--workspace-tab-accent) 4%, var(--color-surface-elevated));

    --communication-rail-background: var(--workspace-toolbar-background);
    --communication-rail-background-hover: var(--workspace-toolbar-hover);
    --communication-rail-text: var(--workspace-toolbar-text);
    --communication-rail-muted: var(--workspace-toolbar-muted);
    --communication-rail-accent: var(--workspace-toolbar-accent);
    --communication-rail-separator: var(--workspace-toolbar-border);
}

html.app-theme-modern,
html.app-theme-boutique,
html.app-theme-cleanline,
html.app-theme-brand {
    color-scheme: light;
    --surface-drawer-bg: var(--color-surface-muted);

    --color-theme-accent-soft-text: var(--color-theme-base);

    --color-brand: var(--color-theme-base);
    --color-brand-hover: var(--color-theme-base-hover);
    --color-brand-active: var(--color-theme-base-active);
    --color-brand-soft: var(--color-theme-base-soft);
    --color-brand-text: var(--color-theme-base-text);

    --color-feature-calls: var(--communication-call-color);
    --color-feature-calls-soft: color-mix(in srgb, var(--communication-call-color) 9%, var(--color-surface));
    --color-feature-calls-border: color-mix(in srgb, var(--communication-call-color) 25%, var(--color-surface));
    --color-feature-calls-text: var(--color-theme-base-text);
    --color-feature-contacts: var(--color-theme-base);
    --color-feature-contacts-soft: var(--color-theme-base-soft);
    --color-feature-contacts-border: var(--color-theme-base-border);
    --color-feature-contacts-text: var(--color-theme-base-text);
    --color-feature-texts: var(--communication-text-color);
    --color-feature-texts-soft: color-mix(in srgb, var(--communication-text-color) 9%, var(--color-surface));
    --color-feature-texts-border: color-mix(in srgb, var(--communication-text-color) 25%, var(--color-surface));
    --color-feature-texts-text: var(--color-theme-base-text);
    --color-feature-summary: var(--color-theme-base);
    --color-feature-summary-soft: var(--color-theme-base-soft);
    --color-feature-summary-text: var(--color-theme-base-text);
    --color-feature-settings: var(--color-theme-base);
    --color-feature-settings-soft: var(--color-theme-base-soft);
    --color-feature-settings-text: var(--color-theme-base-text);

    --color-marketing-primary: var(--color-theme-base);
    --color-marketing-primary-hover: var(--color-theme-base-hover);
    --color-marketing-primary-active: var(--color-theme-base-active);
    --color-marketing-primary-soft: var(--color-theme-base-soft);
    --color-marketing-secondary: var(--color-theme-accent);
    --color-marketing-secondary-soft: var(--color-theme-accent-soft);
    --color-marketing-dark: var(--color-theme-base);

    --input-focus-border: var(--color-theme-accent);
    --input-focus-ring: color-mix(in srgb, var(--color-theme-accent) 18%, transparent);
    --theme-emphasis-border: color-mix(in srgb, var(--color-theme-accent) 52%, transparent);
    --theme-emphasis-background: linear-gradient(
        135deg,
        var(--color-theme-base-active) 0%,
        var(--color-theme-base) 100%
    );
    --theme-emphasis-color: var(--color-theme-base-text);
    --theme-emphasis-shadow: 0 2px 7px color-mix(in srgb, var(--color-theme-base) 22%, transparent);
}

html.app-theme-modern {
    --communication-call-color: #087f8c;
    --communication-text-color: #5965d8;
    --communication-voicemail-color: #a65e92;
    --workspace-toolbar-background: #173753;
    --color-theme-base: var(--palette-modern-base);
    --color-theme-base-hover: var(--palette-modern-base-hover);
    --color-theme-base-active: var(--palette-modern-base-active);
    --color-theme-base-soft: var(--palette-modern-base-soft);
    --color-theme-base-border: var(--palette-modern-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-modern-accent);
    --color-theme-accent-hover: var(--palette-modern-accent-hover);
    --color-theme-accent-active: var(--palette-modern-base);
    --color-theme-accent-soft: var(--palette-modern-base-soft);
    --color-theme-accent-border: var(--palette-modern-accent-border);
    --color-theme-accent-text: #ffffff;

    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-text-subtle: #6b7280;
    --color-border: #d7dee8;
    --color-border-muted: #e8edf3;
    --color-border-strong: #b8c2cf;

    --table-header-bg: #eef4ff;
    --table-header-text: #2b436c;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #f2f6fb;
    --button-bg: #f3f4f6;
    --button-text: #374151;
    --button-border: #d1d5db;
    --button-hover-bg: #e5e7eb;
    --button-hover-text: #111827;
    --button-hover-border: #c4ccd6;
    --input-bg: #ffffff;
    --input-placeholder: #9ca3af;
    --scrollbar-thumb: rgba(51, 65, 85, 0.26);
    --scrollbar-thumb-hover: rgba(51, 65, 85, 0.38);
    --scrollbar-thumb-active: rgba(51, 65, 85, 0.48);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 24, 40, 0.18);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.10);
    --surface-panel-border: rgba(146, 174, 214, 0.26);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(216, 232, 255, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.58);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.92);
    --surface-panel-soft-control-bg: rgba(255, 255, 255, 0.76);
    --shadow-panel: 0 14px 34px rgba(16, 24, 40, 0.18);
    --shadow-modal: 0 18px 46px rgba(15, 23, 42, 0.24);
    --color-call-active: #0f766e;
    --color-call-active-soft: #e6fffb;
    --color-call-active-border: #99f6e4;
    --shadow-call-active: rgba(15, 118, 110, 0.30);
    --color-call-ringing: #d97706;
    --color-call-ringing-soft: #fff7ed;
    --color-call-ringing-border: #fdba74;
    --shadow-call-ringing: rgba(217, 119, 6, 0.34);
    --overlay-backdrop: rgba(15, 23, 42, 0.42);
}

html.app-theme-boutique {
    --communication-call-color: #316c70;
    --communication-text-color: #62658e;
    --communication-voicemail-color: #8b5c7a;
    --workspace-toolbar-background: #233b4c;
    --color-theme-base: var(--palette-boutique-base);
    --color-theme-base-hover: var(--palette-boutique-base-hover);
    --color-theme-base-active: var(--palette-boutique-base-active);
    --color-theme-base-soft: var(--palette-boutique-base-soft);
    --color-theme-base-border: var(--palette-boutique-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-boutique-accent);
    --color-theme-accent-hover: var(--palette-boutique-accent-hover);
    --color-theme-accent-active: var(--palette-boutique-accent-active);
    --color-theme-accent-soft: var(--palette-boutique-accent-soft);
    --color-theme-accent-border: var(--palette-boutique-accent-border);
    --color-theme-accent-text: var(--palette-boutique-base);

    --color-bg: #f4eee6;
    --color-surface: #fffdf9;
    --color-surface-muted: #f8f1e8;
    --color-surface-elevated: #fffefa;
    --color-text: #102f4d;
    --color-text-muted: #5f6470;
    --color-text-subtle: #756f68;
    --color-border: #dacbbb;
    --color-border-muted: #eadfd3;
    --color-border-strong: #bda98f;

    --table-header-bg: #efe3d4;
    --table-header-text: #173b5b;
    --table-row-odd: #fffdf9;
    --table-row-even: #faf4ec;
    --table-row-hover: #f6eadb;
    --button-bg: #f4eadf;
    --button-text: #173b5b;
    --button-border: #d7c6b4;
    --button-hover-bg: #eadbc9;
    --button-hover-text: #082d50;
    --button-hover-border: #c4ae96;
    --input-bg: #fffefa;
    --input-placeholder: #938a80;
    --scrollbar-thumb: rgba(8, 45, 80, 0.24);
    --scrollbar-thumb-hover: rgba(8, 45, 80, 0.36);
    --scrollbar-thumb-active: rgba(8, 45, 80, 0.46);

    --shadow-sm: 0 1px 2px rgba(58, 39, 22, 0.07);
    --shadow-md: 0 6px 18px rgba(58, 39, 22, 0.11);
    --shadow-lg: 0 14px 34px rgba(8, 45, 80, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(8, 45, 80, 0.16);
    --shadow-card: 0 1px 2px rgba(58, 39, 22, 0.06), 0 8px 22px rgba(8, 45, 80, 0.08);
    --shadow-card-hover: 0 1px 2px rgba(58, 39, 22, 0.07), 0 12px 28px rgba(8, 45, 80, 0.12);
    --surface-panel-border: rgba(189, 169, 143, 0.4);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(244, 222, 190, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.99) 0%, rgba(248, 241, 232, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 253, 249, 0.68);
    --surface-panel-control-bg: rgba(255, 254, 250, 0.94);
    --surface-panel-soft-control-bg: rgba(255, 253, 249, 0.8);
    --shadow-panel: 0 14px 34px rgba(8, 45, 80, 0.17);
    --shadow-modal: 0 18px 46px rgba(8, 45, 80, 0.22);
    --color-call-active: #1f65b7;
    --color-call-active-soft: #e9f1fb;
    --color-call-active-border: #aac8e8;
    --shadow-call-active: rgba(31, 101, 183, 0.30);
    --color-call-ringing: #c2413b;
    --color-call-ringing-soft: #fff0ef;
    --color-call-ringing-border: #e7a5a1;
    --shadow-call-ringing: rgba(194, 65, 59, 0.30);
    --overlay-backdrop: rgba(8, 45, 80, 0.42);
}

html.app-theme-cleanline {
    --communication-call-color: #246c72;
    --communication-text-color: #58679b;
    --communication-voicemail-color: #8f6182;
    --workspace-toolbar-background: #214748;
    --color-theme-base: var(--palette-cleanline-base);
    --color-theme-base-hover: var(--palette-cleanline-base-hover);
    --color-theme-base-active: var(--palette-cleanline-base-active);
    --color-theme-base-soft: var(--palette-cleanline-base-soft);
    --color-theme-base-border: var(--palette-cleanline-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-cleanline-accent);
    --color-theme-accent-hover: var(--palette-cleanline-accent-hover);
    --color-theme-accent-active: var(--palette-cleanline-accent-active);
    --color-theme-accent-soft: var(--palette-cleanline-accent-soft);
    --color-theme-accent-border: var(--palette-cleanline-accent-border);
    --color-theme-accent-text: #ffffff;

    --color-bg: #f1f8f8;
    --color-surface: #fbfefe;
    --color-surface-muted: #f1f9fa;
    --color-surface-elevated: #ffffff;
    --color-text: #123247;
    --color-text-muted: #526b79;
    --color-text-subtle: #718590;
    --color-border: #c9dde1;
    --color-border-muted: #e0edef;
    --color-border-strong: #9dbdc3;

    --table-header-bg: #e3f1f3;
    --table-header-text: #21495d;
    --table-row-odd: #fbfefe;
    --table-row-even: #f3fafa;
    --table-row-hover: #e8f5f6;
    --button-bg: #e8f3f5;
    --button-text: #21495d;
    --button-border: #c4dade;
    --button-hover-bg: #d9ecef;
    --button-hover-text: #123247;
    --button-hover-border: #a8c9cf;
    --input-bg: #ffffff;
    --input-placeholder: #82949c;
    --scrollbar-thumb: rgba(18, 50, 71, 0.22);
    --scrollbar-thumb-hover: rgba(18, 50, 71, 0.34);
    --scrollbar-thumb-active: rgba(18, 50, 71, 0.44);

    --surface-panel-border: rgba(157, 189, 195, 0.46);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(196, 237, 239, 0.76), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(241, 249, 250, 0.99) 100%);
    --surface-panel-field-bg: rgba(251, 254, 254, 0.72);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.94);
    --surface-panel-soft-control-bg: rgba(251, 254, 254, 0.82);
    --shadow-panel: 0 14px 34px rgba(18, 50, 71, 0.15);
    --shadow-modal: 0 18px 46px rgba(18, 50, 71, 0.21);
    --color-call-active: #0b7f83;
    --color-call-active-soft: #def3f4;
    --color-call-active-border: #99d1d6;
    --shadow-call-active: rgba(11, 127, 131, 0.28);
    --color-call-ringing: #c5523f;
    --color-call-ringing-soft: #fff0ed;
    --color-call-ringing-border: #e9aaa0;
    --shadow-call-ringing: rgba(197, 82, 63, 0.28);
    --overlay-backdrop: rgba(18, 50, 71, 0.40);
}

html.app-theme-brand {
    --communication-call-color: #007b89;
    --communication-text-color: #5361cf;
    --communication-voicemail-color: #9e548a;
    --workspace-toolbar-background: #1c2d43;
    --workspace-context-start: var(--palette-brand-base);
    --workspace-context-end: var(--palette-brand-primary-active);
    --workspace-tab-accent: var(--palette-brand-primary-active);
    --color-theme-base: var(--palette-brand-base);
    --color-theme-base-hover: var(--palette-brand-base-hover);
    --color-theme-base-active: var(--palette-brand-base-active);
    --color-theme-base-soft: var(--palette-brand-base-soft);
    --color-theme-base-border: var(--palette-brand-base-border);
    --color-theme-base-text: #ffffff;
    --color-theme-accent: var(--palette-brand-accent);
    --color-theme-accent-hover: var(--palette-brand-accent-hover);
    --color-theme-accent-active: var(--palette-brand-accent-active);
    --color-theme-accent-soft: var(--palette-brand-accent-soft);
    --color-theme-accent-border: var(--palette-brand-accent-border);
    --color-theme-accent-text: var(--palette-brand-base);

    /* Brand Preview separates structural chrome from primary actions. */
    --color-brand: var(--palette-brand-primary);
    --color-brand-hover: var(--palette-brand-primary-hover);
    --color-brand-active: var(--palette-brand-primary-active);
    --color-brand-soft: var(--palette-brand-primary-soft);
    --color-brand-text: #ffffff;
    --color-marketing-primary: var(--palette-brand-primary);
    --color-marketing-primary-hover: var(--palette-brand-primary-hover);
    --color-marketing-primary-active: var(--palette-brand-primary-active);
    --color-marketing-primary-soft: var(--palette-brand-primary-soft);
    --input-focus-border: var(--palette-brand-primary);
    --input-focus-ring: color-mix(in srgb, var(--palette-brand-primary) 20%, transparent);

    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-surface-elevated: #ffffff;
    --color-text: #121e30;
    --color-text-muted: #536176;
    --color-text-subtle: #718096;
    --color-border: #d8e2ec;
    --color-border-muted: #e8eef4;
    --color-border-strong: #b7c7d7;

    --table-header-bg: #eaf4fe;
    --table-header-text: #162a44;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #eef6fe;
    --button-bg: #edf4fb;
    --button-text: #172b45;
    --button-border: #cfdeec;
    --button-hover-bg: #deebf7;
    --button-hover-text: #101c2e;
    --button-hover-border: #b8cce0;
    --input-bg: #ffffff;
    --input-placeholder: #8491a3;
    --scrollbar-thumb: rgba(16, 28, 46, 0.24);
    --scrollbar-thumb-hover: rgba(16, 28, 46, 0.36);
    --scrollbar-thumb-active: rgba(16, 28, 46, 0.46);

    --shadow-sm: 0 1px 2px rgba(16, 28, 46, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 28, 46, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 28, 46, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 28, 46, 0.18);
    --shadow-card: 0 1px 2px rgba(16, 28, 46, 0.05), 0 8px 22px rgba(16, 28, 46, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(16, 28, 46, 0.06), 0 12px 28px rgba(16, 28, 46, 0.10);
    --surface-panel-border: rgba(142, 171, 203, 0.34);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(186, 220, 252, 0.68), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.64);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.94);
    --surface-panel-soft-control-bg: rgba(248, 250, 252, 0.84);
    --shadow-panel: 0 14px 34px rgba(16, 28, 46, 0.18);
    --shadow-modal: 0 18px 46px rgba(16, 28, 46, 0.24);
    --color-call-active: #0875dd;
    --color-call-active-soft: #eaf4fe;
    --color-call-active-border: #9cccf8;
    --shadow-call-active: rgba(14, 134, 246, 0.30);
    --color-call-ringing: #c2413b;
    --color-call-ringing-soft: #fff0ef;
    --color-call-ringing-border: #e7a5a1;
    --shadow-call-ringing: rgba(194, 65, 59, 0.30);
    --overlay-backdrop: rgba(16, 28, 46, 0.44);
}



/* Remaining legacy action styling; My Account now uses scoped Vue primitives. */
.button.danger {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}



.activity-metrics {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.activity-header-row {
    position: sticky;
    z-index: 18;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
}

.activity-header-row[hidden] {
    display: none !important;
}

.activity-hourly-chart-home,
.activity-header-insights-home {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    min-width: 0;
}

.activity-hourly-chart-home > *,
.activity-header-insights-home > * {
    width: 100%;
}

.activity-metrics-stack {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--workspace-context-border);
    border-top: 0;
    border-radius: 0 0 var(--workspace-edge-radius, .65rem) var(--workspace-edge-radius, .65rem);
    background: var(--workspace-context-background);
    box-shadow: 0 0.3rem 0.75rem rgba(15, 23, 42, 0.13);
    color: var(--workspace-context-text);
}

.activity-metrics-stack[hidden] {
    display: none !important;
}

.activity-header-row.is-collapsed .activity-metrics-stack {
    width: min(100%, var(--app-content-width));
}

.activity-header-row.is-context-only .activity-metrics-stack {
    width: min(100%, var(--app-content-width));
}

.activity-header-row.is-collapsed .activity-intelligence-grid {
    grid-template-columns: minmax(0, var(--app-content-width));
    grid-template-rows: auto;
}

.activity-header-row.is-context-only .activity-intelligence-grid {
    grid-template-columns: minmax(0, var(--app-content-width));
    grid-template-rows: auto;
}

.activity-header-row.is-collapsed .activity-hourly-chart-home,
.activity-header-row.is-collapsed .activity-intelligence-module.activity-intelligence-activity,
.activity-header-row.is-collapsed .activity-header-insights-home {
    display: none;
}

.activity-header-row.is-context-only .activity-hourly-chart-home,
.activity-header-row.is-context-only .activity-intelligence-module.activity-intelligence-activity,
.activity-header-row.is-context-only .activity-header-insights-home {
    display: none;
}

.activity-header-row.is-collapsed .activity-context-filter-rail-home {
    grid-column: 1;
    grid-row: 1;
    border-radius: 0 0 0.56rem 0.56rem;
}

.activity-header-row.is-context-only .activity-context-filter-rail-home {
    grid-column: 1;
    grid-row: 1;
    border-radius: 0 0 0.56rem 0.56rem;
}

.activity-intelligence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-content-width)) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    column-gap: 0.38rem;
    row-gap: 0;
    padding: 0;
}

.activity-hourly-chart-home {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: end;
    width: min(100%, 30rem);
}

.activity-intelligence-module.activity-intelligence-activity {
    grid-column: 2;
    grid-row: 1;
    border-radius: 0.56rem 0.56rem 0 0;
}

.activity-context-filter-rail-home {
    grid-column: 2;
    grid-row: 2;
}

.activity-header-insights-home {
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: start;
    width: min(100%, 30rem);
}

/* The navigation rail overlays the left viewport wing. Keep the optional
 * chart inside the remaining visible gutter without moving the Activity
 * module away from the physical viewport center. */
body.workspace-shell-view .activity-hourly-chart-home {
    width: min(
        calc(100% - var(--app-sidebar-width) - var(--app-shell-gutter)),
        30rem
    );
}

.activity-intelligence-module {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 5.2rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 0.56rem;
    background: rgba(255, 255, 255, 0.09);
    color: var(--workspace-context-text);
}

.activity-intelligence-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 0.65rem;
    min-height: 1.55rem;
    padding: 0.22rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.055);
}

.activity-intelligence-module-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.34rem;
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.activity-intelligence-module-title > .gmi {
    font-size: 1rem;
}

.activity-intelligence-activity > .activity-intelligence-module-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.activity-intelligence-module-guide {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    min-width: 0;
    gap: 0.38rem;
    color: rgba(219, 234, 254, 0.9);
    font-size: var(--ui-type-caption);
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.activity-intelligence-module-guide strong {
    color: var(--workspace-context-text);
    font-weight: 900;
}

.activity-intelligence-module-period {
    justify-self: end;
    min-width: 0;
    overflow: hidden;
    color: rgba(219, 234, 254, 0.94);
    font-size: var(--ui-type-meta);
    font-weight: 750;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-hourly-responsive-note {
    display: none;
}

@media (min-width: 721px) and (max-width: 1490px) {
    .activity-hourly-responsive-note {
        display: inline-flex;
    }

    .activity-intelligence-module-guide:has(.activity-metric-active-help) .activity-hourly-responsive-note {
        display: none;
    }
}

@media (max-width: 1160px) {
    .activity-intelligence-module-guide > .activity-metric-active-help {
        font-size: 0;
    }

    .activity-intelligence-module-guide strong {
        font-size: var(--ui-type-caption);
    }
}

@media (max-width: 720px) {
    .activity-intelligence-module-guide {
        display: none;
    }

    .activity-intelligence-activity > .activity-intelligence-module-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.activity-header-insights {
    height: 100%;
}

.activity-header-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    min-height: 0;
}

.activity-header-insight {
    display: grid;
    align-items: center;
    min-width: 0;
    padding: 0.3rem 0.5rem;
}

.activity-header-insight + .activity-header-insight {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.activity-header-insight:nth-child(3) {
    border-left-color: rgba(255, 255, 255, 0.34);
}

.activity-header-insight-copy {
    display: grid;
    min-width: 0;
    gap: 0.11rem;
}

.activity-header-insight-copy small,
.activity-header-insight-copy span {
    overflow: hidden;
    color: rgba(219, 234, 254, 0.9);
    font-size: var(--ui-type-meta);
    font-weight: 700;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-header-insight-copy strong {
    overflow: hidden;
    color: var(--workspace-context-text);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-metrics-compact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.18rem;
    padding: 0.18rem 0.3rem;
}

.activity-context-rail {
    display: block;
    height: auto;
    min-width: 0;
    overflow: visible;
}

.activity-context-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    padding: 0;
}

.activity-context-section {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.activity-context-pulse-section,
.activity-context-filter-rail {
    box-sizing: border-box;
    background: transparent;
}

.activity-context-filter-rail-home {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 0.56rem 0.56rem;
    background: transparent;
}

.activity-context-filter-rail-home:empty {
    display: none;
}

.activity-context-filter-rail-home[hidden] {
    display: none !important;
}

.activity-context-filter-rail-home > .activity-context-filter-rail {
    width: 100%;
    border-radius: inherit;
}

.activity-context-pulse-section {
    height: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
}

.activity-context-filter-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 2.18rem;
    padding: 0;
    color: var(--workspace-context-text);
    border-radius: 0 0 0.56rem 0.56rem;
    background: var(--workspace-context-control-background);
}

.activity-context-panel {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.activity-context-pulse-panel {
    overflow-x: auto;
    scrollbar-width: none;
}

.activity-context-pulse-panel .activity-pulse-scope {
    display: none;
}

.activity-context-pulse-panel .activity-metrics-compact {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    overflow: visible;
    scrollbar-width: none;
}

.activity-intelligence-activity .activity-context-rail,
.activity-intelligence-activity .activity-context-layout,
.activity-intelligence-activity .activity-context-section,
.activity-intelligence-activity .activity-context-panel {
    height: 100%;
}

.activity-context-pulse-panel .activity-metrics-compact::-webkit-scrollbar,
.activity-current-view-content::-webkit-scrollbar {
    display: none;
}

.activity-context-pulse-panel .activity-pulse .daily-counter-pill,
.activity-context-pulse-panel .activity-pulse .daily-counter-stat {
    flex: 1 1 0;
    min-width: 4.5rem;
    min-height: 100%;
    padding: 0.34rem 0.28rem;
}

.activity-context-pulse-panel .daily-counter-context {
    font-size: var(--ui-type-caption);
}

.activity-context-date-group {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 0;
    flex: 0 0 12.25rem;
    width: 12.25rem;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 0.56rem 0.56rem;
    background: rgba(255, 255, 255, 0.1);
}

.activity-context-date,
.activity-context-date-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 1.88rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--workspace-context-text);
    padding: 0.22rem 0.5rem;
    font-size: var(--ui-type-meta);
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.activity-context-date-step {
    flex: 0 0 1.85rem;
    box-sizing: border-box;
    width: 1.85rem;
    min-width: 1.85rem;
    padding: 0;
}

.activity-context-date-step:first-child {
    border-radius: 0 0 0 0.56rem;
}

.activity-context-date-step:last-child {
    border-radius: 0 0 0.56rem 0;
}

.activity-context-date {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.activity-context-date > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-context-date-group:hover,
.activity-context-date-group:focus-within {
    background: rgba(255, 255, 255, 0.14);
}

.activity-context-date-group.is-disabled,
.activity-context-date-group.is-disabled:hover,
.activity-context-date-group.is-disabled:focus-within {
    background: rgba(255, 255, 255, 0.055);
}

.activity-context-date .gmi,
.activity-context-date-step .gmi {
    font-size: 0.95rem;
}

.activity-context-date:disabled,
.activity-context-date-step:disabled {
    cursor: default;
    opacity: 0.55;
}

.activity-current-view-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.35rem;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0.16rem 0.42rem;
}



.activity-current-view-content.has-account-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 19rem) minmax(0, 1fr);
    grid-template-areas: "focus account spacer";
    row-gap: 0;
    overflow-x: hidden;
}

.activity-current-view-content.has-account-filter.has-chips {
    grid-template-areas:
        "focus account spacer"
        "chips chips chips";
    row-gap: 0.3rem;
}

.activity-current-chips {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.3rem;
    margin-inline: auto;
}

.activity-current-view-content.has-account-filter .activity-current-chips {
    grid-area: chips;
    justify-self: center;
    max-width: 100%;
    overflow-x: auto;
}

.activity-current-focus {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.34rem;
    max-width: 18rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--color-brand-soft) 54%, var(--color-surface));
    padding: 0.28rem 0.5rem;
    color: var(--color-brand-active);
}

.activity-current-view-content.has-account-filter .activity-current-focus {
    grid-area: focus;
    justify-self: start;
}

.activity-current-focus > span:last-child {
    display: grid;
    min-width: 0;
}

.activity-current-focus strong,
.activity-current-focus small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-current-focus strong {
    font-size: var(--ui-type-badge);
}

.activity-current-focus small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-caption);
}

.activity-current-chip,
.activity-current-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.66rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    padding: 0.18rem 0.48rem;
    font-size: var(--ui-type-badge);
    font-weight: 750;
    cursor: pointer;
}

.activity-current-chip.is-context {
    border-color: color-mix(in srgb, var(--color-feature-contacts) 35%, var(--color-border));
    background: var(--color-feature-contacts-soft);
    color: var(--color-feature-contacts);
}

.activity-current-chip .gmi {
    font-size: 0.82rem;
}

.activity-current-filters {
    justify-self: end;
    align-self: stretch;
    justify-content: center;
    width: 12.25rem;
    min-height: 100%;
    border-radius: 0 0 0.56rem 0.56rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--workspace-context-text);
    padding-inline: 0.72rem;
    white-space: nowrap;
}

.activity-current-filters:hover:not(:disabled),
.activity-current-filters:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.activity-current-filters:disabled {
    cursor: default;
    opacity: 0.5;
}

.activity-current-filters > .gmi {
    font-size: 0.88rem;
}

.activity-current-filter-count {
    display: inline-grid;
    min-width: 1rem;
    min-height: 1rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-brand-active);
    color: var(--color-inverse-text);
    padding-inline: 0.2rem;
    font-size: var(--ui-type-caption);
    line-height: 1;
}

.activity-context-account-filter {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem;
    align-items: stretch;
    grid-area: account;
    justify-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 1.78rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.48rem;
    background: rgba(255, 255, 255, 0.09);
    color: var(--workspace-context-text);
    box-shadow: none;
}

.activity-context-account-filter.is-single-account { grid-template-columns: minmax(0, 1fr); }

.activity-context-account-step,
.activity-context-account-select {
    min-width: 0;
    min-height: 1.78rem;
    border: 0;
    background: transparent;
    color: inherit;
}

.activity-context-account-step {
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}

.activity-context-account-step:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.activity-context-account-step:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.activity-context-account-step:hover:not(:disabled),
.activity-context-account-step:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, 0.13);
    outline: none;
}

.activity-context-account-step:disabled {
    cursor: default;
    opacity: 0.42;
}

.activity-context-account-step .gmi {
    font-size: 0.9rem;
}

.activity-context-account-select {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.4rem 0.18rem;
}

.activity-context-account-menu-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.activity-context-account-menu-trigger:disabled {
    cursor: default;
    opacity: 0.55;
}

.activity-context-account-menu-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: var(--ui-type-caption);
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-context-account-menu-trigger > .gmi:last-child {
    color: inherit;
    font-size: 1rem;
}

.activity-context-account-select > .gmi {
    color: var(--color-theme-accent);
    font-size: 0.85rem;
}

.activity-context-account-select select {
    width: 100%;
    min-width: 0;
    min-height: 1.65rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    padding: 0 1.2rem 0 0.1rem;
    font: inherit;
    font-size: var(--ui-type-caption);
    font-weight: 850;
    text-overflow: ellipsis;
    cursor: pointer;
}

.activity-context-account-select select option {
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.activity-context-account-select select:disabled {
    cursor: default;
    opacity: 0.55;
}

.activity-context-account-popover.workspace-popover-shell {
    position: fixed;
    z-index: 1310;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(20rem, calc(100vw - 1rem));
    max-width: 20rem;
    height: auto;
    max-height: min(30rem, calc(100dvh - 1rem));
    overflow: hidden;
    overflow: clip;
    color: var(--color-text);
}

.activity-context-account-options {
    display: grid;
    align-content: start;
    min-height: 0;
    max-height: min(22rem, calc(100dvh - 8rem));
    gap: 0.3rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0;
}

.activity-context-account-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--ui-control-radius, 0.56rem);
    background: var(--surface-panel-field-bg);
    color: var(--color-text);
    padding: 0.48rem 0.6rem;
    text-align: left;
    cursor: pointer;
}

.activity-context-account-option.is-all {
    align-items: start;
    height: auto;
    min-height: 3.65rem;
    padding-block: 0.58rem;
}

.activity-context-account-option.is-all > .gmi {
    margin-top: 0.08rem;
}

.activity-context-account-option:hover,
.activity-context-account-option:focus-within,
.activity-context-account-option.is-selected {
    border-color: var(--color-brand-active);
    background: var(--color-brand-soft);
}

.activity-context-account-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.activity-context-account-option > .gmi {
    color: var(--color-brand-active);
    font-size: 1.05rem;
}

.activity-context-account-option > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.activity-context-account-option strong,
.activity-context-account-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-context-account-option strong {
    font-size: var(--ui-type-control);
}

.activity-context-account-option small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-caption);
}

.activity-context-account-option.is-all small {
    display: block;
    overflow: visible;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
}

.activity-context-account-popover-actions {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: var(--space-2, 0.5rem);
    border-top: 1px solid var(--color-border-muted);
    padding: var(--space-2, 0.5rem);
}

.activity-context-account-popover-actions button {
    min-height: var(--ui-control-min-height);
    border-radius: var(--ui-control-radius, 0.56rem);
    padding-inline: 0.75rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.activity-context-account-popover-actions .secondary {
    border: 1px solid var(--color-border-muted);
    background: var(--surface-panel-field-bg);
    color: var(--color-text);
}

.activity-context-account-popover-actions .primary {
    border: 1px solid var(--color-brand-active);
    background: var(--color-brand-active);
    color: var(--color-inverse-text);
}

.activity-metrics .activity-metrics-date-nav-mobile {
    display: none;
}

.activity-metrics-date-range-picker-host {
    --dp-font-family: var(--font-family-ui);
    --dp-background-color: var(--color-surface-elevated);
    --dp-text-color: var(--color-text);
    --dp-hover-color: var(--color-brand-soft);
    --dp-hover-text-color: var(--color-brand-active);
    --dp-primary-color: var(--color-brand-active);
    --dp-primary-text-color: var(--color-inverse-text);
    --dp-secondary-color: var(--color-text-subtle);
    --dp-border-color: var(--color-border-muted);
    --dp-menu-border-color: transparent;
    --dp-border-color-hover: var(--color-brand-active);
    --dp-border-color-focus: var(--color-brand-active);
    --dp-icon-color: var(--color-text-muted);
    --dp-range-between-dates-background-color: var(--color-brand-soft);
    --dp-range-between-dates-text-color: var(--color-brand-active);
    --dp-range-between-border-color: var(--color-brand-soft);
    --dp-border-radius: 0.55rem;
    --dp-cell-border-radius: 0.45rem;
    --dp-font-size: var(--ui-type-control);
    --dp-cell-size: 2.2rem;
    --dp-menu-min-width: 0;
    position: fixed;
    z-index: 1305;
    display: none;
    box-sizing: border-box;
    width: min(30rem, calc(100vw - 1rem));
    min-width: 0;
    max-width: 30rem;
    max-height: calc(100dvh - 1rem);
    overflow: auto;
    overscroll-behavior: contain;
    font-family: var(--font-family-ui);
}

.activity-metrics-date-range-picker-host .dp__menu {
    z-index: 1306 !important;
    width: 100%;
    border: 0;
    box-shadow: none;
}

.activity-metrics-date-range-picker-host .dp__main,
.activity-metrics-date-range-picker-host .dp--menu-wrapper {
    width: 100%;
}

.activity-metrics-date-range-picker-host .dp__menu_content_wrapper {
    align-items: stretch;
    flex-direction: row;
}

.activity-metrics-date-range-picker-host .dp--preset-dates {
    display: grid;
    flex: 0 0 8.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem 0.35rem 0;
    border: 0;
    border-right: 1px solid var(--color-border-muted);
}

.activity-metrics-date-range-picker-host .dp--preset-range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.48rem;
    background: var(--surface-panel-field-bg);
    padding: 0.26rem 0.35rem;
    color: var(--color-text-muted);
    font-family: var(--font-family-ui);
    font-size: var(--ui-type-control);
    font-weight: 800;
    text-align: center;
}

.activity-metrics-date-range-picker-host .dp__calendar_wrap {
    flex: 1 1 auto;
    padding-inline: 0;
}

.activity-date-picker-header {
    width: 100%;
    max-width: 100%;
}

.dp__outer_menu_wrap {
    z-index: 1306 !important;
}

.activity-metrics-date-range-picker-host.is-open {
    display: block;
}

.activity-date-picker-loading {
    display: grid;
    min-height: 12rem;
    place-items: center;
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 750;
}

.activity-metrics-date-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.62rem;
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    padding: 0.36rem 0.62rem;
    cursor: pointer;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 850;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.activity-metrics-date-clear-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.activity-metrics-compact {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0.42rem;
}

.activity-metrics-filter-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.05rem 0.35rem 0.4rem;
}

.activity-metrics-filter-badge-row[hidden] {
    display: none;
}

.activity-metrics-filter-clear-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: min(100%, 20rem);
    min-height: 1.55rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4f8f;
    padding: 0.18rem 0.56rem;
    font-size: var(--ui-type-badge);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.08);
}

.activity-metrics-filter-clear-badge[hidden] {
    display: none;
}

.activity-metrics-filter-clear-badge:hover,
.activity-metrics-filter-clear-badge:focus-visible {
    border-color: rgba(29, 78, 216, 0.34);
    background: #dbeafe;
}

.activity-metrics-filter-clear-badge.activity-metrics-filter-clear-all {
    border-color: rgba(217, 119, 6, 0.34);
    background: #fff7ed;
    color: #9a3412;
}

.activity-metrics-filter-clear-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-metrics-filter-clear-badge .material-symbols-rounded {
    font-size: 0.95rem;
    line-height: 1;
}

#activity_metrics_report_open.bgcolor-summary {
    border-color: #14b8a6;
    background: var(--color-feature-summary);
    color: var(--color-feature-summary-text);
}

.activity-metrics-date-nav-button.activity-metrics-reset-active,
.activity-metrics-date-clear-button.activity-metrics-reset-active {
    border-color: #d97706;
    background: #fef3c7;
    color: #78350f;
}

.summary-insights-panel {
    padding: 0 0.5rem 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.daily-counter-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(146, 174, 214, 0.16);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
    color: #304d74;
}

.daily-counter-pill.alert,
.daily-counter-pill.good,
.daily-counter-pill.bad {
    background: rgba(255, 255, 255, 0.72);
}

.daily-counter-pill.good {
    border-color: rgba(31, 107, 63, 0.22);
    color: #304d74;
}

.daily-counter-pill.bad {
    border-color: rgba(176, 0, 32, 0.26);
    color: #304d74;
}

.daily-counter-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.15rem;
    color: #395779;
}

.daily-counter-icon {
    display: none;
}

.daily-counter-copy {
    display: grid;
    min-width: 0;
    justify-items: center;
}

.daily-counter-label {
    display: block;
    font-size: var(--ui-type-meta);
    line-height: 1;
}

.daily-counter-value {
    display: block;
    line-height: 1;
    margin-top: 0.08rem;
}

.activity-pulse {
    gap: 0.45rem;
}

.activity-pulse-scope {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.2rem 0.5rem;
    color: #395779;
    line-height: 1.05;
}

.activity-pulse-scope strong {
    font-size: var(--ui-type-badge);
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.activity-pulse-scope span {
    margin-top: 0.16rem;
    color: #64748b;
    font-size: var(--ui-type-caption);
    font-weight: 750;
    white-space: nowrap;
}

.activity-pulse .daily-counter-pill,
.activity-pulse .daily-counter-stat {
    min-width: 6.85rem;
    min-height: 2.55rem;
    padding: 0.24rem 0.42rem;
}

.daily-counter-context {
    display: block;
    max-width: 100%;
    margin-top: 0.1rem;
    color: #64748b;
    font-size: var(--ui-type-caption);
    font-weight: 650;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-metrics-filter-button {
    appearance: none;
    cursor: pointer;
    font: inherit;
}

button.daily-counter-pill,
button.daily-counter-stat {
    border-width: 1px;
}

button.daily-counter-stat {
    border: 1px solid transparent;
    background: transparent;
}

.activity-metrics-filter-button.activity-metrics-filter-active {
    border-color: rgba(20, 92, 166, 0.48);
    background: #eaf3ff;
    box-shadow: inset 0 0 0 1px rgba(20, 92, 166, 0.08), 0 0 0 2px rgba(20, 92, 166, 0.08);
    color: #174f9d;
}

button.daily-counter-pill:hover,
button.daily-counter-stat:hover,
button.daily-counter-pill:focus-visible,
button.daily-counter-stat:focus-visible,
.activity-metrics-filter-link:hover,
.activity-metrics-filter-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(65, 106, 165, 0.14);
    border-color: rgba(84, 122, 178, 0.34);
}

.activity-metrics-filter-link {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.activity-metrics-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0 0 0.35rem;
    border-bottom: 1px solid #e7eef8;
}

.activity-metrics-details {
    padding: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.daily-metric-card,
.daily-queue-table {
    border: 1px solid rgba(24, 60, 103, 0.12);
    border-radius: 0.5rem;
    background:
        radial-gradient(circle at top left, rgba(216, 232, 255, 0.38), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 250, 255, 0.96) 100%);
    box-shadow: 0 6px 18px rgba(24, 53, 92, 0.04);
}

.daily-metric-card {
    flex: 1;
    padding: 0.5rem 1rem;
}

.daily-metric-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
    color: #5b77a0;
    margin-bottom: 0.5rem;
}

.daily-metric-main {
    display: grid;
    /* gap: 0.5rem; */
}

.daily-metric-main strong {
    font-size: 1.08rem;
    color: #172946;
}

.daily-metric-sub {
    margin-top: 8px;
    color: #486486;
    font-size: 0.82rem;
}

.daily-queue-wrap h4 {
    margin: 0 0 0.5rem;
    color: #334b72;
}

.daily-queue-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    margin-bottom: 1rem;
}

.daily-queue-table thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
}

.daily-queue-table tbody tr:last-child td {
    border-bottom: none;
}

.activity-metrics-ratio.is-unhandled,
.daily-counter-label.is-unhandled {
    color: #b00020;
}

.daily-counter-pill.bad .daily-counter-label,
.daily-counter-pill.bad .daily-counter-value {
    color: #b00020;
}

.activity-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.daily-all-calls-card {
    grid-column: 1;
    grid-row: 1;
    border-color: rgba(90, 144, 209, 0.18);
}

.daily-all-texts-card {
    grid-column: 2;
    grid-row: 1;
    border-color: rgba(88, 157, 182, 0.18);
}

.daily-outgoing-card {
    grid-column: 1;
    grid-row: 2;
    border-color: rgba(90, 144, 209, 0.18);
}

.daily-incoming-card {
    grid-column: 2;
    grid-row: 2;
    border-color: rgba(90, 144, 209, 0.18);
}

.daily-tones-card {
    grid-column: 3;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    /* min-height: 15.5rem; */
}

.daily-quality-average-list {
    margin-top: 0.9rem;
}

.daily-quality-average-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.daily-quality-average-row:not(:last-child) {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e7eef8;
}

.daily-tone-pills-wrap {
    flex: 1;
    /* height: 6.6rem;
    min-height: 6.6rem;
    max-height: 6.6rem; */
}

.daily-tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    padding-right: 0.15rem;
}

.daily-tone-pill {
    display: inline-flex;
    align-items: center;
    /* border-radius: 999px; */
    border-radius: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.daily-tone-pill.tone-good {
    background: #eaf8ef;
    border-color: #bfe6cd;
    color: #1f6b3f;
}

.daily-tone-pill.tone-bad {
    background: #fdeeee;
    border-color: #f4c4c4;
    color: #9a1b1b;
}

.daily-tone-pill.tone-neutral {
    background: #f3f6fb;
    border-color: #d8e1ef;
    color: #334b72;
}

.daily-tone-pill.tone-rank-1 {
    /* font-size: 0.78rem; */
}

.daily-tone-pill.tone-rank-2 {
    /* font-size: 0.74rem; */
}

.daily-tone-pill.tone-rank-3 {
    /* font-size: 0.7rem; */
}

.daily-tone-pill.tone-rank-4 {
    /* font-size: 0.66rem; */
}

.daily-tone-scores {
    margin-top: 0.6rem;
    padding-top: 0.45rem;
    border-top: 1px dashed #d9e3f2;
    flex-shrink: 0;
    min-height: 2rem;
}

.activity-metrics-tone-tabs {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.activity-metrics-tone-tab-row {
    display: flex;
    gap: 0.2rem;
}

.activity-metrics-tone-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid rgba(146, 174, 214, 0.24);
    border-bottom-color: rgba(126, 158, 201, 0.38);
    border-radius: 0.4rem 0.4rem 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(241, 247, 255, 0.94) 100%);
    color: #45668f;
    padding: 0.2rem 0.45rem;
    /* font-size: 0.72rem; */
    font-weight: 700;
    /* line-height: 1.2; */
    cursor: pointer;
}

.activity-metrics-tone-tab.is-active {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(114, 154, 212, 0.34);
    border-bottom-color: rgba(255, 255, 255, 0.98);
    color: #1c3f78;
    position: relative;
    z-index: 2;
}

.activity-metrics-tone-tab-count {
    display: inline-block;
    min-width: 1.05rem;
    text-align: center;
    padding: 0.02rem 0.2rem;
    border: 1px solid #d8e1ef;
    border-radius: 999px;
    background: #ffffff;
    color: #506a93;
    font-size: var(--ui-type-badge);
    font-weight: 600;
}

.activity-metrics-tone-tab-row-persona {
    border-bottom: 1px solid rgba(114, 154, 212, 0.28);
    margin-bottom: 0;
}

.activity-metrics-tone-tab-row-score {
    border-top: 1px solid rgba(146, 174, 214, 0.2);
    padding-top: 0;
    margin-top: -1px;
    margin-bottom: 0.15rem;
}

.activity-metrics-tone-tab-row-score .activity-metrics-tone-tab {
    border-color: rgba(146, 174, 214, 0.2);
    border-top-color: rgba(126, 158, 201, 0.3);
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.92) 0%, rgba(240, 245, 253, 0.96) 100%);
    /* font-size: 0.7rem; */
    padding: 0.16rem 0.35rem;
    border-radius: 0 0 0.4rem 0.4rem;
}

.activity-metrics-tone-tab-row-score .activity-metrics-tone-tab.is-active {
    border-color: #aec3e4;
    border-top-color: var(--workspace-context-text);
    background: #ffffff;
}

.daily-tone-score-blurb {
    /* font-size: 0.78rem; */
    color: #415c86;
    text-transform: lowercase;
}

.daily-tone-scores-empty {
    font-size: var(--ui-type-meta);
    color: #7086ab;
}

@media (max-width: 800px) {
    .activity-metrics-compact-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-metrics .activity-metrics-date-nav-mobile {
        display: grid;
        grid-column: 1 / -1;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.1rem 0 0.2rem;
    }

    .activity-metrics-date-nav-mobile .activity-metrics-date-nav-button {
        min-width: 1.75rem;
        min-height: 1.75rem;
    }

    .activity-metrics-date-nav-mobile .activity-metrics-date-nav-label {
        min-width: 10rem;
        font-size: var(--ui-type-badge);
        white-space: nowrap;
    }
}

@media (max-width: 725px) {
    .activity-metrics {
        font-size: var(--ui-type-meta);
    }

    .activity-metrics-compact-shell {
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .activity-context-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }

    .activity-context-pulse-section {
        min-height: 3rem;
        padding-inline: 0.22rem;
    }

    .activity-context-filter-rail {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0;
        min-height: 2.26rem;
        padding: 0;
    }

    .activity-context-date {
        min-height: 1.76rem;
        gap: 0.2rem;
        padding: 0.14rem 0.32rem;
        font-size: var(--ui-type-caption);
    }

    .activity-context-date-step {
        flex-basis: 1.48rem;
        width: 1.48rem;
        min-width: 1.48rem;
        min-height: 1.76rem;
    }

    .activity-context-date .gmi {
        font-size: 0.82rem;
    }

    .activity-context-date > span:nth-child(2) {
        max-width: 5.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .activity-current-focus {
        max-width: 13rem;
    }

    .activity-current-filters {
        width: 7rem;
        min-height: 1.6rem;
        padding-inline: 0.34rem;
        font-size: var(--ui-type-caption);
    }

    .activity-metrics-date-range-picker-host {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .activity-metrics-date-range-picker-host .dp__menu_content_wrapper,
    .activity-metrics-date-range-picker-host .dp__menu_content_wrapper[data-dp-mobile] {
        flex-direction: column;
    }

    .activity-metrics-date-range-picker-host .dp--preset-dates,
    .activity-metrics-date-range-picker-host .dp--preset-dates[data-dp-mobile] {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
        max-width: none;
        padding: 0.35rem 0 0.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .activity-metrics-compact {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.12rem;
        padding: 0.15rem 0;
    }

    .activity-metrics-compact.activity-pulse {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.18rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .activity-metrics-compact.activity-pulse::-webkit-scrollbar {
        display: none;
    }

    .activity-metrics-compact.activity-pulse .daily-counter-pill,
    .activity-metrics-compact.activity-pulse .daily-counter-stat {
        flex: 0 0 6.4rem;
        min-height: 2.65rem;
        scroll-snap-align: start;
    }

    .activity-pulse-scope {
        position: sticky;
        z-index: 2;
        left: 0;
        flex: 0 0 5.4rem;
        min-height: 2.65rem;
        background: color-mix(in srgb, #f7fbff 96%, transparent);
    }

    .activity-pulse-scope strong {
        font-size: var(--ui-type-caption);
    }

    .activity-pulse-scope span {
        font-size: var(--ui-type-caption);
    }

    .activity-pulse .daily-counter-context {
        font-size: var(--ui-type-caption);
    }

    .activity-metrics-compact .daily-counter-pill,
    .activity-metrics-compact .daily-counter-stat {
        min-width: 0;
        min-height: 1.85rem;
        padding: 0.12rem 0.05rem;
        overflow: hidden;
    }

    .activity-metrics-compact .daily-counter-label,
    .activity-metrics-compact .daily-counter-value {
        max-width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .activity-metrics-compact .daily-counter-label {
        font-size: var(--ui-type-caption);
    }

    .activity-metrics-compact .daily-counter-value {
        margin-top: 0.04rem;
        font-size: var(--ui-type-badge);
    }

    .activity-metrics-details {
        padding: 0.25rem;
        /* max-height: 20vh; */
    }

    .activity-metrics-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .activity-metrics-grid > .daily-metric-card {
        flex: 1 1 18rem;
        min-width: 16rem;
    }

    .daily-tones-card {
        flex-basis: 100%;
    }

    .daily-queue-wrap {
        display: none;
    }

    .summary-page-inline .daily-queue-wrap {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 380px) {
    .activity-metrics-compact {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .activity-metrics-compact.activity-pulse {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 799px) {
    .daily-queue-wrap,
    .summary-page-inline .daily-queue-wrap {
        overflow: visible;
    }

    .daily-queue-table,
    .daily-queue-table thead,
    .daily-queue-table tbody,
    .daily-queue-table tr,
    .daily-queue-table td {
        display: block;
    }

    .daily-queue-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .daily-queue-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .daily-queue-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .daily-queue-table tbody tr {
        overflow: hidden;
        border: 1px solid #e3ebf7;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 6px 16px rgba(38, 70, 112, 0.06);
    }

    .daily-queue-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 2.4rem;
        padding: 0.45rem 0.65rem;
        border-bottom: 1px solid #edf2fa;
    }

    .daily-queue-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #5b77a0;
        font-size: var(--ui-type-meta);
        font-weight: 700;
        letter-spacing: 0.05rem;
        text-transform: uppercase;
    }

    .daily-queue-table td[colspan] {
        display: block;
        text-align: center;
    }

    .daily-queue-table td[colspan]::before {
        content: none;
    }

    .daily-queue-table tbody tr:last-child td,
    .daily-queue-table td:last-child {
        border-bottom: none;
    }

    .daily-queue-table .activity-metrics-filter-link {
        text-align: right;
    }
}
.activity-metrics.is-updating .activity-metrics-compact {
    opacity: 0.72;
    transition: opacity 180ms ease;
}

@media (max-width: 725px) {
    .activity-context-pulse-panel .activity-metrics-compact.activity-pulse {
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
    }
}

/* Unified workspace intelligence band. The chart, totals, and performance
 * share one readable visual grammar and one responsive width authority. */
.activity-intelligence-activity .activity-context-pulse-panel .activity-metrics-compact {
    display: flex;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 0;
    padding: 0;
}

.activity-intelligence-activity .activity-metrics-filter-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 4.5rem;
    min-height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--workspace-context-text);
    padding: 0.24rem 1.75rem;
    box-shadow: none;
}

.activity-intelligence-activity .daily-counter-icon {
    position: absolute;
    left: 0.48rem;
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    color: #7dd3fc;
    font-size: 1.1rem;
}

.activity-intelligence-activity .daily-counter-icon.is-answered,
.activity-intelligence-activity .daily-counter-icon.is-active {
    color: #6ee7b7;
}

.activity-intelligence-activity .daily-counter-icon.is-missed,
.activity-intelligence-activity .daily-counter-icon.is-needs-attention,
.activity-intelligence-activity .daily-counter-icon.is-unhappy {
    color: #fda4af;
}

.activity-intelligence-activity .daily-counter-icon.is-voicemails,
.activity-intelligence-activity .daily-counter-icon.is-voicemail {
    color: #c4b5fd;
}

.activity-intelligence-activity .daily-counter-icon.is-follow-up,
.activity-intelligence-activity .daily-counter-icon.is-pending {
    color: #fde68a;
}

.activity-intelligence-activity .daily-counter-copy {
    justify-items: center;
    text-align: center;
}

.activity-intelligence-activity .activity-metrics-filter-button + .activity-metrics-filter-button {
    border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.activity-intelligence-activity .daily-counter-label,
.activity-intelligence-activity .daily-counter-context {
    max-width: 100%;
    overflow: visible;
    color: rgba(219, 234, 254, 0.92);
    font-size: var(--ui-type-meta);
    font-weight: 700;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.activity-intelligence-activity .daily-counter-value {
    max-width: 100%;
    margin-top: 0.1rem;
    overflow: hidden;
    color: var(--workspace-context-text);
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-intelligence-activity .daily-counter-context {
    margin-top: 0.13rem;
    font-size: var(--ui-type-caption);
}

.activity-intelligence-activity .daily-counter-label.is-unhandled,
.activity-intelligence-activity .daily-counter-pill.bad .daily-counter-label,
.activity-intelligence-activity .daily-counter-pill.bad .daily-counter-value {
    color: var(--workspace-context-text);
}

.activity-intelligence-activity .activity-metrics-filter-button:hover,
.activity-intelligence-activity .activity-metrics-filter-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    outline: none;
}

.activity-intelligence-activity .activity-metrics-filter-button.activity-metrics-filter-active {
    border-color: rgba(253, 230, 138, 0.5);
    background: rgba(253, 230, 138, 0.17);
    color: var(--workspace-context-text);
    box-shadow: inset 0 -0.18rem 0 #fbbf24;
}

.activity-metrics-stack .activity-current-chip,
.activity-metrics-stack .activity-current-filters {
    background: rgba(255, 255, 255, 0.1);
    color: var(--workspace-context-text);
}

.activity-metrics-stack .activity-current-chip.is-context {
    background: rgba(255, 255, 255, 0.1);
    color: var(--workspace-context-text);
}

.activity-metrics-stack .activity-current-chip:hover,
.activity-metrics-stack .activity-current-chip:focus-visible,
.activity-metrics-stack .activity-current-filters:hover,
.activity-metrics-stack .activity-current-filters:focus-visible {
    background: rgba(255, 255, 255, 0.17);
    color: var(--workspace-context-text);
}

.activity-metrics-stack .activity-current-empty {
    color: rgba(219, 234, 254, 0.94);
    font-size: var(--ui-type-badge);
}

.activity-metrics-stack .activity-current-filter-count {
    background: #fbbf24;
    color: #173b5e;
}

/* Preserve the 998px center spine. The optional side modules leave as soon as
 * the complete three-column composition can no longer fit without squeezing it. */
@media (max-width: 1490px) {
    .activity-intelligence-grid {
        grid-template-columns: minmax(0, var(--app-content-width));
        grid-template-rows: auto auto;
    }

    .activity-hourly-chart-home,
    .activity-header-insights-home {
        display: none;
    }

    .activity-intelligence-module.activity-intelligence-activity,
    .activity-context-filter-rail-home {
        grid-column: 1;
    }
}

/* The collapsed navigation rail leaves room for both wings sooner. Preserve
 * the centered 998px spine and a usable chart width in either sidebar state. */
@media (min-width: 1180px) and (max-width: 1939px) {
    body.workspace-shell-view:not(.workspace-navigation-collapsed) .activity-intelligence-grid {
        grid-template-columns: minmax(0, var(--app-content-width));
        grid-template-rows: auto auto;
    }
    body.workspace-shell-view:not(.workspace-navigation-collapsed) :is(.activity-hourly-chart-home, .activity-header-insights-home) { display: none; }
    body.workspace-shell-view:not(.workspace-navigation-collapsed) :is(.activity-intelligence-module.activity-intelligence-activity, .activity-context-filter-rail-home) { grid-column: 1; }
}
@media (min-width: 1491px) and (max-width: 1679px) {
    body.workspace-shell-view.workspace-navigation-collapsed .activity-intelligence-grid {
        grid-template-columns: minmax(0, var(--app-content-width));
        grid-template-rows: auto auto;
    }
    body.workspace-shell-view.workspace-navigation-collapsed :is(.activity-hourly-chart-home, .activity-header-insights-home) { display: none; }
    body.workspace-shell-view.workspace-navigation-collapsed :is(.activity-intelligence-module.activity-intelligence-activity, .activity-context-filter-rail-home) { grid-column: 1; }
}

@media (max-width: 998px) {
    .activity-metrics-stack {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .activity-header-row {
        padding: 0;
    }

    .activity-intelligence-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 0.34rem;
        row-gap: 0;
        padding: 0;
    }

    .activity-intelligence-module {
        min-height: 5.55rem;
    }

    .activity-intelligence-activity .activity-context-pulse-panel .activity-metrics-compact {
        width: max-content;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .activity-intelligence-activity .activity-metrics-filter-button {
        flex: 0 0 6.3rem;
        scroll-snap-align: start;
    }

    .activity-context-filter-rail {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

}

@media (max-width: 460px) {
    .activity-intelligence-module-title {
        font-size: var(--ui-type-control);
    }

    .activity-intelligence-module-period {
        font-size: var(--ui-type-caption);
    }

    .activity-context-date-step {
        display: none;
    }

    .activity-context-date-group {
        flex-basis: 8.75rem;
        width: 8.75rem;
    }

    .activity-context-date {
        border-inline: 0;
    }

    .activity-current-chips {
        margin-inline: 0;
    }

    .activity-current-filters > span:nth-child(2) {
        display: none;
    }

    .activity-current-filters {
        width: 2.75rem;
    }
}



.alert {
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border-color: var(--bs-alert-border-color);
    border: 1px solid transparent;
}

.alert-primary {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: #233F76;
    --bs-alert-border-color: #1c3361;
}

.alert-secondary {
    --bs-alert-color: #2c2f36;
    --bs-alert-bg: #e1e4ea;
    --bs-alert-border-color: #c9ccd3;
}


.good,
.resolved,
.completed,
.alert-success {
    --bs-alert-color: #155d46;
    --bs-alert-bg: #d1f2e2;
    --bs-alert-border-color: #a8e3c6;
}

.bad,
.unresolved,
.voicemail,
.unanswered,
.alert-danger {
    --bs-alert-color: #842029;
    --bs-alert-bg: #f3d5da;
    --bs-alert-border-color: #e3aeb7;
}

.partially,
.queued,
.initiated,
.ringing,
.alert-warning {
    --bs-alert-color: #5c4600;
    --bs-alert-bg: #fff1c2;
    --bs-alert-border-color: #ffe398;
}

.pending,
.in-progress,
.voicemail-outgoing,
.alert-info {
    --bs-alert-color: #0c4b5f;
    --bs-alert-bg: #cdeefe;
    --bs-alert-border-color: #a3defc;
}

.okay,
.previously,
.busy,
.afterhours,
.recording,
.no-answer,
.alert-light {
    --bs-alert-color: #333;
    --bs-alert-bg: #f8f9fa;
    --bs-alert-border-color: #e9ecef;
}

.irrelevant,
.unknown,
.canceled,
.failed,
.alert-dark {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: #343a40;
    --bs-alert-border-color: #23272b;
    
    --bs-alert-color: #F9FAFB;        /* text */
    --bs-alert-bg: #4B5563;           /* background */
    --bs-alert-border-color: #374151; /* border */
}





/* Disable WebKit Tap Highlight (for Chrome, Safari, and Edge on mobile) */
/* Reduces browser tap delay and prevents unwanted effects like double tap to zoom */
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.gradient {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--button-border);
    color: var(--button-text);
    background: url('data:image/png;base64,') no-repeat 90% 50%,
        linear-gradient(to bottom, #FFFFFF, #FFFFFF00), var(--button-bg);
}

.ui-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-width: 2.05rem;
    min-height: 2.08rem;
    border: 1px solid #d0d9e7;
    border-radius: 0.45rem;
    background: #ffffff;
    color: #344054;
    padding: 0.34rem 0.62rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.ui-action-button .gmi,
.ui-action-button .btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.ui-action-button:hover,
.ui-action-button:focus-visible,
.ui-action-button.is-playing {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.ui-action-button-primary {
    border-color: color-mix(in srgb, var(--color-feature-calls) 42%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-feature-calls) 82%, #000000) 0%,
        var(--color-feature-calls) 100%
    );
    color: var(--color-feature-calls-text);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--color-feature-calls) 20%, transparent);
}

.ui-action-button-primary:hover,
.ui-action-button-primary:focus-visible {
    border-color: color-mix(in srgb, var(--color-feature-calls) 52%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-feature-calls) 72%, #000000) 0%,
        color-mix(in srgb, var(--color-feature-calls) 88%, #000000) 100%
    );
    color: var(--color-feature-calls-text);
}

.ui-action-button-secondary {
    border-color: #cbd7e6;
    background: #f8fafc;
    color: #344054;
}

.ui-action-button-subtle {
    border-color: rgba(37, 99, 235, 0.16);
    background: rgba(255, 255, 255, 0.72);
    color: #1d4ed8;
}

.ui-action-button-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b42318;
}

.ui-action-button-danger:hover,
.ui-action-button-danger:focus-visible {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
}

.ui-action-button-icon {
    width: 2.08rem;
    padding-inline: 0;
}

.ui-action-button:disabled,
.ui-action-button-disabled,
.ui-action-button[aria-disabled="true"] {
    border-color: #d0d5dd;
    background: #eef2f7;
    color: #98a2b3;
    cursor: not-allowed;
    opacity: 0.86;
    box-shadow: none;
}

.ui-action-button:disabled:hover,
.ui-action-button-disabled:hover,
.ui-action-button[aria-disabled="true"]:hover {
    border-color: #d0d5dd;
    background: #eef2f7;
    color: #98a2b3;
    box-shadow: none;
}

/* button.gradient :hover {
    border: 1px solid var(--button-hover-border);
    color: var(--button-hover-text);
    background: url('data:image/png;base64,') no-repeat 90% 50%,
        linear-gradient(to bottom, #F0F0F0, #F0F0F000), var(--button-hover-bg);
} */

.page-controls button {
    max-width: 300px;
    min-height: 2.9rem;
    border: 1px solid #d9e3ef;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.86);
    color: var(--color-text);
    gap: 0.24rem;
    padding: 0.38rem 0.58rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1.12;
}

.page-menu>button {
    height: auto;
    font-weight: bold;
}

.page-menu>button.active {
    color: #ffffff;
}

.page-menu>button:first-child {
    border-right: 0;
}

.page-menu>button:last-child {
    border-left: 0;
}


.btn-page {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
    min-width: 0;
    min-height: 3.45rem;
    border: 1px solid color-mix(in srgb, var(--color-border-muted) 82%, transparent);
    border-radius: 0.5rem;
    color: var(--color-text-muted);
    padding: 0.32rem 0.42rem;
    font-size: var(--ui-type-badge);
    font-weight: 900;
    line-height: 1;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.btn-page .gmi {
    font-size: 1.46rem;
    line-height: 1;
}

.btn-page:hover {
    border-color: #d9e3ef;
    background: rgba(255, 255, 255, 0.82);
    color: #172033;
}


.btn-page-phone.active,
.btn-page-contacts.active,
.btn-page-texts.active,
.btn-page-conversations.active {
    color: var(--color-theme-base-text);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-theme-base) 82%, #000000) 0%,
        var(--color-theme-base) 100%
    );
    border-color: color-mix(in srgb, var(--color-theme-accent) 58%, transparent);
    box-shadow:
        inset 0 3px var(--color-theme-accent),
        0 8px 18px color-mix(in srgb, var(--color-theme-base) 22%, transparent);
}


.btn-join-or-add {
    flex: 1;
    max-height: 100%;
    height: 100%;
    padding: 0;
}

.btn-device-softphone,
.btn-device-softphone:hover {
    background: var(--device-softphone);
}

.btn-device-cellphone,
.btn-device-cellphone:hover {
    background: var(--device-cellphone);
}

.btn-device-deskphone,
.btn-device-deskphone:hover {
    background: var(--device-deskphone);
}

.contact .actions button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
    transition: color 0.2s;
}



.modal-body.cqi-modal-body {
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
}

.cqi-modal {
    display: grid;
    gap: 1rem;
    width: 100%;
    color: #24334d;
}

.cqi-modal section {
    margin: 0;
}

.cqi-top-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cqi-core {
    display: grid;
    gap: 0.35rem;
}

.cqi-block {
    border: 1px solid #dce5f4;
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
}

.cqi-block.inquiry {
    color: var(--color-brand);
}

.cqi-performance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.cqi-party {
    border: 1px solid #dce5f4;
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
}

.cqi-meta {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.2rem;
}

.cqi-party .tones .pill {
    display: inline-block;
    margin: 0.15rem 0.15rem 0 0;
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    background: #f0f2f5;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .cqi-performance {
        grid-template-columns: 1fr;
    }
}



html,
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family-ui);
    color: var(--color-inverse);
    background: var(--color-bg);
    touch-action: manipulation;
    overflow-y: hidden;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: var(--scrollbar-thumb);
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.center {
    text-align: center;
}

.fullsize {
    width: 100%;
    height: 100%;
}

.bold {
    font-weight: bold;
}

.antiflash {
    background-color: #f2f3f4;
}

.beige {
    background-color: beige;
}

.hidden {
    display: none;
}

.success {
    color: #7bb661 !important;
}

.error {
    color: #ce2029 !important;
}

.needle {
    font-weight: bold;
    font-style: italic;
}

:focus-visible {
    outline: 0;
}

a:link {
    color: #1e90ff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

a:active {
    color: #1e90ff;
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    color: #1e90ff;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #000;
    text-decoration: underline;
    font-weight: bold;
}

a:focus {
    outline: none;
    box-shadow: 0 0 2px 2px rgba(30, 144, 255, 0.5);
}

.fs125rem {
    font-size: 1.25rem;
}
.fs15rem {
    font-size: 1.5rem;
}
.fs2rem {
    font-size: 2rem;
}
.fwb {
    font-weight: bold;
}


label {
    cursor: pointer;
}

input,
textarea,
select {
    cursor: pointer;
    font-family: var(--font-family-ui);
}

input:not([type="checkbox" i]):not([type="radio" i]),
textarea,
select {
    width: 100%;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
}

textarea {
    padding: 1rem;
}


input[type=text][readonly],
input[type=text][disabled],
input[type=button][disabled],
button[disabled]:not(.exclude) {
    background: none;
    color: var(--color-neutral-border);
}

::placeholder {
    text-align: center;
    color: #aaa;
}

.zebra:nth-child(odd) {
    background: var(--table-row-odd);
}
.zebra:nth-child(even) {
    background: var(--table-row-even);
}



.call-fixture-lab {
    position: fixed;
    z-index: var(--z-primary-drawer, 1240);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(34rem, 100vw);
    animation: call-fixture-drawer-in 180ms ease-out;
}

.call-fixture-lab[hidden] {
    display: none;
}

.call-fixture-lab-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
}

.call-fixture-lab-title .surface-heading-icon {
    color: var(--color-theme-accent-active);
}

.call-fixture-view-label {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    padding: 0.24rem 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-caption);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-fixture-lab-section {
    margin-bottom: 0.7rem;
    overflow: hidden;
    border: 1px solid rgba(30, 92, 158, 0.14);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 5px 14px rgba(24, 53, 92, 0.05);
}

.call-fixture-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(30, 92, 158, 0.1);
    padding: 0.58rem 0.65rem;
}

.call-fixture-section-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: #24466f;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.call-fixture-section-heading .gmi {
    color: #1769b5;
    font-size: 1rem;
}

.call-fixture-section-heading small {
    color: #75849a;
    font-size: 0.58rem;
    line-height: 1.2;
    text-align: right;
}

.call-fixture-lab-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.55rem;
    padding: 0.65rem;
}

.call-fixture-lab-settings label {
    display: grid;
    gap: 0.2rem;
    color: #50627a;
    font-size: 0.62rem;
    font-weight: 850;
}

.call-fixture-lab-settings select,
.call-fixture-lab-settings input[type="number"] {
    min-height: 2.1rem;
    border: 1px solid rgba(30, 92, 158, 0.2);
    border-radius: 0.48rem;
    background: #ffffff;
    color: #174a7c;
    padding-inline: 0.42rem;
    font: inherit;
}

.call-fixture-step-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.38rem;
}

.call-fixture-step-control > span {
    color: #6b7c93;
    font-size: 0.62rem;
    font-weight: 800;
}

.call-fixture-lab-settings .call-fixture-recycle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.8rem;
}

.call-fixture-lab-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.65rem;
}

.call-fixture-lab-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.32rem;
    min-width: 0;
    min-height: 2.35rem;
    border: 1px solid rgba(30, 92, 158, 0.18);
    border-radius: 0.52rem;
    background: #ffffff;
    color: #174a7c;
    padding: 0.38rem 0.52rem;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.1;
    text-align: left;
}

.call-fixture-lab-actions button:hover,
.call-fixture-lab-actions button:focus-visible {
    border-color: rgba(30, 92, 158, 0.38);
    background: #edf5ff;
}

.call-fixture-lab-actions button:disabled {
    border-color: rgba(148, 163, 184, 0.18);
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.call-fixture-lab-actions .call-fixture-primary-action {
    border-color: rgba(15, 118, 110, 0.3);
    background: #ecfdf5;
    color: #0f766e;
}

.call-fixture-lab-actions .call-fixture-clear-action {
    grid-column: 1 / -1;
    justify-content: center;
    color: #9a3412;
}

.call-fixture-lab-actions .call-fixture-phone-only[hidden] {
    display: none;
}

.call-fixture-lab[data-lifecycle="ringing"] [data-call-fixture-action="progress"],
.call-fixture-lab[data-lifecycle="in-progress"] [data-call-fixture-action="complete"] {
    border-color: rgba(15, 118, 110, 0.38);
    background: #ecfdf5;
    color: #0f766e;
}

.call-fixture-lab-actions .gmi {
    flex: 0 0 auto;
    font-size: 1rem;
}

.call-fixture-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.5rem;
    padding: 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-muted) 76%, transparent);
    background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent);
}

.call-fixture-device-state {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
    gap: 0.5rem;
    padding: 0.65rem 0.65rem 0;
    background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent);
}

.call-fixture-device-state label {
    display: grid;
    gap: 0.22rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-caption);
    font-weight: 850;
}

.call-fixture-device-state select {
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.52rem;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.38rem 0.48rem;
    font: inherit;
}

.call-fixture-device-state small {
    align-self: center;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    line-height: 1.35;
}

.call-fixture-data-section .call-fixture-section-heading > button {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 0;
    background: transparent;
    color: var(--color-danger, #b42318);
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 850;
}

.call-fixture-tab-count {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    margin-left: auto;
    white-space: nowrap;
}

.call-fixture-tab-count .gmi {
    font-size: 0.86rem;
}

.call-fixture-toast-tests {
    display: grid;
    gap: 0.35rem;
    margin: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: var(--color-surface-muted);
    padding: 0.58rem;
}

.call-fixture-toast-tests > strong {
    color: var(--color-text);
    font-size: var(--ui-type-control);
}

.call-fixture-toast-tests > span {
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
}

.call-fixture-toast-tests > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.34rem;
}

.call-fixture-toast-tests button {
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.34rem 0.42rem;
    font: inherit;
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

.call-fixture-component-gallery {
    margin: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: var(--color-surface-muted);
    padding: 0.5rem 0.58rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
}

.call-fixture-component-gallery summary {
    cursor: pointer;
    font-weight: 850;
}

.call-fixture-component-gallery p {
    margin: 0.48rem 0;
    color: var(--color-text-subtle);
    line-height: 1.35;
}

.call-fixture-component-gallery button {
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.52rem;
    background: var(--color-surface);
    color: var(--color-brand-active);
    padding: 0.38rem 0.58rem;
    font: inherit;
    font-weight: 850;
}

.call-fixture-builder label {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-caption);
    font-weight: 850;
}

.call-fixture-builder select {
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.52rem;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.38rem 0.48rem;
    font: inherit;
}

.call-fixture-builder .call-fixture-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-control-min-height);
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 38%, var(--color-border-muted));
    border-radius: 0.52rem;
    background: var(--color-brand-active);
    color: #ffffff;
    padding: 0.38rem 0.68rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 850;
    white-space: nowrap;
}

.call-fixture-builder .call-fixture-add:disabled {
    border-color: var(--color-border-muted);
    background: var(--color-surface-muted);
    color: var(--color-text-subtle);
}

.call-fixture-object-list {
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem;
}

.call-fixture-object-card {
    display: grid;
    gap: 0.48rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border-muted));
    border-radius: 0.62rem;
    background: var(--color-surface);
    padding: 0.58rem;
    box-shadow: var(--shadow-sm);
}

.call-fixture-object-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
}

.call-fixture-object-card:not(.is-message) > header { grid-template-columns: auto minmax(0, 1fr) minmax(0, 10rem) auto; }
.call-fixture-scenario { width: 100%; min-width: 0; min-height: 2rem; padding: .35rem; font-size: var(--ui-type-meta); border: 1px solid var(--color-border); border-radius: .45rem; background: var(--color-surface); color: var(--color-text); }

.call-fixture-object-card > header > .gmi {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.5rem;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
}

.call-fixture-object-card > header > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.call-fixture-object-card > header strong,
.call-fixture-object-card > header small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-fixture-object-card > header strong {
    color: var(--color-text);
    font-size: var(--ui-type-control);
}

.call-fixture-object-card > header small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
}

.call-fixture-object-card > header button {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--color-text-muted);
}

.call-fixture-object-badges,
.call-fixture-object-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
}

.call-fixture-object-badges > *,
.call-fixture-object-attributes > span {
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    padding: 0.18rem 0.42rem;
    font-size: var(--ui-type-badge);
    font-weight: 800;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-fixture-object-card > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.4rem;
}

.call-fixture-object-card > footer.call-fixture-message-controls {
    grid-template-columns: minmax(0, 1fr) auto;
}

.call-fixture-state-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    min-width: 0;
    border-radius: 0.55rem;
    background: var(--color-surface-muted);
    padding: 0.2rem;
}

.call-fixture-object-card > footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    gap: 0.3rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-brand-active);
    font: inherit;
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

.call-fixture-object-card > footer button:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-subtle);
}

.call-fixture-object-card > footer .call-fixture-state-control button.is-active {
    border-color: color-mix(in srgb, var(--color-brand) 36%, var(--color-border-muted));
    background: var(--color-surface-elevated);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.call-fixture-object-card > footer .call-fixture-automate.is-active {
    border-color: color-mix(in srgb, var(--color-success-text) 32%, var(--color-border-muted));
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.call-fixture-object-card > footer .call-fixture-automate,
.call-fixture-object-card > footer .call-fixture-replay {
    min-width: 8.5rem;
    padding-inline: 0.6rem;
}

.call-fixture-control-help {
    display: block;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    line-height: 1.3;
}

.call-fixture-object-empty {
    padding: 0.85rem 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    line-height: 1.4;
    text-align: center;
}

.call-fixture-lab-readout {
    display: grid;
    gap: 0.3rem;
    border: 1px solid rgba(30, 92, 158, 0.13);
    border-radius: 0.65rem;
    background: rgba(238, 246, 255, 0.72);
    padding: 0.6rem 0.65rem;
}

.call-fixture-lab-status {
    color: #586474;
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.35;
}

.call-fixture-lab-diagnostics {
    color: #718096;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
}

.call-fixture-lab-status[data-tone="success"] {
    color: #166534;
}

.call-fixture-lab-status[data-tone="danger"] {
    color: #991b1b;
}

@keyframes call-fixture-drawer-in {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 520px) {
    .call-fixture-lab {
        width: 100vw;
    }

    .call-fixture-builder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .call-fixture-device-state {
        grid-template-columns: 1fr;
    }

    .call-fixture-builder .call-fixture-add {
        grid-column: 1 / -1;
    }

    .call-fixture-object-card > footer,
    .call-fixture-object-card > footer.call-fixture-message-controls {
        grid-template-columns: 1fr;
    }

    .call-fixture-object-card > footer .call-fixture-automate,
    .call-fixture-object-card > footer .call-fixture-replay {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-fixture-lab {
        animation: none;
    }
}



.dialpad-panel-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.42rem;
}

.dialpad-panel-heading { grid-column: 1 / -1; font-size: var(--ui-type-control); font-weight: 600; text-align: start; }

#dialpad:has([data-dialpad-panel][data-open="true"]) {
    display: block;
}

#dialpad .dial {
    text-align: center;
}



.phone-dnd-help,
.phone-dnd-status {
    color: var(--color-text-muted, #667085);
    margin: 0 0 0.75rem;
}

.phone-dnd-options {
    display: grid;
    gap: 0.5rem;
}

.phone-dnd-row {
    align-items: center;
    border: 1px solid var(--color-border, #d0d5dd);
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.75rem;
}

.phone-dnd-row span {
    display: grid;
    gap: 0.2rem;
}

.phone-dnd-row small {
    color: var(--color-text-muted, #667085);
}

.phone-dnd-master {
    background: var(--color-surface-subtle, #f8fafc);
}



#modal:has(.endpoint-monitor-view) .modal-content {
    width: min(72rem, 96vw);
    max-width: 72rem;
    max-height: min(52rem, 92vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modal.modal-drawer:has(.endpoint-monitor-view) #modal-content {
    width: min(42rem, 100%);
    max-width: 42rem;
    max-height: 100%;
}

#modal:has(.endpoint-monitor-view) .modal-header {
    flex: 0 0 auto;
}

#modal .endpoint-monitor-modal-body {
    min-height: 12rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.endpoint-monitor-view,
.endpoint-monitor-view .endpoints,
.endpoint-monitor-view .endpoint-monitor-account,
.endpoint-monitor-view .endpoint-monitor-account-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.endpoint-monitor-view .endpoint-monitor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.endpoint-monitor-view .endpoint-monitor-toolbar-copy {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.endpoint-monitor-view .endpoint-monitor-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border: 1px solid var(--button-border);
    border-radius: 0.58rem;
    background: var(--surface-panel-field-bg);
    color: var(--color-text);
    padding: 0.42rem 0.58rem;
    cursor: pointer;
}

.endpoint-monitor-view .endpoint-monitor-refresh:hover {
    border-color: var(--color-inverse-border);
    box-shadow: var(--shadow-sm);
}

.endpoint-monitor-view .endpoint-monitor-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.68rem;
    background: var(--surface-panel-field-bg);
    padding: 0.6rem 0.72rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.endpoint-monitor-view .endpoint-monitor-context strong {
    color: var(--color-text);
    font-family: inherit;
}

.endpoint-monitor-view .endpoint-monitor-account {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.76rem;
    background: var(--surface-panel-bg);
    box-shadow: var(--shadow-sm);
}

.endpoint-monitor-view .endpoint-monitor-account-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    width: 100%;
    gap: 0.55rem;
    border: 0;
    border-radius: 0;
    background: var(--surface-panel-field-bg);
    color: var(--color-text);
    padding: 0.48rem 0.58rem;
    text-align: left;
    cursor: pointer;
}

.endpoint-monitor-view .endpoint-monitor-account-toggle:hover {
    background: var(--surface-panel-bg);
}

.endpoint-monitor-view .endpoint-monitor-account-heading {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    min-width: 0;
}

.endpoint-monitor-view .endpoint-monitor-account-heading > strong,
.endpoint-monitor-view .endpoint-monitor-account-heading > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-monitor-view .endpoint-monitor-account-heading > strong {
    flex: 0 1 auto;
}

.endpoint-monitor-view .endpoint-monitor-account-heading > small {
    flex: 1 1 auto;
}

.endpoint-monitor-view .endpoint-monitor-account-toggle strong {
    font-size: 0.95rem;
}

.endpoint-monitor-view .endpoint-monitor-account-content {
    gap: 0.42rem;
    padding: 0.42rem;
    border-top: 1px solid var(--surface-panel-border);
    background: color-mix(in srgb, var(--surface-panel-field-bg) 46%, var(--surface-panel-bg));
}

.endpoint-monitor-view .endpoint-monitor-account-content[hidden] {
    display: none;
}

.endpoint-monitor-view .endpoint-monitor-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.7rem;
    background: var(--surface-panel-bg);
}

.endpoint-monitor-view .endpoint-monitor-account-live {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.22rem;
    min-width: 0;
}

.endpoint-monitor-view .endpoint-monitor-account-live .endpoint-presence-badge {
    white-space: nowrap;
}

.endpoint-monitor-view .endpoint-monitor-row-detail {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.endpoint-monitor-view .endpoint-monitor-group-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    border: 0;
    background: color-mix(in srgb, var(--surface-panel-field-bg) 88%, var(--color-brand-soft));
    color: var(--color-text);
    padding: 0.48rem 0.56rem;
    text-align: left;
    cursor: pointer;
}

.endpoint-monitor-view .endpoint-monitor-group-toggle:hover,
.endpoint-monitor-view .endpoint-monitor-group-toggle:focus-visible {
    background: color-mix(in srgb, var(--color-brand-soft) 64%, var(--surface-panel-bg));
    outline: none;
}

.endpoint-monitor-view .endpoint-monitor-group-icon {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.48rem;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    font-size: 1rem;
}

.endpoint-monitor-view .endpoint-monitor-group-heading {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.endpoint-monitor-view .endpoint-monitor-group-heading strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-monitor-view .endpoint-monitor-group-content {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding: 0.38rem;
    border-top: 1px solid var(--surface-panel-border);
}

.endpoint-monitor-view .endpoint-monitor-account-toggle small,
.endpoint-monitor-view .endpoint-monitor-muted,
.endpoint-monitor-view small {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.endpoint-monitor-view .endpoint-monitor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.52rem;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--surface-panel-bg) 96%, var(--surface-panel-field-bg));
    padding: 0.44rem 0.5rem;
}

.endpoint-monitor-view .endpoint-monitor-identity,
.endpoint-monitor-view .endpoint-monitor-actions,
.endpoint-monitor-view .endpoint-monitor-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.endpoint-monitor-view .endpoint-monitor-identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.26rem;
}

.endpoint-monitor-view .endpoint-monitor-identity-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.endpoint-monitor-view .endpoint-monitor-identity-heading > strong {
    font-size: 0.8rem;
}

.endpoint-monitor-view .endpoint-monitor-times {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.endpoint-monitor-view .endpoint-monitor-session {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem;
    width: 100%;
    color: var(--color-text-muted);
}

.endpoint-monitor-view .endpoint-monitor-session > .gmi {
    margin-top: 0.12rem;
    color: var(--color-brand-active);
    font-size: 0.92rem;
}

.endpoint-monitor-view .endpoint-monitor-session-copy {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.endpoint-monitor-view .endpoint-monitor-session-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.endpoint-monitor-view .endpoint-monitor-session-status > strong {
    color: var(--color-text);
    font-size: 0.68rem;
}

.endpoint-monitor-view .endpoint-monitor-session-copy > small {
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-monitor-view .endpoint-monitor-actions {
    justify-content: flex-end;
}

.endpoint-monitor-view .endpoint-monitor-endpoint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.endpoint-monitor-view .endpoint-monitor-target {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 8.75rem;
    border: 1px solid var(--button-border);
    border-radius: 0.58rem;
    background: var(--surface-panel-field-bg);
    color: var(--color-text);
    padding: 0.34rem 0.44rem;
    text-align: left;
    cursor: pointer;
}

.endpoint-monitor-view .endpoint-monitor-target:hover {
    border-color: var(--color-inverse-border);
    box-shadow: var(--shadow-sm);
}

.endpoint-monitor-view .endpoint-monitor-target:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.endpoint-monitor-view .endpoint-monitor-target-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.05rem;
}

.endpoint-monitor-view .endpoint-monitor-target-copy > strong {
    font-size: 0.72rem;
}

.endpoint-monitor-view .endpoint-monitor-target small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-monitor-view .endpoint-monitor-target-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.05rem;
}

.endpoint-presence-badge,
.settings-presence-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-text-muted);
    padding: 0.14rem 0.43rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.endpoint-presence-badge.is-online,
.settings-presence-badge.is-online { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); color: #16803c; }
.endpoint-presence-badge.is-ringing,
.settings-presence-badge.is-ringing { border-color: rgba(245, 158, 11, 0.44); background: rgba(245, 158, 11, 0.12); color: #9a5b05; }
.endpoint-presence-badge.is-busy,
.settings-presence-badge.is-busy { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); color: #b52828; }
.endpoint-presence-badge.is-dnd,
.settings-presence-badge.is-dnd { border-color: rgba(147, 51, 234, 0.38); background: rgba(147, 51, 234, 0.1); color: #7623af; }

.endpoint-presence-badge.is-neutral,
.settings-presence-badge.is-neutral {
    border-color: color-mix(in srgb, var(--color-text-muted) 24%, var(--surface-panel-border));
    background: color-mix(in srgb, var(--surface-panel-field-bg) 82%, var(--surface-panel-bg));
    color: var(--color-text-muted);
}

.settings-presence-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}

.settings-endpoint-presence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.endpoint-monitor-view .endpoint-monitor-state {
    min-height: 12rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    color: var(--color-text-muted);
    text-align: center;
}

.endpoint-monitor-view .endpoint-monitor-state .gmi { font-size: 1.7rem; }
.endpoint-monitor-view .endpoint-monitor-state p { margin: 0; }

@media (max-width: 760px) {
    .endpoint-monitor-view .endpoint-monitor-account-heading > small { display: none; }
    .endpoint-monitor-view .endpoint-monitor-row { grid-template-columns: 1fr; }
    .endpoint-monitor-view .endpoint-monitor-actions { justify-content: flex-start; }
    .endpoint-monitor-view .endpoint-monitor-target { flex: 1 1 12rem; }
}

/* Keep the person's identity above equal, explicitly actionable destinations. */
.endpoint-monitor-view { container-type: inline-size; }
.endpoint-monitor-view .endpoint-monitor-row { padding: .65rem; gap: .6rem; }
.endpoint-monitor-view .endpoint-monitor-identity-heading { width: 100%; }
.endpoint-monitor-view .endpoint-monitor-identity-heading > strong { flex: 1; font-size: .88rem; }
.endpoint-monitor-view .endpoint-monitor-info {
    order: 3; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; min-width: 1.75rem; min-height: 1.75rem; padding: 0;
    margin-left: auto; border: 1px solid var(--surface-panel-border); border-radius: 50%;
    background: var(--surface-panel-field-bg); color: var(--color-text-muted); cursor: pointer;
}
.endpoint-monitor-view .endpoint-monitor-info .gmi { font-size: 1rem; }
.endpoint-monitor-view .endpoint-monitor-info[aria-expanded="true"] { color: var(--color-brand-active); background: var(--color-brand-soft); }
.endpoint-monitor-view .endpoint-monitor-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: .45rem; }
.endpoint-monitor-view .endpoint-monitor-target { width: 100%; min-width: 0; padding: .55rem; align-items: flex-start; }
.endpoint-monitor-view .endpoint-monitor-target > .gmi { margin-top: .12rem; font-size: 1.15rem; color: var(--color-brand-active); }
.endpoint-monitor-view .endpoint-monitor-target-copy { flex: 1; overflow: hidden; }
.endpoint-monitor-view .endpoint-monitor-target-copy > strong { font-size: .8rem; }
.endpoint-monitor-view .endpoint-monitor-target-action { color: var(--color-brand-active); font-size: .7rem; font-weight: 700; white-space: normal; line-height: 1.3; }
.endpoint-monitor-view .endpoint-monitor-target:disabled .endpoint-monitor-target-action { color: var(--color-text-muted); }
.endpoint-monitor-view .endpoint-monitor-target-arrow { align-self: center; }
.endpoint-monitor-view .endpoint-monitor-target:hover:not(:disabled),
.endpoint-monitor-view .endpoint-monitor-target:focus-visible { background: var(--color-brand-soft); border-color: var(--color-brand-active); }
.endpoint-monitor-view .endpoint-monitor-call-actions { display: grid; gap: .5rem; }
.endpoint-monitor-view .endpoint-monitor-modes { display: flex; gap: .4rem; }
.endpoint-monitor-view .endpoint-monitor-modes button,
.endpoint-monitor-view .endpoint-monitor-progress button {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .7rem;
    border: 1px solid var(--button-border); border-radius: .6rem; background: var(--surface-panel-field-bg);
    color: var(--color-text); cursor: pointer; font: inherit; font-size: .8rem;
}
.endpoint-monitor-view .endpoint-monitor-modes button[aria-pressed="true"],
.endpoint-monitor-view .endpoint-monitor-progress .endpoint-monitor-complete { background: var(--color-brand-active); color: var(--color-text-inverse, #fff); border-color: var(--color-brand-active); }
.endpoint-monitor-view button:disabled { cursor: not-allowed; opacity: .6; }
.endpoint-monitor-view .endpoint-monitor-progress { position: sticky; bottom: 0; display: grid; gap: .6rem; padding: .75rem; border: 1px solid var(--color-brand-active); border-radius: .65rem; background: var(--surface-panel-bg); box-shadow: var(--shadow-sm); }
.endpoint-monitor-view .endpoint-monitor-progress strong { font-size: .85rem; }
.endpoint-monitor-view .endpoint-monitor-progress p { margin: .25rem 0 0; font-size: .8rem; }
.endpoint-monitor-view .endpoint-monitor-progress-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.endpoint-monitor-view .endpoint-monitor-progress.is-failed { border-color: var(--color-danger, #b52828); }
@container (max-width: 28rem) {
    .endpoint-monitor-view .endpoint-monitor-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Call destinations are an expanded directory, with borders only on actionable targets. */
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-account,
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-account-content,
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-group-content {
    border: 0;
    padding: 0;
    gap: 0;
}
.endpoint-monitor-list-account { margin: .5rem 0; font-size: .95rem; color: var(--color-text); }
.endpoint-monitor-list-heading { margin: .75rem 0 .15rem; padding: 0 .35rem; font-size: .75rem; font-weight: 750; color: var(--color-text-muted); }
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-row {
    border: 0;
    border-bottom: 1px solid var(--surface-panel-border);
    border-radius: 0;
    padding: .7rem .35rem;
    background: transparent;
    box-shadow: none;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-target {
    border: 0;
    border-radius: .35rem;
    background: var(--surface-panel-field-bg);
    box-shadow: none;
    padding: .5rem;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-target:hover:not(:disabled),
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-target:focus-visible {
    background: var(--color-brand-soft);
    outline: 1px solid var(--color-brand-active);
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
    align-items: start;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-actions {
    grid-template-columns: minmax(0, 1fr);
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .5rem;
    text-align: left;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-copy > strong {
    display: none;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-copy > small {
    grid-column: 1;
    grid-row: 1;
    font-size: .8rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-action { grid-column: 1; grid-row: 2; }
.endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-status { grid-column: 2; grid-row: 1 / 3; align-self: center; }
@container (max-width: 28rem) {
    .endpoint-monitor-view.is-destination-picker .endpoint-monitor-device { grid-template-columns: minmax(0, 1fr); }
    .endpoint-monitor-view.is-destination-picker .endpoint-monitor-device .endpoint-monitor-target-status { grid-column: 1; grid-row: 3; }
}



/* Flex Container Classes */

/* Flexbox Container */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

/* Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

/* Align Content (used when there are multiple rows of flex items) */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}


/* Flex Item Classes */

/* Flex Grow */
.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* Flex Shrink */
.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

/* Flex Basis */
.basis-auto {
    flex-basis: auto;
}

.basis-full {
    flex-basis: 100%;
}

/* Align Self */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-baseline {
    align-self: baseline;
}

.self-stretch {
    align-self: stretch;
}

/* Order */
.order-first {
    order: -1;
}

.order-last {
    order: 1;
}

.order-none {
    order: 0;
}



.sticky-footer {
    position: relative;
    z-index: 4;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    border-top: 1px solid #d9e3ef;
    background: rgba(248, 250, 252, 0.94);
    box-shadow: var(--elevation-sticky-footer);
    backdrop-filter: blur(14px);
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.communication-activity-tab {
    position: absolute;
    z-index: 6;
    top: 100%;
    left: 50%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: min(94vw, 34rem);
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid var(--communication-rail-separator);
    border-top: 0;
    border-radius: 0 0 0.82rem 0.82rem;
    background: var(--communication-rail-background);
    box-shadow: var(--elevation-floating-control);
    backdrop-filter: blur(14px);
}

.communication-activity-tab[hidden],
.compact-active-call-shortcut[hidden],
.communication-recent-call-shortcut[hidden],
.communication-new-text-shortcut[hidden] {
    display: none !important;
}

.compact-active-call-shortcut,
.communication-recent-call-shortcut,
.communication-new-text-shortcut {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    gap: 0.38rem;
    min-width: 0;
    min-height: 2.55rem;
    overflow: hidden;
    border: 0;
    background: var(--communication-rail-background);
    color: var(--communication-rail-text);
    padding: 0.44rem 0.72rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.compact-active-call-shortcut:hover,
.compact-active-call-shortcut:focus-visible,
.communication-recent-call-shortcut:hover,
.communication-recent-call-shortcut:focus-visible,
.communication-new-text-shortcut:hover,
.communication-new-text-shortcut:focus-visible {
    background: var(--communication-rail-background-hover);
    outline: 2px solid color-mix(in srgb, var(--communication-rail-accent) 34%, transparent);
    outline-offset: -2px;
}

.compact-active-call-shortcut > .gmi,
.communication-recent-call-shortcut > .gmi,
.communication-new-text-shortcut > .gmi {
    flex: 0 0 auto;
    font-size: 1.08rem;
}

.compact-active-call-shortcut[data-attention-tone="direct"] {
    background: color-mix(in srgb, var(--communication-activity-direct) 10%, var(--communication-rail-background));
    color: var(--communication-activity-direct);
    box-shadow: inset 0 -0.18rem currentColor;
}

.compact-active-call-shortcut[data-attention-tone="queue"] {
    background: color-mix(in srgb, var(--communication-activity-queue) 10%, var(--communication-rail-background));
    color: var(--communication-activity-queue);
    box-shadow: inset 0 -0.18rem currentColor;
}

.communication-recent-call-shortcut {
    color: var(--communication-activity-recent);
    box-shadow: inset 0 -0.18rem currentColor;
}

.communication-new-text-shortcut {
    color: var(--communication-activity-text);
    box-shadow: inset 0 -0.18rem currentColor;
}

.communication-activity-tab > button + button {
    border-left: 1px solid var(--communication-rail-separator);
}

body.workspace-tool-view .communication-activity-tab {
    display: none !important;
}

.communication-nav-indicator {
    position: absolute;
    top: 0.36rem;
    left: 0.62rem;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    min-width: 2.65rem;
    min-height: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    background: var(--communication-rail-background);
    color: var(--communication-rail-text);
    padding-inline: 0.36rem;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--communication-rail-accent) 16%, transparent);
    font-size: var(--ui-type-meta);
    font-weight: 950;
    line-height: 1;
}

.communication-nav-indicator[hidden] {
    display: none !important;
}

.page-menu > .chrome-nav-button.has-new-communication,
.page-menu > .chrome-nav-button.has-direct-call-attention,
.page-menu > .chrome-nav-button.has-queue-call-attention {
    border-color: color-mix(in srgb, var(--communication-rail-accent) 30%, transparent);
}

.chrome-nav-button.is-arriving > .gmi:first-child,
.chrome-nav-button.has-direct-call-attention > .gmi:first-child {
    color: var(--communication-activity-direct);
    animation: communication-nav-attention 760ms ease-in-out 2;
}

.chrome-nav-button.has-queue-call-attention:not(.has-direct-call-attention) > .gmi:first-child {
    color: var(--communication-activity-queue);
}

.page-menu > .chrome-nav-button.active.has-new-communication > .gmi:first-child,
.page-menu > .chrome-nav-button.active.has-direct-call-attention > .gmi:first-child,
.page-menu > .chrome-nav-button.active.has-queue-call-attention > .gmi:first-child {
    color: var(--color-theme-base-text);
}

@keyframes communication-nav-attention {
    0%, 100% { transform: translateX(0) rotate(0); }
    30% { transform: translateX(-0.09rem) rotate(-7deg); }
    65% { transform: translateX(0.09rem) rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
    .chrome-nav-button.is-arriving > .gmi:first-child,
    .chrome-nav-button.has-direct-call-attention > .gmi:first-child {
        animation: none;
    }
}

@media (max-width: 640px) {
    .communication-activity-tab {
        max-width: calc(100vw - 1rem);
    }

    .compact-active-call-shortcut,
    .communication-recent-call-shortcut,
    .communication-new-text-shortcut {
        padding-inline: 0.58rem;
    }
}


.results_count {
    position: absolute;
    top: 0.36rem;
    right: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    min-height: 1.05rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.86);
    color: #ffffff;
    padding: 0 0.3rem;
    font-size: var(--ui-type-caption);
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.results_count:empty {
    display: none;
}

.page-controls-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 0;
    min-height: 0;
    overflow: visible;
    border-bottom: 0;
    background: transparent;
}

.outgoing-caller-control {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) minmax(12rem, 1.5fr);
    align-items: center;
    gap: 0.58rem;
    width: calc(100% - 1.5rem);
    max-width: var(--app-content-width);
    margin: 0.58rem 0.75rem 0;
    padding: 0.48rem 0.58rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.outgoing-caller-control.is-open {
    border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border-muted));
    box-shadow: var(--shadow-md);
}

.outgoing-caller-control[hidden] {
    display: none;
}

.page-controls-caller-only {
    min-height: 0;
    padding: 0;
}

body.settings-view .outgoing-caller-control {
    display: none;
}

.outgoing-caller-control-icon {
    color: var(--color-brand-active);
    font-size: 1.25rem;
}

.outgoing-caller-control-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.outgoing-caller-control-copy strong,
.outgoing-caller-control-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outgoing-caller-control-copy strong {
    font-size: var(--ui-type-control);
    font-weight: 900;
}

.outgoing-caller-control-copy small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 650;
}

.outgoing-caller-control select {
    min-width: 0;
    min-height: 2.35rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.46rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
    padding: 0.38rem 0.48rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 750;
}

.outgoing-caller-control select:focus-visible {
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.outgoing-caller-control select:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.page-controls {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 0.55rem;
    overflow-y: auto;
    align-items: stretch;
    max-width: var(--app-content-width);
    max-height: 100%;
    padding: 0.58rem 0.75rem;
    font-weight: bold;
}

#workspace_call_dock {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    --dock-sidebar-clearance: var(--app-sidebar-width, 0px);
    display: block;
    pointer-events: none;
}

#workspace_call_dock > * {
    pointer-events: auto;
}

@media (min-width: 1180px) and (max-width: 1479px) {
    body.workspace-navigation-overlay-open #workspace_call_dock {
        --dock-sidebar-clearance: var(--app-sidebar-expanded-width);
    }
}

body.overview-dashboard-mode .page-menu { display: none; }

.page-menu {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-content-width);
    min-height: 4.55rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
}

/* Keep the legacy Dashboard destination available for direct comparison, but
 * omit its launcher from everyday navigation at every viewport width. */
.page-menu > .btn-page-overview {
    display: none !important;
}

@media (max-width: 1179px) {
    .page-menu > .btn-page-conversations { flex: 1.5; }
    .page-menu > .btn-page { overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
    .outgoing-caller-control {
        grid-template-columns: auto minmax(0, 1fr);
        width: calc(100% - 1rem);
        margin: 0.48rem 0.5rem 0;
        padding: 0.42rem 0.48rem;
    }

    .outgoing-caller-control select {
        grid-column: 1 / -1;
        width: 100%;
    }

    .page-controls {
        padding: 0.48rem 0.5rem;
    }

    .page-menu {
        min-height: 4.15rem;
        gap: 0.36rem;
        padding: 0.42rem 0.5rem;
    }

    .results_count {
        top: 0.32rem;
        right: 0.42rem;
    }
}



    .form-container {
        background-color: #fff;
        border-radius: 1rem;
        box-shadow: var(--shadow-lg);
        padding: 30px;
        width: 300px;
    }

    .form-header {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .form-title {
        font-size:2rem;
    }
    .form-category {
        font-size:1.5rem;font-weight:bold;color:var(--color-brand);
    }
    .form-message {
        display: none;
        font-size:1rem;font-weight:bold;color:#CE2029;MARGIN-TOP:20px;
    }

    .form-group:not(:last-child) {
        margin-bottom: 20px;
    }

    .form-group label {
        font-weight: bold;
        cursor: pointer;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
    }

    .password-field {
        position: relative;
    }

    .password-field input {
        padding-right: 42px;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text-subtle);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .password-toggle:hover,
    .password-toggle:focus {
        color: var(--color-brand);
    }

    .password-toggle:disabled {
        cursor: default;
        opacity: 0.45;
    }

    .form-group input[readonly],
    .form-group select[readonly],
    .form-group textarea[readonly] {
        cursor: default;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 8px;
        margin-bottom: 10px;
        /* Optionally */
        /* opacity: 0.8; */
    }

    .form-group textarea {
        height: 100px;
    }

    .form-group input[type='checkbox'] {
        margin-right: 5px;
    }

    .form-group input[type='submit'] {
        background-color: var(--color-brand);
        color: #fff;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        padding: 10px 20px;
        width: 100%;
        font-size: 1rem;
        font-weight: bold;
    }

    .form-group input[type='submit']:hover {
        background-color: #3ca9ff;
    }

    .form-group input[type='submit']:disabled {
        background-color: #A8D4FF;
    }

    .form-group .error-msg {
        font-weight: bold;
        font-size: 0.825rem;
        margin-top: 5px;
        color: #ce2029;
        text-align: right;
    }

    .form-footer {
        margin: 40px 0 0 0;
        text-align: center;
        font-size: 10px;
    }


    .form-error label,
    span.form-error {
        color: #ce2029 !important;
    }

    .form-error input {
        color: #ce2029 !important;
        border: 1px solid #ce2029 !important;
    }

    .form-okay label,
    span.form-okay {
        color: #7bb661 !important;
    }

    .form-okay input {
        color: #7bb661 !important;
        border: 1px solid #7bb661 !important;
    }

    /*So selected error field is noticeable (makes form height jump) 
    .form-error > input:focus {
        color: #ce2029 !important;
        border:3px solid #CE2029 !important;
    } */



html {
    /* adjust this to change rem base size */
    /* font-size: 20px; */
}

.gmi {
    line-height: 100%;
    font-family: 'Material Symbols Rounded';
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.gmi-filled {
    line-height: 100%;
    font-family: 'Material Symbols Rounded';
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    gap: 1rem;
    border: 1px solid var(--color-neutral-border);
}

legend {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
}

.workspace-popover-frame {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: var(--workspace-popover-section-gap);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--workspace-popover-section-radius);
    background: var(--workspace-popover-section-background);
    padding: var(--workspace-popover-section-padding);
}

/*
 * Shared transient workspace surface. It intentionally remains a CSS/markup
 * primitive so server-rendered and Vue-owned panels use the same contract
 * while the application is migrated incrementally.
 */
.workspace-popover-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--workspace-popover-border);
    border-radius: var(--workspace-popover-radius);
    background: var(--workspace-popover-background);
    padding: var(--workspace-popover-padding);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--ui-type-body);
    box-shadow: var(--workspace-popover-shadow);
}

.workspace-popover-shell-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    gap: var(--workspace-popover-toolbar-gap);
    margin-bottom: var(--workspace-popover-section-gap);
}

.workspace-popover-shell-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 0.55rem;
}

.workspace-popover-shell-title > .gmi {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: var(--workspace-popover-control-radius);
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    font-size: 1.25rem;
}

.workspace-popover-shell-title-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.workspace-popover-shell-title-copy strong,
.workspace-popover-shell-title-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-popover-shell-title-copy strong {
    color: var(--color-text);
    font-size: var(--ui-type-title);
    font-weight: 900;
    line-height: 1.15;
}

.workspace-popover-shell-title-copy small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 680;
    line-height: 1.25;
}

.workspace-popover-shell-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--workspace-popover-toolbar-gap);
}

.workspace-popover-shell-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: var(--workspace-popover-section-gap);
}

.workspace-popover-shell-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: var(--workspace-popover-toolbar-gap);
}

/* Keep navigation and the context rail clear while a context filter is open. */
body:has(.activity-context-account-popover.is-open, .activity-metrics-date-range-picker-host.is-open, [data-search-filter-drawer][data-open="true"]) main.content > section.app-section {
    position: relative;
}
body:has(.activity-context-account-popover.is-open, .activity-metrics-date-range-picker-host.is-open, [data-search-filter-drawer][data-open="true"]) main.content > section.app-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1000;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
}

.workspace-popover-positioner {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.app-booting,
html.app-booting body {
    overflow: hidden;
}

.app-boot-screen {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(11rem, 15vw) minmax(0, 1fr);
    grid-template-rows: 4.25rem minmax(0, 1fr);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-bg);
    opacity: 1;
    transition: opacity 160ms ease;
}

.app-boot-screen[hidden] {
    display: none !important;
}

html.app-ready .app-boot-screen {
    opacity: 0;
    pointer-events: none;
}

.app-boot-brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--color-theme-base);
    color: var(--color-theme-base-text);
}

.app-boot-brand-mark {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-theme-accent) 72%, transparent);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--color-theme-accent) 18%, transparent);
    color: var(--color-theme-accent);
    font-size: 1.35rem;
}

.app-boot-brand-copy {
    display: grid;
    gap: 0.08rem;
}

.app-boot-brand-copy strong {
    font-size: var(--ui-type-control);
    letter-spacing: 0.02em;
}

.app-boot-brand-copy small {
    color: color-mix(in srgb, currentColor 74%, transparent);
    font-size: var(--ui-type-meta);
}

.app-boot-topbar {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(14rem, 32rem) 2.8rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-surface-elevated);
}

.app-boot-sidebar {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 1rem;
    border-right: 1px solid var(--color-border-muted);
    background: var(--color-surface-elevated);
}

.app-boot-content {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1.25rem;
}

.app-boot-skeleton,
.app-boot-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--color-surface-muted) 88%, var(--color-brand-soft));
}

.app-boot-skeleton::after,
.app-boot-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.72) 49%, transparent 66%);
    content: "";
    transform: translateX(-100%);
    animation: app-boot-shimmer 1.35s ease-in-out infinite;
}

.app-boot-topbar .app-boot-skeleton {
    height: 2.55rem;
}

.app-boot-topbar .app-boot-avatar {
    width: 2.55rem;
    border-radius: 50%;
}

.app-boot-sidebar .app-boot-skeleton {
    height: 2.2rem;
}

.app-boot-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-boot-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-brand-active);
    font-size: var(--ui-type-control);
    font-weight: 800;
}

.app-boot-status .gmi {
    font-size: 1.2rem;
    animation: workspace-content-loading-spin 0.9s linear infinite;
}

.app-boot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    min-height: min(62vh, 38rem);
}

.app-boot-card {
    min-height: 20rem;
}

.app-boot-retry {
    display: none;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-danger-border);
    border-radius: 0.6rem;
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    padding-inline: 0.85rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 800;
    cursor: pointer;
}

.app-boot-screen.is-error .app-boot-retry {
    display: inline-flex;
    align-items: center;
}

@keyframes app-boot-shimmer {
    to { transform: translateX(100%); }
}

@media (max-width: 725px) {
    .app-boot-screen {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 4rem minmax(0, 1fr);
    }

    .app-boot-brand,
    .app-boot-sidebar {
        display: none;
    }

    .app-boot-topbar,
    .app-boot-content {
        grid-column: 1;
    }

    .app-boot-topbar {
        grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem;
        padding-inline: 0.65rem;
    }

    .app-boot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-boot-card:not(:first-child) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-boot-screen,
    .app-boot-skeleton::after,
    .app-boot-card::after,
    .app-boot-status .gmi {
        transition: none;
        animation: none;
    }
}

/* The boot screen is intentionally abstract: it must not promise a layout that
 * changes after account scope, role, and responsive state are resolved. */
.app-boot-screen {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-brand-soft) 58%, transparent), transparent 34rem),
        linear-gradient(145deg, var(--color-bg), color-mix(in srgb, var(--color-bg) 86%, var(--color-brand-soft)));
}

.app-boot-scene {
    display: grid;
    justify-items: center;
    width: min(28rem, calc(100vw - 2rem));
    gap: 1.15rem;
    padding: 2.1rem 1.5rem;
    text-align: center;
}

.app-boot-orbit {
    position: relative;
    display: grid;
    width: 7.5rem;
    height: 7.5rem;
    place-items: center;
}

.app-boot-orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
    border-radius: 50%;
    animation: app-boot-orbit 2.8s linear infinite;
}

.app-boot-orbit-ring:nth-child(2) {
    inset: 0.8rem;
    border-color: color-mix(in srgb, var(--color-theme-accent) 42%, transparent);
    animation-direction: reverse;
    animation-duration: 2.1s;
}

.app-boot-orbit-ring:nth-child(3) {
    inset: 1.65rem;
    border-style: dashed;
    animation-duration: 1.6s;
}

.app-boot-orbit-ring::after {
    position: absolute;
    top: -0.24rem;
    left: calc(50% - 0.24rem);
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--color-theme-accent);
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--color-theme-accent) 18%, transparent);
    content: "";
}

.app-boot-orbit-mark {
    position: relative;
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 1rem;
    background: var(--color-theme-base);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.app-boot-orbit-mark img {
    position: absolute;
    top: 0.12rem;
    left: 50%;
    display: block;
    width: 2.15rem;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
}

.app-boot-scene-copy {
    display: grid;
    gap: 0.3rem;
}

.app-boot-scene-copy > span {
    color: var(--color-brand-active);
    font-size: var(--ui-type-meta);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-boot-scene-copy strong {
    color: var(--color-text);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.app-boot-scene-copy small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
}

@keyframes app-boot-orbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-boot-orbit-ring { animation: none; }
}


.sticky-header {
    z-index: var(--z-app-chrome);
    width: 100%;
    position: sticky;
    display: flex;
    flex-direction: column;
    top: 0;
    border-bottom: 0;
    box-shadow: var(--elevation-sticky-header);
    align-items: center;
}


.account-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #7bb661;
}


.bgcolor-phone {
    color: var(--color-feature-calls-text);
    background-color: var(--color-feature-calls);
}

.bgcolor-contacts {
    color: var(--color-feature-contacts-text);
    background-color: var(--color-feature-contacts);
}

.bgcolor-texts {
    color: var(--color-feature-texts-text);
    background-color: var(--color-feature-texts);
}

.bgcolor-summary {
    color: var(--color-feature-summary-text);
    background-color: var(--color-feature-summary);
}

.bgcolor-settings {
    color: var(--color-feature-settings-text);
    background-color: var(--color-feature-settings);
}

.sticky-header.websocket-offline {
    color: #fff;
    background-color: #CE2029 !important;
}

.sticky-header.websocket-retrying {
    color: #fff;
    background-color: #9a5b00 !important;
}

.websocket-status-banner {
    position: absolute;
    z-index: 7;
    top: 100%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: min(100%, 42rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: var(--elevation-floating-control);
    transform: translateX(-50%);
    color: #fff;
    background: #CE2029;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

.websocket-status-banner[data-realtime-status="retrying"] {
    background: #9a5b00;
}

.websocket-status-banner[hidden] {
    display: none !important;
}

.workspace-content-loading {
    position: absolute;
    z-index: 6;
    bottom: -2.85rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100vw - 2rem);
    padding: 0.48rem 0.78rem;
    border: 1px solid var(--color-brand-soft);
    border-radius: 999px;
    box-shadow: var(--elevation-floating-control);
    color: var(--color-brand-active);
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-soft));
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateX(-50%);
}

.workspace-content-loading[hidden] {
    display: none !important;
}

.workspace-content-loading .gmi {
    font-size: 1.05rem;
    animation: workspace-content-loading-spin 0.9s linear infinite;
}

@keyframes workspace-content-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-content-loading .gmi {
        animation: none;
    }
}

.workspace-pointer-canvas {
    position: fixed;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.workspace-pointer-canvas[hidden] {
    display: none !important;
}



main.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* padding: 1rem 1rem 5rem 1rem; */
    width: 100%;
    gap: 1rem;
    background: var(--color-bg);
}

body.account-call-workspace-view main.content {
    position: relative;
    min-height: 0;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
}

/* Focused collections use main.content as their mobile scroll owner (content.js).
 * Dashboard and Conversations have their own bounded scrolling panels. */
@media (max-width: 997px) {
    body.account-call-workspace-view:not(.overview-workspace-view) main.content {
        overflow-y: auto;
    }
}

section.app-section {
    display: flex;
    flex-direction: column;
    padding: var(--app-content-inset);
    width: 100%;
    max-width: var(--app-content-width);
    margin: var(--app-content-inset) auto 5rem auto;
    /* box-shadow: var(--shadow-md); */
    /*breaking, lookup nested stacking contexts */
}

section.overview.app-section,
section.phone.app-section,
section.contacts.app-section,
section.texts.app-section {
    margin-bottom: 1rem;
}

section.contacts {
    gap: 0.42rem;
}

section.texts {
    gap: 0.72rem;
}

section.texts.permission-view-denied::before {
    color: var(--color-text-muted);
    content: "Message history is unavailable. You may still compose a new message.";
    padding: 1rem;
    text-align: center;
}

section.texts.permission-view-denied > * {
    display: none !important;
}

section.phone {
    gap: 0.72rem;
}

.connection-lost-title {
    color: #ce2029;
}

.connection-lost-body {
    color: orange;
}

.itembar {
    min-height: 45px;
}

.shake {
    animation: .8s shake infinite alternate;
}

@keyframes shake {
    0% {
        transform: skewX(-15deg);
    }

    5% {
        transform: skewX(15deg);
    }

    10% {
        transform: skewX(-15deg);
    }

    15% {
        transform: skewX(15deg);
    }

    20% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}


/* Default: hide everything */
.mobile,
.tablet,
.desktop {
    display: none;
}


/* Firefox */
/* * {
  scrollbar-width: 1rem;
  scrollbar-color: var(--color-brand) var(--color-inverse);
} */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  /* width: 1rem; */
  /* height: 1rem; */
}

*::-webkit-scrollbar-track {
  background: var(--color-inverse);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-brand);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-brand-text);
}




.app-brand-logo {
    display: none;
}

.app-brand-slot {
    display: contents;
}

.app-brand-logo-compact {
    display: none !important;
}

.app-environment-badge,
.app-delivery-mode-badge {
    display: none;
}

.app-delivery-mode-badge[hidden] {
    display: none !important;
}

.app-maintenance-banner {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 1.85rem;
    padding: 0.12rem .65rem;
    border-top: 1px solid #c83d4a;
    border-bottom: 1px solid #c83d4a;
    color: #801d2a;
    background: #fde8eb;
    font-size: 0.88rem;
    line-height: 1.35;
    text-align: center;
}

 .app-maintenance-banner { flex-wrap: nowrap; }
.app-maintenance-banner [data-global-maintenance-status] { position: relative; flex: 0 0 auto; }
.app-maintenance-banner [data-global-maintenance-status] > summary { display: flex; align-items: center; gap: .35rem; list-style: none; white-space: nowrap; cursor: pointer; font-size: .8rem; }
.app-maintenance-banner summary::-webkit-details-marker { display: none; }
.app-maintenance-banner [data-maintenance-banner-detail] { position: absolute; z-index: 1250; top: calc(100% + .5rem); left: 0; display: block; width: min(24rem, calc(100vw - 1.5rem)); padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--workspace-popover-radius); background: var(--color-surface); color: var(--color-text); box-shadow: var(--elevation-floating-control); text-align: left; }
.app-maintenance-banner [data-global-maintenance-status][hidden] { display: none; }
#global_platform_status { flex: 0 1 auto; min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
    .app-maintenance-banner:has([data-global-maintenance-status]:not([hidden])) .platform-safety-banner > strong { display: none; }
    .app-maintenance-banner [data-global-maintenance-status] { position: static; }
    .app-maintenance-banner [data-maintenance-banner-detail] { position: fixed; left: .75rem; top: auto; margin-top: .5rem; }
}

/* Operational alerts belong to platform/restricted settings, not customer work. */
body:not(.settings-view) .app-maintenance-banner,
body.settings-view:not(:has(.settings-pane[data-settings-workspace="platform"], .settings-pane[data-settings-admin-only])) .app-maintenance-banner,
.app-maintenance-banner[hidden] {
    display: none !important;
}

.app-maintenance-banner .gmi {
    flex: 0 0 auto;
}



/* Mobile Like Devices */
/* @media (max-width: 650px) { */
@media (max-width: 700px) {
    .mobile {
        display: flex;
    }
}

/*
 * The desktop brand occupies the same independent rail as workspace
 * navigation. It never contributes to the header's centered control width.
 */
@media (min-width: 1180px) {
    .app-brand-slot {
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        display: grid;
        width: var(--app-sidebar-width);
        height: var(--app-header-primary-height);
        place-items: center;
        overflow: hidden;
        border-right: 0;
        background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
        transition: width 180ms ease;
    }

    .app-brand-slot .app-brand-logo {
        position: static;
        display: grid;
        width: calc(var(--app-sidebar-width) - 1.2rem);
        height: 2.75rem;
        place-items: center;
    }

    .app-brand-slot .app-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .app-brand-slot .app-brand-logo-wide {
        display: none !important;
    }

    .app-brand-slot .app-brand-logo-compact {
        position: relative;
        display: block !important;
        width: 2.15rem;
        height: 2.45rem;
        overflow: hidden;
    }

    .app-brand-slot .app-brand-logo-compact img {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1.78rem;
        height: auto;
        max-width: none;
        object-fit: initial;
        transform: translateX(-50%);
    }

}

@media (min-width: 1480px) {
    body.workspace-shell-view.workspace-navigation-expanded .app-brand-slot .app-brand-logo {
        width: 8rem;
    }

    body.workspace-shell-view.workspace-navigation-expanded .app-brand-slot .app-brand-logo-wide {
        display: block !important;
    }

    body.workspace-shell-view.workspace-navigation-expanded .app-brand-slot .app-brand-logo-compact {
        display: none !important;
    }
}

@media (min-width: 701px) {
    .app-brand-logo {
        position: absolute;
        z-index: 2;
        top: 0.48rem;
        left: 0.75rem;
        display: block;
        width: 9rem;
        height: 2.7rem;
    }

    .app-brand-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }

}

@media (max-width: 700px) {
    .app-maintenance-banner {
        justify-content: center;
        padding-inline: 0.5rem;
        text-align: center;
    }
}

/* Tablet Like Devices */
/* @media (min-width: 651px) and (max-width: 997px) { */
@media (min-width: 701px) and (max-width: 997px) {
    /* body {
        background-color: var(--color-neutral-soft);
    } */
    .tablet {
        display: flex;
    }
}


/* Desktop Like Devices */
@media (min-width: 998px) {
    section.app-section {
        /* background-color: var(--color-neutral-soft); */
        /* border-radius: 1rem; */
        /* border: 1px solid var(--color-neutral-border); */
    }
    .desktop {
        display: flex;
    }
}
.password-manager-username {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}



body.login-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    margin: 0;
    color: #172033;
    background: #07182c;
}

body.login-page .login-scene-carousel,
body.login-page .login-scene,
body.login-page .login-scene-veil {
    position: fixed;
    inset: 0;
}

body.login-page .login-scene-carousel {
    z-index: -4;
    overflow: hidden;
    background: #07182c;
}

body.login-page .login-scene {
    opacity: 0;
    background-image: var(--login-scene-image);
    background-position: center bottom;
    background-size: cover;
    transform: none;
}

body.login-page .login-scene.is-active {
    opacity: 1;
    transform: none;
}

body.login-page .login-scene-veil {
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgb(4 15 31 / 4%) 0%, rgb(4 15 31 / 8%) 40%, rgb(4 15 31 / 60%) 65%, rgb(4 15 31 / 78%) 100%),
        linear-gradient(0deg, rgb(4 15 31 / 38%) 0%, transparent 32%);
}

body.login-page .login-stage {
    position: relative;
    z-index: 2;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    align-items: center;
    align-content: center;
    justify-items: end;
    gap: 0.95rem;
    padding: clamp(1.5rem, 4vh, 3.5rem) clamp(1.5rem, 6vw, 7rem) 5.5rem;
    scrollbar-gutter: stable;
}

body.login-page .login-scene-story {
    display: grid;
    justify-self: end;
    gap: 0.48rem;
    width: min(100%, 27rem);
    box-sizing: border-box;
    padding: 0 0.35rem;
    color: #fff;
    text-shadow: 0 2px 18px rgb(2 12 27 / 62%);
}

body.login-page .login-scene-story-eyebrow {
    width: fit-content;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 999px;
    padding: 0.32rem 0.58rem;
    color: #f8ce78;
    background: rgb(5 18 38 / 36%);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(0.5rem);
}

body.login-page .login-scene-story h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 760;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

body.login-page .login-scene-story p {
    max-width: 39rem;
    margin: 0;
    color: rgb(255 255 255 / 85%);
    font-size: 0.88rem;
    line-height: 1.55;
}

body.login-page .form-container {
    width: min(100%, 27rem);
    max-height: calc(100vh - 8rem);
    max-height: calc(100svh - 8rem);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    border: 1px solid rgb(255 255 255 / 56%);
    border-radius: 1.4rem;
    background: rgb(249 252 255 / 90%);
    box-shadow:
        0 1.75rem 5rem rgb(2 12 27 / 38%),
        inset 0 1px 0 rgb(255 255 255 / 75%);
    backdrop-filter: blur(1.15rem) saturate(1.12);
    scrollbar-color: rgb(148 163 184 / 65%) transparent;
}

body.login-page .form-header,
body.login-page .form-container form {
    width: 100%;
}

body.login-page .form-header {
    margin-bottom: 1.55rem;
}

body.login-page .form-title {
    color: #102a4a;
    font-size: clamp(1.8rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

body.login-page .form-category {
    margin-top: 0.35rem;
    color: #53647c;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

body.login-page .form-message {
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem;
    box-sizing: border-box;
    border: 1px solid rgb(37 99 235 / 14%);
    border-radius: 0.65rem;
    color: #1e3a5f;
    background: rgb(239 246 255 / 90%);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.login-page .form-message:empty {
    display: none;
}

body.login-page .form-group:not(:last-child) {
    margin-bottom: 1rem;
}

body.login-page .form-group label {
    color: #263a54;
    font-size: 0.82rem;
}

body.login-page .form-group input:not([type="submit"]),
body.login-page .form-group select {
    min-height: 2.8rem;
    box-sizing: border-box;
    border: 1px solid #becadd;
    border-radius: 0.7rem;
    color: #172033;
    background: rgb(255 255 255 / 92%);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

body.login-page .form-group input:focus,
body.login-page .form-group select:focus {
    border-color: #2563eb;
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 0.22rem rgb(37 99 235 / 15%);
}

body.login-page input[type="submit"] {
    min-height: 2.9rem;
    border: 0;
    border-radius: 0.75rem;
    color: #fff;
    background: linear-gradient(135deg, #174f9e 0%, #2563eb 100%);
    box-shadow: 0 0.65rem 1.5rem rgb(37 99 235 / 20%);
    cursor: pointer;
    letter-spacing: 0.055em;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

body.login-page input[type="submit"]:hover:not(:disabled),
body.login-page input[type="submit"]:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #174f9e 0%, #2563eb 100%);
    box-shadow: 0 0.85rem 1.8rem rgb(37 99 235 / 29%);
    transform: translateY(-1px);
}

body.login-page a {
    color: #175cb6;
}

body.login-page .password-toggle {
    color: #64748b;
}

body.login-page .login-field-help {
    margin-top: 0.42rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
}

body.login-page .form-footer {
    margin-top: 1.5rem;
}

body.login-page .login-layer-controls {
    position: fixed;
    left: 1rem;
    right: auto;
    bottom: 1.3rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: fit-content;
    max-width: calc(100% - 3rem);
}

body.login-page .login-scene-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 192px;
    align-items: center;
    gap: 0.2rem;
    min-height: 3.25rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 1.25rem;
    color: #fff;
    background: rgb(5 18 38 / 72%);
    box-shadow: 0 0.65rem 1.8rem rgb(2 12 27 / 22%);
    backdrop-filter: blur(0.8rem) saturate(1.15);
}

.login-layer-label {
    padding: 0 0.4rem;
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    color: #c9d9eb;
}

body.login-page .login-scene-toggle,
body.login-page .login-scene-select {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.35rem;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: 650 0.8rem/1.2 system-ui, sans-serif;
    transition: background-color 180ms ease, color 180ms ease;
}

body.login-page .login-scene-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 0.35rem; }
body.login-page .login-scene-toggle .gmi { font-size: 1.15rem; }
body.login-page .login-scene-control-divider { display: none; }
body.login-page .login-layer-controls button:hover { background: rgb(255 255 255 / 18%); }
body.login-page .login-layer-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.login-page .login-scene-select.is-active,
body.login-page .login-layer-controls button.is-active:hover,
body.login-page .login-layer-controls button.is-active:focus-visible { color: #102a4a; background: #fff; }

/* A shared 1672:941 canvas keeps the independently movable cutouts aligned with cover-sized backdrops. */
body.login-page .login-family-carousel { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.login-family-plane {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: max(100vw, calc(100svh * 1672 / 941));
    height: max(100svh, calc(100vw * 941 / 1672));
    transform: translateX(-50%);
    pointer-events: none;
}
.login-family {
    position: absolute;
    left: var(--family-x, 30%);
    bottom: var(--family-bottom, 4%);
    height: var(--family-height, 68%);
    width: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.login-family.is-active { opacity: 1; }

body.login-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@supports not ((backdrop-filter: blur(1rem))) {
    body.login-page .form-container {
        background: rgb(249 252 255 / 97%);
    }
}

@media (max-width: 680px) {
    body.login-page .login-scene {
        background-position: center;
        filter: brightness(0.74) saturate(0.88);
    }

    body.login-page .login-scene-veil {
        background:
            linear-gradient(0deg, rgb(4 15 31 / 64%) 0%, rgb(4 15 31 / 22%) 100%),
            radial-gradient(circle at center, transparent 12%, rgb(4 15 31 / 30%) 100%);
    }

    body.login-page .login-stage {
        align-items: center;
        align-content: center;
        justify-items: center;
        padding: 0.85rem 0.85rem 7.5rem;
    }

    body.login-page .login-scene-story {
        justify-self: center;
        width: 100%;
        gap: 0.34rem;
        padding-inline: 0.25rem;
    }

    body.login-page .login-scene-story h1 {
        font-size: clamp(1.18rem, 6vw, 1.55rem);
    }

    body.login-page .login-scene-story p {
        font-size: 0.78rem;
        line-height: 1.42;
    }

    body.login-page .form-container {
        width: 100%;
        max-height: calc(100vh - 5.8rem);
        max-height: calc(100svh - 5.8rem);
        padding: 1.25rem 1.05rem;
        border-radius: 1rem;
        background: rgb(249 252 255 / 92%);
    }

    body.login-page .form-header {
        margin-bottom: 1.1rem;
    }

    body.login-page .form-title {
        font-size: 1.72rem;
    }

    body.login-page .login-layer-controls {
        right: 0.85rem;
        left: 0.85rem;
        bottom: 0.85rem;
        max-width: calc(100% - 1.7rem);
        transform: none;
    }
}

.login-scene-preview-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 36rem;
    overflow: hidden;
    color: #fff;
    background: #07182c;
}

.login-scene-preview-media,
.login-scene-preview-image,
.login-scene-preview-veil {
    position: absolute;
    inset: 0;
}

.login-scene-preview-image {
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    object-position: center bottom;
    transform: none;
}

.login-scene-preview-image.is-active {
    opacity: 1;
    transform: none;
}

.login-scene-preview-veil {
    background:
        linear-gradient(90deg, rgb(4 15 31 / 4%) 0%, rgb(4 15 31 / 8%) 40%, rgb(4 15 31 / 60%) 65%, rgb(4 15 31 / 78%) 100%),
        linear-gradient(0deg, rgb(4 15 31 / 42%) 0%, transparent 35%);
}

.login-scene-preview-layout {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    justify-items: end;
    box-sizing: border-box;
    padding: clamp(2rem, 5vw, 5rem);
}

.login-scene-preview-panel {
    display: grid;
    gap: 1rem;
    width: min(27rem, 100%);
}

.login-scene-preview-copy {
    display: grid;
    gap: 0.48rem;
    padding-inline: 0.35rem;
    text-shadow: 0 2px 18px rgb(2 12 27 / 62%);
}

.login-scene-preview-eyebrow {
    width: fit-content;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 999px;
    padding: 0.32rem 0.58rem;
    color: #f8ce78;
    background: rgb(5 18 38 / 36%);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(0.5rem);
}

.login-scene-preview-copy h2,
.login-scene-preview-copy p {
    margin: 0;
}

.login-scene-preview-copy h2 {
    color: #fff;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.login-scene-preview-copy p {
    color: rgb(255 255 255 / 85%);
    font-size: 0.88rem;
    line-height: 1.55;
}

.login-scene-preview-card {
    padding: clamp(1.25rem, 2vw, 1.8rem);
    border: 1px solid rgb(255 255 255 / 56%);
    border-radius: 1.35rem;
    color: #172033;
    background: rgb(249 252 255 / 90%);
    box-shadow: 0 1.75rem 5rem rgb(2 12 27 / 38%);
    backdrop-filter: blur(1.15rem) saturate(1.12);
}

.login-scene-preview-card-header {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    margin-bottom: 1.2rem;
}

.login-scene-preview-card-header strong {
    color: #102a4a;
    font-size: 1.75rem;
    letter-spacing: -0.04em;
}

.login-scene-preview-card-header small {
    color: #53647c;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-scene-preview-faux-form {
    display: grid;
    gap: 0.9rem;
}

.login-scene-preview-faux-field {
    display: grid;
    gap: 0.35rem;
}

.login-scene-preview-faux-field span {
    color: #263a54;
    font-size: 0.76rem;
    font-weight: 800;
}

.login-scene-preview-faux-input,
.login-scene-preview-faux-submit {
    min-height: 2.7rem;
    border: 1px solid #becadd;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 92%);
}

.login-scene-preview-faux-submit {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #174f9e 0%, #2563eb 100%);
}

.login-scene-preview-shell { container-type: size; }
.login-scene-preview-shell .login-family-plane {
    width: max(100cqw, calc(100cqh * 1672 / 941));
    height: max(100cqh, calc(100cqw * 941 / 1672));
}
.login-preview-layer-controls {
    position: absolute;
    left: 1rem;
    right: auto;
    bottom: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.login-scene-preview-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 192px;
    align-items: center;
    gap: 0.2rem;
    min-height: 3.25rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 1.25rem;
    background: rgb(5 18 38 / 72%);
    backdrop-filter: blur(0.8rem) saturate(1.15);
}
#modal.modal-scene-preview .login-scene-preview-controls button {
    width: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.35rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font: 650 0.8rem/1.2 system-ui, sans-serif;
}
#modal.modal-scene-preview .login-scene-preview-controls button.is-active { color: #102a4a; background: #fff; }
#modal.modal-scene-preview .login-scene-preview-controls button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
#modal.modal-scene-preview .login-scene-preview-controls .login-scene-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.login-scene-preview-controls .login-scene-toggle .gmi { font-size: 1.15rem; }

@media (max-width: 680px) {
    .login-scene-preview-image {
        filter: brightness(0.72) saturate(0.86);
    }

    .login-scene-preview-layout {
        align-items: center;
        justify-items: center;
        overflow-y: auto;
        padding: 4.5rem 0.85rem 4.8rem;
    }

    .login-scene-preview-panel {
        width: min(100%, 27rem);
    }

    .login-scene-preview-copy h2 {
        font-size: 1.3rem;
    }

    .login-scene-preview-copy p {
        font-size: 0.78rem;
    }

    .login-preview-layer-controls { left: 0.85rem; right: 0.85rem; bottom: 0.85rem; }
    .login-scene-preview-shell .login-family-plane { width: 100%; height: 100%; }
    #modal.modal-scene-preview .login-scene-preview-controls button { padding-inline: 0.45rem; font-size: 0.72rem; }
}

@media (max-height: 700px) and (min-width: 681px) {
    body.login-page .login-stage {
        align-items: start;
        padding-top: 1rem;
    }

    body.login-page .form-container {
        max-height: calc(100vh - 5.4rem);
        max-height: calc(100svh - 5.4rem);
    }
}

@media (max-width: 680px) {
    .login-family-plane { width: 100%; height: 100%; left: 0; transform: none; }
    .login-family { left: 50%; height: min(var(--family-height), 64%); }
    body.login-page .login-layer-controls { gap: 0.35rem; }
    body.login-page .login-scene-controls, .login-scene-preview-controls { display: flex; width: auto; gap: 0.05rem; padding-inline: 0.25rem; border-radius: 999px; }
    body.login-page .login-layer-controls button { padding-inline: 0.45rem; font-size: 0.72rem; }
    .login-layer-label { padding-inline: 0.25rem; font-size: 0.62rem; }
}

@media (max-width: 380px) {
    .login-toggle-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-family, .login-family.is-active { transition: none; transform: translateX(-50%); }
    body.login-page .login-scene,
    body.login-page .login-scene-select,
    body.login-page input[type="submit"] {
        transition: none;
    }

    body.login-page .login-scene,
    body.login-page .login-scene.is-active {
        transform: none;
    }

    .login-scene-preview-image,
    .login-scene-preview-image.is-active {
        transition: none;
        transform: none;
    }
}

/* Resend is available only after an email challenge has been issued. */
body.login-page button[hidden] { display: none; }
body.login-page .login-actions { display: grid; gap: 0.5rem; }
body.login-page .login-actions > .ui-button { width: 100%; justify-content: center; }




.mfa-enrollment-card {
    display: block;
}

.mfa-enrollment-card .form-header p,
.mfa-enrollment-card section > p {
    color: #64748b;
    line-height: 1.55;
}

.mfa-enrollment-card .form-message:not(:empty) {
    display: block;
}

.mfa-enrollment-card .form-message.error {
    color: #991b1b;
    background: #fef2f2;
}

.mfa-enrollment-card .mfa-inline-message {
    margin-top: 8px;
}

.mfa-enrollment-card form {
    margin-top: 18px;
}

.mfa-primary-button,
.mfa-enrollment-card button {
    display: inline-flex;
    min-height: 42px;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--color-feature-settings, #334155);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mfa-enrollment-card button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.mfa-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mfa-copy-row code {
    flex: 1;
    padding: 12px;
    overflow-wrap: anywhere;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    letter-spacing: 0.08em;
}

.mfa-complete-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}



.app-overlay-open,
body:has(.ui-dialog-backdrop),
body:has(.ui-managed-drawer-host[data-drawer-open="true"]) {
    overflow: hidden;
}

#workspace_app_host {
    display: contents;
}

.app-overlay-surface {
    box-sizing: border-box;
}

.app-overlay-surface-header,
.app-overlay-surface-body {
    box-sizing: border-box;
}

.modal {
    /* user-select: none; */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-backdrop, rgba(15, 23, 42, 0.46));
    backdrop-filter: saturate(125%) blur(3px);
    z-index: var(--z-modal, 1260);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 1rem;
}

.modal-content {
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.9rem;
    background: var(--surface-panel-bg);
    box-shadow: var(--shadow-modal);
    color: var(--color-text);
    width: 90%;
    max-width: 500px;
    max-height: 90%;
    padding: 0.9rem;
    position: relative;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(146, 174, 214, 0.22);
    padding: 0 0 0.72rem;
    margin-bottom: 0.82rem;
}

.modal-title {
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.app-overlay-surface-heading {
    min-width: 0;
}

.modal-show {
    display: flex;
}

body.active-call-detail-open .modal.modal-show { z-index: var(--z-modal, 1260); }

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    min-height: 2.05rem;
    border: 1px solid rgba(146, 174, 214, 0.26);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text-muted);
    font-size: 1.2rem;
    font-weight: 850;
    opacity: 1;
    cursor: pointer;
    outline: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.modal-close:hover {
    border-color: rgba(146, 174, 214, 0.42);
    background: #ffffff;
    color: var(--color-text);
}

.modal-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.78rem;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.42;
}

.modal-content {
    animation: fadein 0.18s ease-out;
}

#communication_identity_selector .modal-content {
    width: min(34rem, calc(100% - 1rem));
    max-width: 34rem;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer {
    z-index: var(--z-primary-drawer, 1240);
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    overflow: clip;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer :is(#modal-content, .ui-managed-drawer) {
    background: var(--surface-drawer-bg, var(--color-surface-muted));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(38rem, 100%);
    max-width: 38rem;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border-radius: var(--ui-drawer-edge-radius) 0 0 var(--ui-drawer-edge-radius);
    animation: app-side-drawer-in 280ms cubic-bezier(.2,.8,.2,1) both;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer :is(#modal-body, .ui-managed-drawer-body) {
    min-height: 0;
    overflow-y: auto;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer.app-overlay-size-narrow :is(#modal-content, .ui-managed-drawer) {
    width: min(34rem, 100%);
    max-width: 34rem;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer.app-overlay-size-standard :is(#modal-content, .ui-managed-drawer) {
    width: min(38rem, 100%);
    max-width: 38rem;
}

:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer.app-overlay-size-wide :is(#modal-content, .ui-managed-drawer) {
    width: min(56rem, 100%);
    max-width: 56rem;
}

/* Read-only reference matrices need room for descriptive capability columns. */
:is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer.app-overlay-size-reference :is(#modal-content, .ui-managed-drawer) {
    width: min(76rem, 100%);
    max-width: 76rem;
    overflow: clip;
}

/* Primary drawers are mutually exclusive. The JavaScript surface coordinator
 * closes replaced drawers; these selectors are a visual safety boundary while
 * an asynchronous legacy close handler finishes. Dialogs remain free to layer
 * above the currently active drawer. */
body[data-workspace-primary-surface]:not([data-workspace-primary-surface="app-overlay"])
    .app-overlay-host.modal-drawer,
body[data-workspace-primary-surface]:not([data-workspace-primary-surface="contact-editor"])
    .workspace-contact-editor-layer,
body[data-workspace-primary-surface]:not([data-workspace-primary-surface="fixture-lab"])
    .call-fixture-lab,
body[data-workspace-primary-surface]:not([data-workspace-primary-surface="call-detail"])
    .active-call-detail-drawer {
    visibility: hidden;
    pointer-events: none;
}

#modal.modal-scene-preview {
    align-items: stretch;
    justify-content: stretch;
    padding: 0.75rem;
    overflow: hidden;
    background: rgb(3 12 26 / 78%);
}

#modal.modal-scene-preview #modal-content {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    overflow: hidden;
    padding: 0;
    border-color: rgb(255 255 255 / 18%);
    border-radius: 1rem;
    background: #07182c;
}

#modal.modal-scene-preview #modal-header {
    position: absolute;
    z-index: 5;
    top: 0.75rem;
    right: 0.75rem;
    gap: 0.65rem;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 0.72rem;
    background: rgb(5 18 38 / 58%);
    backdrop-filter: blur(0.8rem);
}

#modal.modal-scene-preview #modal-title {
    padding-left: 0.35rem;
    color: #fff;
    font-size: 0.78rem;
}

#modal.modal-scene-preview #modal-close {
    border-color: rgb(255 255 255 / 22%);
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

#modal.modal-scene-preview #modal-body {
    display: block;
    width: 100%;
    height: 100%;
}

.modal select:not(.call-recording-speed-select) {
    width: 100%;
}

.modal .label {
    width: 100%;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.12;
}

.modal form {
    display: flex;
    flex-direction: column;
    gap: 0.78rem;
    width: 100%;
}

.modal fieldset {
    gap: 0.68rem;
    align-items: stretch;
    border: 1px solid rgba(146, 174, 214, 0.22);
    border-radius: 0.72rem;
    background: var(--surface-panel-field-bg);
    padding: 0.72rem;
}

.modal legend {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.modal input:not([type="checkbox" i]):not([type="radio" i]):not([type="range" i]),
.modal textarea,
.modal select:not(.call-recording-speed-select) {
    min-height: 2.35rem;
    border: 1px solid rgba(146, 174, 214, 0.32);
    border-radius: 0.55rem;
    background: var(--surface-panel-control-bg);
    color: var(--color-text);
    font-size: 0.9rem;
}

.modal input[type="checkbox" i],
.modal input[type="radio" i] {
    accent-color: var(--color-feature-settings);
}

.modal .button:not(.ui-button),
.modal button:not(.modal-close):not(.exclude):not(.ui-action-button):not(.ui-button):not([role="tab"]):not([data-analysis-view]):not(.call-review-handling) {
    min-height: 2.35rem;
    border: 1px solid rgba(146, 174, 214, 0.26);
    border-radius: 0.58rem;
    background: var(--surface-panel-soft-control-bg);
    color: var(--color-text);
    padding: 0.45rem 0.72rem;
    font-size: 0.86rem;
    font-weight: 850;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.modal .button:not(.ui-button):hover,
.modal button:not(.modal-close):not(.exclude):not(.ui-button):not([role="tab"]):not([data-analysis-view]):not(.call-review-handling):hover,
.modal .button:not(.ui-button):focus-visible,
.modal button:not(.modal-close):not(.exclude):not(.ui-button):not([role="tab"]):not([data-analysis-view]):not(.call-review-handling):focus-visible {
    border-color: rgba(146, 174, 214, 0.42);
    background: #ffffff;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes app-side-drawer-in {
    from {
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes app-bottom-drawer-in {
    from {
        transform: translateY(calc(100% + 1rem));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 700px) {
    :is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer {
        align-items: flex-end;
    }

    :is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer :is(#modal-content, .ui-managed-drawer) {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 92%;
        border-radius: 0.9rem 0.9rem 0 0;
        animation-name: app-bottom-drawer-in;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.app-overlay-host, .ui-managed-drawer-host).modal-drawer :is(#modal-content, .ui-managed-drawer) {
        animation: none;
    }
}


/* Layout customization shares the drawer shell while keeping drop destinations reachable. */
.app-overlay-host.app-overlay-modeless { pointer-events: none; background: transparent; backdrop-filter: none; }
.app-overlay-host.app-overlay-modeless > .app-overlay-surface { pointer-events: auto; }



.phone-settings-section {
    justify-content: flex-start;
    padding: 0.85rem;
    gap: 0.85rem;
    border-radius: 0.75rem;
}

#phone_settings_form {
    display: grid;
    gap: 1rem;
    width: 100%;
}

#phone_settings .modal-content {
    max-width: 640px;
}

#phone_settings .group {
    width: 100%;
}



#ringer_settings_form { width: 100%; min-width: 0; margin: 0; }

#ringer_settings .ringer-settings-content,
#ringer_settings .ringer-alert-identity > span,
#ringer_settings .browser-notification-copy,
#ringer_settings .ringer-queue-section,
#ringer_settings .ringer-queue-section > summary > span:first-child {
    display: grid;
    min-width: 0;
}

#ringer_settings .ringer-settings-content {
    gap: 0.72rem;
}

#ringer_settings .ringer-queue-section > summary strong {
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 900;
}

#ringer_settings .ringer-queue-section > summary small,
#ringer_settings .ringer-queue-heading small,
#ringer_settings .browser-notification-copy small,
#ringer_settings .ringer-alert-identity small {
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    line-height: 1.3;
}

#ringer_settings .ringer-alert-list {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.78rem;
    background: var(--color-surface-elevated);
}

#ringer_settings .ringer-alert-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    padding: 0.72rem;
    border-bottom: 1px solid var(--color-border-muted);
}

#ringer_settings .ringer-alert-row:last-child {
    border-bottom: 0;
}

#ringer_settings .ringer-alert-identity {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
}

#ringer_settings .ringer-alert-copy {
    flex: 1 1 auto;
}

#ringer_settings .ringer-alert-identity > span {
    gap: 0.1rem;
}

#ringer_settings .ringer-alert-identity strong {
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 900;
}

#ringer_settings .ringer-alert-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.15rem;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.62rem;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    font-size: 1.08rem;
}

#ringer_settings .ringer-alert-controls {
    display: grid;
    grid-template-columns: 7.5rem minmax(5rem, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

#ringer_settings .ringer-alert-controls output {
    min-width: 2.5rem;
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#ringer_settings .alert-preview-button {
    display: inline-grid;
    grid-template-columns: 1.1rem 4ch 3ch;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    width: 100%;
    min-width: 7.5rem;
    height: var(--ui-control-min-height);
    white-space: nowrap;
    box-sizing: border-box;
    min-height: var(--ui-control-min-height);
    border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-brand-active);
    padding: 0.2rem 0.48rem;
    font: inherit;
    font-size: var(--ui-type-meta);
    font-weight: 850;
    cursor: pointer;
}

#ringer_settings .alert-preview-countdown { font-variant-numeric: tabular-nums; text-align: right; }
#ringer_settings .alert-preview-countdown.is-idle { visibility: hidden; }

#ringer_settings .alert-preview-button.is-playing {
    border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-soft) 76%, var(--color-surface-elevated));
    color: var(--color-danger);
}

#ringer_settings .alert-preview-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ringer_settings .alert-preview-button:hover,
#ringer_settings .alert-preview-button:focus-visible {
    border-color: var(--color-brand-active);
    background: var(--color-brand-soft);
    outline: 2px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline-offset: 1px;
}

#direct_alert_volume,
#queue_alert_volume,
#call_waiting_alert_volume,
#text_alert_volume {
    width: 100%;
    min-width: 0;
    accent-color: var(--color-brand-active);
}

#ringer_settings .alert-repeat-control,
#ringer_settings .alert-repeat-spacer {
    grid-column: 1 / -1;
    min-width: 0;
}

#ringer_settings .alert-repeat-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.52rem;
    padding-top: 0.46rem;
    border-top: 1px solid var(--color-border-muted);
    white-space: nowrap;
}

#ringer_settings .alert-repeat-spacer {
    display: none;
}

#ringer_settings .alert-repeat-control > span {
    flex: 0 0 auto;
    color: var(--color-text);
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

#ringer_settings .alert-repeat-control select {
    flex: 1 1 10.5rem;
    min-width: 10.5rem;
    min-height: var(--ui-control-min-height);
    max-width: min(11.5rem, 48vw);
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
    padding: 0.34rem 0.5rem;
    font: inherit;
    font-size: var(--ui-type-control);
}

#ringer_settings .alert-repeat-control select:disabled,
#ringer_settings input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ringer_settings .browser-notification-preference,
#ringer_settings .ringer-queue-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.72rem;
}

#ringer_settings .ringer-alert-row.call-waiting-alert-volume {
    background: color-mix(in srgb, var(--color-warning-soft) 16%, var(--color-surface-elevated));
}

#ringer_settings .ringer-alert-row.call-waiting-alert-volume.is-disabled {
    background: var(--surface-panel-soft-control-bg);
}

#ringer_settings .browser-notification-copy {
    gap: 0.14rem;
}

#ringer_settings .browser-notification-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 900;
}

#ringer_settings .browser-notification-copy .gmi {
    color: var(--color-brand-active);
    font-size: 1rem;
}

#ringer_settings .browser-notification-toggle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.34rem;
    min-height: var(--ui-control-min-height);
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    padding: 0.32rem 0.58rem;
    font-size: var(--ui-type-control);
    font-weight: 850;
    cursor: pointer;
}

#ringer_settings .browser-notification-toggle:has(input:checked) {
    border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border));
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
}

#ringer_settings .browser-notification-toggle:has(input:disabled) {
    opacity: 0.58;
    cursor: not-allowed;
}

#ringer_settings .browser-notification-toggle input {
    margin: 0;
    accent-color: var(--color-brand-active);
}

#ringer_settings .ringer-secondary-settings {
    display: grid;
    gap: 0.72rem;
}

#ringer_settings .ringer-queue-section,
#ringer_settings .browser-notification-preference {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.78rem;
    background: var(--color-surface-elevated);
}

#ringer_settings .browser-notification-preference {
    padding: 0.72rem;
}

#ringer_settings .ringer-queue-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.72rem;
    padding: 0.72rem;
    cursor: pointer;
    list-style: none;
}

#ringer_settings .ringer-queue-section > summary::-webkit-details-marker {
    display: none;
}

#ringer_settings .ringer-queue-section > summary > span:first-child {
    gap: 0.1rem;
}

#ringer_settings .ringer-queue-section > summary > .gmi {
    color: var(--color-text-muted);
    transition: transform 150ms ease;
}

#ringer_settings .ringer-queue-section[open] > summary > .gmi {
    transform: rotate(180deg);
}

#ringer_settings .ringer-queue-section[open] > summary {
    border-bottom: 1px solid var(--color-border-muted);
}

#ringer_settings .ringer-queue-heading {
    padding: 0.62rem 0.72rem 0;
}

#ringer_settings .ringer-queue-toggle-all {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-brand-active);
    padding: 0.2rem;
    font-size: var(--ui-type-control);
    font-weight: 850;
    cursor: pointer;
}

#ringer_settings #ringer_queues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.62rem 0.72rem 0.72rem;
}

#ringer_settings #ringer_queues > label {
    display: flex;
    align-items: center;
    gap: 0.36rem;
    min-width: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.52rem;
    background: var(--surface-panel-soft-control-bg);
    padding: 0.42rem 0.5rem;
    color: var(--color-text);
    font-size: var(--ui-type-control);
}

#ringer_settings #ringer_queues > label span {
    overflow: hidden;
    text-overflow: ellipsis;
}

#ringer_settings .ringer-queue-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-control);
}

@media (min-width: 860px) {
    #ringer_settings_form {
        max-width: var(--app-content-width);
    }

    #ringer_settings .ringer-alert-row {
        grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.4fr);
        gap: 1rem;
    }

    #ringer_settings .ringer-alert-controls {
        grid-template-columns: 7.5rem minmax(5rem, 1fr) 2.75rem minmax(13rem, 14rem);
    }

    #ringer_settings .ringer-alert-controls .alert-repeat-control,
    #ringer_settings .ringer-alert-controls .alert-repeat-spacer {
        grid-column: auto;
    }

    #ringer_settings .ringer-alert-controls .alert-repeat-control {
        padding-top: 0;
        padding-left: 0.55rem;
        border-top: 0;
        border-left: 1px solid var(--color-border-muted);
    }

    #ringer_settings .ringer-alert-controls .alert-repeat-spacer {
        display: block;
        min-height: var(--ui-control-min-height);
        border-left: 1px solid transparent;
    }

    #ringer_settings .ringer-secondary-settings {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    #ringer_settings #ringer_queues {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}



.search-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 300px) auto;
    gap: 0.55rem;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.62rem 0.75rem;
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
}

.header-control-group-left {
    grid-column: 1;
    grid-row: 1;
}

.communication-header-control {
    grid-column: 2;
    grid-row: 1;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 300px;
}

.header-control-group-right {
    grid-column: 3;
    grid-row: 1;
}

.header-control-group {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.header-control-group-left {
    justify-content: flex-start;
}

.workspace-navigation-toggle-home {
    position: absolute;
    top: 0.62rem;
    left: calc(var(--app-sidebar-width) + 0.65rem);
    z-index: var(--z-modal, 1260);
}

@media (min-width: 1480px) {
    body.workspace-navigation-expanded .workspace-navigation-toggle-home {
        left: calc(var(--app-sidebar-width) - 3.1rem);
    }
    body.workspace-navigation-expanded .app-brand-slot {
        box-sizing: border-box;
        padding-right: 3.1rem;
    }
}

.workspace-navigation-header-toggle-host {
    position: static;
    display: none;
    align-items: center;
}

.workspace-navigation-header-toggle {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 72%, transparent);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 96%, transparent);
    color: var(--color-theme-base);
    box-shadow: var(--shadow-sm), 0 0.45rem 1rem rgba(2, 21, 38, 0.16);
}

body.workspace-shell-view .workspace-navigation-header-toggle-host {
    display: flex;
}

.workspace-navigation-header-toggle:hover,
.workspace-navigation-header-toggle:focus-visible {
    border-color: var(--color-theme-accent);
    background: var(--color-surface-elevated);
    color: var(--color-theme-accent-active);
}

.workspace-navigation-header-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-theme-accent) 40%, transparent);
    outline-offset: 2px;
}

.workspace-navigation-header-toggle .gmi {
    font-size: 1.3rem;
}

.workspace-header-edge-context {
    position: absolute;
    z-index: 3;
    top: 0;
    display: none;
    box-sizing: border-box;
    align-items: center;
    height: var(--app-header-primary-height);
    pointer-events: none;
}

.workspace-header-edge-context-weather {
    left: var(--app-sidebar-width);
    justify-content: center;
    width: max(0px, calc((100vw - var(--app-content-width)) / 2 - var(--app-sidebar-width)));
}

.workspace-header-edge-context-clock {
    right: 0;
    justify-content: center;
    width: max(0px, calc((100vw - var(--app-content-width)) / 2));
}

body.workspace-shell-view .workspace-header-edge-context {
    display: flex;
}

.header-context-actions-home {
    position: absolute;
    z-index: var(--z-modal, 1260);
    top: 0.62rem;
    left: 50%;
    width: min(calc(100vw - (2 * var(--app-shell-gutter))), var(--app-content-width));
    transform: translateX(-50%);
    pointer-events: none;
}

.header-context-actions-home[hidden] {
    display: none !important;
}

.header-context-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.42rem;
    width: 100%;
}

.header-context-cluster {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
}

.header-context-cluster-right {
    justify-content: flex-end;
    margin-left: auto;
}

.header-context-actions.is-workspace-in-menu {
    justify-content: flex-end;
}

.header-context-actions > * {
    pointer-events: auto;
}

/* Edge context is secondary to navigation and the centered action spine. At
 * this width an expanded navigation rail leaves too little room for the
 * weather label, so both edge decorations yield without moving the center. */
@media (max-width: 1679px) {
    body.workspace-shell-view .workspace-header-edge-context {
        display: none;
    }
}

.workspace-selector-control {
    position: relative;
    width: var(--header-identity-width, 11rem);
}

.workspace-selector-trigger-host {
    display: block;
    width: 100%;
}

.workspace-selector-vue-root {
    position: relative;
    display: block;
    width: 100%;
}

.profile-menu-vue-root {
    display: contents;
}

.workspace-selector-trigger {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    min-height: 2.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
    color: var(--color-text);
    padding: 0.28rem 0.42rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
}

.workspace-selector-trigger:hover,
.workspace-selector-trigger:focus-visible,
.workspace-selector-trigger.is-open {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.workspace-selector-trigger:focus-visible {
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.workspace-selector-trigger.is-workspace-guide {
    position: relative;
    z-index: 1303;
    border-color: var(--color-warning-text, #92400e);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-warning-text, #92400e) 24%, transparent), var(--shadow-lg);
    animation: communication-recipient-guide 620ms ease-out 2;
}

.workspace-selector-trigger.is-workspace-guide::before {
    content: "";
    position: absolute;
    z-index: 1302;
    top: calc(100% + 0.2rem);
    left: 50%;
    width: 0.72rem;
    height: 0.72rem;
    border-top: 1px solid var(--color-warning-text, #92400e);
    border-left: 1px solid var(--color-warning-text, #92400e);
    background: var(--color-warning-bg, #fef3c7);
    transform: translateX(-50%) rotate(45deg);
}

.workspace-selector-trigger.is-workspace-guide::after {
    content: "Select an account workspace";
    position: absolute;
    z-index: 1301;
    top: calc(100% + 0.52rem);
    left: 50%;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    border: 2px solid var(--color-warning-text, #92400e);
    border-radius: var(--radius-md, 0.56rem);
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-text, #92400e);
    padding: 0.7rem 1rem;
    box-shadow: var(--shadow-lg);
    font-size: var(--ui-type-body, 1rem);
    font-weight: 950;
    text-align: center;
    transform: translateX(-50%);
}

.workspace-selector-control.is-static .workspace-selector-trigger,
.workspace-selector-control.is-static .workspace-selector-trigger:hover {
    border-color: var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
    cursor: default;
}

.workspace-selector-control.is-static .workspace-selector-trigger:disabled {
    opacity: 1;
}

.workspace-selector-control.is-static .workspace-selector-expand {
    display: none;
}

.workspace-selector-icon {
    color: var(--color-brand-active);
    font-size: 1.14rem;
}

.workspace-selector-copy {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

.workspace-selector-copy strong,
.workspace-selector-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-selector-copy strong {
    font-size: 0.72rem;
    font-weight: 850;
}

.workspace-selector-copy small {
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
}

.workspace-selector-expand {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.workspace-selector-menu {
    --workspace-popover-background: var(--surface-panel-bg);
    position: fixed;
    z-index: 1310;
    display: grid;
    align-content: start;
    gap: 0.18rem;
    width: max-content;
    min-width: min(21rem, calc(100vw - 1.5rem));
    max-width: min(var(--app-content-width, 998px), calc(100vw - 1.5rem));
    max-height: min(38rem, calc(100dvh - 1.5rem));
    overflow-x: hidden;
    overflow-y: auto;
}

.workspace-selector-menu[hidden] {
    display: none !important;
}

.workspace-selector-search-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-panel-bg);
    border-bottom: 1px solid var(--color-border-muted);
}
.workspace-selector-search-context {
    display: block;
    padding: .35rem .52rem 0;
    color: var(--color-text-muted);
}
.workspace-selector-search-header .workspace-account-search {
    position: static;
    border: 0;
    background: transparent;
}
.workspace-selector-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .52rem .3rem;
    color: var(--color-text-muted);
}
.workspace-selector-organization-select {
    flex-shrink: 0;
    color: var(--color-brand-active);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.workspace-selector-organization > .workspace-selector-account-group {
    margin-left: .75rem;
    border-left: 1px solid var(--color-border-muted);
    padding-left: .25rem;
}

.workspace-selector-section-title {
    padding: 0.48rem 0.52rem 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.workspace-selector-option {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    width: 100%;
    min-height: 3rem;
    border: 1px solid transparent;
    border-radius: 0.54rem;
    background: transparent;
    color: var(--color-text);
    padding: 0.42rem 0.5rem;
    cursor: pointer;
    text-align: left;
}

.workspace-selector-option:hover {
    border-color: var(--button-hover-border);
    background: var(--button-hover-bg);
}

.workspace-selector-option:focus-visible {
    border-color: var(--button-hover-border);
    background: var(--button-hover-bg);
    outline: 2px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.workspace-selector-option > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

.workspace-selector-option strong,
.workspace-selector-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-selector-option strong {
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 0.82rem;
    font-weight: 850;
}

.workspace-selector-option small {
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.workspace-selector-check {
    color: var(--color-brand-active);
    opacity: 0;
}

.workspace-selector-option.is-selected .workspace-selector-check {
    opacity: 1;
}

.workspace-selector-account-group {
    display: grid;
}

.workspace-selector-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.workspace-selector-account-row > .workspace-selector-option {
    min-width: 0;
}

.workspace-selector-account-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-items: center;
    align-self: center;
    width: 2.15rem;
    height: 2.15rem;
    margin-right: 0.2rem;
    border: 0;
    border-radius: 0.44rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.workspace-selector-account-toggle:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.workspace-selector-account-toggle:focus-visible {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
    outline: 2px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.workspace-selector-account-toggle:disabled {
    cursor: wait;
    opacity: 0.55;
}

.workspace-selector-account-group.is-configuring > .workspace-selector-account-row {
    border-radius: 0.54rem;
    background: color-mix(in srgb, var(--color-brand-active) 9%, transparent);
}

.workspace-selector-option-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.12rem;
}

.workspace-selector-option-expand {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 140ms ease;
}

.workspace-selector-option[data-workspace-aggregate][aria-expanded="true"] .workspace-selector-option-expand,
.workspace-selector-account-toggle[aria-expanded="true"] .workspace-selector-option-expand {
    transform: rotate(180deg);
}

.workspace-selector-option.is-configuring {
    border-color: var(--color-brand-active);
    background: color-mix(in srgb, var(--color-brand-active) 9%, transparent);
}

.workspace-account-scope {
    display: grid;
    width: auto;
    margin: 0.06rem 0.32rem 0.32rem .75rem;
    padding: 0.24rem;
    border: 0;
    border-left: 2px solid var(--color-brand-active);
    background: transparent;
}
.workspace-account-scope.is-aggregate-workspace {
    margin-top: 0;
    padding: 0.42rem;
}

.workspace-account-scope.is-aggregate-workspace .workspace-account-scope-toggle {
    display: none;
}

.workspace-account-scope.is-account-workspace .workspace-account-scope-toggle {
    display: none;
}

.workspace-account-scope.is-aggregate-workspace .workspace-account-scope-panel,
.workspace-account-scope.is-account-workspace .workspace-account-scope-panel {
    padding-top: 0;
}

.workspace-account-scope-loading {
    padding: 0.85rem 0.72rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.workspace-account-scope[hidden] {
    display: none !important;
}

.workspace-account-scope-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.36rem 0.42rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.workspace-account-scope-toggle:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.workspace-account-scope-toggle:focus-visible {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
    outline: 2px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.workspace-account-scope-toggle > .gmi:first-child {
    color: var(--color-brand-active);
    font-size: 1rem;
}

.workspace-account-scope-toggle-copy {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

.workspace-account-scope-toggle-copy strong,
.workspace-account-scope-toggle-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-account-scope-toggle-copy strong {
    font-size: 0.76rem;
    font-weight: 850;
}

.workspace-account-scope-toggle-copy small {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.workspace-account-scope-expand {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 140ms ease;
}

.workspace-account-scope-toggle[aria-expanded="true"] .workspace-account-scope-expand {
    transform: rotate(180deg);
}

.workspace-account-scope-panel {
    display: grid;
    gap: 0.48rem;
    padding-top: 0.24rem;
}

.workspace-account-scope-panel[hidden] {
    display: none;
}

.header-control-group-right {
    justify-content: flex-end;
}

@media (max-width: 1279px) {
    .header-utility-launchers:not(.is-in-menu) .header-utility-quick {
        display: none;
    }
}

.chrome-icon-button,
.search-box > button {
    width: 2.28rem;
    min-width: 2.28rem;
    height: 2.28rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 88%, transparent);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.chrome-icon-button .gmi,
.search-box > button .gmi {
    font-size: 1.16rem;
    line-height: 1;
}

.chrome-icon-button:hover:not(:disabled),
.search-box > button:hover:not(:disabled) {
    background: var(--color-surface-elevated);
    border-color: var(--color-border-strong);
}

.chrome-icon-button:disabled,
.search-box > button:disabled {
    cursor: default;
    opacity: 0.42;
}

.header-utility-launchers {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.header-utility-quick {
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
}

.header-utility-launchers.is-in-menu .header-utility-quick {
    display: none;
}

.profile-menu-control {
    position: relative;
    width: var(--header-identity-width, 11rem);
}

.profile-menu-trigger-host {
    display: block;
}

.profile-menu-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    align-items: center;
    gap: 0.2rem;
    min-width: 3.2rem;
    height: 2.7rem;
    padding: 0.22rem 0.34rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.profile-menu-trigger-copy {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
    text-align: left;
}

.profile-menu-trigger-copy strong,
.profile-menu-trigger-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Keep both text lines within the identity control's centered grid row. */
    line-height: 1.15;
}
.profile-menu-trigger-copy strong { font-size: var(--ui-type-control); }
.profile-menu-trigger-copy small { color: var(--color-text-muted); font-size: var(--ui-type-meta); }

@media (max-width: 1279px) {
    .sticky-header > .app-brand-slot { display: none; }
    .search-bar { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; }
    .communication-header-control { max-width: none; }
    .header-control-group-left .workspace-navigation-header-toggle {
        width: 2.28rem; min-width: 2.28rem; height: 2.28rem;
    }
    .responsive-profile-header-slot { display: flex; }
    .responsive-profile-header-slot[hidden] { display: none; }
    .responsive-profile-header-slot .profile-menu-control { width: auto; }
    .responsive-profile-header-slot .profile-menu-trigger { display: flex; min-width: 0; height: 2.28rem; }
    .responsive-profile-header-slot .profile-menu-trigger-copy { display: none; }
    .responsive-profile-header-slot .profile-avatar { width: 1.75rem; height: 1.75rem; }
    .responsive-profile-header-slot .profile-menu-expand { font-size: 0.9rem; }
}

.profile-menu-trigger:hover,
.profile-menu-trigger:focus-visible,
.profile-menu-trigger.is-open {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.profile-menu-trigger:focus-visible {
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.profile-avatar {
    display: inline-grid;
    place-items: center;
    width: 1.82rem;
    height: 1.82rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-brand) 45%, #ffffff);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-active) 100%);
    color: #ffffff;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.035em;
}

.profile-avatar-large {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 0.76rem;
}

.profile-menu-expand {
    color: var(--color-text-muted);
    font-size: 0.94rem;
    transition: transform 140ms ease;
}

.profile-menu-trigger.is-open .profile-menu-expand {
    transform: rotate(180deg);
}

.profile-menu-popover {
    --workspace-popover-background: var(--surface-panel-bg);
    position: fixed;
    z-index: 1310;
    display: grid;
    align-content: start;
    width: min(21rem, calc(100vw - 1.5rem));
    max-height: min(40rem, calc(100dvh - 1.5rem));
    overflow-x: hidden;
    overflow-y: auto;
}

.profile-menu-popover[hidden] {
    display: none !important;
}

.profile-menu-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.66rem;
    padding: 0.44rem 0.48rem 0.64rem;
}

.profile-menu-identity > span:last-child,
.profile-menu-action > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

.profile-menu-identity strong,
.profile-menu-identity small,
.profile-menu-action strong,
.profile-menu-action small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-identity strong {
    font-size: 0.84rem;
    font-weight: 900;
}

.profile-menu-identity small {
    color: var(--color-text-muted);
    font-size: 0.66rem;
}

.profile-menu-section {
    display: grid;
    gap: 0.14rem;
    padding: 0.36rem 0;
    border-top: 1px solid var(--color-border-muted);
}

.profile-menu-section-title {
    padding: 0.3rem 0.52rem 0.16rem;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.profile-menu-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.46rem 0.54rem;
    border: 1px solid transparent;
    border-radius: 0.56rem;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-menu-action:hover,
.profile-menu-action:focus-visible,
.profile-menu-action.is-open,
.profile-menu-action[aria-current="page"] {
    border-color: var(--button-hover-border);
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
    outline: none;
}

.profile-menu-action:focus-visible {
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.profile-menu-action > .gmi:first-child {
    color: var(--color-brand-active);
    font-size: 1.12rem;
}

.profile-menu-action strong {
    font-size: 0.78rem;
    font-weight: 850;
}

.profile-menu-action small {
    color: var(--color-text-muted);
    font-size: 0.66rem;
}

.profile-menu-action-expand {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 140ms ease;
}

#btn_appearance_theme.is-open .profile-menu-action-expand {
    transform: rotate(180deg);
}

.profile-menu-session-actions {
    padding-bottom: 0;
}

.profile-menu-session-actions .profile-menu-action > .gmi:first-child {
    color: var(--color-danger, #b42318);
}

.profile-menu-popover .appearance-theme-control {
    width: 100%;
}

.profile-menu-popover .appearance-theme-popover {
    position: static;
    width: 100%;
    margin-top: 0.28rem;
    box-shadow: none;
}

.chrome-icon-button.is-open,
.chrome-icon-button[aria-current="page"] {
    border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border));
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
}

.call-fixture-launcher {
    position: relative;
}

.call-fixture-launcher.is-open {
    border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border));
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
}

.responsive-header-actions-slot {
    display: block;
    width: 100%;
}

.responsive-header-actions-slot[hidden] {
    display: none !important;
}

.responsive-workspace-actions-slot {
    padding-bottom: 0.42rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.responsive-profile-actions-slot {
    margin-top: 0.24rem;
    padding-top: 0.42rem;
    border-top: 1px solid var(--color-border-muted);
}

.workspace-selector-control.is-in-menu {
    width: 100%;
}

.workspace-selector-control.is-in-menu .workspace-selector-trigger {
    min-height: 2.75rem;
    box-shadow: none;
}

.header-utility-launchers.is-in-menu,
.header-utility-launchers.is-in-menu .profile-menu-control {
    display: block;
    width: 100%;
}

.call-fixture-launcher-status {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 0.42rem;
    height: 0.42rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #94a3b8;
    opacity: 0;
}

.call-fixture-launcher.is-running .call-fixture-launcher-status {
    background: #16a34a;
    opacity: 1;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    background-color: color-mix(in srgb, var(--color-surface-elevated) 96%, transparent);
    flex: 1;
    min-width: 0;
    height: 2.7rem;
    min-height: 2.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    padding: 0.14rem 0.24rem;
    color: var(--color-text);
    position: relative;
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow-sm), var(--shadow-md);
    user-select: none;
}

.search-box.is-recipient-guide {
    border-color: var(--color-warning-text, #92400e);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-warning-text, #92400e) 24%, transparent), var(--shadow-lg);
    animation: communication-recipient-guide 620ms ease-out 2;
}

.search-box.is-recipient-guide::before {
    content: "";
    position: absolute;
    z-index: 1302;
    top: calc(100% + 0.2rem);
    left: 50%;
    width: 0.72rem;
    height: 0.72rem;
    border-top: 1px solid var(--color-warning-text, #92400e);
    border-left: 1px solid var(--color-warning-text, #92400e);
    background: var(--color-warning-bg, #fef3c7);
    transform: translateX(-50%) rotate(45deg);
}

.search-box.is-recipient-guide::after {
    content: "Enter the recipient here";
    position: absolute;
    z-index: 1301;
    top: calc(100% + 0.52rem);
    left: 50%;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    border: 2px solid var(--color-warning-text, #92400e);
    border-radius: var(--radius-md, 0.56rem);
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-text, #92400e);
    padding: 0.7rem 1rem;
    box-shadow: var(--shadow-lg);
    font-size: var(--ui-type-body, 1rem);
    font-weight: 950;
    text-align: center;
    transform: translateX(-50%);
}

@keyframes communication-recipient-guide {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(0.16rem); }
}

@media (prefers-reduced-motion: reduce) {
    .search-box.is-recipient-guide,
    .workspace-selector-trigger.is-workspace-guide {
        animation: none;
    }
}

.search-box[hidden] {
    display: none !important;
}

.search-box.is-disabled {
    border-color: color-mix(in srgb, var(--color-border-muted) 82%, transparent);
    background: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
    box-shadow: none;
    opacity: 0.72;
}

.search-box.is-disabled input:disabled {
    cursor: default;
    color: var(--color-text-muted);
    -webkit-text-fill-color: var(--color-text-muted);
    opacity: 1;
}

.communication-focus {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.52rem;
    width: 100%;
    max-width: 300px;
    height: 2.7rem;
    min-height: 2.7rem;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 97%, transparent);
    color: var(--color-text);
    padding: 0.14rem 0.24rem;
    box-shadow: var(--shadow-sm), var(--shadow-md);
}

.communication-focus[hidden] {
    display: none !important;
}

.communication-focus-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid var(--communication-direction-incoming-border);
    border-radius: 0.52rem;
    background: var(--communication-direction-incoming-bg);
    color: var(--communication-direction-incoming-text);
}

.communication-focus.is-outgoing .communication-focus-icon {
    border-color: var(--communication-direction-outgoing-border);
    background: var(--communication-direction-outgoing-bg);
    color: var(--communication-direction-outgoing-text);
}

.communication-focus.is-contact .communication-focus-icon,
.communication-focus.is-target .communication-focus-icon {
    border-color: color-mix(in srgb, var(--color-feature-contacts) 32%, var(--color-border));
    background: var(--color-feature-contacts-soft);
    color: var(--color-feature-contacts);
}

.communication-focus.is-message .communication-focus-icon {
    border-color: color-mix(in srgb, var(--color-feature-texts) 32%, var(--color-border));
    background: var(--color-feature-texts-soft);
    color: var(--color-feature-texts);
}

.communication-focus-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
    text-align: left;
}

.communication-focus-copy strong,
.communication-focus-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.communication-focus-copy strong {
    color: var(--color-text);
    font-size: 0.84rem;
    font-weight: 850;
}

.communication-focus-copy small {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.communication-focus-clear {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.communication-focus-clear:hover,
.communication-focus-clear:focus-visible {
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    outline: none;
}

.activity-metrics-date-nav-host {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.search-user-host {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.search-user-meta {
    display: grid;
    justify-items: end;
    gap: 0.08rem;
    min-width: 7.25rem;
    max-width: 10.5rem;
    border: 1px solid rgba(217, 227, 239, 0.82);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.84);
    color: #253044;
    padding: 0.34rem 0.48rem;
    line-height: 1.05;
    text-align: right;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

#search_user_first,
#search_account_name,
.search-user-link {
    font: inherit;
    color: inherit;
}

#search_user_first {
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#search_account_name {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-user-link {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

.activity-metrics-date-nav {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.34rem;
}

.activity-metrics-date-nav-button {
    border: 1px solid rgba(146, 174, 214, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.92) 100%);
    color: #35537e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.08rem;
    min-height: 2.08rem;
    border-radius: 0.54rem;
    padding: 0;
    cursor: pointer;
}

.activity-metrics-date-nav-button .material-symbols-rounded {
    font-size: 1.25rem;
}

.activity-metrics-date-nav-button:disabled {
    cursor: default;
    opacity: 0.38;
}

.activity-metrics-date-nav-button.activity-metrics-reset-active {
    border-color: #d97706;
    background: #fef3c7;
    color: #78350f;
}

.activity-metrics-date-nav-label {
    border: 0;
    background: transparent;
    color: inherit;
    min-width: 75px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.1;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.activity-metrics-date-nav-label-day,
.activity-metrics-date-nav-label-date {
    display: block;
}

.activity-metrics-date-nav-label-date {
    margin-top: 0.12rem;
}

.search {
    flex: 1;
    border: none;
    outline: none;
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 750;
    padding: 0.35rem 0.42rem;
    text-align: center;
}

@media (max-width: 800px) {
    .activity-metrics-date-nav-host {
        display: none;
    }

    .search-user-host {
        display: none;
    }
}

@media (max-width: 499px) {
    /* The keyboard submits search; leave room for the value and its clear action. */
    .search-box > #btn_search,
    .search-box > #btn_clear:disabled {
        display: none;
    }

    .search-bar {
        gap: 0.36rem;
        padding: 0.48rem 0.5rem;
    }

    .header-control-group {
        gap: 0.34rem;
    }

    .chrome-icon-button,
    .search-box > button {
        width: 2.12rem;
        min-width: 2.12rem;
        height: 2.12rem;
        border-radius: 0.5rem;
    }

    .search-box {
        height: 2.35rem;
        min-height: 2.35rem;
    }

    .communication-focus {
        height: 2.35rem;
        min-height: 2.35rem;
        gap: 0.38rem;
        padding: 0.18rem 0.22rem 0.18rem 0.34rem;
    }

    .communication-focus-icon,
    .communication-focus-clear {
        width: 1.85rem;
        height: 1.85rem;
    }

    .communication-focus-copy strong {
        font-size: 0.76rem;
    }

    .communication-focus-copy small {
        font-size: 0.58rem;
    }

    #btn_ringer_settings {
        display: none;
    }
}



#search_filters {
    padding: 0;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
}

#search_filters:has([data-search-filter-drawer][data-open="true"]) {
    display: flex;
}

#search_filters_form {
    max-height: min(75vh, 46rem);
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}

/* The context rail owns date selection at every viewport size. Keep its
 * hidden bridge control, without repeating it above the search filter tabs. */
#search_filters_form > .group.date { display: none; }

#search_filter_drawer_host,
.search-filter-drawer-body {
    display: flex;
    flex-direction: column;
    gap: var(--workspace-popover-section-gap);
    width: 100%;
}

.search-filter-drawer-toolbar {
    position: sticky;
    z-index: 4;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--workspace-popover-toolbar-gap);
    background: color-mix(in srgb, var(--color-surface-elevated) 94%, transparent);
}

.search-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.24rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--workspace-popover-control-radius);
    background: color-mix(in srgb, var(--color-surface-elevated) 94%, transparent);
    padding: 0.2rem;
    box-shadow: var(--shadow-sm);
}

.search-filter-clear-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--workspace-popover-control-radius);
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    padding: 0.36rem 0.62rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.search-filter-clear-all:hover,
.search-filter-clear-all:focus-visible {
    border-color: color-mix(in srgb, var(--color-danger-text) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-text) 8%, var(--color-surface-elevated));
    color: var(--color-danger-text);
    outline: none;
}

.search-filter-clear-all:disabled {
    cursor: wait;
    opacity: 0.58;
}

.search-filter-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: var(--ui-control-min-height);
    border: 1px solid transparent;
    border-radius: 0.48rem;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.3rem 0.42rem;
    font-size: var(--ui-type-control);
    font-weight: 850;
    cursor: pointer;
}

.search-filter-tab:hover,
.search-filter-tab:focus-visible {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
    outline: none;
}

.search-filter-tab.is-active {
    border-color: color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.search-filter-tab .gmi {
    flex: 0 0 auto;
    font-size: 0.9rem;
}

.search-filter-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.18rem;
    min-height: 1.18rem;
    border-radius: 999px;
    background: var(--color-brand-active);
    color: var(--color-inverse-text);
    padding-inline: 0.26rem;
    font-size: var(--ui-type-meta);
}

#search_filters .search-filter-panel {
    box-sizing: border-box;
    display: grid;
    gap: var(--workspace-popover-section-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
}

#search_filters .search-filter-panel[style*="display: none"] {
    display: none !important;
}

.search-filter-empty {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 650;
}

#search_filters #apply_filters {
    position: sticky;
    z-index: 3;
    bottom: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    box-shadow:
        0 -0.55rem 1rem rgba(255, 255, 255, 0.94),
        0 0.2rem 0.5rem rgba(15, 23, 42, 0.14);
}

.search-filter-drawer-footer {
    position: sticky;
    z-index: 3;
    bottom: calc(var(--workspace-popover-padding) * -1);
    margin: 0 calc(var(--workspace-popover-padding) * -1) calc(var(--workspace-popover-padding) * -1);
    padding: var(--workspace-popover-toolbar-gap) var(--workspace-popover-padding) var(--workspace-popover-padding);
    border-top: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--workspace-popover-background) 94%, transparent);
    backdrop-filter: blur(10px);
}

#search_filters .search-filter-drawer-footer #apply_filters {
    position: static;
    width: 100%;
    margin: 0;
    box-shadow: var(--theme-emphasis-shadow);
}

#search_filters_form legend {
    cursor:pointer;
}

#search_filters .group {
    display: block;
    width: 100%;
}

#search_filters .group[hidden] { display: none; }

#search_filters .content {
    line-height: 1;
    width: 100%;
}

#search_filters .search-filter-group {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}

#search_filters .search-filter-group-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.38rem;
    min-height: var(--ui-control-min-height);
    padding: 0.38rem 0.5rem;
    background: color-mix(in srgb, var(--color-brand-soft) 42%, var(--color-surface-muted));
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1.1;
    cursor: pointer;
    list-style: none;
}

#search_filters .search-filter-group-summary:has(.search-filter-group-selector),
#search_filters .search-filter-group-summary:has(.search-filter-group-selector-spacer) {
    grid-template-columns: 1.2rem minmax(0, 1fr) auto auto;
}

#search_filters .search-filter-group-summary::-webkit-details-marker {
    display: none;
}

#search_filters .search-filter-group-summary:hover,
#search_filters .search-filter-group-summary:focus-visible {
    background: color-mix(in srgb, var(--color-brand-soft) 72%, var(--color-surface-muted));
    color: var(--button-hover-text);
    outline: none;
}

#search_filters .search-filter-group-selector {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-brand-active);
    cursor: pointer;
}

#search_filters .search-filter-group-selector .gmi {
    font-size: 1rem;
}

#search_filters .search-filter-group-selector:hover,
#search_filters .search-filter-group-selector:focus-visible {
    color: var(--color-brand);
    outline: none;
}

#search_filters .search-filter-group-selector-spacer {
    width: 1.2rem;
}

#search_filters .search-filter-group-count {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 750;
    white-space: nowrap;
}

#search_filters .search-filter-group-chevron {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 140ms ease;
}

#search_filters .search-filter-group[open] .search-filter-group-chevron {
    transform: rotate(180deg);
}

#search_filters .search-filter-group-content {
    box-sizing: border-box;
    display: grid;
    gap: 0.38rem;
    padding: 0.42rem 0.5rem 0.5rem;
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-elevated);
}

#search_filters .search-filter-group-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem 0.42rem;
}

#search_filters .search-filter-group-options.is-single-column {
    grid-template-columns: minmax(0, 1fr);
}

#search_filters .search-filter-group-options label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.3rem;
    min-width: 0;
    border-radius: 0.38rem;
    padding: 0.28rem 0.32rem;
    background: color-mix(in srgb, var(--color-surface-muted) 54%, transparent);
    font-size: var(--ui-type-control);
    line-height: 1.2;
}

#search_filters .search-filter-group-options label:hover {
    background: var(--color-brand-soft);
}

#search_filters .search-filter-group-options input {
    margin: 0.05rem 0 0;
}

#search_filters #account[hidden] {
    display: none;
}

.search-account-scope {
    position: relative;
}

.search-account-scope[hidden] {
    display: none;
}

.search-account-scope-options {
    display: grid;
    max-height: min(20rem, 50vh);
    overflow-y: auto;
    border: 1px solid #dbe3ee;
    border-radius: 0.45rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.workspace-account-scope.is-account-workspace .search-account-scope-options {
    max-height: min(18rem, 50vh);
}

.search-account-scope-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
    min-height: 2.45rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #e7edf5;
    cursor: pointer;
}

.search-account-scope-option:last-child {
    border-bottom: 0;
}

.search-account-scope-option[hidden] {
    display: none;
}

.search-account-scope-option > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.search-account-scope-option:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.search-account-scope-option.all-scope-option {
    background: #f8fafc;
    font-weight: 800;
}

.search-account-scope-option input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: #245b9e;
}

.search-account-scope-group {
    display: grid;
    border-bottom: 1px solid #e7edf5;
}

.search-account-scope-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.search-account-scope-account-row > .search-account-scope-option {
    border-bottom: 0;
}

.search-account-scope-selection-count {
    display: block;
    min-width: 0;
    padding: 0 0.45rem 0.4rem 2.15rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-account-scope-selection-count[hidden] {
    display: none;
}

.search-location-scope-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    margin-right: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.search-location-scope-toggle:hover,
.search-location-scope-toggle:focus-visible {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.search-location-scope-toggle .gmi {
    font-size: 1rem;
    transition: transform 140ms ease;
}

.search-location-scope-toggle.is-expanded .gmi {
    transform: rotate(180deg);
}

.search-account-scope-option > span {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.search-account-scope-option strong,
.search-account-scope-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-account-scope-option small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 650;
}

.search-location-scope {
    border-top: 1px dashed var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-elevated) 90%, var(--color-brand-subtle));
}

.search-location-scope[hidden] {
    display: none;
}

.search-location-scope-option {
    min-height: 2.15rem;
    padding-left: 1.45rem;
    border-bottom-style: dashed;
}

.search-location-scope-option:last-child {
    border-bottom: 0;
}

.search-location-scope-option.account-workspace-location-option {
    padding-left: 0.6rem;
}

.workspace-location-search,
.workspace-account-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    padding: 0.46rem 0.52rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
}

.workspace-location-search .gmi,
.workspace-account-search .gmi {
    font-size: 1rem;
}

.workspace-location-search input,
.workspace-account-search input {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.32rem 0.48rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.38rem;
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.workspace-location-search input:focus,
.workspace-account-search input:focus {
    border-color: var(--color-brand-active);
    outline: 2px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.workspace-organization-row {
    background: var(--color-surface-elevated);
    border-bottom: 1px solid var(--color-border-muted);
}

.workspace-organization-row .search-account-scope-option > span {
    display: grid;
    min-width: 0;
    overflow-wrap: anywhere;
}

.workspace-organization-row small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
}

.workspace-organization-accounts {
    margin-left: .75rem;
    border-left: 1px solid var(--color-border-muted);
}

.workspace-account-scope-empty {
    padding: 0.8rem 0.7rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 700;
    text-wrap: balance;
    text-align: center;
}

.search-account-scope-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.search-account-scope-actions button {
    min-height: 2.3rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #b7c6da;
    border-radius: 0.42rem;
    background: #fff;
    color: #253044;
    font-weight: 700;
}

.search-account-scope-actions [data-search-account-scope-apply] {
    border-color: #245b9e;
    background: #245b9e;
    color: #fff;
}

.search-account-scope-actions button[hidden] {
    display: none;
}

#search_filters .group > .label {
    font-weight: bold;
    font-size: 1.5rem;
    
    cursor: pointer;
    font-size: 1.25rem;
}

#search_filters label {
    white-space: nowrap;
    overflow: hidden;
}

/* #search_filters fieldset > .group > .label {
    cursor: pointer;
    font-size: 1.25rem;
} */

input.dp__input {
    padding-left: 2rem;
}

.search-date-range-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid #93b4df;
    border-radius: 0.45rem;
    background: #eef5ff;
    color: #17365f;
    padding: 0.42rem 0.55rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.search-date-range-trigger > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-date-range-trigger:focus-visible {
    outline: 2px solid #245b9e;
    outline-offset: 2px;
}


#search_filters .agents .content,
#search_filters .numbers .content,
#search_filters .locations .content,
#search_filters .status .content,
#search_filters .queues .content,
#search_filters .type .content,
#search_filters .tones .content,
#search_filters .cqi .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}


#search_filters .direction .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}


#search_filters .tones .label {
    font-size: 1rem;    
}

#search_filters .analysis .search-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

#search_filters .analysis .search-option label {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    white-space: normal;
}

#search_filters .tone-input {
    box-sizing: border-box;
    width: 100%;
}


.dp__input {
    padding-left: 2rem !important;
}

@media (min-width: 726px) {
    #search_filters_form {
        max-width: 46rem;
    }


    #search_filters .search-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 1000px) {
    #search_filters .search-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 725px) {
    #search_filters_form {
        max-height: min(76dvh, 42rem);
    }

    .search-filter-drawer-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-filter-clear-all {
        justify-self: end;
        min-height: 2rem;
    }

    #search_filters .search-filter-group-options {
        grid-template-columns: minmax(0, 1fr);
    }

}

#search_filters .search-filter-group-options label {
    overflow: visible;
    white-space: normal;
}



#search_results {
    box-shadow: var(--shadow-md);
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border-strong);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: calc(100% + 0.18rem);
    margin: 0 auto;
    left: 0;
    right: 0;
    max-width: 300px;
    overflow: hidden;
    border-radius: 0.62rem;
    z-index: 8;
}

#search_results[hidden] {
    display: none !important;
}

.result-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    cursor: pointer;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-top: 1px dashed var(--color-neutral-border);
    gap: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
}


.result-item .result-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.result-item .result-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.result-account-line {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-bottom: 0.2rem;
}

.result-item .result-name {
    color: var(--color-text);
    font-size: 1.1rem;
    white-space: nowrap;
    overflow-x: hidden;
    max-width: 80%;
    text-overflow: ellipsis;
    min-width: 0;
}

.search-suggestion-empty {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.78rem;
    color: var(--color-text-muted);
    text-align: left;
}

.search-suggestion-empty > .gmi {
    flex: 0 0 auto;
    color: var(--color-brand-active);
    font-size: 1.35rem;
}

.search-suggestion-empty > span:last-child {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.search-suggestion-empty strong {
    color: var(--color-text);
    font-size: 0.82rem;
}

.search-suggestion-empty small {
    font-size: 0.68rem;
    line-height: 1.35;
}

.result-item .result-more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.result-account {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 8.5rem;
    gap: 0.18rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border-muted));
    border-radius: 999px;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    padding: 0.12rem 0.34rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-account .gmi {
    flex: 0 0 auto;
    font-size: 0.72rem;
}

.result-carrier {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.result-number {
    flex: 0 0 auto;
    color: var(--color-text);
    font-weight: bold;
    letter-spacing: 1px;
}
.result-item:hover {
    background-color: var(--color-brand-soft);
    color: var(--color-text);
}

.result-item:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--input-focus-ring);
    outline-offset: -3px;
}

.result-item mark {
    background: #fff7b2;
    font-weight: 800;
    font-style: normal;
}



.contact {
    --comm-accent: var(--color-feature-contacts);
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 3.55rem;
    padding: 0.54rem 0.68rem 0.56rem 0.82rem;
    border: 1px solid #d9e3ef;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-feature-contacts-soft) 100%);
    box-shadow: var(--shadow-card);
}

.contact-row-entity-icon {
    display: inline-grid;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid var(--color-feature-contacts-border);
    border-radius: 0.65rem;
    background: var(--color-feature-contacts-soft);
    color: var(--color-feature-contacts);
}

.contact-row-entity-icon > .gmi:first-child {
    font-size: 1.15rem;
}

.contact-row-main {
    display: grid;
    grid-template-columns: minmax(8.8rem, 1.05fr) minmax(7.4rem, 0.95fr) minmax(7.6rem, auto);
    align-items: center;
    gap: 0.34rem 0.52rem;
    min-width: 0;
}

.contact-identity,
.contact-channel-stack,
.contact-activity-summary {
    min-width: 0;
}

.contact-identity,
.contact-channel-stack,
.contact-activity-summary {
    display: grid;
    align-content: center;
    gap: 0.22rem;
}

.contact-account-line,
.contact-name-line,
.contact-channel-line,
.contact-name-badges {
    display: flex;
    align-items: center;
    min-width: 0;
}

.contact-account-line,
.contact-name-line,
.contact-channel-line {
    justify-content: flex-start;
}

.contact-name-line {
    gap: 0.28rem;
    min-height: 1.15rem;
}

.contact-name-badges {
    flex: 0 0 auto;
    gap: 0.2rem;
}

.contact-name-text {
    color: #172033;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact .phone {
    display: block;
    min-width: 0;
    color: #344054;
    font-size: 0.8rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact .email {
    display: block;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact .phone.missing,
.contact .email.missing {
    color: #98a2b3;
    font-style: italic;
    font-weight: 750;
}

.contact-activity-summary {
    justify-self: end;
}

.contact-activity-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.contact-data-badge,
.contact-account-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.22rem;
    border: 1px solid #e5eaf1;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5565;
    padding: 0.12rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.contact-activity-pills .contact-data-badge {
    gap: 0.25rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.76rem;
}

.contact-activity-pills .contact-data-badge .gmi {
    font-size: 0.92rem;
}

.contact-account-label.comm-account-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-caption);
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: normal;
}

.contact-data-badge.calls {
    border-color: var(--color-feature-calls-border);
    background: #eff6ff;
    color: var(--color-feature-calls);
}

.contact-data-badge.texts {
    border-color: var(--color-feature-texts-border);
    background: var(--color-feature-texts-soft);
    color: var(--color-feature-texts);
}

.contact-data-badge.vip {
    border-color: #facc15;
    background: #fef9c3;
    color: #854d0e;
}

.contact-account-badge {
    max-width: min(100%, 14rem);
    width: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-start;
}

.contact-last-activity {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
}

.contact .actions {
    display: flex;
    gap: 0.32rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: max-content;
}

.contact-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 0.42rem;
    background: rgba(255, 255, 255, 0.82);
    color: #0f766e;
    padding: 0;
}

.contact-action-button:hover,
.contact-action-button:focus-visible {
    border-color: var(--color-feature-contacts-border);
    background: #ffffff;
    color: var(--color-feature-contacts);
}

.contact-action-button .gmi {
    font-size: 1.08rem;
    line-height: 1;
}

.contact-target-label {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-target-value {
    color: var(--color-text);
}

.contact.contact-live-update {
    animation: contact-live-update 5s ease-out;
}

section.conversation {
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.conversation-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    width: 100%;
}

.conversation-profile-panel,
.conversation-timeline-panel,
.conversation-empty-state {
    border: 1px solid #d9e3ef;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-feature-contacts-soft) 100%);
    box-shadow: var(--shadow-card);
}

.conversation-profile-panel {
    position: sticky;
    top: 0.85rem;
    display: grid;
    gap: 0.7rem;
    padding: 0.7rem;
}

.conversation-profile-account-row {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.conversation-profile-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.conversation-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2rem;
    border: 1px solid #e5eaf1;
    border-radius: 0.42rem;
    background: #ffffff;
    color: #344054;
    padding: 0.32rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 850;
    white-space: nowrap;
}

.conversation-back-button .gmi {
    font-size: 1rem;
    line-height: 1;
}

.conversation-profile-title-block {
    min-width: 0;
}

.conversation-profile-name {
    color: #172033;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-profile-meta,
.conversation-profile-email {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.conversation-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.conversation-profile-target,
.conversation-profile-notes {
    border: 1px solid #e5eaf1;
    border-radius: 0.42rem;
    background: #f8fafc;
    color: #344054;
    padding: 0.5rem 0.58rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.35;
}

.conversation-profile-target {
    display: flex;
    flex-wrap: wrap;
    gap: 0.26rem;
}

.conversation-profile-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.34rem;
}

.conversation-control-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    min-height: 2.15rem;
    border: 1px solid #e5eaf1;
    border-radius: 0.42rem;
    background: #ffffff;
    color: #344054;
    padding: 0.4rem 0.58rem;
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.conversation-control-button .gmi {
    font-size: 1rem;
    line-height: 1;
}

.conversation-control-button.call {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.conversation-control-button.sms {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.conversation-control-button.danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.conversation-timeline-panel {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.7rem;
}

.conversation-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border-bottom: 1px solid #e5eaf1;
    padding-bottom: 0.62rem;
}

.conversation-timeline-title {
    color: #172033;
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1.2;
}

.conversation-timeline-subtitle {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.25;
}

.conversation-activity-timeline {
    display: grid;
    gap: 0.58rem;
    min-width: 0;
}

.conversation-date-divider {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.conversation-date-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5eaf1;
}

.conversation-activity-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.conversation-activity-item.incoming {
    align-items: flex-start;
}

.conversation-activity-item.outgoing {
    align-items: flex-end;
}

.conversation-activity-item .phonecall,
.conversation-activity-item .txtmsg {
    width: min(483px, calc(100% - 1rem));
    max-width: 483px;
    margin: 0;
}

.conversation-activity-item .phonecall.has-side-details {
    width: min(100%, var(--app-content-width));
    max-width: var(--app-content-width);
}

.conversation-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.34rem;
    padding: 0.8rem;
}

.conversation-empty-title {
    color: #172033;
    font-size: 0.92rem;
    font-weight: 950;
}

.conversation-empty-copy {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

@keyframes contact-live-update {
    0% {
        border-color: #eab308;
        box-shadow: 0 0 0 0.25rem rgba(234, 179, 8, 0.35), var(--shadow-lg);
    }

    100% {
        border-color: var(--color-neutral-border);
        box-shadow: var(--shadow-lg);
    }
}


.workspace-contact-editor-layer {
    position: fixed;
    z-index: var(--z-primary-drawer, 1240);
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(42rem, calc(100vw - 1rem));
    animation: active-call-detail-in 180ms ease-out;
}

.workspace-contact-editor-layer-body .contact-form-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 620px) {
    .workspace-contact-editor-layer {
        width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-contact-editor-layer {
        animation: none;
    }
}

.contact-form-shell {
    width: min(100%, 36rem);
    margin: 0 auto;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.55rem;
    background: var(--surface-panel-bg);
    box-shadow: var(--shadow-card);
    padding: 0.85rem;
}

#form_contact_crud {
    display: grid;
    gap: 0.68rem;
    width: 100%;
}

#form_contact_crud .form-group {
    min-width: 0;
}

#form_contact_crud .form-group:not(:last-child) {
    margin-bottom: 0;
}

#form_contact_crud .form-group label {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
}

#form_contact_crud input,
#form_contact_crud select,
#form_contact_crud textarea {
    border-color: var(--color-border-muted);
    background: var(--surface-panel-control-bg);
    color: var(--color-text);
    font-size: var(--ui-type-control);
}

#form_contact_crud textarea {
    min-height: 5.75rem;
}

#form_contact_crud .btn_contact_field_clear {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.35rem;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

#form_contact_crud .btn_contact_field_clear .gmi {
    font-size: 0.95rem;
    line-height: 1;
}

.contact-form-actions {
    align-items: stretch;
}

.contact-form-actions .ui-button {
    flex: 1 1 0;
}

.contact-target-editor {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}

.contact-target-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.55rem;
    width: 100%;
}

.contact-target-control {
    min-width: 0;
}

.contact-target-empty {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

/* @media (max-width: 650px) { */

@media (max-width: 700px) {
    .contact {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 0;
        padding: 0.42rem 0.48rem 0.44rem 0.68rem;
    }

    .contact-row-main {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) auto;
        gap: 0.18rem 0.42rem;
    }

    .contact-identity {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .contact-channel-stack {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .contact-activity-summary {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }

    .contact-name-line {
        flex-wrap: wrap;
        gap: 0.18rem;
    }

    .contact .actions {
        gap: 0.24rem;
    }

    .contact-action-button {
        width: 1.72rem;
        min-width: 1.72rem;
        height: 1.72rem;
    }

    .contact-target-row {
        grid-template-columns: 1fr;
    }

    .conversation-shell {
        grid-template-columns: 1fr;
    }

    .conversation-profile-panel {
        position: static;
    }

    .conversation-profile-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .conversation-control-button {
        justify-content: center;
    }

    .contact-form-shell {
        padding: 0.65rem;
    }

    .contact-form-actions {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .contact-row-main {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .contact-identity {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
    }

    .contact-channel-stack {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .contact-activity-summary {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }
}

@media (max-width: 430px) {
    .conversation-profile-controls {
        grid-template-columns: 1fr;
    }
}

.focused-contact-list { container: focused-contacts / inline-size; }

/* Keep focused Contacts striping isolated so it can be removed independently. */
.focused-contact-list .contact.zebra:nth-child(odd of .contact) {
    background: var(--table-row-odd);
}

.focused-contact-list .contact.zebra:nth-child(even of .contact) {
    background: var(--table-row-even);
}

.focused-contact-list .contact.zebra:hover,
.focused-contact-list .contact.zebra:focus-within {
    background: var(--table-row-hover);
}

/* Pair counts with the timestamp instead of stacking three metadata rows. */
.contact-activity-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.contact-last-activity { white-space: normal; max-width: 11rem; }
@media (min-width: 998px) {
    .contact-row-main { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) auto; }
}
@container focused-contacts (max-width: 48rem) {
    .contact-row-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .contact-activity-pills { gap: .2rem; }
    .contact-activity-pills .contact-data-badge { padding-inline: .3rem; gap: .15rem; }
    .contact-identity { grid-column: 1; grid-row: 1; }
    .contact-channel-stack { grid-column: 2; grid-row: 1; }
    .contact-activity-summary { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; grid-template-columns: auto minmax(0, 1fr); }
    .contact-last-activity { justify-self: end; max-width: none; }
    .contact-activity-summary .ui-timestamp time { justify-content: flex-end; }
}
@container focused-contacts (max-width: 27rem) {
    .contact { row-gap: .18rem; }
    .contact-row-main { display: contents; }
    .contact > .contact-row-entity-icon { grid-column: 1; grid-row: 1; align-self: start; }
    .contact > .actions { grid-column: 3; grid-row: 1; align-self: start; }
    .contact-identity, .contact-channel-stack { gap: .1rem; }
    .contact-identity { grid-column: 2; grid-row: 1; }
    .contact-channel-stack { grid-column: 2 / -1; grid-row: 2; }
    .contact-activity-summary { grid-column: 1 / -1; grid-row: 3; }
}



.txtmsg {
    width: 60%;
    text-align: left;
}

.txtmsg.incoming {
    align-self: flex-start;
}

.txtmsg.outgoing {
    align-self: flex-end;
}

.txtmsg .msgbtm.incoming {
    margin: 0 4rem 0 0;
}

.txtmsg .msgbtm.outgoing {
    margin: 0 0 0 4rem;
}

.txtmsg .msgtop {
    gap: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.25rem 1rem;
    /* font-size: 0.9rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-lg);
    background-color: var(--color-inverse);
    color: var(--color-inverse-text);
}

.txtmsg .msgtop>div {
    /* flex:1; */
}

.txtmsg .msgbtm {
    border-left: 1px solid var(--color-neutral-border);
    border-right: 1px solid var(--color-neutral-border);
    border-bottom: 1px solid var(--color-neutral-border);
    box-shadow: var(--shadow-lg);
}

.txtmsg .msgbody {
    padding: 1rem;
    background-color: #fff;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.txtmsg .after {
    /* font-size: 0.75rem; */
    padding: 0.5rem;
    text-align: right;
    background-color: var(--color-brand);
    color: var(--color-brand-text);
}

.txtmsg .msgtop .msgfrom {
    font-weight: bold;
}

.txtmsg .msgtop .msgdate {
    text-align: right;
}

.txtmsg .msgtop .msgdate .msginfo {
    /* flex-wrap: nowrap; */
    /* display: flex; */
    align-items: center;
    /* justify-content: flex-end; */
    /* gap: 0.5rem; */
}

.txtmsg .msgtop .msgdate .msginfo .msgstatus {
    font-style: italic;
    text-wrap: nowrap;
    margin-right: 0.25rem;
}

.txtmsg .msgtop .msgdate .msginfo .msgtime {
    font-weight: bold;
}


.txtmsg .msgbtm .msgfiles {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding: 1rem;
}


.txtmsg .msgbtm .msgfiles img,
video,
audio {
    /* flex: 1 1 calc(33.333% - 10px);  */
    cursor: pointer;
    max-width: 300px;
    max-height: 225px;
    height: auto;
    /* object-fit: cover; */
    border-radius: 0.5rem;
}

.txtmsg .msgbtm .msgfiles img:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}



.dspname {
    font-weight: bold
}

.dspnumber {
    font-weight: normal;
    font-size: 0.9rem;
    /* font-style: italic; */
}

.dspdate {
    font-weight: bold;
}




@media (max-width: 700px) {
    .txtmsg {
        width: 100%;
        text-align: left;
    }
}









#text_controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.55rem;
}



#client_microphone {
    width: 100%;
}



.device-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.device-item {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.58rem;
    background: var(--surface-panel-soft-control-bg);
    padding: 0.5rem 0.58rem;
}

.device-item input[type="checkbox"] {
    width: 25px;
    flex-shrink: 0;
}


.device-details {
    font-weight: normal;
    min-width: 0;
    color: var(--color-text);
}

.device-details .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    margin-left: 0.4rem;
}



.phonecell .badge {
    font-weight: bold;
    padding: 0.25rem 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.badge.direction {
    border-radius: 0.25rem;
}

.badge.resolved {
    border-radius: 0.25rem;
}

#call_status_wrapper {
    user-select: none;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 850;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--color-inverse);
    color: var(--color-inverse-text);
}

/*
 * Runtime compatibility bridge only. Telephony code still publishes state to
 * these controls while the Vue call dock consumes the same state. Keep the
 * bridge mounted, but never let legacy ID styles override its hidden state.
 */
#call_status_wrapper[hidden],
#call_status_wrapper[aria-hidden="true"] {
    display: none !important;
}


#call_status_wrapper > div {
    flex: 1;
    height: 100%;
    min-width: 0;
    padding: 0.36rem 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: inherit;
}

#call_status_wrapper > div.alert {
    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

#call_status_wrapper > div:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

#call_status_wrapper button {
    width: 100%;
    min-width: 0;
    gap: 0.34rem;
    color: inherit;
}


#call_status_wrapper .label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#device_status[data-softphone-owner="other"] button {
    cursor: pointer;
}

#device_status[data-softphone-owner="other"] .label {
    text-decoration: underline;
    text-underline-offset: 0.16rem;
}



.phonecall {
    width: 100%;
    /* display: grid;
    grid-template-columns: auto 1fr auto; */
    /* border: 1px solid black; */
    border-radius: 0.5rem;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.phonecall.comm-card.incoming,
.phonecall.comm-card.outgoing,
.phonecall.comm-card.has-side-details {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.phonerow {
    display: contents;
    /* display:flex;
    flex-direction:row; */
}

.phonetop {
    color: var(--color-inverse-text);
    background-color: var(--color-inverse);
    border-radius: 0.5rem 0.5rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
}

.phonebtm {
    border-left: 1px solid var(--color-neutral-border);
    border-right: 1px solid var(--color-neutral-border);
    border-bottom: 1px solid var(--color-neutral-border);
    background-color: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin: 0 0.5rem 0 0.5rem;
}



.phonecell {
    text-align: center;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    overflow: hidden;
}

.phonecell.participants {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 1rem;
}

.phonecell.analysis {
    border-top: 1px solid var(--color-neutral-border);
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: start;
}

.phonecell.analysis .inquiry {
    /* text-wrap: balance; */
    text-align: left;
    color: var(--color-brand);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.phonecell.analysis .resolution {
    /* text-wrap: balance; */
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.phonecell.analysis .analysis-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.75rem;
}

.phonecell.analysis .analysis-text {
    flex: 1 1 auto;
    min-width: 0;
}

.phonecell.analysis .analysis-badges .badge {
    flex: 1 1 0;
    min-width: 8rem;
    text-align: center;
    justify-content: center;
}

.phonecell.analysis .analysis-badges .badge.type,
.phonecell.analysis .analysis-badges .badge.issue,
.phonecell.analysis .analysis-badges .badge.resolved {
    border-radius: 0.5rem;
}

.phonecell.analysis .analysis-badges .badge.type,
.phonecell.analysis .analysis-badges .badge.issue {
    background: #f0f2f5;
    color: #425466;
}

.phonecall .air-call-activity-collapsible[hidden] {
    display: none !important;
}

.phonecell.air-call-activity {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-neutral-border);
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0.35rem 0.75rem;
    text-align: left;
}

.air-call-activity-feed {
    display: grid;
    gap: 0.2rem;
    width: 100%;
}

.air-call-activity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.4rem;
    color: #344054;
    font-size: 0.86rem;
    line-height: 1.38;
    border-left: 0.25rem solid #d0d5dd;
    border-radius: 0.25rem;
    padding: 0.16rem 0.35rem;
    background: #f8fafc;
}

.air-call-activity-line.user {
    border-left-color: #6aa4c8;
    background: #f3f9fd;
}

.air-call-activity-line.agent {
    border-left-color: #7bb47d;
    background: #f4fbf4;
}

.air-call-activity-line.loading {
    border-left-color: #98a2b3;
    background: #f8fafc;
    color: #667085;
}

.air-call-activity-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 0.25rem;
    padding: 0.08rem 0.36rem;
    background: #eff6ff;
    color: #1d4f8f;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.air-call-activity-toggle:hover,
.air-call-activity-toggle:focus {
    border-color: #8bb6f1;
    background: #dbeafe;
    outline: none;
}

.air-call-activity-line.tool.ok {
    border-left-color: #d59b45;
    background: #fff8ed;
}

.air-call-activity-line.api.ok {
    border-left-color: #8d7cc3;
    background: #f7f4ff;
}

.air-call-activity-line.tool.failed,
.air-call-activity-line.api.failed,
.air-call-activity-line.failed {
    border-left-color: #c86a6a;
    background: #fff4f4;
}

.air-call-activity-line.tool,
.air-call-activity-line.api {
    color: #475467;
}

.air-call-activity-meta {
    color: #667085;
    font-weight: 700;
    white-space: nowrap;
}

.air-call-activity-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.air-tool-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 0.25rem;
    padding: 0.08rem 0.35rem;
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.air-tool-event-badge.request {
    color: #92500b;
    background: #fff1d6;
    border-color: #f2c57c;
}

.air-tool-event-badge.result {
    color: #6f4ba6;
    background: #f2eaff;
    border-color: #d4bdf4;
}

.air-tool-event-badge.event {
    color: #475467;
    background: #eef2f6;
    border-color: #d0d5dd;
}

.phonecell.air-order-summary {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-neutral-border);
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.4rem 0.75rem;
    text-align: left;
}

.air-order-summary-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    border-left: 0.3rem solid #8d7cc3;
    border-radius: 0.3rem;
    background: #f7f4ff;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
    line-height: 1.25;
}

.air-order-summary-content.not-found,
.air-order-summary-content.loading {
    border-left-color: #98a2b3;
    background: #f8fafc;
}

.air-order-summary-content.failed {
    border-left-color: #c86a6a;
    background: #fff4f4;
}

.air-order-summary-title {
    color: #475467;
    font-weight: 700;
    white-space: nowrap;
}

.air-order-summary-pill {
    border: 1px solid rgba(102, 112, 133, 0.22);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.72);
    color: #344054;
    padding: 0.12rem 0.35rem;
}

.call-air-activity {
    min-width: 2.1rem;
    justify-content: center;
}

.call-air-activity-count {
    font-size: 0.75rem;
    line-height: 1;
}

.air-activity-modal {
    display: grid;
    gap: 1rem;
    max-height: min(78vh, 52rem);
    overflow: auto;
    text-align: left;
}

.air-activity-section {
    display: grid;
    gap: 0.5rem;
}

.air-activity-section h3 {
    margin: 0;
    font-size: 1rem;
}

.air-activity-feed {
    display: grid;
    gap: 0.5rem;
}

.air-activity-row {
    border: 1px solid var(--color-neutral-border);
    border-radius: 0.35rem;
    padding: 0.65rem 0.75rem;
    background: #fff;
}

.air-activity-row.is-expandable {
    cursor: pointer;
}

.air-activity-row.is-expandable:focus {
    outline: 2px solid rgba(141, 124, 195, 0.45);
    outline-offset: 2px;
}

.air-activity-row.is-expandable .air-activity-meta::after {
    content: "View";
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(102, 112, 133, 0.24);
    border-radius: 0.25rem;
    padding: 0.06rem 0.32rem;
    color: #475467;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.air-activity-row.is-expandable[aria-expanded="true"] .air-activity-meta::after {
    content: "Hide";
}

.air-activity-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.45rem;
}

.air-activity-row.transcript.user {
    border-left: 0.35rem solid #6aa4c8;
    background: #f3f9fd;
}

.air-activity-row.transcript.agent {
    border-left: 0.35rem solid #7bb47d;
    background: #f4fbf4;
}

.air-activity-row.tool.ok {
    border-left: 0.35rem solid #d59b45;
    background: #fff8ed;
}

.air-activity-row.api.ok {
    border-left: 0.35rem solid #8d7cc3;
    background: #f7f4ff;
}

.air-activity-row.tool.failed,
.air-activity-row.api.failed {
    border-left: 0.35rem solid #c86a6a;
    background: #fff4f4;
}

.air-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #667085;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.air-activity-text {
    color: #1f2937;
    font-size: 0.9rem;
    line-height: 1.42;
}

.air-activity-detail {
    margin-top: 0.55rem;
}

.air-activity-detail-label {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.air-activity-row pre {
    margin: 0.5rem 0 0;
    padding: 0.65rem;
    max-height: 18rem;
    overflow: auto;
    background: #f7f8fa;
    border-radius: 0.3rem;
    color: #1f2937;
    white-space: pre-wrap;
}

.air-activity-loading,
.air-activity-empty,
.air-activity-error {
    padding: 0.75rem;
    border: 1px solid var(--color-neutral-border);
    border-radius: 0.35rem;
    background: #f7f8fa;
    color: #667085;
}

.air-activity-error {
    border-color: #c86a6a;
    color: #8f2d2d;
    background: #fff4f4;
}

.phonecell.analysis .analysis-badges .badge.type.informationrequest,
.phonecell.analysis .analysis-badges .badge.type.servicequestion,
.phonecell.analysis .analysis-badges .badge.type.callbackrequest,
.phonecell.analysis .analysis-badges .badge.type.pricing,
.phonecell.analysis .analysis-badges .badge.type.scheduling,
.phonecell.analysis .analysis-badges .badge.type.orderstatus,
.phonecell.analysis .analysis-badges .badge.type.orderplacement,
.phonecell.analysis .analysis-badges .badge.type.orderchange,
.phonecell.analysis .analysis-badges .badge.type.billing,
.phonecell.analysis .analysis-badges .badge.type.payment,
.phonecell.analysis .analysis-badges .badge.type.cancellation,
.phonecell.analysis .analysis-badges .badge.type.marketing,
.phonecell.analysis .analysis-badges .badge.type.sales,
.phonecell.analysis .analysis-badges .badge.type.spam,
.phonecell.analysis .analysis-badges .badge.resolved.followuprequired,
.phonecell.analysis .analysis-badges .badge.resolved.partiallyresolved {
    background: #fff3cd;
    color: #7a5f00;
}

.phonecell.analysis .analysis-badges .badge.type.technicalsupport,
.phonecell.analysis .analysis-badges .badge.resolved.resolved,
.phonecell.analysis .analysis-badges .badge.resolved.informationprovided {
    background: #d1fae5;
    color: #065f46;
}

.phonecell.analysis .analysis-badges .badge.type.lostitem,
.phonecell.analysis .analysis-badges .badge.type.damageditem,
.phonecell.analysis .analysis-badges .badge.type.garmentalteration,
.phonecell.analysis .analysis-badges .badge.type.pickupissue,
.phonecell.analysis .analysis-badges .badge.type.deliveryissue,
.phonecell.analysis .analysis-badges .badge.type.kioskissue,
.phonecell.analysis .analysis-badges .badge.type.rushrequest,
.phonecell.analysis .analysis-badges .badge.type.complaint,
.phonecell.analysis .analysis-badges .badge.resolved.unresolved {
    background: #fee2e2;
    color: #991b1b;
}

.phonecell.analysis .performance {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.phonecell.analysis .performance .label {
    font-weight:bold;
}

.phonecell.analysis .performance .pill {
    display: inline-block;
    margin: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: #f0f2f5;
    font-size: 1rem;
}


.kill-party {
    padding: 0.25rem;
}


.phonecell.phn-ctrls-add-or-join {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    flex-wrap: wrap;
}

.phonecell.call_options {
    padding: 0 0.5rem;
    border-radius: 0 0.5rem 0 0;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
}

.participant_reference {
    font-weight: bold;
}

.phonecell.direction {
    flex-direction:column;
}

.phonecell.participant {
    justify-content: center;
    font-size: 1rem;
    gap: 0.5rem;
    text-wrap: balance;
}

.phonecell.voicemail {}

.phonecell.transcription {
    grid-column: span 2;
    justify-content: center;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
    gap: 0.5rem;
}



.call-day {
    min-width: 90px;
    text-align: left;
}

.call-date {
    min-width: 90px;
}


.phonecell.call-day-date {
    border-radius: 0.5rem 0 0 0;
    font-size: 1rem;
    font-weight: bold;
    /* padding: 0.25rem 1rem; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1rem;
}

.phonecell.call-time-status {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 1rem;
    border-right: 1px solid var(--color-neutral-border);
    border-bottom: 1px solid var(--color-neutral-border);
    border-left: 1px solid var(--color-neutral-border);
}

.phonecell.call-time-status .call-time {
    font-size: 1rem;
    min-width: 65px;
}

.phonecell.call-time-status .call-status {
    font-size: 0.9rem;
    font-weight: bold;
    min-width: 75px;
}

.phonecell .name {
    FONT-WEIGHT: bold;
}

.phonecell .number {
    text-align: center;
    font-size: 0.9rem;
    white-space: nowrap;
}

.duration {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.per-leg {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.agent-btn {
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    transition: background 0.2s, border-color 0.2s;
}

.phonebtm,
.phonetop {
    box-shadow: var(--shadow-lg);
}


.phonecall .phonebtm .phonerow.call-parent-row .phonecell:not(.call-time-status) {
    background-color: transparent;
    border-bottom: 1px dashed var(--color-neutral-border);
}

.phonecall .phonebtm .phonerow.hidden-leg[hidden] {
    display: none !important;
}

.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .phonecell {
    background-color: #f6f7f9;
    color: #6b7280;
}

.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .phonecell.call-time-status {
    border-left-color: #d1d5db;
    border-right-color: #d1d5db;
    border-bottom-color: #d1d5db;
}

.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .participant_reference,
.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .participant_activity,
.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .call-status,
.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .call-time,
.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .duration {
    opacity: 0.7;
}

section.phone {
    gap: 1.15rem;
}

.phonecall {
    background: var(--color-surface);
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    box-shadow: var(--elevation-content);
    overflow: hidden;
}

.phonecall:hover {
    border-color: var(--color-border);
    box-shadow: var(--elevation-content-hover);
}

.phonetop {
    color: var(--color-text);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-muted);
    border-radius: 0.5rem 0.5rem 0 0;
    grid-template-columns: minmax(10rem, auto) minmax(0, 1fr) auto auto;
    align-items: stretch;
}

.phonetop.active-call {
    border-bottom-color: var(--color-call-active-border);
}

.phonetop.active-call:hover {
    border-bottom-color: var(--color-call-active-border);
}

.phonetop .account-name {
    display: flex;
    min-width: 0;
    align-items: center;
    color: var(--color-text-muted);
    font-weight: 700;
    padding: 0.75rem 1rem;
    overflow-wrap: anywhere;
}

.phonecell.call-day-date {
    border-radius: 0.5rem 0 0 0;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.75rem 1rem;
}

.call-day,
.call-date {
    min-width: 0;
    text-align: left;
}

.call-day {
    color: var(--color-text);
    font-size: 0.98rem;
    line-height: 1.15;
}

.call-date {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    font-weight: 700;
}

.phonecell.phn-ctrls-add-or-join {
    grid-column: 3 / 4;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.65rem 0.5rem;
}

.phonecell.call_options {
    grid-column: 4 / 5;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem 0.65rem 0.35rem;
}

.phonecell.call_options .gmi:not(.btn-icon),
.phonecell.call_options .badge-direction {
    flex: 0 0 auto;
}

.phonecell .badge {
    min-height: 2rem;
    border-radius: 0.45rem;
    padding: 0.3rem 0.55rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    white-space: nowrap;
}

.phonecell.call_options .badge,
.phonecell.phn-ctrls-add-or-join .badge {
    justify-content: center;
}

.call-handled-toggle,
.call-air-activity,
.call-entity-notes-open,
.entity-feedback-open {
    min-width: 2.15rem;
}

.entity-feedback-open.has-feedback {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.entity-notes-modal {
    display: grid;
    gap: 0.9rem;
    color: #243044;
}

.entity-notes-helper,
.entity-notes-empty,
.entity-notes-error,
.entity-notes-loading {
    margin: 0;
    color: #5b6474;
    font-size: 0.92rem;
}

.entity-notes-summary,
.entity-note-item-head,
.entity-note-row-actions,
.entity-notes-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.entity-notes-summary {
    border: 1px solid #d9e2ef;
    border-radius: 0.5rem;
    background: #f8fafc;
    padding: 0.65rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 800;
    color: #42526a;
}

.entity-notes-list {
    display: grid;
    gap: 0.75rem;
    max-height: 42vh;
    overflow: auto;
    padding-right: 0.15rem;
}

.entity-note-item {
    display: grid;
    gap: 0.55rem;
    border: 1px solid #dbe5f3;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.entity-note-item-head {
    justify-content: space-between;
    border-bottom: 1px solid #e7edf6;
    padding-bottom: 0.42rem;
    color: #596579;
    font-size: 0.78rem;
}

.entity-note-item-head strong {
    color: #1f2a3a;
    font-size: 0.86rem;
}

.entity-note-body {
    margin: 0;
    color: #243044;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.entity-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.entity-note-tags span {
    border: 1px solid #cbd7e6;
    border-radius: 999px;
    background: rgba(238, 245, 255, 0.9);
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.16rem 0.48rem;
}

.entity-note-row-actions {
    align-items: flex-start;
    justify-content: flex-end;
    border-top: 1px solid #eef2f7;
    padding-top: 0.45rem;
}

.entity-note-row-actions .entity-note-tags {
    flex: 1 1 auto;
    min-width: min(12rem, 100%);
}

.entity-note-delete,
.entity-notes-actions button:not(.ui-action-button):not(.ui-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2rem;
    border-radius: 0.42rem;
    padding: 0.34rem 0.68rem;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
}

.entity-note-delete {
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b42318;
}

.entity-note-delete:hover {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
}

.entity-notes-actions {
    justify-content: flex-end;
}

.entity-notes-actions button:not(.ui-action-button):not(.ui-button) {
    border: 1px solid #b7c8e6;
    background: #eef5ff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.entity-notes-actions button:not(.ui-action-button):not(.ui-button):hover {
    border-color: #93b5e8;
    background: #dbeafe;
    color: #1e40af;
}

.entity-note-admin-response {
    display: grid;
    gap: 0.25rem;
    border-left: 0.22rem solid #2f80ed;
    background: #f3f8ff;
    color: #243044;
    padding: 0.55rem 0.65rem;
    white-space: pre-wrap;
}

.entity-note-stars {
    color: #f59e0b;
    letter-spacing: 0;
}



.phonebtm {
    background: var(--color-surface);
    border: 0;
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) minmax(6.75rem, auto);
    margin: 0;
}

.phonebtm,
.phonetop {
    box-shadow: none;
}

.phonecell {
    min-width: 0;
    padding: 0.75rem 1rem;
    overflow: visible;
}

.phonecall .phonebtm .phonerow.call-parent-row .phonecell:not(.call-time-status) {
    background-color: transparent;
    border-bottom: 1px solid var(--color-border-muted);
}

.phonecell.call-time-status {
    --call-leg-status-bg: #f8fafc;
    --call-leg-status-border: #d9e3ef;
    --call-leg-status-text: #475569;
    --call-leg-status-pill-bg: rgba(255, 255, 255, 0.74);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 8rem;
    border: 1px solid var(--call-leg-status-border);
    background: var(--call-leg-status-bg);
    box-shadow: none;
}

.phonecell.call-time-status .call-time {
    min-width: 0;
    color: var(--call-leg-status-text);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
}

.phonecell.call-time-status .call-status {
    min-width: 0;
    max-width: 100%;
    border-radius: 999px;
    background: var(--call-leg-status-pill-bg);
    color: var(--call-leg-status-text);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    padding: 0.18rem 0.45rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

[data-leg-status="queued"],
.phonecell.call-time-status.queued,
[data-leg-status="initiated"],
.phonecell.call-time-status.initiated {
    --call-leg-status-bg: #f1f5f9;
    --call-leg-status-border: #cbd5e1;
    --call-leg-status-text: #475569;
}

[data-leg-status="ringing"],
.phonecell.call-time-status.ringing {
    --call-leg-status-bg: var(--color-call-ringing-soft);
    --call-leg-status-border: var(--color-call-ringing-border);
    --call-leg-status-text: var(--color-call-ringing);
}

[data-leg-status="answered"],
.phonecell.call-time-status.answered,
[data-leg-status="in-progress"],
.phonecell.call-time-status.in-progress {
    --call-leg-status-bg: var(--color-call-active-soft);
    --call-leg-status-border: var(--color-call-active-border);
    --call-leg-status-text: var(--color-call-active);
}

[data-leg-status="completed"],
.phonecell.call-time-status.completed {
    --call-leg-status-bg: var(--communication-tone-completed-bg);
    --call-leg-status-border: var(--communication-tone-completed-border);
    --call-leg-status-text: var(--communication-tone-completed-text);
}

[data-leg-status="no-answer"],
.phonecell.call-time-status.no-answer,
[data-leg-status="busy"],
.phonecell.call-time-status.busy {
    --call-leg-status-bg: var(--color-warning-soft);
    --call-leg-status-border: var(--color-warning-border);
    --call-leg-status-text: var(--color-warning-text);
}

[data-leg-status="canceled"],
.phonecell.call-time-status.canceled,
[data-leg-status="cancelled"],
.phonecell.call-time-status.cancelled {
    --call-leg-status-bg: var(--communication-tone-canceled-bg);
    --call-leg-status-border: var(--communication-tone-canceled-border);
    --call-leg-status-text: var(--communication-tone-canceled-text);
}

[data-leg-status="failed"],
.phonecell.call-time-status.failed {
    --call-leg-status-bg: var(--color-danger-soft);
    --call-leg-status-border: var(--color-danger-border);
    --call-leg-status-text: var(--color-danger-text);
}

.phonecell.participants {
    align-items: center;
    gap: 0.5rem 1rem;
}

.phonecell .name {
    color: var(--color-text);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.phonecell .number {
    color: var(--color-text-subtle);
    font-size: 0.84rem;
}

.fromwho,
.towhom {
    min-width: 0;
}

.badge-direction {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
}

.phonecell.direction {
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.duration {
    color: var(--color-text-muted);
    font-weight: 800;
    gap: 0.55rem;
}

.duration button,
.phonecell.duration button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
}

.phonecell.participant {
    justify-content: flex-start;
    color: var(--color-text);
    text-align: left;
    overflow-wrap: anywhere;
}

.participant_reference {
    color: var(--color-text);
}

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

.phonecell.transcription {
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border-muted);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.phonecell.analysis {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-muted);
    gap: 0.55rem;
    padding: 0;
}

.phonecell.analysis .analysis-badges {
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.phonecell.analysis .analysis-badges .badge {
    flex: 0 1 auto;
    min-width: 0;
}

.phonecell.analysis .inquiry,
.phonecell.analysis .resolution {
    align-items: flex-start;
    color: var(--color-text);
    gap: 0.75rem;
    line-height: 1.35;
}

.phonecell.analysis .inquiry {
    color: var(--color-brand-active);
}

.phonecell.air-call-activity {
    border-top: 1px solid var(--color-border-muted);
    padding: 0;
}

.phonecell.air-order-summary {
    border-top: 1px solid var(--color-border-muted);
    padding: 0.65rem 1rem;
}

.air-order-summary-content,
.air-call-activity-line {
    border-radius: 0.45rem;
}

.phonecall.show-hidden-legs .phonebtm .phonerow.hidden-leg .phonecell {
    background-color: var(--color-surface-muted);
}

@media (max-width: 700px) {

    section.phone {
        gap: 0.85rem;
        padding-inline: 0.65rem;
    }

    .participant_activity {
        font-size: 0.9rem;
    }

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

    .phonetop .account-name {
        grid-column: 1 / 2;
        padding: 0 0.85rem 0.6rem;
    }

    .phonecell.call-day-date {
        grid-column: 1 / 2;
        padding: 0.7rem 0.85rem 0.45rem;
    }

    .phonecell.phn-ctrls-add-or-join {
        grid-column: 1 / 2;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0 0.85rem 0.7rem;
    }

    .phonecell.call_options {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
        align-content: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.55rem 0.65rem;
    }

    .phonebtm {
        grid-template-columns: minmax(5.75rem, auto) minmax(0, 1fr);
    }

    .phonecell.call-time-status .call-time {
        font-size: 0.9rem;
        min-width: 0;
    }

    .phonecell.call-time-status .call-status {
        font-size: 0.68rem;
        min-width: 0;
    }

    .phonecell.call-time-status {
        min-width: 5.75rem;
        padding: 0.55rem 0.65rem;
    }

    .phonecell.participants {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0.65rem;
        padding: 0.65rem;
        text-align: left;
    }

    .phonecell.direction {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.55rem 0.85rem;
    }

    .phonebtm > .phonerow:not(:first-child) .phonecell.duration {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding: 0.45rem 0.85rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .phonecell {
        padding: 0.55rem 0.65rem;
    }

    .phonecell.participant {
        font-size: 0.92rem;
    }

    .phonecell.transcription {
        grid-column: 1 / -1;
        padding: 0.65rem 0.85rem;
    }

    .phonecell.air-order-summary {
        padding: 0.7rem 0.85rem;
    }

    .phonecell.analysis .inquiry,
    .phonecell.analysis .resolution {
        flex-direction: column;
        gap: 0.45rem;
    }

    .air-order-summary-title,
    .air-call-activity-meta {
        white-space: normal;
    }

    #call_status_wrapper > div {
        padding: 0.5rem 0.5rem;
    }
}

/* SaaS call-card readability refresh */
section.phone {
    gap: 0.9rem;
}

.phonecall {
    border: 1px solid #d9e0ea;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: var(--elevation-content);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.phonecall:hover {
    border-color: #b7c4d6;
    box-shadow: var(--elevation-content-hover);
    transform: none;
}

.phonetop {
    display: grid;
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto auto;
    align-items: center;
    border-bottom: 1px solid #e5eaf1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.phonetop > .phonerow {
    display: contents;
}

.phonetop.active-call {
    border-bottom-color: var(--color-call-active-border);
}

.phonecell.call-day-date {
    gap: 0.16rem;
    padding: 0.82rem 1rem;
}

.call-day {
    color: #172033;
    font-size: 0.96rem;
    font-weight: 850;
}

.call-date {
    color: #687385;
    font-size: 0.76rem;
    letter-spacing: 0;
}

.phonetop .account-name {
    align-self: stretch;
    color: #4b5565;
    font-size: 0.86rem;
    font-weight: 800;
}

.phonecell.phn-ctrls-add-or-join,
.phonecell.call_options {
    align-self: stretch;
    align-items: center;
}

.phonecell.call_options {
    border-left: 1px solid #e8edf4;
}

.phonecell.call_options .badge,
.phonecell.phn-ctrls-add-or-join .badge {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

.phonebtm {
    display: flex;
    flex-direction: column;
    border: 0;
    background: #ffffff;
}

.phonebtm > .phonerow {
    display: grid;
    grid-template-columns: minmax(7.75rem, 9rem) minmax(0, 1fr) minmax(7.25rem, auto);
    align-items: stretch;
    border-bottom: 1px solid #edf1f6;
}

.phonebtm > .phonerow:last-child {
    border-bottom: 0;
}

.phonecell {
    min-width: 0;
    min-height: 0;
}

.phonecell.call-time-status {
    min-width: 0;
    border-right: 1px solid #edf1f6;
    border-bottom: 0;
    background: #f8fafc;
}

.phonecell.call-time-status .call-time {
    color: #172033;
    font-size: 0.88rem;
    font-weight: 850;
}

.phonecell.call-time-status .call-status {
    background: rgba(255, 255, 255, 0.82);
    color: var(--bs-alert-color);
    font-size: 0.66rem;
    letter-spacing: 0;
    padding: 0.22rem 0.44rem;
}

.phonecell.participants {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.8rem;
    background: #fbfcfe;
}

.call-party {
    min-width: 0;
    border: 1px solid #e5eaf1;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.68rem 0.75rem;
    text-align: left;
}

.call-party-label {
    color: #7a8596;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    margin-bottom: 0.32rem;
    text-transform: uppercase;
}

.call-party-label.call-location-label {
    color: #4b5563;
    font-size: 0.72rem;
    text-transform: none;
}

.call-party .name {
    color: #172033;
    font-size: 0.98rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.call-party .number {
    color: #5f6b7a;
    font-size: 0.82rem;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
}

.call-flow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-direction {
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.phonecell.direction {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 0;
    background: #fbfcfe;
}

.duration {
    width: 100%;
    justify-content: flex-end;
    gap: 0.46rem;
    color: #172033;
}

.call-duration-label {
    color: #7a8596;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.phonecell.participant {
    align-items: center;
    justify-content: flex-start;
    color: #253044;
    line-height: 1.35;
}

.call-leg-message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.participant_reference {
    color: #172033;
    font-weight: 850;
}

.participant_activity {
    color: #667085;
}

.phonecell.duration {
    justify-content: flex-end;
    gap: 0.5rem;
    color: #253044;
    font-weight: 800;
}

.phonecell.transcription {
    grid-column: 2 / -1;
    background: #fbfcfe;
    color: #253044;
    border-bottom: 0;
    line-height: 1.4;
}

.phonecell.analysis,
.phonecell.air-order-summary,
.phonecell.air-call-activity {
    grid-column: 1 / -1;
    border-top: 0;
    background: #ffffff;
}

.phonecell.analysis {
    gap: var(--comm-section-inner-gap);
    padding: 0;
}

.phonecell.analysis .analysis-badges {
    justify-content: space-between;
    gap: var(--comm-section-inner-gap);
}

.phonecell.analysis .inquiry,
.phonecell.analysis .resolution {
    background: #f8fafc;
    border: 1px solid #edf1f6;
    border-radius: 0.5rem;
    padding: 0.62rem 0.7rem;
}

.phonecell.air-call-activity {
    padding: 0;
}

.phonecell.air-order-summary {
    padding: 0.72rem 1rem;
}

.air-order-summary-content,
.air-call-activity-line {
    border-radius: 0.5rem;
}

.phonecall.show-hidden-legs .phonebtm > .phonerow.hidden-leg,
.phonecall.show-hidden-legs .call-main-stack > .phonerow.hidden-leg {
    background: #f8fafc;
}

.phonecall.show-hidden-legs .phonebtm > .phonerow.hidden-leg .phonecell,
.phonecall.show-hidden-legs .call-main-stack > .phonerow.hidden-leg .phonecell {
    background: transparent;
}

@media (max-width: 700px) {
    section.phone {
        gap: 0.78rem;
        padding-inline: 0.55rem;
    }

    .phonecall:hover {
        transform: none;
    }

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

    .phonecell.call-day-date {
        padding: 0.75rem 0.85rem 0.45rem;
    }

    .phonecell.call_options {
        grid-row: 1 / 4;
        border-left: 1px solid #edf1f6;
    }

    .phonebtm > .phonerow {
        grid-template-columns: minmax(5.8rem, 6.8rem) minmax(0, 1fr);
    }

    .phonecell.participants {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.65rem;
    }

    .call-party {
        padding: 0.58rem 0.65rem;
    }

    .phonecell.direction {
        grid-column: 1 / -1;
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.56rem 0.75rem;
    }

    .phonecell.direction .duration {
        width: auto;
    }

    .call-duration-label {
        display: none;
    }

    .phonebtm > .phonerow:not(:first-child) .phonecell.duration {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding: 0.5rem 0.75rem;
    }

    .phonecell.transcription {
        grid-column: 2 / -1;
        padding: 0.65rem 0.75rem;
    }

    .phonecell.analysis .inquiry,
    .phonecell.analysis .resolution {
        padding: 0.58rem 0.65rem;
    }
}

/* Direction and order-summary refinements */
section.phone {
    display: flex;
    flex-direction: column;
}

.phonecall.incoming,
.phonecall.outgoing {
    position: relative;
    width: min(100%, 74rem);
}

.phonecall.incoming {
    align-self: flex-start;
    border-left: 1px solid var(--color-border-muted);
}

.phonecall.outgoing {
    align-self: flex-end;
    border-right: 1px solid var(--color-border-muted);
}

.phonecall.incoming .phonetop,
.phonecall.incoming .phonebtm {
    border-left: 0;
}

.phonecall.outgoing .phonetop,
.phonecall.outgoing .phonebtm {
    border-right: 0;
}

.phonecall.incoming .phonetop {
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

.phonecall.outgoing .phonetop {
    background: linear-gradient(180deg, #ffffff 0%, #f5fff8 100%);
}

.call-direction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.9rem;
    min-height: 2.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.34rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.call-direction-badge.incoming {
    border-color: var(--call-inquiry-border);
    background: var(--call-inquiry-bg);
    color: var(--call-inquiry-ink);
}

.call-direction-badge.outgoing {
    border-color: var(--call-resolution-border);
    background: var(--call-resolution-bg);
    color: var(--call-resolution-ink);
}

.call-flow {
    min-width: 6.25rem;
}

.phonecell.direction .mobile {
    flex: 0 0 auto;
}

.phonecell.air-order-summary {
    padding: 0;
}

.air-order-summary-content {
    display: grid;
    grid-template-columns: minmax(8.8rem, auto) minmax(0, 1fr);
    gap: 0.22rem 0.75rem;
    align-items: baseline;
    width: 100%;
    border-left: 0.25rem solid #8d7cc3;
    border-radius: 0;
    background: #fbfcfe;
    padding: 0.72rem 1rem;
    font-size: 0.84rem;
    line-height: 1.3;
}

.air-order-summary-content.not-found,
.air-order-summary-content.loading {
    border-left-color: #98a2b3;
    background: #fbfcfe;
}

.air-order-summary-content.failed {
    border-left-color: #c86a6a;
    background: #fff8f8;
}

.air-order-summary-title {
    grid-row: 1 / span 2;
    color: #172033;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: normal;
}

.air-order-summary-meta {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 800;
}

.air-order-summary-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem 0.85rem;
    min-width: 0;
    padding-left: 0.5rem;
}

.air-order-summary-detail {
    color: #263243;
    font-weight: 750;
}

.air-order-summary-label {
    color: #667085;
    font-weight: 900;
}

@media (max-width: 700px) {
    .phonecall.incoming,
    .phonecall.outgoing {
        align-self: stretch;
        width: 100%;
    }

    .phonecall.incoming {
        border-left-width: 1px;
    }

    .phonecall.incoming .phonetop,
    .phonecall.incoming .phonebtm {
        border-left-width: 0.28rem;
    }

    .phonecall.outgoing {
        border-right-width: 1px;
    }

    .phonecall.outgoing .phonetop,
    .phonecall.outgoing .phonebtm {
        border-right-width: 0.28rem;
    }

    .call-direction-badge {
        min-width: 5.35rem;
        min-height: 1.9rem;
        padding: 0.3rem 0.58rem;
        font-size: 0.68rem;
    }

    .air-order-summary-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.26rem;
        padding: 0.68rem 0.75rem;
    }

    .air-order-summary-title {
        grid-row: auto;
    }
}

/* Conversation-style call card refinements */
.call-clock {
    color: #344054;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.1;
}

.call-state-badges {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: min(100%, 8rem);
}

.call-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 2.15rem;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #f8fafc;
    color: #344054;
    padding: 0.34rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

button.call-state-badge {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

button.call-state-badge:hover,
button.call-state-badge:focus {
    filter: brightness(0.98);
    outline: none;
}

button.call-state-badge:focus-visible {
    outline: 2px solid rgba(47, 128, 237, 0.28);
    outline-offset: 2px;
}

.call-state-badge.handled {
    border-style: solid;
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.18);
}

.call-state-badge-handled {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.12rem 0.34rem;
    color: #166534;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
}

.call-state-badge-handled .gmi {
    font-size: 0.82rem;
    line-height: 1;
}

.call-state-badge.voicemail {
    border-color: #d6bcfa;
    background: #f5f0ff;
    color: #6941c6;
}

.call-state-badge.unanswered {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.call-state-badge.afterhours {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #475569;
}

.call-state-badge.ai-assisted {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.phonecell.phn-ctrls-add-or-join {
    flex-wrap: wrap;
}

.phonecell.call-time-status {
    justify-content: center;
}

.phonecell.call-time-status .call-status {
    text-align: center;
}

.phonecell.call-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    background: #fbfcfe;
    color: #253044;
    line-height: 1.4;
    padding: 0.75rem 1rem;
    text-align: left;
}

.call-note-label {
    flex: 0 0 auto;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.call-note-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    .phonecall.incoming,
    .phonecall.outgoing {
        width: calc(50% - 0.55rem);
        max-width: 46rem;
    }

    .phonecall.incoming {
        margin-right: auto;
    }

    .phonecall.outgoing {
        margin-left: auto;
    }

    .phonecall.incoming .phonecell.participants,
    .phonecall.outgoing .phonecell.participants {
        grid-template-columns: minmax(0, 1fr);
    }

    .phonecall.incoming .phonebtm > .phonerow,
    .phonecall.outgoing .phonebtm > .phonerow {
        grid-template-columns: minmax(5.3rem, 6.4rem) minmax(0, 1fr);
    }

    .phonecall.incoming .phonecell.direction,
    .phonecall.outgoing .phonecell.direction,
    .phonecall.incoming .phonebtm > .phonerow:not(:first-child) .phonecell.duration,
    .phonecall.outgoing .phonebtm > .phonerow:not(:first-child) .phonecell.duration {
        grid-column: 1 / -1;
        align-items: center;
        flex-direction: row;
        justify-content: flex-end;
        padding: 0.5rem 0.8rem;
    }

    .phonecall.incoming .phonecell.direction .duration,
    .phonecall.outgoing .phonecell.direction .duration {
        width: auto;
    }
}

@media (max-width: 700px) {
    .call-state-badges {
        justify-content: flex-start;
    }

    .call-state-badge,
    .call-direction-badge {
        min-height: 1.9rem;
        padding: 0.3rem 0.58rem;
        font-size: 0.68rem;
    }

    .phonecell.call-note {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.65rem 0.75rem;
    }
}

/* Account/header/status cleanup */
.call-account-row {
    border-bottom: 1px solid #e5eaf1;
    border-radius: 0.5rem 0.5rem 0 0;
    background: #f8fafc;
    padding: 0.46rem 0.82rem;
}

.call-account-row .account-name {
    color: #4b5565;
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.call-account-row + .phonetop {
    border-radius: 0;
}

.phonetop {
    grid-template-columns: minmax(7.25rem, auto) minmax(0, 1fr) auto;
}

.phonecell.phn-ctrls-add-or-join {
    grid-column: 2 / 3;
    justify-content: flex-end;
}

.phonecell.call_options {
    grid-column: 3 / 4;
}

.phonebtm > .phonerow {
    grid-template-columns: minmax(5.8rem, auto) minmax(0, 1fr) auto;
}

.phonecell.call-time-status {
    gap: 0.28rem;
}

.phonecell.call-time-status .call-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
}

.call-status-duration {
    color: #4b5565;
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

.call-duration-label {
    display: none !important;
}

.phonecell.duration {
    align-items: center;
    justify-content: flex-end;
    padding-inline: 0.65rem;
}

.phonecell.duration .duration,
.phonecell.direction .duration {
    width: auto;
}

.call-drop-button {
    gap: 0.28rem;
    min-width: auto;
    min-height: 2rem;
    padding-inline: 0.58rem;
}

@media (min-width: 900px) {
    .phonecall.incoming .phonebtm > .phonerow,
    .phonecall.outgoing .phonebtm > .phonerow {
        grid-template-columns: minmax(5.4rem, auto) minmax(0, 1fr) auto;
    }

    .phonecall.incoming .phonecell.direction,
    .phonecall.outgoing .phonecell.direction,
    .phonecall.incoming .phonebtm > .phonerow:not(:first-child) .phonecell.duration,
    .phonecall.outgoing .phonebtm > .phonerow:not(:first-child) .phonecell.duration {
        grid-column: auto;
        justify-content: flex-end;
        padding: 0.55rem 0.65rem;
    }
}

@media (max-width: 700px) {
    .phonetop {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .phonecell.phn-ctrls-add-or-join {
        grid-column: 1 / 2;
    }

    .phonecell.call_options {
        grid-column: 2 / 3;
    }

    .phonebtm > .phonerow {
        grid-template-columns: minmax(5.4rem, auto) minmax(0, 1fr) auto;
    }

    .call-account-row {
        padding: 0.42rem 0.7rem;
    }

    .call-account-row .account-name {
        font-size: 0.72rem;
    }
}

/* Two-section top row and compact summary text */
.phonetop {
    grid-template-columns: minmax(6.8rem, auto) minmax(0, 1fr);
}

.phonecell.call-header-control-panel {
    display: flex;
    gap: 0.4rem;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    padding: 0.68rem 0.75rem;
}

.call-header-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.call-header-action-row .phn-ctrls-add-or-join,
.call-header-action-row .call_options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    min-width: 0;
}

.call-header-action-row .call_options {
    padding: 0;
    border-left: 0;
}

.call-header-action-row .badge,
.call-header-action-row .call-air-activity {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

.call-state-badges {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    min-width: 0;
}

.phonecell.call-time-status {
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.24rem;
    text-align: center;
}

.phonecell.call-time-status .call-status {
    flex: 0 0 auto;
}

.call-status-duration {
    display: block;
    width: 100%;
    text-align: center;
}

.air-order-summary-content {
    display: block;
    border-left-width: 0.25rem;
}

.air-order-summary-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.14rem 0.85rem;
}

.air-order-summary-title,
.air-order-summary-meta {
    display: none;
}

@media (max-width: 700px) {
    .phonetop {
        grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    }

    .phonecell.call-day-date {
        grid-column: 1 / 2;
    }

    .phonecell.call-header-control-panel {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        gap: 0.38rem;
        padding: 0.58rem 0.62rem;
    }

    .call-header-action-row,
    .call-header-action-row .phn-ctrls-add-or-join,
    .call-header-action-row .call_options {
        justify-content: flex-end;
    }

    .call-state-badges {
        justify-content: center;
    }
}

/* Compact status badges and right-aligned header actions */
.phonecell.call-header-control-panel {
    justify-content: flex-end;
}

.call-header-action-row {
    width: 100%;
    justify-content: flex-end;
}

.call-header-action-row .phn-ctrls-add-or-join,
.call-header-action-row .call_options {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.call-state-badges {
    gap: 0.28rem;
    justify-content: center;
}

.call-direction-badge,
.call-state-badge {
    min-width: 0;
    min-height: 1.38rem;
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
    font-size: 0.58rem;
    line-height: 1;
}

@media (max-width: 700px) {
    .call-direction-badge,
    .call-state-badge {
        min-height: 1.32rem;
        padding: 0.14rem 0.36rem;
        font-size: 0.56rem;
    }
}

/* Header summary, parent contact stack, and inline disconnect actions */
.phonecell.call-header-summary-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.36rem;
    padding: 0.62rem 0.75rem;
}

.call-header-status-row,
.call-header-analysis-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.32rem;
    min-width: 0;
}

.call-header-analysis-row {
    min-height: 1.42rem;
}

.call-header-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.38rem;
    border: 1px solid var(--bs-alert-border-color);
    border-radius: 999px;
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    padding: 0.16rem 0.46rem;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.call-header-duration {
    display: inline-flex;
    align-items: center;
    min-height: 1.38rem;
    color: #4b5565;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.call-header-analysis-row .analysis-badges {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.32rem;
    min-width: 0;
}

.call-header-analysis-row .analysis-badges .badge {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 1.38rem;
    border-radius: 999px;
    padding: 0.16rem 0.46rem;
    font-size: 0.58rem;
    line-height: 1;
    white-space: nowrap;
}

.call-header-analysis-row .analysis-badges .badge.type,
.call-header-analysis-row .analysis-badges .badge.issue {
    background: #f0f2f5;
    color: #425466;
}

.call-header-analysis-row .analysis-badges .badge.type.informationrequest,
.call-header-analysis-row .analysis-badges .badge.type.servicequestion,
.call-header-analysis-row .analysis-badges .badge.type.callbackrequest,
.call-header-analysis-row .analysis-badges .badge.type.pricing,
.call-header-analysis-row .analysis-badges .badge.type.scheduling,
.call-header-analysis-row .analysis-badges .badge.type.orderstatus,
.call-header-analysis-row .analysis-badges .badge.type.orderplacement,
.call-header-analysis-row .analysis-badges .badge.type.orderchange,
.call-header-analysis-row .analysis-badges .badge.type.billing,
.call-header-analysis-row .analysis-badges .badge.type.payment,
.call-header-analysis-row .analysis-badges .badge.type.cancellation,
.call-header-analysis-row .analysis-badges .badge.type.marketing,
.call-header-analysis-row .analysis-badges .badge.type.sales,
.call-header-analysis-row .analysis-badges .badge.type.spam,
.call-header-analysis-row .analysis-badges .badge.resolved.followuprequired,
.call-header-analysis-row .analysis-badges .badge.resolved.partiallyresolved {
    background: #fff3cd;
    color: #7a5f00;
}

.call-header-analysis-row .analysis-badges .badge.type.technicalsupport,
.call-header-analysis-row .analysis-badges .badge.resolved.resolved,
.call-header-analysis-row .analysis-badges .badge.resolved.informationprovided {
    background: #d1fae5;
    color: #065f46;
}

.call-header-analysis-row .analysis-badges .badge.type.lostitem,
.call-header-analysis-row .analysis-badges .badge.type.damageditem,
.call-header-analysis-row .analysis-badges .badge.type.garmentalteration,
.call-header-analysis-row .analysis-badges .badge.type.pickupissue,
.call-header-analysis-row .analysis-badges .badge.type.deliveryissue,
.call-header-analysis-row .analysis-badges .badge.type.kioskissue,
.call-header-analysis-row .analysis-badges .badge.type.rushrequest,
.call-header-analysis-row .analysis-badges .badge.type.complaint,
.call-header-analysis-row .analysis-badges .badge.resolved.unresolved {
    background: #fee2e2;
    color: #991b1b;
}

.phonebtm > .phonerow.call-parent-row,
.call-main-stack > .phonerow.call-parent-row,
.phonecall.incoming .phonebtm > .phonerow.call-parent-row,
.phonecall.incoming .call-main-stack > .phonerow.call-parent-row,
.phonecall.outgoing .phonebtm > .phonerow.call-parent-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-parent-row {
    grid-template-columns: minmax(5.6rem, 6.8rem) minmax(0, 1fr);
    gap: 0.36rem;
    padding: 0.72rem 0.48rem;
}

.phonecall .phonebtm .phonerow.call-parent-row .phonecell:not(.call-time-status) {
    border-bottom: 0;
    background: transparent;
    background-color: transparent;
}

.call-parent-row .parent-call-time-status {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: stretch;
    min-width: 0;
    border: 1px solid var(--call-leg-status-border);
    border-radius: 0.5rem;
    background: var(--call-leg-status-bg);
    padding: 0.62rem 0.55rem;
}

.call-parent-row .fromwho {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.call-parent-row .towhom {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.call-parent-row .call-parent-toggle-panel {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.38rem;
    min-width: 0;
    border: 1px solid #e5eaf1;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.44rem;
}

.call-parent-toggle-button {
    width: 100%;
    min-height: 1.9rem;
    justify-content: center;
    border-radius: 0.45rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
}

.call-parent-toggle-button .btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.call-parent-toggle-button.expanded {
    background: #e0f2fe;
    color: #075985;
}

.call-parent-row .call-party,
.phonecell.participant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
}

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

.phonecell.participant .call-leg-message {
    min-width: 0;
}

.phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
.call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
.phonecall.incoming .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
.phonecall.incoming .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
.phonecall.outgoing .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
.phonecall.outgoing .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row) {
    grid-template-columns: minmax(5.6rem, 6.8rem) minmax(0, 1fr);
}

.phonebtm > .phonerow.call-parent-controls-row,
.call-main-stack > .phonerow.call-parent-controls-row,
.phonecall.incoming .phonebtm > .phonerow.call-parent-controls-row,
.phonecall.incoming .call-main-stack > .phonerow.call-parent-controls-row,
.phonecall.outgoing .phonebtm > .phonerow.call-parent-controls-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-parent-controls-row {
    display: flex;
    justify-content: flex-end;
    padding: 0.55rem 0.72rem;
    background: #ffffff;
}

.call-parent-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.42rem;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.call-parent-controls .phn-ctrls-add-or-join,
.call-parent-controls .call_options {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    min-width: 0;
}

.call-parent-controls .call_options {
    border-left: 0;
    padding: 0;
}

.call-parent-controls .badge,
.call-parent-controls .call-air-activity {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

.call-disconnect-button {
    flex: 0 0 auto;
    justify-self: end;
    width: 2.05rem;
    min-width: 2.05rem;
    height: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
    padding: 0;
}

.call-disconnect-button .btn-icon {
    line-height: 1;
}

@media (max-width: 700px) {
    .phonecell.call-header-summary-panel {
        padding: 0.55rem 0.62rem;
    }

    .call-header-status-row,
    .call-header-analysis-row {
        gap: 0.24rem;
    }

    .call-header-analysis-row {
        min-height: 1.24rem;
    }

    .call-header-status-badge,
    .call-header-duration,
    .call-header-analysis-row .analysis-badges .badge {
        min-height: 1.24rem;
        padding: 0.13rem 0.34rem;
        font-size: 0.54rem;
    }

    .phonebtm > .phonerow.call-parent-row,
    .call-main-stack > .phonerow.call-parent-row,
    .phonecall.incoming .phonebtm > .phonerow.call-parent-row,
    .phonecall.incoming .call-main-stack > .phonerow.call-parent-row,
    .phonecall.outgoing .phonebtm > .phonerow.call-parent-row,
    .phonecall.outgoing .call-main-stack > .phonerow.call-parent-row {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.62rem;
    }

    .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.incoming .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.incoming .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.outgoing .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.outgoing .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row) {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .phonebtm > .phonerow.call-parent-row,
    .call-main-stack > .phonerow.call-parent-row,
    .phonecall.incoming .phonebtm > .phonerow.call-parent-row,
    .phonecall.incoming .call-main-stack > .phonerow.call-parent-row,
    .phonecall.outgoing .phonebtm > .phonerow.call-parent-row,
    .phonecall.outgoing .call-main-stack > .phonerow.call-parent-row {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
    }

    .call-parent-row .parent-call-time-status {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .call-parent-row .fromwho {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .call-parent-row .towhom {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .call-parent-row .call-parent-toggle-panel {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.incoming .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.incoming .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.outgoing .phonebtm > .phonerow:not(.call-parent-row):not(.call-parent-controls-row),
    .phonecall.outgoing .call-main-stack > .phonerow:not(.call-parent-row):not(.call-parent-controls-row) {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
    }

    .phonecell.call-time-status {
        border-right: 1px solid #e5eaf1;
    }
}

/* Two-row call header actions */
.phonecell.call-header-summary-panel {
    align-items: flex-end;
    text-align: right;
}

.call-header-status-row {
    justify-content: flex-end;
    gap: 0.34rem;
}

.call-header-buttons-row {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0.42rem;
    margin-left: auto;
    min-width: 0;
    min-height: 2.16rem;
}

.call-header-buttons-row > div,
.call-header-buttons-row a {
    display: inline-flex;
    min-width: 0;
}

.call-header-buttons-row .badge {
    gap: 0.36rem;
    min-height: 2.16rem;
    border-radius: 0.45rem;
    padding: 0.38rem 0.66rem;
    white-space: nowrap;
}

.call-header-buttons-row .call-handled-toggle,
.call-header-buttons-row .call-air-activity {
    min-width: auto;
}

.call-header-buttons-row .btn-label {
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
}

.call-header-buttons-row .call-air-activity-count {
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.call-state-badge.active {
    position: relative;
    gap: 0.32rem;
    border-color: var(--color-call-active-border);
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: none;
}

.call-state-badge.ringing {
    position: relative;
    gap: 0.32rem;
    border-color: var(--color-call-ringing-border);
    background: linear-gradient(135deg, #b45309 0%, var(--color-call-ringing) 100%);
    color: #ffffff;
    box-shadow: none;
}

.call-state-badge.menu {
    gap: 0.32rem;
    border-color: #a8b7c8;
    background: linear-gradient(135deg, #536579 0%, #718399 100%);
    color: #ffffff;
    box-shadow: none;
}

.call-state-badge-live-icon {
    flex: 0 0 auto;
    font-size: 0.92rem;
    line-height: 1;
    transform-origin: center;
}

.call-state-badge.active .call-state-badge-live-icon {
    animation: call-active-icon-pulse 2.4s ease-in-out infinite;
}

.call-state-badge.ringing .call-state-badge-live-icon {
    animation: call-ringing-icon 1.8s ease-in-out infinite;
}

@keyframes call-active-icon-pulse {
    0%,
    58%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    72% {
        opacity: 0.72;
        transform: scale(0.9);
    }

    86% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes call-ringing-icon {
    0%,
    58%,
    100% {
        transform: rotate(0);
    }

    66% {
        transform: rotate(-10deg);
    }

    74% {
        transform: rotate(10deg);
    }

    82% {
        transform: rotate(-7deg);
    }

    90% {
        transform: rotate(7deg);
    }
}

.phonecall.active-call {
    --call-live-accent: var(--color-call-active);
    --call-live-soft: var(--color-call-active-soft);
    --call-live-border: var(--color-call-active-border);
    --call-live-shadow: var(--shadow-call-active);
    position: relative;
}

.phonecall.active-call.ringing-call {
    --call-live-accent: var(--color-call-ringing);
    --call-live-soft: var(--color-call-ringing-soft);
    --call-live-border: var(--color-call-ringing-border);
    --call-live-shadow: var(--shadow-call-ringing);
}

.phonecall.active-call .parent-call-time-status {
    --call-leg-status-bg: var(--call-live-soft);
    --call-leg-status-border: var(--call-live-border);
    --call-leg-status-text: var(--call-live-accent);
}

@media (prefers-reduced-motion: reduce) {
    .call-state-badge.active .call-state-badge-live-icon,
    .call-state-badge.ringing .call-state-badge-live-icon {
        animation: none;
    }
}

.call-state-badge.missed {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.call-state-badge.outreach {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #5b21b6;
}

.call-state-badge.answered {
    border-color: var(--call-resolution-border);
    background: var(--call-resolution-bg);
    color: var(--call-resolution-ink);
}

.call-state-badge.completed {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
    box-shadow: none;
}

.call-state-badge-icon,
.call-state-badge > .gmi {
    font-size: 0.9rem;
    line-height: 1;
}

.call-state-badge-duration {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.call-header-status-row .call-direction-badge,
.call-header-status-row .call-state-badge,
.call-header-status-row .badge.type,
.call-header-status-row .badge.resolved {
    min-height: 1.54rem;
    padding: 0.22rem 0.56rem;
    font-size: 0.64rem;
}

.call-header-status-row .badge.type,
.call-header-status-row .badge.resolved {
    flex: 0 1 auto;
    min-width: 0;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.call-header-status-row .badge.type {
    background: #f0f2f5;
    color: #425466;
}

.call-header-status-row .badge.resolved.resolved,
.call-header-status-row .badge.resolved.informationprovided {
    background: #d1fae5;
    color: #065f46;
}

.call-header-status-row .badge.resolved.followuprequired,
.call-header-status-row .badge.resolved.partiallyresolved {
    background: #fff3cd;
    color: #7a5f00;
}

.call-header-status-row .badge.resolved.unresolved {
    background: #fee2e2;
    color: #991b1b;
}

.ai-analysis-badge {
    gap: 0.26rem;
    min-height: 1.5rem;
    border-radius: 999px;
    padding: 0.2rem 0.54rem;
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ai-analysis-badge span {
    text-transform: uppercase;
}

.ai-analysis-badge strong {
    font-size: 0.74rem;
    line-height: 1;
}

.phonebtm > .phonerow.call-parent-join-row,
.call-main-stack > .phonerow.call-parent-join-row,
.phonecall.incoming .phonebtm > .phonerow.call-parent-join-row,
.phonecall.incoming .call-main-stack > .phonerow.call-parent-join-row,
.phonecall.outgoing .phonebtm > .phonerow.call-parent-join-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-parent-join-row {
    display: flex;
    justify-content: flex-end;
    padding: 0.55rem 0.72rem;
    background: #ffffff;
}

.call-parent-join-row .phn-ctrls-add-or-join {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.call-parent-join-row .phn-ctrls-add-or-join .badge {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

@media (max-width: 700px) {
    .call-header-buttons-row {
        gap: 0.32rem;
        min-height: 2rem;
    }

    .call-header-buttons-row .badge {
        min-height: 2rem;
        padding: 0.32rem 0.54rem;
    }

    .call-header-buttons-row .btn-label {
        font-size: 0.7rem;
    }

    .call-header-status-row .call-direction-badge,
    .call-header-status-row .call-state-badge,
    .call-header-status-row .badge.type,
    .call-header-status-row .badge.resolved {
        min-height: 1.4rem;
        padding: 0.18rem 0.44rem;
        font-size: 0.58rem;
    }

    .ai-analysis-badge {
        min-height: 1.36rem;
        padding: 0.16rem 0.42rem;
        font-size: 0.58rem;
    }
}

/* Account bar, inline order summary, and child leg formatting */
.call-main-stack,
.call-side-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.phonecall.has-side-details .phonebtm {
    width: 100%;
}

.call-main-stack > .phonerow {
    display: grid;
    align-items: stretch;
    border-bottom: 1px solid #edf1f6;
}

.call-main-stack > .phonerow:last-child {
    border-bottom: 0;
}

.call-side-stack {
    box-sizing: border-box;
    background: transparent;
    justify-self: stretch;
    width: 100%;
}

.call-side-stack > .phonerow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
}

.call-controls-row {
    box-sizing: border-box;
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    padding: 0.2rem 0.2rem 0;
}

.call-controls-panel {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    max-width: none;
    min-width: 0;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.58rem 0.68rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.call-controls-label {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: #1e3a8a;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.call-controls-label .gmi {
    color: var(--color-feature-calls);
    font-size: 1rem;
    line-height: 1;
}

.call-controls-content {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: min(100%, 16rem);
}

.call-controls-content .call-header-join-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    min-width: 0;
}

.phone-answer-call.ringing,
.workspace-communication-dock .communication-primary-action.is-answer-call {
    border-color: var(--color-call-ringing-border);
    background: linear-gradient(135deg, #b45309 0%, var(--color-call-ringing) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(217, 119, 6, 0.26);
}

.phone-answer-call.ringing:hover,
.phone-answer-call.ringing:focus-visible,
.workspace-communication-dock .communication-primary-action.is-answer-call:hover,
.workspace-communication-dock .communication-primary-action.is-answer-call:focus-visible {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
    color: #ffffff;
}

.badge.alert-disabled,
.badge:disabled {
    border-color: #d0d5dd;
    background: #eef2f7;
    color: #98a2b3;
    cursor: not-allowed;
    opacity: 0.86;
    box-shadow: none;
}

@media (max-width: 700px) {
    .call-controls-panel {
        align-items: flex-start;
        gap: 0.5rem;
    }

    .call-controls-content {
        flex-basis: 100%;
        justify-content: flex-start;
        min-width: 0;
    }

    .call-controls-content .call-header-join-controls {
        justify-content: flex-start;
    }
}

.call-side-tabs-row {
    box-sizing: border-box;
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
}

.call-side-tabs-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0.1rem 0.2rem 0.35rem;
}

.call-side-tabs,
.call-review-tabs,
.call-feedback-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.28rem;
    width: 100%;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 0.5rem 0.5rem 0 0;
    background: rgba(238, 246, 255, 0.84);
    border-bottom-color: rgba(37, 99, 235, 0.18);
    padding: 0.28rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.call-side-tab,
.call-review-tab,
.call-feedback-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0 0.78rem;
    border: 1px solid transparent;
    border-radius: 0.38rem;
    background-color: transparent;
    color: #4b5f7a;
    font-weight: 800;
    cursor: pointer;
}

.call-side-tab-label {
    min-width: 0;
}

.call-side-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.28rem;
    min-height: 1.05rem;
    border: 1px solid rgba(75, 95, 122, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #52657d;
    padding: 0 0.34rem;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.call-side-tab-count.yes {
    border-color: rgba(34, 197, 94, 0.24);
    background: #ecfdf3;
    color: #087443;
}

.call-side-tab-count.gmi {
    min-width: 1.05rem;
    padding: 0;
    font-size: 0.82rem;
}

.call-side-tab-feedback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.78rem;
    line-height: 1;
}

.call-side-tab-count.no,
.call-side-tab-count.zero {
    color: #7b8798;
}

.call-side-tab:hover,
.call-side-tab.active,
.call-review-tab:hover,
.call-review-tab.active,
.call-feedback-tab:hover,
.call-feedback-tab.active {
    border-color: rgba(37, 99, 235, 0.22);
    background-color: #fff;
    color: #172033;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.call-review-tabs,
.call-feedback-tabs {
    border-top: 1px solid rgba(146, 174, 214, 0.2);
    border-bottom: 0;
    margin-top: -1px;
    margin-bottom: 0.68rem;
}

.call-review-tab,
.call-feedback-tab {
    min-height: 34px;
    border-color: rgba(146, 174, 214, 0.22);
    border-top-color: rgba(126, 158, 201, 0.3);
    border-bottom: 1px solid rgba(146, 174, 214, 0.22);
    border-radius: 0 0 6px 6px;
    padding: 0 0.72rem;
}

.call-review-tab.active,
.call-feedback-tab.active {
    border-color: rgba(114, 154, 212, 0.34);
    border-top-color: transparent;
}

.call-feedback-tab:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.call-feedback-tab:disabled:hover {
    border-color: rgba(146, 174, 214, 0.22);
    background-color: transparent;
    color: #667085;
}

.call-side-tab-panels,
.call-side-tab-panel,
.call-review-tab-panels,
.call-review-tab-panel {
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: none;
}

.call-side-tab-panels {
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background: rgba(238, 246, 255, 0.84);
    height: auto;
    max-height: clamp(13rem, 34vh, 18rem);
    min-height: 0;
    overflow: auto;
    padding: 0.58rem;
    transition: none;
}

.phonecall.is-investigation-focused {
    border-color: color-mix(in srgb, var(--color-feature-calls) 38%, var(--color-border));
    box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--color-feature-calls) 10%, transparent);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .phonecall.is-investigation-focused {
        transition: none;
    }
}

.call-side-tab-panel {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.call-side-tab-panel[hidden],
.call-review-tab-panel[hidden] {
    display: none !important;
}

.call-side-section {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    width: 100%;
}

.call-analysis-block,
.call-side-air-activity {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.call-contextual-feedback-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.call-contextual-feedback-row .ui-action-button {
    gap: 0.32rem;
    min-height: 2rem;
    border-radius: 0.45rem;
    padding: 0.34rem 0.58rem;
}

.call-side-air-activity .air-call-activity-row-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
}

.call-side-air-activity .phonecell.air-call-activity {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.58rem 0.68rem;
}

.call-side-review,
.call-side-feedback {
    gap: 0;
}

.call-side-actions {
    padding-top: 0.68rem;
}

.call-side-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.call-side-section-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 800;
}

.call-side-section-summary span,
.call-side-empty {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #475467;
    padding: 0.34rem 0.62rem;
}

.call-side-empty {
    border-color: #dbe5f3;
    border-radius: 6px;
    background: #f8fafc;
    padding: 0.75rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.call-side-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.call-side-section-actions .badge,
.call-side-feedback-row .badge,
.call-side-notes .call-entity-notes-open {
    gap: 0.36rem;
    min-height: 2.16rem;
    border-radius: 0.45rem;
    padding: 0.38rem 0.66rem;
    white-space: nowrap;
}

.call-side-note-preview,
.call-side-transcript-block,
.call-side-feedback-row {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0.72rem;
}

.call-side-voicemail-transcript {
    background: var(--communication-voicemail-soft);
    border: 1px solid color-mix(in srgb, var(--communication-voicemail-ink) 24%, var(--color-border));
    border-left: 3px solid var(--communication-voicemail-ink);
    padding: 0.85rem;
}

.call-side-note-preview strong,
.call-side-transcript-block strong,
.call-side-feedback-row strong {
    color: #101828;
    font-size: 0.82rem;
    font-weight: 900;
}

.call-side-note-preview p,
.call-side-transcript-block p,
.call-side-feedback-row p {
    margin: 0;
    color: #475467;
    font-size: 0.84rem;
    line-height: 1.45;
}

.call-side-voicemail-transcript p,
.call-side-voicemail-transcript .call-transcript-part-label {
    color: var(--communication-voicemail-ink);
}
.call-side-voicemail-transcript p {
    font-size: 0.94rem;
    line-height: 1.58;
}

.call-side-transcript .air-call-activity-feed,
.call-side-transcript .call-side-transcript-block {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
}

@media (max-width: 700px) {
    .call-side-tab-panels {
        max-height: clamp(12rem, 42vh, 18rem);
    }
}

.call-recording-list {
    container: recordings / inline-size;
    display: grid;
    gap: 0.55rem;
}

.call-recording-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.62rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.call-recording-row-main,
.call-recording-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.call-recording-row-main {
    flex-wrap: nowrap;
}

.call-recording-row-main .gmi {
    color: #2563eb;
    font-size: 1.35rem;
}

.call-recording-row-main div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
}

.call-recording-row-main strong {
    color: #101828;
    font-size: 0.86rem;
}

.call-recording-row-main span:not(.gmi) {
    color: #667085;
    font-size: 0.78rem;
}

.call-recording-row-actions {
    justify-content: flex-end;
}

.call-recording-row-actions .ui-action-button {
    min-height: 2rem;
    padding: 0.28rem 0.54rem;
    font-size: 0.76rem;
}

.call-recording-row-actions .call-recording-play-toggle {
    min-width: 4.9rem;
}

.call-recording-row-actions .ui-action-button.is-playing {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.call-recording-speed-control {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid #cbd7e6;
    border-radius: 0.45rem;
    background: #f8fafc;
    color: #344054;
    padding: 0.24rem 0.34rem;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.call-recording-speed-select {
    min-width: 3.45rem;
    border: 0;
    background: transparent;
    color: #172033;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    padding: 0;
}

.call-recording-speed-select:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.32);
    outline-offset: 2px;
}

.call-recording-playback {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding-top: 0.1rem;
}

.call-recording-seek {
    --recording-progress: 0%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    height: 0.44rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0 var(--recording-progress), #d7e2f0 var(--recording-progress) 100%);
    cursor: pointer;
}

.call-recording-seek::-webkit-slider-runnable-track {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.call-recording-seek::-moz-range-track {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.call-recording-seek::-moz-range-progress {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.call-recording-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.32rem;
    border: 2px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.call-recording-seek::-moz-range-thumb {
    width: 0.82rem;
    height: 0.82rem;
    border: 2px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.call-recording-seek:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.call-recording-time {
    min-width: 5.8rem;
    text-align: right;
    color: #475467;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.call-side-feedback {
    gap: 0;
}

.call-side-note-form,
.entity-note-form {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    text-align: left;
}

.call-side-note-form label,
.entity-note-form label {
    color: #344054;
    font-size: 0.82rem;
    font-weight: 850;
}

.call-side-note-form input,
.call-side-note-form textarea,
.entity-note-form input[type="text"],
.entity-note-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd7e6;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.78);
    color: #101828;
    padding: 0.5rem 0.58rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.call-side-note-form input:focus,
.call-side-note-form textarea:focus,
.entity-note-form input[type="text"]:focus,
.entity-note-form textarea:focus {
    border-color: #93b5e8;
    background: rgba(255, 255, 255, 0.92);
    outline: 0;
    box-shadow: 0 0 0 0.16rem rgba(47, 128, 237, 0.12);
}

.call-side-feedback-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

@media (max-width: 680px) {
    .call-recording-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .call-recording-row-actions {
        justify-content: flex-start;
    }

    .call-recording-speed-control {
        min-width: 0;
    }

    .call-recording-playback {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .call-recording-time {
        min-width: 0;
        text-align: left;
    }

    .call-side-feedback-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 997px) {
    .phonecall.has-side-details .phonebtm {
        width: 100%;
    }

    .phonecall.has-side-details .call-side-stack {
        gap: 0.42rem;
        padding: 0 0 0.55rem;
    }
}

.call-account-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.7rem;
}

.call-account-row .call-direction-badge {
    justify-self: start;
    min-width: 4.1rem;
    min-height: 1.54rem;
    justify-content: center;
    padding: 0.22rem 0.56rem;
    font-size: 0.75rem;
}

.call-account-row .account-name {
    justify-self: center;
    text-align: center;
}

.call-account-state-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.34rem;
    min-width: 4.1rem;
}

.call-account-row-spacer {
    width: 100%;
    min-width: 4.1rem;
}

.call-account-state-badges .call-state-badge,
.call-header-status-row .call-state-badge,
.call-header-status-row .badge.type,
.call-header-status-row .badge.resolved,
.call-header-buttons-row .badge,
.call-parent-join-row .phn-ctrls-add-or-join .badge,
.ai-analysis-badge {
    font-size: 0.75rem;
}

.call-header-buttons-row .btn-icon,
.call-parent-join-row .btn-icon,
.call-disconnect-button .btn-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.call-header-buttons-row .btn-label {
    font-size: 0.75rem;
}

.call-header-buttons-row .call-recording-button {
    font-size: 0.75rem;
    font-weight: 850;
}

.call-party .air-order-summary-row {
    grid-column: 1 / -1;
    min-width: 0;
}

.call-party .air-order-summary {
    padding: 0;
}

.call-parent-row .fromwho.has-air-summary {
    border-color: #d8ccff;
    box-shadow: inset 0.25rem 0 0 #8d7cc3;
}

.call-party .air-order-summary-content {
    margin-top: 0.58rem;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: 0.78rem;
}

.call-party .air-order-summary-content.not-found,
.call-party .air-order-summary-content.loading,
.call-party .air-order-summary-content.failed {
    background: transparent;
}

.phonebtm > .phonerow.call-child-row,
.call-main-stack > .phonerow.call-child-row,
.phonecall.incoming .phonebtm > .phonerow.call-child-row,
.phonecall.incoming .call-main-stack > .phonerow.call-child-row,
.phonecall.outgoing .phonebtm > .phonerow.call-child-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-child-row {
    grid-template-columns: minmax(5.6rem, 6.8rem) minmax(0, 1fr);
    border-bottom: 0;
    gap: 0.36rem;
    padding: 0 0.48rem 0.4rem;
    background: transparent;
}

.call-child-row .phonecell.call-time-status {
    min-width: 0;
    border: 1px solid var(--call-leg-status-border);
    border-radius: 0.5rem;
    background: var(--call-leg-status-bg);
    padding: 0.4rem 0.55rem;
}

.call-child-row .phonecell.participant {
    border: 1px solid #e5eaf1;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.46rem 0.55rem;
}

/* Analysis persona rows */
.phonecell.analysis .analysis-detail-view {
    display: grid;
    gap: var(--comm-section-inner-gap-sm);
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.phonecell.analysis .analysis-detail-view[hidden],
.phonecell.analysis .analysis-summary[hidden] {
    display: none !important;
}

.phonecell.analysis .analysis-view-switch {
    display: inline-flex;
    justify-self: end;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    padding: 0.15rem;
}

.phonecell.analysis .analysis-view-switch button {
    min-height: 1.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.3rem 0.62rem;
    font-size: 0.68rem;
    font-weight: 850;
    cursor: pointer;
}

.phonecell.analysis .analysis-view-switch button.is-selected {
    background: var(--color-surface-elevated);
    color: var(--color-brand-active);
    box-shadow: var(--shadow-sm);
}

.phonecell.analysis .analysis-view-switch button:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.phonecell.analysis .inquiry,
.phonecell.analysis .resolution {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--comm-section-inner-gap) var(--comm-section-inner-gap);
    box-sizing: border-box;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.phonecell.analysis .inquiry.is-empty,
.phonecell.analysis .resolution.is-empty,
.phonecell.analysis .analysis-summary {
    grid-template-columns: minmax(0, 1fr);
}

.phonecell.analysis .inquiry {
    border-color: var(--call-inquiry-border);
    background: var(--call-inquiry-bg);
    color: var(--call-inquiry-ink);
}

.phonecell.analysis .resolution {
    border-color: var(--call-resolution-border);
    background: var(--call-resolution-bg);
    color: var(--call-resolution-ink);
}

.analysis-persona {
    grid-column: 1 / 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--comm-section-inner-gap-sm);
    min-width: 0;
}

.analysis-persona-label {
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.analysis-persona-name {
    color: currentColor;
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.86;
}

.phonecell.analysis .tones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--comm-section-inner-gap-sm);
    min-width: 0;
}

.phonecell.analysis .pill {
    border: 1px solid rgba(29, 78, 216, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    padding: 0.14rem 0.42rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.phonecell.analysis .resolution .pill {
    border-color: rgba(22, 101, 52, 0.14);
}

.phonecell.analysis .analysis-text {
    grid-column: 1 / -1;
    grid-row: 2;
    color: #253044;
}

.phonecell.analysis .analysis-summary .analysis-text {
    grid-row: auto;
}

.analysis-score {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.analysis-score strong {
    font-size: 0.78rem;
}

@media (max-width: 700px) {
    .phonecell.analysis .analysis-view-switch {
        justify-self: stretch;
    }

    .phonecell.analysis .analysis-view-switch button {
        flex: 1 1 50%;
    }

    .call-account-row {
        column-gap: 0.55rem;
    }

    .call-account-row .call-direction-badge,
    .call-account-state-badges .call-state-badge,
    .call-header-status-row .call-state-badge,
    .call-header-status-row .badge.type,
    .call-header-status-row .badge.resolved,
    .call-header-buttons-row .badge,
    .call-parent-join-row .phn-ctrls-add-or-join .badge,
    .ai-analysis-badge {
        font-size: 0.75rem;
    }

    .call-account-row-spacer {
        min-width: 4.1rem;
    }

    .call-account-state-badges {
        min-width: 4.1rem;
        gap: 0.26rem;
    }

    .call-account-row .call-direction-badge {
        min-width: 4.1rem;
    }

    .phonebtm > .phonerow.call-child-row,
    .call-main-stack > .phonerow.call-child-row,
    .phonecall.incoming .phonebtm > .phonerow.call-child-row,
    .phonecall.incoming .call-main-stack > .phonerow.call-child-row,
    .phonecall.outgoing .phonebtm > .phonerow.call-child-row,
    .phonecall.outgoing .call-main-stack > .phonerow.call-child-row {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
        gap: 0.36rem;
        padding: 0.36rem 0.48rem;
    }

    .phonecell.analysis .inquiry,
    .phonecell.analysis .resolution {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 520px) {
    .phonebtm > .phonerow.call-child-row,
    .call-main-stack > .phonerow.call-child-row,
    .phonecall.incoming .phonebtm > .phonerow.call-child-row,
    .phonecall.incoming .call-main-stack > .phonerow.call-child-row,
    .phonecall.outgoing .phonebtm > .phonerow.call-child-row,
    .phonecall.outgoing .call-main-stack > .phonerow.call-child-row {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
    }
}

.phonecell.call-time-status.canceled .call-status,
.phonecell.call-time-status.cancelled .call-status {
    background: var(--call-leg-status-pill-bg);
    color: var(--call-leg-status-text);
}

.phonecall .phonetop.comm-card-top {
    grid-template-columns: minmax(0, 1fr);
    background: transparent;
    background-color: transparent;
    background-image: none;
}

.phonecall .phonetop.comm-card-top > .phonerow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    background: transparent;
    background-color: transparent;
    background-image: none;
}

.phonecall .phonetop.comm-card-top .call-header-summary-panel {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    background-color: transparent;
    background-image: none;
    text-align: left;
}

.phonecall .phonetop.comm-card-top .call-header-join-controls {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
    gap: 0.38rem;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.phonecall .phonetop.comm-card-top .call-header-join-controls:empty {
    display: block;
}

.phonecall .phonetop.comm-card-top .call-header-join-controls .badge {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

.phonecall .phonetop.comm-card-top .call-header-buttons-row {
    flex: 0 1 auto;
    align-self: center;
    margin-left: auto;
}

.phonecall .call-side-stack .call-side-controls-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: transparent;
}

.phonecall .call-side-stack .call-header-summary-panel {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    width: 100%;
    border-top: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    padding: 0.25rem 0.2rem 0.1rem;
    text-align: left;
}

.phonecall .call-side-stack .call-header-join-controls {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
    gap: 0.38rem;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.phonecall .call-side-stack .call-header-join-controls:empty {
    display: block;
}

.phonecall .call-side-stack .call-header-join-controls .badge {
    min-width: 2.05rem;
    min-height: 2.05rem;
    border-radius: 0.45rem;
}

.phonecall .call-side-stack .call-header-buttons-row {
    flex: 0 1 auto;
    align-self: center;
    margin-left: auto;
}

.phonecall .call-side-stack .call-side-actions .call-header-buttons-row {
    flex: 1 1 auto;
    justify-content: flex-start;
    justify-self: start;
    margin-left: 0;
    min-height: 0;
}

.phonecall.comm-card .phonecell.analysis,
.phonecall.comm-card .phonecell.air-call-activity,
.phonecall.comm-card .phonecell.analysis .analysis-badges {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
}

.phonecall.comm-card .call-side-stack,
.phonecall.comm-card .call-side-stack > .phonerow {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.phonecall.comm-card .call-header-analysis-row .analysis-badges .badge {
    background: transparent !important;
    background-color: transparent !important;
}

.phonecall.comm-card .phonebtm > .phonerow.call-parent-join-row,
.phonecall.comm-card .call-main-stack > .phonerow.call-parent-join-row,
.phonecall.comm-card.incoming .phonebtm > .phonerow.call-parent-join-row,
.phonecall.comm-card.incoming .call-main-stack > .phonerow.call-parent-join-row,
.phonecall.comm-card.outgoing .phonebtm > .phonerow.call-parent-join-row,
.phonecall.comm-card.outgoing .call-main-stack > .phonerow.call-parent-join-row {
    background: transparent;
}

.phonecall.comm-card .phonebtm .phonerow.call-parent-row .phonecell:not(.call-time-status),
.phonecall.comm-card .call-party,
.phonecall.comm-card .phonecell.participant,
.phonecall.comm-card .call-parent-row .call-parent-toggle-panel {
    background: transparent;
    background-color: transparent;
}

.phonecall.comm-card .phonebtm .phonerow.call-parent-row .phonecell.parent-call-date,
.phonecall.comm-card .phonebtm .phonerow.call-parent-row .phonecell.fromwho,
.phonecall.comm-card .call-parent-row .parent-call-date,
.phonecall.comm-card .call-parent-row .fromwho {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.phonecall.comm-card .phonebtm .phonerow.call-parent-row .phonecell.fromwho.has-air-summary,
.phonecall.comm-card .call-parent-row .fromwho.has-air-summary {
    border-color: transparent;
    box-shadow: none;
}

.call-main-stack > .phonerow.call-note-row,
.phonecall.incoming .call-main-stack > .phonerow.call-note-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-note-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
    gap: 0.36rem;
    background: transparent;
    padding: 0 0.48rem 0.4rem;
}

.call-note-row .phonecell.call-note.voicemail-note {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.3rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background: #eff6ff;
    color: #1d4f8f;
    padding: 0.58rem 0.65rem;
    text-align: left;
}

.call-note-row .voicemail-note .call-note-label {
    color: #1d4f8f;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.call-note-row .voicemail-note .call-note-text {
    min-width: 0;
    color: #253044;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.phonebtm > .phonerow.call-parent-row,
.call-main-stack > .phonerow.call-parent-row,
.phonecall.incoming .phonebtm > .phonerow.call-parent-row,
.phonecall.incoming .call-main-stack > .phonerow.call-parent-row,
.phonecall.outgoing .phonebtm > .phonerow.call-parent-row,
.phonecall.outgoing .call-main-stack > .phonerow.call-parent-row {
    grid-template-columns: minmax(5.6rem, 6.8rem) minmax(0, 1fr);
    gap: 0.36rem;
    padding: 0.72rem 0.48rem;
}

.call-parent-row .parent-call-date {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: stretch;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0.65rem;
}

.call-parent-row .parent-call-time-status {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.call-parent-row .fromwho {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.call-parent-row .towhom {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

@media (max-width: 700px) {
    .phonebtm > .phonerow.call-parent-row,
    .call-main-stack > .phonerow.call-parent-row,
    .phonecall.incoming .phonebtm > .phonerow.call-parent-row,
    .phonecall.incoming .call-main-stack > .phonerow.call-parent-row,
    .phonecall.outgoing .phonebtm > .phonerow.call-parent-row,
    .phonecall.outgoing .call-main-stack > .phonerow.call-parent-row {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
        gap: 0.36rem;
        padding: 0.55rem 0.48rem;
    }

    .call-parent-row .parent-call-date {
        padding: 0 0.65rem;
    }

    .phonecall .phonetop.comm-card-top .call-header-summary-panel {
        flex-wrap: wrap;
        align-items: center;
    }

    .phonecall .phonetop.comm-card-top .call-header-join-controls,
    .phonecall .phonetop.comm-card-top .call-header-buttons-row {
        flex: 1 1 auto;
    }

    .phonecall .phonetop.comm-card-top .call-header-buttons-row {
        justify-content: flex-end;
    }
}

.call-parent-row .fromwho.has-air-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.call-parent-row .fromwho.has-air-summary .air-order-summary-row {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    align-self: start;
    min-width: 0;
    margin-top: 0.32rem;
    padding: 0;
}

.call-parent-row .fromwho.has-air-summary .call-disconnect-button {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.call-party .air-order-summary-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.34rem;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    border: 1px solid color-mix(in srgb, var(--communication-badge-border) 72%, var(--color-border-muted));
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--communication-badge-bg) 42%, var(--color-surface));
    padding: 0.4rem;
    color: #334155;
    font-size: 0.78rem;
    line-height: 1.35;
}

.call-party .air-order-summary-details {
    display: grid;
    gap: 0.12rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--communication-badge-border) 32%, var(--color-border-muted));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-muted));
    padding: 0.36rem 0.46rem;
}

.call-party .air-order-summary-source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--communication-badge-text);
    padding: 0.04rem 0.14rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.call-party .air-order-summary-source .gmi {
    font-size: 0.88rem;
}

.call-party .air-order-summary-detail {
    min-width: 0;
    color: #334155;
    font-weight: 750;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 700px) {
    .call-parent-row .fromwho.has-air-summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .call-parent-row .fromwho.has-air-summary .air-order-summary-row {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
    }

    .call-parent-row .fromwho.has-air-summary .call-disconnect-button {
        grid-column: 2 / 3;
    }
}

/* Keep the focused Calls tabs close to the context/notice rail. */
body.workspace-shell-view:not(.overview-workspace-view) main.content > section.phone.app-section {
    padding-top: 0;
}

/* Secondary recording actions shrink with the panel, not the viewport. */
.call-recording-row-actions .ui-action-button { white-space: nowrap; }
@container recordings (max-width: 40rem) {
    .call-recording-secondary-label { display: none; }
    .call-recording-row-actions :is(.call-recording-download, .call-recording-copy-link) { min-width: 2rem; }
}
@container recordings (max-width: 28rem) {
    .call-recording-row { grid-template-columns: minmax(0, 1fr); }
    .call-recording-row-actions { justify-content: flex-start; }
}

.call-recording-waveform { grid-column: 1 / -1; min-width: 0; cursor: pointer; }
.call-recording-play-toggle[aria-busy="true"] { opacity: .65; }



section.settings {
    gap: 1rem;
    max-width: 100%;
    padding:0;
    margin:0;
}
.settings-testing-synthetic-latest span,
.settings-testing-synthetic-cases summary span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-synthetic-latest,
.settings-testing-synthetic-locations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.settings-testing-synthetic-cases {
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    overflow: hidden;
}

.settings-testing-synthetic-cases > summary {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
}

.settings-testing-synthetic-case-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0 0.75rem 0.75rem;
}

.settings-testing-synthetic-case-list article {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-surface-muted);
}

.settings-testing-synthetic-case-list article > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem;
}

.settings-testing-synthetic-case-list code {
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-synthetic-case-list span,
.settings-testing-synthetic-case-list small {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .settings-testing-synthetic-case-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-testing-synthetic-cases > summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

.settings-notification-dispatch-list {
    display: grid;
    gap: var(--settings-ui-space-4);
}

.settings-notification-dispatch {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-default);
}

.settings-notification-dispatch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);
}

.settings-notification-dispatch-title {
    display: grid;
    min-width: 0;
    gap: var(--settings-ui-space-1);
}

.settings-notification-dispatch-title code,
.settings-notification-dispatch-meta dd,
.settings-notification-recipient-table td,
.settings-notification-dispatch-attempts td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.settings-notification-dispatch-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--settings-ui-space-3);
    margin: 0;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
}

.settings-notification-dispatch-meta > div {
    min-width: 0;
}

.settings-notification-dispatch-meta dt {
    margin-bottom: var(--settings-ui-space-1);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-notification-dispatch-meta dd {
    margin: 0;
}

.settings-notification-dispatch > .settings-error,
.settings-notification-dispatch > .settings-table-wrap,
.settings-notification-dispatch-attempts {
    margin: 0 var(--settings-ui-space-4) var(--settings-ui-space-4);
}

.settings-notification-dispatch-attempts h4 {
    margin: 0 0 var(--settings-ui-space-2);
}

@media (max-width: 900px) {
    .settings-notification-dispatch-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .settings-notification-dispatch-header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-notification-dispatch-meta {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-configuration-import-comparison table {
    table-layout: fixed;
    min-width: 76rem;
}

.settings-configuration-import-comparison th:nth-child(1),
.settings-configuration-import-comparison th:nth-child(2),
.settings-configuration-import-comparison th:nth-child(3) {
    width: 22%;
}

.settings-configuration-import-comparison th:nth-child(4) {
    width: 19%;
}

.settings-configuration-import-comparison th:nth-child(5) {
    width: 15%;
}

.settings-configuration-import-group th {
    padding-block: var(--settings-ui-space-2);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-configuration-import-row td > strong,
.settings-configuration-import-row td > small {
    display: block;
}

.settings-configuration-import-include {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 600;
}

.settings-configuration-import-row td > small {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.settings-configuration-import-row.is-needs_attention {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, transparent);
}

.settings-configuration-import-row.is-blocked {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, transparent);
}

.settings-configuration-import-row.is-decision {
    background: color-mix(in srgb, var(--color-feature-settings, #2563eb) 7%, transparent);
}

.settings-configuration-import-row details {
    margin-top: var(--settings-ui-space-2);
}

.settings-configuration-import-row details summary {
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-configuration-import-row details pre {
    max-width: 26rem;
    max-height: 18rem;
    margin: var(--settings-ui-space-2) 0 0;
    padding: var(--settings-ui-space-2);
    overflow: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface-muted);
    font-size: var(--settings-ui-type-meta);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Providers & Partners keeps target-local access controls readable at every workspace width. */
.settings-break-glass .settings-ui-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.settings-break-glass .settings-ui-summary-card small {
    display: block;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
    overflow-wrap: anywhere;
}

.settings-provider-access-policy {
    display: grid;
    gap: var(--settings-ui-space-4);
    min-width: 0;
}

.settings-provider-access-policy-section > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-provider-access-table-wrap {
    border-radius: var(--settings-ui-radius-md);
}

.settings-provider-access-table {
    min-width: 50rem;
    table-layout: fixed;
}

.settings-provider-access-table th,
.settings-provider-access-table td {
    padding: 0.55rem 0.7rem;
    vertical-align: middle;
    overflow-wrap: anywhere;
    white-space: normal;
}

.settings-provider-access-table th:first-child {
    width: 28%;
}

.settings-provider-access-table th:nth-child(2) {
    width: 56%;
}

.settings-provider-access-table th,
.settings-provider-access-table td > small,
.settings-provider-access-switch small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-provider-access-table td > strong,
.settings-provider-access-table td > small {
    display: block;
}

.settings-provider-access-table td > small {
    margin-top: 0.2rem;
}

.settings-provider-access-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.settings-provider-access-scope span {
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-provider-access-toggle-column {
    width: 16%;
    text-align: right !important;
}

.settings-provider-access-switch {
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.settings-provider-access-switch:has(input:disabled) {
    cursor: not-allowed;
}

.settings-provider-access-switch small {
    min-width: 8.5rem;
    max-width: 11rem;
    text-align: right;
}

.settings-provider-access-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
}

.settings-provider-access-footer p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

@media (max-width: 760px) {
    .settings-provider-access-table {
        min-width: 0;
    }

    .settings-provider-access-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.settings-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    position: relative;
    align-items: start;
}

.settings-pane {
    grid-column: 1;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.settings-pane-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-pane h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.6rem;
}

.settings-panels {
    padding-top: 1rem;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0 0 0;
}

.settings-pane-header .button {
    gap: 0.35rem;
    width: auto;
    min-width: 9.75rem;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--button-border);
    color: var(--button-text);
    background-color: var(--button-bg);
    justify-self: end;
    white-space: nowrap;
}

.settings-background-activity {
    position: fixed;
    right: 1rem;
    bottom: 4.75rem;
    z-index: 1200;
    width: min(420px, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.75rem;
    background: var(--settings-panel, #fff);
    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}

.settings-background-activity-header,
.settings-background-activity-header > div,
.settings-background-job,
.settings-background-job-actions {
    display: flex;
    align-items: center;
}

.settings-background-activity-header {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    background: var(--color-surface-elevated);
}

.settings-background-activity-header > div {
    gap: 0.45rem;
}

.settings-background-activity-header > div > span:last-child {
    font-size: var(--settings-ui-type-meta);
    opacity: 0.8;
}

.settings-background-activity-header .settings-ui-auto-refresh {
    min-height: 1.45rem;
    border-color: var(--color-border-muted);
    color: var(--color-text-muted);
    background: var(--color-surface-elevated);
}

.settings-background-activity-header button,
.settings-background-job-actions button {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
}

.settings-background-activity-list {
    max-height: min(360px, 50vh);
    overflow: auto;
}

.settings-background-job {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-top: 1px solid var(--settings-border, #d8dee8);
}

.settings-background-job > div:nth-child(2) {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.settings-background-job > div:nth-child(2) > span,
.settings-background-job > div:nth-child(2) > small {
    overflow: hidden;
    color: var(--settings-muted, #64748b);
    overflow-wrap: anywhere;
}

.settings-background-job.pending .settings-background-job-icon {
    color: var(--color-info);
    animation: settings-background-job-spin 1.2s linear infinite;
}

.settings-background-job.success .settings-background-job-icon {
    color: var(--color-success);
}

.settings-background-job.error .settings-background-job-icon {
    color: var(--color-danger);
}

.settings-background-job.warning .settings-background-job-icon {
    color: var(--color-warning);
}

.settings-background-job-actions {
    gap: 0.15rem;
}

.settings-background-job-actions button {
    color: var(--settings-muted, #64748b);
}

@keyframes settings-background-job-spin {
    to { transform: rotate(360deg); }
}

.settings-actions .button {
    gap: 0.35rem;
    width: 110px;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--button-border);
    color: var(--button-text);
    background-color: var(--button-bg);
}

.settings-error {
    min-height: 1.25rem;
    padding-top: 0.5rem;
    color: var(--color-danger-text);
    font-weight: 700;
}

.settings-content {
    min-width: 0;
    padding-top: 0.5rem;
}

.settings-busy .settings-pane {
    cursor: progress;
}

.settings-busy .settings-content,
.settings-busy .settings-form {
    opacity: 0.65;
}

.settings-busy button,
.settings-busy input,
.settings-busy select,
.settings-busy textarea {
    cursor: wait;
}

.settings-table :is(th, td).settings-col-account {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-ui-table.settings-users-table.settings-ui-table-fit-content {
    width: 100%;
    min-width: 94rem;
    box-sizing: border-box;
    table-layout: fixed;
}

.settings-table.settings-users-table .settings-col-actions {
    width: var(--settings-ui-actions-column-width);
    min-width: var(--settings-ui-actions-column-width);
    max-width: var(--settings-ui-actions-column-width);
}

.settings-table.settings-users-table .settings-col-identity {
    width: 18rem;
}

.settings-table.settings-users-table .settings-col-contact {
    width: 15rem;
}

.settings-table.settings-users-table .settings-col-access {
    width: 18rem;
}

.settings-table.settings-users-table .settings-col-presence {
    width: 18rem;
}

.settings-table.settings-users-table .settings-col-authentication {
    width: 12rem;
}

.settings-table.settings-users-table .settings-col-connection {
    width: 18rem;
}

.settings-table.settings-users-table .settings-col-created {
    width: 8rem;
}

.settings-users-table .settings-users-user-cell,
.settings-users-table .settings-users-contact-cell,
.settings-users-table .settings-users-presence-cell,
.settings-users-table .settings-users-connection-cell,
.settings-users-table .settings-users-access-cell,
.settings-users-table .settings-users-authentication-cell,
.settings-users-table .settings-users-created-cell {
    overflow: hidden;
    min-width: 0;
}

.settings-users-table .settings-users-contact-cell {
    white-space: normal;
}

.settings-users-table .settings-users-connection-cell {
    white-space: normal;
}

.settings-users-status-stack {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    margin-top: 0.15rem;
}

.settings-users-status-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    gap: 0.35rem;
}

.settings-users-status-pills > * {
    flex: 0 0 auto;
}

.settings-users-username {
    display: block;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.settings-users-status-activity {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-users-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-users-presence-cell .settings-presence-stack small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    line-height: 1.35;
    white-space: normal;
}

.settings-users-access-list {
    display: flex;
    min-width: 0;
    gap: 0.35rem;
    overflow: hidden;
    color: var(--color-text-muted);
    line-height: 1.3;
    white-space: nowrap;
}

.settings-users-access-list > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-users-access-more {
    flex: 0 0 auto;
    color: var(--color-text);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-devices-table .settings-device-summary-cell,
.settings-devices-table .settings-device-account-cell {
    min-width: 12rem;
}

.settings-devices-table {
    min-width: 84rem;
}

.settings-phone-system-table :is(th, td).settings-col-actions {
    width: var(--settings-ui-actions-column-width);
    min-width: var(--settings-ui-actions-column-width);
    max-width: var(--settings-ui-actions-column-width);
}

.settings-phone-system-table {
    table-layout: fixed;
}

.settings-phone-system-table :is(th, td).settings-col-resource {
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
}

.settings-devices-table .settings-col-location {
    width: 11rem;
}

.settings-phone-numbers-table {
    min-width: 76rem;
}

.settings-devices-table .settings-col-assignee {
    width: 11rem;
}

.settings-devices-table .settings-col-endpoints {
    width: 18rem;
}

.settings-devices-table .settings-col-recording {
    width: 13rem;
}

.settings-devices-table .settings-col-network {
    width: 12rem;
}

.settings-accounts-table .settings-account-summary-cell,
.settings-locations-table .settings-account-summary-cell,
.settings-locations-table .settings-location-summary-cell {
    min-width: 11rem;
    max-width: 20rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-account-config-cell .settings-entity-resource-list {
    grid-template-columns: repeat(4, max-content);
    gap: 0.22rem 0.65rem;
}

.settings-entity-summary-table {
    min-width: 64rem;
    table-layout: fixed;
}

/* Opt-in collection sizing: names and prose share remaining space according to
   their content, while short metadata/resource columns keep their natural size. */
@media (min-width: 701px) {
    .settings-table.settings-table-content-sized {
        table-layout: auto;
        min-width: 64rem;
    }

    .settings-table.settings-table-content-sized :is(th, td) {
        width: auto;
    }

    .settings-table.settings-table-content-sized :is(th, td).settings-col-name {
        min-width: 18rem;
        max-width: 34rem;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .settings-table.settings-table-content-sized :is(th, td).settings-col-address,
    .settings-table.settings-table-content-sized :is(th, td).settings-col-owner {
        min-width: 10rem;
        max-width: 20rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .settings-table.settings-table-content-sized :is(th, td):is(.settings-col-atomic, .settings-col-created, .settings-col-config) {
        width: 1%;
    }
}

@media (max-width: 700px) {
    .settings-table.settings-table-content-sized :is(th, td).settings-col-name {
        min-width: 0;
        max-width: none;
        width: auto;
    }
}

.settings-account-industry {
    padding-left: 0.45rem;
    color: var(--color-text-muted);
}

.settings-entity-resource-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.22rem 0.85rem;
}

.settings-entity-resource-list > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    white-space: nowrap;
}

.settings-entity-resource-list strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-location-hours-cell {
    min-width: 17rem;
    max-width: 27rem;
    white-space: normal;
}

.settings-location-hours-list {
    display: grid;
    gap: 0.2rem;
}

.settings-location-hours-list > span {
    color: var(--color-text);
    line-height: 1.35;
    white-space: nowrap;
}

.settings-table-value-stack {
    display: grid;
    gap: 0.18rem;
    align-content: start;
}

.settings-table-value-stack > strong {
    color: var(--color-text);
    font-weight: 700;
}

.settings-table-value-stack > small {
    color: var(--color-text-muted);
}

.settings-table-value-stack > .settings-status-pill {
    justify-self: start;
}

.settings-users-atomic-value,
.settings-users-last-login-cell .settings-field-value {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .settings-entity-resource-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-location-hours-list > span {
        white-space: normal;
    }

    .settings-users-atomic-value,
    .settings-users-last-login-cell .settings-field-value {
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

.settings-provider-capabilities {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 260px;
    white-space: normal;
}

.settings-provider-capability {
    display: grid;
    gap: 0.3rem;
}

.settings-provider-capability > code {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
    line-height: 1.35;
}

.settings-provider-capability small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
}

.settings-provider-capability ol {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding-left: 1.35rem;
}

.settings-provider-capability li,
.settings-provider-native-calls code {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
}

.settings-provider-native-calls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.settings-provider-native-calls code {
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--button-border);
    border-radius: 0.3rem;
    background: var(--button-bg);
}

.settings-provider-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--button-border);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--color-text);
    cursor: pointer;
}

.settings-provider-status-toggle.active {
    border-color: #86c59a;
    background: #e8f5ed;
    color: #166534;
}

.settings-provider-status-toggle.inactive {
    border-color: #e8a8a3;
    background: #feeceb;
    color: #991b1b;
}

.settings-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.settings-actions-cell .settings-record-actions {
    justify-content: flex-start;
}

.settings-row-actions button:not(.ui-button) {
    min-width: 38px;
    min-height: 34px;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
}

.settings-row-action-label {
    display: none;
}

.settings-row-actions .settings-delete-row {
    color: var(--color-danger-text);
    background: var(--color-danger-soft);
}

.settings-record-actions .settings-air-delete-row {
    color: var(--color-danger-text);
    background: var(--color-danger-soft);
}

.settings-row-more-actions {
    position: relative;
}

.settings-row-more-actions > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 34px;
    border: 1px solid var(--button-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    list-style: none;
}

.settings-row-more-actions > summary::-webkit-details-marker {
    display: none;
}

.settings-row-more-menu {
    position: absolute;
    z-index: 8;
    top: calc(100% + 0.3rem);
    right: 0;
    min-width: 8.5rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.settings-row-more-menu button {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    white-space: nowrap;
}

.settings-empty {
    padding: 1rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-muted);
    background-color: var(--color-surface-muted);
}

.settings-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-form:empty {
    display: none;
}

.settings-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.settings-address-field {
    position: relative;
}

.settings-address-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.2rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

.settings-address-suggestions[hidden] {
    display: none;
}

.settings-address-suggestion {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-bottom: 1px solid var(--color-border-muted);
    color: var(--color-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.settings-address-suggestion:hover,
.settings-address-suggestion:focus {
    background-color: var(--color-surface-muted);
}

.settings-address-suggestion small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-address-attribution {
    padding: 0.4rem 0.65rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    text-align: right;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.settings-field-note {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-form-note {
    padding: 0.55rem 0.65rem;
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-form-field label {
    color: var(--color-text-subtle);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
}

.settings-field-label-with-note {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.settings-label-note {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 500;
}

.settings-form-field input,
.settings-form-field select,
.settings-form-field textarea {
    min-height: 40px;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--input-border);
    color: var(--input-text);
    background-color: var(--input-bg);
    box-sizing: border-box;
}

.settings-form-field .password-field input {
    padding-right: 42px;
}

.settings-form-field .password-field {
    position: relative;
}

.settings-form-field .password-field.has-password-generator input[data-password-input] {
    padding-right: 78px;
}

.password-generate {
    position: absolute;
    top: 50%;
    right: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    color: var(--color-text-subtle);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-generate:hover,
.password-generate:focus {
    color: var(--color-brand);
}

.settings-department-final-target-empty {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
}

.settings-form-field input[type="checkbox"] {
    min-height: auto;
}

.settings-user-device-table-wrap {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface);
}

.settings-user-device-table {
    width: 100%;
    min-width: 36rem;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.settings-user-device-assignee-column {
    width: 13rem;
}

.settings-user-device-endpoints-column {
    width: 10.5rem;
}

.settings-user-device-table th,
.settings-user-device-table td {
    height: 2.1rem;
    padding: 0.2rem 0.55rem;
    border-bottom: 1px solid var(--color-border-muted);
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
}

.settings-user-device-table thead th {
    height: 1.85rem;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-user-access,
.settings-phone-number-users {
    grid-column: 1 / -1;
    gap: 0.65rem;
}

.settings-user-access[hidden],
.settings-phone-number-users[hidden] {
    display: none;
}

.settings-user-access-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.settings-user-access-heading > div {
    display: grid;
    gap: 0.15rem;
}

.settings-user-access-heading small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 600;
}

.settings-user-access-organizations,
.settings-user-access-accounts {
    display: grid;
    gap: 0.5rem;
}

.settings-user-access-organizations {
    padding: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface-muted);
}

.settings-user-access-organization,
.settings-user-access-location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 11rem);
    align-items: center;
    gap: 0.65rem;
}

.settings-user-access-organization > label,
.settings-user-access-location > label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    cursor: pointer;
}

.settings-user-access-organization input,
.settings-user-access-location input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-feature-settings);
}

.settings-user-access-organization select,
.settings-user-access-location select {
    width: 100%;
    min-width: 0;
}

.settings-user-access-account {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface);
}

.settings-user-access-account.is-selected {
    border-color: var(--color-feature-settings);
    box-shadow: inset 3px 0 0 var(--color-feature-settings);
}

.settings-user-access-account-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(9.5rem, 12rem) minmax(8.5rem, 11rem);
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
}

.settings-user-access-account-row > label {
    display: block;
    min-width: 0;
}

.settings-user-access-account-row select {
    width: 100%;
    min-width: 0;
}

.settings-user-access-account-toggle {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.settings-user-access-account-toggle:disabled {
    cursor: default;
}

.settings-user-access-account-toggle strong {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-user-access-locations {
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem 0.65rem 0.65rem 2.4rem;
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);
}

.settings-user-access-locations[hidden] {
    display: none;
}

.settings-user-access-locations > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-phone-number-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-phone-number-users > :not(.settings-phone-number-user-choice) {
    grid-column: 1 / -1;
}

.settings-phone-number-user-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface);
    cursor: pointer;
}

.settings-phone-number-user-choice > input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    accent-color: var(--color-feature-settings);
}

.settings-phone-number-user-choice > span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.settings-phone-number-user-choice small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-phone-number-user-roles {
    display: grid;
    gap: 0.15rem;
}

@media (max-width: 760px) {
    .settings-user-access-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-user-access-account-row,
    .settings-user-access-organization,
    .settings-user-access-location {
        grid-template-columns: 1fr;
    }

    .settings-user-access-locations {
        padding-left: 0.65rem;
    }

    .settings-user-access,
    .settings-user-devices {
        overflow: visible;
    }

    .settings-user-access-account-row {
        align-items: stretch;
        padding: 0.75rem;
    }

    .settings-user-access-account-toggle {
        min-height: 2.75rem;
        padding: 0.45rem 0.55rem;
        border-radius: var(--settings-ui-radius-sm);
        background: var(--color-surface-muted);
    }

    .settings-user-access-location {
        padding: 0.65rem;
        border: 1px solid var(--color-border-muted);
        border-radius: var(--settings-ui-radius-sm);
        background: var(--color-surface);
    }

    .settings-user-device-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .settings-user-device-table,
    .settings-user-device-table :is(tbody, tr, td) {
        height: auto;
    }

    .settings-user-device-table tr {
        min-height: 0;
    }

    .settings-user-device-table .settings-user-device-name,
    .settings-user-device-table .settings-user-device-assignee,
    .settings-user-device-table .settings-user-device-endpoints {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .settings-phone-number-users {
        grid-template-columns: 1fr;
    }

    .settings-phone-number-users > :not(.settings-phone-number-user-choice) {
        grid-column: 1;
    }
}

.settings-user-devices {
    grid-column: 1 / -1;
}

.settings-user-devices-heading {
    display: grid;
    align-self: start;
    gap: 0.2rem;
    min-width: 0;
}

.settings-user-devices-heading > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-user-devices-heading > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-editor > .settings-user-devices > :is(
    .settings-user-device-table-wrap,
    .settings-field-note
) {
    grid-column: 2;
    width: 100%;
}

.settings-user-device-table tbody .settings-user-device-row:last-child > * {
    border-bottom: 0;
}

.settings-user-device-row.is-unavailable > * {
    background: var(--color-surface-muted);
}

.settings-user-device-choice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    cursor: pointer;
}

.settings-user-device-row.is-unavailable .settings-user-device-choice {
    cursor: not-allowed;
}

.settings-user-device-choice input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-feature-settings);
    cursor: pointer;
}

.settings-user-device-choice input:disabled {
    cursor: not-allowed;
}

.settings-user-device-name,
.settings-user-device-assignee,
.settings-user-device-endpoints {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-user-device-name {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-user-device-assignee {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-user-device-endpoints {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-user-change-reason {
    grid-column: 1 / -1;
}

.settings-user-change-reason[hidden] {
    display: none;
}

.settings-user-mfa-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.75rem;
}

.settings-user-mfa-heading {
    display: grid;
    align-self: start;
    gap: 0.2rem;
    grid-column: 1;
}

.settings-user-mfa-heading p {
    margin: 0;
}

.settings-user-mfa-heading .settings-control-panel-title {
    margin-bottom: 0.25rem;
}

.settings-user-mfa-content {
    display: grid;
    grid-column: 2;
    gap: 0.65rem;
    min-width: 0;
}

.settings-user-mfa-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
}

.settings-user-mfa-toggle > span {
    display: grid;
    gap: 0.1rem;
    margin-right: auto;
}

.settings-user-mfa-toggle strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-user-mfa-toggle small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-user-mfa-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--color-feature-settings);
}

.settings-user-mfa-toggle.is-locked {
    background: var(--color-surface-muted);
    cursor: not-allowed;
}

.settings-user-mfa-exception {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem;
    border: 1px solid #f2c57c;
    border-radius: 6px;
    background: #fff8ed;
    color: #92500b;
}

.settings-user-mfa-exception[hidden] {
    display: none;
}

.settings-user-mfa-exception > div {
    display: grid;
    gap: 0.3rem;
}

.settings-user-mfa-exception label {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
}

.settings-user-mfa-exception label[hidden] {
    display: none;
}

.settings-user-mfa-exception input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.05rem 0 0;
}

.settings-user-mfa-reset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-user-mfa-reset /* Legacy action buttons share ui_primitives.css. */

.settings-air-tool-data-import {
    grid-column: 1 / -1;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    padding: 0.75rem;
}

.settings-air-tool-data-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.settings-air-tool-data-import-prompt textarea {
    min-height: 155px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--settings-ui-type-helper);
    line-height: 1.45;
    background: var(--color-surface-muted);
}

.settings-air-runtime-prompts {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--color-surface-muted);
}

.settings-air-runtime-prompt {
    display: grid;
    gap: 0.35rem;
}

.settings-air-runtime-prompt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: var(--settings-ui-type-helper);
}

.settings-air-runtime-prompt-meta span,
.settings-air-runtime-prompt-meta code {
    color: var(--color-text-muted);
}

.settings-air-runtime-prompt textarea {
    min-height: 115px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--settings-ui-type-helper);
    line-height: 1.45;
    background: var(--color-surface);
}

.settings-air-tool-data-import-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    background-color: var(--button-bg);
    color: var(--color-text);
    cursor: pointer;
}

.settings-air-tool-data-import-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    margin-top: 0.6rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface-muted);
    color: var(--color-text);
}

.settings-air-tool-data-import-status .gmi {
    margin-top: 0.1rem;
}

.settings-air-tool-data-import-status strong {
    display: block;
    margin-bottom: 0.15rem;
}

.settings-air-tool-data-import-status p,
.settings-air-tool-data-import-status small {
    display: block;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.settings-air-tool-data-import-status-loading .gmi {
    animation: settings-spin 1.15s linear infinite;
}

.settings-air-tool-data-import-status-success {
    border-color: var(--color-success-border);
    background-color: var(--color-success-soft);
}

.settings-air-tool-data-import-status-error {
    border-color: var(--color-danger-border);
    background-color: var(--color-danger-soft);
}

@keyframes settings-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.settings-air-tool-data-dragging {
    opacity: 0.45;
}

.settings-air-required-data {
    grid-column: 1 / -1;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    padding: 0.75rem;
}

.settings-air-required-data-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-border-muted);
}

.settings-air-required-data-title {
    color: var(--color-text);
    font-weight: 700;
}

.settings-air-required-data-status {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-required-data-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--color-text);
}

.settings-air-tools-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-air-tool-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 420px);
    gap: 0.75rem;
    align-items: end;
}

.settings-air-available-tools {
    display: grid;
    gap: 0.75rem;
}

.settings-air-tool-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.settings-air-tool-template-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 128px;
    padding: 0.8rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.settings-air-tool-template-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 6.25rem;
}

.settings-air-tool-template-title {
    color: var(--color-text);
    font-weight: 700;
}

.settings-air-tool-template-meta {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-tool-type-actions {
    margin-top: 0;
}

.settings-air-tool-template-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-air-tool-template-list-label {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-transform: uppercase;
}

.settings-air-tool-template-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.settings-air-tool-template-option-copy {
    min-width: 0;
}

.settings-air-tool-template-option-title {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: 700;
}

.settings-air-tool-template-option-meta {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-air-tool-row-required .settings-air-tool-drag {
    cursor: default;
    opacity: 0.45;
}

.settings-air-table-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-air-table-main {
    color: var(--color-text);
}

.settings-air-table-sub {
    margin-left: 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-agent-greeting-cell {
    width: min(42rem, 50vw);
    min-width: 24rem;
    max-width: 42rem;
}

.settings-air-agent-greeting-cell .settings-air-table-main {
    display: block;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-air-table-detail-row td {
    padding-top: 0.45rem;
    padding-bottom: 0.65rem;
    background: var(--color-surface-muted);
    white-space: normal;
}

.settings-air-agent-tools-detail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.75rem;
}

.settings-air-agent-tools-detail > strong {
    padding-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.settings-air-agent-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.settings-air-agent-tool-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--color-info-border);
    border-radius: 999px;
    background: var(--color-info-soft);
    color: var(--color-info-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.settings-air-agent-tool-chip.is-empty {
    border-color: var(--color-border-muted);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.settings-air-agent-voice-cell {
    min-width: max-content;
    white-space: nowrap;
}

.settings-air-agent-voice-cell .settings-air-table-sub {
    margin-left: 0;
}

@media (max-width: 700px) {
    .settings-air-agent-greeting-cell {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .settings-air-agent-voice-cell {
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .settings-air-agents-table .settings-air-table-detail-row {
        margin-top: -0.65rem;
        padding-top: 0.6rem;
        border-top: 0;
        border-radius: 0 0 var(--settings-ui-radius-md) var(--settings-ui-radius-md);
        box-shadow: none;
    }

    .settings-air-agents-table .settings-air-table-detail-row td::before {
        display: none !important;
    }

    .settings-air-agent-tools-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }
}

.settings-air-template-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--color-text);
}

.settings-admin-console {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.settings-admin-console-subtabs button small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    min-height: 1.45rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-admin-console-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.settings-admin-console-connected-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.settings-admin-console-connected-summary > div {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-connected-summary strong {
    color: var(--color-text);
    font-size: 1.1rem;
}

.settings-admin-console-connected-summary > div > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-user-row {
    cursor: pointer;
}

.settings-admin-console-user-row:hover > td {
    background: var(--color-feature-settings-soft);
}

.settings-admin-console-user-row:focus-visible {
    outline: 2px solid var(--color-feature-settings);
    outline-offset: -2px;
}

.settings-admin-console-user-sessions-row[hidden] {
    display: none !important;
}

.settings-admin-console-user-sessions-row > td {
    padding: 0.75rem !important;
    background: var(--color-surface-muted);
}

.settings-admin-console-user-sessions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.65rem;
}

.settings-admin-console-user-session {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-admin-console-user-session-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
}

.settings-admin-console-user-session-heading span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-user-session dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.settings-admin-console-user-session dl > div {
    min-width: 0;
}

.settings-admin-console-user-session dt {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-transform: uppercase;
}

.settings-admin-console-user-session dd {
    margin: 0.16rem 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

@media (max-width: 620px) {
    .settings-admin-console-user-session dl {
        grid-template-columns: 1fr;
    }
}

.settings-admin-console-log-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface-muted);
}

.settings-admin-console-log-panel h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-log-panel p {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-actions,
.settings-admin-console-log-controls,
.settings-admin-console-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-start;
}

.settings-admin-console-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.settings-admin-console-summary > div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.settings-admin-console-summary span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-transform: uppercase;
}

.settings-admin-console-summary strong {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-summary small {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
}

.settings-entity-note-response {
    margin-top: 0.45rem;
    border-left: 0.2rem solid var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
    padding: 0.45rem 0.55rem;
    color: var(--color-text);
    white-space: pre-wrap;
}

.settings-muted-row {
    opacity: 0.7;
}

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

.settings-admin-console-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-muted);
}

.settings-admin-console-loading .gmi {
    animation: settings-spin 1.15s linear infinite;
}

.settings-admin-console-log-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.settings-admin-console-log-controls {
    align-items: center;
}

.settings-admin-console-log-controls select {
    min-height: 36px;
    max-width: min(360px, 58vw);
    border: 1px solid var(--button-border);
    border-radius: 6px;
    background-color: var(--button-bg);
    color: var(--color-text);
}

.settings-admin-console-policy,
.settings-admin-console-mini-panel,
.settings-admin-console-service-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-admin-console-panel-title {
    display: grid;
    gap: 0.2rem;
}

.settings-admin-console-panel-title h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-panel-title p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-admin-console-panel-title code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-restart-visual {
    display: grid;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-feature-settings), transparent 48%);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-feature-settings-soft), transparent 18%), transparent 72%),
        var(--color-surface-muted);
}

.settings-admin-console-restart-visual-header,
.settings-admin-console-restart-visual-header > div:first-child,
.settings-admin-console-restart-legend,
.settings-admin-console-restart-current {
    display: flex;
    align-items: center;
}

.settings-admin-console-restart-visual-header {
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-admin-console-restart-visual-header > div:first-child {
    min-width: 0;
    gap: 0.55rem;
}

.settings-admin-console-restart-visual-header > div:first-child > .gmi {
    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-feature-settings);
    color: var(--color-feature-settings-text);
}

.settings-admin-console-restart-visual h5,
.settings-admin-console-restart-visual p {
    margin: 0;
}

.settings-admin-console-restart-visual h5 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-restart-visual p {
    margin-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-admin-console-restart-legend {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.settings-admin-console-restart-legend span {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    white-space: nowrap;
}

.settings-admin-console-restart-legend strong {
    color: var(--color-text);
}

.settings-admin-console-restart-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.35rem;
    align-items: stretch;
}

.settings-admin-console-restart-step {
    display: grid;
    align-content: start;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid var(--color-border-muted);
    border-top: 3px solid var(--color-feature-settings);
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-surface), transparent 4%);
    box-shadow: var(--shadow-sm);
}

.settings-admin-console-restart-step.qualify,
.settings-admin-console-restart-step.attempt {
    border-top-color: var(--color-warning-border);
}

.settings-admin-console-restart-step.cooldown {
    border-top-color: var(--color-warning-text);
}

.settings-admin-console-restart-step.reset {
    border-top-color: var(--color-success-border);
}

.settings-admin-console-restart-step-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.settings-admin-console-restart-step > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.25;
}

.settings-admin-console-restart-step > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-admin-console-restart-arrow {
    align-self: center;
    color: var(--color-text-muted);
    font-size: 1.15rem;
}

.settings-admin-console-restart-current {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.15rem;
}

.settings-admin-console-restart-current-label {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-admin-console-restart-current-empty,
.settings-admin-console-restart-current-item {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--color-success-border);
    border-radius: 6px;
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-restart-current-item {
    display: grid;
    gap: 0.05rem;
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-admin-console-restart-current-item strong,
.settings-admin-console-restart-current-item small {
    font-size: inherit;
}

.settings-admin-console-health-warning {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    color: var(--color-warning-text);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.25;
}

.settings-admin-console-health-warning .gmi {
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-command-guide {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--runbook-accent) 35%, var(--color-border));
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--runbook-accent-soft) 55%, var(--color-background));
}

.settings-runbook-command-guide-header {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.settings-runbook-command-guide-header > .gmi {
    color: var(--runbook-accent);
}

.settings-runbook-command-guide-header h3,
.settings-runbook-command-guide-header p {
    margin: 0;
}

.settings-runbook-command-guide-header h3 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-command-guide-header p {
    max-width: 850px;
    margin-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
}

.settings-runbook-command-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.settings-runbook-guide-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-runbook-guide-field input,
.settings-runbook-guide-field select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    color: var(--color-text);
    background: var(--color-surface);
    box-sizing: border-box;
    font: inherit;
    font-weight: 550;
}

.settings-runbook-guide-field input[readonly] {
    cursor: default;
    color: var(--color-text-muted);
    background: var(--color-background);
}

.settings-runbook-guide-apply {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 650;
}

.settings-runbook-guide-field .settings-runbook-guide-apply input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    accent-color: var(--runbook-accent);
}

.settings-runbook-guide-field input:focus,
.settings-runbook-guide-field select:focus {
    border-color: var(--runbook-accent);
    outline: 2px solid color-mix(in srgb, var(--runbook-accent) 20%, transparent);
    outline-offset: 1px;
}

.settings-runbook-guide-checkbox {
    display: flex;
    align-items: center;
    align-self: end;
    gap: 0.45rem;
    min-height: 44px;
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-runbook-guide-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--runbook-accent);
}

.settings-runbook-guide-checkbox input:disabled + span {
    color: var(--color-text-muted);
}

.settings-runbook-command-guide-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-left: 3px solid var(--runbook-accent);
    border-radius: 0.45rem;
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
}

.settings-runbook-command-guide-note .gmi {
    color: var(--runbook-accent);
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-command-guide-output pre {
    max-height: 34rem;
    overflow: auto;
}

@media (max-width: 1100px) {
    .settings-admin-console-restart-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-admin-console-restart-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

.settings-admin-console-policy-list {
    display: grid;
    gap: 0.6rem;
}

.settings-admin-console-policy-list label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-policy-list strong {
    display: block;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-policy-list small {
    display: block;
    margin-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-admin-console-policy-list input[type="number"] {
    min-height: 36px;
    width: min(8rem, 100%);
    justify-self: end;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.35rem 0.5rem;
}

.settings-admin-console-policy-list input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    justify-self: end;
}

.settings-admin-console-policy-nested {
    display: grid;
    gap: 0.55rem;
    margin-left: 0.75rem;
    padding-left: 0.85rem;
    border-left: 2px solid color-mix(in srgb, var(--color-feature-settings), transparent 55%);
}

.settings-admin-console-policy-nested label {
    background: var(--color-surface);
}

.settings-admin-console-policy-group-title {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.35rem;
}

.settings-admin-console-policy-group-title strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-policy-group-title small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-admin-console-delivery-destinations {
    display: grid;
    gap: 0.75rem;
}

.settings-admin-console-recipient-settings {
    width: min(100%, 92rem);
}

.settings-admin-console-destination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
    gap: 0.75rem;
}

.settings-admin-console-delivery-destination {
    margin: 0;
}

.settings-admin-console-destination-fields {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.settings-admin-console-destination-fields label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-admin-console-delivery-destination textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 3.8rem;
    resize: vertical;
}

.settings-admin-console-policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.settings-admin-console-policy-grid label,
.settings-admin-console-date-filter {
    display: grid;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-admin-console-policy-grid input[type="number"],
.settings-admin-console-date-filter input,
.settings-admin-console-date-filter select {
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.35rem 0.5rem;
}

.settings-admin-console-policy-grid input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
}

.settings-admin-console-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
    white-space: nowrap;
}

.settings-admin-console-inline-toggle input {
    width: 1rem;
    height: 1rem;
}

.settings-admin-console-service-card {
    min-width: 0;
}

.settings-admin-console-alerts-recovery {
    display: grid;
    gap: 1rem;
}

body.settings-view #settings_content:has(> .settings-admin-console > .settings-admin-console-workers) {
    overflow: hidden;
}

body.settings-view #settings_content > .settings-admin-console:has(> .settings-admin-console-workers) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.settings-admin-console-workers {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.settings-admin-console-worker-layout {
    display: grid;
    grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
    flex: 1 1 auto;
    gap: 1rem;
    align-items: stretch;
    height: auto;
    min-width: 0;
    min-height: 0;
}

.settings-admin-console-worker-rail {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    justify-items: stretch;
    position: static;
    height: 100%;
    max-height: none;
    padding: 0.7rem;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-gutter: stable;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface-muted);
}

.settings-admin-console-worker-rail section {
    display: grid;
    gap: 0.35rem;
    justify-items: stretch;
    text-align: left;
}

.settings-admin-console-worker-rail h3 {
    margin: 0;
    padding: 0 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-admin-console-worker-choice {
    display: grid;
    gap: 0.12rem;
    justify-content: stretch;
    justify-items: start;
    width: 100%;
    min-width: 0;
    padding: 0.52rem 0.6rem;
    border: 1px solid transparent;
    border-left: 3px solid var(--color-border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-admin-console-worker-choice.is-healthy {
    border-left-color: var(--color-success-border);
}

.settings-admin-console-worker-choice.is-unhealthy {
    border-left-color: var(--color-danger-border);
}

.settings-admin-console-worker-choice.is-stopped {
    border-left-color: var(--color-warning-border);
}

.settings-admin-console-worker-choice:hover,
.settings-admin-console-worker-choice:focus-visible,
.settings-admin-console-worker-choice.is-active {
    border-color: var(--color-feature-settings);
    border-left-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
    outline: none;
}

.settings-admin-console-worker-choice > span {
    width: 100%;
    overflow: hidden;
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
    text-overflow: ellipsis;
    text-align: left;
    white-space: nowrap;
}

.settings-admin-console-worker-choice > small {
    width: 100%;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    text-align: left;
}

.settings-admin-console-worker-content,
.settings-admin-console-worker-overview {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.settings-admin-console-worker-content {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.settings-admin-console-worker-panel-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.settings-admin-console-worker-panel-content > * {
    flex: 0 0 auto;
}

.settings-admin-console-worker-overview > .settings-ui-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-admin-console-workload-snapshot > .settings-ui-summary-grid,
.settings-admin-console-worker-diagnostics-view > .settings-ui-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-admin-console-worker-diagnostics-view {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.settings-admin-console-worker-overview > .settings-ui-summary-grid .settings-ui-summary-card {
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
}

.settings-admin-console-worker-overview > .settings-ui-summary-grid .settings-ui-summary-card strong {
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-criteria-panel {
    grid-column: 1 / -1;
    width: 100%;
}

.settings-twilio-resource-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.settings-admin-console-worker-header-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.settings-admin-console-worker-tabs {
    justify-content: flex-start;
    margin: 0;
}

.settings-admin-console-worker-operating-state {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-admin-console-worker-operating-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-admin-console-worker-operating-toggle:hover,
.settings-admin-console-worker-operating-toggle:focus-visible {
    background: var(--color-surface-muted);
}

.settings-admin-console-worker-operating-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    background: var(--color-border-muted);
}

.settings-admin-console-worker-operating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    background: var(--color-surface);
}

.settings-admin-console-worker-operating-item > span:first-child {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-worker-operating-chevron {
    padding: 0 0.65rem;
    color: var(--color-text-muted);
}

.settings-admin-console-worker-operating-details {
    padding: 0.35rem 0.75rem 0.55rem;
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);
}

.settings-admin-console-worker-work-policy > .settings-ui-panel-body {
    display: grid;
    gap: 1rem;
}

.settings-admin-console-rule-owner {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-medium);
    white-space: nowrap;
}

.settings-admin-console-rule-owner .gmi {
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-rule-owner.is-code_protected {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-admin-console-rule-owner.is-configurable {
    border-color: color-mix(in srgb, var(--color-feature-settings) 35%, var(--color-border-muted));
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-admin-console-rule-owner.is-live_state {
    border-color: var(--color-success-border, var(--color-border-muted));
    background: var(--color-success-soft, var(--color-surface-muted));
    color: var(--color-success-text, var(--color-text));
}

.settings-admin-console-rule-owner-legend {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: fit-content;
    margin-top: 0.55rem;
}

.settings-admin-console-work-recovery-copy {
    flex: 1 1 28rem;
    min-width: 12rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-panel-header > .settings-admin-console-rule-owner-legend {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0;
}

.settings-admin-console-rule-owner-legend > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-admin-console-work-subsection {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.settings-admin-console-work-subsection > h4 {
    margin: 0;
}

.settings-admin-console-work-gates {
    display: grid;
    gap: 0;
    margin: 0;
}

.settings-admin-console-work-gates > div {
    display: grid;
    grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    min-width: 0;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-admin-console-work-gates > div:last-child {
    border-bottom: 0;
}

.settings-admin-console-work-gates dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
    font-weight: var(--settings-ui-weight-medium);
}

.settings-admin-console-work-gates dd {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console-work-rule-tabs {
    justify-content: flex-start;
    margin: 0;
}

.settings-admin-console-work-rules-table {
    min-width: 0;
}

.settings-admin-console-work-rules-table table {
    width: 100%;
    table-layout: fixed;
}

.settings-admin-console-work-rules-table :is(th, td) {
    vertical-align: top;
    white-space: normal;
}

.settings-admin-console-work-rules-table :is(th, td):first-child {
    width: 23%;
}

.settings-admin-console-work-rules-table :is(th, td):last-child {
    width: auto;
}

.settings-admin-console-work-rules-table tbody th > span:first-child,
.settings-admin-console-work-rules-table tbody td > span:first-child,
.settings-admin-console-work-rules-table tbody td small {
    display: block;
}

.settings-admin-console-work-rules-table tbody th .settings-admin-console-rule-owner {
    margin-top: 0.2rem;
}

.settings-admin-console-work-rules-table tbody td small {
    margin-top: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-media-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.settings-admin-console-queue-locked-scope > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    text-transform: uppercase;
}

.settings-admin-console-websocket-facts {
    margin: 0;
}

.settings-admin-console-worker-diagnostics .settings-admin-console-output {
    margin: 0;
}

.settings-admin-console-queue-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.settings-admin-console-queue-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-admin-console-queue-filter:hover,
.settings-admin-console-queue-filter:focus-visible,
.settings-admin-console-queue-filter.is-active {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
}

.settings-admin-console-queue-filter strong {
    color: var(--color-feature-settings);
}

.settings-admin-console-work-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.settings-admin-console-work-filter-bar > label:not(.settings-admin-console-work-search) {
    flex: 1 1 11rem;
    min-width: 8rem;
}

.settings-admin-console-work-filter-bar > .settings-admin-console-work-search {
    flex: 3 1 22rem;
}

.settings-admin-console-work-filter-bar > .settings-ui-button {
    flex: 0 0 auto;
}

.settings-admin-console-queue-locked-scope {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    min-width: 11rem;
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-queue-locked-scope > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-queue-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.settings-admin-console-queue-primary,
.settings-admin-console-queue-timeline {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.settings-admin-console-queue-primary small,
.settings-admin-console-queue-timeline small {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.settings-admin-console-queue-worker-link {
    width: max-content;
    margin-top: 0.18rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-feature-settings);
    font: inherit;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    cursor: pointer;
}

.settings-admin-console-queue-worker-link:hover,
.settings-admin-console-queue-worker-link:focus-visible {
    text-decoration: underline;
}

.settings-admin-console-work-items > h4 {
    margin: 0 0 0.55rem;
}

.settings-admin-console-work-detail-row > td {
    padding: 0;
    background: var(--color-surface-muted);
}

.settings-admin-console-work-item-details {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

.settings-admin-console-work-pagination {
    margin-top: 0;
    border-top: 0;
}

.settings-admin-console-unified-queue .settings-col-actions {
    width: 1%;
    white-space: nowrap;
}

.settings-admin-console-queue-timeline small {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(9.5rem, 1fr);
    gap: 0.4rem;
}

.settings-admin-console-queue-timeline time {
    color: var(--color-text);
    white-space: nowrap;
}

.settings-admin-console-work-search {
    min-width: min(22rem, 100%);
    flex: 1 1 18rem;
}

.settings-admin-console-queue-worker-navigation {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-surface-muted) 72%, var(--color-surface));
}

.settings-admin-console-queue-worker-navigation > div:first-child {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.settings-admin-console-queue-worker-navigation > div:first-child small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-queue-worker-navigation > .settings-ui-action-group {
    justify-content: flex-end;
}

@media (max-width: 720px) {
    body.settings-view #settings_content:has(> .settings-admin-console > .settings-admin-console-workers) {
        overflow-y: auto;
    }

    body.settings-view #settings_content > .settings-admin-console:has(> .settings-admin-console-workers) {
        height: auto;
    }

    .settings-admin-console-workers {
        flex: 0 0 auto;
        overflow: visible;
    }

    .settings-admin-console-worker-overview > .settings-ui-summary-grid,
    .settings-admin-console-workload-snapshot > .settings-ui-summary-grid,
    .settings-admin-console-worker-diagnostics-view > .settings-ui-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }

    .settings-admin-console-worker-layout {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .settings-admin-console-worker-rail {
        display: flex;
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .settings-admin-console-worker-content {
        grid-template-rows: auto;
        height: auto;
        overflow: visible;
    }

    .settings-admin-console-worker-operating-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-admin-console-worker-operating-chevron {
        align-self: start;
        padding-top: 0.6rem;
    }

    .settings-admin-console-work-gates > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .settings-admin-console-work-rules-table table {
        table-layout: auto;
    }

    .settings-admin-console-worker-panel-content {
        padding-right: 0;
        overflow: visible;
    }

    .settings-admin-console-worker-rail section {
        flex: 0 0 min(15rem, 80vw);
        scroll-snap-align: start;
    }

    .settings-admin-console-queue-scope {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-admin-console-work-filter-bar {
        flex-wrap: wrap;
    }
}

.settings-admin-console-mini-panel h4 {
    display: block;
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-scheduler-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.55rem;
}

.settings-admin-console-scheduler-fact {
    display: grid;
    align-content: start;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-scheduler-fact > span,
.settings-admin-console-scheduler-fact > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-scheduler-fact > span {
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.settings-admin-console-scheduler-fact > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    overflow-wrap: anywhere;
}

.settings-admin-console-scheduler-details {
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-scheduler-details > h5 {
    margin: 0;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-admin-console-scheduler-detail-list {
    display: grid;
}

.settings-admin-console-scheduler-detail-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-scheduler-detail-row:first-child {
    border-top: 0;
}

.settings-admin-console-scheduler-detail-row > strong {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-scheduler-detail-row.error > span {
    color: var(--color-warning-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-admin-console-scheduler-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.settings-admin-console-scheduler-service-list code {
    max-width: 100%;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .settings-admin-console-scheduler-detail-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }
}

.settings-admin-console-health-section {
    display: grid;
    gap: 0.75rem;
}

.settings-admin-console-health-section > h4 {
    margin: 0.15rem 0 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-output-panel {
    display: grid;
    gap: 0.45rem;
}

.settings-admin-console-job-panel {
    display: grid;
    gap: 0.65rem;
}

.settings-admin-console-output-panel h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-criteria-table .settings-col-criterion {
    width: 30%;
    color: var(--color-text);
    font-weight: 700;
    text-align: left;
}

.settings-admin-console-criteria-table {
    width: 100%;
    min-width: 54rem;
    table-layout: fixed;
}

.settings-admin-console-criteria-table .settings-col-effective {
    width: 40%;
}

.settings-admin-console-criteria-table tbody :is(th, td) {
    font-size: var(--settings-ui-type-body);
    line-height: 1.4;
}

.settings-admin-console-criteria-table tbody .settings-col-effective {
    color: var(--color-text);
    font-weight: 600;
}

.settings-admin-console-criteria-table tbody .settings-col-managed-by {
    color: var(--color-text-muted);
}

.settings-admin-console-criteria-table tbody tr:not(:last-child) > * {
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-admin-console-criteria-table .settings-col-managed-by {
    width: 30%;
}

.settings-admin-console-service-card small {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    overflow-wrap: anywhere;
}

.settings-admin-console-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.settings-admin-console-dashboard-grid > .settings-admin-console-mini-panel {
    align-content: start;
    align-self: start;
}

.settings-admin-console-service-card {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
}

.settings-admin-console-service-card strong {
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-service-card small {
    grid-column: 1 / -1;
}

.settings-admin-console-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-admin-console-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: var(--settings-ui-pill-height, 1.75rem);
    padding: 0 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-medium);
    line-height: 1;
}

.settings-admin-console-count-chip strong {
    flex: 0 0 auto;
    color: var(--color-text);
}

.settings-admin-console-count-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-count-list {
    display: grid;
    grid-auto-rows: 2.5rem;
    gap: 0;
    align-content: start;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
}

.settings-admin-console-count-list > :is(div, button) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    box-sizing: border-box;
    height: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-bottom: 1px solid var(--color-border-muted);
    border-radius: 0;
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-count-list > button {
    appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.settings-admin-console-count-list > button:hover,
.settings-admin-console-count-list > button:focus-visible {
    background: var(--color-surface-muted);
}

.settings-admin-console-count-list > :is(div, button):last-child {
    border-bottom: 0;
}

.settings-admin-console-count-list > :is(div, button) > span {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-count-list > :is(div, button) > span > :is(span, small) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-admin-console-count-list > :is(div, button) > span > small {
    flex: 0 1 auto;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console-count-list > :is(div, button) > strong {
    color: var(--color-text);
    font-weight: var(--settings-ui-weight-strong);
    font-variant-numeric: tabular-nums;
}

.settings-admin-console-inline-json {
    max-width: 28rem;
    max-height: 12rem;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--settings-ui-type-meta);
}

.settings-air-review-workbench {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.settings-air-review-operational-tabs {
    margin-bottom: 0.85rem;
}

.settings-review-center > .settings-admin-console-section > .settings-ui-tabs {
    margin-bottom: 0.85rem;
}

.settings-review-center [data-review-center-call-row] {
    cursor: pointer;
}

.settings-air-review-run-grid label,
.settings-air-review-prompt {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-air-review-run-grid input,
.settings-air-review-run-grid select,
.settings-air-review-prompt textarea,
.settings-entity-admin-note-form input,
.settings-entity-admin-note-form select,
.settings-entity-admin-note-form textarea {
    box-sizing: border-box;
    height: var(--settings-ui-control-height);
    min-height: var(--settings-ui-control-height);
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
}

.settings-air-review-prompt textarea,
.settings-entity-admin-note-form textarea {
    height: auto;
    min-height: 86px;
    resize: vertical;
    line-height: 1.45;
}

.settings-air-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
    min-width: 0;
}

.settings-air-review-column {
    display: grid;
    gap: 0.85rem;
    align-content: stretch;
    min-width: 0;
    min-height: 0;
}

.settings-air-review-call-column {
    overflow: hidden;
}

.settings-air-review-call-column > .settings-admin-console-mini-panel {
    height: var(--settings-air-review-workspace-height, 630px);
    min-height: 0;
    min-width: 0;
}

.settings-air-review-call-column > .settings-admin-console-mini-panel {
    display: flex;
    flex-direction: column;
}

.settings-air-review-canvas > .settings-air-review-detail-panel {
    min-height: 100%;
}

.settings-air-review-call-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    isolation: isolate;
    contain: paint;
}

.settings-review-center-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: var(--space-3, 0.75rem);
}

.settings-review-center-load-more.is-loading {
    gap: var(--space-2, 0.5rem);
    color: var(--color-text-subtle);
    font-weight: 700;
}

.settings-air-review-call-table {
    width: max-content;
    min-width: 100%;
}

.settings-table.settings-air-review-call-table th.settings-air-review-pick-cell,
.settings-table.settings-air-review-call-table td.settings-air-review-pick-cell {
    width: 2.1rem;
    min-width: 2.1rem;
    max-width: 2.1rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    text-align: center;
}

.settings-air-review-pick-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.settings-table.settings-air-review-call-table th.settings-air-review-coverage-cell,
.settings-table.settings-air-review-call-table td.settings-air-review-coverage-cell {
    width: 1%;
    min-width: 12.5rem;
    white-space: nowrap;
}

.settings-table.settings-air-review-call-table .settings-air-review-started-cell {
    min-width: 10.5rem;
}

.settings-table.settings-air-review-call-table .settings-air-review-account-cell {
    min-width: 12rem;
    max-width: 16rem;
}

.settings-table.settings-air-review-call-table .settings-air-review-caller-cell,
.settings-table.settings-air-review-call-table .settings-air-review-route-cell {
    min-width: 12rem;
    max-width: 18rem;
}

.settings-air-review-account-cell strong,
.settings-air-review-caller-cell strong,
.settings-air-review-route-cell strong,
.settings-air-review-route-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-table.settings-air-review-call-table .settings-air-review-metric-cell {
    width: 4.5rem;
    min-width: 4.5rem;
    text-align: center;
}

.settings-air-review-metric-cell strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.settings-table.settings-air-review-call-table .settings-air-review-outcome-cell {
    min-width: 10rem;
    text-align: center;
    white-space: nowrap;
}

.settings-table.settings-air-review-call-table .settings-air-review-review-cell {
    min-width: 12rem;
    white-space: nowrap;
}

.settings-table.settings-air-review-call-table .settings-air-review-compare-cell {
    width: 6.75rem;
    min-width: 6.75rem;
    text-align: center;
}

.settings-air-review-call-table tbody tr[data-air-review-call-row] {
    cursor: pointer;
}

.settings-air-review-call-table tbody tr.settings-air-review-tags-row td {
    padding-top: 0;
    border-top: 0;
    background: color-mix(in srgb, var(--color-surface-muted) 54%, transparent);
}

.settings-air-review-call-table tbody tr.settings-air-review-tags-row .settings-air-review-tags-cell {
    min-width: 0;
    padding-bottom: 0.55rem;
    white-space: normal;
}

.settings-air-review-tags-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}

.settings-air-review-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    white-space: nowrap;
}

.settings-air-review-tags-label .gmi {
    font-size: var(--settings-ui-type-body);
}

.settings-air-review-tags-spacer {
    pointer-events: none;
}

.settings-air-review-call-table tbody tr.is-selected {
    background: var(--color-feature-settings-soft);
}

.settings-air-review-call-table tbody tr.is-compare-selected:not(.is-selected) {
    background: color-mix(in srgb, var(--color-feature-calls-soft) 52%, var(--color-surface));
}

.settings-air-review-compare-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    min-height: 1.8rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--color-feature-calls) 30%, var(--color-border));
    border-radius: var(--radius-sm, 0.4rem);
    background: var(--color-surface);
    color: var(--color-feature-calls);
    padding: 0.22rem 0.42rem;
    font: inherit;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    cursor: pointer;
}

.settings-air-review-compare-action.is-selected {
    border-color: var(--color-feature-calls);
    background: var(--color-feature-calls-soft);
}

.settings-review-center-comparison-selection small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-review-center-comparison-selection .settings-ui-action-group {
    flex: 0 0 auto;
}

.settings-review-center-comparison-workbench,
.settings-review-center-comparison-host {
    min-width: 0;
    width: 100%;
}

.call-comparison-workspace {
    min-width: 0;
}

.call-comparison-workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--color-border-muted);
    padding: 0 0.1rem 0.6rem;
}

.call-comparison-workspace-tabs > span {
    margin-right: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    text-transform: uppercase;
}

.call-comparison-workspace-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    min-height: 2rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-sm, 0.4rem);
    background: var(--color-surface);
    color: var(--color-text-muted);
    padding: 0.28rem 0.5rem;
    font: inherit;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    cursor: pointer;
}

.call-comparison-workspace-tabs button.is-active {
    border-color: var(--color-feature-calls);
    background: var(--color-feature-calls-soft);
    color: var(--color-feature-calls);
}

.call-comparison-workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr));
    align-items: start;
    gap: 0.85rem;
    min-width: 0;
}

.call-comparison-workspace-item {
    position: relative;
    min-width: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-lg, 0.72rem);
    background: var(--color-surface-muted);
    padding: 2.45rem 0.45rem 0.45rem;
}

.call-comparison-workspace-remove {
    position: absolute;
    z-index: 2;
    top: 0.4rem;
    right: 0.4rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.call-comparison-workspace-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 12rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg, 0.72rem);
    color: var(--color-text-muted);
    font-weight: 800;
}

.call-comparison-workspace-status.is-error {
    border-color: var(--color-danger-border, #f3b5b5);
    color: var(--color-danger-text);
}

.settings-air-review-call-table tbody tr.is-selected td:first-child {
    border-left: 3px solid var(--color-feature-settings);
}

.settings-air-review-call-table small {
    display: block;
    margin-top: 0.18rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.3;
    white-space: nowrap;
}

.settings-air-review-call-account {
    display: block;
    max-width: 16rem;
    margin: 0.12rem 0 0.22rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 850;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-air-review-call-party-line {
    display: grid;
    grid-template-columns: 2rem max-content minmax(0, 9rem);
    gap: 0.42rem;
    align-items: baseline;
    margin-top: 0.2rem;
    min-width: 0;
}

.settings-air-review-call-party-line > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    text-transform: uppercase;
}

.settings-air-review-call-party-line > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: 900;
    white-space: nowrap;
}

.settings-air-review-call-party-line > small {
    min-width: 0;
    max-width: 9rem;
    margin: 0;
    font-size: var(--settings-ui-type-helper);
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-air-review-call-table .entity-note-tags {
    flex-wrap: wrap;
}

.settings-air-review-empty-value {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-review-summary {
    display: grid;
    gap: 0.12rem;
}

.settings-air-review-review-summary strong {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-review-summary strong.is-complete {
    color: var(--color-success-text);
}

.settings-air-review-feedback-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    width: max-content;
    min-height: 24px;
    padding: 0.12rem 0.48rem;
    border: 1px solid var(--color-info-border);
    border-radius: 999px;
    background: var(--color-info-soft);
    color: var(--color-info-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-air-review-feedback-badge .gmi {
    font-size: var(--settings-ui-type-meta);
}

.settings-air-review-turns-count.is-alert {
    color: var(--color-danger-text);
    font-weight: 900;
}

.settings-air-review-coverage-summary {
    display: grid;
    gap: 0.3rem;
    justify-content: start;
    min-width: 11.5rem;
    line-height: 1.2;
}

.settings-air-review-evidence-line {
    display: grid;
    grid-template-columns: 1rem max-content max-content;
    align-items: center;
    gap: 0.35rem;
}

.settings-air-review-evidence-line > .gmi {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
}

.settings-air-review-evidence-line strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 850;
}

.settings-air-review-evidence-line small {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
    line-height: 1.2;
}

.settings-air-review-audio-summary {
    display: inline-grid;
    gap: 0.1rem;
    justify-items: end;
    line-height: 1.1;
}

.settings-air-review-audio-summary strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 900;
}

.settings-air-review-audio-summary small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    white-space: nowrap;
}

.settings-air-review-audio-turn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: max-content;
    justify-self: start;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-muted);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

.settings-air-review-audio-turn-badge.sparse {
    border-color: var(--color-warning-border, #f0c36a);
    background: var(--color-warning-soft, #fff6db);
    color: var(--color-warning-text, #7a4b00);
}

.settings-air-review-audio-turn-badge.dense {
    border-color: var(--color-success-border, #a7d7b8);
    background: var(--color-success-soft, #edf9f1);
    color: var(--color-success-text, #20683b);
}

.settings-air-review-audio-turn-badge.normal {
    border-color: var(--color-border-muted);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.settings-air-review-audio-turn-badge.missing {
    border-color: var(--color-danger-border, #e8a5a5);
    background: var(--color-danger-soft, #fff0f0);
    color: var(--color-danger-text);
}

.settings-air-review-audio-summary.empty {
    color: var(--color-text-muted);
    font-weight: 800;
}

.settings-air-review-drawer-context {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.settings-air-review-drawer-feedback,
.settings-air-review-drawer-notes {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: var(--color-surface);
}

.settings-air-review-drawer-feedback > header,
.settings-air-review-drawer-notes > header,
.settings-air-review-drawer-feedback-entry > header,
.settings-air-review-drawer-note > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-air-review-audience-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.settings-air-review-audience-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 24px;
    padding: 0.12rem 0.48rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-air-review-audience-badge .gmi {
    font-size: var(--settings-ui-type-meta);
}

.settings-air-review-audience-badge.is-customer {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-text);
}

.settings-air-review-audience-badge.is-private {
    border-color: color-mix(in srgb, var(--color-feature-settings) 42%, var(--color-border-muted));
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-air-review-drawer-feedback > header h3,
.settings-air-review-drawer-feedback > header p,
.settings-air-review-drawer-notes > header h3,
.settings-air-review-drawer-notes > header p,
.settings-air-review-drawer-feedback-entry p,
.settings-air-review-drawer-note p {
    margin: 0;
}

.settings-air-review-drawer-feedback > header p,
.settings-air-review-drawer-notes > header p,
.settings-air-review-drawer-feedback-entry time,
.settings-air-review-drawer-note time {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-drawer-feedback-list,
.settings-air-review-drawer-note-list {
    display: grid;
    gap: 0.55rem;
}

.settings-air-review-drawer-feedback-entry,
.settings-air-review-drawer-note {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-air-review-drawer-feedback-entry p,
.settings-air-review-drawer-note p {
    color: var(--color-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.settings-air-review-drawer-feedback-entry > header > div {
    display: grid;
    gap: 0.12rem;
}

.settings-air-review-drawer-feedback-entry .settings-entity-note-response {
    padding: 0.55rem 0.65rem;
    border-left: 3px solid var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-text);
    line-height: 1.4;
}

.settings-air-review-drawer-notes .settings-entity-admin-note-composer {
    margin-top: 0.1rem;
}

.settings-entity-admin-note-form label {
    display: grid;
    gap: 0.38rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 900;
}

.settings-entity-admin-note-form textarea,
.settings-entity-admin-note-form input {
    margin-top: 0;
}

.settings-entity-admin-note-composer {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-entity-admin-note-composer > summary.settings-ui-button {
    width: max-content;
    list-style: none;
    cursor: pointer;
}

.settings-entity-admin-note-composer > summary.settings-ui-button::-webkit-details-marker {
    display: none;
}

.settings-entity-admin-note-composer > summary small {
    padding-left: 0.45rem;
    border-left: 1px solid currentColor;
    opacity: 0.72;
}

.settings-entity-admin-note-composer-body {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.settings-entity-admin-note-composer-body > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-entity-admin-note-composer .settings-entity-admin-note-form {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.settings-air-review-run-panel .settings-admin-console-panel-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.settings-air-review-run-panel {
    display: grid;
    gap: 0.75rem;
}

.settings-air-review-run-panel.is-disabled {
    opacity: 0.72;
}

.settings-air-review-run-panel.is-disabled .settings-air-review-prompt,
.settings-air-review-run-panel.is-disabled .settings-air-review-include-grid,
.settings-air-review-run-panel.is-disabled .settings-air-review-run-grid {
    cursor: not-allowed;
}

.settings-air-review-run-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
}

.settings-air-review-include-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
}

.settings-air-review-detail-panel {
    align-content: start;
    overflow: visible;
}

.settings-air-review-detail-panel > .settings-admin-console-panel-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.settings-air-review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.settings-air-review-tabs button {
    min-height: 32px;
    padding: 0 0.6rem;
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-result {
    display: grid;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-air-review-result > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.settings-air-review-result > strong {
    color: var(--color-text);
    line-height: 1.35;
}

.settings-air-review-result .settings-admin-console-inline-json {
    max-width: none;
}

.settings-air-review-call-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.7rem;
    align-items: start;
    min-width: 0;
}

.settings-air-review-call-detail {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-air-review-call-detail-heading {
    display: grid;
    gap: 0.48rem;
    align-content: start;
    min-width: 0;
    padding-bottom: 0.48rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-air-review-call-detail-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}

.settings-air-review-call-detail-title > div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.settings-air-review-call-detail-title strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: 950;
    line-height: 1.2;
}

.settings-air-review-call-detail-title span {
    max-width: 16rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-air-review-call-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.settings-air-review-call-detail-actions .settings-ui-button span {
    max-width: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    overflow: visible;
}

.settings-air-review-call-reference {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    padding: 0.42rem 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-air-review-call-reference > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-air-review-call-reference code {
    min-width: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    overflow-wrap: anywhere;
}

.settings-air-review-call-reference .settings-ui-button span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.settings-air-review-call-detail-parties {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.settings-air-review-call-detail h5 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-air-review-call-detail h5 span:not(.settings-air-review-ended-by) {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 600;
}

.settings-air-review-analysis-card {
    align-content: start;
}

.settings-air-review-analysis-badges,
.settings-air-review-analysis-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.settings-air-review-analysis-badge,
.settings-air-review-analysis-counts span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.45rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    white-space: nowrap;
}

.settings-air-review-analysis-badge.type {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.settings-air-review-analysis-badge.resolved {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.settings-air-review-analysis-detail-view {
    display: grid;
    gap: 0.55rem;
}

.settings-air-review-analysis-persona-block,
.settings-air-review-analysis-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.42rem;
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-air-review-analysis-persona-block.inquiry {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.settings-air-review-analysis-persona-block.resolution,
.settings-air-review-analysis-summary {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.settings-air-review-analysis-persona {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.settings-air-review-analysis-persona-title,
.settings-air-review-analysis-meta,
.settings-air-review-analysis-tones {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    align-items: center;
    min-width: 0;
}

.settings-air-review-analysis-meta {
    justify-content: flex-end;
    margin-left: auto;
}

.settings-air-review-analysis-persona-label {
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-air-review-analysis-persona-name {
    color: currentColor;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    opacity: 0.86;
}

.settings-air-review-analysis-tones span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 0.4rem;
    border: 1px solid rgba(29, 78, 216, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: currentColor;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.settings-air-review-analysis-persona-block.resolution .settings-air-review-analysis-tones span {
    border-color: rgba(22, 101, 52, 0.14);
}

.settings-air-review-analysis-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 900;
    line-height: 1;
}

.settings-air-review-analysis-score.good {
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.settings-air-review-analysis-score.bad {
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.settings-air-review-analysis-persona-block p,
.settings-air-review-analysis-summary p {
    margin: 0;
    color: #253044;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.settings-air-review-recordings.call-side-recordings {
    display: block;
}

.settings-air-test-live-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.settings-air-review-recordings .call-recording-list {
    display: grid;
    gap: 0.55rem;
}

.settings-air-review-recordings .call-recording-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.62rem;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.settings-air-review-recordings .call-recording-row-main,
.settings-air-review-recordings .call-recording-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.settings-air-review-recordings .call-recording-row-main {
    flex-wrap: nowrap;
}

.settings-air-review-recordings .call-recording-row-main .gmi {
    color: #2563eb;
    font-size: 1.35rem;
}

.settings-air-review-recordings .call-recording-row-main div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
}

.settings-air-review-recordings .call-recording-row-main strong {
    color: #101828;
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-recordings .call-recording-row-main span:not(.gmi) {
    color: #667085;
    font-size: var(--settings-ui-type-meta);
}

.settings-air-review-recordings .call-recording-row-actions {
    justify-content: flex-end;
}

.settings-air-review-recordings .call-recording-row-actions .ui-action-button {
    min-height: 2rem;
    padding: 0.28rem 0.54rem;
    font-size: var(--settings-ui-type-meta);
}

.settings-air-review-recordings .call-recording-row-actions .call-recording-play-toggle {
    min-width: 4.9rem;
}

.settings-air-review-recordings .call-recording-row-actions .ui-action-button.is-playing {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.settings-air-review-recordings .call-recording-speed-control {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.24rem 0.34rem;
    border: 1px solid #cbd7e6;
    border-radius: 0.45rem;
    background: #f8fafc;
    color: #344054;
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.settings-air-review-recordings .call-recording-speed-select {
    min-width: 3.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #172033;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.settings-air-review-recordings .call-recording-playback {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding-top: 0.1rem;
}

.settings-air-review-recordings .call-recording-seek {
    --recording-progress: 0%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    height: 0.44rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0 var(--recording-progress), #d7e2f0 var(--recording-progress) 100%);
    cursor: pointer;
}

.settings-air-review-recordings .call-recording-seek::-webkit-slider-runnable-track {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.settings-air-review-recordings .call-recording-seek::-moz-range-track {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.settings-air-review-recordings .call-recording-seek::-moz-range-progress {
    height: 0.44rem;
    border-radius: 999px;
    background: transparent;
}

.settings-air-review-recordings .call-recording-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.32rem;
    border: 2px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.settings-air-review-recordings .call-recording-seek::-moz-range-thumb {
    width: 0.82rem;
    height: 0.82rem;
    border: 2px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.settings-air-review-recordings .call-recording-seek:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.settings-air-review-recordings .call-recording-time {
    min-width: 5.8rem;
    color: #475467;
    font-size: var(--settings-ui-type-meta);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.settings-air-review-transcript {
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.settings-air-review-transcript.air-call-activity-feed {
    gap: 0.35rem;
    width: 100%;
}

.settings-air-review-transcript .air-call-activity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    color: #344054;
    font-size: var(--settings-ui-type-body);
    line-height: 1.45;
    border-left: 0.25rem solid #d0d5dd;
    border-radius: 0.25rem;
    padding: 0.48rem 0.65rem;
    background: #f8fafc;
}

.settings-air-review-transcript .air-call-activity-line.user {
    border-left-color: #6aa4c8;
    background: #f3f9fd;
}

.settings-air-review-transcript .air-call-activity-line.agent {
    border-left-color: #7bb47d;
    background: #f4fbf4;
}

.settings-air-review-transcript .air-call-activity-line.tool.ok {
    border-left-color: #d59b45;
    background: #fff8ed;
}

.settings-air-review-transcript .air-call-activity-line.api.ok {
    border-left-color: #8d7cc3;
    background: #f7f4ff;
}

.settings-air-review-transcript .air-call-activity-line.tool.failed,
.settings-air-review-transcript .air-call-activity-line.api.failed,
.settings-air-review-transcript .air-call-activity-line.failed {
    border-left-color: #c86a6a;
    background: #fff4f4;
}

.settings-air-review-transcript .air-call-activity-line.tool,
.settings-air-review-transcript .air-call-activity-line.api {
    color: #475467;
}

.settings-air-review-transcript .air-call-activity-meta {
    color: #667085;
    font-weight: 700;
    white-space: nowrap;
}

.settings-air-review-transcript .air-call-activity-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-air-review-transcript .air-tool-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 0.25rem;
    padding: 0.08rem 0.35rem;
    font-size: var(--settings-ui-type-meta);
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.settings-air-review-transcript .air-tool-event-badge.request {
    color: #92500b;
    background: #fff1d6;
    border-color: #f2c57c;
}

.settings-air-review-transcript .air-tool-event-badge.result {
    color: #6f4ba6;
    background: #f2eaff;
    border-color: #d4bdf4;
}

.settings-air-review-transcript .air-tool-event-badge.event {
    color: #475467;
    background: #eef2f6;
    border-color: #d0d5dd;
}

.settings-air-review-transcript-line {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.5rem;
    border-left: 0.25rem solid #d0d5dd;
    border-radius: 4px;
    background: #f8fafc;
}

.settings-air-review-transcript-line.agent {
    border-left-color: #7bb47d;
    background: #f4fbf4;
}

.settings-air-review-transcript-line.user {
    border-left-color: #6aa4c8;
    background: #f3f9fd;
}

.settings-air-review-transcript-line strong {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    text-transform: uppercase;
}

.settings-air-review-transcript-line span {
    color: var(--color-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.settings-air-review-tool-line,
.settings-air-review-note {
    display: grid;
    gap: 0.25rem;
    padding: 0.55rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-air-review-activity-feed {
    display: grid;
    gap: 0.5rem;
}

.settings-air-review-activity-row {
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--color-border-muted);
    border-left: 0.35rem solid #d0d5dd;
    border-radius: 0.35rem;
    padding: 0.65rem 0.75rem;
    background: #fff;
}

.settings-air-review-activity-row.is-expandable {
    cursor: pointer;
}

.settings-air-review-activity-row.tool.ok {
    border-left-color: #d59b45;
    background: #fff8ed;
}

.settings-air-review-activity-row.api.ok {
    border-left-color: #8d7cc3;
    background: #f7f4ff;
}

.settings-air-review-activity-row.tool.failed,
.settings-air-review-activity-row.api.failed {
    border-left-color: #c86a6a;
    background: #fff4f4;
}

.settings-air-review-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    color: #667085;
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
}

.settings-air-review-activity-text {
    color: #1f2937;
    font-size: var(--settings-ui-type-body);
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.settings-air-review-activity-detail-label {
    color: #667085;
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.settings-air-review-activity-detail pre {
    max-height: 18rem;
    margin: 0;
    padding: 0.65rem;
    overflow: auto;
    border: 0;
    border-radius: 0.3rem;
    background: #f7f8fa;
    color: #1f2937;
    white-space: pre-wrap;
}

.settings-air-review-tool-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(102, 112, 133, 0.22);
    border-radius: 0.25rem;
    padding: 0.08rem 0.35rem;
    color: #344054;
    background: rgba(255, 255, 255, 0.72);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    line-height: 1.2;
}

.settings-air-review-tool-badge.request {
    color: #7a4a12;
    background: #fff5e5;
    border-color: #f6d7a9;
}

.settings-air-review-tool-badge.result {
    color: #155d46;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.settings-air-review-tool-badge.event {
    color: #475467;
    background: #eef2f6;
    border-color: #d0d5dd;
}

.settings-air-review-tool-line strong,
.settings-air-review-note strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-review-tool-line span,
.settings-air-review-tool-line small,
.settings-air-review-note p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.settings-entity-admin-note-form {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-air-review-linked-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
}

.settings-air-review-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.settings-air-review-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.45rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-air-review-ended-by {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.4rem;
    min-height: 30px;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

.settings-air-review-ended-by-ai-agent {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-air-review-ended-by-transferred {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.settings-air-review-ended-by-system {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.settings-air-review-ended-by-caller {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-text);
}

.settings-admin-console-output,
.settings-admin-console-log-panel pre {
    max-height: 320px;
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
    white-space: pre-wrap;
}

.settings-admin-console-service {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-admin-console-service strong {
    color: var(--color-text);
}

.settings-admin-console-service small,
.settings-admin-console-log-path {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console .settings-admin-console-services-table th,
.settings-admin-console .settings-admin-console-services-table td {
    padding: 0.4rem 0.55rem;
}

.settings-admin-console .settings-admin-console-services-table :is(th, td).settings-admin-console-service-identity {
    width: 17rem;
    min-width: 15rem;
    max-width: 20rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-admin-console-services-table .settings-admin-console-service-identity .settings-admin-console-service {
    gap: 0.04rem;
    line-height: 1.15;
}

.settings-admin-console-services-table .settings-admin-console-service-identity small {
    line-height: 1.15;
}

.settings-admin-console .settings-admin-console-services-table :is(th, td).settings-admin-console-resources-column {
    width: 20rem;
    min-width: 19rem;
    max-width: 21rem;
}

.settings-admin-console-resource-cell {
    align-items: flex-start;
    min-width: 13rem;
}

.settings-admin-console-resource-summary {
    display: grid;
    gap: 0.08rem;
    width: max-content;
    max-width: 100%;
}

.settings-admin-console-resource-line {
    display: grid;
    grid-template-columns: 4.75rem minmax(4.5rem, auto) minmax(7rem, auto);
    gap: 0.42rem;
    align-items: baseline;
    min-height: 1.25rem;
    padding: 0.02rem 0.3rem;
    border-left: 3px solid transparent;
    border-radius: 4px;
    line-height: 1.1;
}

.settings-admin-console-resource-line > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 750;
}

.settings-admin-console-resource-line > strong,
.settings-admin-console-resource-line > small {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.settings-admin-console-resource-line > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-resource-line > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-admin-console .settings-admin-console-services-table :is(th, td).settings-admin-console-heartbeat-column {
    width: 20rem;
    min-width: 18rem;
    max-width: 23rem;
    white-space: normal;
}

.settings-admin-console-heartbeat-summary {
    gap: 0.04rem;
    line-height: 1.15;
}

.settings-admin-console-heartbeat-summary small {
    line-height: 1.15;
}

.settings-admin-console-resource-line.is-warning {
    border-left-color: var(--color-warning-border);
    background: color-mix(in srgb, var(--color-warning-soft) 55%, transparent);
}

.settings-admin-console-resource-line.is-warning > strong,
.settings-admin-console-resource-line.is-warning > small {
    color: var(--color-warning-text);
}

.settings-admin-console-resource-line.is-danger {
    border-left-color: var(--color-danger-border);
    background: color-mix(in srgb, var(--color-danger-soft) 58%, transparent);
}

.settings-admin-console-resource-line.is-danger > strong,
.settings-admin-console-resource-line.is-danger > small {
    color: var(--color-danger-text);
}

.settings-admin-console-daemon-details {
    display: grid;
    gap: 0.9rem;
}

.settings-admin-console-daemon-detail-section {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-muted) 35%, var(--color-surface));
}

.settings-admin-console-daemon-detail-section > header {
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-muted) 78%, var(--color-surface));
}

.settings-admin-console-daemon-detail-section h3,
.settings-admin-console-daemon-detail-section p {
    margin: 0;
}

.settings-admin-console-daemon-detail-section h3 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-daemon-detail-section p {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-daemon-detail-section dl,
.settings-admin-console-websocket-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
}

.settings-admin-console-daemon-detail-fact {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: transparent;
}

.settings-admin-console-daemon-detail-section dl {
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
}

.settings-admin-console-daemon-detail-fact:nth-child(even) {
    background: color-mix(in srgb, var(--color-surface-muted) 55%, transparent);
}

.settings-admin-console-daemon-detail-fact:last-child {
    border-bottom: 0;
}

.settings-admin-console-daemon-detail-fact dt {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.settings-admin-console-daemon-detail-fact dd {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    margin: 0;
}

.settings-admin-console-daemon-detail-fact strong {
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-daemon-detail-fact small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

@media (max-width: 700px) {
    .settings-admin-console-daemon-detail-fact {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

.settings-admin-console-log-path {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-time-cell {
    min-width: 158px;
    white-space: nowrap;
}

.settings-admin-console-user-cell {
    min-width: 180px;
}

.settings-admin-console-telemetry-user-line {
    display: block;
    max-width: 16rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-observability-tabs {
    margin-top: -0.25rem;
}

.settings-admin-console-telemetry-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.65rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface-muted);
}

.settings-admin-console-telemetry-filters label {
    display: grid;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-admin-console-telemetry-filters input,
.settings-admin-console-telemetry-filters select {
    min-height: 36px;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.35rem 0.5rem;
}

.settings-admin-console-telemetry-filters .settings-admin-console-inline-toggle {
    align-self: center;
    min-height: 36px;
}

.settings-admin-console-filter-count {
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
}

.settings-admin-console-observability-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-admin-console-observability-status > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0 0.55rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-admin-console-observability-status strong {
    color: var(--color-text);
}

.settings-admin-console-observability-status > .settings-ui-button {
    min-height: 28px;
}

.settings-admin-console-keyspace-summary,
.settings-admin-console-raw-output {
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-admin-console-keyspace-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
}

.settings-admin-console-keyspace-summary h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-admin-console-keyspace-summary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-admin-console-keyspace-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0 0.55rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
    white-space: nowrap;
}

.settings-admin-console-keyspace-summary strong {
    color: var(--color-text);
}

.settings-admin-console-raw-output summary {
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
}

.settings-admin-console-raw-output .settings-admin-console-output {
    margin-top: 0.75rem;
}

.settings-admin-console-request-row {
    cursor: pointer;
}

.settings-admin-console-request-row > td {
    white-space: nowrap;
}

.settings-admin-console-request-row:hover,
.settings-admin-console-request-row:focus,
.settings-admin-console-request-row.expanded {
    background: var(--color-surface-muted);
    outline: none;
}

.settings-admin-console-route-cell {
    min-width: 14rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-request-detail-row > td {
    padding: 0;
    background: var(--color-surface-muted);
}

.settings-admin-console-request-detail {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-request-error,
.settings-admin-console-param-block {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-admin-console-request-meta-list {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background: var(--color-surface);
}

.settings-admin-console-request-meta-list > div {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.settings-admin-console-request-meta-list strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
}

.settings-admin-console-request-meta-list span {
    color: var(--color-text-muted);
}

.settings-admin-console-request-error {
    display: grid;
    gap: 0.25rem;
    border-color: color-mix(in srgb, var(--color-danger), transparent 55%);
    background: color-mix(in srgb, var(--color-danger), transparent 94%);
}

.settings-admin-console-request-error strong {
    color: var(--color-danger);
}

.settings-admin-console-request-error span,
.settings-admin-console-request-error small {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.settings-admin-console-param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.settings-admin-console-param-block h5 {
    margin: 0 0 0.45rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-param-list {
    display: grid;
    gap: 0.35rem;
}

.settings-admin-console-param-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.4rem 0;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-param-list > div:first-child {
    border-top: none;
}

.settings-admin-console-param-list code {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-admin-console-param-list span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-admin-console-param-list span.redacted {
    color: var(--color-danger);
    font-weight: 800;
}

.settings-admin-console-sql-block {
    display: grid;
    gap: 0.45rem;
}

.settings-admin-console-sql-list {
    display: grid;
    gap: 0.5rem;
}

.settings-admin-console-sql-list > div {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-sql-list > div:first-child {
    border-top: none;
    padding-top: 0;
}

.settings-admin-console-sql-list strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-admin-console-sql-list code {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-admin-console-log-detail .settings-admin-console-log-header {
    align-items: start;
}

.settings-admin-console-log-categories {
    margin-top: 0.25rem;
}

.settings-admin-console-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.settings-admin-console-requests-table {
    min-width: 1320px;
}

.settings-admin-console-requests-table .settings-admin-console-request-detail-row > td {
    width: auto;
    white-space: normal;
}

.settings-table th.settings-col-fit,
.settings-table td.settings-col-fit,
.settings-table th.settings-col-number,
.settings-table td.settings-col-number,
.settings-table th.settings-col-status,
.settings-table td.settings-col-status,
.settings-table th.settings-admin-console-nowrap-cell,
.settings-table td.settings-admin-console-nowrap-cell,
.settings-table th.settings-admin-console-audit-event-cell,
.settings-table td.settings-admin-console-audit-event-cell {
    width: 1%;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-actions,
.settings-table td.settings-col-actions {
    width: 1%;
    min-width: var(--settings-ui-actions-column-width);
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-event,
.settings-table td.settings-col-event {
    width: 1%;
    min-width: 16rem;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-id,
.settings-table td.settings-col-id {
    width: 1%;
    min-width: 15rem;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-time,
.settings-table td.settings-col-time,
.settings-table th.settings-admin-console-time-cell,
.settings-table td.settings-admin-console-time-cell {
    width: 1%;
    min-width: 11rem;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-ip,
.settings-table td.settings-col-ip,
.settings-table th.settings-admin-console-audit-ip-cell,
.settings-table td.settings-admin-console-audit-ip-cell {
    width: 1%;
    min-width: 8.75rem;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-user,
.settings-table td.settings-col-user {
    width: 1%;
    min-width: 14rem;
    max-width: none;
    white-space: nowrap;
}

.settings-table th.settings-col-path,
.settings-table td.settings-col-path,
.settings-table th.settings-admin-console-log-file-cell,
.settings-table td.settings-admin-console-log-file-cell {
    width: auto;
    min-width: 26rem;
    max-width: 52rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-table th.settings-col-content,
.settings-table td.settings-col-content,
.settings-table th.settings-admin-console-prefix-cell,
.settings-table td.settings-admin-console-prefix-cell,
.settings-table th.settings-admin-console-audit-title-cell,
.settings-table td.settings-admin-console-audit-title-cell {
    width: auto;
    min-width: 18rem;
    max-width: 48rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-table th.settings-admin-console-prefix-cell,
.settings-table td.settings-admin-console-prefix-cell {
    white-space: nowrap;
}

.settings-table td.settings-col-fit .settings-field-value,
.settings-table td.settings-col-actions .settings-field-value,
.settings-table td.settings-col-number .settings-field-value,
.settings-table td.settings-col-status .settings-field-value,
.settings-table td.settings-col-event .settings-field-value,
.settings-table td.settings-col-id .settings-field-value,
.settings-table td.settings-col-time .settings-field-value,
.settings-table td.settings-col-ip .settings-field-value,
.settings-table td.settings-col-user .settings-field-value,
.settings-table td.settings-admin-console-nowrap-cell .settings-field-value {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.settings-admin-console-table td.settings-admin-console-route-cell {
    min-width: 14rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-requests-table th.settings-col-path,
.settings-admin-console-requests-table td.settings-col-path {
    width: 16rem;
    min-width: 14rem;
    max-width: 18rem;
}

.settings-admin-console-requests-table :is(th, td).settings-col-ip {
    width: 10rem;
    min-width: 8rem;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-requests-table :is(th, td).settings-col-location {
    width: 11rem;
    min-width: 9rem;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-admin-console-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0.55rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    color: var(--color-text-muted);
    background-color: var(--color-surface-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
}

.settings-admin-console-pill.running,
.settings-admin-console-pill.tracked {
    border-color: var(--color-success-border);
    color: var(--color-success-text);
    background-color: var(--color-success-soft);
}

.settings-admin-console-pill.stopped,
.settings-admin-console-pill.untracked {
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
    background-color: var(--color-warning-soft);
}

.settings-billing-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto;
    gap: 0.75rem;
}

.settings-billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.settings-billing-panel {
    min-width: 0;
}

.settings-billing-setting-form {
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-checkbox-field {
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    min-height: 68px;
}

.settings-checkbox-field input {
    width: auto;
}

.settings-form-field-wide {
    grid-column: 1 / -1;
}

.settings-billing-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.settings-billing-account-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-billing-account-period {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-billing-account-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-billing-account-heading > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.settings-billing-account-heading strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-billing-account-heading span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-billing-account-total {
    align-items: flex-end;
    white-space: nowrap;
}

.settings-billing-settings-table,
.settings-billing-usage-table {
    max-width: 100%;
}

.settings-billing-usage-table .settings-table th,
.settings-billing-usage-table .settings-table td {
    font-size: var(--settings-ui-type-helper);
}

.settings-status-review {
    background: #fff7ed;
    color: #9a3412;
}

.settings-status-billable {
    background: #dcfce7;
    color: #166534;
}

.settings-twilio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-twilio-toolbar h3,
.settings-twilio-panel h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    line-height: 1.2;
}

.settings-twilio-toolbar p,
.settings-twilio-panel p {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
}

.settings-twilio-operation-progress,
.settings-twilio-preview-details {
    margin: 0.75rem 0;
}

.settings-twilio-preview-filters .settings-twilio-preview-filter.active {
    border-color: var(--color-feature-settings);
    color: var(--color-feature-settings);
    background-color: var(--color-feature-settings-soft);
    box-shadow: inset 0 0 0 1px var(--color-feature-settings);
}

.settings-twilio-preview-purge {
    margin-left: 0.35rem;
}

.settings-admin-media-library,
.settings-admin-media-cleanup {
    margin-top: 1rem;
}

.settings-admin-media-preview audio,
.settings-admin-media-preview video,
.settings-admin-media-preview-image {
    display: block;
    max-height: 70vh;
    max-width: 100%;
    margin: 0 auto;
}

.settings-admin-media-preview audio {
    width: min(36rem, 100%);
}

.settings-admin-media-preview > .settings-ui-message {
    margin-bottom: 0.75rem;
}

.settings-admin-media-preview > .settings-ui-action-bar {
    margin-top: 0.75rem;
}

.settings-twilio-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.settings-twilio-inventory-note {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
}

.settings-twilio-phonebook-summary {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.settings-twilio-phonebook td small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-twilio-phonebook-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.settings-twilio-phonebook-controls label {
    display: grid;
    gap: 0.25rem;
    min-width: min(100%, 20rem);
}

.settings-twilio-phonebook-controls label span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-twilio-phonebook-controls > div {
    display: flex;
    gap: 0.4rem;
}

.settings-twilio-phonebook details summary {
    max-width: 22rem;
    overflow: hidden;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-twilio-phonebook details dl {
    display: grid;
    gap: 0.35rem;
    min-width: 22rem;
    margin: 0.5rem 0 0;
}

.settings-twilio-phonebook details dl div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem;
}

.settings-twilio-phonebook details dt {
    font-weight: 750;
}

.settings-twilio-phonebook details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.settings-twilio-phonebook-devices tr.selected {
    background: color-mix(in srgb, var(--color-info, #2563eb) 8%, transparent);
}

.settings-twilio-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.settings-twilio-mutation-policy {
    align-items: flex-start;
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 12px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 16px;
}

.settings-twilio-mutation-policy.locked {
    background: rgba(245, 158, 11, 0.1);
}

.settings-twilio-mutation-policy.enabled {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
}

.settings-twilio-mutation-policy p {
    margin: 4px 0 0;
}

.settings-twilio-policy-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.settings-twilio-control-plane {
    margin-top: 12px;
    min-width: 0;
}

.settings-twilio-control-plane summary {
    cursor: pointer;
    font-weight: 600;
}

.settings-twilio-control-plane pre {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    max-height: 28rem;
    overflow: auto;
    padding: 12px;
    white-space: pre;
}

@media (max-width: 800px) {
    .settings-twilio-mutation-policy {
        display: block;
    }

    .settings-twilio-policy-flags {
        justify-content: flex-start;
        margin-top: 10px;
    }
}

.settings-twilio-workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
}

.settings-twilio-workflow-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-left-width: 0.28rem;
    border-radius: 6px;
    background-color: var(--color-surface-muted);
}

.settings-twilio-workflow-card.settings-twilio-workflow-ready {
    border-left-color: #16a34a;
}

.settings-twilio-workflow-card.settings-twilio-workflow-attention {
    border-left-color: #f59e0b;
}

.settings-twilio-workflow-card.settings-twilio-workflow-missing {
    border-left-color: #94a3b8;
}

.settings-twilio-workflow-card.settings-twilio-workflow-active {
    background-color: #f8fafc;
}

.settings-twilio-workflow-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}

.settings-twilio-workflow-top h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    line-height: 1.2;
}

.settings-twilio-workflow-progress {
    height: 0.38rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: #e2e8f0;
}

.settings-twilio-workflow-progress span {
    display: block;
    width: var(--twilio-workflow-progress);
    height: 100%;
    border-radius: inherit;
    background-color: #2563eb;
}

.settings-twilio-workflow-count {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.settings-twilio-workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-twilio-workflow-step {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.2;
}

.settings-twilio-workflow-step.complete {
    color: #166534;
}

.settings-twilio-workflow-step .gmi {
    font-size: var(--settings-ui-type-body);
    line-height: 1;
}

.settings-twilio-workflow-step > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-twilio-workflow-step small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.2;
    white-space: nowrap;
}

.settings-twilio-workflow-card button {
    align-self: flex-start;
    min-height: 32px;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    color: var(--color-text);
    background-color: var(--button-bg);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-twilio-workflow-card button:hover {
    background-color: var(--button-hover-bg);
}

.settings-twilio-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.settings-twilio-tool-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface-muted);
}

.settings-twilio-tool-card-wide {
    grid-column: 1 / -1;
}

.settings-twilio-tool-card h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    line-height: 1.2;
}

.settings-twilio-tool-card label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.settings-twilio-tool-card button {
    align-self: flex-start;
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    color: var(--color-text);
    background-color: var(--button-bg);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
}

.settings-twilio-tool-card button:hover {
    background-color: var(--button-hover-bg);
}

.settings-twilio-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.65rem;
}

.settings-twilio-table-wrap {
    max-width: 100%;
}

.settings-twilio-table .settings-field-value {
    max-width: none;
    overflow-wrap: anywhere;
}

.settings-twilio-accounts-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.settings-table.settings-twilio-accounts-table .settings-col-account,
.settings-twilio-accounts-table .settings-col-fit {
    width: 1%;
    min-width: max-content;
    max-width: none;
}

.settings-twilio-accounts-table .settings-twilio-row-actions {
    flex-wrap: nowrap;
    min-width: max-content;
}

.settings-twilio-accounts-table .settings-twilio-row-actions button {
    white-space: nowrap;
}

.settings-twilio-sid-cell {
    min-width: 8.5rem;
}

.settings-twilio-stacked-value {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    max-width: 22rem;
}

.settings-twilio-stacked-value strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.settings-twilio-stacked-value small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.settings-twilio-input {
    width: min(28rem, 100%);
    min-width: 9rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--color-text);
    background: var(--input-bg);
    font: inherit;
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-friendly-name-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.settings-twilio-friendly-name-control .settings-twilio-input {
    flex: 1 1 auto;
}

.settings-twilio-friendly-name-control button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    color: var(--color-text);
    background-color: var(--button-bg);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-twilio-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    white-space: nowrap;
}

.settings-twilio-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.settings-twilio-errors {
    border-color: #fecaca;
    background-color: #fff7f7;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.settings-twilio-errors.settings-twilio-errors-highlight {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgb(220 38 38 / 18%);
}

.settings-twilio-error-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.settings-twilio-error {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #991b1b;
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-error small {
    color: #b45309;
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-twilio-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.settings-twilio-row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    color: var(--color-text);
    background-color: var(--button-bg);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-twilio-row-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.settings-twilio-unified-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.settings-twilio-unified-table th,
.settings-twilio-unified-table td {
    width: auto;
    max-width: none;
}

.settings-twilio-unified-table .settings-twilio-actions-cell {
    width: 1%;
    min-width: max-content;
}

.settings-twilio-unified-table .settings-twilio-row-actions {
    flex-wrap: nowrap;
    min-width: max-content;
}

.settings-twilio-unified-table .settings-twilio-row-actions button,
.settings-twilio-unified-table .settings-twilio-transfer-control {
    white-space: nowrap;
}

.settings-twilio-account-summary-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.settings-twilio-unified-table.settings-twilio-account-summary-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
}

.settings-twilio-unified-table.settings-twilio-account-summary-table th,
.settings-twilio-unified-table.settings-twilio-account-summary-table td {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-twilio-account-summary-table .settings-twilio-status-cell {
    width: 14%;
}

.settings-twilio-account-summary-table .settings-col-account {
    width: 18%;
}

.settings-twilio-account-summary-table .settings-twilio-resource-cell {
    width: 20%;
}

.settings-twilio-account-summary-table .settings-twilio-sid-cell {
    width: 22%;
}

.settings-twilio-account-summary-table .settings-col-time {
    width: 14%;
}

.settings-twilio-account-summary-table .settings-twilio-actions-cell {
    width: 12%;
}

.settings-twilio-unified-table.settings-twilio-account-summary-table .settings-twilio-actions-cell,
.settings-twilio-unified-table.settings-twilio-account-summary-table .settings-twilio-sid-cell {
    width: auto;
    min-width: 0;
}

.settings-twilio-unified-table.settings-twilio-account-summary-table .settings-twilio-row-actions {
    flex-wrap: wrap;
    min-width: 0;
}

.settings-twilio-account-summary-cell {
    color: var(--color-text);
    font-weight: 750;
}

.settings-twilio-account-summary-content {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.settings-twilio-account-summary-content > strong {
    overflow-wrap: anywhere;
}

.settings-twilio-account-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.settings-twilio-account-ownership-badge,
.settings-twilio-account-readiness-summary {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 0.18rem 0.42rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    white-space: nowrap;
}

.settings-twilio-account-ownership-badge.customer {
    color: #5b21b6;
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.settings-twilio-account-ownership-badge.unverified {
    color: #475569;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.settings-twilio-account-readiness-summary.ready {
    color: #166534;
    border-color: #86efac;
    background: #f0fdf4;
}

.settings-twilio-account-readiness-summary.review {
    color: #9a3412;
    border-color: #fdba74;
    background: #fff7ed;
}

.settings-twilio-expandable-row {
    cursor: pointer;
}

.settings-twilio-expandable-row:focus-visible {
    outline: 2px solid var(--color-accent, #2563eb);
    outline-offset: -2px;
}

.settings-twilio-expand-toggle {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.35rem 0 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.settings-twilio-expand-toggle:hover,
.settings-twilio-expand-toggle:focus-visible {
    color: var(--color-text);
    background-color: var(--color-surface-muted);
}

.settings-twilio-expand-toggle span {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 140ms ease;
}

.settings-twilio-expand-toggle[aria-expanded="true"] span {
    transform: rotate(90deg);
}

.settings-twilio-difference-row > td {
    padding: 0.85rem;
    background-color: var(--color-surface-muted);
}

.settings-twilio-difference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.settings-twilio-difference-grid .settings-twilio-remote-only {
    grid-column: 1 / -1;
}

.settings-twilio-sensitive-editor {
    display: grid;
    gap: 0.4rem;
    margin: 0.8rem 0;
    max-width: 34rem;
}

.settings-twilio-account-control-section {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.8rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.65rem;
    background: var(--color-surface);
    box-sizing: border-box;
}

.settings-twilio-account-control-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
}

.settings-twilio-account-control-heading h4,
.settings-twilio-account-control-heading p,
.settings-twilio-account-access-card h5,
.settings-twilio-account-access-card p {
    margin: 0;
}

.settings-twilio-account-control-heading p,
.settings-twilio-account-access-card p {
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
}

.settings-twilio-account-local-actions {
    justify-content: flex-end;
    margin-top: 0.2rem;
}

.settings-twilio-account-access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    min-width: 0;
}

.settings-twilio-account-access-card {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-background);
}

.settings-twilio-account-access-card > div:first-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

.settings-twilio-account-access-card .settings-status-pill {
    max-width: 100%;
    min-height: auto;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
}

.settings-twilio-account-access-card h5 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-account-access-actions,
.settings-twilio-account-access-actions > .settings-twilio-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.settings-twilio-account-access-actions button {
    white-space: normal;
}

.settings-twilio-sensitive-editor label {
    display: grid;
    gap: 0.3rem;
}

.settings-twilio-difference-grid section {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.settings-twilio-difference-grid h4 {
    margin: 0;
}

.settings-twilio-difference-grid section > label {
    display: grid;
    grid-template-columns: minmax(9.5rem, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.settings-twilio-difference-grid section > label > span:first-child {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    text-transform: uppercase;
}

.settings-twilio-difference-grid section > label > .settings-field-value,
.settings-twilio-difference-grid section > label > .settings-twilio-input {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-twilio-field-help {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-twilio-diff-field {
    padding: 0.35rem;
    border-radius: 4px;
    background-color: #fff7ed;
}

.settings-twilio-e911-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    min-width: max-content;
}

.settings-twilio-e911-control select {
    width: auto;
    min-width: 10rem;
}

@media (max-width: 760px) {
    .settings-twilio-account-summary-table,
    .settings-twilio-account-summary-table tbody,
    .settings-twilio-account-summary-table tr,
    .settings-twilio-account-summary-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .settings-twilio-account-summary-table thead {
        display: none;
    }

    .settings-twilio-account-summary-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .settings-twilio-account-summary-table .settings-twilio-expandable-row {
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 0.65rem;
        background: var(--color-surface);
    }

    .settings-twilio-account-summary-table .settings-twilio-expandable-row > td {
        display: grid;
        grid-template-columns: minmax(5.6rem, 0.4fr) minmax(0, 1fr);
        gap: 0.5rem;
        align-items: start;
        border: 0;
        border-bottom: 1px solid var(--color-border-muted);
        white-space: normal;
    }

    .settings-twilio-account-summary-table .settings-twilio-expandable-row > td:last-child {
        border-bottom: 0;
    }

    .settings-twilio-account-summary-table .settings-twilio-expandable-row > td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: var(--settings-ui-type-meta);
        font-weight: 800;
        text-transform: uppercase;
    }

    .settings-twilio-account-summary-table .settings-twilio-difference-row[hidden] {
        display: none;
    }

    .settings-twilio-account-summary-table .settings-twilio-difference-row > td {
        display: block;
        padding: 0.65rem;
    }

    .settings-twilio-account-summary-table .settings-twilio-actions-cell .settings-twilio-row-actions {
        justify-content: flex-start;
    }

    .settings-twilio-account-access-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-twilio-account-control-heading,
    .settings-twilio-account-access-card > div:first-child {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-twilio-difference-grid {
        grid-template-columns: 1fr;
    }

    .settings-twilio-difference-grid section > label {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .settings-twilio-field-help {
        grid-column: 1;
    }

    .settings-twilio-friendly-name-control {
        align-items: stretch;
        flex-direction: column;
    }
}

.settings-twilio-risk-block,
.settings-twilio-risk-form {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #d8dde3);
    border-radius: 0.65rem;
    background: var(--surface-color, #fff);
}

details.settings-twilio-risk-block > summary,
.settings-twilio-monitoring-setup > summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    cursor: pointer;
}

details.settings-twilio-risk-block > summary span,
.settings-twilio-monitoring-setup > summary span {
    color: var(--muted-color, #5f6b76);
    font-size: var(--settings-ui-type-helper);
    font-weight: 400;
}

details.settings-twilio-risk-block[open] > summary,
.settings-twilio-monitoring-setup[open] > summary {
    margin-bottom: 0.85rem;
}

.settings-twilio-monitoring-setup {
    margin: 0.85rem 0;
    padding: 0.85rem;
    border: 1px solid var(--border-color, #d8dde3);
    border-radius: 0.5rem;
}

.settings-twilio-risk-form,
.settings-twilio-risk-template,
.settings-twilio-risk-account-fields,
.settings-twilio-risk-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.settings-twilio-risk-form > div,
.settings-twilio-risk-tools > form {
    grid-column: 1 / -1;
}

.settings-twilio-global-communication-form {
    margin-top: 0.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: end;
}

.settings-twilio-global-communication-form > .settings-twilio-row-actions {
    grid-column: auto;
}

@media (max-width: 760px) {
    .settings-twilio-global-communication-form {
        grid-template-columns: 1fr;
    }

    .settings-twilio-global-communication-form > .settings-twilio-row-actions {
        grid-column: 1 / -1;
    }
}

.settings-twilio-risk-tools > .settings-twilio-panel {
    grid-column: 1 / -1;
    min-width: 0;
}

.settings-twilio-geo-state label {
    display: inline-flex !important;
    flex-direction: row;
    gap: 0.35rem;
    align-items: center;
    white-space: nowrap;
}

.settings-twilio-geo-comparison {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-twilio-geo-comparison h5,
.settings-twilio-geo-country-table h5 {
    margin: 0;
}

.settings-twilio-geo-inheritance,
.settings-twilio-geo-match {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.45rem;
    background: var(--color-surface-muted);
}

.settings-twilio-geo-inheritance.is-different,
.settings-twilio-geo-state.is-different,
.settings-twilio-geo-row-different,
[data-twilio-geo-row].is-twilio-dirty {
    background: var(--color-warning-soft, #fff7dc);
}

.settings-twilio-geo-state {
    display: inline-flex;
    gap: 0.55rem;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
}

.settings-twilio-geo-state input:disabled {
    opacity: 1;
}

.settings-twilio-geo-state input:not(:disabled) {
    cursor: pointer;
}

.settings-twilio-geo-apply {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: end;
    margin-top: 0.85rem;
}

.settings-twilio-geo-apply label {
    flex: 1 1 20rem;
}

.settings-twilio-geo-apply input {
    width: 100%;
}

.settings-twilio-geo-country-table {
    margin-top: 0.75rem;
}

.settings-twilio-geo-country-table th:not(:first-child),
.settings-twilio-geo-country-table td:not(:first-child) {
    min-width: 12rem;
}

.settings-twilio-geo-all {
    margin-top: 0.75rem;
}

.settings-twilio-geo-all > summary {
    cursor: pointer;
    color: var(--color-link, #2457a7);
    font-weight: 600;
}

.settings-twilio-risk-form label,
.settings-twilio-risk-template label,
.settings-twilio-risk-account label,
.settings-twilio-risk-tools label {
    display: grid;
    gap: 0.25rem;
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-risk-template-list,
.settings-twilio-risk-account-list {
    display: grid;
    gap: 0.85rem;
}

.settings-twilio-account-review-list {
    display: grid;
    gap: 0.7rem;
}

.settings-twilio-account-review {
    overflow: hidden;
    border: 1px solid var(--border-color, #d8dde3);
    border-radius: 0.6rem;
    background: var(--surface-color, #fff);
}

.settings-twilio-account-review.is-restricted {
    border-left: 4px solid var(--color-warning, #f59e0b);
}

.settings-twilio-account-review.is-spend-locked {
    border-left-color: var(--color-danger, #c0392b);
}

.settings-twilio-account-review.is-twilio-dirty {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning, #f59e0b) 24%, transparent);
}

.settings-twilio-account-review-summary {
    display: grid;
    grid-template-columns: minmax(13rem, 1.2fr) minmax(16rem, 1fr) minmax(15rem, 0.9fr);
    gap: 0.8rem 1.2rem;
    align-items: center;
    padding: 0.85rem 1rem;
    cursor: pointer;
}

.settings-twilio-account-review-summary::marker {
    color: var(--color-text-muted);
}

.settings-twilio-account-review-identity strong,
.settings-twilio-account-review-identity small,
.settings-twilio-account-review-states small {
    display: block;
}

.settings-twilio-account-review-identity small,
.settings-twilio-account-review-states small,
.settings-twilio-account-review-usage {
    color: var(--muted-color, #5f6b76);
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-account-review-identity small {
    margin-top: 0.2rem;
}

.settings-twilio-account-review-states,
.settings-twilio-account-review-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.settings-twilio-account-review-usage {
    justify-content: flex-end;
}

.settings-twilio-account-review-usage strong {
    color: var(--color-text);
}

.settings-twilio-account-review-section {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #d8dde3);
}

.settings-twilio-global-controls > .settings-twilio-account-review-section:first-child {
    border-top: 0;
}

.settings-twilio-global-controls .settings-twilio-risk-form {
    margin-top: 0.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.settings-twilio-account-review-section .settings-editor-header h5,
.settings-twilio-account-review-section .settings-editor-header p {
    margin-top: 0;
}

.settings-twilio-account-review-effective {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: var(--color-surface-muted);
}

.settings-twilio-account-review-effective.is-restricted {
    border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 55%, var(--color-border-muted));
}

.settings-twilio-account-review-effective > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.settings-twilio-account-review-effective span {
    color: var(--color-text-muted);
}

.settings-twilio-effective-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-twilio-effective-channels span {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
}

.settings-twilio-effective-channels .is-allowed {
    background: var(--color-success-soft, #eaf7ee);
    color: var(--color-success-text, #176b35);
}

.settings-twilio-effective-channels .is-blocked {
    background: var(--color-danger-soft, #fdeceb);
    color: var(--color-danger-text, #9e2f25);
}

.settings-twilio-account-review-communication-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(26rem, 2fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.settings-twilio-communication-overrides {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-twilio-communication-overrides legend {
    width: 100%;
    margin-bottom: 0.25rem;
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-communication-overrides label {
    display: inline-flex;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .settings-twilio-account-review-summary,
    .settings-twilio-account-review-communication-grid {
        grid-template-columns: 1fr;
    }

    .settings-twilio-account-review-usage {
        justify-content: flex-start;
    }
}

.settings-twilio-risk-template,
.settings-twilio-risk-account {
    padding: 0.85rem;
    border: 1px solid var(--border-color, #d8dde3);
    border-radius: 0.5rem;
}

.settings-twilio-risk-account-heading,
.settings-twilio-risk-meta,
.settings-twilio-risk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
}

.settings-twilio-risk-account-heading {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.settings-twilio-risk-account-heading small {
    display: block;
    margin-top: 0.2rem;
}

.settings-twilio-risk-controls,
.settings-twilio-risk-meta,
.settings-twilio-risk-actions {
    margin-top: 0.75rem;
}

.settings-twilio-risk-meta {
    font-size: var(--settings-ui-type-helper);
    color: var(--muted-color, #5f6b76);
}

.settings-twilio-spend-account > summary {
    cursor: pointer;
}

.settings-twilio-spend-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0;
}

.settings-twilio-spend-progress,
.settings-twilio-spend-review {
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: var(--color-surface-muted);
}

.settings-twilio-spend-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-twilio-spend-progress progress {
    width: 100%;
    margin: 0.45rem 0 0.25rem;
}

.settings-twilio-spend-progress small {
    color: var(--color-text-muted);
}

.settings-twilio-spend-review,
.settings-twilio-spend-technical {
    margin-top: 0.85rem;
}

.settings-twilio-spend-review h5,
.settings-twilio-spend-review p {
    margin-top: 0;
}

.settings-twilio-spend-technical > summary {
    cursor: pointer;
    color: var(--color-link);
    font-weight: 700;
}

.settings-twilio-risk-check {
    display: flex !important;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
}

.settings-twilio-actions-cell,
.settings-twilio-status-cell {
    width: 1%;
    white-space: nowrap;
}

.settings-twilio-transfer-control {
    display: flex;
    gap: 0.35rem;
}

.settings-input-suffix {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-input-suffix input {
    flex: 0 1 160px;
}

.settings-input-suffix span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0.5rem;
}

.settings-form-actions button {
    gap: 0.35rem;
    width: auto;
    min-width: max-content;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
}

.settings-delete {
    color: var(--color-danger-text);
    background-color: var(--color-danger-soft);
}

.settings-field-value {
    overflow-wrap: anywhere;
    color: var(--color-text);
    white-space: pre-line;
}

.settings-field-subvalue {
    display: block;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.35;
    white-space: pre-line;
}

.settings-field-muted {
    color: var(--color-text-muted);
}

.settings-info-notice,
.settings-usage-notice,
.settings-twilio-inventory-note,
.settings-control-panel {
    border: 1px solid color-mix(in srgb, var(--color-feature-settings), transparent 58%);
    border-radius: 6px;
    background-color: var(--color-feature-settings-soft);
    color: var(--color-text);
}

.settings-info-notice p,
.settings-usage-notice p,
.settings-twilio-inventory-note,
.settings-control-panel {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-info-notice.is-warning {
    border-color: var(--color-warning-border, #ffe398);
    border-left-color: var(--color-warning-text, #9a3412);
    background-color: var(--color-warning-soft, #fff7dc);
    color: var(--color-warning-text, #5c4600);
}

.settings-control-panel-title {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: 700;
}

.settings-admin-console-row-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
}

.settings-admin-console-row-actions::before {
    display: none !important;
}

body.settings-view main.content {
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

body.settings-view .settings {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.settings-view .settings-shell {
    height: 100%;
    min-height: 0;
    display: grid;
    align-items: stretch;
}

body.settings-view .settings-pane {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.settings-view .settings-pane-header {
    grid-row: 1;
}

body.settings-view #settings_error {
    grid-row: 3;
}

body.settings-view #settings_content,
body.settings-view #settings_form {
    grid-row: 4;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    overscroll-behavior: contain;
}

body.settings-view #settings_content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

body.settings-view #settings_content:has(> .settings-table-wrap) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

body.settings-view #settings_content:has(> .settings-table-wrap) > .settings-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

body.settings-view #settings_form {
    align-content: start;
    align-self: start;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body.settings-view #settings_form.settings-form-contained {
    max-width: 960px;
    margin-right: auto;
    margin-left: 0;
    box-sizing: border-box;
}

body.settings-view #settings_form.settings-form-wide {
    width: min(100%, 72rem);
    margin-right: auto;
    margin-left: 0;
    box-sizing: border-box;
}

@media (min-width: 998px) {
    .settings-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

}

@media (max-width: 997px) {
    .settings-shell {
        --settings-shell-padding: 0.75rem;

        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: var(--settings-shell-padding);
    }

    .settings-pane {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
    }

    .settings-air-review-layout {
        grid-template-columns: 1fr;
    }

    .settings-air-review-call-column {
        position: static;
    }

    .settings-air-review-call-column > .settings-admin-console-mini-panel,
    .settings-air-review-canvas > .settings-air-review-detail-panel {
        height: auto;
    }

    .settings-air-review-call-table-wrap {
        flex: initial;
        max-height: 630px;
    }

    .settings-air-review-run-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .settings-admin-console-restart-visual-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-admin-console-restart-legend {
        justify-content: flex-start;
    }

    .settings-pane {
        padding: 0.65rem;
    }

    .settings-pane-header {
        gap: 0.5rem;
    }

    .settings-pane h1 {
        font-size: 1.25rem;
    }

    .settings-form {
        grid-template-columns: 1fr;
    }

    .settings-billing-toolbar {
        grid-template-columns: 1fr;
    }

    .settings-air-visualizer-controls {
        grid-template-columns: 1fr;
    }

    .settings-air-review-run-grid,
    .settings-air-review-detail-panel > .settings-admin-console-panel-title,
    .settings-air-review-run-panel .settings-admin-console-panel-title {
        grid-template-columns: 1fr;
    }

    .settings-air-review-call-table {
        width: 100%;
        min-width: 0;
    }

    .settings-air-review-transcript-line {
        grid-template-columns: 1fr;
    }

    .settings-air-review-tabs {
        justify-content: flex-start;
    }

    .settings-billing-actions {
        justify-content: stretch;
    }

    .settings-billing-actions button {
        flex: 1 1 120px;
    }

    .settings-billing-account-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-billing-account-total {
        align-items: flex-start;
    }
}

@media (max-width: 550px) {
    .settings-shell {
        --settings-shell-padding: 0.5rem;
    }

    .settings-pane-header .button {
        width: 42px;
        min-width: 42px;
        padding: 0.35rem;
    }

    .settings-pane-header .button span:not(.gmi) {
        display: none;
    }

    .settings-form-actions {
        justify-content: stretch;
    }

    .settings-form-actions button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}
.settings-air-tests {
    display: grid;
    gap: 1rem;
}

.settings-air-test-workspace-tabs {
    margin-top: 0;
}

.settings-air-test-workspace {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.settings-air-tests-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-air-test-mode {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    text-align: left;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.75rem;
    background: var(--settings-panel, #fff);
}

.settings-air-test-mode.active {
    border-color: var(--settings-accent, #315efb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--settings-accent, #315efb) 18%, transparent);
}

.settings-air-test-mode small,
.settings-air-test-runs td small {
    display: block;
    color: var(--settings-muted, #64748b);
}

.settings-admin-console-table.settings-testing-run-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.settings-testing-run-table .settings-testing-run-identity {
    min-width: 20rem;
    max-width: 34rem;
}

.settings-testing-run-table .settings-testing-run-experience {
    min-width: 14rem;
    max-width: 24rem;
}

.settings-testing-run-table :is(.settings-testing-run-identity, .settings-testing-run-experience) {
    overflow-wrap: anywhere;
    white-space: normal;
}

.settings-testing-run-table .settings-status-pill {
    white-space: nowrap;
}

.settings-air-test-launch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.75rem;
    background: var(--settings-panel, #fff);
}

.settings-air-test-launch > * {
    order: 10;
}

.settings-air-test-setup-heading {
    grid-column: 1 / -1;
    order: 0;
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--settings-border, #d8dee8);
}

.settings-air-test-setup-heading span,
.settings-air-test-launch label small {
    color: var(--settings-muted, #64748b);
}

.settings-air-test-launch label,
.settings-air-test-review label {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    align-self: start;
}

.settings-air-test-launch input[readonly] {
    background: var(--settings-panel-muted, #f6f8fb);
    color: var(--settings-muted, #64748b);
}

.settings-air-test-scope-warning,
.settings-air-test-preflight,
.settings-air-test-scenario-summary {
    grid-column: 1 / -1;
}

.settings-air-test-scope-warning {
    order: 15;
}

.settings-air-test-scenario-summary {
    order: 20;
}

.settings-air-test-custom {
    grid-column: 1 / -1;
}

.settings-air-test-duration {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.settings-air-test-duration input {
    width: 6rem;
}

.settings-air-test-preflight {
    order: 50;
}

.settings-air-test-launch > .settings-control-button {
    order: 60;
}

.settings-air-test-assertions {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.settings-air-test-assertions > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.settings-air-test-assertions .pass {
    color: #16794b;
}

.settings-air-test-assertions .fail {
    color: #b42318;
}

.settings-air-test-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #f2c57c;
    border-radius: 0.4rem;
    background: #fff8ed;
    color: #92500b;
}

.settings-air-test-warning > div {
    display: grid;
    gap: 0.15rem;
}

.settings-air-test-preflight ul {
    margin: 0.2rem 0 0;
    padding-left: 1.15rem;
}

.settings-air-test-transcript {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.settings-air-test-audio {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.settings-air-test-timeline {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
}

.settings-air-test-timeline > h4 {
    margin: 0;
}

.settings-air-test-timeline .settings-air-test-timeline-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12rem 0.38rem;
    padding: 0.16rem 0.38rem;
    font-size: var(--settings-ui-type-helper);
    line-height: 1.32;
}

.settings-air-test-timeline .settings-air-review-transcript {
    gap: 0.18rem;
}

.settings-air-test-timeline-line .air-call-activity-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.settings-air-test-timeline-line.agent > .air-call-activity-text {
    flex-basis: 100%;
}

.settings-air-test-timeline-time {
    color: #667085;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.settings-air-test-timeline-line.test-event.runner {
    border-left-color: #667085;
}

.settings-air-test-timeline-line.test-event.provider {
    border-left-color: #8d7cc3;
    background: #f7f4ff;
}

.settings-air-test-timeline-line > .settings-air-test-audio-grid {
    width: 100%;
    margin-top: 0.2rem;
}

.settings-air-test-results-header h3 {
    margin: 0;
    font-size: var(--settings-ui-type-body);
}

.settings-air-test-results-header p {
    margin: 0.2rem 0 0;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-helper);
}

.settings-air-test-results-header .settings-admin-console-log-controls {
    justify-content: flex-end;
}

.settings-air-test-transcript-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem;
    width: 100%;
}

.settings-air-test-transcript-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.settings-air-test-transcript-content > .settings-air-test-audio-attachment {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.settings-air-test-transcript-content > .settings-air-test-audio-attachment[open] {
    grid-column: 1 / -1;
    width: 100%;
}

.settings-air-test-transcript-content > .settings-air-test-audio-attachment > summary {
    margin-left: auto;
}

.settings-air-test-suite-child td:first-child {
    padding-left: 1.35rem;
}

.settings-air-test-suite-summary {
    background: rgba(239, 246, 255, 0.72);
}

.settings-air-test-audio-attachment {
    flex: 1 0 100%;
    width: 100%;
    margin-top: 0.12rem;
}

.settings-air-test-audio-attachment > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    width: fit-content;
    list-style: none;
    cursor: pointer;
    border: 1px solid #bfdbfe;
    border-radius: 0.25rem;
    padding: 0.06rem 0.32rem;
    background: #eff6ff;
    color: #1d4f8f;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-air-test-audio-attachment > summary::-webkit-details-marker {
    display: none;
}

.settings-air-test-audio-attachment > .settings-air-test-audio-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.settings-air-test-audio-attachment .settings-air-test-audio-card {
    gap: 0.35rem;
    padding: 0.45rem;
}

.settings-air-test-unmatched-audio {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.settings-air-test-audio h4 {
    margin: 0;
}

.settings-air-test-audio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.settings-air-test-audio-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.65rem;
    background: var(--settings-panel, #fff);
}

.settings-air-test-audio-card > div,
.settings-air-test-audio-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-air-test-audio-card small {
    color: var(--settings-muted, #64748b);
}

.settings-air-test-audio-card audio {
    display: none;
}

.settings-air-test-transcript h4,
.settings-air-test-timeline-title {
    margin: 0;
}

.settings-air-test-transcript .settings-air-review-transcript {
    margin-top: 0;
}

.settings-air-test-timeline-title {
    margin-bottom: 0.5rem;
}

.settings-air-test-review {
    display: grid;
    grid-template-columns: minmax(10rem, 0.35fr) 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin-top: 1rem;
}

.settings-testing-overview,
.settings-testing-catalog,
.settings-testing-domain-view,
.settings-testing-section,
.settings-testing-domain-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.settings-testing-tabs button {
    white-space: nowrap;
}

.settings-testing-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.settings-testing-domain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-testing-domain-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 1rem;
    text-align: left;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.75rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-domain-card:hover {
    border-color: var(--settings-accent, #315efb);
}

.settings-testing-domain-card > .gmi {
    color: var(--settings-accent, #315efb);
    font-size: 1.55rem;
}

.settings-testing-domain-card div {
    display: grid;
    gap: 0.3rem;
}

.settings-testing-domain-card p {
    margin: 0;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-testing-domain-card small {
    font-weight: 700;
}

.settings-testing-confidence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.4fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--settings-accent, #315efb) 40%, var(--settings-border, #d8dee8));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--settings-accent, #315efb) 5%, var(--settings-panel, #fff));
}

.settings-testing-confidence-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.settings-testing-confidence-copy > .gmi {
    color: var(--settings-accent, #315efb);
    font-size: 1.75rem;
}

.settings-testing-confidence-copy p,
.settings-testing-confidence-copy small {
    margin: 0.3rem 0 0;
    color: var(--settings-muted, #64748b);
}

.settings-testing-card-heading,
.settings-testing-confidence-last,
.settings-testing-scenario-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
}

.settings-testing-resource-warning {
    display: block;
    color: var(--settings-warning-text, #8a5a00);
    line-height: 1.45;
}

.settings-testing-card-heading h3,
.settings-testing-card-heading h4 {
    margin: 0;
}

.settings-testing-confidence-last {
    margin-top: 0.7rem;
}

.settings-testing-confidence-last > span:not(.settings-status-pill) {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-helper);
}

.settings-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--settings-accent, #315efb);
    font: inherit;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    cursor: pointer;
}

.settings-testing-confidence-launch {
    display: grid;
    gap: 0.65rem;
    justify-items: stretch;
}

.settings-testing-confidence-launch label,
.settings-testing-scenario-run label {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-testing-confidence-launch input,
.settings-testing-scenario-run input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.05rem;
}

.settings-testing-resources {
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.7rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-resources > summary {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
}

.settings-testing-resources > summary::-webkit-details-marker,
.settings-testing-fixture-preview > summary::-webkit-details-marker {
    display: none;
}

.settings-testing-resources > summary > span:not(.gmi) {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-resources > summary > small {
    margin-left: auto;
    color: var(--settings-muted, #64748b);
}

.settings-testing-resource-body {
    display: grid;
    gap: 0.8rem;
    padding: 0 0.9rem 0.9rem;
}

.settings-testing-resource-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-testing-resource-toolbar > div,
.settings-testing-resource-form-heading {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.settings-testing-resource-toolbar small,
.settings-testing-resource-form-heading small {
    color: var(--settings-muted, #64748b);
    line-height: 1.4;
}

.settings-testing-resource-toolbar .settings-control-button {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0.4rem 0.65rem;
}

.settings-testing-resource-note {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
    background: var(--settings-panel-muted, #f6f8fb);
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.45;
}

.settings-testing-resource-note .gmi {
    flex: 0 0 auto;
    color: var(--settings-accent, #315efb);
}

.settings-testing-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.55rem;
}

.settings-testing-resource-grid > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-resource-grid > div > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.settings-testing-resource-grid span:not(.gmi),
.settings-testing-resource-grid small {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    overflow-wrap: anywhere;
}

.settings-testing-resource-grid .ready > .gmi,
.settings-testing-resource-capabilities .ready {
    color: #16794b;
}

.settings-testing-resource-grid .missing > .gmi,
.settings-testing-resource-capabilities .missing {
    color: #b42318;
}

.settings-testing-fixture-changes,
.settings-testing-coverage-status > section {
    display: grid;
    gap: 0.3rem;
}

.settings-testing-fixture-changes > div {
    display: grid;
    grid-template-columns: 5rem minmax(10rem, 0.7fr) minmax(12rem, 1fr);
    gap: 0.55rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--settings-border, #d8dee8);
}

.settings-testing-fixture-changes > div > span {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    text-transform: uppercase;
}

.settings-testing-fixture-changes small,
.settings-testing-coverage-status span {
    color: var(--settings-muted, #64748b);
}

.settings-testing-coverage-status {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
    background: var(--settings-panel-muted, #f6f8fb);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-coverage-status > summary {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    cursor: pointer;
}

.settings-testing-coverage-current {
    border-color: #a7d7bd;
    background: #f0fdf4;
}

.settings-testing-coverage-retest-required,
.settings-testing-coverage-never-tested {
    border-color: #f0c36e;
    background: #fffbeb;
}

.settings-testing-coverage-blocked {
    border-color: #f0aaa6;
    background: #fff5f5;
}

.settings-testing-resource-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-testing-resource-capabilities span {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-testing-resource-form {
    display: grid;
    gap: 0.8rem;
}

.settings-testing-resource-form-section {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.6rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-resource-form-heading {
    grid-template-columns: minmax(0, 1fr);
}

.settings-testing-resource-form-heading h4,
.settings-testing-resource-form-heading h5 {
    margin: 0;
}

.settings-testing-resource-form-heading h4 {
    font-size: var(--settings-ui-type-body);
}

.settings-testing-resource-form-heading h5 {
    font-size: var(--settings-ui-type-helper);
}

.settings-testing-resource-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.65rem;
    align-items: start;
}

.settings-testing-resource-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-testing-resource-field > span {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.settings-testing-resource-field input,
.settings-testing-resource-field select {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
}

.settings-testing-resource-field small {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 500;
    line-height: 1.35;
}

.settings-testing-resource-derived {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-left: 3px solid #b42318;
    border-radius: 0.5rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-resource-derived.ready {
    border-left-color: #16794b;
}

.settings-testing-resource-derived > span,
.settings-testing-resource-derived > small {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-testing-resource-derived > strong {
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-resource-derived > code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-resource-field i {
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
    font-style: normal;
    font-weight: 800;
}

.settings-testing-resource-field i.configured {
    background: #e8f5ed;
    color: #166534;
}

.settings-testing-resource-field i.missing {
    background: #feeceb;
    color: #b42318;
}

.settings-testing-provider-resources {
    display: grid;
    gap: 0.55rem;
}

.settings-testing-provider-resource {
    display: grid;
    grid-template-columns: minmax(10rem, 0.55fr) minmax(15rem, 1fr) minmax(13rem, 0.75fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.7rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-provider-name {
    display: grid;
    gap: 0.15rem;
    padding-top: 0.1rem;
}

.settings-testing-provider-name strong {
    font-size: var(--settings-ui-type-helper);
}

.settings-testing-provider-name small,
.settings-testing-provider-baseline p {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
}

.settings-testing-provider-baseline {
    grid-column: 1 / -1;
    border-top: 1px solid var(--settings-border, #d8dee8);
}

.settings-testing-provider-baseline > summary {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    min-height: 2rem;
    padding-top: 0.45rem;
    cursor: pointer;
    list-style: none;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-provider-baseline > summary::-webkit-details-marker {
    display: none;
}

.settings-testing-provider-baseline.captured > summary .gmi {
    color: #16794b;
}

.settings-testing-provider-baseline.pending > summary .gmi {
    color: #a15c00;
}

.settings-testing-provider-baseline > summary small {
    margin-left: auto;
}

.settings-testing-provider-baseline > div {
    display: grid;
    gap: 0.55rem;
    padding: 0.25rem 0 0.15rem;
}

.settings-testing-provider-baseline p {
    margin: 0;
}

.settings-testing-provider-baseline dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.4rem;
    margin: 0;
}

.settings-testing-provider-baseline dl > div {
    display: grid;
    gap: 0.1rem;
}

.settings-testing-provider-baseline dt {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-testing-provider-baseline dd {
    margin: 0;
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-provider-baseline .settings-control-button {
    width: fit-content;
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
}

.settings-testing-resource-secret {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.settings-testing-resource-clear {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    width: fit-content;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 650;
}

.settings-testing-resource-clear input {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
}

.settings-testing-resource-advanced {
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.6rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-resource-advanced > summary {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    list-style: none;
}

.settings-testing-resource-advanced > summary::-webkit-details-marker {
    display: none;
}

.settings-testing-resource-advanced > summary small {
    margin-left: auto;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-resource-advanced-body {
    display: grid;
    gap: 0.65rem;
    padding: 0 0.7rem 0.7rem;
}

.settings-testing-resource-actor {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-resource-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--settings-border, #d8dee8);
}

.settings-testing-resource-actions .settings-control-button {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
}

@media (max-width: 650px) {
    .settings-testing-resource-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-testing-resource-toolbar .settings-control-button {
        width: 100%;
    }

    .settings-testing-resource-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-testing-provider-resource {
        grid-template-columns: 1fr;
    }

    .settings-testing-provider-baseline {
        grid-column: 1;
    }

    .settings-testing-resource-advanced > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .settings-testing-resource-advanced > summary small {
        flex-basis: 100%;
        margin-left: 1.95rem;
    }
}

.settings-testing-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.8rem;
}

.settings-testing-scenario-card {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    padding: 0.9rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.7rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-scenario-heading {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    justify-content: space-between;
}

.settings-testing-scenario-heading > div {
    display: grid;
    gap: 0.35rem;
}

.settings-testing-scenario-heading h4 {
    margin: 0;
    font-size: var(--settings-ui-type-body);
}

.settings-testing-level {
    display: inline-flex;
    width: max-content;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 999px;
    background: var(--settings-panel-muted, #f6f8fb);
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    letter-spacing: 0.02em;
}

.settings-testing-level-live_canary {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.settings-testing-level-configuration_audit {
    border-color: #d8b4fe;
    background: #faf5ff;
    color: #6b21a8;
}

.settings-testing-proves {
    margin: 0;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.45;
}

.settings-testing-proves strong {
    color: var(--settings-text, #172033);
}

.settings-testing-scenario-meta {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-scenario-meta span + span {
    padding-left: 0.55rem;
    border-left: 1px solid var(--settings-border, #d8dee8);
}

.settings-testing-fixture-preview {
    border-top: 1px solid var(--settings-border, #d8dee8);
    border-bottom: 1px solid var(--settings-border, #d8dee8);
}

.settings-testing-fixture-preview > summary {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.55rem 0;
    cursor: pointer;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-fixture-preview > div {
    display: grid;
    gap: 0.65rem;
    padding: 0 0 0.65rem;
}

.settings-testing-fixture-preview section {
    display: grid;
    gap: 0.2rem;
}

.settings-testing-fixture-preview ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
}

.settings-testing-fixture-preview small {
    color: var(--settings-muted, #64748b);
}

.settings-testing-scenario-run {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.settings-testing-scenario-configuration {
    display: grid;
    flex: 1 1 100%;
    gap: 0.5rem;
}

.settings-testing-scenario-configuration > label,
.settings-testing-scenario-configuration [data-platform-configured-options] > label {
    display: grid;
    gap: 0.25rem;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-testing-scenario-configuration [data-platform-configured-options] {
    display: grid;
    gap: 0.5rem;
}

.settings-testing-scenario-configuration [data-platform-configured-options][hidden],
.settings-testing-scenario-configuration [data-platform-exact-confirm][hidden] {
    display: none;
}

.settings-testing-scenario-configuration details {
    display: grid;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.45rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-scenario-configuration details > summary {
    cursor: pointer;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-testing-scenario-configuration details > label {
    margin-top: 0.45rem;
}

.settings-testing-planned {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.25rem;
}

.settings-testing-planned > .gmi {
    color: var(--settings-muted, #64748b);
    font-size: 1.7rem;
}

.settings-testing-planned h3,
.settings-testing-planned p {
    margin: 0 0 0.35rem;
}

.settings-testing-history-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 0.8fr)) minmax(13rem, 1.2fr);
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.65rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-history-filters label {
    display: grid;
    gap: 0.25rem;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
}

.settings-testing-progress {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.65rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-progress > div {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 0.2rem;
    min-width: 4.5rem;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    text-align: center;
}

.settings-testing-progress > div.complete,
.settings-testing-progress > div.active {
    color: #16794b;
}

.settings-testing-progress > div.failed {
    color: #b42318;
}

.settings-testing-progress > div.active .gmi {
    animation: settings-testing-pulse 1.2s ease-in-out infinite;
}

.settings-testing-progress-line {
    flex: 1 1 1.5rem;
    min-width: 1rem;
    height: 2px;
    background: var(--settings-border, #d8dee8);
}

.settings-testing-run-context {
    color: var(--settings-muted, #64748b);
}

.settings-testing-warning-list {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.settings-testing-warning-list > div {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid #f0c36a;
    border-radius: 0.5rem;
    background: #fff8e6;
    color: #7a4b00;
    font-size: var(--settings-ui-type-helper);
}

.settings-testing-suite-checklist,
.settings-testing-execution-checklist {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.settings-testing-suite-checklist h4,
.settings-testing-execution-checklist h4 {
    margin: 0 0 0.15rem;
}

.settings-testing-suite-checklist > button,
.settings-testing-execution-step > summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    width: 100%;
    padding: 0.7rem;
    text-align: left;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.6rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-suite-checklist > button {
    cursor: pointer;
}

.settings-testing-suite-checklist > button:hover {
    border-color: var(--settings-accent, #315efb);
}

.settings-testing-suite-checklist strong,
.settings-testing-suite-checklist small,
.settings-testing-execution-step strong,
.settings-testing-execution-step small {
    display: block;
}

.settings-testing-suite-checklist small,
.settings-testing-execution-step small {
    margin-top: 0.15rem;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 500;
}

.settings-testing-check-icon {
    color: var(--settings-muted, #64748b);
}

.settings-testing-check-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: var(--settings-panel-muted, #f6f8fb);
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
}

.settings-testing-execution-step {
    border-radius: 0.6rem;
}

.settings-testing-execution-step > summary {
    cursor: pointer;
    list-style: none;
}

.settings-testing-execution-step > summary::-webkit-details-marker {
    display: none;
}

.settings-testing-execution-step.active > summary {
    border-color: #60a5fa;
    background: #eff6ff;
}

.settings-testing-execution-step.complete > summary,
.settings-testing-execution-step.complete .settings-testing-check-icon {
    color: #16794b;
}

.settings-testing-execution-step.failed > summary,
.settings-testing-execution-step.failed .settings-testing-check-icon {
    border-color: #f1a5a5;
    color: #b42318;
}

.settings-testing-execution-step.warning > summary,
.settings-testing-execution-step.warning .settings-testing-check-icon {
    border-color: #f0c36a;
    color: #7a4b00;
}

.settings-testing-execution-step-body {
    display: grid;
    gap: 0.55rem;
    margin: 0 0.65rem;
    padding: 0.7rem;
    border: solid var(--settings-border, #d8dee8);
    border-width: 0 1px 1px;
    border-radius: 0 0 0.55rem 0.55rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-testing-execution-step-body p {
    margin: 0;
}

.settings-testing-step-evidence > summary,
.settings-testing-unmatched-evidence > summary {
    cursor: pointer;
    color: var(--settings-accent, #315efb);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-testing-step-evidence-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.settings-testing-step-evidence-list article {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.45rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-step-evidence-list article > div {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
}

.settings-testing-step-evidence-list p {
    margin: 0;
}

.settings-testing-step-evidence-list small {
    color: var(--settings-muted, #64748b);
}

.settings-testing-step-evidence-list pre {
    max-height: 18rem;
    margin: 0.25rem 0 0;
    padding: 0.55rem;
    overflow: auto;
    border-radius: 0.35rem;
    background: #101827;
    color: #e5edf8;
    font-size: var(--settings-ui-type-meta);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-testing-unmatched-evidence {
    margin-top: 0.9rem;
    padding: 0.7rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.55rem;
}

.settings-testing-audit {
    display: grid;
    gap: 1rem;
}

.settings-testing-audit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.settings-testing-audit-summary > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.6rem;
    background: var(--settings-panel, #fff);
}

.settings-testing-audit-summary span {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-testing-audit-summary strong {
    font-size: 1.25rem;
}

.settings-testing-audit-summary .failed {
    border-color: #f1a5a5;
}

.settings-testing-audit-summary .warning {
    border-color: #f0c36a;
}

.settings-testing-audit-summary .passed {
    border-color: #a7d7b8;
}

.settings-testing-audit-findings small {
    display: block;
    margin-top: 0.15rem;
    color: var(--settings-muted, #64748b);
    white-space: normal;
}

.settings-testing-audit-action {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.45rem;
    color: var(--settings-accent, #2563eb);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
    text-decoration: none;
}

.settings-testing-audit-action:hover {
    text-decoration: underline;
}

@keyframes settings-testing-pulse {
    50% {
        opacity: 0.45;
    }
}

@media (max-width: 1100px) {
    .settings-testing-summary,
    .settings-testing-domain-grid,
    .settings-testing-audit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-testing-history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .settings-testing-tabs {
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .settings-testing-tabs button {
        flex: 0 0 auto;
    }

    .settings-testing-summary,
    .settings-testing-domain-grid,
    .settings-testing-history-filters,
    .settings-testing-audit-summary {
        grid-template-columns: 1fr;
    }

    .settings-testing-confidence {
        grid-template-columns: 1fr;
    }

    .settings-testing-scenario-run {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-testing-suite-checklist > button,
    .settings-testing-execution-step > summary {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .settings-testing-suite-checklist .settings-status-pill,
    .settings-testing-execution-step .settings-status-pill {
        grid-column: 3;
        justify-self: start;
    }
}

.settings-air-test-scenario-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.5rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-air-qualification {
    display: grid;
    gap: 0.7rem;
}

.settings-air-qualification-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.settings-air-qualification-heading > div {
    display: grid;
    gap: 0.2rem;
}

.settings-air-qualification-heading h3,
.settings-air-qualification-heading p,
.settings-air-qualification h4 {
    margin: 0;
}

.settings-air-qualification-heading p,
.settings-air-qualification-na {
    color: var(--settings-muted, #64748b);
}

.settings-air-qualification-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.settings-air-qualification-summary {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.5rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-air-qualification-summary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-air-qualification-summary p {
    margin: 0;
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-air-qualification-body {
    display: grid;
    gap: 0.7rem;
}

.settings-air-qualification-table-wrap {
    margin-top: 0.65rem;
}

.settings-air-qualification-table {
    min-width: 78rem;
}

.settings-air-qualification-handoffs {
    min-width: 42rem;
}

.settings-air-qualification-table th,
.settings-air-qualification-table td {
    vertical-align: middle;
}

.settings-air-qualification-table td:first-child {
    min-width: 13rem;
}

.settings-air-qualification-table td:first-child small {
    display: block;
    margin-top: 0.2rem;
    color: var(--settings-muted, #64748b);
}

.settings-air-qualification-cell {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.settings-air-qualification-cell:hover .settings-status-pill,
.settings-air-qualification-cell:focus-visible .settings-status-pill,
.settings-air-qualification-cell.selected .settings-status-pill {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--settings-accent, #315efb) 35%, transparent);
}

.settings-air-qualification h4 {
    margin-top: 1rem;
}

.settings-air-test-selected-qualification {
    grid-column: 1 / -1;
    order: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--settings-accent, #315efb) 45%, var(--settings-border, #d8dee8));
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--settings-accent, #315efb) 7%, var(--settings-panel, #fff));
}

.settings-air-test-selected-qualification > div {
    display: grid;
    gap: 0.15rem;
}

.settings-air-test-selected-qualification small {
    color: var(--settings-muted, #64748b);
}

.settings-air-test-scenario-summary > div {
    display: grid;
    gap: 0.2rem;
}

.settings-air-test-scenario-summary > div > span {
    color: var(--settings-muted, #64748b);
}

.settings-air-test-scenario-summary details {
    flex: 0 0 auto;
}

.settings-air-test-scenario-summary summary {
    cursor: pointer;
    color: var(--settings-accent, #315efb);
    white-space: nowrap;
}

.settings-air-test-scenario-summary ul {
    margin: 0.35rem 0 0;
    padding-left: 1.25rem;
}

.settings-air-test-execution {
    grid-column: 1 / -1;
    order: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.45fr);
    gap: 0.75rem 1rem;
    padding: 0.75rem;
    border: 1px solid var(--settings-border, #d8dee8);
    border-radius: 0.5rem;
    background: var(--settings-panel-muted, #f6f8fb);
}

.settings-air-test-canonical-audio {
    order: 30;
}

.settings-air-test-launch-behavior {
    grid-template-columns: 1fr;
}

.settings-air-test-execution > div:first-child,
.settings-air-test-milestone > div {
    display: grid;
    gap: 0.2rem;
}

.settings-air-test-execution > div:first-child > span,
.settings-air-test-execution small,
.settings-air-test-milestone span {
    color: var(--settings-muted, #64748b);
}

.settings-air-test-execution label > span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.settings-air-test-execution input[type="number"] {
    width: 6rem;
}

.settings-air-test-milestone {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--settings-border, #d8dee8);
}

@media (max-width: 900px) {
    .settings-air-tests-mode-grid,
    .settings-air-test-launch,
    .settings-air-test-review {
        grid-template-columns: 1fr;
    }

    .settings-air-test-results-header {
        grid-template-columns: 1fr;
    }

    .settings-air-test-results-header .settings-admin-console-log-controls {
        justify-content: flex-start;
    }

    .settings-air-test-scenario-summary,
    .settings-air-test-execution {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settings-air-qualification-heading {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settings-air-qualification-actions {
        justify-content: flex-start;
    }

    .settings-air-test-selected-qualification {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .settings-air-test-selected-qualification .settings-status-pill {
        grid-column: 2;
        justify-self: start;
    }
}

.settings-admin-session-controls {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    align-items: start;
    margin-bottom: 0;
}

.settings-admin-session-policy {
    border: 1px solid var(--color-border, #d7dde5);
    border-radius: 0.65rem;
    padding: 0.7rem 0.8rem;
}

.settings-admin-session-heading {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
    margin-bottom: 0.55rem;
}

.settings-admin-session-policy-grid {
    display: grid;
    align-items: end;
    gap: 0.65rem;
    grid-template-columns: auto minmax(18rem, 1fr);
}

.settings-admin-session-number-fields {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(11.5rem, 1fr));
}

.settings-admin-session-number-fields label,
.settings-admin-session-bulk label {
    display: grid;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-admin-session-number-fields input,
.settings-admin-session-number-fields select,
.settings-admin-session-bulk select {
    min-height: 2.15rem;
}

.settings-admin-session-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-admin-session-policy-check {
    align-items: center;
    display: flex !important;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    white-space: nowrap;
}

.settings-admin-session-policy-check input {
    margin: 0;
}

.settings-admin-session-policy-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-session-policy-footer .settings-form-actions {
    flex: 0 0 auto;
    margin: 0;
}

.settings-admin-session-policy-footer .settings-form-actions button {
    white-space: nowrap;
}

.settings-admin-session-policy-footer .settings-save {
    min-width: 7.5rem;
}

.settings-admin-session-impact {
    color: var(--settings-muted, #64748b);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.3;
}

.settings-admin-session-bulk {
    border: 1px solid var(--color-border, #d7dde5);
    border-radius: 0.65rem;
    background: var(--color-surface);
}

.settings-admin-session-bulk-header {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 800;
}

.settings-admin-session-bulk form {
    display: grid;
    gap: 0.6rem;
    padding: 0 0.8rem 0.75rem;
}

.settings-admin-session-bulk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-session-bulk-footer .settings-form-actions {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 960px) {
    .settings-admin-session-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .settings-admin-session-policy-grid {
        grid-template-columns: 1fr;
    }

    .settings-admin-session-number-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-admin-session-policy-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-admin-session-bulk-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-admin-session-policy-footer .settings-form-actions {
        justify-content: flex-start;
    }

    .settings-admin-session-bulk-footer .settings-form-actions {
        justify-content: flex-start;
    }

    .settings-admin-session-bulk-header {
        display: block;
    }
}
.settings-release-certification {
    display: grid;
    gap: 1rem;
}

.settings-certification-build,
.settings-certification-fixtures,
.settings-certification-cases {
    display: grid;
    gap: .75rem;
}

.settings-certification-build {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0 0 .75rem;
}

.settings-certification-build > div,
.settings-certification-fixture,
.settings-certification-case {
    border: 1px solid var(--border-color, #d7dde5);
    border-radius: .6rem;
    padding: .8rem;
    background: var(--card-bg, #fff);
}

.settings-certification-build dt,
.settings-certification-build dd {
    margin: 0;
}

.settings-certification-build dt,
.settings-certification-fixture small,
.settings-certification-case small {
    color: var(--muted-color, #64748b);
}

.settings-certification-fixtures {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-certification-fixture > div,
.settings-certification-case > div,
.settings-certification-checks,
.settings-certification-start {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: wrap;
}

.settings-certification-fixture p,
.settings-certification-case p {
    margin: .5rem 0;
}

.settings-certification-checks span {
    border-radius: 999px;
    padding: .3rem .65rem;
    background: #eef2f7;
}

.settings-certification-checks .is-ok { color: #166534; background: #dcfce7; }
.settings-certification-checks .is-error { color: #991b1b; background: #fee2e2; }

.settings-certification-start label {
    min-width: min(100%, 230px);
    flex: 1 1 230px;
}

.settings-certification-start label > span {
    display: block;
    margin-bottom: .3rem;
}

.settings-certification-progress {
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
    margin-bottom: .8rem;
}

.settings-certification-progress > span {
    display: block;
    height: 100%;
    background: #2563eb;
}

.settings-certification-case-plan {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.settings-certification-case-plan > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
    padding: 0.6rem;
    border: 1px solid var(--border-color, #d7dde5);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--card-bg, #fff) 92%, #2563eb 8%);
}

.settings-certification-case-plan > label > input {
    margin-top: 0.2rem;
}

.settings-certification-case-plan > label > span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.settings-certification-case-plan small {
    display: block;
}

.settings-certification-evidence {
    display: grid;
    gap: 0.35rem;
    max-width: 42rem;
    margin: 0.7rem 0;
}

.settings-certification-evidence > input {
    width: 100%;
}

.settings-certification-evidence-linked,
.settings-air-operational-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.65rem 0;
}

.settings-certification-evidence-linked {
    color: #166534;
}

.settings-air-operational-filter {
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in srgb, #2563eb 35%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, #2563eb 8%, transparent);
}

.settings-testing-path {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.settings-testing-path span {
    background: color-mix(in srgb, var(--card-bg, #fff) 92%, #2563eb 8%);
    border: 1px solid var(--border-color, #d7dde5);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}

.settings-testing-path i {
    font-size: var(--settings-ui-type-body);
    opacity: 0.65;
}

.settings-testing-result-path {
    margin: 1rem 0;
}

@media (max-width: 700px) {
    .settings-background-activity {
        right: 0.5rem;
        bottom: 4rem;
        width: calc(100vw - 1rem);
    }

    .settings-certification-start {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-certification-start label {
        min-width: 100%;
    }
}

.settings-twilio-intent-confirmation {
    display: grid;
    gap: 0.8rem;
    width: min(100%, 38rem);
}

.settings-twilio-transfer-destination-form {
    display: grid;
    gap: 0.8rem;
    width: min(100%, 42rem);
}

.settings-twilio-transfer-destination-form > p,
.settings-twilio-transfer-destination-form > small {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.settings-twilio-transfer-search {
    display: grid;
    gap: 0.35rem;
}

.settings-twilio-transfer-search span {
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
}

.settings-twilio-transfer-search input {
    width: 100%;
    min-height: 2.65rem;
}

.settings-twilio-transfer-destinations {
    display: grid;
    gap: 0.45rem;
    max-height: min(48vh, 26rem);
    padding: 0.35rem;
    overflow: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.6rem;
    background: var(--color-surface-muted);
}

.settings-twilio-transfer-destination {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 22rem);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
}

.settings-twilio-transfer-destination:hover,
.settings-twilio-transfer-destination:focus-visible,
.settings-twilio-transfer-destination.selected {
    border-color: var(--color-accent, #2563eb);
}

.settings-twilio-transfer-destination.selected {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #2563eb) 22%, transparent);
}

.settings-twilio-transfer-destination.unavailable {
    cursor: not-allowed;
    opacity: 0.78;
}

.settings-twilio-transfer-destination.unavailable:hover {
    border-color: var(--color-border-muted);
    background: var(--color-surface);
}

.settings-twilio-transfer-destination-identity,
.settings-twilio-transfer-destination-readiness {
    display: flex;
}

.settings-twilio-transfer-destination-identity {
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.settings-twilio-transfer-destination-identity strong,
.settings-twilio-transfer-destination-identity small {
    overflow-wrap: break-word;
}

.settings-twilio-transfer-destination-identity .settings-twilio-transfer-destination-issues {
    color: var(--color-warning-text);
    font-weight: 700;
}

.settings-twilio-transfer-destination-readiness {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}

.settings-twilio-transfer-empty {
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.45;
    text-align: center;
}

.settings-twilio-transfer-readiness-notice {
    border: 1px solid var(--color-warning-border);
    border-radius: 0.5rem;
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-twilio-intent-confirmation > p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.settings-twilio-intent-manifest {
    display: grid;
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.6rem;
}

.settings-twilio-intent-manifest > div {
    display: grid;
    grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.4fr);
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-twilio-intent-manifest > div:first-child {
    border-top: 0;
}

.settings-twilio-intent-manifest dt {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
}

.settings-twilio-intent-manifest dd {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.settings-twilio-intent-acknowledgement {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--color-feature-settings) 10%, transparent);
    color: var(--color-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
}

.settings-twilio-intent-acknowledgement input {
    flex: 0 0 auto;
    margin-top: 0.12rem;
}

@media (max-width: 760px) {
    .settings-twilio-transfer-destination {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .settings-twilio-transfer-destination-readiness {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .settings-twilio-intent-manifest > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.settings-twilio-operations-ledger .settings-editor-header p {
    max-width: 60rem;
}

.settings-twilio-operations-table {
    min-width: 72rem;
}

.settings-twilio-operation-row.expanded {
    background: var(--color-surface-muted);
}

.settings-twilio-operation-impact-cell {
    min-width: 11.5rem;
    white-space: nowrap;
}

.settings-twilio-operation-impact {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.22rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
    line-height: 1.1;
}

.settings-twilio-operation-impact-remote {
    border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

.settings-twilio-operation-impact-local {
    border-color: color-mix(in srgb, var(--color-feature-settings) 45%, transparent);
    color: var(--color-feature-settings);
    background: color-mix(in srgb, var(--color-feature-settings) 10%, var(--color-surface));
}

.settings-twilio-operation-impact-read {
    border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}

.settings-twilio-operation-impact-none,
.settings-twilio-operation-impact-system {
    border-color: var(--color-border-muted);
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.settings-twilio-operation-summary-cell,
.settings-twilio-operation-progress-cell,
.settings-twilio-operations-table .settings-col-time {
    white-space: normal;
}

.settings-twilio-operation-summary-cell {
    min-width: 18rem;
}

.settings-twilio-operation-summary-cell strong,
.settings-twilio-operation-summary-cell small,
.settings-twilio-operation-progress-cell span,
.settings-twilio-operation-progress-cell small,
.settings-twilio-operations-table .settings-col-time span,
.settings-twilio-operations-table .settings-col-time small {
    display: block;
}

.settings-twilio-operation-summary-cell small,
.settings-twilio-operation-progress-cell small,
.settings-twilio-operations-table .settings-col-time small {
    margin-top: 0.18rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-twilio-operation-target-cell {
    min-width: 10rem;
    max-width: 20rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.settings-twilio-operation-detail-row > td {
    padding: 0;
    white-space: normal;
    background: var(--color-surface-muted);
}

.settings-twilio-operation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(16rem, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-twilio-operation-detail-section,
.settings-twilio-operation-error {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 7px;
    background: var(--color-surface);
}

.settings-twilio-operation-detail-section h4,
.settings-twilio-operation-error h4 {
    margin: 0 0 0.55rem;
    font-size: var(--settings-ui-type-helper);
}

.settings-twilio-operation-detail-section > p,
.settings-twilio-operation-error p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: 1.4;
}

.settings-twilio-operation-detail-section dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.settings-twilio-operation-detail-section dl > div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.75fr) minmax(0, 1.25fr);
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--color-border-muted);
}

.settings-twilio-operation-detail-section dl > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.settings-twilio-operation-detail-section dt {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 800;
}

.settings-twilio-operation-detail-section dd {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    overflow-wrap: anywhere;
}

.settings-twilio-operation-error {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
}

.settings-twilio-operation-error p {
    color: var(--color-danger);
}

@media (max-width: 700px) {
    .settings-twilio-operations-table {
        min-width: 0;
    }

    .settings-twilio-operations-table .settings-twilio-operation-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-twilio-operation-impact-cell,
    .settings-twilio-operation-summary-cell,
    .settings-twilio-operation-target-cell {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .settings-twilio-operation-impact-cell {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        white-space: normal;
    }

    .settings-twilio-operation-impact-cell::before {
        display: none !important;
    }

    .settings-twilio-operation-impact-cell .settings-twilio-expand-toggle {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.1rem;
    }

    .settings-twilio-operation-detail-row {
        margin-top: -0.65rem;
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .settings-twilio-operation-detail-row > td::before {
        display: none !important;
    }

    .settings-twilio-operation-details {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
        border-top: 0;
    }

    .settings-twilio-operation-detail-section dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

.settings-runbooks {
    display: grid;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-top: 1rem;
    box-sizing: border-box;
}

.settings-runbooks button {
    min-height: 44px;
    touch-action: manipulation;
}

.settings-runbook-accent-blue {
    --runbook-accent: #2563eb;
    --runbook-accent-soft: #eff6ff;
}

.settings-runbook-accent-cyan {
    --runbook-accent: #0891b2;
    --runbook-accent-soft: #ecfeff;
}

.settings-runbook-accent-green {
    --runbook-accent: #15803d;
    --runbook-accent-soft: #f0fdf4;
}

.settings-runbook-accent-amber {
    --runbook-accent: #b45309;
    --runbook-accent-soft: #fffbeb;
}

.settings-runbook-accent-violet {
    --runbook-accent: #7c3aed;
    --runbook-accent-soft: #f5f3ff;
}

.settings-runbook-accent-rose {
    --runbook-accent: #be123c;
    --runbook-accent-soft: #fff1f2;
}

.settings-runbooks-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-feature-settings) 10%, transparent), transparent 45%),
        var(--color-surface);
}

.settings-runbooks-header h2,
.settings-runbooks-header p,
.settings-runbook-detail-header h2,
.settings-runbook-detail-header p,
.settings-runbook-section-heading h3,
.settings-runbook-section-heading p,
.settings-runbook-step h4,
.settings-runbook-step p,
.settings-runbook-readiness-card p {
    margin: 0;
}

.settings-runbooks-header h2 {
    margin-top: 0.1rem;
    color: var(--color-text);
    font-size: 1.45rem;
}

.settings-runbooks-header > div:first-child > p {
    max-width: 760px;
    margin-top: 0.3rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.settings-runbooks-eyebrow {
    color: var(--color-feature-settings);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-runbooks-environment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: min(340px, 100%);
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-background);
}

.settings-runbooks-environment > .gmi {
    color: var(--color-feature-settings);
}

.settings-runbooks-environment > div {
    display: grid;
    min-width: 0;
}

.settings-runbooks-environment strong,
.settings-runbooks-environment span,
.settings-runbooks-environment small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-runbooks-environment strong {
    color: var(--color-text);
}

.settings-runbooks-environment span,
.settings-runbooks-environment small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbooks-environment button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--button-border);
    border-radius: 0.5rem;
    color: var(--button-text);
    background: var(--button-bg);
}

.settings-runbooks-counts {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 0.45rem;
}

.settings-runbooks-counts > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbooks-counts .ready strong {
    color: #15803d;
}

.settings-runbooks-counts .review strong {
    color: #b45309;
}

.settings-runbooks-counts .blocked strong {
    color: #be123c;
}

.settings-runbooks-counts .unavailable strong {
    color: var(--color-text-muted);
}

.settings-runbooks-counts .informational strong {
    color: #2563eb;
}

.settings-runbook-catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    min-width: 0;
}

.settings-runbook-catalog-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem 0.65rem;
    align-items: start;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    color: var(--color-text);
    background: var(--color-surface);
    text-align: left;
}

.settings-runbook-catalog-card:hover,
.settings-runbook-catalog-card.active {
    border-color: var(--runbook-accent);
    background: var(--runbook-accent-soft);
    box-shadow: inset 3px 0 0 var(--runbook-accent);
}

.settings-runbook-catalog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0.55rem;
    color: var(--runbook-accent);
    background: var(--runbook-accent-soft);
}

.settings-runbook-catalog-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.settings-runbook-catalog-copy strong {
    font-size: var(--settings-ui-type-helper);
}

.settings-runbook-catalog-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.settings-runbook-catalog-status {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    gap: 0.2rem;
    justify-self: start;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
}

.settings-runbook-catalog-status .gmi {
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-catalog-status.ready {
    color: #15803d;
}

.settings-runbook-catalog-status.review {
    color: #b45309;
}

.settings-runbook-catalog-status.blocked {
    color: #be123c;
}

.settings-runbook-detail {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--runbook-accent);
    border-radius: 0.8rem;
    background: var(--color-surface);
}

.settings-runbook-detail-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.settings-runbook-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.65rem;
    color: var(--runbook-accent);
    background: var(--runbook-accent-soft);
    font-size: 1.55rem;
}

.settings-runbook-detail-header h2 {
    margin-top: 0.1rem;
    color: var(--color-text);
    font-size: 1.35rem;
}

.settings-runbook-detail-header p {
    max-width: 850px;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.settings-runbook-source-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-top: 0.55rem;
}

.settings-runbook-source-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-source-meta .gmi {
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-source-meta .stale {
    color: #b45309;
    font-weight: 800;
}

.settings-runbook-readiness,
.settings-runbook-steps {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.settings-runbook-section-heading > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-runbook-section-heading > div > .gmi {
    color: var(--runbook-accent);
}

.settings-runbook-section-heading h3 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-section-heading p {
    margin-top: 0.1rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-runbook-readiness-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 0.55rem;
    background: var(--color-background);
}

.settings-runbook-readiness-card.ready {
    border-left-color: #15803d;
}

.settings-runbook-readiness-card.review {
    border-left-color: #b45309;
}

.settings-runbook-readiness-card.blocked {
    border-left-color: #be123c;
}

.settings-runbook-readiness-card.info {
    border-left-color: #2563eb;
}

.settings-runbook-readiness-card.unavailable {
    border-left-color: var(--color-text-muted);
}

.settings-runbook-readiness-card > .gmi {
    color: var(--color-text-muted);
}

.settings-runbook-readiness-card.ready > .gmi {
    color: #15803d;
}

.settings-runbook-readiness-card.review > .gmi {
    color: #b45309;
}

.settings-runbook-readiness-card.blocked > .gmi {
    color: #be123c;
}

.settings-runbook-readiness-card.info > .gmi {
    color: #2563eb;
}

.settings-runbook-readiness-card > div {
    min-width: 0;
}

.settings-runbook-readiness-card strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-readiness-card p {
    margin-top: 0.14rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.settings-runbook-readiness-card details {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-readiness-card summary {
    min-height: 28px;
    cursor: pointer;
    font-weight: 750;
}

.settings-runbook-readiness-card ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.settings-runbook-readiness-card li + li {
    margin-top: 0.2rem;
}

.settings-runbook-phase-bar {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-background);
    overflow-x: auto;
    scrollbar-width: thin;
}

.settings-runbook-phase-bar button {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0.05rem 0.35rem;
    align-items: center;
    flex: 0 0 auto;
    min-width: 118px;
    padding: 0.45rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--color-text-muted);
    background: transparent;
}

.settings-runbook-phase-bar button.active {
    border-color: var(--runbook-accent);
    color: var(--runbook-accent);
    background: var(--runbook-accent-soft);
}

.settings-runbook-phase-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / 3;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
}

.settings-runbook-phase-bar button.active .settings-runbook-phase-index {
    color: #fff;
    background: var(--runbook-accent);
}

.settings-runbook-phase-bar button > .gmi {
    justify-self: start;
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-phase-bar button strong {
    grid-column: 2;
    justify-self: start;
    font-size: var(--settings-ui-type-meta);
    white-space: nowrap;
}

.settings-runbook-phase-line {
    flex: 1 0 18px;
    min-width: 18px;
    height: 2px;
    margin: 0 0.2rem;
    background: var(--color-border);
}

.settings-runbook-step-list {
    display: grid;
    gap: 0.65rem;
}

.settings-runbook-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-background);
}

.settings-runbook-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #fff;
    background: var(--runbook-accent);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
}

.settings-runbook-step-content {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.settings-runbook-step h4 {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-instruction {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.45;
}

.settings-runbook-outcome,
.settings-runbook-stop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.settings-runbook-outcome {
    color: #166534;
    background: #f0fdf4;
}

.settings-runbook-stop {
    color: #9f1239;
    background: #fff1f2;
}

.settings-runbook-outcome > div,
.settings-runbook-stop > div {
    display: grid;
    gap: 0.05rem;
}

.settings-runbook-outcome strong,
.settings-runbook-stop strong {
    font-size: var(--settings-ui-type-meta);
    text-transform: uppercase;
}

.settings-runbook-outcome span:not(.gmi),
.settings-runbook-stop span:not(.gmi) {
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-runbook-command {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    background: #0f172a;
}

.settings-runbook-command > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem 0.35rem 0.65rem;
    border-bottom: 1px solid #334155;
}

.settings-runbook-command > div > span {
    color: #94a3b8;
    font-size: var(--settings-ui-type-meta);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-runbook-command button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 34px;
    padding: 0.25rem 0.55rem;
    border: 1px solid #475569;
    border-radius: 0.4rem;
    color: #e2e8f0;
    background: #1e293b;
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-command pre {
    max-width: 100%;
    margin: 0;
    padding: 0.7rem;
    color: #e2e8f0;
    background: transparent;
    font-size: var(--settings-ui-type-meta);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-runbook-step-details {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-step-details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 34px;
    cursor: pointer;
    font-weight: 750;
    list-style: none;
}

.settings-runbook-step-details summary::-webkit-details-marker,
.settings-runbook-decisions > summary::-webkit-details-marker,
.settings-runbook-reference > summary::-webkit-details-marker {
    display: none;
}

.settings-runbook-step-details p {
    padding: 0.4rem 0.55rem;
    border-left: 2px solid var(--runbook-accent);
    line-height: 1.45;
}

.settings-runbook-decisions,
.settings-runbook-reference {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-background);
}

.settings-runbook-decisions > summary,
.settings-runbook-reference > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.settings-runbook-decisions > summary > span:nth-child(2),
.settings-runbook-reference > summary > span:nth-child(2) {
    display: grid;
}

.settings-runbook-decisions > summary small,
.settings-runbook-reference > summary small {
    margin-top: 0.1rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 500;
}

.settings-runbook-decisions[open] > summary > .gmi:last-child,
.settings-runbook-reference[open] > summary > .gmi:last-child {
    transform: rotate(180deg);
}

.settings-runbook-decision-table {
    display: grid;
    border-top: 1px solid var(--color-border);
}

.settings-runbook-decision-table > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.4;
}

.settings-runbook-decision-table > div + div {
    border-top: 1px solid var(--color-border-muted);
}

.settings-runbook-decision-table > .heading {
    color: var(--color-text);
    background: var(--runbook-accent-soft);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    text-transform: uppercase;
}

.settings-runbook-decision-table strong {
    color: var(--color-text);
}

.settings-runbook-markdown {
    padding: 0.8rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.5;
}

.settings-runbook-markdown h2,
.settings-runbook-markdown h3,
.settings-runbook-markdown h4,
.settings-runbook-markdown h5 {
    margin: 1rem 0 0.35rem;
    color: var(--color-text);
}

.settings-runbook-markdown h2:first-child,
.settings-runbook-markdown h3:first-child {
    margin-top: 0;
}

.settings-runbook-markdown p {
    margin: 0.35rem 0;
}

.settings-runbook-markdown ul,
.settings-runbook-markdown ol {
    margin: 0.35rem 0;
    padding-left: 1.25rem;
}

.settings-runbook-markdown li + li {
    margin-top: 0.2rem;
}

.settings-runbook-markdown code {
    padding: 0.08rem 0.25rem;
    border-radius: 0.25rem;
    color: var(--color-text);
    background: var(--color-surface);
    overflow-wrap: anywhere;
}

.settings-runbook-markdown pre {
    max-width: 100%;
    padding: 0.65rem;
    overflow-x: auto;
    border-radius: 0.45rem;
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.settings-runbook-markdown pre code {
    padding: 0;
    color: inherit;
    background: transparent;
}

.settings-runbook-visual-flow {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    max-width: 100%;
    margin: 0.6rem 0;
    padding: 0.65rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-surface);
}

.settings-runbook-visual-flow > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    flex: 1 0 138px;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-background);
}

.settings-runbook-visual-flow > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #fff;
    background: var(--runbook-accent);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
}

.settings-runbook-visual-flow > div > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
}

.settings-runbook-visual-flow > .gmi {
    align-self: center;
    flex: 0 0 auto;
    color: var(--runbook-accent);
    font-size: var(--settings-ui-type-body);
}

.settings-runbook-visual-lanes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.6rem 0;
}

.settings-runbook-visual-lanes > article {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 0.45rem 0.6rem;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--runbook-accent);
    border-radius: 0.55rem;
    background: var(--color-surface);
}

.settings-runbook-visual-lanes > article > strong {
    grid-column: 1 / -1;
    color: var(--color-text);
    font-size: var(--settings-ui-type-meta);
}

.settings-runbook-visual-lanes > article > span {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.settings-runbook-visual-lanes > article small {
    display: block;
    margin-bottom: 0.08rem;
    color: var(--runbook-accent);
    font-size: var(--settings-ui-type-meta);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-runbook-markdown-table {
    max-width: 100%;
    margin: 0.5rem 0;
    overflow-x: auto;
}

.settings-runbook-markdown-table table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.settings-runbook-markdown-table th,
.settings-runbook-markdown-table td {
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.settings-runbook-markdown-table th {
    background: var(--runbook-accent-soft);
}

.settings-runbook-loading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 120px;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-surface);
}

.settings-runbook-loading > div {
    flex: 1;
    min-width: 0;
}

.settings-runbook-loading h3,
.settings-runbook-loading p {
    margin: 0;
}

.settings-runbook-loading p {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
}

@media (max-width: 1100px) {
    .settings-runbook-catalog,
    .settings-runbook-command-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .settings-runbooks {
        width: 100%;
        min-width: 0;
        padding-top: 0.65rem;
    }

    .settings-runbooks-header {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.8rem;
    }

    .settings-runbooks-environment {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .settings-runbook-catalog,
    .settings-runbook-readiness-grid,
    .settings-runbook-command-guide-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-runbook-catalog-card {
        width: 100%;
        box-sizing: border-box;
    }

    .settings-runbook-detail {
        width: 100%;
        min-width: 0;
        padding: 0.75rem;
        box-sizing: border-box;
    }

    .settings-runbook-detail-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-runbook-detail-icon {
        width: 42px;
        height: 42px;
    }

    .settings-runbook-phase-bar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        scroll-snap-type: x proximity;
    }

    .settings-runbook-phase-bar button {
        min-width: 132px;
        scroll-snap-align: start;
    }

    .settings-runbook-step {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.65rem;
    }

    .settings-runbook-step-number {
        width: 26px;
        height: 26px;
    }

    .settings-runbook-command > div {
        align-items: stretch;
    }

    .settings-runbook-command button {
        min-height: 40px;
    }

    .settings-runbook-decision-table > .heading {
        display: none;
    }

    .settings-runbook-decision-table > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .settings-runbook-decision-table > div > span:first-child::before,
    .settings-runbook-decision-table > div > strong::before,
    .settings-runbook-decision-table > div > span:last-child::before {
        display: block;
        margin-bottom: 0.05rem;
        color: var(--color-text-muted);
        font-size: var(--settings-ui-type-meta);
        font-weight: 850;
        text-transform: uppercase;
    }

    .settings-runbook-decision-table > div > span:first-child::before {
        content: "When";
    }

    .settings-runbook-decision-table > div > strong::before {
        content: "Do";
    }

    .settings-runbook-decision-table > div > span:last-child::before {
        content: "Why";
    }

    .settings-runbook-reference > summary,
    .settings-runbook-decisions > summary {
        min-height: 52px;
    }

    .settings-runbook-visual-flow {
        flex-direction: column;
        overflow-x: visible;
    }

    .settings-runbook-visual-flow > div {
        flex: none;
        width: 100%;
        box-sizing: border-box;
    }

    .settings-runbook-visual-flow > .gmi {
        transform: rotate(90deg);
    }

    .settings-runbook-visual-lanes {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.settings-view #settings_form .settings-user-notifications {
    grid-column: 1 / -1;
}

.settings-user-notification-heading,
.settings-account-summary-recipients-heading {
    display: grid;
    align-self: start;
    gap: 0.2rem;
    grid-column: 1;
    min-width: 0;
}

.settings-user-notification-heading > strong,
.settings-account-summary-recipients-heading > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    line-height: var(--settings-ui-line-heading);
}

.settings-account-summary-recipients-heading > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 500;
    line-height: var(--settings-ui-line-body);
}

.settings-user-notifications > .settings-table-wrap {
    grid-column: 1 / -1;
    width: 100%;
}

.settings-user-notification-name {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.settings-user-notification-name > strong,
.settings-user-notification-name > small {
    display: block;
}

.settings-user-notification-name > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 500;
    line-height: var(--settings-ui-line-body);
}

.settings-user-notifications .settings-table th.settings-user-notification-channel-heading,
.settings-user-notifications .settings-table td.settings-user-notification-channel-cell {
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    text-align: center;
}

.settings-user-notification-channel-control {
    display: grid;
    place-items: center;
    gap: 0.18rem;
    min-height: 2rem;
}

.settings-user-notification-unavailable {
    color: var(--color-text-muted);
}

.settings-admin-console-log-search {
    display: grid;
    grid-template-columns: minmax(15rem, 2fr) repeat(4, minmax(9rem, 1fr)) auto;
    gap: var(--settings-ui-space-3);
    align-items: end;
    padding: var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
}

.settings-admin-console-log-search > label {
    display: grid;
    gap: var(--settings-ui-space-1);
    min-width: 0;
}

.settings-admin-console-log-search > label > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    text-transform: uppercase;
}

.settings-admin-console-log-search-summary {
    display: flex;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    padding: var(--settings-ui-space-3) 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-contained-section-card {
    min-width: 0;
    margin: 0 0 var(--settings-ui-space-4);
    padding: var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
}

fieldset.settings-ui-contained-section-card {
    padding: 0;
    overflow: hidden;
}

.settings-ui-contained-section-card > :is(h3, legend) {
    margin: 0;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4) 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-title);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-contained-section-card > p {
    margin: 0;
    padding: var(--settings-ui-space-2) var(--settings-ui-space-4) var(--settings-ui-space-3);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-contained-section-card > .settings-admin-console-policy-nested {
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-storage-policy-form {
    display: grid;
    gap: var(--settings-ui-space-4);
}

.settings-admin-console-storage-policy-card {
    padding: 0;
    overflow: hidden;
}

.settings-admin-console-storage-policy-fields {
    display: grid;
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface);
}

.settings-admin-console-storage-policy-fields > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
    gap: var(--settings-ui-space-4);
    align-items: center;
    min-width: 0;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
}

.settings-admin-console-storage-policy-fields > label + label {
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-storage-policy-fields strong,
.settings-admin-console-storage-policy-fields small {
    display: block;
}

.settings-admin-console-storage-policy-fields small {
    margin-top: var(--settings-ui-space-1);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console-storage-policy-fields :is(select, input:not([type="checkbox"])) {
    width: 100%;
    min-width: 0;
}

.settings-admin-console-storage-policy-fields input[type="checkbox"] {
    justify-self: end;
}

.settings-admin-console-storage-policy-actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);
}

.settings-admin-console-storage-cleanup-tabs {
    margin-bottom: var(--settings-ui-space-4);
}

@media (max-width: 760px) {
    .settings-admin-console-storage-policy-fields > label {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--settings-ui-space-2);
    }

    .settings-admin-console-storage-policy-fields input[type="checkbox"] {
        justify-self: start;
    }
}

.settings-admin-console-storage-profile-table .settings-col-path {
    overflow-wrap: anywhere;
}

.settings-admin-console-storage-topology > .settings-admin-console-storage-topology-group,
.settings-admin-console-storage-operation-detail > .settings-ui-flat-section {
    margin: var(--settings-ui-space-3) 0 0;
}

.settings-admin-console-storage-topology-group + .settings-admin-console-storage-topology-group {
    padding-top: var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
}

.settings-admin-console-storage-topology-root {
    display: grid;
    grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr);
    gap: var(--settings-ui-space-3);
    align-items: baseline;
    padding: 0 var(--settings-ui-space-4) var(--settings-ui-space-2);
}

.settings-admin-console-storage-topology-root code,
.settings-admin-console-storage-operation-detail td[data-label="Path"] {
    overflow-wrap: anywhere;
}

.settings-admin-console-storage-operation-detail > .settings-editor-header {
    margin: 0 0 var(--settings-ui-space-3);
}

.settings-admin-console-storage-pagination {
    justify-content: flex-end;
    padding-top: var(--settings-ui-space-3);
}

@media (max-width: 1180px) {
    .settings-admin-console-log-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .settings-admin-console-log-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-admin-console-storage-topology-root {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-user-notifications .settings-table th.settings-user-notification-channel-heading,
    .settings-user-notifications .settings-table td.settings-user-notification-channel-cell {
        width: auto;
        min-width: 0;
        max-width: none;
    }
}
.settings-form-field[data-air-provider-condition][hidden],
.settings-form-field[data-air-gender-field][hidden] {
    display: none !important;
}



:root {
    --communication-call-surface: color-mix(in srgb, var(--color-surface) 70%, var(--color-feature-calls-soft));
    --communication-text-surface: var(--color-feature-texts-soft);
}

.comm-card {
    --comm-accent: var(--color-feature-calls);
    --comm-accent-soft: var(--color-feature-calls-soft);
    --comm-accent-border: var(--color-feature-calls-border);
    --comm-section-inner-gap: 0.42rem;
    --comm-section-inner-gap-sm: 0.24rem;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
    box-shadow: var(--elevation-content);
    overflow: hidden;
    transition: var(--motion-card-transition);
}

.comm-card::after,
.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--motion-card-sheen);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-14%);
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.comm-card:not(.active-call):hover,
.contact:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--elevation-content-hover);
    transform: none;
}

.comm-card:hover::after,
.contact:hover::after {
    opacity: 0.68;
    transform: translateX(0);
}

.contact {
    --comm-accent: var(--color-feature-contacts);
    position: relative;
    overflow: hidden;
    box-shadow: var(--elevation-content);
    transition: var(--motion-card-transition);
}

.comm-card.incoming {
    --comm-accent: #3b82c4;
    --comm-accent-soft: #f5fbff;
    --comm-accent-border: #bfdbfe;
    align-self: flex-start;
}

.comm-card.outgoing {
    --comm-accent: #26a269;
    --comm-accent-soft: #f5fff8;
    --comm-accent-border: #bbf7d0;
    align-self: flex-end;
}

.phonecall.comm-card {
    --comm-accent: var(--color-feature-calls);
    --comm-accent-soft: var(--color-feature-calls-soft);
    --comm-accent-border: var(--color-feature-calls-border);
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        linear-gradient(var(--communication-call-surface), var(--communication-call-surface));
}

.phonecall.comm-card.outgoing {
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        linear-gradient(var(--communication-call-surface), var(--communication-call-surface));
}

.txtmsg.comm-card-message {
    --comm-accent: var(--color-feature-texts);
    --comm-accent-soft: var(--color-feature-texts-soft);
    --comm-accent-border: var(--color-feature-texts-border);
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        linear-gradient(var(--communication-text-surface), var(--communication-text-surface));
}

.txtmsg.comm-card-message.outgoing {
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        linear-gradient(var(--communication-text-surface), var(--communication-text-surface));
}

.comm-section-inner-gap {
    gap: var(--comm-section-inner-gap);
}

.comm-section-inner-gap-sm {
    gap: var(--comm-section-inner-gap-sm);
}

.comm-card.incoming,
.comm-card.outgoing {
    position: relative;
    width: min(483px, calc(100% - 1rem));
    max-width: 483px;
}

.phonecall.comm-card.incoming,
.phonecall.comm-card.outgoing {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 998px) {
    .phonecall.comm-card.has-side-details {
        width: 100%;
        max-width: 100%;
    }

    .phonecall.has-side-details .phonebtm {
        display: grid;
        grid-template-columns: minmax(0, 420px) minmax(24rem, 1fr);
        align-items: start;
        background: transparent;
    }

    .phonecall.has-side-details .call-main-stack {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .phonecall.has-side-details .call-side-stack {
        grid-column: 2 / 3;
        grid-row: 1;
        padding: 0.72rem 0.72rem 0.72rem 0;
    }

    .phonecall.has-side-details .call-side-stack {
        align-self: start;
        gap: var(--comm-section-inner-gap);
    }
}

.comm-card-top {
    border-bottom: 1px solid var(--color-border-muted);
    background: rgba(255, 255, 255, 0.78);
}

.phonecall.comm-card .phonebtm {
    background: transparent;
}

.comm-account-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.6rem 0.6rem 0 0;
    background: rgba(255, 255, 255, 0.44);
    padding: 0.46rem 0.62rem;
}

.phonecall .comm-account-row.call-account-row {
    border-bottom-color: rgba(30, 144, 255, 0.24);
    background: transparent;
}

.txtmsg.comm-card-message .comm-account-row {
    border-bottom-color: rgba(109, 91, 208, 0.24);
    background: transparent;
}

.comm-direction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 4.1rem;
    min-height: 1.54rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.22rem 0.56rem;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.comm-direction-badge.incoming {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4f8f;
}

.comm-direction-badge.outgoing {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.comm-account-name {
    justify-self: center;
    min-width: 0;
    color: #4b5565;
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
    text-align: center;
    text-transform: uppercase;
}

.comm-account-side {
    justify-self: end;
    min-width: 4.1rem;
}

.comm-account-spacer {
    width: 100%;
}

.comm-date-stack {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.16rem;
    padding: 0.82rem 1rem;
    text-align: left;
}

.comm-day,
.comm-date,
.comm-time {
    min-width: 0;
    line-height: 1.15;
    text-align: left;
}

.comm-day {
    color: #172033;
    font-size: 0.96rem;
    font-weight: 850;
}

.comm-date {
    color: #687385;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
}

.comm-time {
    color: #344054;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.1;
}

.comm-party {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.68rem 0.55rem;
    text-align: left;
}

.comm-party-main {
    min-width: 0;
}

.comm-party-label {
    color: #7a8596;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    margin-bottom: 0.32rem;
    text-transform: uppercase;
}

.comm-party-name {
    color: #172033;
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.comm-party-number {
    color: #5f6b7a;
    font-size: 0.82rem;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
}

.comm-party-number-line,
.overview-party-number-line,
.contact-channel-line {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.28rem;
}

.communication-number-search {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border-muted));
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-brand-active);
    padding: 0;
    cursor: pointer;
}

.communication-number-search > .gmi {
    font-size: 0.86rem;
}
@media (pointer: coarse) {
    .communication-number-search { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
}

.communication-number-search:hover,
.communication-number-search:focus-visible {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
    outline: 2px solid color-mix(in srgb, var(--color-brand) 18%, transparent);
    outline-offset: 1px;
}

.comm-message-route {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 0.3rem;
    margin-top: 0.38rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border-muted) 72%, transparent);
    padding-top: 0.34rem;
    color: var(--color-text-muted);
}

.comm-message-route > .gmi {
    color: var(--color-feature-texts, var(--color-brand-active));
    font-size: 0.95rem;
}

.comm-message-route-copy {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.3rem;
    line-height: 1.25;
}

.comm-message-route-copy small {
    flex-basis: 100%;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 750;
}

.comm-message-route-copy strong,
.comm-message-route-copy > span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-message-route-copy strong {
    color: var(--color-text);
    font-size: var(--ui-type-caption);
    font-weight: 850;
}

.comm-message-route-copy > span {
    font-size: var(--ui-type-meta);
}

.txtmsg.comm-card-message {
    text-align: left;
}

.txtmsg.comm-card-message.incoming {
    border-left: 1px solid #d9e3ef;
}

.txtmsg.comm-card-message.outgoing {
    border-right: 1px solid #d9e3ef;
}

.txtmsg.comm-card-message.incoming .msgtop.comm-card-top,
.txtmsg.comm-card-message.incoming .msgbtm.comm-card-body {
    border-left: 0;
}

.txtmsg.comm-card-message.outgoing .msgtop.comm-card-top,
.txtmsg.comm-card-message.outgoing .msgbtm.comm-card-body {
    border-right: 0;
}

.txtmsg.comm-card-message .msgtop.comm-card-top {
    display: grid;
    grid-template-columns: minmax(5.6rem, 6.8rem) minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    min-height: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.68);
    padding: 0.72rem 0.48rem;
    color: var(--color-text);
    box-shadow: none;
}

.txtmsg.comm-card-message .message-parties .comm-party {
    border: 0;
    border-radius: 0;
    background: transparent;
    justify-self: stretch;
    padding: 0;
}

.txtmsg.comm-card-message .comm-date-stack {
    justify-self: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0.65rem;
    text-align: left;
}

.txtmsg.comm-card-message .text-message-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.75rem;
    min-height: 1.54rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--comm-accent);
    box-shadow: inset 0 0 0 1px var(--comm-accent-border), 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.22rem 0.56rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.txtmsg.comm-card-message.text-group-start,
.txtmsg.comm-card-message.text-group-continued,
.txtmsg.comm-card-message.text-group-has-next,
.txtmsg.comm-card-message.text-group-end {
    overflow: visible;
}

.txtmsg.comm-card-message.text-group-start.incoming,
.txtmsg.comm-card-message.text-group-continued.incoming,
.txtmsg.comm-card-message.text-group-has-next.incoming,
.txtmsg.comm-card-message.text-group-end.incoming {
    border-left-color: var(--color-border-muted);
}

.txtmsg.comm-card-message.text-group-start.outgoing,
.txtmsg.comm-card-message.text-group-continued.outgoing,
.txtmsg.comm-card-message.text-group-has-next.outgoing,
.txtmsg.comm-card-message.text-group-end.outgoing {
    border-right-color: var(--color-border-muted);
}

.txtmsg.comm-card-message.text-group-start::before,
.txtmsg.comm-card-message.text-group-continued::before,
.txtmsg.comm-card-message.text-group-has-next::before,
.txtmsg.comm-card-message.text-group-end::before {
    content: "";
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.34rem;
    background: var(--comm-accent);
    pointer-events: none;
    z-index: 2;
}

.txtmsg.comm-card-message.text-group-start.text-group-has-next::before {
    bottom: -0.8rem;
}

.txtmsg.comm-card-message.text-group-continued.text-group-has-next::before {
    top: -0.8rem;
    bottom: -0.8rem;
}

.txtmsg.comm-card-message.text-group-end::before {
    top: -0.8rem;
}

.txtmsg.comm-card-message.incoming::before {
    left: -0.34rem;
}

.txtmsg.comm-card-message.outgoing::before {
    right: -0.34rem;
}

.txtmsg.comm-card-message.text-group-continued {
    margin-top: -0.36rem;
}

.txtmsg.comm-card-message.text-group-start.incoming {
    border-bottom-left-radius: 0.28rem;
}

.txtmsg.comm-card-message.text-group-continued.incoming {
    border-top-left-radius: 0.28rem;
    border-bottom-left-radius: 0.28rem;
}

.txtmsg.comm-card-message.text-group-end.incoming {
    border-top-left-radius: 0.28rem;
}

.txtmsg.comm-card-message.text-group-start.outgoing {
    border-bottom-right-radius: 0.28rem;
}

.txtmsg.comm-card-message.text-group-continued.outgoing {
    border-top-right-radius: 0.28rem;
    border-bottom-right-radius: 0.28rem;
}

.txtmsg.comm-card-message.text-group-end.outgoing {
    border-top-right-radius: 0.28rem;
}

.txtmsg.comm-card-message .msgbtm.comm-card-body {
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0.72rem 0.48rem;
    box-shadow: none;
}

.txtmsg.comm-card-message .msgbody.comm-card-main-text {
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 0.45rem;
    background: #ffffff;
    color: var(--color-text);
    line-height: 1.48;
    padding: 0.68rem 0.58rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.txtmsg.comm-card-message .msgfiles.comm-card-attachments {
    justify-content: flex-start;
    gap: 0.65rem;
    border-top: 1px solid rgba(124, 58, 237, 0.14);
    background: #ffffff;
    margin-top: 0.65rem;
    padding: 0.75rem 0.7rem;
}

.txtmsg.comm-card-message .msgfiles.comm-card-attachments img,
.txtmsg.comm-card-message .msgfiles.comm-card-attachments video,
.txtmsg.comm-card-message .msgfiles.comm-card-attachments audio {
    max-width: min(18rem, 100%);
    max-height: 14rem;
    border-radius: 0.45rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.txtmsg.comm-card-message .after.comm-card-after {
    border-top: 1px solid rgba(124, 58, 237, 0.14);
    background: rgba(255, 255, 255, 0.68);
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.45rem 0.65rem;
    text-align: right;
}

@media (max-width: 700px) {
    .comm-account-row {
        column-gap: 0.5rem;
    }

    .comm-direction-badge,
    .comm-account-side {
        min-width: 4.1rem;
    }

    .txtmsg.comm-card-message .msgtop.comm-card-top {
        grid-template-columns: minmax(5.15rem, 6rem) minmax(0, 1fr);
        gap: 0.36rem;
        padding: 0.55rem 0.48rem;
    }

    .txtmsg.comm-card-message .comm-date-stack {
        padding: 0 0.65rem;
    }

    .txtmsg.comm-card-message .text-message-status {
        min-width: 3.85rem;
    }

    .comm-card:hover,
    .contact:hover {
        transform: none;
    }
}

.txtmsg.comm-card-message .msgtop.comm-card-top,
.txtmsg.comm-card-message .msgtop.comm-card-top > *,
.txtmsg.comm-card-message .msgtop.comm-card-top .comm-party,
.txtmsg.comm-card-message .msgtop.comm-card-top .comm-date-stack {
    background: transparent;
    background-color: transparent;
    background-image: none;
}

.phonecall.comm-card .phonebtm,
.phonecall.comm-card.has-side-details .phonebtm,
.phonecall.comm-card .call-main-stack,
.phonecall.comm-card .call-side-stack,
.txtmsg.comm-card-message .msgbtm.comm-card-body {
    background: transparent;
    background-color: transparent;
    background-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .comm-card,
    .contact,
    .comm-card::after,
    .contact::after {
        transition: none;
    }

    .comm-card:hover,
    .contact:hover {
        transform: none;
    }

    .comm-card::after,
    .contact::after,
    .comm-card:hover::after,
    .contact:hover::after {
        opacity: 0;
        transform: none;
    }
}

body.workspace-layout-switching main.content,
body.workspace-layout-switching main.content > .account-active-call-monitor,
body.workspace-layout-switching .overview-workspace,
body.workspace-layout-switching .overview-board,
body.workspace-layout-switching .overview-conversations {
    transition: none !important;
}

/* Communication timeline theme */
.comm-card {
    border-color: #d5e0ed;
    border-radius: 1.05rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.comm-card:not(.active-call):hover {
    border-color: #b8cbe2;
    box-shadow: var(--shadow-card-hover);
}

.phonecall.comm-card,
.txtmsg.comm-card-message {
    container-type: inline-size;
}

.phonecall.comm-card {
    isolation: isolate;
    background: var(--color-surface);
}

.phonecall.comm-card.outgoing {
    background: var(--color-surface);
}

.phonecall.comm-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--communication-direction-rail-width);
    background: var(--comm-accent);
    pointer-events: none;
    z-index: 6;
}

.phonecall.comm-card.outgoing::before {
    right: auto;
    left: 0;
}

.txtmsg.comm-card-message {
    width: min(34rem, calc(100% - 1rem));
    max-width: 34rem;
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        var(--color-surface);
}

.txtmsg.comm-card-message.outgoing {
    background:
        linear-gradient(to right, var(--comm-accent) 0 var(--communication-direction-rail-width), transparent var(--communication-direction-rail-width)),
        var(--color-surface);
}

.comm-card-header {
    isolation: isolate;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.45rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 0;
    background: var(--call-header-background, color-mix(in srgb, var(--comm-accent) 8%, var(--communication-record-bg, var(--color-surface))));
    padding: 0.55rem 0.8rem 0.55rem 1.05rem;
}

/* Vue summary/detail headers provide the same surface; legacy headers retain their fallback. */
.phonecall.comm-card .comm-account-row.comm-card-header,
.txtmsg.comm-card-message .comm-account-row.comm-card-header {
    border-bottom-color: var(--call-header-border, var(--color-border-muted));
    background: var(--call-header-background, color-mix(in srgb, var(--comm-accent) 8%, var(--communication-record-bg, var(--color-surface))));
}

.phonecall.comm-card.active-call,
.phonecall.comm-card.active-call.ringing-call {
    border-color: var(--color-border);
    border-left-color: var(--comm-accent);
    box-shadow: var(--shadow-card);
}

.comm-card-header > *:not(.comm-signal-art) {
    position: relative;
    z-index: 2;
}

.comm-header-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.communication-entity-icon {
    position: relative;
    flex: 0 0 auto;
}

.communication-entity-button {
    appearance: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.communication-entity-button:hover,
.communication-entity-button:focus-visible {
    border-color: var(--color-brand);
    outline: 3px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    outline-offset: 2px;
}

.communication-icon-bubble {
    position: absolute;
    right: -0.28rem;
    bottom: -0.24rem;
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-surface-elevated);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    font-size: 0.62rem;
    box-shadow: var(--shadow-sm);
}

.communication-icon-bubble.is-call {
    color: var(--color-feature-calls);
}

.communication-icon-bubble.is-text {
    color: var(--color-feature-texts);
}

.communication-icon-bubble.is-incoming {
    background: #dbeafe;
    color: #1d4ed8;
}

.communication-icon-bubble.is-outgoing {
    background: #f3e8ff;
    color: #7e22ce;
}

.comm-channel-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--comm-accent-border);
    border-radius: 0.68rem;
    background: var(--comm-accent-soft);
    color: var(--comm-accent);
    font-size: 1.05rem;
    line-height: 1;
}

.comm-channel-icon.communication-entity-icon-header > .gmi:first-child {
    font-size: 1.05rem;
}

.comm-card-header .comm-direction-badge {
    min-width: 0;
    min-height: 1.48rem;
    border-color: var(--comm-accent-border);
    background: var(--comm-accent-soft);
    color: var(--comm-accent);
    padding: 0.2rem 0.52rem;
    font-size: 0.68rem;
}

.comm-card-header .comm-account-name {
    color: #3e4a5d;
    font-size: 0.76rem;
    letter-spacing: 0.015em;
}

.comm-card-header .comm-account-side {
    position: relative;
    z-index: 2;
}

.comm-signal-art {
    position: absolute;
    right: 7rem;
    bottom: -0.25rem;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    height: 2.9rem;
    opacity: 0.07;
    pointer-events: none;
    transform: skewX(-16deg);
    z-index: 1;
}

.comm-signal-art i {
    display: block;
    width: 0.5rem;
    border-radius: 999px;
    background: var(--comm-accent);
}

.comm-signal-art i:nth-child(1) {
    height: 0.9rem;
}

.comm-signal-art i:nth-child(2) {
    height: 1.85rem;
}

.comm-signal-art i:nth-child(3) {
    height: 1.25rem;
}

.comm-signal-art i:nth-child(4) {
    height: 2.5rem;
}

.comm-signal-art i:nth-child(5) {
    height: 1.5rem;
}

@media (min-width: 998px) {
    .phonecall.has-side-details .phonebtm {
        grid-template-columns: clamp(18rem, 37%, 26rem) minmax(24rem, 1fr);
        align-items: stretch;
    }

    .phonecall.has-side-details .call-main-stack {
        align-self: stretch;
        border-right: 1px solid var(--color-border-muted);
    }

    .phonecall.has-side-details .call-side-stack {
        align-self: stretch;
        padding: 0.65rem 0.75rem 0.75rem;
    }
}

.phonecall.comm-card .call-main-stack {
    background: var(--communication-record-bg, var(--color-surface));
}

.phonecall.comm-card .call-side-stack {
    background: var(--color-surface) !important;
}

.phonecall.comm-card .call-main-stack > .phonerow.call-parent-row {
    display: grid;
    grid-template-areas:
        "date status"
        "from from"
        "to to";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 0.65rem;
    border: 0;
    background: transparent;
    padding: 1rem 1rem 0.85rem 1.3rem;
}

.phonecall.comm-card .call-parent-row .parent-call-date {
    grid-area: date;
    align-self: start;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    justify-content: start;
    gap: 0.12rem 0.24rem;
    border: 0;
    background: transparent;
    padding: 0;
}

.phonecall.comm-card .call-parent-row .comm-day {
    grid-column: 1 / -1;
}

.phonecall.comm-card .call-parent-row .comm-date,
.phonecall.comm-card .call-parent-row .comm-time {
    display: inline;
}

.phonecall.comm-card .call-parent-row .comm-date::after {
    content: " · ";
}

.phonecall.comm-card .call-parent-row .parent-call-time-status {
    grid-area: status;
    align-self: start;
    justify-self: end;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.22rem;
    min-width: 0;
    width: fit-content;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--call-leg-status-text);
    padding: 0.2rem 0;
    box-shadow: none;
    text-align: right;
    white-space: nowrap;
}

.phonecall.comm-card .call-parent-row .parent-call-time-status::before {
    content: "";
    align-self: center;
    flex: 0 0 auto;
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.08rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, currentColor 13%, transparent);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status .call-status {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.025em;
    text-transform: lowercase;
}

.phonecall.comm-card .call-parent-row .parent-call-time-status .call-status-duration {
    display: inline;
    width: auto;
    color: inherit;
    font-size: 0.68rem;
    font-weight: 850;
}

.phonecall.comm-card .call-parent-row .parent-call-time-status .call-status-duration::before {
    content: "·";
    margin-right: 0.22rem;
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.ringing {
    color: var(--color-call-ringing);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.in-progress,
.phonecall.comm-card .call-parent-row .parent-call-time-status.answered {
    color: var(--communication-tone-connected-text);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.in-menu,
.phonecall.comm-card .call-parent-row .parent-call-time-status.queued,
.phonecall.comm-card .call-parent-row .parent-call-time-status.initiated {
    color: #64748b;
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.completed {
    color: var(--communication-tone-completed-text);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.failed {
    color: var(--color-danger-text);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.busy,
.phonecall.comm-card .call-parent-row .parent-call-time-status.no-answer {
    color: var(--color-warning-text);
}

.phonecall.comm-card .call-parent-row .parent-call-time-status.canceled,
.phonecall.comm-card .call-parent-row .parent-call-time-status.cancelled {
    color: var(--communication-tone-canceled-text);
}

.phonecall.comm-card .call-parent-row .fromwho {
    grid-area: from;
}

.phonecall.comm-card .call-parent-row .towhom {
    grid-area: to;
}

.phonecall.comm-card .call-parent-row .fromwho,
.phonecall.comm-card .call-parent-row .towhom {
    position: relative;
    align-self: stretch;
    min-height: 3.1rem;
    border: 0;
    background: transparent;
    padding: 0.35rem 0 0.35rem 2rem;
}

.phonecall.comm-card .call-parent-row .fromwho::before,
.phonecall.comm-card .call-parent-row .towhom::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.72rem;
    width: 0.78rem;
    height: 0.78rem;
    border: 0.2rem solid #eaf3ff;
    border-radius: 50%;
    background: var(--comm-accent);
    box-shadow: 0 0 0 1px #8ab9f7;
    z-index: 2;
}

.phonecall.comm-card .call-parent-row .fromwho::after {
    content: "";
    position: absolute;
    left: 0.61rem;
    top: 1.35rem;
    bottom: -1.15rem;
    width: 0.12rem;
    border-radius: 999px;
    background: #9ec6fb;
    z-index: 1;
}

.phonecall.comm-card .call-parent-row .comm-party-label {
    margin-bottom: 0.16rem;
}

.phonecall.comm-card .call-parent-row .comm-party-name {
    font-size: 0.96rem;
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row {
    position: relative;
    display: grid;
    grid-template-areas:
        "marker status"
        ". participant";
    grid-template-columns: 0.48rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.32rem 0.55rem;
    border: 0;
    border-top: 1px dashed #d8e5f3;
    background: transparent;
    padding: 0.65rem 1rem;
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row::before {
    content: "";
    position: static;
    grid-area: marker;
    align-self: center;
    justify-self: center;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: #64748b;
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-answered::before,
.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-inprogress::before {
    background: var(--color-call-active);
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-ringing::before {
    background: var(--color-call-ringing);
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-completed::before,
.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-cancelled::before,
.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-canceled::before {
    background: var(--color-text-muted);
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-busy::before,
.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-noanswer::before {
    background: var(--color-warning-text);
}

.phonecall.comm-card .call-main-stack > .phonerow.call-child-row.call-leg-failed::before {
    background: var(--color-danger-text);
}

.phonecall.comm-card .call-child-row .phonecell.call-time-status {
    display: flex;
    grid-area: status;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.18rem;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--call-leg-status-text);
    padding: 0;
    text-align: left;
}

.phonecall.comm-card .call-child-row .phonecell.call-time-status .call-status {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.66rem;
    font-weight: 900;
}

.phonecall.comm-card .call-child-row .call-status-duration {
    display: inline;
    width: auto;
    color: inherit;
    font-size: 0.66rem;
    font-weight: 850;
    text-align: left;
}

.phonecall.comm-card .call-child-row .call-status-duration::before {
    content: "·";
    margin-right: 0.18rem;
}

.phonecall.comm-card .call-child-row .phonecell.participant {
    grid-area: participant;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #536174;
    padding: 0 0 0 0.85rem;
    line-height: 1.35;
}

.phonecall.comm-card .call-child-row .call-leg-message {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.24rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.phonecall.comm-card .call-child-row .call-leg-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
}

.phonecall.comm-card .call-child-row .participant_reference {
    color: #24324a;
    font-weight: 850;
}

.phonecall.comm-card .call-controls-row {
    padding: .35rem .85rem .55rem;
}

.phonecall.comm-card .call-controls-panel {
    justify-content: space-between;
    min-height: 3.1rem;
    border: 0;
    border-bottom: 1px solid #dce6f2;
    border-radius: 0;
    background: transparent;
    padding: 0.45rem 0.2rem 0.65rem;
    box-shadow: none;
}

.phonecall.comm-card .call-controls-label {
    color: #174f9d;
    font-size: 0.72rem;
}

.phonecall.comm-card .call-controls-content,
.phonecall.comm-card .call-controls-content .call-header-join-controls {
    justify-content: flex-end;
}

.phonecall.comm-card .call-controls-panel.is-live {
    display: flex;
    min-height: 0;
    grid-column: 1 / -1;
    border: 1px solid var(--color-border, #dce6f2);
    border-left: 3px solid var(--color-feature-calls);
    border-radius: .6rem;
    background: color-mix(in srgb, var(--color-surface) 70%, var(--color-feature-calls-soft));
    padding: .65rem .75rem;
}

.phonecall.comm-card .call-controls-panel.is-live .call-controls-content,
.phonecall.comm-card .call-controls-panel.is-live .call-header-join-controls {
    width: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

.phonecall.comm-card .call-controls-panel.is-live .ui-action-button {
    min-height: 2.7rem;
    white-space: nowrap;
}

.phonecall.comm-card .call-controls-panel.is-live .call-controls-content { min-width: 0; }
.phonecall.comm-card .call-controls-panel.is-live .call-audience-badge { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
    .phone-answer-call.shake, .communication-primary-action.is-answer-call.shake { animation: none; }
}

.account-active-call-monitor .phonecall.comm-card.active-call .call-side-stack {
    display: flex;
    flex-direction: column;
}

.account-active-call-monitor .phonecall.comm-card {
    width: 100%;
    max-width: none;
}

.account-active-call-monitor .phonecall.comm-card.active-call-summary-card {
    cursor: pointer;
}

.account-active-call-monitor .phonecall.comm-card.active-call-summary-card:focus-visible {
    outline: 0.18rem solid color-mix(in srgb, var(--color-brand) 42%, transparent);
    outline-offset: 0.16rem;
}

.account-active-call-monitor .phonecall.comm-card.active-call-summary-card .call-disconnect-button {
    display: none;
}

.phonecall.comm-card .active-call-summary-transcript {
    display: grid;
    gap: 0.38rem;
    border-top: 1px solid #dce6f2;
    background: color-mix(in srgb, var(--color-surface) 82%, var(--color-feature-calls-soft));
    padding: 0.62rem 0.75rem 0.68rem;
}

.phonecall.comm-card .active-call-summary-transcript-heading {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    color: #27466e;
    font-size: 0.69rem;
}

.phonecall.comm-card .active-call-summary-transcript-heading .gmi {
    color: var(--color-feature-calls);
    font-size: 0.95rem;
}

.phonecall.comm-card .active-call-summary-transcript-heading > span:last-child {
    margin-left: auto;
    color: var(--color-text-muted);
    font-weight: 700;
}

.phonecall.comm-card .active-call-summary-transcript .air-call-activity-line {
    font-size: 0.76rem;
}

.phonecall.comm-card .active-call-summary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.1rem;
    border-top: 1px solid #dce6f2;
    background: color-mix(in srgb, var(--color-brand-soft) 58%, #ffffff);
    color: var(--color-brand-active);
    padding: 0.4rem 0.72rem 0.4rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 850;
}

.phonecall.comm-card .active-call-summary-action .gmi {
    font-size: 1rem;
}

.phonecall.comm-card .active-call-expanded-panel {
    display: block;
    padding: 0;
}

.phonecall.comm-card .active-call-expanded-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    border-bottom: 1px solid #dce6f2;
    color: #27466e;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
}

.phonecall.comm-card .active-call-expanded-heading .gmi {
    color: var(--color-brand-active);
    font-size: 1rem;
}

.account-active-call-monitor .phonecall.comm-card .comm-card-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.55rem;
}

.account-active-call-monitor .phonecall.comm-card .comm-header-identity {
    grid-column: 1 / 2;
    grid-row: 1;
}

.account-active-call-monitor .phonecall.comm-card .comm-account-side {
    grid-column: 2 / 3;
    grid-row: 1;
    min-width: 0;
    max-width: min(11.5rem, 50vw);
}

.account-active-call-monitor .phonecall.comm-card .comm-account-name {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    padding-left: 2.5rem;
    text-align: left;
}

.account-active-call-monitor .phonecall.comm-card .call-account-state-badges .call-state-badge {
    flex-wrap: wrap;
    max-width: 100%;
    text-align: center;
    white-space: normal;
}

/* The compact rail has enough room for names and numbers, while contextual
 * badges keep a predictable reading order instead of competing horizontally. */
.account-active-call-monitor .phonecall.comm-card .parent-call-context-badges {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.account-active-call-monitor .phonecall.comm-card .comm-signal-art {
    right: 3.9rem;
}

.phonecall.comm-card .call-side-tabs-panel {
    padding: 0;
}

.phonecall.comm-card .call-side-tabs {
    flex-wrap: nowrap;
    gap: 0.12rem;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-bottom: 1px solid #dce6f2;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    scrollbar-width: thin;
}

.phonecall.comm-card .call-side-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 2.7rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #4d5d74;
    padding: 0 0.7rem;
    box-shadow: none;
}

.phonecall.comm-card .call-side-tab::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: -1px;
    left: 0.65rem;
    height: 0.18rem;
    border-radius: 0.18rem 0.18rem 0 0;
    background: transparent;
}

.phonecall.comm-card .call-side-tab:hover,
.phonecall.comm-card .call-side-tab.active {
    border: 0;
    background: transparent;
    color: #153e77;
    box-shadow: none;
}

.phonecall.comm-card .call-side-tab.active::after {
    background: var(--comm-accent);
}

.phonecall.comm-card .call-side-tab-panels {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.65rem 0.1rem 0;
}

.phonecall.comm-card .phonecell.analysis .analysis-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 0.22rem 0.18rem;
}

.phonecall.comm-card .phonecell.analysis .inquiry,
.phonecall.comm-card .phonecell.analysis .resolution {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    border-radius: 0.78rem;
    padding: 0.68rem 0.72rem 0.72rem 0.92rem;
    box-shadow: none;
}

.phonecall.comm-card .phonecell.analysis .inquiry::before,
.phonecall.comm-card .phonecell.analysis .resolution::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.24rem;
    background: var(--call-inquiry-accent);
    z-index: -1;
}

.phonecall.comm-card .phonecell.analysis .resolution::before {
    background: var(--call-resolution-accent);
}

.txtmsg.comm-card-message .msgtop.comm-card-top {
    grid-template-columns: minmax(6.4rem, 7.2rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    border-bottom: 0;
    background: color-mix(in srgb, var(--color-feature-texts-soft) 35%, var(--color-surface));
    padding: 0.82rem 1.05rem;
}

.txtmsg.comm-card-message .comm-date-stack {
    padding: 0;
}

.txtmsg.comm-card-message .message-parties .comm-party {
    padding: 0;
}

.txtmsg.comm-card-message .msgbtm.comm-card-body {
    display: grid;
    gap: 0;
    background: color-mix(in srgb, var(--color-feature-texts-soft) 35%, var(--color-surface));
    padding: 0.9rem 1rem 0.72rem;
}

.txtmsg.comm-card-message .msgbody.comm-card-main-text {
    isolation: isolate;
    position: relative;
    width: calc(100% - 0.55rem);
    border-color: var(--color-feature-texts-border);
    border-radius: 1rem 1rem 1rem 0.35rem;
    background: var(--color-surface);
    box-shadow: 0 0.3rem 0.8rem rgba(93, 68, 159, 0.08);
    padding: 0.82rem 0.88rem;
    line-height: 1.52;
}

.txtmsg.comm-card-message.outgoing .msgbody.comm-card-main-text {
    justify-self: end;
    border-radius: 1rem 1rem 0.35rem 1rem;
}

.txtmsg.comm-card-message .msgbody.comm-card-main-text::after {
    content: "";
    position: absolute;
    bottom: 0.62rem;
    width: 0.62rem;
    height: 0.62rem;
    background: var(--color-surface);
    transform: rotate(45deg);
    z-index: -1;
}

.txtmsg.comm-card-message.incoming .msgbody.comm-card-main-text::after {
    left: -0.32rem;
    border-bottom: 1px solid var(--color-feature-texts-border);
    border-left: 1px solid var(--color-feature-texts-border);
}

.txtmsg.comm-card-message.outgoing .msgbody.comm-card-main-text::after {
    right: -0.32rem;
    border-top: 1px solid var(--color-feature-texts-border);
    border-right: 1px solid var(--color-feature-texts-border);
}

.txtmsg.comm-card-message .msgfiles.comm-card-attachments {
    width: calc(100% - 0.55rem);
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.7rem;
}

.txtmsg.comm-card-message.outgoing .msgfiles.comm-card-attachments {
    justify-self: end;
}

.txtmsg.comm-card-message .after.comm-card-after {
    justify-self: end;
    width: fit-content;
    border: 0;
    background: transparent;
    padding: 0.42rem 0.35rem 0;
}

.txtmsg.comm-card-message.text-group-start,
.txtmsg.comm-card-message.text-group-continued,
.txtmsg.comm-card-message.text-group-has-next,
.txtmsg.comm-card-message.text-group-end {
    overflow: hidden;
}

@container (max-width: 46rem) {
    .phonecall.has-side-details .phonebtm {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .phonecall.has-side-details .call-main-stack,
    .phonecall.has-side-details .call-side-stack {
        grid-column: 1;
    }

    .phonecall.has-side-details .call-main-stack {
        grid-row: 1;
        border-right: 0;
        border-bottom: 1px solid #dbe6f2;
    }

    .phonecall.has-side-details .call-side-stack {
        grid-row: 2;
        padding: 0.55rem 0.7rem 0.7rem;
    }
}

@media (max-width: 700px) {
    .comm-card-header {
        gap: 0.55rem;
        padding: 0.5rem 0.65rem 0.5rem 0.9rem;
    }

    .phonecall.comm-card .call-main-stack > .phonerow.call-parent-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.68rem 0.55rem;
        padding: 0.82rem 0.75rem 0.75rem 1rem;
    }

    .phonecall.comm-card .call-main-stack > .phonerow.call-child-row {
        grid-template-columns: 0.48rem minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.58rem 0.75rem;
    }

    .txtmsg.comm-card-message {
        width: 100%;
        max-width: 100%;
    }

    .txtmsg.comm-card-message .msgtop.comm-card-top {
        grid-template-columns: minmax(5.3rem, 6rem) minmax(0, 1fr);
        padding: 0.7rem 0.85rem;
    }

    .txtmsg.comm-card-message .msgbtm.comm-card-body {
        padding: 0.78rem 0.8rem 0.65rem;
    }
}

/* Headers must fit narrow dashboard/dock cards even on a wide desktop. */
@container (max-width: 32rem) {
    .comm-card-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 0.55rem;
    }

    .comm-card-header .comm-header-identity {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .comm-card-header .comm-account-side {
        grid-column: 2 / 3;
        grid-row: 1;
        min-width: 0;
        max-width: min(11.5rem, 50cqw);
    }

    .comm-card-header .call-account-state-badges .call-state-badge {
        flex-wrap: nowrap;
        max-width: 100%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
    }

    .comm-card-header .call-account-state-badges .call-state-badge-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .comm-card-header .call-account-state-badges .call-state-badge-duration,
    .comm-card-header .call-account-state-badges .call-state-badge-handled {
        display: none;
    }

    .comm-card-header .comm-header-account {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
        text-align: left;
    }

    .comm-card-header .comm-account-spacer {
        display: block;
    }

    .comm-signal-art {
        right: 3.9rem;
    }
}

@media (max-width: 520px) {
    .phonecall.comm-card .call-parent-row .parent-call-time-status {
        min-width: 0;
        padding-inline: 0;
    }

    .phonecall.comm-card .call-main-stack > .phonerow.call-child-row {
        grid-template-columns: 0.48rem minmax(0, 1fr);
    }

    .phonecall.comm-card .call-controls-panel {
        align-items: flex-start;
    }

    .phonecall.comm-card .call-controls-content {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/* Live communication stream and persistent message rails */
.txtmsg.comm-card-message,
.txtmsg.comm-card-message.outgoing {
    isolation: isolate;
    background: var(--color-surface);
}

.txtmsg.comm-card-message::before,
.txtmsg.comm-card-message.text-group-start::before,
.txtmsg.comm-card-message.text-group-continued::before,
.txtmsg.comm-card-message.text-group-has-next::before,
.txtmsg.comm-card-message.text-group-end::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: var(--communication-direction-rail-width);
    background: var(--comm-accent);
    pointer-events: none;
    z-index: 6;
}

.txtmsg.comm-card-message.incoming::before,
.txtmsg.comm-card-message.text-group-start.incoming::before,
.txtmsg.comm-card-message.text-group-continued.incoming::before,
.txtmsg.comm-card-message.text-group-has-next.incoming::before,
.txtmsg.comm-card-message.text-group-end.incoming::before {
    right: auto;
    left: 0;
}

.txtmsg.comm-card-message.outgoing::before,
.txtmsg.comm-card-message.text-group-start.outgoing::before,
.txtmsg.comm-card-message.text-group-continued.outgoing::before,
.txtmsg.comm-card-message.text-group-has-next.outgoing::before,
.txtmsg.comm-card-message.text-group-end.outgoing::before {
    right: auto;
    left: 0;
}

.call-stream {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
}

:root {
    --communication-workspace-inset: 0.5rem;
    --communication-workspace-height: calc(100% - (2 * var(--communication-workspace-inset)));
}

.call-stream-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.call-stream-group[hidden],
.call-stream-list[hidden],
.call-stream-count[hidden] {
    display: none !important;
}

.call-stream-active {
    border: 1px solid #bde7df;
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(236, 253, 250, 0.92) 0%, rgba(248, 252, 253, 0.82) 100%);
    padding: 0.72rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.account-active-call-monitor {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2rem);
    max-width: 966px;
    min-width: 0;
    min-height: 0;
    max-height: calc(100% - 1rem);
    margin: 1rem auto 0;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
}

.account-active-call-monitor > [data-call-stream-active-list] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.account-active-call-monitor > [data-call-stream-active-list].is-empty {
    display: none;
}

.active-call-monitor-attention {
    display: grid;
    flex: 0 0 auto;
    gap: 0.45rem;
    margin: 0 0.62rem 0.18rem;
    border: 1px solid var(--communication-rail-separator);
    border-radius: 0.78rem;
    background: var(--communication-rail-background);
    color: var(--communication-rail-text);
    box-shadow: 0 0.55rem 1.15rem rgba(15, 23, 42, 0.18);
    padding: 0.58rem 0.62rem;
}

.active-call-monitor-title,
.active-call-monitor-audiences,
.active-call-monitor-audience {
    display: inline-flex;
    align-items: center;
}

.active-call-monitor-title {
    gap: 0.42rem;
    font-size: var(--ui-type-control);
    font-weight: 900;
}

.active-call-monitor-pulse {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--communication-activity-direct);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--communication-activity-direct) 18%, transparent);
}

.active-call-monitor-audiences {
    flex-wrap: wrap;
    gap: 0.34rem;
}

.active-call-monitor-audience {
    gap: 0.22rem;
    min-height: 1.65rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    padding: 0.2rem 0.48rem;
    font-size: var(--ui-type-meta);
    font-weight: 850;
    white-space: nowrap;
}

.active-call-monitor-audience > .gmi {
    font-size: 0.92rem;
}

.active-call-monitor-audience.is-direct {
    color: var(--communication-activity-direct);
}

.active-call-monitor-audience.is-queue {
    color: var(--communication-activity-queue);
}

.active-call-monitor-audience.is-workspace {
    color: var(--communication-activity-recent);
}

.account-active-call-empty {
    min-height: 10rem;
}

.communication-empty-state {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    gap: 0.4rem;
    color: var(--color-text-subtle);
    padding: 1.5rem;
    text-align: center;
}

.communication-empty-state[hidden] {
    display: none !important;
}

.communication-empty-state > .gmi {
    color: var(--color-brand);
    font-size: 2rem;
}

.communication-empty-state > strong {
    color: var(--color-text);
    font-size: 0.82rem;
}

section.contacts.app-section {
    position: relative;
}

section.contacts.app-section > [data-focused-communication-page="contacts"] #contacts {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.account-active-call-empty[hidden] {
    display: none !important;
}

body.account-call-monitor-inline main.content > section.phone {
    margin-top: 0;
    padding-top: 0;
}

.call-stream-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.65rem;
    color: #405169;
    padding: 0 0.28rem;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
}

.call-stream-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.call-stream-live-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--color-call-active);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.14);
}

.call-stream-ringing-icon {
    color: var(--color-call-active);
    font-size: 1rem;
    transform-origin: center;
    animation: call-ringing-icon 2.2s ease-in-out infinite;
}

.call-stream-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border: 1px solid #9bd9cd;
    border-radius: 999px;
    background: #ffffff;
    color: #0f766e;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.call-stream-heading-note {
    color: #7b8798;
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.call-stream-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.call-stream-list > .phonecall,
.call-stream-list > .focused-phone-card-boundary,
section.texts.app-section .focused-message-list > .txtmsg {
    flex: 0 0 auto;
}

.communication-card-enter-active,
.communication-card-leave-active,
.communication-card-move {
    transition: opacity 180ms ease, transform 180ms ease;
}

.communication-card-enter-from,
.communication-card-leave-to {
    opacity: 0;
    transform: translateY(-0.35rem);
}

@media (prefers-reduced-motion: reduce) {
    .communication-card-enter-active,
    .communication-card-leave-active,
    .communication-card-move {
        transition: none;
    }
}

@media (min-width: 998px) {
    section.phone.app-section,
    section.contacts.app-section,
    section.conversation.app-section,
    section.texts.app-section {
        min-height: 0;
        height: var(--communication-workspace-height);
        margin-top: var(--communication-workspace-inset);
        margin-bottom: var(--communication-workspace-inset);
        overflow: hidden;
    }

    section.phone.app-section > [data-focused-communication-page="phone"] .call-stream,
    section.phone.app-section .call-stream-history {
        flex: 1 1 auto;
        min-height: 0;
    }

    section.phone.app-section .call-stream-history {
        overflow: hidden;
    }

    section.phone.app-section [data-call-stream-history-list],
    section.contacts.app-section,
    section.conversation.app-section,
    section.texts.app-section,
    .account-active-call-monitor [data-call-stream-active-list] {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    section.phone.app-section [data-call-stream-history-list] {
        flex: 1 1 auto;
        min-height: 0;
        padding-right: 0.22rem;
    }

    main.content > section.phone.app-section {
        padding-bottom: 0;
    }

    section.contacts.app-section {
        display: block;
    }

    section.conversation.app-section {
        display: flex;
    }

    body:not(.overview-workspace-view) section.conversation.app-section {
        height: var(--communication-workspace-height);
    }

    section.contacts.app-section > [data-focused-communication-page="contacts"] #contacts > .communication-empty-state {
        position: absolute;
        inset: 1rem;
        min-height: 0;
    }

    section.contacts.app-section > [data-focused-communication-page="contacts"] #contacts {
        min-height: 100%;
    }

    body.account-call-monitor-inline .account-active-call-monitor {
        max-height: min(42dvh, 30rem);
        overflow: hidden;
    }

    .account-active-call-monitor [data-call-stream-active-list] {
        flex: 1 1 auto;
        min-height: 0;
        padding-right: 0.22rem;
    }

    .account-active-call-monitor [data-account-active-call-empty] {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-stream-ringing-icon {
        animation: none;
    }
}

.active-call-nav-indicator {
    position: absolute;
    top: 0.36rem;
    left: 0.62rem;
    display: inline-grid;
    place-items: center;
    min-width: 2.65rem;
    min-height: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    background: var(--communication-rail-background);
    color: var(--communication-rail-text);
    padding: 0 0.36rem;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--communication-rail-accent) 16%, transparent);
    font-size: var(--ui-type-meta);
    font-weight: 950;
    line-height: 1;
}

.active-call-nav-indicator[data-attention-tone="direct"] {
    color: var(--communication-activity-direct);
}

.active-call-nav-indicator[data-attention-tone="queue"] {
    color: var(--communication-activity-queue);
}

.active-call-nav-indicator[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .call-stream {
        gap: 0.9rem;
    }

    .call-stream-active {
        border-radius: 1rem;
        padding: 0.52rem;
    }

    .call-stream-list {
        gap: 0.72rem;
    }

    .account-active-call-monitor {
        width: calc(100% - 1rem);
    }

}

.phonecall.comm-card:not(.active-call):hover {
    transform: none;
}

.phonecall.comm-card.active-call:hover {
    transform: none;
}

@media (min-width: 1900px) {
    html body.account-call-workspace-wide:not(.overview-workspace-view) main.content > .account-active-call-monitor {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    body.account-call-workspace-wide .call-stream-active {
        border: 0;
        background: transparent;
        padding: 0.12rem 0.55rem 0.72rem;
        box-shadow: none;
    }

    body.account-call-workspace-wide .account-active-call-monitor [data-call-stream-active-list] {
        padding: 0.38rem 0.62rem 0.8rem;
    }

    body.account-call-workspace-wide .call-stream-heading {
        padding-inline: 0.62rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.account-call-workspace-wide main.content,
    body.account-call-workspace-wide main.content > .account-active-call-monitor {
        transition: none;
    }
}

/*
 * Dedicated communication views keep their 966px reading column while the
 * scroll owner spans the viewport. This puts the desktop scrollbar at the
 * screen edge and leaves a complete shadow gutter around every card.
 */
@media (min-width: 998px) {
    body.account-call-workspace-wide:not(.overview-workspace-view) main.content {
        display: grid;
        grid-template-columns: 0 minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        justify-content: stretch;
        padding-inline: 0;
    }

    body.account-call-workspace-wide.has-account-active-calls:not(.overview-workspace-view) main.content {
        grid-template-columns: var(--app-active-rail-width) minmax(0, 1fr);
    }

    body:not(.overview-workspace-view) main.content > section.phone.app-section,
    body:not(.overview-workspace-view) main.content > section.contacts.app-section,
    body:not(.overview-workspace-view) main.content > section.conversation.app-section,
    body:not(.overview-workspace-view) main.content > section.texts.app-section {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) main.content > .activity-header-row {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) main.content > .account-active-call-monitor {
        grid-row: 2;
    }

    body:not(.overview-workspace-view) main.content > section.phone.app-section {
        padding-right: 0;
        padding-left: 0;
    }

    body:not(.overview-workspace-view) section.phone.app-section [data-call-stream-history-list] {
        padding-right: max(1rem, calc((100% - var(--app-content-width)) / 2 + 1rem));
        padding-bottom: 1rem;
        padding-left: max(1rem, calc((100% - var(--app-content-width)) / 2 + 1rem));
    }

    body:not(.overview-workspace-view) main.content > section.contacts.app-section,
    body:not(.overview-workspace-view) main.content > section.conversation.app-section,
    body:not(.overview-workspace-view) main.content > section.texts.app-section {
        padding-right: max(1rem, calc((100% - var(--app-content-width)) / 2 + 1rem));
        padding-left: max(1rem, calc((100% - var(--app-content-width)) / 2 + 1rem));
    }
}

/* Keep the focused reading column centered. Active calls occupy only the
 * available left gutter and never become a column that shifts the focus. */
@media (min-width: 1900px) {
    body.account-call-workspace-wide:not(.overview-workspace-view) main.content,
    body.account-call-workspace-wide.has-account-active-calls:not(.overview-workspace-view) main.content {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-content-width)) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        padding-inline: 0;
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) main.content > section.app-section {
        grid-column: 1 / 4;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) main.content > .account-active-call-monitor {
        position: sticky;
        z-index: 12;
        top: 1rem;
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        align-self: start;
        width: var(--app-active-rail-width);
        max-width: var(--app-active-rail-width);
        min-width: var(--app-active-rail-width);
        height: var(--communication-workspace-height);
        max-height: var(--communication-workspace-height);
        margin: var(--communication-workspace-inset) 0.5rem var(--communication-workspace-inset) 0;
        overflow: hidden;
        opacity: 1;
        transform: translateX(0);
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) main.content > .activity-header-row {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    body.account-call-workspace-wide.has-account-active-calls:not(.overview-workspace-view) main.content > .account-active-call-monitor {
        opacity: 1;
        transform: translateX(0);
    }

    body.account-call-workspace-wide:not(.overview-workspace-view) .account-active-call-monitor [data-call-stream-active-list] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.active-call-detail-drawer {
    position: fixed;
    z-index: var(--z-primary-drawer, 1240);
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(62rem, calc(100vw - 1rem));
    border-left: 1px solid var(--surface-panel-border);
    border-radius: var(--ui-drawer-edge-radius) 0 0 var(--ui-drawer-edge-radius);
    background: var(--surface-panel-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    animation: active-call-detail-in 180ms ease-out;
}

.active-call-detail-drawer[hidden] {
    display: none;
}

.active-call-detail-body {
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0.85rem;
}

.active-call-detail-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    gap: var(--app-related-content-gap, 0.65rem);
}

.call-detail-card-host > .phonecall {
    display: grid;
    grid-template-rows: max-content auto;
    align-content: start;
    align-self: flex-start;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: auto;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.call-detail-card-host > .phonecall > .phonebtm,
.call-detail-card-host > .phonecall > .phonebtm > .call-main-stack,
.call-detail-card-host > .phonecall > .phonebtm > .call-side-stack,
.call-detail-card-host .call-side-tabs-row,
.call-detail-card-host .call-side-tabs-panel,
.call-detail-card-host .call-side-tab-panels {
    min-height: 0;
}

@media (min-width: 998px) {
    .call-detail-card-host > .phonecall > .phonebtm {
        height: auto;
        overflow: visible;
    }

    .call-detail-card-host > .phonecall > .phonebtm > .call-main-stack {
        overflow: visible;
    }

    .call-detail-card-host > .phonecall > .phonebtm > .call-side-stack,
    .call-detail-card-host .call-side-tabs-panel {
        height: auto;
    }

    .call-detail-card-host .call-side-tabs-row {
        flex: 0 0 auto;
        height: auto;
    }

    .call-detail-card-host .call-side-tabs-panel {
        grid-template-rows: auto auto;
    }

    .call-detail-card-host .call-side-tab-panels {
        height: auto;
        overflow: auto;
    }

    .call-detail-card-host .call-side-tab-panel {
        height: auto;
        overflow: visible;
    }
}

.active-call-detail-body .call-side-section,
.active-call-detail-body .air-call-activity-row-wrapper,
.active-call-detail-body .air-call-activity {
    width: 100%;
    max-width: 100%;
}

.active-call-detail-body > .active-call-detail-content {
    width: 100%;
    max-width: none;
    margin: 0;
}

@keyframes active-call-detail-in {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 620px) {
    .active-call-detail-drawer {
        width: 100vw;
    }
}

@media (max-width: 997px) {
    .active-call-detail-content {
        height: 100%;
    }

    .call-detail-card-host > .phonecall {
        display: block;
        height: auto;
        max-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .active-call-detail-drawer {
        animation: none;
    }
}

/* Shared communication badge authority. Renderers select a semantic tone; this is the sole color map. */
:root {
    --communication-direction-incoming: #3f8fc8;
    --communication-direction-incoming-border: #9fc8ed;
    --communication-direction-incoming-bg: #edf7ff;
    --communication-direction-incoming-text: #236796;
    --communication-direction-outgoing: #2b9b88;
    --communication-direction-outgoing-border: #9ddbcf;
    --communication-direction-outgoing-bg: #ecfaf7;
    --communication-direction-outgoing-text: #15766b;

    /* Semantic call-result palette. Badges, charts, legends, and future call
     * analytics consume these tokens instead of maintaining local colors. */
    --communication-tone-connected: #3784c2;
    --communication-tone-connected-border: #9fc8ed;
    --communication-tone-connected-bg: #edf7ff;
    --communication-tone-connected-text: #236796;
    --communication-tone-abandoned: #d79528;
    --communication-tone-abandoned-border: #f1c46e;
    --communication-tone-abandoned-bg: #fff7df;
    --communication-tone-abandoned-text: #915c08;
    --communication-tone-voicemail: var(--communication-voicemail-color);
    --communication-tone-voicemail-border: color-mix(in srgb, var(--communication-voicemail-color) 25%, var(--color-surface));
    --communication-tone-voicemail-bg: var(--communication-voicemail-soft);
    --communication-tone-voicemail-text: color-mix(in srgb, var(--communication-voicemail-color) 85%, var(--color-text));
    --communication-tone-pos-border: #cbb8ed;
    --communication-tone-pos-bg: #f5f0ff;
    --communication-tone-pos-text: #6842a0;
    --communication-tone-missed: #dc5a63;
    --communication-tone-missed-border: #f0a6aa;
    --communication-tone-missed-bg: #fff0f1;
    --communication-tone-missed-text: #ad3541;
    --communication-tone-completed: #15985f;
    --communication-tone-completed-border: #84d8af;
    --communication-tone-completed-bg: #edfbf4;
    --communication-tone-completed-text: #21764e;
    --communication-tone-canceled: #c86424;
    --communication-tone-canceled-border: #e6b28e;
    --communication-tone-canceled-bg: #fff3eb;
    --communication-tone-canceled-text: #c86424;
}

.communication-tone-connected {
    --communication-badge-border: var(--communication-tone-connected-border);
    --communication-badge-bg: var(--communication-tone-connected-bg);
    --communication-badge-text: var(--communication-tone-connected-text);
}

.communication-tone-abandoned {
    --communication-badge-border: var(--communication-tone-abandoned-border);
    --communication-badge-bg: var(--communication-tone-abandoned-bg);
    --communication-badge-text: var(--communication-tone-abandoned-text);
}

.communication-tone-voicemail {
    --communication-badge-border: var(--communication-tone-voicemail-border);
    --communication-badge-bg: var(--communication-tone-voicemail-bg);
    --communication-badge-text: var(--communication-tone-voicemail-text);
}

.communication-tone-pos {
    --communication-badge-border: var(--communication-tone-pos-border);
    --communication-badge-bg: var(--communication-tone-pos-bg);
    --communication-badge-text: var(--communication-tone-pos-text);
}

.communication-tone-missed,
.communication-tone-failed {
    --communication-badge-border: var(--communication-tone-missed-border);
    --communication-badge-bg: var(--communication-tone-missed-bg);
    --communication-badge-text: var(--communication-tone-missed-text);
}

.communication-tone-completed {
    --communication-badge-border: var(--communication-tone-completed-border);
    --communication-badge-bg: var(--communication-tone-completed-bg);
    --communication-badge-text: var(--communication-tone-completed-text);
}

.communication-tone-canceled,
.communication-tone-cancelled {
    --communication-badge-border: var(--communication-tone-canceled-border);
    --communication-badge-bg: var(--communication-tone-canceled-bg);
    --communication-badge-text: var(--communication-tone-canceled-text);
}

.communication-tone-outreach,
.communication-tone-sent {
    --communication-badge-border: #b8b9ed;
    --communication-badge-bg: #f1f1ff;
    --communication-badge-text: #4f50a5;
}

.communication-tone-incoming,
.communication-tone-received {
    --communication-badge-border: var(--communication-direction-incoming-border);
    --communication-badge-bg: var(--communication-direction-incoming-bg);
    --communication-badge-text: var(--communication-direction-incoming-text);
}

.communication-tone-outgoing,
.communication-tone-delivered {
    --communication-badge-border: var(--communication-direction-outgoing-border);
    --communication-badge-bg: var(--communication-direction-outgoing-bg);
    --communication-badge-text: var(--communication-direction-outgoing-text);
}

.communication-tone-sending,
.communication-tone-analysis {
    --communication-badge-border: #d7cda3;
    --communication-badge-bg: #fbf8e9;
    --communication-badge-text: #70632f;
}

.communication-tone-ai {
    --communication-badge-border: #9fc9e8;
    --communication-badge-bg: #edf8ff;
    --communication-badge-text: #17638d;
}

.communication-tone-menu {
    --communication-badge-border: #d4c39a;
    --communication-badge-bg: #fbf7e9;
    --communication-badge-text: #725f2a;
}

.communication-tone-active {
    --communication-badge-border: var(--color-call-active-border);
    --communication-badge-bg: var(--color-call-active-soft);
    --communication-badge-text: var(--color-call-active);
}

.communication-tone-ringing {
    --communication-badge-border: var(--color-call-ringing-border);
    --communication-badge-bg: var(--color-call-ringing-soft);
    --communication-badge-text: var(--color-call-ringing);
}

.communication-tone-queue {
    --communication-badge-border: #b8c8dc;
    --communication-badge-bg: #f1f6fb;
    --communication-badge-text: #405f80;
}

.communication-tone-direct {
    --communication-badge-border: var(--color-call-ringing-border);
    --communication-badge-bg: var(--color-call-ringing-soft);
    --communication-badge-text: var(--color-call-ringing);
}

.communication-tone-workspace {
    --communication-badge-border: var(--color-border-muted);
    --communication-badge-bg: var(--color-surface-muted);
    --communication-badge-text: var(--color-text-muted);
}

.communication-semantic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    min-width: 0;
    min-height: 1.45rem;
    border: 1px solid var(--communication-badge-border, var(--color-border-muted));
    border-radius: 999px;
    background: var(--communication-badge-bg, var(--color-neutral-soft));
    color: var(--communication-badge-text, var(--color-neutral-text));
    padding: 0.2rem 0.48rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

.communication-semantic-badge > .gmi {
    flex: 0 0 auto;
    font-size: 0.86rem;
    line-height: 1;
}

.comm-card-header .comm-direction-badge.communication-tone-incoming,
.comm-card-header .comm-direction-badge.communication-tone-outgoing,
.comm-card-header .comm-direction-badge.communication-tone-voicemail,
.call-state-badge.communication-tone-connected,
.call-state-badge.communication-tone-abandoned,
.call-state-badge.communication-tone-voicemail,
.call-state-badge.communication-tone-missed,
.call-state-badge.communication-tone-completed,
.call-state-badge.communication-tone-outreach {
    border-color: var(--communication-badge-border);
    background: var(--communication-badge-bg);
    color: var(--communication-badge-text);
}

.txtmsg.comm-card-message .text-message-status {
    min-width: 0;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.text-message-status .text-message-state-badge {
    min-width: 4.9rem;
    text-transform: uppercase;
}

.phonecall.comm-card.incoming::before,
.txtmsg.comm-card-message.incoming::before {
    background: var(--communication-direction-incoming);
}

.phonecall.comm-card.outgoing::before,
.txtmsg.comm-card-message.outgoing::before {
    background: var(--communication-direction-outgoing);
}

.phonecall.comm-card .call-main-stack > .phonerow.call-parent-row {
    grid-template-areas:
        "date context"
        "status status"
        "from from"
        "to to";
    row-gap: 0.55rem;
}

.phonecall.comm-card .call-parent-row .parent-call-context-badges {
    grid-area: context;
    align-self: start;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.28rem;
    min-width: 0;
}

.phonecall.comm-card .parent-call-route-selection {
    flex: 0 0 auto;
    padding: 0;
}

.phonecall.comm-card .call-parent-row .towhom:has(.parent-call-route-selection) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem 1.25rem;
}

.phonecall.comm-card .towhom:has(.parent-call-route-selection) > .call-party-main {
    flex: 0 1 auto;
    width: max-content;
    min-width: min(100%, 10rem);
    max-width: 100%;
}

.phonecall.comm-card .call-parent-row .parent-call-context-badges:empty {
    display: none;
}

.phonecall.comm-card .call-parent-row .parent-call-context-badges .ai-agent-badge {
    min-height: 1.35rem;
    margin: 0;
    padding: 0.18rem 0.42rem;
    font-size: 0.64rem;
}

.phonecall.comm-card .call-parent-row > .parent-call-time-status {
    grid-area: status;
    justify-self: start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    text-align: left;
}

@media (min-width: 1500px) {
    body.account-call-workspace-wide main.content > .account-active-call-monitor {
        align-self: start;
        height: var(--communication-workspace-height);
        max-height: var(--communication-workspace-height);
    }
}

/* Add a scrollable end inset, without reducing the workspace behind the dock. */
body:not(.overview-workspace-view) section.phone.app-section [data-call-stream-history-list],
body:not(.overview-workspace-view) section.phone.app-section [data-call-stream-active-tab-list],
body:not(.overview-workspace-view) .account-active-call-monitor [data-call-stream-active-list] {
    padding-bottom: calc(var(--communication-dock-overlay-height, 0px) + 1rem);
    scroll-padding-bottom: calc(var(--communication-dock-overlay-height, 0px) + 1rem);
}
.focused-contact-list::after, .focused-message-list::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: calc(var(--communication-dock-overlay-height, 0px) + 1rem);
}

.txtmsg.comm-card-message .msgdate .ui-timestamp { font-size: var(--ui-type-meta); font-weight: 850; color: var(--color-text-muted); }
.comm-card-header .comm-direction-badge { text-transform: none; }
.txtmsg.comm-card-message .msgfiles.comm-card-attachments { justify-content: center; }

/* Shared focused cards use the same solid surfaces as workspace summaries. */
.phonecall.comm-card, .phonecall.comm-card.outgoing,
.txtmsg.comm-card-message, .txtmsg.comm-card-message.outgoing {
    background: var(--color-surface);
    border-color: var(--color-border);
    /* Direction is already drawn by ::before; keep the card border neutral. */
    border-left: 1px solid var(--color-border);
}
.comm-card::after, .contact::after { display: none; }
.comm-card:hover, .comm-card:focus-within, .contact:hover, .contact:focus-within {
    transform: none;
    border-color: var(--color-border-strong, var(--color-brand-border));
}

.comm-card-header .call-state-badge { text-transform: none; }



/* Integration exchange presentation now lives in the shared Vue components. */



.settings-deployment {
    display: grid;
    gap: var(--settings-ui-space-4, 1rem);
    width: 100%;
    min-width: 0;
}

.settings-deployment-header-actions {
    display: flex;
    align-items: center;
    gap: var(--settings-ui-space-3, 0.75rem);
    min-width: 0;
}

.settings-deployment-checklist h3,
.settings-deployment-services h3,
.settings-deployment-procedures h3,
.settings-deployment-finalize h3,
.settings-deployment-environment-controls h3 {
    margin: 3px 0 6px;
}

.settings-deployment-checklist p,
.settings-deployment-services p,
.settings-deployment-procedures p,
.settings-deployment-finalize p,
.settings-deployment-environment-controls p {
    margin: 0;
    color: var(--settings-muted);
}

.settings-deployment-identity {
    display: grid;
    min-width: 220px;
    padding: 12px 15px;
    border-radius: 14px;
    background: var(--settings-surface-soft);
}

.settings-deployment-identity span,
.settings-deployment-identity small {
    color: var(--settings-muted);
}

.settings-deployment-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 12px;
}

.settings-deployment-status-grid article {
    display: flex;
    gap: 12px;
    min-height: 116px;
    padding: 16px;
    border: 1px solid var(--settings-border);
    border-radius: 16px;
    background: var(--settings-surface);
}

.settings-deployment-status-grid article > span {
    color: var(--settings-primary);
}

.settings-deployment-status-grid article div {
    display: grid;
    align-content: start;
}

.settings-deployment-status-grid small {
    color: var(--settings-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.settings-deployment-status-grid p {
    margin: 5px 0 0;
    color: var(--settings-muted);
    overflow-wrap: anywhere;
}

.settings-deployment-checklist,
.settings-deployment-services,
.settings-deployment-procedures,
.settings-deployment-finalize,
.settings-deployment-environment-controls {
    padding: 18px;
    border: 1px solid var(--settings-border);
    border-radius: 18px;
    background: var(--settings-surface);
}

.settings-deployment-environment-controls {
    display: grid;
    gap: 14px;
}

.settings-deployment-environment-heading,
.settings-deployment-environment-actions,
.settings-deployment-environment-actions > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-deployment-environment-heading,
.settings-deployment-environment-actions {
    justify-content: space-between;
}

.settings-deployment-environment-heading > div {
    min-width: 0;
}

.settings-deployment-environment-heading .settings-ui-badge {
    flex: 0 0 auto;
}

.settings-deployment-environment-actions,
.settings-deployment-environment-actions > div {
    flex-wrap: wrap;
}

.settings-deployment-actions {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.settings-deployment-actions article {
    display: grid;
    grid-template-columns: 28px 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px;
    border-radius: 13px;
    background: var(--settings-surface-soft);
}

.settings-deployment-actions p {
    font-size: .86rem;
}

.settings-deployment-step {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--settings-primary);
    color: #fff;
    font-weight: 700;
}

.settings-deployment-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.settings-deployment-service-grid label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    padding: 11px;
    border-radius: 12px;
    background: var(--settings-surface-soft);
}

.settings-deployment-service-grid small {
    grid-column: 2;
    color: var(--settings-muted);
}

.settings-deployment-service-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.settings-deployment-procedure-grid {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.settings-deployment-migration-sequence {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--settings-border);
    border-radius: 12px;
}

.settings-deployment-migration-sequence .settings-deployment-procedure-grid {
    margin-top: 0;
    padding: 8px;
}

.settings-deployment-procedure-grid article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px;
    border-radius: 12px;
    background: var(--settings-surface-soft);
}

.settings-deployment-procedure-grid article > div {
    display: grid;
    gap: 4px;
}

.settings-deployment-procedure-grid article > div:last-child {
    display: flex;
    gap: 8px;
}

.settings-deployment-procedure-grid small {
    color: var(--settings-muted);
    overflow-wrap: anywhere;
}

.settings-deployment-procedure-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 12px;
    border-top: 1px solid var(--settings-border);
    background: var(--settings-surface-soft);
}

.settings-deployment-procedure-actions > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.settings-deployment-procedure-actions small {
    color: var(--settings-muted);
}

.settings-deployment-procedure-actions pre {
    max-width: min(100%, 680px);
    margin: 0;
    overflow: auto;
}

.settings-deployment-evidence-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.settings-deployment-evidence-summary > span {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--settings-border);
    border-radius: 10px;
    background: var(--settings-surface-soft);
}

.settings-deployment-evidence-summary small {
    color: var(--settings-muted);
}

.settings-deployment-after-activation,
.settings-deployment-procedures > .settings-ui-disclosure {
    margin-top: 18px;
}

.settings-deployment-after-activation h4,
.settings-deployment-after-activation p {
    margin: 0;
}

.settings-deployment-after-activation p {
    margin-top: 4px;
    color: var(--settings-muted);
}

.settings-deployment-migration-history > .settings-field-note {
    margin: 10px 12px 6px;
}

.settings-deployment-migration-history-table th,
.settings-deployment-migration-history-table td {
    padding: 5px 8px;
    line-height: 1.2;
    vertical-align: middle;
}

.settings-deployment-migration-history-table code {
    overflow-wrap: anywhere;
}

.settings-deployment-impact-review {
    display: grid;
    gap: 14px;
}

.settings-deployment-impact-review dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.settings-deployment-impact-review dl > div {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--settings-border);
    border-radius: 8px;
}

.settings-deployment-impact-review dt {
    color: var(--settings-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-deployment-impact-review dd,
.settings-deployment-impact-review h4,
.settings-deployment-impact-review ul,
.settings-deployment-impact-review .settings-field-note {
    margin: 0;
}

.settings-deployment-impact-review section {
    display: grid;
    gap: 7px;
}

.settings-deployment-finalize {
    display: grid;
    gap: 10px;
}

.settings-deployment-final-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

@media (max-width: 1100px) {
    .settings-deployment-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-deployment-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .settings-deployment-header-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .settings-deployment-identity {
        order: 3;
        width: 100%;
    }

    .settings-deployment-status-grid,
    .settings-deployment-service-grid {
        grid-template-columns: 1fr;
    }

    .settings-deployment-actions article {
        grid-template-columns: 28px 28px minmax(0, 1fr);
    }

    .settings-deployment-actions article button {
        grid-column: 3;
        justify-self: start;
    }

    .settings-deployment-procedure-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-deployment-procedure-grid article {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-deployment-impact-review dl {
        grid-template-columns: 1fr;
    }

    .settings-deployment-evidence-summary {
        grid-template-columns: 1fr;
    }

    .settings-deployment-environment-heading,
    .settings-deployment-environment-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-deployment-service-actions,
    .settings-deployment-final-actions {
        justify-content: stretch;
    }

    .settings-deployment-service-actions button,
    .settings-deployment-final-actions button {
        flex: 1;
    }
}





.settings-section-tabs {
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin-top: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.settings-section-tabs[hidden] {
    display: none;
}

.settings-service-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.settings-service-status-card {
    display: flex;
    flex-direction: column;
}

.settings-service-status-card .settings-ui-panel-footer {
    margin-top: auto;
}

.settings-service-provider-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.settings-service-provider-link {
    text-decoration: none;
}

@media (max-width: 760px) {

    .settings-service-status-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-reference-grid,
.settings-routing-flow-list {
    display: grid;
    gap: 1rem;
}

.settings-reference-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.settings-worker-policy-reference-table {
    min-width: 62rem;
}

.settings-worker-policy-reference-table th:first-child,
.settings-worker-policy-reference-table td:first-child {
    width: 15rem;
    min-width: 15rem;
}

.settings-worker-policy-reference-table td {
    vertical-align: top;
}

.settings-worker-policy-reference-table .settings-field-help {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-worker-policy-trigger {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-worker-policy-provider-list {
    display: grid;
    gap: 0.3rem;
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
}

.settings-worker-policy-provider-list li {
    display: block;
}

.settings-worker-policy-provider-list li strong {
    color: var(--color-text);
}

.settings-worker-policy-provider-list li strong::after {
    content: " —";
}

.settings-worker-policy-provider-list li span {
    display: inline;
    color: var(--color-text-muted);
}

.settings-worker-policy-summary-row > td:not([rowspan]) {
    border-bottom: 0;
    padding-bottom: 0.35rem;
}

.settings-worker-policy-detail-row > td {
    padding-top: 0.2rem;
}

.settings-worker-policy-detail {
    display: grid;
    gap: 0.55rem;
    padding-left: 0.75rem;
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-worker-policy-detail-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.3rem;
}

.settings-worker-policy-detail-copy {
    flex: 1 1 28rem;
    min-width: 12rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

@media (max-width: 700px) {
    .settings-worker-policy-reference-table {
        min-width: 0;
    }

    .settings-worker-policy-summary-row {
        border-bottom: 0;
        border-radius: var(--settings-ui-radius-md) var(--settings-ui-radius-md) 0 0;
        box-shadow: none;
    }

    .settings-worker-policy-detail-row {
        margin-top: -0.65rem;
        border-top: 0;
        border-radius: 0 0 var(--settings-ui-radius-md) var(--settings-ui-radius-md);
    }

    .settings-worker-policy-detail-row > td::before {
        display: none !important;
    }

    .settings-worker-policy-detail {
        padding-left: 0;
    }
}

.settings-permission-matrix-wrap {
    max-height: min(68vh, 54rem);
}

.settings-permission-matrix {
    width: max-content;
    min-width: 100%;
}

.settings-permission-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
    text-align: center;
}

.settings-permission-matrix thead th:first-child {
    text-align: left;
}

.settings-permission-name-column {
    width: 22rem;
    min-width: 22rem;
}

.settings-permission-name-column code,
.settings-permission-name-column small {
    display: block;
}

.settings-permission-name-column small {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    white-space: normal;
}

.settings-permission-group th {
    background: var(--color-surface-muted);
    color: var(--color-text);
    text-align: left;
}

.settings-permission-scope-column,
.settings-permission-role-column,
.settings-permission-scope-value,
.settings-permission-value {
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
    text-align: center;
    white-space: normal;
}

.settings-permission-scope-value.is-enabled .gmi,
.settings-permission-value.is-enabled .gmi {
    color: var(--color-feature-settings);
}

.settings-permission-scope-value.is-disabled .gmi,
.settings-permission-value.is-disabled .gmi {
    color: var(--color-text-muted);
}

.settings-permission-scope-value .gmi,
.settings-permission-value .gmi {
    font-size: 1rem;
}

.settings-provider-control-table td:nth-child(3) {
    min-width: 18rem;
    white-space: normal;
}

.settings-testing-domain-filter,
.settings-routing-filter-fields label {
    display: grid;
    gap: 0.35rem;
    min-width: min(18rem, 100%);
}

.settings-routing-filter-fields {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.settings-routing-print-heading {
    display: none;
}

.settings-ui-relationship-map {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) auto minmax(20rem, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
}

.settings-ui-relationship-node {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface);
}

.settings-ui-relationship-node.is-source,
.settings-ui-relationship-node.is-information {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
}

.settings-ui-relationship-node.has-warning,
.settings-ui-relationship-node.is-warning {
    border-color: var(--color-warning-border);
}

.settings-ui-relationship-node-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
}

.settings-ui-relationship-node-main > .gmi {
    color: var(--color-feature-settings);
    font-size: 1.45rem;
}

.settings-ui-relationship-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.settings-ui-relationship-copy small,
.settings-ui-relationship-copy span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-relationship-node > code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-relationship-items {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.settings-ui-relationship-connector {
    display: grid;
    justify-items: center;
    color: var(--color-feature-settings);
    font-size: 1.35rem;
}

.settings-ui-relationship-badge {
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    white-space: nowrap;
}

.settings-ui-relationship-warning {
    color: var(--color-warning-text);
}

.settings-ui-relationship-details {
    border-top: 1px solid var(--color-border-muted);
    padding-top: 0.45rem;
}

.settings-ui-relationship-details > summary {
    color: var(--color-feature-settings);
    cursor: pointer;
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-relationship-details > div {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.55rem;
}

.settings-ui-relationship-evidence {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.settings-ui-relationship-evidence pre {
    max-height: 22rem;
    margin: 0;
    padding: 0.65rem;
    overflow: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-background);
    font: inherit;
    font-size: var(--settings-ui-type-helper);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-routing-flow > .settings-ui-panel-body {
    padding: 0.75rem;
}

.settings-routing-runtime-map .settings-air-runtime-map {
    background: var(--color-surface);
}

.settings-routing-visualizer-body {
    display: grid;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    min-width: 0;
}

[data-routing-visualizer-page],
[data-routing-visualizer-page] > .settings-routing-page,
.settings-routing-page > .ui-page-shell-frame,
.settings-routing-page > .ui-page-shell-frame > .ui-page-shell-layout,
.settings-routing-page .ui-page-shell-body {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.settings-routing-page .ui-page-shell-body {
    display: grid;
    gap: 0.75rem;
    /* The printable heading is display:none on screen and therefore is not a
     * grid item. Keep the graph in the flexible row explicitly instead of
     * accidentally leaving that row empty and collapsing the canvas. */
    grid-template-rows: auto minmax(0, 1fr);
}

.settings-routing-page .ui-page-shell-body > .settings-routing-command-bar {
    grid-row: 1;
}

.settings-routing-page .ui-page-shell-body > .settings-routing-visualizer-body {
    grid-row: 2;
}

body.settings-view #settings_content:has(> .settings-routing-explorer) {
    overflow: hidden;
}

body.settings-view #settings_content > .settings-routing-explorer {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

body.settings-view #settings_content > .settings-routing-explorer:has(> [data-routing-visualizer-page]) {
    grid-template-rows: minmax(0, 1fr);
}

.settings-routing-visualizer-body > [data-call-routing-visualizer],
.settings-routing-visualizer-body > [data-call-routing-visualizer] > .pcv-root {
    height: 100%;
    min-height: 0;
}

.settings-routing-visualizer-body > [data-call-routing-visualizer] {
    grid-row: 2;
}

.settings-routing-visualizer-body > .ui-async-state {
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 100%;
}

.settings-routing-visualizer-body > [data-call-routing-visualizer] > .pcv-root {
    --pcv-canvas-height: 100%;
}

body.has-routing-visualizer-overlay {
    overflow: hidden;
}

[data-call-routing-visualizer].is-routing-visualizer-overlay {
    position: fixed !important;
    left: var(--pcv-overlay-left);
    top: var(--pcv-overlay-top);
    z-index: 5000;
    width: var(--pcv-overlay-width) !important;
    height: var(--pcv-overlay-height) !important;
    min-height: 0;
    padding: 0;
    background: var(--color-surface, #fff);
    isolation: isolate;
}

[data-call-routing-visualizer].is-routing-visualizer-overlay > .pcv-root {
    --pcv-canvas-height: 100%;
    height: 100%;
    min-height: 0;
}

.settings-routing-command-bar {
    display: flex;
    align-items: end;
    gap: 0.75rem 1rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-routing-command-fields {
    display: grid;
    grid-template-columns: minmax(14rem, 1.5fr) repeat(2, minmax(7rem, 0.65fr));
    flex: 1 1 auto;
    gap: 0.65rem;
    min-width: 0;
}

.settings-routing-command-fields:has(> label:nth-child(4)) {
    grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.5fr) repeat(2, minmax(7rem, 0.65fr));
}

.settings-routing-command-fields.has-audience {
    grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.5fr) repeat(3, minmax(7rem, 0.65fr));
}

.settings-routing-command-fields label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.settings-routing-command-fields label > span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
}

.settings-routing-command-fields select {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
}

.settings-routing-command-fields .settings-routing-compact-field {
    max-width: 9rem;
}

.settings-routing-command-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-routing-validation-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: var(--settings-ui-type-helper);
    font-weight: 700;
    white-space: nowrap;
}

.settings-routing-validation-status.is-danger {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.settings-routing-validation-status.is-warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-routing-validation-status.is-information {
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-routing-diagnostics {
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-routing-diagnostics > summary {
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    font-weight: 700;
}

.settings-routing-diagnostics > div {
    display: grid;
    gap: 0.4rem;
    padding: 0 0.8rem 0.8rem;
}

.settings-routing-finding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem;
    border: 1px solid var(--color-warning-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    cursor: pointer;
    text-align: left;
}

.settings-routing-finding.is-error {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}

.settings-routing-finding span:last-child {
    display: grid;
    gap: 0.15rem;
}

.settings-routing-finding small {
    color: inherit;
}

.settings-routing-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.settings-routing-graph-scroll {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-background);
}

.settings-routing-hybrid {
    display: grid;
    gap: 0.35rem;
    padding: 1.25rem;
}

.settings-routing-hybrid-spine {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
}

.settings-routing-hybrid-entry {
    width: fit-content;
    max-width: 100%;
    justify-self: center;
}

.settings-routing-hybrid-entry > .settings-routing-node {
    width: fit-content;
    min-width: min(20rem, 100%);
    max-width: 100%;
}

.settings-routing-hybrid-hub-card {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--color-info-border);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
    justify-self: center;
    margin-inline: auto;
}

.settings-routing-hybrid-hub {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
}

.settings-routing-hybrid-hub > .settings-routing-node {
    grid-template-columns: auto auto auto;
    width: fit-content;
    min-width: 0;
    max-width: min(32rem, 100%);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.settings-routing-hybrid-hub > .settings-routing-node .settings-routing-node-copy {
    max-width: 26rem;
}

.settings-routing-hybrid-hub > .settings-routing-node:hover,
.settings-routing-hybrid-hub > .settings-routing-node.is-selected {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
}

.settings-routing-hub-options {
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-routing-spine-connector {
    display: grid;
    align-self: center;
    justify-items: center;
    gap: 0.15rem;
    color: var(--color-feature-settings);
}

.settings-routing-spine-connector span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-align: center;
}

.settings-routing-spine-connector strong {
    font-size: 1.4rem;
    line-height: 1;
}

.settings-routing-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    align-items: start;
    gap: 0.75rem;
}

.settings-routing-branch {
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.settings-routing-branch-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: -0.15rem 0 0.55rem;
}

.settings-routing-branch-choice span,
.settings-routing-node-copy > em {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
    font-size: var(--settings-ui-type-meta);
    font-style: normal;
    font-weight: 700;
}

.settings-routing-branch-continuation {
    display: grid;
    gap: 0.35rem;
}

.settings-routing-branch-continuation.is-split {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.55rem;
    margin-top: 0.35rem;
    padding: 0.55rem;
    border: 1px dashed var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-background);
}

.settings-routing-branch-continuation.is-menu-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    margin: 0.45rem 0 0 0.45rem;
    padding: 0.35rem 0.35rem 0.35rem 0.9rem;
    border: 0;
    border-left: 3px solid var(--color-info-border);
    border-radius: 0;
    background: transparent;
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg {
    position: relative;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.45rem;
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg::before {
    position: absolute;
    top: 1.15rem;
    left: -0.9rem;
    width: 0.8rem;
    border-top: 2px solid var(--color-info-border);
    content: "";
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg > .settings-routing-vertical-connector {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 0.35rem 0;
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg > .settings-routing-vertical-connector strong {
    transform: rotate(-90deg);
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg > :is(.settings-routing-node, .settings-routing-reference) {
    grid-column: 2;
    grid-row: 1;
    min-height: 3.8rem;
}

.settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg > .settings-routing-branch-continuation {
    grid-column: 2;
}

.settings-routing-branch-leg {
    display: grid;
    align-content: start;
    min-width: 0;
}

.settings-routing-vertical-connector {
    display: grid;
    justify-items: center;
    gap: 0.05rem;
    min-height: 2.2rem;
    padding: 0.2rem 0;
    color: var(--color-feature-settings);
}

.settings-routing-vertical-connector span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-align: center;
}

.settings-routing-vertical-connector strong {
    line-height: 1;
}

.settings-routing-reference {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem;
    border: 1px dashed var(--color-info-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-info-soft);
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

button.settings-routing-reference {
    cursor: pointer;
}

.settings-routing-reference > .gmi {
    color: var(--color-feature-settings);
}

.settings-routing-reference > span:last-child {
    display: grid;
    gap: 0.1rem;
}

.settings-routing-reference small {
    color: var(--color-text-muted);
}

.settings-routing-orphans {
    display: grid;
    gap: 0.65rem;
    margin: 0 1.25rem 1.25rem;
    padding: 0.75rem;
    border: 1px dashed var(--color-warning-border);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-warning-soft);
}

.settings-routing-orphans > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    color: var(--color-warning-text);
}

.settings-routing-orphans > header div {
    display: grid;
    gap: 0.1rem;
}

.settings-routing-orphans > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.55rem;
}

.settings-routing-node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 5rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.settings-routing-node:hover,
.settings-routing-node.is-selected {
    border-color: var(--color-feature-settings);
    box-shadow: 0 0 0 2px var(--color-feature-settings-soft);
}

.settings-routing-node.has-warning {
    border-color: var(--color-warning-border);
}

.settings-routing-node.has-error {
    border-color: var(--color-danger-border);
}

.settings-routing-node-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-routing-node-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.settings-routing-node-copy small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    text-transform: capitalize;
}

.settings-routing-node-copy span {
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-routing-node-members {
    display: grid !important;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-routing-node-members > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: 700;
    text-transform: uppercase;
}

.settings-routing-node-member {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-background);
}

.settings-routing-node-member > span {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.settings-routing-node-member :is(strong, small) {
    overflow-wrap: anywhere;
}

.settings-routing-node-member small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-routing-node-member > em {
    color: var(--color-feature-settings);
    font-size: var(--settings-ui-type-meta);
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.settings-routing-node-finding {
    color: var(--color-warning-text);
}

.settings-routing-node.has-error .settings-routing-node-finding {
    color: var(--color-danger-text);
}

.settings-routing-node-modal {
    display: grid;
    gap: 0.8rem;
}

.settings-routing-node-modal-body {
    min-width: 0;
}

#modal-content:has(> .settings-routing-node-modal-body) {
    width: min(52rem, 100%);
    max-width: 52rem;
}

.settings-routing-node-modal > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

.settings-routing-node-modal > header > .gmi {
    color: var(--color-feature-settings);
    font-size: 1.75rem;
}

.settings-routing-node-modal > header div {
    display: grid;
    gap: 0.15rem;
}

.settings-routing-node-modal p {
    margin: 0;
}

.settings-routing-node-modal header small,
.settings-routing-node-modal header p,
.settings-routing-node-modal footer small {
    color: var(--color-text-muted);
}

.settings-routing-detail-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
}

.settings-routing-detail {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-routing-detail strong {
    font-size: var(--settings-ui-type-helper);
}

.settings-routing-detail-value {
    min-width: 0;
}

.settings-routing-detail-value > span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.settings-routing-detail.is-script .settings-routing-detail-value > span {
    padding: 0.55rem;
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.settings-prompt-audio-preview.settings-routing-audio-preview {
    gap: 0.35rem;
    width: fit-content;
    padding-inline: 0.65rem;
}

.settings-routing-node-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-routing-node-modal-members {
    display: grid;
    gap: 0.4rem;
    padding: 0.65rem;
    border: 1px solid var(--color-info-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-info-soft);
}

.settings-routing-node-modal footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-routing-print-report {
    display: none;
}

@media (max-width: 900px) {
    .settings-ui-relationship-map {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-relationship-connector strong {
        transform: rotate(90deg);
    }

    .settings-ui-relationship-node-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .settings-ui-relationship-warning {
        grid-column: 3;
    }

    .settings-routing-command-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-routing-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-routing-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-routing-command-actions {
        justify-content: space-between;
    }

    .settings-routing-hybrid {
        padding: 0.75rem;
    }

    .settings-routing-branch-continuation.is-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-routing-branch-continuation.is-menu-options > .settings-routing-branch-leg {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .settings-routing-command-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

@page settings-routing-report {
    size: landscape;
    margin: 0.4in;
}

@media print {
    body.settings-view main.content,
    body.settings-view .settings,
    body.settings-view .settings-shell,
    body.settings-view .settings-pane,
    body.settings-view #settings_content {
        display: block;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body.settings-view .settings-pane-header,
    body.settings-view #settings_section_tabs,
    body.settings-view .settings-routing-filters,
    body.settings-view .settings-routing-diagnostics,
    body.settings-view .settings-routing-workspace,
    body.settings-view .settings-routing-node-modal-actions,
    body.settings-view .settings-routing-flow .settings-ui-panel-header > button {
        display: none !important;
    }

    body.settings-view .settings-routing-explorer,
    body.settings-view .settings-routing-flow-list {
        gap: 0.65rem;
    }

    body.settings-view .settings-routing-print-heading {
        display: block;
        margin-bottom: 0.75rem;
    }

    body.settings-view .settings-routing-print-heading :is(h1, p) {
        margin: 0;
    }

    body.settings-view .settings-routing-print-heading p {
        margin-top: 0.25rem;
        color: var(--color-text-muted);
    }

    body.settings-view .settings-routing-print-report {
        display: grid;
        gap: 0.18in;
        page: settings-routing-report;
        color: #17233b;
        font-size: 9pt;
    }

    body.settings-view .settings-routing-print-summary,
    body.settings-view .settings-routing-print-details > header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 0.25in;
        border-bottom: 1px solid #aebdd0;
        padding-bottom: 0.1in;
    }

    body.settings-view .settings-routing-print-summary :is(h2, p),
    body.settings-view .settings-routing-print-details > header :is(h2, p) {
        margin: 0;
    }

    body.settings-view .settings-routing-print-summary > div > p,
    body.settings-view .settings-routing-print-details > header p {
        color: #5b677d;
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    body.settings-view .settings-routing-print-summary dl {
        display: flex;
        gap: 0.2in;
        margin: 0;
    }

    body.settings-view .settings-routing-print-summary dl > div {
        display: grid;
        gap: 0.02in;
    }

    body.settings-view .settings-routing-print-summary :is(dt, dd) {
        margin: 0;
    }

    body.settings-view .settings-routing-print-summary dt {
        color: #5b677d;
        font-size: 7pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.settings-view .settings-routing-print-summary dd {
        font-weight: 700;
    }

    body.settings-view .settings-routing-print-overview > h2 {
        margin: 0 0 0.1in;
        font-size: 13pt;
    }

    body.settings-view .settings-routing-hybrid.is-print {
        gap: 0.05in;
        padding: 0;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-hybrid-spine {
        grid-template-columns: minmax(0, 1fr);
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-hybrid-entry {
        width: 1.7in;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-hybrid-hub-card {
        gap: 0.08in;
        padding: 0.08in;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-hybrid-hub {
        width: 2.4in;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-branch-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.08in;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-node {
        min-height: 0;
        padding: 0.08in;
        border-radius: 0.07in;
        box-shadow: none;
        cursor: default;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-node-icon {
        width: 0.25in;
        height: 0.25in;
        font-size: 10pt;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-node-copy :is(small, span, em),
    body.settings-view .settings-routing-hybrid.is-print .settings-routing-vertical-connector span,
    body.settings-view .settings-routing-hybrid.is-print .settings-routing-spine-connector span {
        font-size: 6.5pt;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-branch,
    body.settings-view .settings-routing-hybrid.is-print .settings-routing-hybrid-hub-card {
        padding: 0.07in;
        border-radius: 0.07in;
        box-shadow: none;
        break-inside: avoid;
    }

    body.settings-view .settings-routing-hybrid.is-print .settings-routing-vertical-connector {
        min-height: 0.18in;
        padding: 0.02in 0;
    }

    body.settings-view .settings-routing-print-details {
        break-before: page;
    }

    body.settings-view .settings-routing-print-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.12in;
        margin-top: 0.15in;
    }

    body.settings-view .settings-routing-print-detail {
        padding: 0.12in;
        border: 1px solid #cdd9e7;
        border-radius: 0.08in;
        break-inside: avoid;
    }

    body.settings-view .settings-routing-print-detail header :is(h3, p) {
        margin: 0;
    }

    body.settings-view .settings-routing-print-detail header small {
        color: #5b677d;
        text-transform: capitalize;
    }

    body.settings-view .settings-routing-print-detail header p {
        margin-top: 0.03in;
        color: #5b677d;
    }

    body.settings-view .settings-routing-print-value {
        display: grid;
        grid-template-columns: 1.1in minmax(0, 1fr);
        gap: 0.08in;
        margin-top: 0.07in;
        padding-top: 0.07in;
        border-top: 1px solid #dbe2ec;
    }

    body.settings-view .settings-routing-print-value span {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    body.settings-view .settings-routing-print-value.is-script span {
        padding: 0.06in;
        background: #f5f8fc;
    }

    body.settings-view .settings-routing-print-finding {
        margin: 0.08in 0 0;
        padding: 0.06in;
        border: 1px solid #dfb36f;
        background: #fff8e8;
    }

    body.settings-view .settings-routing-print-finding.is-error {
        border-color: #d99a9a;
        background: #fff0f0;
    }

    body.settings-view .settings-routing-flow,
    body.settings-view .settings-ui-relationship-node,
    body.settings-view .settings-routing-print-detail {
        break-inside: avoid;
    }

    body.settings-view .settings-ui-relationship-map {
        grid-template-columns: minmax(10rem, 14rem) auto minmax(0, 1fr);
        padding: 0.65rem;
    }

    body.settings-view .settings-ui-relationship-details > div,
    body.settings-view .settings-ui-relationship-details:not([open]) > div {
        display: grid !important;
    }

    body.settings-view .settings-ui-relationship-evidence pre {
        max-height: none;
        overflow: visible;
    }
}

/* Administration is identified independently of the data's account scope. */
body.settings-view .settings-pane:is([data-settings-workspace="platform"], [data-settings-admin-only]) #settings_page_eyebrow {
    color: var(--admin-page-label);
}
body.settings-view .settings-pane:is([data-settings-workspace="platform"], [data-settings-admin-only]) .settings-section-tabs [aria-selected="true"] {
    background: var(--admin-nav-active-bg);
    color: var(--admin-nav-active-text);
    border-color: var(--admin-nav-accent);
}



/* Shared Advanced Settings visual system. Page-specific layouts remain in section_settings.css. */

/* Editor reading scale. Keep workspace cards and collection tables on their own scale. */
.ui-settings-editor,
.settings-ui-editor,
body.settings-view .ui-dialog,
.ui-help-popover {
    --ui-type-body: .9375rem;
    --ui-type-control: .9375rem;
    --ui-type-meta: .875rem;
    --ui-type-caption: .8125rem;
    --settings-ui-type-body: .9375rem;
    --settings-ui-type-helper: .8125rem;
    --settings-ui-type-meta: .875rem;
    font-size: var(--ui-type-body);
    font-weight: 400;
    line-height: 1.45;
}

.ui-settings-editor .ui-field-label,
.ui-settings-editor .compact-label,
.ui-settings-editor .structured-row-header,
.settings-ui-editor > :is(.settings-ui-field, .settings-form-field) > label {
    font-size: var(--ui-type-meta);
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 85%, var(--color-text-muted));
    line-height: 1.35;
}

body.settings-view .ui-settings-editor :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.settings-ui-editor :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-weight: 400;
    line-height: 1.4;
}

.ui-settings-editor .empty-note,
.settings-ui-editor .settings-field-note {
    font-size: var(--ui-type-caption);
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-text-muted) 65%, var(--color-text));
}

@media (max-width: 620px) {
    .ui-settings-editor,
    .settings-ui-editor,
    body.settings-view .ui-dialog { --ui-type-control: 1rem; }
}

body.settings-view {
    --settings-ui-space-1: 0.25rem;
    --settings-ui-space-2: 0.5rem;
    --settings-ui-space-3: 0.75rem;
    --settings-ui-space-4: 1rem;
    --settings-ui-space-5: 1.25rem;
    --settings-ui-radius-sm: var(--ui-control-radius);
    --settings-ui-radius-md: var(--radius-md, .56rem);
    --settings-ui-radius-panel: var(--radius-lg, .75rem);
    --settings-ui-control-height: var(--ui-control-min-height);
    --settings-ui-actions-column-width: 9.75rem;
    --settings-ui-touch-height: 2.75rem;
    --settings-ui-pill-height: 1.75rem;
    --settings-ui-canvas-gutter: clamp(0.75rem, 1.4vw, 1.5rem);
    --settings-ui-editor-max-width: 60rem;
    --settings-ui-reading-max-width: 72rem;
    --settings-ui-type-page: 1.375rem;
    --settings-ui-type-section: 1.125rem;
    --settings-ui-type-title: 1.0625rem;
    --settings-ui-type-body: var(--ui-type-body);
    --settings-ui-type-helper: var(--ui-type-caption);
    --settings-ui-type-meta: var(--ui-type-meta);
    --settings-ui-type-tab-primary: 1.125rem;
    --settings-ui-type-tab-secondary: 1.0625rem;
    --settings-ui-type-tab-tertiary: 1rem;
    --settings-ui-type-mobile-control: 1rem;
    --settings-ui-weight-regular: 400;
    --settings-ui-weight-medium: 600;
    --settings-ui-weight-strong: 700;
    --settings-ui-line-heading: 1.3;
    --settings-ui-line-body: 1.45;
    --settings-ui-accent-settings: var(--color-info-border);
    --settings-ui-surface-settings: color-mix(in srgb, var(--color-info-soft) 30%, var(--color-surface));
    --settings-ui-border-settings: color-mix(in srgb, var(--settings-ui-accent-settings) 62%, var(--color-border-muted));
    --settings-ui-surface-information: var(--color-surface-muted);
    --settings-ui-surface-action: color-mix(in srgb, var(--color-feature-settings-soft) 70%, var(--color-surface));
    --settings-ui-surface-manual: color-mix(in srgb, var(--color-warning-soft) 32%, var(--color-surface));
}

/* Reusable contract: structure, typography, feedback, fields, and legacy adapters. */

.settings-ui-domain {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-workspace-header {
    box-sizing: border-box;
    min-height: calc(var(--settings-ui-control-height) + 1rem + 1px);
    padding-block: var(--settings-ui-space-2);
}

.settings-ui-workspace-header h1 {
    font-size: var(--settings-ui-type-page);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-pane-heading,
.settings-pane-heading-copy {
    min-width: 0;
}

.settings-pane-heading.is-product {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.settings-pane-heading-copy {
    display: grid;
    flex: 1 1 auto;
}

.settings-pane-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
}

.settings-pane-title-row h1 {
    min-width: 0;
}

.settings-pane-heading.is-product .settings-pane-heading-copy {
    gap: 0.14rem;
}

.settings-pane-heading-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: var(--color-theme-accent-soft);
    color: var(--color-theme-accent-active);
}

.settings-pane-heading-icon[hidden],
.settings-pane-heading-eyebrow[hidden],
.settings-pane-heading-description[hidden] {
    display: none;
}

.settings-pane-heading-eyebrow {
    color: var(--color-theme-accent-active);
    font-size: var(--settings-ui-type-meta);
    font-weight: 900;
    letter-spacing: 0.055em;
    line-height: 1.15;
    text-transform: uppercase;
}

.settings-pane-heading-description {
    max-width: 68ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
    line-height: 1.4;
}

body.settings-view .settings-pane[data-settings-product-header] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.settings-view .settings-pane[data-settings-product-header] .settings-ui-workspace-header {
    height: auto;
    min-height: 0;
    padding-block: 0;
    border-bottom: 0;
}

body.settings-view .settings-pane[data-settings-product-header] .settings-pane-heading h1 {
    font-size: var(--settings-ui-type-page);
    font-weight: 900;
    line-height: 1.15;
}

body.settings-view .settings-pane[data-settings-product-header] > #settings_section_tabs {
    margin-top: var(--settings-ui-space-4);
}

body.settings-view .settings-pane[data-settings-product-header]:has(> #settings_section_tabs:not([hidden])) > :is(
    #settings_content,
    #settings_form
) {
    padding-top: var(--settings-ui-space-4);
}

.settings-ui-message,
.settings-ui-domain :is(.settings-empty, .settings-error, .settings-admin-console-loading) {
    box-sizing: border-box;
    min-height: 3rem;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border: 1px dashed var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-message:has(> .gmi:first-child) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--settings-ui-space-3);
}

.settings-ui-message:has(> .gmi:first-child) > .gmi:first-child {
    grid-column: 1;
    margin-top: 0.1rem;
}

.settings-ui-message:has(> .gmi:first-child) > :nth-child(2) {
    grid-column: 2;
    min-width: 0;
}

.settings-ui-message:has(> .gmi:first-child) > .settings-ui-button:last-child {
    grid-column: 3;
    align-self: center;
}

@media (max-width: 700px) {
    .settings-ui-message:has(> .gmi:first-child) {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .settings-ui-message:has(> .gmi:first-child) > .settings-ui-button:last-child {
        grid-column: 2;
        justify-self: start;
    }
}

.settings-ui-message:empty {
    display: none;
}

.settings-ui-message > strong,
.settings-ui-message > strong + span {
    display: block;
}

.settings-ui-message > strong + span {
    margin-top: var(--settings-ui-space-1);
}

.settings-ui-message.is-danger,
.settings-ui-domain .settings-error {
    border-style: solid;
    border-color: var(--color-danger-border, var(--color-warning-border));
    background: var(--color-danger-soft, var(--color-warning-soft));
    color: var(--color-danger-text, var(--color-warning-text));
}

.settings-ui-message.is-warning {
    border-style: solid;
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-ui-message.is-success {
    border-style: solid;
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.settings-ui-editor {
    align-content: start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--settings-ui-border-settings);
    border-left: 3px solid var(--settings-ui-accent-settings);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-mobile-editor-heading {
    display: none;
}

.settings-ui-editor > :is(.settings-ui-field, .settings-form-field) {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 42rem);
    justify-content: start;
    gap: var(--settings-ui-space-4) clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    min-height: 4.125rem;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-ui-editor > [hidden] {
    display: none;
}

.settings-ui-editor > :is(.settings-ui-field, .settings-form-field) > label {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-editor > :is(.settings-ui-field, .settings-form-field) > :is(input, select, textarea, .password-field, .settings-input-suffix) {
    grid-column: 2;
    width: 100%;
    min-width: 0;
}

.settings-ui-editor > :is(.settings-ui-field, .settings-form-field) > .settings-field-note {
    grid-column: 2;
    margin-top: calc(-1 * var(--settings-ui-space-2));
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-editor > .settings-ui-field-stack {
    grid-template-columns: minmax(0, 1fr);
}

.settings-ui-editor > .settings-ui-field-stack > :is(label, textarea) {
    grid-column: 1;
    width: 100%;
}

.settings-ui-editor > .settings-ui-field-checkbox > label {
    grid-column: 1 / -1;
}

.settings-ui-editor.settings-ui-workflow-form > :is(.settings-ui-field, .settings-form-field) {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 40rem);
    justify-content: start;
}

.settings-ui-editor.settings-ui-workflow-form > .settings-ui-field-stack {
    grid-template-columns: minmax(0, 1fr);
}

.settings-ui-editor .settings-form-actions.settings-ui-action-bar {
    margin: 0;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
}

.settings-ui-editor > .settings-prompt-script-field textarea {
    width: 100%;
    min-height: 10rem;
}

.settings-ui-domain :is(.settings-editor-header, .settings-ui-section-header) {
    min-height: 2.75rem;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--settings-ui-surface-settings);
    color: var(--color-text);
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-domain .settings-editor-header :is(h2, h3, h4, p) {
    margin-top: 0;
    margin-bottom: 0;
}

.settings-ui-domain .settings-editor-header p,
.settings-ui-domain :is(.settings-field-note, .settings-label-note) {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-domain :is(input, select, textarea) {
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-domain :is(button, a, input, select, textarea):focus-visible,
.settings-ui-editor :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-feature-settings);
    outline-offset: 2px;
}

.settings-ui-domain .settings-status-pill {
    min-height: var(--settings-ui-pill-height);
    padding: var(--settings-ui-space-1) 0.55rem;
    border: 1px solid color-mix(in srgb, currentColor, transparent 68%);
    font-size: var(--settings-ui-type-meta);
    line-height: 1;
}

.settings-ui-domain :is(
    .settings-admin-console-actions button,
    .settings-admin-console-log-controls button,
    .settings-admin-console-row-actions button,
    .settings-control-button,
    .settings-form-actions button,
    .settings-editor-header button,
    .settings-air-copy-preview,
    .settings-air-template-add,
    .settings-air-tool-data-import-actions button,
    .settings-billing-actions button,
    .settings-twilio-toolbar button,
    .settings-twilio-workflow-card button,
    .settings-twilio-tool-card button,
    .settings-twilio-row-actions button,
    .settings-row-actions button:not(.ui-button),
    .settings-prompt-assignment button,
    .settings-prompt-editor-actions button
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--settings-ui-control-height);
    padding: 0 0.7rem;
    border: 1px solid var(--button-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--button-bg);
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.settings-ui-domain :is(
    .settings-admin-console-actions button,
    .settings-admin-console-log-controls button,
    .settings-admin-console-row-actions button,
    .settings-control-button,
    .settings-form-actions button,
    .settings-editor-header button,
    .settings-air-copy-preview,
    .settings-air-template-add,
    .settings-air-tool-data-import-actions button,
    .settings-billing-actions button,
    .settings-twilio-toolbar button,
    .settings-twilio-workflow-card button,
    .settings-twilio-tool-card button,
    .settings-twilio-row-actions button,
    .settings-row-actions button:not(.ui-button),
    .settings-prompt-assignment button,
    .settings-prompt-editor-actions button
):hover:not(:disabled) {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
}

.settings-ui-domain :is(
    .settings-admin-console-actions button,
    .settings-admin-console-log-controls button,
    .settings-admin-console-row-actions button,
    .settings-control-button,
    .settings-form-actions button,
    .settings-editor-header button,
    .settings-air-copy-preview,
    .settings-air-template-add,
    .settings-air-tool-data-import-actions button,
    .settings-billing-actions button,
    .settings-twilio-toolbar button,
    .settings-twilio-workflow-card button,
    .settings-twilio-tool-card button,
    .settings-twilio-row-actions button,
    .settings-row-actions button:not(.ui-button),
    .settings-prompt-assignment button,
    .settings-prompt-editor-actions button
):disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

@media (min-width: 701px) {
    .settings-ui-domain .settings-record-actions > button:not(.is-icon) {
        flex: 0 0 var(--settings-ui-control-height);
        width: var(--settings-ui-control-height);
        min-width: var(--settings-ui-control-height);
        padding-right: 0;
        padding-left: 0;
    }
}

.settings-ui-tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.settings-ui-tabs > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.settings-ui-navigation {
    display: grid;
    gap: var(--settings-ui-space-2);
    min-width: 0;
    padding: var(--settings-ui-space-2);
    border: 1px solid var(--color-border-muted);
    border-radius: calc(var(--settings-ui-radius-md) + 2px);
    background: color-mix(in srgb, var(--color-surface-muted), var(--color-surface) 42%);
}

.settings-admin-console {
    padding: var(--settings-ui-space-3);
    border: 1px solid var(--color-border-muted);
    border-radius: calc(var(--settings-ui-radius-md) + 4px);
    background: color-mix(in srgb, var(--color-surface-muted), transparent 35%);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console-viewer-location {
    display: block;
    margin-top: var(--settings-ui-space-1);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
    white-space: nowrap;
}

.settings-ui-tabs-primary {
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
}

.settings-ui-navigation .settings-ui-tabs-primary {
    border: 0;
    background: transparent;
}

.settings-ui-tabs.settings-ui-tabs-primary > button {
    min-height: 42px;
    padding: 0 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--settings-ui-radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-tab-primary);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-tabs.settings-ui-tabs-primary > button:hover {
    color: var(--color-text);
}

.settings-ui-tabs.settings-ui-tabs-primary > button.active,
.settings-ui-tabs.settings-ui-tabs-primary > button[aria-selected="true"] {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-feature-settings);
    box-shadow: var(--shadow-sm);
}

.settings-ai-operation-profile-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.settings-ui-policy-workspace,
.settings-ui-wide-editor {
    width: min(100%, 72rem);
}

.settings-ai-operation-profile-list .settings-ui-action-group {
    align-items: center;
    flex-wrap: wrap;
}

.settings-ai-operation-profile-list .settings-ui-action-group label,
.settings-provider-controls .settings-ui-action-group label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

/* Inner navigation shares one underline treatment across all settings sections. */
.settings-ui-tabs-secondary,
.settings-ui-tabs-tertiary {
    align-items: flex-end;
    gap: 1.1rem;
    margin-top: 0;
    padding: 0 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--color-border-muted);
    background: transparent;
}

.settings-ui-navigation .settings-ui-tabs-secondary {
    padding: 0 var(--settings-ui-space-2);
}

.settings-ui-tabs.settings-ui-tabs-secondary > button,
.settings-ui-tabs.settings-ui-tabs-tertiary > button {
    min-height: 38px;
    margin-bottom: -1px;
    padding: 0 0.25rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-tab-secondary);
    font-weight: var(--settings-ui-weight-strong);
    transition: color 140ms ease, border-bottom-color 140ms ease;
}

.settings-ui-tabs.settings-ui-tabs-secondary > button:hover:not(:disabled),
.settings-ui-tabs.settings-ui-tabs-tertiary > button:hover:not(:disabled) {
    color: var(--color-feature-settings);
}

.settings-ui-tabs.settings-ui-tabs-secondary > button.active,
.settings-ui-tabs.settings-ui-tabs-secondary > button[aria-selected="true"],
.settings-ui-tabs.settings-ui-tabs-tertiary > button.active,
.settings-ui-tabs.settings-ui-tabs-tertiary > button[aria-selected="true"] {
    border-color: transparent;
    border-bottom-color: var(--color-feature-settings);
    background: transparent;
    color: var(--color-feature-settings);
}

.settings-ui-tabs.settings-ui-tabs-secondary > button:focus-visible,
.settings-ui-tabs.settings-ui-tabs-tertiary > button:focus-visible {
    outline: 2px solid var(--color-feature-settings);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .settings-ui-tabs.settings-ui-tabs-secondary > button,
    .settings-ui-tabs.settings-ui-tabs-tertiary > button {
        transition: none;
    }
}

.settings-ui-dashboard-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--settings-ui-space-2);
    min-width: 0;
}

.settings-ui-dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--settings-ui-space-3);
    min-width: 0;
}

.settings-ui-dashboard-updated {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
    white-space: nowrap;
}

.settings-ui-dashboard-refresh {
    align-self: stretch;
}

.settings-ui-dashboard {
    display: grid;
    gap: var(--settings-ui-space-4);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.settings-ui-dashboard > * {
    max-width: 100%;
    min-width: 0;
}

body.settings-view #settings_content > .settings-ui-dashboard {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.settings-view #settings_content:is(
    [data-settings-layout="dashboard"],
    [data-settings-layout="collection"],
    [data-ui-page-mode="fluid"],
    [data-ui-page-mode="workbench"]
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.settings-view #settings_content:is(
    [data-settings-layout="dashboard"],
    [data-settings-layout="collection"],
    [data-ui-page-mode="fluid"],
    [data-ui-page-mode="workbench"]
) > :is(.settings-ui-dashboard, .settings-ui-domain) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

body.settings-view #settings_content:is([data-settings-layout="policy"], [data-ui-page-mode="report"]) > :is(
    .settings-ui-dashboard,
    .settings-ui-domain
) {
    width: min(100%, var(--settings-ui-reading-max-width));
    max-width: var(--settings-ui-reading-max-width);
    margin-right: auto;
    margin-left: 0;
}

body.settings-view #settings_form[data-settings-layout="editor"] {
    width: min(100%, var(--settings-ui-editor-max-width));
    max-width: var(--settings-ui-editor-max-width);
    margin-right: auto;
    margin-left: 0;
}

body.settings-view #settings_form[data-settings-layout="detail"] {
    width: min(100%, var(--settings-ui-reading-max-width));
    max-width: var(--settings-ui-reading-max-width);
    margin-right: auto;
    margin-left: 0;
}

/* Vue editors use the complete Settings route viewport and its trailing-edge scrollport. */
body.settings-view #settings_form.settings-vue-editor-host {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-bottom: calc(var(--settings-ui-touch-height) + (2 * var(--app-content-inset)));
}

body.settings-view #settings_form.settings-vue-editor-host .ui-settings-editor,
body.settings-view #settings_form.settings-vue-editor-host > :is(.settings-loading, .settings-error) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

body.settings-view .settings-pane:has(> #settings_section_tabs:not([hidden])) > :is(
    #settings_content,
    #settings_form
) {
    padding-top: var(--settings-ui-space-3);
}

.settings-ui-page-header {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: var(--settings-ui-space-4);
    min-height: calc(var(--settings-ui-control-height) + 1.8rem + 2px);
    padding: 0.9rem var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--color-feature-settings-soft), transparent 36%), transparent 58%),
        var(--color-surface);
}

.settings-ui-page-heading {
    flex: 1 1 30rem;
    min-width: 0;
}

.settings-ui-page-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--settings-ui-space-2);
}

.settings-pane-header-actions,
.settings-view-actions,
.settings-ui-global-refresh {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--settings-ui-space-2);
    min-width: 0;
}

.settings-view-actions:empty { display: none; }

.settings-ui-global-refresh { margin-inline-start: auto; min-height: var(--settings-ui-control-height); }
.settings-ui-global-refresh[hidden] { display: none; }
@media (max-width: 900px) { .settings-pane-header-actions { flex-wrap: wrap; } }

.settings-ui-page-heading h3,
.settings-ui-panel-header h3,
.settings-ui-panel-header h4 {
    margin: 0;
    color: var(--color-text);
}

.settings-ui-page-heading h3 {
    font-size: var(--settings-ui-type-page);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-page-heading p,
.settings-ui-panel-header p {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-page-heading p {
    max-width: 68ch;
    font-size: var(--settings-ui-type-body);
}

.settings-ui-flat-section > h4,
.settings-ui-inline-output > h4 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.4rem;
    min-height: var(--settings-ui-pill-height);
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-success-border);
    border-radius: 999px;
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    white-space: nowrap;
}

.settings-ui-status::before {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.settings-ui-status.is-warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.settings-ui-status.is-danger {
    border-color: var(--color-danger-border, var(--color-warning-border));
    background: var(--color-danger-soft, var(--color-warning-soft));
    color: var(--color-danger-text, var(--color-warning-text));
}

.settings-ui-status.is-neutral {
    border-color: var(--color-border-muted);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.settings-ui-panel {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-ui-panel.is-settings {
    border-color: var(--settings-ui-border-settings);
    border-left: 3px solid var(--settings-ui-accent-settings);
}

.settings-ui-panel.is-settings > .settings-ui-panel-header {
    background: var(--settings-ui-surface-settings);
}

.settings-ui-panel.is-settings > .settings-ui-panel-header h3,
.settings-ui-panel.is-settings > .settings-ui-panel-header h4,
.settings-admin-console form.settings-admin-console-policy .settings-admin-console-panel-title h4,
.settings-admin-console form.settings-admin-console-policy .settings-editor-header h4 {
    color: var(--color-info-text);
}

.settings-ui-panel.is-information {
    background: var(--settings-ui-surface-information);
}

.settings-ui-panel.is-manual {
    border-color: var(--color-warning-border);
    background: var(--settings-ui-surface-manual);
}

.settings-ui-panel.is-manual > .settings-ui-panel-header h3,
.settings-ui-panel.is-manual > .settings-ui-panel-header h4 {
    color: var(--color-warning-text);
}

.settings-ui-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--settings-ui-space-4);
    padding: var(--settings-ui-space-4);
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-ui-panel-body {
    display: grid;
    gap: var(--settings-ui-space-3);
    min-width: 0;
    padding: var(--settings-ui-space-4);
}

.settings-ui-panel-header h3,
.settings-ui-panel-header h4 {
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-panel-header p {
    max-width: 68ch;
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-panel-meta {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-medium);
    text-align: right;
    white-space: nowrap;
}

.settings-ui-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    padding: 0.8rem var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--settings-ui-surface-settings);
}

.settings-ui-section-heading strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-title);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-section-heading small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-setting-list {
    display: grid;
    min-width: 0;
}

.settings-ui-setting-row {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 18rem);
    gap: 1.5rem;
    align-items: center;
    min-height: 66px;
    padding: 0.75rem var(--settings-ui-space-4);
    border-bottom: 1px solid var(--color-border-muted);
}

.settings-ui-setting-row:last-child {
    border-bottom: 0;
}

.settings-ui-setting-copy {
    min-width: 0;
}

.settings-ui-setting-copy strong {
    display: block;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    line-height: var(--settings-ui-line-heading);
}

.settings-ui-setting-copy small {
    display: block;
    max-width: 68ch;
    margin-top: 0.18rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-setting-control {
    justify-self: stretch;
    min-width: 0;
}

.settings-ui-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--settings-ui-space-3);
}

.settings-ui-summary-card {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--settings-ui-radius-panel);
    background: var(--settings-ui-surface-information);
}

.settings-ui-summary-card.is-success {
    border-inline-start-color: var(--color-success);
}

.settings-ui-summary-card.is-warning {
    border-inline-start-color: var(--color-warning);
}

.settings-ui-summary-card.is-danger {
    border-inline-start-color: var(--color-danger);
}

.settings-ui-summary-card span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-ui-summary-card strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-title);
}

.settings-ui-filter-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--settings-ui-space-3);
}

.settings-ui-filter-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--settings-ui-space-2) var(--settings-ui-space-3);
    min-height: 3.5rem;
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-panel);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-align: left;
}

.settings-ui-filter-summary-card > span {
    min-width: 0;
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-ui-filter-summary-card > strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-title);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-filter-summary-card > small {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
}

.settings-ui-filter-summary-card:hover,
.settings-ui-filter-summary-card:focus-visible {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
}

.settings-ui-filter-summary-card.is-active {
    border-color: color-mix(in srgb, var(--color-feature-settings) 46%, var(--color-border));
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-feature-settings) 14%, transparent);
}

.settings-security-after-validation > :is(strong, span) {
    display: block;
}

.settings-platform-credentials-table .settings-col-description,
.settings-configuration-registry-table td {
    white-space: normal;
}

.settings-platform-credential-editor {
    width: min(100%, 60rem);
    margin-top: var(--settings-ui-space-4);
}

.settings-platform-credential-editor .settings-ui-setting-control > :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
}

.settings-ui-number-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--settings-ui-control-height);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface);
}

.settings-ui-number-control:focus-within {
    border-color: var(--color-feature-settings);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-feature-settings), transparent 78%);
}

.settings-ui-number-control input {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--settings-ui-control-height) - 2px);
    padding: 0 0.65rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
}

.settings-ui-number-control span {
    padding: 0 0.65rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-medium);
    white-space: nowrap;
}

.settings-ui-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-height: var(--settings-ui-control-height);
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    cursor: pointer;
}

.settings-ui-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

.settings-ui-switch input:disabled {
    cursor: not-allowed;
}

.settings-ui-switch-track {
    position: relative;
    flex: 0 0 2.5rem;
    height: 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    transition: background-color 140ms ease, border-color 140ms ease;
}

.settings-ui-switch-track::after {
    position: absolute;
    top: 0.16rem;
    left: 0.18rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    content: "";
    transition: left 140ms ease, background-color 140ms ease;
}

.settings-ui-switch input:checked + .settings-ui-switch-track {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings);
}

.settings-ui-switch input:checked + .settings-ui-switch-track::after {
    left: 1.2rem;
    background: var(--color-feature-settings-text, #fff);
}

.settings-ui-switch input:focus-visible + .settings-ui-switch-track {
    outline: 2px solid var(--color-feature-settings);
    outline-offset: 2px;
}

.settings-ui-switch-state::before {
    content: "Disabled";
}

.settings-ui-switch input:checked ~ .settings-ui-switch-state::before {
    content: "Enabled";
}

.settings-ui-readonly-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: var(--settings-ui-control-height);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-ui-readonly-value small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-ui-action-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    width: 100%;
    min-width: 0;
    padding: 0.75rem var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
    background: var(--settings-ui-surface-action);
}

.settings-ui-action-bar > small {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-action-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--settings-ui-space-2);
}

/* Action button presentation is owned by ui_primitives.css, including the legacy alias. */
.settings-ui-button.is-warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}
.settings-ui-button.is-warning:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-warning-soft) 72%, var(--color-warning-border));
}

.settings-ui-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-border-muted);
}

.settings-ui-metric {
    position: relative;
    min-width: 0;
    padding: 0.8rem var(--settings-ui-space-4);
    background: var(--color-surface);
}

.settings-ui-metric.has-status {
    padding-left: 1.15rem;
}

.settings-ui-metric.has-status::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: var(--color-border);
    content: "";
}

.settings-ui-metric.has-status.status-success::before {
    background: var(--color-success-text);
}

.settings-ui-metric.has-status.status-pending::before {
    background: var(--color-warning-text);
}

.settings-ui-metric.has-status.status-failed::before {
    background: var(--color-danger-text);
}

.settings-ui-metric span,
.settings-ui-metric strong,
.settings-ui-metric small {
    display: block;
}

.settings-ui-metric span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-metric strong {
    margin-top: 0.18rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-ui-metric small {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-disclosure {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-ui-disclosure > summary {
    padding: 0.75rem var(--settings-ui-space-4);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-ui-disclosure > summary > .gmi {
    margin-right: var(--settings-ui-space-2);
    vertical-align: middle;
}

.settings-air-provider-options .settings-ui-disclosure {
    margin: 0 var(--settings-ui-space-4) var(--settings-ui-space-4);
}

.settings-air-provider-options .settings-ui-disclosure > .settings-ui-message,
.settings-air-provider-options .settings-ui-disclosure > .settings-ui-panel-body {
    margin: 0 var(--settings-ui-space-4) var(--settings-ui-space-4);
}

.settings-ui-disclosure-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--settings-ui-space-3);
    padding: 0 var(--settings-ui-space-4) var(--settings-ui-space-4);
}

.settings-ui-disclosure-body > div {
    min-width: 0;
}

.settings-ui-disclosure-body strong,
.settings-ui-disclosure-body small {
    display: block;
}

.settings-ui-disclosure-body strong {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-ui-disclosure-body small {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-attention {
    border-color: var(--color-warning-border);
    background: var(--settings-ui-surface-manual);
}

.settings-ui-attention .settings-ui-panel-header {
    border-bottom-color: var(--color-warning-border);
}

.settings-ui-filter-bar {
    align-items: flex-end;
    padding: 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
}

.settings-ui-inline-operations {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.settings-ui-table-region,
.ui-data-table-region {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--surface-panel-border, var(--color-border-muted));
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-ui-table,
.ui-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: var(--color-surface);
}

/*
 * Table appearance is selected by information role, not by page. Collections
 * are standalone rounded panels. Analytic matrices sit flush beneath their
 * section heading and trade some row height for side-by-side comparison.
 */
.ui-data-table-region[data-ui-table-appearance="analytic-matrix"] {
    border-radius: 0;
}

.ui-data-table[data-ui-table-density="compact"] th {
    height: 36px;
    padding: var(--ui-table-compact-heading-padding);
}

.ui-data-table[data-ui-table-density="compact"] td {
    padding: var(--ui-table-compact-cell-padding);
}

.settings-ui-table.settings-ui-table-fit-content,
.ui-data-table.ui-data-table-fit-content {
    width: max-content;
    min-width: 100%;
}

.settings-ui-table th,
.settings-ui-table td,
.ui-data-table th,
.ui-data-table td {
    border-bottom: 1px solid var(--color-border-muted);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.settings-ui-table th,
.ui-data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 42px;
    padding: var(--ui-table-heading-padding);
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    letter-spacing: 0.015em;
    line-height: var(--settings-ui-line-heading);
    text-transform: none;
}

.settings-ui-table td,
.ui-data-table td {
    padding: var(--ui-table-cell-padding);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-table tr:hover,
.ui-data-table tr:hover {
    background: var(--table-row-hover);
}

.settings-ui-table .settings-col-number,
.settings-ui-table .settings-col-align-end,
.ui-data-table .settings-col-number,
.ui-data-table .settings-col-align-end {
    text-align: right;
}

.settings-ui-table .settings-col-status,
.settings-ui-table .settings-col-actions,
.settings-ui-table .settings-col-align-center,
.ui-data-table .settings-col-status,
.ui-data-table .settings-col-actions,
.ui-data-table .settings-col-align-center {
    text-align: center;
}

.settings-ui-table .settings-col-wrap,
.ui-data-table .settings-col-wrap {
    min-width: 14rem;
    max-width: 36rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.settings-ui-table .settings-col-atomic,
.ui-data-table .settings-col-atomic {
    width: 1%;
    min-width: max-content;
    white-space: nowrap;
}

.settings-ui-table .settings-col-created {
    width: 8rem;
    min-width: 8rem;
    white-space: nowrap;
}

.settings-ui-table .settings-col-contact,
.settings-ui-table .settings-col-access,
.settings-ui-table .settings-col-identity {
    min-width: 0;
    white-space: normal;
}

.settings-ui-table td.settings-col-atomic .settings-field-value {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.settings-change-reasons-table .settings-change-reason-area {
    width: 11rem;
    max-width: 14rem;
}

.settings-change-reasons-table .settings-change-reason-operation small {
    padding-left: var(--settings-ui-space-2);
    color: var(--color-text-muted);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Admin Console adoption layer. Legacy markup maps to the shared primitives here. */

.settings-admin-console-section {
    gap: var(--settings-ui-space-4);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.settings-admin-console-maintenance-preflight {
    flex: 0 0 auto;
    min-width: 0;
}

.settings-ui-service-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 1 32rem;
    gap: var(--settings-ui-space-3);
    min-width: 20rem;
    padding: 0.1rem 0 0.1rem var(--settings-ui-space-4);
    border-left: 1px solid var(--color-border-muted);
}

.settings-ui-service-strip-copy,
.settings-ui-service-strip-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.settings-ui-service-strip-copy > strong {
    flex: 1 0 100%;
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-strong);
}

.settings-ui-service-strip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.settings-ui-service-strip-details {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console .settings-admin-session-bulk-footer .settings-ui-button {
    width: auto;
    min-width: max-content;
}

.settings-ui-flat-section {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: var(--settings-ui-space-2) 0 0;
    border-top: 1px solid var(--color-border-muted);
}

.settings-ui-inline-output {
    display: grid;
    gap: 0.5rem;
    padding-top: var(--settings-ui-space-3);
    border-top: 1px solid var(--color-border-muted);
}

.settings-ui-panel-footer {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    width: 100%;
    min-width: 0;
    padding: 0.75rem var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-ui-panel-footer.is-actions-only {
    justify-content: flex-end;
}

.settings-admin-console .settings-admin-console-policy,
.settings-admin-console .settings-admin-console-mini-panel,
.settings-admin-console .settings-admin-console-log-panel,
.settings-admin-console .settings-admin-console-service-card,
.settings-admin-console .settings-admin-session-controls,
.settings-admin-console .settings-admin-console-output-panel {
    border-color: var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-admin-console form.settings-admin-console-policy {
    border-color: var(--settings-ui-border-settings);
    border-left: 3px solid var(--settings-ui-accent-settings);
    background:
        linear-gradient(180deg, var(--settings-ui-surface-settings), transparent 7rem),
        var(--color-surface);
}

.settings-admin-console .settings-admin-console-policy,
.settings-admin-console .settings-admin-console-mini-panel,
.settings-admin-console .settings-admin-console-log-panel,
.settings-admin-console .settings-admin-console-service-card {
    padding: var(--settings-ui-space-4);
}

.settings-admin-console .settings-admin-console-policy.settings-ui-panel {
    padding: 0;
}

.settings-admin-console .settings-admin-console-service-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
}

.settings-admin-console .settings-admin-console-service-title {
    display: block;
    min-width: 0;
    overflow: visible;
    font-size: var(--settings-ui-type-title);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
    text-overflow: clip;
    white-space: normal;
}

.settings-admin-console-service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.settings-admin-console-service-details {
    display: grid;
    grid-column: 1;
    gap: 0.2rem;
    min-width: 0;
}

.settings-admin-console .settings-admin-console-service-details small {
    grid-column: auto;
    margin: 0;
    font-size: var(--settings-ui-type-meta);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console .settings-admin-console-panel-title,
.settings-admin-console .settings-editor-header,
.settings-admin-console .settings-admin-console-log-header {
    min-width: 0;
}

.settings-admin-console .settings-admin-console-panel-title h4,
.settings-admin-console .settings-admin-console-mini-panel > h4 {
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-admin-console .settings-admin-console-panel-title h3,
.settings-admin-console .settings-editor-header h3,
.settings-admin-console .settings-editor-header h4,
.settings-admin-console .settings-admin-console-log-header h3,
.settings-admin-console .settings-admin-console-log-header h4 {
    font-size: var(--settings-ui-type-section);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-admin-console .settings-admin-console-panel-title p,
.settings-admin-console .settings-editor-header p,
.settings-admin-console .settings-admin-console-log-header p,
.settings-admin-console .settings-help {
    max-width: 68ch;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console .settings-admin-console-actions {
    align-items: center;
    min-height: 50px;
    padding: 0.5rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--settings-ui-surface-action);
}

.settings-admin-console .settings-admin-console-catchup-actions {
    align-self: stretch;
    width: 100%;
    min-width: 0;
}

.settings-admin-console .settings-admin-console-delivery-safety {
    padding: 0;
    overflow: hidden;
}

.settings-admin-console .settings-admin-console-delivery-safety .settings-admin-console-policy-list {
    border: 0;
    border-radius: 0;
}

.settings-admin-console .settings-admin-console-delivery-safety .settings-admin-console-policy-nested {
    margin: 0;
    padding: 0;
    border-left: 0;
    background: transparent;
}

.settings-admin-console .settings-admin-console-delivery-safety .settings-admin-console-policy-nested > label {
    grid-template-columns: minmax(15rem, 0.85fr) minmax(20rem, 1.15fr);
    gap: 1.5rem;
    padding: 0.75rem var(--settings-ui-space-4);
}

.settings-admin-console .settings-admin-console-delivery-safety :is(input:not([type="checkbox"]), select, textarea) {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.settings-admin-console-log-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: var(--settings-ui-space-3) 0;
}

.settings-admin-console-log-category-filters > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--settings-ui-control-height);
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.settings-admin-console-log-category-filters > button.active {
    border-color: var(--color-feature-settings);
    background: var(--settings-ui-surface-settings);
    color: var(--color-feature-settings);
}

.settings-admin-console .settings-admin-console-actions button,
.settings-admin-console .settings-admin-console-log-controls button,
.settings-admin-console .settings-admin-console-row-actions button,
.settings-admin-console .settings-control-button {
    min-height: var(--settings-ui-control-height);
    border-radius: var(--settings-ui-radius-sm);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
}

.settings-admin-console .settings-admin-console-row-actions {
    flex-wrap: nowrap;
}

.settings-admin-console-daemon-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--settings-ui-space-4);
    padding: 0.65rem var(--settings-ui-space-3);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md) var(--settings-ui-radius-md) 0 0;
    background: var(--settings-ui-surface-action);
}

.settings-admin-console-daemon-action-group {
    display: flex;
    flex: 1 1 24rem;
    align-items: center;
    gap: var(--settings-ui-space-2);
    min-width: 0;
}

.settings-admin-console-daemon-action-group > span {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    text-transform: uppercase;
}

.settings-admin-console-daemon-action-group .settings-ui-action-group {
    justify-content: flex-start;
}

.settings-admin-console-daemon-toolbar + .settings-admin-console-table-wrap {
    margin-top: calc(-1 * var(--settings-ui-space-4));
    border-radius: 0 0 var(--settings-ui-radius-md) var(--settings-ui-radius-md);
}

.settings-admin-connected-policy-section {
    margin-top: var(--settings-ui-space-2);
}

.settings-admin-console .settings-admin-console-policy-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
}

.settings-admin-console .settings-admin-console-policy-list > label,
.settings-admin-console .settings-admin-console-policy-nested > label {
    min-height: 64px;
    padding: 0.75rem var(--settings-ui-space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border-muted);
    border-radius: 0;
    background: var(--color-surface);
}

.settings-admin-console .settings-admin-console-policy-list label strong,
.settings-admin-console .settings-admin-console-policy-grid label > span {
    color: var(--color-text);
    font-size: var(--settings-ui-type-body);
    font-weight: var(--settings-ui-weight-medium);
    line-height: var(--settings-ui-line-heading);
}

.settings-admin-console .settings-admin-console-policy-list label small,
.settings-admin-console .settings-admin-console-policy-group-title small {
    max-width: 68ch;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: var(--settings-ui-weight-regular);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console :is(input, select, textarea) {
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console .settings-admin-console-policy-list > label:last-child,
.settings-admin-console .settings-admin-console-policy-nested > label:last-child {
    border-bottom: 0;
}

.settings-admin-console .settings-admin-console-policy-nested {
    gap: 0;
    margin: 0;
    padding: 0 0 0 var(--settings-ui-space-4);
    border-left: 3px solid var(--settings-ui-border-settings);
    background: var(--settings-ui-surface-settings);
}

.settings-admin-console .settings-admin-console-policy-group-title {
    margin: 0;
    padding: 0.8rem var(--settings-ui-space-4);
    border-top: 1px solid var(--color-border-muted);
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--settings-ui-surface-settings);
}

.settings-admin-console .settings-admin-console-policy-group-title strong {
    font-size: var(--settings-ui-type-title);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-admin-console .settings-admin-console-policy-grid {
    padding: var(--settings-ui-space-4);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--settings-ui-surface-settings);
}

.settings-admin-console .settings-admin-console-loading,
.settings-admin-console .settings-empty,
.settings-admin-console .settings-error {
    min-height: 48px;
    padding: 0.75rem var(--settings-ui-space-4);
    border: 1px dashed var(--color-border-muted);
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface-muted);
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console .settings-table th {
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-strong);
    line-height: var(--settings-ui-line-heading);
}

.settings-admin-console .settings-table td {
    font-size: var(--settings-ui-type-body);
    line-height: var(--settings-ui-line-body);
}

.settings-admin-console :is(.settings-admin-console-services-table, .settings-admin-console-users-table) td {
    vertical-align: middle;
}

.settings-admin-console .settings-error {
    border-style: solid;
    border-color: var(--color-danger-border, var(--color-warning-border));
    background: var(--color-danger-soft, var(--color-warning-soft));
}

.settings-admin-console .settings-admin-console-output,
.settings-admin-console .settings-admin-console-output-panel {
    border-radius: var(--settings-ui-radius-md);
}

.settings-admin-console .settings-table-wrap {
    border-radius: var(--settings-ui-radius-md);
    background: var(--color-surface);
}

.settings-admin-console :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-feature-settings);
    outline-offset: 2px;
}

@media (min-width: 761px) {
    .settings-ui-workspace-header {
        height: calc(var(--settings-ui-control-height) + 1rem + 1px);
    }

    .settings-ui-navigation .settings-ui-tabs-primary {
        flex-wrap: wrap;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .settings-ui-workspace-header {
        min-height: calc(var(--settings-ui-touch-height) + 1rem + 1px);
    }

    .settings-admin-console .settings-admin-console-delivery-safety .settings-admin-console-policy-nested > label {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .settings-ui-tabs.settings-ui-tabs-primary > button,
    .settings-ui-tabs.settings-ui-tabs-secondary > button,
    .settings-ui-tabs.settings-ui-tabs-tertiary > button,
    .settings-ui-button {
        min-height: var(--settings-ui-touch-height);
    }

    .settings-ui-domain :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .settings-ui-editor :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: var(--settings-ui-type-mobile-control);
    }

    .settings-ui-editor > :is(.settings-ui-field, .settings-form-field) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .settings-ui-editor.settings-ui-workflow-form > :is(.settings-ui-field, .settings-form-field) {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-editor > :is(.settings-ui-field, .settings-form-field) > :is(label, input, select, textarea, .password-field, .settings-input-suffix, .settings-field-note) {
        grid-column: 1;
        width: 100%;
    }

    .settings-ui-workspace-header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .settings-ui-workspace-header .settings-pane-heading,
    .settings-ui-workspace-header .settings-pane-header-actions {
        grid-column: 1;
        width: 100%;
    }

    .settings-ui-workspace-header .settings-pane-header-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .settings-ui-workspace-header .settings-pane-heading-copy {
        overflow-wrap: anywhere;
    }

    .settings-ui-workspace-header .settings-ui-button {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;
    }

    .settings-ui-workspace-header > .settings-ui-button {
        grid-column: 1;
        width: auto;
        min-width: max-content;
        justify-self: start;
        padding-right: var(--settings-ui-space-3);
        padding-left: var(--settings-ui-space-3);
    }

    .settings-ui-workspace-header .settings-ui-button span:not(.gmi) {
        display: inline;
    }

    .settings-ui-editor .settings-prompt-script-field textarea {
        height: 10rem;
        min-height: 10rem;
        resize: vertical;
    }

    .settings-ui-page-header {
        gap: var(--settings-ui-space-2);
        padding: 0.65rem var(--settings-ui-space-3);
    }

    .settings-ui-page-header.has-aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .settings-ui-page-header.has-aside .settings-ui-page-actions {
        align-self: center;
    }

    .settings-ui-page-header .settings-ui-page-heading h3 {
        font-size: var(--settings-ui-type-title);
    }

    .settings-ui-page-header .settings-ui-page-heading p {
        display: -webkit-box;
        margin-top: 0.15rem;
        overflow: hidden;
        font-size: var(--settings-ui-type-helper);
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .settings-ui-panel-header,
    .settings-ui-action-bar,
    .settings-ui-service-strip,
    .settings-ui-panel-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-ui-service-strip-details {
        justify-items: start;
    }

    .settings-ui-service-strip {
        width: 100%;
        min-width: 0;
        padding: var(--settings-ui-space-3) 0 0;
        border-top: 1px solid var(--color-border-muted);
        border-left: 0;
    }

    .settings-ui-dashboard-navigation {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-dashboard-actions {
        justify-content: space-between;
    }

    .settings-ui-dashboard-refresh {
        justify-self: stretch;
        flex: 1 1 auto;
    }

    .settings-admin-console {
        padding: var(--settings-ui-space-2);
    }

    .settings-admin-console .settings-admin-console-policy-list > label,
    .settings-admin-console .settings-admin-console-policy-nested > label {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .settings-admin-console .settings-admin-console-policy-list input,
    .settings-admin-console .settings-admin-console-policy-list select {
        justify-self: stretch;
        width: 100%;
    }

    .settings-admin-console .settings-admin-console-actions {
        align-items: stretch;
    }

    .settings-admin-console .settings-admin-console-actions button,
    .settings-admin-console .settings-admin-console-actions .settings-control-button {
        flex: 1 1 10rem;
        min-height: var(--settings-ui-touch-height);
    }

    .settings-admin-console-daemon-toolbar,
    .settings-admin-console-daemon-action-group {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-admin-console-daemon-action-group {
        flex-basis: auto;
    }

    .settings-admin-console-daemon-action-group .settings-ui-action-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-panel-meta {
        text-align: left;
        white-space: normal;
    }

    .settings-ui-setting-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .settings-ui-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-setting-control,
    .settings-ui-number-control,
    .settings-ui-readonly-value {
        width: 100%;
    }

    .settings-ui-switch {
        justify-content: space-between;
        width: 100%;
    }

    .settings-ui-metric-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-metric {
        border: 0;
    }

    .settings-ui-action-group {
        justify-content: stretch;
    }

    .settings-ui-action-group .settings-ui-button {
        flex: 1 1 10rem;
    }

    .settings-ui-domain :is(
        .settings-admin-console-actions button,
        .settings-admin-console-log-controls button,
        .settings-admin-console-row-actions button,
        .settings-control-button,
        .settings-form-actions button,
        .settings-editor-header button,
        .settings-air-copy-preview,
        .settings-air-template-add,
        .settings-air-tool-data-import-actions button,
        .settings-billing-actions button,
        .settings-twilio-toolbar button,
        .settings-twilio-workflow-card button,
        .settings-twilio-tool-card button,
        .settings-twilio-row-actions button,
        .settings-row-actions button:not(.ui-button),
        .settings-prompt-assignment button,
        .settings-prompt-editor-actions button
    ) {
        min-height: var(--settings-ui-touch-height);
    }
}

@media (max-width: 700px) {
    body.settings-view #settings_content:has(> .settings-table-wrap.settings-ui-table-region) {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.settings-view #settings_content:has(> .settings-table-wrap.settings-ui-table-region) > .settings-table-wrap.settings-ui-table-region {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }

    .settings-ui-table-region {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .settings-ui-table,
    .settings-ui-table thead,
    .settings-ui-table tbody,
    .settings-ui-table tr,
    .settings-ui-table td {
        display: block;
    }

    .settings-ui-table {
        width: 100%;
        min-width: 0;
        background: transparent;
    }

    .settings-ui-table.settings-ui-table-fit-content {
        width: 100%;
        min-width: 0;
    }

    .settings-ui-table thead {
        display: none;
    }

    .settings-ui-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .settings-ui-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--settings-ui-space-1) 0.65rem;
        padding: var(--settings-ui-space-3);
        border: 1px solid var(--color-border-muted);
        border-radius: var(--settings-ui-radius-md);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .settings-ui-table tr:hover {
        background: var(--color-surface);
    }

    .settings-ui-table td {
        height: auto;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        border-bottom: 0;
        white-space: normal;
    }

    .settings-ui-table td.settings-col-atomic {
        width: auto;
        min-width: 0;
        max-width: none;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .settings-ui-table td.settings-col-atomic .settings-field-value {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .settings-ui-table td:is(
        .settings-col-fit,
        .settings-col-actions,
        .settings-col-number,
        .settings-col-status,
        .settings-col-event,
        .settings-col-id,
        .settings-col-time,
        .settings-col-ip,
        .settings-col-user,
        .settings-admin-console-nowrap-cell,
        .settings-admin-console-time-cell
    ) {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .settings-ui-table td:not(.settings-card-primary):not(.settings-actions-cell)::before {
        display: block;
        margin-bottom: 0.1rem;
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: var(--settings-ui-type-meta);
        font-weight: var(--settings-ui-weight-strong);
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .settings-ui-table .settings-actions-cell {
        order: 2;
        grid-row: 1 / span 3;
        grid-column: 2;
        justify-self: end;
    }

    .settings-ui-table .settings-row-actions {
        flex-direction: column;
    }

    .settings-ui-table .settings-card-primary {
        order: 1;
        grid-column: 1;
        min-width: 0;
        color: var(--color-text);
        font-size: var(--settings-ui-type-title);
        font-weight: var(--settings-ui-weight-strong);
        line-height: var(--settings-ui-line-heading);
    }

    .settings-ui-table .settings-card-primary .settings-field-value {
        font-weight: inherit;
    }

    .settings-ui-table .settings-card-primary.settings-col-atomic .settings-field-value {
        overflow-wrap: normal;
        white-space: nowrap;
        word-break: normal;
    }

    .settings-preset-defaults-table :is(
        .settings-preset-default-type .settings-field-value,
        .settings-preset-default-default .settings-preset-default-property,
        .settings-preset-default-default .settings-preset-default-property-value,
        .settings-preset-default-scope .settings-field-value,
        .settings-preset-default-scope .settings-field-subvalue
    ) {
        overflow-wrap: anywhere;
        white-space: normal;
        word-break: normal;
    }

    .settings-ui-table .settings-card-secondary {
        order: 3;
        grid-column: 1;
        min-width: 0;
    }

    .settings-ui-table .settings-card-detail {
        order: 4;
        grid-column: 1 / -1;
        min-width: 0;
        padding-top: 0.2rem;
    }

    .settings-ui-table .settings-card-extra {
        display: none !important;
    }

    .settings-ui-table:not(.settings-admin-console-table) tr > td:not(
        .settings-actions-cell,
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail,
        .settings-card-extra
    ) {
        order: 4;
        grid-column: 1 / -1;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .settings-ui-table:not(.settings-admin-console-table) tr > td:first-child:not(
        .settings-actions-cell,
        [data-label="Actions"],
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail,
        .settings-card-extra
    ),
    .settings-ui-table:not(.settings-admin-console-table) tr > .settings-actions-cell + td:not(
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail,
        .settings-card-extra
    ) {
        order: 1;
        grid-column: 1;
        color: var(--color-text);
        font-size: var(--settings-ui-type-title);
        font-weight: var(--settings-ui-weight-strong);
        line-height: var(--settings-ui-line-heading);
    }

    .settings-ui-table:not(.settings-admin-console-table) tr > td:first-child:not(
        .settings-actions-cell,
        [data-label="Actions"],
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail,
        .settings-card-extra
    )::before,
    .settings-ui-table:not(.settings-admin-console-table) tr > .settings-actions-cell + td:not(
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail,
        .settings-card-extra
    )::before {
        display: none;
    }

    .settings-ui-table.settings-permission-matrix {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    .settings-ui-table.settings-permission-matrix thead {
        display: table-header-group;
    }

    .settings-ui-table.settings-permission-matrix tbody {
        display: table-row-group;
    }

    .settings-ui-table.settings-permission-matrix tr {
        display: table-row;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .settings-ui-table.settings-permission-matrix :is(th, td) {
        display: table-cell;
        width: auto;
        min-width: 5rem;
        padding: 0.55rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .settings-ui-table.settings-permission-matrix td::before {
        display: none;
    }

    .settings-permission-matrix-wrap.settings-ui-table-region {
        overflow-x: auto;
        border: 1px solid var(--color-border-muted);
        background: var(--color-surface);
    }

    .settings-section-tabs.settings-ui-tabs-primary {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--settings-ui-space-1);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding: var(--settings-ui-space-1);
    }

    .settings-section-tabs.settings-ui-tabs-primary > button {
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0.55rem;
        border: 1px solid var(--color-border-muted);
        border-radius: var(--settings-ui-radius-sm);
        white-space: nowrap;
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-form-field {
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        align-items: stretch;
        align-self: start;
        gap: 0.45rem;
        height: max-content;
        width: 100%;
        min-height: calc(var(--settings-ui-touch-height) + 3.25rem);
        min-width: 0;
        padding: 0.8rem var(--settings-ui-space-3);
        border: 1px solid var(--color-border-muted);
        border-radius: var(--settings-ui-radius-md);
        background: var(--color-surface);
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-form-field > * {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-form-field > :is(
        input,
        select,
        textarea,
        .password-field,
        .settings-input-suffix
    ),
    body.settings-view #settings_form.settings-ui-editor .password-field input {
        width: 100%;
    }

    body.settings-view #settings_form.settings-ui-editor {
        grid-auto-rows: max-content;
        gap: 0.65rem;
        margin-top: var(--settings-ui-space-3);
        padding: var(--settings-ui-space-3);
        border-left-width: 1px;
        background: var(--color-surface-muted);
    }

    body.settings-view #settings_form.settings-ui-editor > [hidden] {
        display: none;
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-mobile-editor-heading {
        display: grid;
        gap: 0.15rem;
        padding: 0.8rem var(--settings-ui-space-3);
        border: 1px solid var(--color-border-muted);
        border-left: 3px solid var(--settings-ui-accent-settings);
        border-radius: var(--settings-ui-radius-md);
        background: var(--color-surface);
    }

    .settings-mobile-editor-heading > span {
        color: var(--color-text-muted);
        font-size: var(--settings-ui-type-meta);
        font-weight: var(--settings-ui-weight-strong);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .settings-mobile-editor-heading > strong {
        color: var(--color-text);
        font-size: var(--settings-ui-type-title);
        line-height: var(--settings-ui-line-heading);
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-ui-field > label {
        color: var(--color-text-muted);
        font-size: var(--settings-ui-type-helper);
        font-weight: var(--settings-ui-weight-strong);
    }

    body.settings-view #settings_form.settings-ui-editor :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        min-height: var(--settings-ui-touch-height);
        border-radius: var(--settings-ui-radius-sm);
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-form-actions {
        margin: 0;
        padding: var(--settings-ui-space-3);
        border: 1px solid var(--color-border-muted);
        border-radius: var(--settings-ui-radius-md);
        background: var(--color-surface);
    }

    body.settings-view .settings-ui-table.settings-ui-card-list tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        padding: var(--settings-ui-space-4);
        border-left: 3px solid var(--settings-ui-accent-settings);
    }

    body.settings-view .settings-ui-table.settings-ui-card-list .settings-card-primary {
        order: 1;
        grid-column: 1 / -1;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    body.settings-view .settings-ui-table.settings-ui-card-list .settings-card-secondary {
        order: 2;
        grid-column: auto;
    }

    body.settings-view .settings-ui-table.settings-ui-card-list .settings-card-detail {
        order: 3;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-ui-card-list .settings-actions-cell {
        order: 5;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-locations-table .settings-location-hours-cell {
        grid-column: 1 / -1;
        padding: 0.65rem;
        border-radius: var(--settings-ui-radius-sm);
        background: var(--color-surface-muted);
    }

    body.settings-view .settings-ui-table.settings-entity-summary-table .settings-entity-resource-list {
        padding-top: 0.1rem;
    }

    body.settings-view .settings-ui-table.settings-users-table tr {
        grid-template-columns: minmax(0, 1fr);
        border-left: 3px solid var(--settings-ui-accent-settings);
    }

    body.settings-view .settings-ui-table.settings-users-table.settings-ui-table-fit-content {
        min-width: 0;
        table-layout: auto;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-user-cell {
        order: 1;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-contact-cell {
        order: 2;
        grid-column: 1 / -1;
        padding-top: 0;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-presence-cell {
        order: 5;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-authentication-cell {
        order: 4;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-access-cell {
        order: 3;
        grid-column: 1 / -1;
        padding: 0.55rem 0.65rem;
        border-radius: var(--settings-ui-radius-sm);
        background: var(--color-surface-muted);
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-connection-cell {
        order: 6;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-created-cell {
        order: 7;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-actions-cell {
        order: 8;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-table-value-stack {
        gap: 0.2rem;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-status-pill {
        width: max-content;
        margin-top: 0;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-contact-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.15rem 0.85rem;
    }

    body.settings-view .settings-ui-table.settings-users-table .settings-users-status-stack {
        justify-items: start;
    }

    body.settings-view .settings-ui-table.settings-prompts-table tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        padding: 0.8rem;
    }

    body.settings-view .settings-ui-table.settings-prompts-table .settings-card-secondary {
        order: 2;
        grid-column: auto;
    }

    body.settings-view .settings-ui-table.settings-prompts-table .settings-actions-cell {
        order: 5;
        grid-column: 1 / -1;
    }

    body.settings-view .settings-ui-table.settings-prompts-table .settings-row-actions :is(
        .settings-edit,
        .settings-delete-row
    ) {
        flex-basis: 5rem;
        min-width: 5rem;
    }

    .settings-ui-table:not(.settings-permission-matrix) tr {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-actions-cell {
        order: 5;
        grid-row: auto;
        grid-column: 1;
        justify-self: stretch;
        padding-top: var(--settings-ui-space-2);
        border-top: 1px solid var(--color-border-muted);
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-row-actions,
    .settings-ui-table:not(.settings-permission-matrix) .settings-admin-console-row-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

    .settings-air-tool-navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-row-actions :is(
        .settings-edit,
        .settings-delete-row
    ) {
        flex: 1 1 8rem;
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-record-actions > :is(
        button,
        .settings-row-more-actions
    ):not(.is-icon) {
        flex: 1 1 7rem;
        min-width: 0;
        max-width: 9rem;
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-record-actions > button:not(.is-icon),
    .settings-ui-table:not(.settings-permission-matrix) .settings-row-more-actions > summary {
        width: auto;
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-row-more-menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .settings-ui-table:not(.settings-permission-matrix) .settings-row-action-label {
        display: inline;
    }

    .settings-ui-table:not(.settings-permission-matrix) :is(
        .settings-card-primary,
        .settings-card-secondary,
        .settings-card-detail
    ) {
        grid-column: 1;
    }

    body.settings-view #settings_form.settings-ui-editor > .settings-user-devices > :is(
        .settings-user-devices-heading,
        .settings-user-device-table-wrap,
        .settings-field-note
    ) {
        grid-column: 1;
    }

    body.settings-view .settings-user-device-table tr {
        gap: 0.4rem;
        padding: 0.7rem;
        box-shadow: none;
    }

    body.settings-view .settings-user-device-table .settings-card-primary {
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    body.settings-view .settings-user-device-table .settings-user-device-assignee-cell:is(
        .is-unassigned,
        .is-current-user
    ) {
        display: none;
    }

    body.settings-view .settings-user-device-table .settings-card-detail {
        display: flex;
        align-items: baseline;
        order: 2;
        grid-column: 1;
        gap: 0.35rem;
        padding-top: 0;
    }

    body.settings-view .settings-user-device-table .settings-card-detail::before {
        display: inline;
        flex: 0 0 auto;
        margin: 0;
    }

    body.settings-view .settings-user-device-table .settings-user-device-assignee-cell.is-assigned-elsewhere {
        order: 3;
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .settings-ui-page-header,
    .settings-ui-panel-header,
    .settings-ui-panel-body,
    .settings-ui-panel-footer,
    .settings-ui-table tr {
        padding-right: var(--settings-ui-space-3);
        padding-left: var(--settings-ui-space-3);
    }

}

/* Dense operational lists retain columns on narrow screens; details expand separately. */
.settings-ui-table.settings-ui-table--compact { display: table; table-layout: fixed; width: 100%; min-width: 48rem; border-collapse: collapse; }
.settings-ui-table.settings-ui-table--compact thead { display: table-header-group; }
.settings-ui-table.settings-ui-table--compact tbody { display: table-row-group; }
.settings-ui-table.settings-ui-table--compact tr { display: table-row; border: 0; box-shadow: none; }
.settings-ui-table.settings-ui-table--compact tr[hidden] { display: none; }
.settings-ui-table.settings-ui-table--compact :is(th, td) { display: table-cell; padding: .3rem .5rem; height: auto; width: auto; min-width: 0; max-width: none; vertical-align: middle; }
.settings-ui-table.settings-ui-table--compact td::before { display: none; }
.settings-ui-table--compact .settings-compact-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-ui-table.settings-ui-table--compact .settings-ui-button.is-icon { min-height: 2rem; min-width: 2rem; padding: .2rem; }
.settings-ui-table--compact .settings-admin-console-work-detail-row td { white-space: normal; overflow-wrap: anywhere; }
.settings-work-payload { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; }

/* All data tables share theme-aware striping, including stacked customer rows.
 * Exclude selected rows so domain-specific selection remains the stronger signal. */
:where(table) > tbody > tr:nth-child(odd):where(:not(.is-selected, .is-compare-selected, [aria-selected="true"], [data-state="selected"])) {
    background-color: var(--table-row-odd);
}
:where(table) > tbody > tr:nth-child(even):where(:not(.is-selected, .is-compare-selected, [aria-selected="true"], [data-state="selected"])) {
    background-color: var(--table-row-even);
}
:is(.settings-ui-table, .ui-data-table) > tbody > tr:nth-child(odd):where(:not(.is-selected, .is-compare-selected, [aria-selected="true"], [data-state="selected"])) {
    background-color: var(--table-row-odd);
}
:is(.settings-ui-table, .ui-data-table) > tbody > tr:nth-child(even):where(:not(.is-selected, .is-compare-selected, [aria-selected="true"], [data-state="selected"])) {
    background-color: var(--table-row-even);
}
:is(.settings-ui-table, .ui-data-table) > tbody > tr:hover:where(:not(.is-selected, .is-compare-selected, [aria-selected="true"], [data-state="selected"])) {
    background-color: var(--table-row-hover);
}

.settings-ui-table .is-icon .settings-row-action-label { display: none; }



.settings-web-inquiries {
    display: grid;
    gap: var(--settings-ui-space-4, 1rem);
}

.settings-web-inquiries :is(h3, h4, p) {
    margin-top: 0;
}

.settings-web-inquiries h3,
.settings-web-inquiries h4 {
    margin-bottom: 0;
}

.settings-web-inquiries .settings-ui-panel {
    min-width: 0;
}

.settings-web-inquiry-inline-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--settings-ui-radius-sm, 0.7rem);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.settings-web-inquiry-inline-notice .gmi {
    flex: 0 0 auto;
}

.settings-web-inquiry-empty-campaigns {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    padding: clamp(2rem, 6vw, 5rem);
    text-align: center;
}

.settings-web-inquiry-empty-campaigns > .gmi {
    color: var(--color-feature-settings);
    font-size: 2.5rem;
}

.settings-web-inquiry-empty-campaigns p {
    max-width: 38rem;
    margin-bottom: 0.4rem;
    color: var(--color-text-muted);
}

.settings-web-inquiry-campaign-rows {
    display: grid;
    gap: 0.65rem;
}

.settings-web-inquiry-campaign-rows > article {
    display: grid;
    grid-template-columns: minmax(15rem, 1.4fr) minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-campaign-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.settings-web-inquiry-campaign-identity > div {
    min-width: 0;
}

.settings-web-inquiry-campaign-identity h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-web-inquiry-campaign-identity p {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-web-inquiry-campaign-rows dl,
.settings-web-inquiry-campaign-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
}

.settings-web-inquiry-campaign-rows dl div,
.settings-web-inquiry-campaign-summary dl div {
    min-width: 0;
}

.settings-web-inquiry-campaign-rows dt,
.settings-web-inquiry-campaign-summary dt {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-meta);
    font-weight: var(--settings-ui-weight-semibold, 600);
}

.settings-web-inquiry-campaign-rows dd,
.settings-web-inquiry-campaign-summary dd {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    font-weight: var(--settings-ui-weight-semibold, 600);
}

.settings-web-inquiry-campaign-detail {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.settings-web-inquiry-detail-back {
    display: flex;
    justify-content: flex-start;
}

.settings-web-inquiry-campaign-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.settings-web-inquiry-campaign-summary > div {
    min-width: 0;
}

.settings-web-inquiry-campaign-summary h3 {
    margin-top: 0.55rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.settings-web-inquiry-campaign-summary p {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
}

.settings-web-inquiry-campaign-summary dl {
    flex: 0 1 34rem;
}

.settings-web-inquiry-campaign-tabs {
    justify-content: flex-start;
}

.settings-web-inquiry-campaign-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(14rem, 0.8fr);
    gap: 0.85rem;
}

.settings-web-inquiry-campaign-fields > label:not(.settings-web-inquiry-toggle),
.settings-web-inquiry-source,
.settings-web-inquiry-source-create label {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-weight: var(--settings-ui-weight-semibold, 600);
}

.settings-web-inquiry-campaign-fields > label:not(.settings-web-inquiry-toggle) > input,
.settings-web-inquiry-source-create label > :is(input, select) {
    box-sizing: border-box;
    width: 100%;
    height: var(--settings-ui-control-height);
}

.settings-web-inquiries :is(input[type="text"], input[type="search"], input[type="url"], input[type="date"], input:not([type]), select, textarea) {
    min-height: var(--settings-ui-control-height, 2.65rem);
    border: 1px solid var(--button-border);
    border-radius: var(--settings-ui-radius-sm, 0.65rem);
    background: var(--input-bg, var(--color-surface));
    color: var(--color-text);
    padding: 0.55rem 0.7rem;
}

.settings-web-inquiries :is(input, select, textarea):focus {
    border-color: var(--color-feature-settings);
    outline: 2px solid color-mix(in srgb, var(--color-feature-settings) 24%, transparent);
    outline-offset: 1px;
}

.settings-web-inquiry-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 4.4rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
}

.settings-web-inquiry-toggle span {
    display: grid;
    gap: 0.2rem;
}

.settings-web-inquiry-toggle small {
    color: var(--color-text-muted);
    font-weight: 400;
}

.settings-web-inquiry-source textarea {
    width: 100%;
    min-height: 20rem;
    resize: vertical;
    font: 500 0.84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 2;
}

.settings-web-inquiry-mobile-pane-switch {
    display: none;
}

.settings-web-inquiry-content-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-panel, 1rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-editor-pane,
.settings-web-inquiry-preview-pane {
    display: grid;
    grid-template-rows: auto minmax(38rem, 1fr);
    align-content: stretch;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
}

.settings-web-inquiry-editor-pane {
    border-right: 1px solid var(--color-border-subtle);
}

.settings-web-inquiry-pane-heading,
.settings-web-inquiry-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
}

.settings-web-inquiry-pane-heading span,
.settings-web-inquiry-preview-toolbar > div:first-child span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-web-inquiry-pane-heading strong small {
    margin-left: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
    font-weight: 400;
}

.settings-web-inquiry-preview-toolbar > div:first-child {
    display: grid;
    gap: 0.1rem;
}

.settings-web-inquiry-editor-pane textarea {
    width: 100%;
    height: 100%;
    min-height: 38rem;
    resize: vertical;
    font: 500 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 2;
}

.settings-web-inquiry-preview-toolbar .settings-ui-button.active {
    border-color: var(--color-feature-settings);
    background: var(--color-feature-settings-soft);
    color: var(--color-feature-settings);
}

.settings-web-inquiry-preview-stage {
    display: flex;
    justify-content: center;
    height: 100%;
    min-height: 38rem;
    overflow: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.7rem);
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--color-border-subtle) 45%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--color-border-subtle) 45%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-border-subtle) 45%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-border-subtle) 45%, transparent) 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
}

.settings-web-inquiry-preview-stage iframe {
    width: 100%;
    min-height: 38rem;
    border: 0;
    background: #fff;
    transition: width 180ms ease;
}

.settings-web-inquiry-preview-stage[data-preview-size="tablet"] iframe {
    width: min(48rem, 100%);
}

.settings-web-inquiry-preview-stage[data-preview-size="mobile"] iframe {
    width: min(24.375rem, 100%);
}

.settings-web-inquiry-revision-list,
.settings-web-inquiry-link-list {
    display: grid;
    gap: 0.6rem;
}

.settings-web-inquiry-revision-list article,
.settings-web-inquiry-qr-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-revision-list article {
    justify-content: space-between;
}

.settings-web-inquiry-revision-list article > div {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.settings-web-inquiry-revision-list article > div > div,
.settings-web-inquiry-qr-details {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.settings-web-inquiry-revision-list small,
.settings-web-inquiry-link-list small {
    color: var(--color-text-muted);
}

.settings-web-inquiry-source-create {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-qr-create-grid {
    display: grid;
    grid-template-columns: minmax(13rem, 1.05fr) minmax(11rem, 0.7fr) minmax(18rem, 1.4fr) minmax(9rem, 0.65fr) minmax(10rem, 0.75fr);
    gap: 0.75rem;
}

.settings-web-inquiry-qr-create-grid label small {
    color: var(--color-text-muted);
    font-weight: 400;
}

.settings-web-inquiry-source-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-web-inquiry-source-create-actions p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-web-inquiry-qr-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(12rem, 1fr) auto;
}

.settings-web-inquiry-qr-card.is-deleted {
    grid-template-columns: minmax(12rem, 1fr) auto;
    opacity: 0.78;
}

.settings-web-inquiry-qr-preview {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    width: 7.5rem;
    min-height: 7.5rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.65rem);
    background: #fff;
    color: var(--color-text-muted);
    text-align: center;
}

.settings-web-inquiry-qr-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.settings-web-inquiry-qr-preview .gmi {
    font-size: 2rem;
}

.settings-web-inquiry-qr-loading {
    opacity: 0.55;
}

.settings-web-inquiry-qr-details > strong {
    font-size: var(--settings-ui-type-section);
}

.settings-web-inquiry-link-list code {
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.settings-web-inquiry-qr-actions {
    max-width: 24rem;
}

.settings-web-inquiry-source-edit {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(13rem, 1fr) minmax(11rem, 0.7fr) minmax(18rem, 1.4fr) minmax(9rem, 0.65fr) minmax(10rem, 0.75fr);
    gap: 0.75rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border-subtle);
}

.settings-web-inquiry-source-edit-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-web-inquiry-source-edit-actions small {
    max-width: 54rem;
}

.settings-web-inquiry-engagement-filters {
    display: grid;
    grid-template-columns: minmax(8rem, 0.7fr) minmax(10rem, 0.8fr) minmax(10rem, 0.8fr) minmax(14rem, 1.25fr) auto;
    align-items: end;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-engagement-filters label {
    display: grid;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-weight: var(--settings-ui-weight-semibold, 600);
}

.settings-web-inquiry-source-breakdown {
    display: grid;
    gap: 0.65rem;
}

.settings-web-inquiry-source-breakdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-web-inquiry-source-breakdown-heading span {
    color: var(--color-text-muted);
    font-size: var(--settings-ui-type-helper);
}

.settings-web-inquiry-source-table :is(th, td):not(:first-child) {
    width: 10rem;
    text-align: right;
}
.settings-web-inquiry-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.settings-web-inquiry-execution,
.settings-web-inquiry-readiness {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border-radius: var(--settings-ui-radius-sm, 0.75rem);
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-execution > div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.settings-web-inquiry-execution small,
.settings-web-inquiry-readiness {
    color: var(--color-text-muted);
}

.settings-web-inquiry-execution .settings-status-pill {
    margin-left: auto;
}

.settings-web-inquiry-review-heading {
    align-items: center;
}

.settings-web-inquiry-filters {
    display: grid;
    grid-template-columns: minmax(15rem, 2fr) minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}

.settings-web-inquiry-filters input {
    width: 100%;
}

.settings-web-inquiry-filter-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--settings-ui-space-3);
    padding: var(--settings-ui-space-3) var(--settings-ui-space-4);
    border: 1px solid color-mix(in srgb, var(--color-feature-settings) 30%, var(--color-border));
    border-radius: var(--settings-ui-radius-panel);
    background: var(--color-feature-settings-soft);
}

.settings-web-inquiry-count-link,
.settings-web-inquiry-campaign-filter-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-feature-settings);
    font: inherit;
    font-weight: var(--settings-ui-weight-semibold, 600);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.settings-web-inquiry-count-link:hover,
.settings-web-inquiry-count-link:focus-visible,
.settings-web-inquiry-campaign-filter-link:hover,
.settings-web-inquiry-campaign-filter-link:focus-visible {
    color: var(--color-text);
}

.settings-web-inquiry-cell-stack {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.settings-web-inquiry-cell-stack :is(a, small) {
    overflow-wrap: anywhere;
}

.settings-web-inquiry-cell-stack small,
.settings-web-inquiry-visits-heading span {
    color: var(--color-text-muted);
}

.settings-web-inquiry-row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-web-inquiry-visits-row > td {
    padding: 0;
    background: var(--color-surface-subtle);
}

.settings-web-inquiry-visits {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
}

.settings-web-inquiry-visits-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-web-inquiry-visit-table {
    background: var(--color-surface);
}

.settings-web-inquiry-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

@media (max-width: 1100px) {
    .settings-web-inquiry-campaign-rows > article {
        grid-template-columns: 1fr auto;
    }

    .settings-web-inquiry-campaign-rows dl {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .settings-web-inquiry-content-workspace {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-mobile-pane-switch {
        display: flex;
    }

    .settings-web-inquiry-content-workspace > section {
        display: none;
    }

    .settings-web-inquiry-content-workspace[data-content-pane="editor"] > .settings-web-inquiry-editor-pane,
    .settings-web-inquiry-content-workspace[data-content-pane="preview"] > .settings-web-inquiry-preview-pane {
        display: grid;
    }

    .settings-web-inquiry-editor-pane {
        border-right: 0;
    }

    .settings-web-inquiry-qr-create-grid,
    .settings-web-inquiry-source-edit,
    .settings-web-inquiry-engagement-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-web-inquiry-engagement-filters > .settings-ui-button {
        justify-self: start;
    }

    .settings-web-inquiry-qr-card {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .settings-web-inquiry-qr-actions {
        grid-column: 2;
    }
}

@media (max-width: 820px) {
    .settings-web-inquiry-campaign-fields,
    .settings-web-inquiry-config-grid {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-campaign-summary,
    .settings-web-inquiry-revision-list article,
    .settings-web-inquiry-review-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-web-inquiry-filter-context {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-web-inquiry-campaign-summary dl {
        width: 100%;
    }

    .settings-web-inquiry-revision-list article > .settings-ui-button,
    .settings-web-inquiry-qr-actions {
        justify-content: flex-start;
    }

    .settings-web-inquiry-filters,
    .settings-web-inquiry-filters :is(input, select, button) {
        width: 100%;
    }

    .settings-web-inquiry-filters {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .settings-web-inquiry-status-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-web-inquiry-qr-create-grid,
    .settings-web-inquiry-source-edit,
    .settings-web-inquiry-engagement-filters {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-qr-actions {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .settings-web-inquiry-campaign-rows > article {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-campaign-row-actions,
    .settings-web-inquiry-campaign-row-actions > .settings-ui-button {
        width: 100%;
    }

    .settings-web-inquiry-campaign-rows dl,
    .settings-web-inquiry-campaign-summary dl {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-campaign-identity {
        flex-direction: column;
    }

    .settings-web-inquiry-actions,
    .settings-web-inquiry-actions .settings-ui-button {
        width: 100%;
    }

    .settings-web-inquiry-execution {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .settings-web-inquiry-execution .settings-status-pill {
        margin-left: 0;
    }

    .settings-web-inquiry-pane-heading,
    .settings-web-inquiry-preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-web-inquiry-editor-pane textarea,
    .settings-web-inquiry-preview-stage,
    .settings-web-inquiry-preview-stage iframe {
        min-height: 30rem;
    }

    .settings-web-inquiry-editor-pane,
    .settings-web-inquiry-preview-pane {
        grid-template-rows: auto minmax(30rem, 1fr);
    }

    .settings-web-inquiry-qr-card {
        grid-template-columns: 1fr;
    }

    .settings-web-inquiry-qr-preview {
        width: min(10rem, 100%);
    }

    .settings-web-inquiry-qr-actions {
        grid-column: 1;
    }

    .settings-web-inquiry-source-create-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-web-inquiry-source-edit-actions,
    .settings-web-inquiry-visits-heading {
        align-items: stretch;
        flex-direction: column;
    }

}



.sidebar {
    user-select: none;
    display: none;
    width: 300px;
    top: 100%;
    position: absolute;
    border-radius: 0 0 0.5rem 0.5rem;
    border: 1px solid #d9e3ef;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-text);
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 2;
    box-shadow: var(--elevation-popover);
    backdrop-filter: blur(14px);
}

.sticky-header > .sidebar {
    z-index: 20;
}

.sidebar>.menuitems {
    width: 100%;
    max-width: none;
    min-width: 0;
    display: flex;
    padding: 0.58rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.18rem;
    margin: 0 auto;
}

#dialpad.sidebar .dial:focus-visible {
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

#dialpad.sidebar .dial:active {
    transform: translateY(0);
}

.sidebar form {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    width: 100%;
}

.sidebar fieldset {
    gap: var(--workspace-popover-section-gap);
    align-items: stretch;
    border: 1px solid #d9e3ef;
    border-radius: var(--workspace-popover-section-radius);
    background: var(--workspace-popover-section-background);
    padding: var(--workspace-popover-section-padding);
}

.sidebar legend {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar .group {
    gap: 0.3rem;
}

.sidebar .group > .label {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1.12;
}

.sidebar label {
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 720;
    line-height: 1.22;
}

.sidebar select,
.sidebar input:not([type="checkbox" i]):not([type="radio" i]),
.sidebar textarea {
    min-height: 2.25rem;
    border: 1px solid #d9e3ef;
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--color-text);
    font-size: var(--ui-type-control);
}

.sidebar input[type="checkbox" i],
.sidebar input[type="radio" i] {
    accent-color: var(--color-feature-settings);
}

.sidebar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border: 1px solid var(--theme-emphasis-border);
    border-radius: 0.5rem;
    background: var(--theme-emphasis-background);
    color: var(--theme-emphasis-color);
    padding: 0.45rem 0.72rem;
    font-size: var(--ui-type-control);
    font-weight: 900;
    box-shadow: inset 0 3px var(--color-theme-accent), var(--theme-emphasis-shadow);
}

.sidebar .button:hover,
.sidebar .button:focus-visible {
    filter: brightness(1.02);
}

#search_filters.sidebar,
#ringer_settings.sidebar {
    padding: 0;
    gap: 0;
}

#search_filters.sidebar #search_filters_form,
#ringer_settings.sidebar #ringer_settings_form {
    gap: 0;
    max-width: none;
}

#ringer_settings.sidebar #ringer_settings_form { gap: var(--workspace-popover-section-gap); }

#search_filters.sidebar .group > .label,
#ringer_settings.sidebar .group > .label {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1.12;
}

#search_filters.sidebar legend,
#ringer_settings.sidebar legend {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 725px) {
    #ringer_settings.sidebar {
        position: fixed;
        z-index: 1200;
        top: auto !important;
        right: 0.5rem;
        bottom: calc(4.65rem + env(safe-area-inset-bottom, 0px));
        left: 0.5rem !important;
        width: auto !important;
        max-height: min(76dvh, 42rem);
        border-radius: var(--workspace-popover-radius);
        transform: none !important;
        box-shadow: var(--shadow-modal);
    }
}

#dialpad.sidebar {
    gap: 0.42rem;
    padding: 0.72rem;
}

#dialpad.sidebar .dial {
    min-height: 2.55rem;
    border: 1px solid rgba(146, 174, 214, 0.24);
    border-radius: 0.58rem;
    background: var(--surface-panel-soft-control-bg);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    padding: 0.55rem;
    font-size: 1.1rem;
    font-weight: 850;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
        box-shadow 140ms ease, transform 140ms ease;
}

#dialpad.sidebar .dial:hover,
#dialpad.sidebar .dial:focus-visible {
    border-color: var(--button-hover-border);
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

#dialpad.sidebar .dial.clear {
    color: #b42318;
}

#dialpad.sidebar .dial.okay {
    color: #166534;
}

#dialpad.sidebar .dial.back {
    color: #b45309;
}



@media (max-width: 400px) {
    /* .sidebar {
        width: 100%;
    }

    .sticky-header > .sidebar {
        left: 0;
        transform: none;
    } */
}



.summary-page-inline {
    --daily-summary-card-radius: 0.9rem;
    --daily-summary-section-title-size: var(--ui-type-title);
    --daily-summary-section-copy-size: var(--ui-type-body);
    display: block;
    min-width: 0;
    gap: var(--app-content-section-gap);
    color: var(--color-text);
    font-size: var(--ui-type-body);
    container-type: inline-size;
}

.summary-ai-panel {
    display: grid;
    min-width: 0;
    gap: var(--app-content-section-gap);
}

.daily-summary-report-list {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    gap: var(--app-content-section-gap);
}

.daily-summary-report-column {
    display: grid;
    min-width: 0;
    width: 100%;
    max-width: none;
    gap: var(--app-content-section-gap);
}

.summary-insights-empty-state,
.report-chart-empty {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg, 0.72rem);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    padding: 1rem;
    font-size: var(--ui-type-control);
}

.summary-insights-separator {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border-muted);
}

.daily-summary-report-card {
    min-width: 0;
    border: 1px solid var(--surface-panel-border);
    border-radius: var(--daily-summary-card-radius);
    background: var(--surface-panel-bg);
    box-shadow: var(--shadow-card, var(--shadow-sm));
}

.daily-summary-report-card {
    overflow: hidden;
}

.daily-summary-report-card > .ui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border-muted);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-feature-summary-soft) 78%, transparent), transparent 48%),
        var(--color-surface-subtle);
    padding: 0.9rem 1rem;
}

.daily-summary-report-card > .ui-section-header .ui-section-heading-icon {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-feature-summary) 28%, var(--color-border));
    border-radius: 0.72rem;
    background: var(--color-feature-summary-soft);
    color: var(--color-feature-summary);
    font-size: 1.2rem;
}

.daily-summary-report-card > .ui-section-header h2 {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--ui-type-title);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-summary-report-card > .ui-section-header p {
    color: var(--color-text-muted);
    font-size: var(--ui-type-control);
    font-weight: 700;
}

.daily-summary-report-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.38rem;
}

.summary-email-preview-button {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.62rem;
    background: var(--color-surface-elevated);
    color: var(--color-brand-active);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.summary-email-preview-button:hover,
.summary-email-preview-button:focus-visible {
    border-color: var(--color-border-strong);
    background: var(--button-hover-bg);
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.summary-email-preview-button .material-symbols-rounded {
    font-size: 1.15rem;
}

.daily-summary-report-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.58rem;
    margin: 0.9rem 1rem 0;
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, var(--color-border-muted));
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--color-brand-soft) 42%, var(--color-surface));
    padding: 0.78rem 0.86rem;
}

.daily-summary-report-overview > .gmi {
    color: var(--color-brand-active);
    font-size: 1.05rem;
}

.daily-summary-report-overview p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--daily-summary-section-copy-size);
    line-height: 1.5;
}

.daily-summary-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0.72rem;
    padding: 0.9rem 1rem 1rem;
}

.daily-summary-insight-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.72rem;
    background: var(--color-surface-elevated);
}

.daily-summary-insight-card > .ui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.72rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-surface-subtle);
    padding: 0.58rem 0.72rem;
}

.daily-summary-insight-card > .ui-section-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--daily-summary-section-title-size);
    font-weight: 900;
}

.daily-summary-insight-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.55rem;
    min-height: 1.55rem;
    border-radius: 999px;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    font-size: var(--ui-type-badge);
    font-weight: 900;
}

.summary-insights-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.summary-insights-item {
    display: grid;
    gap: 0.4rem;
    border-bottom: 1px solid var(--color-border-muted);
    color: var(--color-text);
    padding: 0.68rem;
    font-size: var(--daily-summary-section-copy-size);
    line-height: 1.45;
}

.summary-insights-item:last-child {
    border-bottom: 0;
}

.summary-insights-empty {
    color: var(--color-text-subtle);
    padding: 0.72rem;
    font-size: var(--ui-type-control);
}

.summary-insights-call-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.summary-insights-call-pill {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    min-height: 1.9rem;
    border: 1px solid color-mix(in srgb, var(--color-feature-calls) 26%, var(--color-border));
    border-radius: 999px;
    background: var(--color-feature-calls-soft);
    color: var(--color-feature-calls);
    padding: 0.12rem 0.38rem;
    font: inherit;
    font-size: var(--ui-type-meta);
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 980px) {
    .daily-summary-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .daily-summary-report-card > .ui-section-header {
        align-items: start;
    }

    .daily-summary-report-card > .ui-section-header {
        padding: 0.78rem;
    }

    .daily-summary-report-overview {
        margin: 0.72rem 0.72rem 0;
    }

    .daily-summary-insight-grid {
        padding: 0.72rem;
    }

}



/* Standalone authentication screen; shared palette and native form semantics. */
.terms-page {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--palette-brand-base-soft);
    color: var(--palette-brand-base);
    font: 16px/1.65 var(--font-family-ui, system-ui, sans-serif);
}
.terms-page *, .terms-page *::before, .terms-page *::after { box-sizing: border-box; }
.terms-page a { color: var(--palette-brand-primary-active); text-underline-offset: .2em; }
.terms-page :focus-visible { outline: 3px solid var(--palette-brand-primary); outline-offset: 4px; }
.terms-skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 3; padding: .5rem 1rem; background: white; transform: translateY(-200%); }
.terms-skip-link:focus { transform: none; }
.terms-header { flex: none; z-index: 1; border-bottom: 1px solid var(--palette-brand-base-border); background: white; }
.terms-header-inner { max-width: 76rem; margin: auto; padding: .5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.terms-logo { display: block; width: 10.875rem; height: 4.5rem; object-fit: contain; }
.terms-header-title { text-align: right; }
.terms-header-title strong, .terms-header-title span { display: block; }
.terms-header-title span { font-size: .8125rem; }
.terms-scroll-region { flex: 1; min-height: 0; overflow-y: auto; scroll-padding-block: 1rem; }
.terms-content { max-width: 76rem; margin: auto; padding: 2rem; }
.terms-preview { margin-bottom: 1rem; padding: 1rem 1.25rem; color: var(--admin-nav-active-text, var(--palette-brand-base)); background: var(--admin-nav-active-bg, var(--palette-brand-accent-soft)); border: 1px solid var(--admin-nav-border, var(--palette-brand-accent-border)); border-left: 4px solid var(--admin-nav-accent, var(--palette-brand-accent)); border-radius: .75rem; }
.terms-preview p, .terms-emergency p { margin: .25rem 0 0; }
.terms-introduction { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.75rem 2rem; border-radius: 1rem; background: var(--palette-brand-base); color: white; border-top: 4px solid var(--palette-brand-accent); }
.terms-introduction-copy { max-width: 47rem; }
.terms-eyebrow { margin: 0 0 .5rem; color: var(--palette-brand-accent); font-size: .8125rem; font-weight: 700; }
.terms-introduction h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.terms-introduction-copy > p:not(.terms-eyebrow) { margin: .875rem 0 0; }
.terms-introduction-detail { font-size: .875rem; }
.terms-effective { flex: 0 0 12rem; margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--palette-brand-base-hover); font-size: .875rem; }
.terms-effective span, .terms-effective strong { display: block; }
.terms-effective span { margin-bottom: .25rem; color: var(--palette-brand-accent); }
.terms-emergency { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--palette-brand-accent-soft); border: 1px solid var(--palette-brand-accent-border); border-radius: .75rem; font-size: .875rem; }
.terms-document { padding: 2rem 2.5rem; background: white; border: 1px solid var(--palette-brand-base-border); border-radius: 1rem; overflow-wrap: anywhere; }
.terms-document > :first-child { margin-top: 0; }
.terms-document > :last-child { margin-bottom: 0; }
.terms-document h1 { font-size: 1.875rem; line-height: 1.25; }
.terms-document h2 { margin-top: 2rem; font-size: 1.375rem; line-height: 1.35; }
.terms-document h3 { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.4; }
.terms-document li + li { margin-top: .4rem; }
.terms-document pre { white-space: pre-wrap; font: inherit; }
.terms-document blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 3px solid var(--palette-brand-base-border); }
.terms-footer { flex: none; z-index: 1; padding: 1rem 2rem max(1rem, env(safe-area-inset-bottom)); background: white; border-top: 3px solid var(--palette-brand-primary); box-shadow: 0 -4px 18px rgb(16 28 46 / 8%); }
.terms-acceptance-form { max-width: 72rem; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .875rem 1.5rem; }
.terms-agreement-choice { display: flex; align-items: flex-start; gap: .75rem; flex: 1 1 25rem; cursor: pointer; }
.terms-agreement-choice input { flex: none; margin: .3rem 0 0; width: 1.25rem; height: 1.25rem; accent-color: var(--palette-brand-primary-active); }
.terms-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
.terms-actions a { font-size: .875rem; }
.terms-actions button { padding: .75rem 1.25rem; min-height: 44px; border: 1px solid var(--palette-brand-primary-active); border-radius: .5rem; background: var(--palette-brand-primary-active); color: white; font: inherit; font-weight: 600; cursor: pointer; }
.terms-actions button:hover { background: var(--palette-brand-primary-hover); }
.terms-actions button:disabled { opacity: .55; cursor: default; }
.terms-error { flex: 0 0 100%; margin: 0; color: var(--color-danger, #9d1823); }
@media (max-width: 700px) {
    .terms-header-inner { padding: .25rem 1rem; }
    .terms-logo { width: 8rem; height: 3.375rem; }
    .terms-header-title { font-size: .875rem; }
    .terms-header-title span { font-size: .75rem; }
    .terms-content { padding: 1rem; }
    .terms-introduction { display: block; padding: 1.25rem; }
    .terms-effective { margin-top: 1rem; padding: .75rem 0 0; border-left: 0; border-top: 1px solid var(--palette-brand-base-hover); }
    .terms-document { padding: 1.25rem; }
    .terms-footer { padding: .875rem 1rem max(.875rem, env(safe-area-inset-bottom)); }
    .terms-agreement-choice { font-size: .875rem; flex-basis: 100%; }
    .terms-actions { width: 100%; justify-content: space-between; gap: .75rem; }
    .terms-actions button { padding: .625rem .875rem; font-size: .875rem; }
}



/*
 * Appearance themes
 *
 * Palette values live in _theme_tokens.css. This file owns only component
 * presentation for the browser-persisted appearance choice.
 */

.appearance-theme-popover {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.48rem);
    right: 0;
    width: min(19rem, calc(100vw - 1.5rem));
    max-height: min(80dvh, 42rem);
    overflow-y: auto;
    padding: 0.72rem;
    border: 1px solid var(--surface-panel-border);
    border-radius: 0.78rem;
    background: var(--surface-panel-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
}

.appearance-theme-popover[hidden] {
    display: none !important;
}

.appearance-theme-popover-heading {
    display: grid;
    gap: 0.18rem;
    padding: 0.12rem 0.18rem 0.62rem;
}

.appearance-theme-popover-heading strong {
    font-size: var(--ui-type-title);
    font-weight: 900;
}

.appearance-theme-popover-heading small,
.appearance-theme-option small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    line-height: 1.35;
}

.appearance-theme-options {
    display: grid;
    gap: 0.38rem;
}

.appearance-effect-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    min-height: 3rem;
    margin-top: 0.62rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.64rem;
    background: var(--surface-panel-soft-control-bg);
    padding: 0.5rem 0.58rem;
    cursor: pointer;
}

.appearance-effect-option:hover,
.appearance-effect-option:focus-within {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.appearance-effect-option.is-enabled {
    border-color: color-mix(in srgb, var(--color-theme-accent) 46%, var(--color-border));
}

.appearance-effect-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.appearance-effect-option > .gmi {
    color: var(--color-theme-accent-active);
    font-size: 1.25rem;
}

.appearance-effect-option > span:nth-of-type(2) {
    display: grid;
    gap: 0.06rem;
}

.appearance-effect-option strong {
    font-size: var(--ui-type-control);
}

.appearance-effect-option small {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    line-height: 1.25;
}

.appearance-effect-toggle {
    position: relative;
    width: 2.15rem;
    height: 1.2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-border-muted);
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.appearance-effect-toggle::after {
    content: "";
    position: absolute;
    top: 0.13rem;
    left: 0.14rem;
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    transition: transform 0.16s ease;
}

.appearance-effect-option > input:checked ~ .appearance-effect-toggle {
    border-color: var(--color-theme-accent-active);
    background: var(--color-theme-accent);
}

.appearance-effect-option > input:checked ~ .appearance-effect-toggle::after {
    transform: translateX(0.94rem);
}

.appearance-theme-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.62rem;
    align-items: center;
    min-height: 3.2rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.64rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 84%, transparent);
    cursor: pointer;
}

.appearance-theme-option:hover,
.appearance-theme-option:focus-within {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.appearance-theme-option.is-selected {
    border-color: color-mix(in srgb, var(--color-theme-accent) 56%, var(--color-border));
    background: var(--color-theme-accent-soft);
}

.appearance-theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.appearance-theme-option > span:nth-of-type(2) {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.appearance-theme-option strong {
    font-size: var(--ui-type-control);
    font-weight: 900;
}

.appearance-theme-check {
    color: var(--color-theme-accent-active);
    font-size: 1rem;
    opacity: 0;
}

.appearance-theme-option.is-selected .appearance-theme-check {
    opacity: 1;
}

.appearance-theme-swatch {
    --appearance-preview-surface: var(--color-surface);
    --appearance-preview-base: var(--color-theme-base);
    --appearance-preview-accent: var(--color-theme-accent);
    --appearance-preview-soft: var(--color-theme-base-soft);

    width: 2.1rem;
    height: 2.1rem;
    border: 2px solid color-mix(in srgb, #ffffff 82%, transparent);
    border-radius: 0.58rem;
    background: linear-gradient(
        135deg,
        var(--appearance-preview-surface) 0 32%,
        var(--appearance-preview-base) 32% 64%,
        var(--appearance-preview-accent) 64% 82%,
        var(--appearance-preview-soft) 82%
    );
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 72%, transparent);
}

.appearance-theme-swatch-boutique {
    --appearance-preview-surface: #fffdf9;
    --appearance-preview-base: var(--palette-boutique-base);
    --appearance-preview-accent: var(--palette-boutique-accent);
    --appearance-preview-soft: var(--palette-boutique-base-soft);
}

.appearance-theme-swatch-modern {
    --appearance-preview-surface: #ffffff;
    --appearance-preview-base: var(--palette-modern-base);
    --appearance-preview-accent: var(--palette-modern-accent);
    --appearance-preview-soft: var(--palette-modern-base-soft);
}

.appearance-theme-swatch-cleanline {
    --appearance-preview-surface: #fbfefe;
    --appearance-preview-base: var(--palette-cleanline-base);
    --appearance-preview-accent: var(--palette-cleanline-accent);
    --appearance-preview-soft: var(--palette-cleanline-base-soft);
}

.appearance-theme-swatch-brand {
    --appearance-preview-surface: #f8fafc;
    --appearance-preview-base: var(--palette-brand-base);
    --appearance-preview-accent: var(--palette-brand-accent);
    --appearance-preview-soft: var(--palette-brand-primary-soft);
    background: linear-gradient(
        135deg,
        var(--appearance-preview-surface) 0 26%,
        var(--appearance-preview-base) 26% 51%,
        var(--palette-brand-primary) 51% 71%,
        var(--appearance-preview-accent) 71% 85%,
        var(--appearance-preview-soft) 85%
    );
}

@media (max-width: 760px) {
    .appearance-theme-popover {
        top: 0;
        right: calc(100% + 0.42rem);
    }
}

html.app-theme-cleanline body,
html.app-theme-cleanline main.content {
    background-color: var(--color-bg);
}

:is(html.app-theme-boutique, html.app-theme-brand) body,
:is(html.app-theme-boutique, html.app-theme-brand) main.content {
    background-color: var(--color-bg);
}

:is(html.app-theme-boutique, html.app-theme-brand) .sticky-header {
    box-shadow: var(--elevation-sticky-header);
}

/* Brand Preview paints structural chrome from one viewport-anchored gradient.
 * Separate header, logo, and navigation elements therefore meet as a single
 * dark-navy surface in the upper-left instead of restarting as visible tiles. */
html.app-theme-brand .sticky-header,
html.app-theme-brand .app-brand-slot,
html.app-theme-brand body.workspace-shell-view > .workspace-module-navigation,
html.app-theme-brand body.workspace-shell-view .workspace-module-list.is-expanded,
html.app-theme-brand body.workspace-shell-view.workspace-navigation-overlay-open > .workspace-module-navigation {
    border-color: transparent;
    background-color: var(--palette-brand-base);
    background-image: linear-gradient(
        125deg,
        var(--palette-brand-base) 0%,
        var(--palette-brand-base) 9%,
        var(--palette-brand-primary) 100%
    );
    background-attachment: fixed;
    background-position: top left;
    background-size: 100vw 100vh;
}

html.app-theme-brand body.workspace-shell-view .workspace-module-list {
    border-color: transparent;
    background: transparent;
}

:is(html.app-theme-boutique, html.app-theme-brand) .sticky-footer {
    border-top-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface-muted) 95%, transparent);
    box-shadow: var(--elevation-sticky-footer);
}

:is(html.app-theme-boutique, html.app-theme-brand) .page-controls-wrapper {
    border-bottom-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

:is(html.app-theme-boutique, html.app-theme-brand) .sidebar {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: var(--elevation-popover);
}

:is(html.app-theme-boutique, html.app-theme-brand) .sidebar fieldset {
    border-color: color-mix(in srgb, var(--color-border-strong) 38%, transparent);
    background: color-mix(in srgb, var(--color-surface-muted) 86%, transparent);
}

:is(html.app-theme-boutique, html.app-theme-brand) .sidebar select,
:is(html.app-theme-boutique, html.app-theme-brand) .sidebar input:not([type="checkbox" i]):not([type="radio" i]),
:is(html.app-theme-boutique, html.app-theme-brand) .sidebar textarea {
    border-color: var(--color-border);
    background: var(--color-surface-elevated);
}

:is(html.app-theme-boutique, html.app-theme-brand) .comm-card,
:is(html.app-theme-boutique, html.app-theme-brand) .contact {
    border-color: var(--color-border);
}

:is(html.app-theme-boutique, html.app-theme-brand) .comm-card:not(.active-call):hover,
:is(html.app-theme-boutique, html.app-theme-brand) .contact:hover {
    border-color: var(--color-border-strong);
}

:is(html.app-theme-modern, html.app-theme-boutique, html.app-theme-cleanline, html.app-theme-brand) .phonecall.comm-card {
    background: var(--color-surface);
}

:is(html.app-theme-modern, html.app-theme-boutique, html.app-theme-cleanline, html.app-theme-brand) .phonecall.comm-card.outgoing {
    background: var(--color-surface);
}

:is(html.app-theme-modern, html.app-theme-boutique, html.app-theme-cleanline, html.app-theme-brand) .txtmsg.comm-card-message {
    background: var(--color-surface);
}

:is(html.app-theme-modern, html.app-theme-boutique, html.app-theme-cleanline, html.app-theme-brand) .txtmsg.comm-card-message.outgoing {
    background: var(--color-surface);
}

:is(html.app-theme-boutique, html.app-theme-brand) .comm-card-top,
:is(html.app-theme-boutique, html.app-theme-brand) .comm-account-row {
    background-color: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

:is(html.app-theme-boutique, html.app-theme-brand) .contact {
    background: var(--color-surface);
}

:is(html.app-theme-boutique, html.app-theme-brand) .contact-name-text {
    color: var(--color-text);
}

:is(html.app-theme-boutique, html.app-theme-brand) .contact-action-button {
    border-color: color-mix(in srgb, var(--color-theme-accent) 28%, transparent);
    background: color-mix(in srgb, var(--color-surface-elevated) 88%, transparent);
    color: var(--color-theme-accent-active);
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-stream-active {
    border-color: var(--color-call-active-border);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--color-call-active-soft) 95%, transparent) 0%,
        color-mix(in srgb, var(--color-surface-elevated) 88%, transparent) 100%
    );
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-stream-heading,
:is(html.app-theme-boutique, html.app-theme-brand) .account-active-call-empty {
    color: var(--color-text-muted);
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-stream-live-dot {
    background: var(--color-call-active);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-call-active) 14%, transparent);
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-stream-count {
    border-color: var(--color-call-active-border);
    background: var(--color-surface-elevated);
    color: var(--color-call-active);
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-state-badge.active {
    border-color: var(--color-call-active-border);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-call-active) 82%, #000000) 0%,
        var(--color-call-active) 100%
    );
}

:is(html.app-theme-boutique, html.app-theme-brand) .call-state-badge.ringing {
    border-color: var(--color-call-ringing-border);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-call-ringing) 82%, #000000) 0%,
        var(--color-call-ringing) 100%
    );
    color: var(--color-text-inverse);
}

.workspace-pull-refresh:not([hidden]) { position: fixed; top: max(1rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10000; padding: .65rem 1rem; border: 1px solid var(--color-border-muted); border-radius: 2rem; background: var(--color-surface-elevated); color: var(--color-text); box-shadow: var(--shadow-modal); pointer-events: none; font-size: .875rem; }



/* Theme-aware Vue Sonner notifications. Component layout stays owned by Sonner. */
[data-sonner-toaster].pbx-toasts {
    --width: min(34rem, calc(100vw - 1.5rem));
    z-index: 12000;
    font-family: var(--font-family-ui);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast].pbx-toast {
    --normal-bg: color-mix(in srgb, var(--color-surface-elevated) 94%, transparent);
    --normal-border: var(--color-border-muted);
    --normal-text: var(--color-text);
    --success-bg: var(--color-success-soft);
    --success-border: var(--color-success-border);
    --success-text: var(--color-success-text);
    --info-bg: var(--color-info-soft);
    --info-border: var(--color-info-border);
    --info-text: var(--color-info-text);
    --warning-bg: var(--color-warning-soft);
    --warning-border: var(--color-warning-border);
    --warning-text: var(--color-warning-text);
    --error-bg: var(--color-danger-soft);
    --error-border: var(--color-danger-border);
    --error-text: var(--color-danger-text);
    min-height: 3.55rem;
    border-width: 1px 1px 1px 0.3rem;
    border-radius: var(--radius-lg, 0.72rem);
    padding: 0.72rem 0.86rem;
    color: var(--color-text);
    font-size: var(--ui-type-body);
    font-weight: 780;
    line-height: 1.38;
    box-shadow: 0 0.9rem 2.25rem rgba(15, 23, 42, 0.24), var(--shadow-panel);
    backdrop-filter: saturate(130%) blur(0.75rem);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast].pbx-toast [data-title] {
    font-weight: 900;
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast][data-type="success"] {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast][data-type="info"] {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast][data-type="warning"] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast][data-type="error"] {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

[data-sonner-toaster].pbx-toasts [data-sonner-toast][data-type="loading"] {
    border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-border-muted));
    background: color-mix(in srgb, var(--color-brand-soft) 36%, var(--color-surface-elevated));
    color: var(--color-text);
}

[data-sonner-toaster].pbx-toasts [data-icon] {
    color: currentColor;
}

[data-sonner-toaster].pbx-toasts [data-close-button] {
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    background: var(--color-surface-elevated);
    color: currentColor;
}

[data-sonner-toaster].pbx-toasts .pbx-toast__description {
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-size: var(--ui-type-meta);
}

@media (min-width: 641px) {
    body:is(
        [data-app-view="phone"],
        [data-app-view="contacts"],
        [data-app-view="conversation"],
        [data-app-view="texts"]
    ) [data-sonner-toaster].pbx-toasts[data-x-position="right"] {
        right: max(1rem, calc(50vw - 499px - 35rem)) !important;
    }
}

@media (max-width: 640px) {
    [data-sonner-toaster].pbx-toasts {
        --width: calc(100vw - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-sonner-toaster].pbx-toasts [data-sonner-toast] {
        transition-duration: 1ms !important;
    }
}



/* Shared interactive primitives used by both Vue views and legacy-rendered forms. */
:root {
    --ui-control-min-height: 2.65rem;
    --ui-control-radius: var(--radius-md, 0.56rem);
    --ui-control-padding-inline: 0.72rem;
    --ui-control-compact-height: 2rem;
    --ui-icon-control-width: 2.8rem;
    --ui-icon-control-height: var(--ui-control-min-height);
    --ui-action-gap: .5rem;
    --ui-section-gap: var(--app-card-content-inset, 1rem);
    --ui-field-gap: .85rem;
    --ui-metric-gap: var(--app-content-card-gap, .75rem);
    --ui-metric-min-width: 12rem;
    --ui-badge-radius: 999px;
    --ui-badge-height: 1.75rem;
    --ui-badge-padding: .15rem .55rem;
    --ui-table-cell-padding: .65rem .7rem;
    --ui-table-heading-padding: .55rem .7rem;
    --ui-table-compact-cell-padding: .48rem .55rem;
    --ui-table-compact-heading-padding: .42rem .55rem;
}

/* Shared viewport alignment. Neither primitive accounts for the sidebar;
 * the sidebar is an independent layer and must never redefine center. */
.ui-viewport-anchor {
    margin-inline: auto;
}

.ui-viewport-center {
    box-sizing: border-box;
    width: min(calc(100vw - (2 * var(--app-shell-gutter))), var(--app-content-width));
    margin-inline: auto;
}

.ui-field {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 0.34rem;
    margin: 0;
}

.ui-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 0.65rem;
}

.ui-field-label,
.ui-field > label,
label.ui-field > span:first-child {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 850;
    line-height: 1.25;
}

.ui-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:where(input, select, textarea).ui-control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-min-height);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--ui-control-radius);
    background: var(--surface-panel-control-bg, var(--color-surface));
    color: var(--color-text);
    padding: 0.52rem var(--ui-control-padding-inline);
    font: inherit;
    font-size: var(--ui-type-control);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.ui-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
:where(input, select, textarea).ui-control:focus {
    border-color: var(--color-brand-active);
    outline: 3px solid var(--input-focus-ring);
    outline-offset: 1px;
}

.ui-field-error {
    margin: 0;
    font-size: var(--ui-type-caption);
    line-height: 1.4;
}

/* One helper role, independent of nesting, page, or form density. */
.ui-field-help { margin: 0; padding-inline-start: .4rem; font-size: var(--ui-type-help); font-weight: 400; line-height: 1.5; color: var(--color-text-muted); }
.ui-field-error { color: var(--color-danger-text, #991b1b); font-weight: 780; }

/* Apply to a settings form or its containing view when adopting the shared reading layout. */
/* Settings density is owned here; components consume these tokens. */
.ui-settings-form {
    --ui-field-gap: var(--ui-settings-field-gap, 1.25rem);
    --ui-field-row-gap: var(--ui-settings-field-row-gap, 1.65rem);
    --ui-settings-field-inset: .9rem;
    --ui-settings-repeat-gap: .6rem;
    --ui-settings-repeat-inset: .65rem;
}
.ui-settings-form .ui-form-grid > .ui-field { border-top: 1px solid var(--color-border-muted); padding-top: var(--ui-settings-field-inset); }
/* Field grids own their separators. Other titled card content needs the same boundary. */
.ui-settings-form .ui-panel:not(.is-metric):has(> .ui-section-header) > .ui-panel-body:not(:has(> .ui-form-grid:first-child)) {
    border-top: 1px solid var(--color-border-muted);
    padding-top: var(--ui-settings-field-inset);
}
.ui-settings-form .ui-panel-body > .ui-help:not(:first-child) { margin-top: var(--ui-field-row-gap); }
.ui-settings-form .ui-panel-body > .ui-help:not(:last-child) { margin-bottom: var(--ui-field-row-gap); }
.ui-settings-form .ui-field .ui-field-label { font-size: .9rem; line-height: 1.4; font-weight: 700; }
.ui-settings-form .ui-field .ui-field-error { font-size: var(--ui-type-body); line-height: 1.55; margin-top: .35rem; }

/* Restricted controls keep their geometry; permission-gated Vue rendering owns visibility. */
.ui-panel[data-ui-admin-only] { border-color: var(--admin-nav-border); box-shadow: inset 3px 0 var(--admin-nav-accent), var(--shadow-card, var(--shadow-sm)); }
.ui-section-header[data-ui-admin-only] .ui-section-heading h2,
.ui-field[data-ui-admin-only] .ui-field-label { color: var(--admin-page-label); }
.ui-field[data-ui-admin-only]:not(.has-error) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not([aria-invalid="true"]) { border-color: var(--admin-nav-accent); }
.ui-field[data-ui-admin-only] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--admin-page-label); }
.ui-button[data-ui-admin-only] { border-color: var(--admin-nav-accent); box-shadow: inset 3px 0 var(--admin-nav-accent); }
.ui-button[data-ui-admin-only]:not(.is-danger):not(.is-primary) { background: var(--admin-nav-active-bg); color: var(--admin-nav-active-text); }
.ui-button[data-ui-admin-only]:focus-visible { outline-color: var(--admin-nav-accent); }

/* A short form may be bounded without moving the page header/navigation inward. */
.ui-settings-task { box-sizing: border-box; width: 100%; max-width: 48rem; min-width: 0; margin-inline: 0; justify-self: start; }
.ui-settings-task > fieldset { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.ui-settings-task .ui-field:has(> input[type="checkbox"]) { grid-template-columns: auto max-content; justify-content: start; align-items: center; }
.ui-settings-task .ui-field > input[type="checkbox"] { margin-inline: 0; justify-self: start; }
.ui-settings-task .ui-field:has(> input[type="checkbox"]) > :is(.ui-field-help, .ui-field-error) { grid-column: 1 / -1; }

:is(.ui-button, .settings-ui-button, .settings-control-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--ui-control-min-height);
    gap: 0.42rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--ui-control-radius);
    background: var(--color-surface-elevated);
    color: var(--color-text);
    padding: 0.5rem 0.82rem;
    font: inherit;
    font-size: var(--ui-type-control);
    font-weight: 850;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

:is(.ui-button, .settings-ui-button, .settings-control-button):hover:not(:disabled),
:is(.ui-button, .settings-ui-button, .settings-control-button):focus-visible:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-brand) 48%, var(--color-border-muted));
    background: color-mix(in srgb, var(--color-brand-soft) 42%, var(--color-surface-elevated));
    box-shadow: var(--shadow-sm);
    outline: none;
}

:is(.ui-button, .settings-ui-button, .settings-control-button).is-primary {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--color-border));
    background: var(--primary);
    color: var(--primary-foreground);
}

:is(.ui-button, .settings-ui-button, .settings-control-button).is-primary:hover:not(:disabled),
:is(.ui-button, .settings-ui-button, .settings-control-button).is-primary:focus-visible:not(:disabled) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 90%, var(--foreground));
}

:is(.ui-button, .settings-ui-button, .settings-control-button).is-danger,
.settings-control-button.danger {
    border-color: color-mix(in srgb, var(--color-danger-text, #991b1b) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-bg, #fef2f2) 82%, var(--color-surface));
    color: var(--color-danger-text, #991b1b);
}

:is(.ui-button, .settings-ui-button, .settings-control-button).is-quiet {
    min-height: var(--ui-control-compact-height);
    border-color: transparent;
    background: transparent;
    padding: 0.28rem 0.42rem;
    color: var(--color-text-muted);
    box-shadow: none;
}

/* Shared size variants: table actions use the same geometry in every Vue view. */
:is(.ui-button, .settings-ui-button, .settings-control-button).is-compact { min-height: var(--ui-control-compact-height); padding: .25rem .6rem; }

/* Secondary form actions share Save's target size; quiet describes emphasis, not footer density. */
.ui-sticky-actions > :is(.ui-button, .settings-ui-button, .settings-control-button):not(.is-compact) { min-height: var(--ui-control-min-height); padding: .5rem .82rem; }

/* Keep unavailable actions legible, including buttons disabled by a fieldset.
   Explicit colors also override the legacy border-colored disabled text. */
button:is(.ui-button, .settings-ui-button, .settings-control-button):disabled {
    cursor: not-allowed;
    opacity: 1;
    color: color-mix(in srgb, var(--color-text) 80%, var(--color-text-muted));
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    border-color: var(--color-border-strong);
    box-shadow: none;
}
/* Retain action meaning while native disabled state prevents interaction. */
button:is(.ui-button, .settings-ui-button, .settings-control-button).is-primary:disabled {
    color: color-mix(in srgb, var(--primary) 65%, var(--color-text-muted));
    background: color-mix(in srgb, var(--primary) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--primary) 25%, var(--color-border));
}
button:is(.ui-button, .settings-ui-button, .settings-control-button).is-danger:disabled,
button.settings-control-button.danger:disabled {
    color: color-mix(in srgb, var(--color-danger-text) 65%, var(--color-text-muted));
    background: color-mix(in srgb, var(--color-danger-soft) 45%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger-text) 20%, var(--color-border));
}
:is(.ui-button, .settings-ui-button, .settings-control-button).is-icon { width: var(--ui-icon-control-width); min-width: var(--ui-icon-control-width); height: var(--ui-icon-control-height); min-height: var(--ui-icon-control-height); flex: 0 0 auto; padding: 0; }
/* Honor the explicit compact size for icon-only controls as well. */
:is(.ui-button, .settings-ui-button, .settings-control-button).is-icon.is-compact { width: var(--ui-control-compact-height); min-width: var(--ui-control-compact-height); height: var(--ui-control-compact-height); min-height: var(--ui-control-compact-height); }
:is(.ui-button, .settings-ui-button, .settings-control-button).is-block { width: 100%; }
:is(.ui-button, .settings-ui-button, .settings-control-button) .gmi { flex: 0 0 auto; font-size: 1.05rem; font-weight: 400; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/* One geometry and typography contract for every right-side application drawer. */
.ui-drawer-backdrop {
    position: fixed;
    z-index: calc(var(--z-primary-drawer, 1240) - 1);
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--overlay-backdrop, rgba(15, 23, 42, 0.46));
    padding: 0;
    backdrop-filter: saturate(125%) blur(3px);
    cursor: default;
}

.ui-drawer-backdrop[hidden] {
    display: none !important;
}

body:has(.ui-drawer-backdrop:not([hidden])) {
    overflow: hidden;
}

.ui-drawer-surface {
    box-sizing: border-box;
    border: 1px solid var(--surface-panel-border);
    border-right: 0;
    border-radius: var(--ui-drawer-edge-radius) 0 0 var(--ui-drawer-edge-radius);
    background: var(--surface-drawer-bg, var(--color-surface-muted));
    color: var(--color-text);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.ui-drawer-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 4.05rem;
    gap: 0.72rem;
    margin: 0;
    border-bottom: 1px solid var(--surface-panel-border);
    background: var(--surface-panel-bg);
    padding: 0.82rem 1rem;
}

.ui-drawer-heading {
    min-width: 0;
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.15;
}

.ui-drawer-title {
    color: inherit;
    font: inherit;
}

/* AppOverlay drawers and persistent FocusLayer drawers share this single
 * heading authority; legacy modal selectors cannot alter one independently. */
.ui-drawer-header .ui-drawer-heading,
.ui-drawer-header .ui-drawer-title {
    color: var(--color-text);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.15;
}

.ui-drawer-eyebrow {
    color: var(--color-theme-accent-active);
}

.ui-drawer-close {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--ui-icon-control-width);
    min-width: var(--ui-icon-control-width);
    height: var(--ui-icon-control-height);
    min-height: var(--ui-icon-control-height);
    margin-left: auto;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--ui-control-radius);
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    padding: 0;
}

.ui-drawer-close:hover,
.ui-drawer-close:focus-visible {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.ui-drawer-body {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
}

.ui-form-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.18rem;
}

.ui-route-field {
    --ui-route-accent: var(--color-feature-calls);
    --ui-route-soft: var(--color-feature-calls-soft);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    height: var(--communication-deck-control-height);
    min-height: var(--communication-deck-control-height);
    max-height: var(--communication-deck-control-height);
    gap: 0.38rem;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--ui-control-radius);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    padding: 0.42rem 0.56rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ui-route-field.is-text {
    --ui-route-accent: var(--color-feature-texts);
    --ui-route-soft: var(--color-feature-texts-soft);
}

.ui-route-field:hover:not(:disabled):not([aria-disabled="true"]),
.ui-route-field:focus-visible:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--ui-route-accent);
    background: color-mix(in srgb, var(--ui-route-soft) 34%, var(--color-surface));
    outline: 3px solid color-mix(in srgb, var(--ui-route-accent) 14%, transparent);
    outline-offset: 1px;
}

.ui-route-field.is-missing {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
    box-shadow: none;
}

.ui-route-field.is-restricted {
    border-color: color-mix(in srgb, var(--color-warning-text) 48%, var(--color-border-muted));
    background: color-mix(in srgb, var(--color-warning-soft) 58%, var(--color-surface-muted));
    box-shadow: inset 0.18rem 0 color-mix(in srgb, var(--color-warning-text) 72%, transparent);
    animation: ui-route-restricted-attention 1.8s ease-in-out 2;
}

.ui-route-field.is-restricted .ui-route-field-leading,
.ui-route-field.is-restricted .ui-route-field-action {
    color: var(--color-warning-text);
}

.ui-route-field.is-restricted .ui-route-field-copy strong {
    color: var(--color-warning-text);
}

@keyframes ui-route-restricted-attention {
    0%, 100% {
        border-color: color-mix(in srgb, var(--color-warning-text) 48%, var(--color-border-muted));
        box-shadow: inset 0.18rem 0 color-mix(in srgb, var(--color-warning-text) 72%, transparent);
    }
    50% {
        border-color: var(--color-warning-text);
        box-shadow:
            inset 0.18rem 0 var(--color-warning-text),
            0 0 0 0.2rem color-mix(in srgb, var(--color-warning-text) 14%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-route-field.is-restricted {
        animation: none;
    }
}

.ui-route-field-leading,
.ui-route-field-action {
    color: var(--ui-route-accent);
    font-size: 1rem;
}

.ui-route-field.is-missing .ui-route-field-leading,
.ui-route-field.is-missing .ui-route-field-action {
    color: var(--color-text-muted);
}

.ui-route-field-copy {
    display: grid;
    min-width: 0;
    gap: 0.06rem;
}

.ui-route-field-copy small,
.ui-route-field-copy strong,
.ui-route-field-secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-route-field-copy small {
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 820;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ui-route-field-copy strong {
    color: var(--color-text);
    font-size: var(--ui-type-control);
    font-weight: 850;
}

.ui-route-field-secondary {
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 760;
}

.ui-route-field.is-missing .ui-route-field-copy strong {
    font-size: var(--ui-type-body, 1rem);
    font-weight: 950;
}

/* Shared layout utilities: page data and behavior stay with their owners. */
.ui-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ui-action-gap); min-width:0; }
.ui-actions > .ui-button { flex:0 0 auto; }
.ui-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ui-metric-min-width)),1fr)); gap:var(--ui-metric-gap); min-width:0; }
.ui-metrics small { display:block; color:var(--color-text-muted); font-size:var(--ui-type-meta); }
/* Text actions may be compact; icon-only actions keep one generous hit target. */
.ui-data-table :is(.ui-button, .settings-ui-button, .settings-control-button):not(.is-block):not(.is-icon) { min-height:var(--ui-control-compact-height); padding:.25rem .6rem; }

:is(.ui-button, .settings-ui-button, .settings-control-button):focus-visible:not(:disabled) { outline:2px solid var(--color-brand-active); outline-offset:2px; }

/* Customer mobile action groups must not stretch icon-only buttons into text buttons. */
.settings-ui-table .settings-record-actions > .ui-button.is-icon {
    flex: 0 0 auto;
    width: var(--ui-icon-control-width);
    min-width: var(--ui-icon-control-width);
    height: var(--ui-icon-control-height);
    min-height: var(--ui-icon-control-height);
    padding: 0;
}

/* Text lists in shared content surfaces keep their markers inside the content inset.
   Classed lists retain their own navigation, status-strip, and layout contracts. */
:where(.ui-panel-body, .ui-dialog, .settings-disclosure-body, .ui-help, .documentation) :is(ul, ol):not([class]) {
    margin-block: .65rem;
    padding-inline-start: 1.6rem;
    list-style-position: outside;
}
:where(.ui-panel-body, .ui-dialog, .settings-disclosure-body, .ui-help, .documentation) ul:not([class]) { list-style-type: disc; }
:where(.ui-panel-body, .ui-dialog, .settings-disclosure-body, .ui-help, .documentation) ol:not([class]) { list-style-type: decimal; }
:where(.ui-panel-body, .ui-dialog, .settings-disclosure-body, .ui-help, .documentation) :is(ul, ol):not([class]) > li { padding-inline-start: .15rem; margin-block: .3rem; }
.settings-helper-disclosure { margin-block: .75rem; padding: .75rem; border: 1px solid var(--color-border-muted); border-radius: .7rem; background: var(--color-surface-muted); }
.settings-helper-disclosure > summary { cursor: pointer; font-weight: 600; }
.settings-helper-disclosure[open] > summary { margin-bottom: .75rem; }

/* Compose independent content blocks without page-specific spacing rules. */
.ui-stack { display: grid; min-width: 0; gap: var(--ui-section-gap, 1rem); }

/* Modern drawer cards own their surface and inset; legacy modal fieldsets do not. */
.ui-managed-drawer .ui-settings-form fieldset {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Stacked read-only properties: strong keys, regular inset values. */
.ui-property-stack { display: grid; gap: .65rem; margin: 0; min-width: 0; }
.ui-property-stack > div { min-width: 0; }
.ui-property-stack dt { color: var(--color-text); font-size: var(--ui-type-meta); font-weight: 700; margin-bottom: .15rem; }
.ui-property-stack dd { margin: 0; padding-inline-start: .4rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; word-break: normal; }

/* Collection rows expose one primary action; secondary controls remain independent. */
.ui-interactive-row { cursor: pointer; }
.ui-interactive-row:hover { background: var(--color-theme-accent-soft); }
.ui-interactive-row:focus-visible { outline: 2px solid var(--color-theme-accent); outline-offset: -2px; }



/* Administration has a fixed, accessible palette independent of customer themes. */
:root {
    --admin-nav-bg: #182737;
    --admin-nav-text: #edf2f7;
    --admin-nav-accent: #e8bd67;
    --admin-nav-border: #4a5d6d;
    --admin-nav-hover-bg: #2a3d50;
    --admin-nav-hover-text: #ffffff;
    --admin-nav-active-bg: #f4dfb1;
    --admin-nav-active-text: #27374a;
    --admin-page-bg: #f4f6f9;
    --admin-page-border: #d5dde6;
    --admin-page-label: #685022;
}

.workspace-module-navigation {
    --foreground: #ffffff;
    --muted-foreground: rgba(255, 255, 255, 0.76);
    --border: rgba(255, 255, 255, 0.18);
    --card: rgba(255, 255, 255, 0.12);
    --accent: rgba(255, 255, 255, 0.18);
    --accent-foreground: #ffffff;
    --primary: var(--color-theme-accent);
    box-sizing: border-box;
    min-width: 0;
    border-right: 0;
    background-color: var(--color-feature-settings);
    background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
    color: #ffffff;
}

.workspace-module-navigation[hidden] {
    display: none !important;
}

.workspace-navigation-scope-slot { flex: 0 0 auto; padding: 0.65rem; }
.workspace-navigation-scope-slot[hidden] { display: none; }

/* The collapsed rail has room for one icon, not the full selector grid. */
body.workspace-navigation-collapsed .workspace-navigation-scope-slot .workspace-selector-trigger {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
}
body.workspace-navigation-collapsed .workspace-navigation-scope-slot .workspace-selector-copy,
body.workspace-navigation-collapsed .workspace-navigation-scope-slot .workspace-selector-expand {
    display: none;
}

@media (max-width: 1279px) {
    body.workspace-shell-view.workspace-navigation-overlay-open > .workspace-module-navigation {
        display: flex !important; flex-direction: column;
    }
    body.workspace-shell-view.workspace-navigation-overlay-open .workspace-module-list {
        flex: 1 1 auto; min-height: 0; width: 100%;
    }
}

.bgcolor-visualizer {
    color: var(--color-feature-summary-text);
    background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
}

.bgcolor-activity {
    color: var(--color-feature-summary-text);
    background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
}

.bgcolor-review {
    color: var(--color-feature-summary-text);
    background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
}

body.workspace-visualizer-view main.content {
    box-sizing: border-box;
    flex: 0 0 auto;
    gap: 0;
    height: calc(100dvh - var(--app-header-height));
    min-height: 0;
    overflow: hidden;
}

body.workspace-visualizer-view main.content > section.visualizer.app-section {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    padding: var(--app-content-inset);
}

#workspace_visualizer_content,
#workspace_visualizer_content > .settings-routing-explorer {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

#workspace_visualizer_content > .settings-routing-explorer {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

@media (max-width: 1179px) {
    .workspace-module-navigation {
        display: none !important;
    }

    body.workspace-shell-view.workspace-navigation-overlay-open > .workspace-module-navigation {
        position: fixed;
        z-index: 1300;
        top: var(--app-header-height);
        bottom: var(--app-footer-height);
        left: 0;
        display: flex !important;
        width: min(var(--app-sidebar-expanded-width), calc(100vw - 1rem));
        overflow: hidden;
        border-right: 0;
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
        box-shadow: 0.8rem 0 1.6rem color-mix(in srgb, var(--color-text) 18%, transparent);
    }

    body.workspace-shell-view.workspace-navigation-overlay-open .workspace-module-list {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
    }
}

/*
 * Canonical application shell
 * ---------------------------
 * The viewport owns the centerline. The navigation rail is fixed beside it
 * and therefore cannot move the header, activity tray, content, dock, or
 * footer off center. Auxiliary content (such as Active Calls) occupies the
 * left viewport gutter without changing the center rail.
 */
@media (min-width: 1180px) {
    body.workspace-shell-view main.content {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-content-width)) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
        justify-content: stretch;
        min-height: 0;
        gap: 0;
        overflow: hidden;
        padding: 0;
    }

    /* Override former page-specific grid formulas with the viewport spine. */
    body.overview-workspace-view.workspace-shell-view.account-call-workspace-wide main.content,
    body.overview-workspace-view.overview-conversations-mode.workspace-shell-view.account-call-workspace-wide main.content,
    html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view):not(.settings-view) main.content,
    html body.workspace-shell-view.account-call-workspace-wide.has-account-active-calls:not(.overview-workspace-view):not(.settings-view) main.content {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-content-width)) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 0;
        padding-inline: 0;
    }

    body.workspace-shell-view > .workspace-module-navigation {
        position: fixed;
        z-index: 20;
        top: var(--app-header-height);
        bottom: 0;
        left: 0;
        display: block;
        grid-column: auto;
        grid-row: auto;
        width: var(--app-sidebar-width);
        height: auto;
        min-height: 0;
        overflow: visible;
        border-right: 0;
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
        transition: width 180ms ease;
    }

    body.workspace-shell-view .workspace-module-list {
        display: flex;
        width: var(--app-sidebar-width);
        height: 100%;
        min-height: 0;
        flex-direction: column;
        gap: 0.22rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.55rem 0.4rem;
        border-right: 0;
        background: transparent;
        transition: width 180ms ease, box-shadow 180ms ease;
    }

    body.workspace-shell-view .workspace-module-group h2,
    body.workspace-shell-view .workspace-module-link > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.workspace-shell-view .workspace-module-link {
        display: inline-grid;
        grid-template-columns: 1fr;
        place-items: center;
        min-height: 2.65rem;
        padding: 0.45rem;
    }

    body.workspace-shell-view .workspace-module-link .gmi {
        font-size: 1.2rem;
    }

    body.workspace-shell-view .workspace-module-list.is-expanded {
        width: var(--app-sidebar-expanded-width);
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
        box-shadow: 0.8rem 0 1.6rem color-mix(in srgb, var(--color-text) 14%, transparent);
    }

    body.workspace-shell-view .workspace-module-list.is-expanded .workspace-module-group h2,
    body.workspace-shell-view .workspace-module-list.is-expanded .workspace-module-link > span:last-child {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }

    body.workspace-shell-view .workspace-module-list.is-expanded .workspace-module-link {
        grid-template-columns: 1.25rem minmax(0, 1fr);
        place-items: initial;
        align-items: center;
        padding-inline: 0.58rem;
    }

    body.workspace-shell-view main.content > .activity-header-row {
        grid-column: 1 / 4;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        padding-inline: 0;
    }

    body.workspace-shell-view main.content > section.overview.app-section {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        box-sizing: border-box;
        width: 100%;
        max-width: var(--app-content-width);
        height: calc(100% - (2 * var(--communication-workspace-inset, 0.5rem)));
        min-width: 0;
        min-height: 0;
        margin: var(--communication-workspace-inset, 0.5rem) 0;
        overflow: hidden;
        padding: 0;
    }

    /* Navigation reveals sections before their deferred Vue loader runs so the
     * browser can paint promptly. Withhold an old overview subtree until Vue
     * confirms the requested Dashboard/Conversations subview is committed. */
    body.workspace-shell-view main.content > section.overview.app-section.is-awaiting-overview-render {
        visibility: hidden;
    }

    /* Dashboard is the dense, multi-column workspace and consumes all usable
     * width beside the navigation rail. Conversations deliberately retain the
     * shared readable-width spine. */
    body.overview-workspace-view:not(.overview-conversations-mode):not(:where(.has-workspace-tools-panel)).workspace-shell-view main.content > section.overview.app-section {
        grid-column: 1 / 4;
        justify-self: stretch;
        width: auto;
        max-width: none;
        height: calc(100% - (2 * var(--communication-workspace-inset, 0.5rem)));
        margin: var(--communication-workspace-inset, 0.5rem);
        margin-left: calc(var(--app-sidebar-width) + var(--communication-workspace-inset, 0.5rem));
    }

    body.workspace-shell-view main.content > section.summary.app-section,
    body.workspace-shell-view main.content > section.activity.app-section,
    body.workspace-shell-view main.content > section.review.app-section,
    body.workspace-shell-view main.content > section.visualizer.app-section,
    body.workspace-shell-view main.content > section.settings.app-section,
    body.workspace-shell-view main.content > section.phone.app-section,
    body.workspace-shell-view main.content > section.contacts.app-section,
    body.workspace-shell-view main.content > section.conversation.app-section,
    body.workspace-shell-view main.content > section.texts.app-section {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view):not(.settings-view) main.content > section.phone.app-section,
    html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view):not(.settings-view) main.content > section.contacts.app-section,
    html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view):not(.settings-view) main.content > section.conversation.app-section,
    html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view):not(.settings-view) main.content > section.texts.app-section {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    body.workspace-shell-view main.content > .account-active-call-monitor {
        grid-column: 1;
        grid-row: 2;
    }

    body.workspace-shell-view .activity-metrics-stack,
    body.workspace-shell-view .page-menu,
    body.workspace-shell-view .page-controls {
        margin-inline: auto;
    }

    /* Keep the shared context tray on the physical viewport spine. Settings
     * owns its navigation inset in row two instead of shifting the whole
     * application grid (which also shifted the tray). */
    body.settings-view.workspace-shell-view main.content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--app-content-width)) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        padding-left: 0;
        overflow: hidden;
    }

    /* Configuration canvases use every pixel remaining beside persistent
     * navigation. Their command bars and graph surfaces must never begin
     * underneath the sidebar rail. */
    body.workspace-visualizer-view.workspace-shell-view main.content {
        box-sizing: border-box;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        max-width: none;
        min-width: 0;
        height: calc(100dvh - var(--app-header-height));
        padding-left: 0;
        overflow: hidden;
    }

    body.workspace-visualizer-view.workspace-shell-view main.content > section.visualizer.app-section {
        box-sizing: border-box;
        grid-row: 2;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        padding-left: calc(var(--app-sidebar-width) + var(--app-content-inset));
        padding-right: var(--app-content-inset);
    }

    body.settings-view.workspace-shell-view main.content > section.settings.app-section {
        box-sizing: border-box;
        grid-column: 1 / 4;
        grid-row: 2;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        padding: 0 0 0 var(--app-sidebar-width);
    }

    body.workspace-shell-view main.content > section.summary.app-section,
    body.workspace-shell-view main.content > section.activity.app-section,
    body.workspace-shell-view main.content > section.review.app-section {
        box-sizing: border-box;
        width: auto;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        overflow: auto;
        scrollbar-gutter: stable;
        padding: var(--app-content-inset);
        padding-left: calc(var(--app-sidebar-width) + var(--app-content-inset));
        padding-right: calc(var(--app-sidebar-width) + var(--app-content-inset));
    }

    body.settings-view.workspace-shell-view .settings-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: var(--app-content-inset);
    }

    body.settings-view.workspace-shell-view .settings-pane {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1180px) and (max-width: 1479px) {
    body.workspace-shell-view.workspace-navigation-overlay-open > .workspace-module-navigation {
        width: var(--app-sidebar-expanded-width);
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
        box-shadow: 0.8rem 0 1.6rem color-mix(in srgb, var(--color-text) 14%, transparent);
    }

    body.workspace-shell-view.workspace-navigation-overlay-open .workspace-module-list.is-expanded {
        width: var(--app-sidebar-expanded-width);
        background-color: var(--color-feature-settings);
        background-image: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
    }

}

@media (min-width: 1480px) {
    body.workspace-shell-view.workspace-navigation-collapsed {
        --app-sidebar-width: var(--app-sidebar-compact-width);
    }

    body.workspace-shell-view.workspace-navigation-expanded {
        --app-sidebar-width: var(--app-sidebar-expanded-width);
    }

    body.workspace-shell-view .workspace-module-list {
        width: var(--app-sidebar-expanded-width);
        gap: 0.4rem;
        padding: 0.55rem 0.65rem;
    }

    body.workspace-shell-view .workspace-module-list.is-expanded {
        box-shadow: none;
    }

    body.workspace-shell-view .workspace-module-group h2,
    body.workspace-shell-view .workspace-module-link > span:last-child {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }

    body.workspace-shell-view .workspace-module-link {
        display: grid;
        grid-template-columns: 1.25rem minmax(0, 1fr);
        place-items: initial;
        align-items: center;
        min-height: 2.35rem;
        padding: 0.48rem 0.58rem;
    }

    body.workspace-shell-view .workspace-module-link .gmi {
        font-size: 1.08rem;
    }

    body.workspace-shell-view .workspace-module-list.is-collapsed {
        width: var(--app-sidebar-compact-width);
        gap: 0.22rem;
        padding: 0.55rem 0.4rem;
        box-shadow: none;
    }

    body.workspace-shell-view .workspace-module-list.is-collapsed .workspace-module-group h2,
    body.workspace-shell-view .workspace-module-list.is-collapsed .workspace-module-link > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.workspace-shell-view .workspace-module-list.is-collapsed .workspace-module-link {
        display: inline-grid;
        grid-template-columns: 1fr;
        place-items: center;
        min-height: 2.65rem;
        padding: 0.45rem;
    }

    body.workspace-shell-view .workspace-module-list.is-collapsed .workspace-module-link .gmi {
        font-size: 1.2rem;
    }

}

@media (min-width: 1900px) {
    html body.workspace-shell-view.account-call-workspace-wide main.content > .account-active-call-monitor,
    html body.workspace-shell-view.overview-workspace-view.overview-conversations-mode.account-call-workspace-wide main.content > .account-active-call-monitor {
        position: relative;
        z-index: 12;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        align-self: stretch;
        width: var(--app-active-rail-width);
        min-width: var(--app-active-rail-width);
        max-width: var(--app-active-rail-width);
        height: calc(100% - (2 * var(--communication-workspace-inset, 0.5rem)));
        max-height: calc(100% - (2 * var(--communication-workspace-inset, 0.5rem)));
        margin: var(--communication-workspace-inset, 0.5rem) var(--app-active-rail-gap) var(--communication-workspace-inset, 0.5rem) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        overflow: hidden;
        opacity: 1;
        transform: none;
    }

    html body.workspace-shell-view.account-call-workspace-wide main.content > .account-active-call-monitor[hidden] {
        display: none !important;
    }

    html body.workspace-shell-view.account-call-workspace-wide main.content > .account-active-call-monitor [data-call-stream-active-list] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }


    html body.workspace-shell-view.overview-workspace-view:not(.overview-conversations-mode):not(:where(.has-workspace-tools-panel)).account-call-workspace-wide main.content > section.overview.app-section {
        grid-column: 1 / 4;
        grid-row: 2;
        justify-self: stretch;
        width: auto;
        max-width: none;
        margin: var(--communication-workspace-inset, 0.5rem);
        margin-left: calc(
            var(--app-sidebar-width)
            + var(--app-active-rail-width)
            + var(--app-active-rail-gap)
            + var(--communication-workspace-inset, 0.5rem)
        );
        margin-right: calc(
            var(--communication-workspace-inset, 0.5rem)
        );
        transform: none;
    }

    html body.workspace-shell-view.overview-workspace-view:not(.overview-conversations-mode):not(:where(.has-workspace-tools-panel)).account-call-workspace-wide main.content > .account-active-call-monitor {
        justify-self: start;
        margin-right: 0;
        margin-left: calc(var(--app-sidebar-width) + var(--communication-workspace-inset, 0.5rem));
    }


}

@media (prefers-reduced-motion: reduce) {
    .app-brand-slot,
    body.workspace-shell-view > .workspace-module-navigation,
    body.workspace-shell-view .workspace-module-list {
        transition: none;
    }
}

@media (min-width:1900px) { body.workspace-shell-view { --app-active-rail-width:22rem; } }

/* Focused communications share a quiet frame; the cards keep their own themes. */
@media (min-width: 998px) {
    body.workspace-shell-view:not(.overview-workspace-view) main.content > section:is(.phone, .contacts, .texts).app-section {
        padding: 0;
        overflow: hidden;
        scrollbar-gutter: auto;
    }
}
.focused-communication-surface,
html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view) main.content > .account-active-call-monitor {
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--ui-control-radius, .65rem);
    background: var(--communication-collection-bg, var(--color-surface));
    box-shadow: none;
    overflow: hidden;
}
.focused-collection-primary.focused-communication-surface {
    width: min(100%, var(--app-content-width, 998px));
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.focused-communication-surface .focused-inbox-main {
    min-height: 0;
    overflow: hidden;
}
.focused-communication-surface .focused-contact-list,
.focused-communication-surface .focused-message-list {
    flex: 1 1 auto;
    min-height: 0;
}
@media (min-width: 998px) {
    .focused-communication-surface .focused-contact-list,
    .focused-communication-surface .focused-message-list {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}
@media (max-width: 997px) {
    .focused-communication-surface,
    .focused-communication-surface .focused-inbox-main {
        overflow: visible;
    }
}
.focused-communication-surface .focused-communication-list,
body.workspace-shell-view section.phone.app-section [data-call-stream-history-list],
body.workspace-shell-view section.phone.app-section [data-call-stream-active-tab-list],
html body.workspace-shell-view.account-call-workspace-wide:not(.overview-workspace-view) main.content > .account-active-call-monitor [data-call-stream-active-list] {
    box-sizing: border-box;
    padding: .5rem .5rem calc(.5rem + var(--communication-dock-overlay-height, 0px));
}
.focused-mailbox-side.focused-communication-surface {
    width: 22rem;
    height: calc(100% - (2 * var(--communication-workspace-inset, .5rem)));
    margin: var(--communication-workspace-inset, .5rem) 0 var(--communication-workspace-inset, .5rem) var(--app-active-rail-gap, .5rem);
}
.focused-communication-surface > .focused-side-heading,
html body.workspace-shell-view:not(.overview-workspace-view) .account-active-call-monitor > .focused-side-heading {
    flex: 0 0 auto;
    margin: 0;
    padding: .5rem .65rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--communication-row-stripe, var(--color-surface));
    color: var(--color-text);
    box-shadow: none;
    font-size: var(--ui-type-control);
    font-weight: 650;
    min-height: 2.5rem;
    box-sizing: border-box;
}
html body.workspace-shell-view:not(.overview-workspace-view) .active-call-monitor-title { font-weight: 650; }
[data-phone-menu-chevron][hidden] { display: none; }
html body.workspace-shell-view:not(.overview-workspace-view) .active-call-monitor-attention .active-call-monitor-audience {
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    border-color: var(--color-border);
    font-weight: 600;
}
html body.workspace-shell-view:not(.overview-workspace-view) .active-call-monitor-attention .active-call-monitor-audience.is-direct { color: var(--color-feature-calls); }



/* Wide account overview. Dedicated Phone, Contacts, and Texts views retain their existing layouts. */
/* Panel identities remain stable when the Calls collection splits at wide widths. */
.overview-calls-group { display: contents; --dashboard-split-calls: 0; }
.overview-calls-group.is-showing-voicemail > .overview-active-panel,
.overview-calls-group.is-showing-recent > .overview-active-panel,
.overview-calls-group.is-showing-active > .overview-recent-panel { display: none; }
.overview-calls-group .overview-panel-header { display: none; }
.overview-calls-group .call-collection-tabs { flex: 0 0 auto; }
.overview-conversation-mobile-back { display: none; }
.overview-conversations-layout { container: conversation-layout / inline-size; }
.overview-panel, .overview-conversation-index, .overview-conversation-thread { container: communication-panel / inline-size; }

.btn-page-overview { display: none; }
.btn-page-conversations { display: flex; }

.bgcolor-overview,
.bgcolor-conversations {
    color: var(--color-feature-summary-text);
    background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
}

.btn-page-overview.active,
.btn-page-conversations.active {
    border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
    background: linear-gradient(135deg, var(--color-feature-settings) 0%, var(--color-brand) 100%);
    color: #ffffff;
    box-shadow:
        inset 0 3px var(--color-theme-accent),
        0 8px 18px color-mix(in srgb, var(--color-brand) 24%, transparent);
}

.overview-workspace {
    --overview-message-accent: var(--color-feature-texts);
    --overview-message-accent-soft: var(--color-feature-texts-soft);
    --overview-message-accent-border: var(--color-feature-texts-border);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.overview-workspace.is-conversations { width: 100%; max-width: none; margin: 0; }

.overview-dashboard-layout {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: workspace-board;
}

.overview-conversations-layout {
    --conversation-base-width: var(--app-communications-width, 76rem);
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--conversation-base-width);
    margin-inline: auto;
    min-width: 0;
    min-height: 0;
}

.overview-conversations-layout > .overview-conversations {
    height: 100%;
    /* Keep the selector useful while giving back excess thread width. */
    grid-template-columns: clamp(18rem, 42cqw, 32rem) minmax(0, 1fr);
}

.overview-board {
    --dashboard-current-max-width: var(--dashboard-max-width, 104rem);
    display: grid;
    grid-template-columns: var(--dashboard-columns, repeat(3, minmax(0, 1fr)));
    flex: 0 1 auto;
    width: 100%;
    max-width: var(--dashboard-current-max-width);
    margin-inline: auto;
    gap: 0;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
    box-shadow: var(--elevation-content);
}

.overview-conversations {
    /* A wider participant index uses available desktop space, then yields to the thread. */
    display: grid;
    grid-template-columns: clamp(18rem, 32cqw, 32rem) minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
    box-shadow: var(--elevation-content);
}

.overview-conversations.is-single-contact {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.overview-conversation-index,
.overview-conversation-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.overview-conversation-index {
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-muted) 54%, var(--color-surface));
}

.overview-conversation-column-header,
.overview-conversation-thread-header,
:root {
    --workspace-panel-header-height: 4.65rem;
    --workspace-panel-header-padding: .72rem .82rem;
}
.workspace-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: var(--workspace-panel-header-height);
    gap: 0.68rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--workspace-panel-header-bg);
    padding: var(--workspace-panel-header-padding);
}

.workspace-pane-header.is-contacts {
    background: var(--workspace-panel-header-bg);
}

.workspace-pane-header.is-messages {
    background: var(--workspace-panel-header-bg);
}

.workspace-pane-header-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.62rem;
}

.workspace-pane-header-copy {
    min-width: 0;
    display: block;
}

.workspace-pane-header-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.35rem;
    margin-left: auto;
}

.overview-conversation-column-header h2,
.overview-conversation-thread-header h2,
.workspace-pane-title {
    display: block;
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.overview-conversation-column-header p,
.overview-conversation-thread-header p,
.workspace-pane-subtitle {
    display: block;
    margin: 0.18rem 0 0;
    overflow: hidden;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-conversation-contact-list,
.overview-conversation-timeline {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.overview-conversation-contact-list .overview-contact-row {
    background: transparent;
    padding: 0.72rem 0.68rem;
}

.overview-conversation-view-switch {
    flex: 0 0 auto;
    padding: .4rem .45rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.overview-conversation-contact-list .overview-contact-counts {
    display: flex;
}

.overview-conversation-contact-list .overview-contact-trailing {
    min-width: 0;
}

.overview-conversation-thread {
    background: color-mix(in srgb, var(--color-bg) 72%, var(--color-surface));
}

.overview-conversation-thread-identity {
    min-width: 0;
}

.overview-conversation-thread-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.3rem;
    margin-left: auto;
}

.overview-conversation-timeline {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 0.78rem;
}

.overview-conversation-timeline > .overview-row {
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    border-radius: 0.82rem;
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}

.overview-conversation-timeline > .overview-call-row {
    align-self: center;
    width: min(100%, 60rem);
}

.overview-conversation-timeline > .overview-message-row {
    width: min(88%, 42rem);
}

.overview-conversation-timeline > .overview-message-row.outgoing {
    align-self: flex-end;
}

.overview-conversation-timeline > .overview-message-row.incoming {
    align-self: flex-start;
}

.overview-conversation-empty {
    flex: 1 1 auto;
}

.overview-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
    box-shadow: none;
}

.overview-panel + .overview-panel {
    border-left: 1px solid var(--color-border);
}

.overview-panel-new-items {
    position: absolute;
    z-index: 4;
    top: 7.7rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--color-brand) 40%, var(--color-border));
    border-radius: 999px;
    background: var(--color-brand-active);
    color: #ffffff;
    box-shadow: var(--shadow-md);
    padding: 0.4rem 0.62rem;
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

.overview-panel-new-items-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    min-height: 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding-inline: 0.26rem;
    font-size: var(--ui-type-caption);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.workspace-pane-header-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    background: var(--color-brand-soft);
    color: var(--color-brand-active);
    font-size: 1.18rem;
}

.workspace-pane-header.is-contacts .workspace-pane-header-icon {
    background: var(--color-feature-contacts-soft);
    color: var(--color-feature-contacts);
}

.workspace-pane-header.is-messages .workspace-pane-header-icon {
    background: var(--overview-message-accent-soft);
    color: var(--overview-message-accent);
}

.overview-panel > h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.15;
}

.overview-panel > p {
    margin: 0.2rem 0 0;
    overflow: hidden;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    place-items: center;
    flex: 0 0 auto;
    min-width: 1.75rem;
    min-height: 1.75rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    padding: 0 0.38rem;
    font-size: var(--ui-type-meta);
    font-weight: 900;
}

.overview-panel-count-label {
    font-size: var(--ui-type-meta);
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.overview-panel-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 2.25rem;
    gap: 0.4rem;
    border-top: 1px solid var(--color-border-muted);
    border-bottom: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface-muted) 78%, transparent);
    padding: 0.35rem 0.65rem;
}

.overview-panel-clear,
.overview-panel-profile,
.overview-panel-edit,
.overview-panel-add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.45rem;
    color: var(--color-brand-active);
    padding: 0.35rem 0.45rem;
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

.overview-panel-clear {
    color: var(--color-text-muted);
}

.overview-panel-clear-calls {
    grid-column: 3;
    justify-self: end;
}

.overview-panel-clear-messages {
    grid-column: 1;
    justify-self: start;
}

.overview-panel-extra-actions {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.overview-panel-extra-actions.has-edit-action {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
}

.overview-panel-profile,
.overview-panel-edit,
.overview-panel-add {
    color: var(--color-feature-contacts);
}

.overview-panel-clear:hover,
.overview-panel-clear:focus-visible {
    background: var(--color-brand-soft);
    outline: none;
}

.overview-panel-profile:hover,
.overview-panel-profile:focus-visible,
.overview-panel-edit:hover,
.overview-panel-edit:focus-visible,
.overview-panel-add:hover,
.overview-panel-add:focus-visible {
    background: var(--color-feature-contacts-soft);
    outline: none;
}

.overview-panel-list {
    background: var(--communication-collection-bg);
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.overview-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
    min-width: 0;
    gap: 0.7rem;
    border-bottom: 1px solid var(--color-border-muted);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    color: var(--color-text);
    flex: 0 0 auto;
    padding: 0.9rem 0.84rem;
    text-align: left;
    cursor: pointer;
}

.overview-contact-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.35rem;
}

.overview-contact-row.has-active-call {
    background: color-mix(in srgb, var(--color-call-active-soft) 54%, var(--color-surface));
}

button.overview-row:hover,
button.overview-row:focus-visible,
.overview-row[role="group"]:hover,
.overview-row[role="group"]:focus-within {
    z-index: 1;
    background: var(--color-brand-soft);
    outline: 2px solid color-mix(in srgb, var(--color-brand) 26%, transparent);
    outline-offset: -2px;
}

.overview-row-leading {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid var(--communication-direction-incoming-border);
    border-radius: 0.55rem;
    background: var(--communication-direction-incoming-bg);
    color: var(--communication-direction-incoming-text);
    font-size: 1.1rem;
}

.overview-row-target-button {
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.overview-row-target-button:hover,
.overview-row-target-button:focus-visible {
    border-color: var(--color-brand);
    outline: 3px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    outline-offset: 2px;
}

.overview-row-leading > .gmi:first-child {
    font-size: 1.1rem;
}

.overview-call-row .overview-row-leading {
    border-color: var(--color-feature-calls-border);
    background: var(--color-feature-calls-soft);
    color: var(--color-feature-calls);
}

.overview-call-row {
    min-height: 4.65rem;
    padding-block: 0.68rem;
}

.overview-message-row .overview-row-leading {
    border-color: var(--overview-message-accent-border);
    background: var(--overview-message-accent-soft);
    color: var(--overview-message-accent);
}

.overview-call-row.incoming {
    box-shadow: inset var(--communication-direction-rail-width) 0 var(--communication-direction-incoming);
}

.overview-call-row.outgoing {
    box-shadow: inset var(--communication-direction-rail-width) 0 var(--communication-direction-outgoing);
}

.overview-call-row.is-active-call {
    background: color-mix(in srgb, var(--color-call-active-soft) 58%, var(--color-surface));
}

.overview-call-row.is-active-call:has(.communication-tone-ringing) {
    background: color-mix(in srgb, var(--color-call-ringing-soft) 62%, var(--color-surface));
}

.overview-message-row.incoming {
    box-shadow: inset var(--communication-direction-rail-width) 0 var(--communication-direction-incoming);
}

.overview-message-row.outgoing {
    box-shadow: inset var(--communication-direction-rail-width) 0 var(--communication-direction-outgoing);
}

.overview-row-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.overview-row-eyebrow {
    overflow: hidden;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.overview-row strong {
    margin-top: 0.16rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-party-number {
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 720;
    line-height: 1.2;
}

.overview-party-number-line {
    width: max-content;
    max-width: 100%;
    margin-top: 0.12rem;
}

.overview-contact-name-line {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.28rem;
}

.overview-contact-name-line > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-contact-detail-line .overview-row-preview {
    margin-top: 0;
}

.overview-call-flow {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.overview-call-flow-party {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.overview-call-flow-party.is-to {
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: 0.28rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border-muted) 58%, transparent);
}

.overview-call-flow-label {
    grid-column: 1;
    align-self: start;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-caption);
    font-weight: 850;
    line-height: 1.25;
    text-transform: uppercase;
}

.overview-call-party-identity {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    min-width: 0;
    gap: 0.06rem;
}

.overview-call-flow-party.is-to .overview-call-party-identity {
    grid-column: 2;
}

.overview-call-party-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.28rem;
}

.overview-call-party-heading > strong {
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
}

.overview-call-party-identity .overview-party-number-line {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
}

.overview-call-party-identity .overview-party-number {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-call-pos-summary {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    margin-top: 0.28rem;
    border: 1px solid color-mix(in srgb, var(--communication-badge-border, var(--color-border-muted)) 65%, var(--color-border-muted));
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--communication-badge-bg, var(--color-surface-muted)) 38%, var(--color-surface));
    padding: 0.32rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 650;
    line-height: 1.2;
}

.overview-call-pos-source {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.18rem;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--communication-badge-text, var(--color-brand-active));
    padding: 0.02rem 0.12rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-call-pos-source .gmi {
    flex: 0 0 auto;
    font-size: var(--ui-type-meta);
}

.overview-call-pos-source > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-call-pos-details {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
    border: 1px solid color-mix(in srgb, var(--communication-badge-border, var(--color-border-muted)) 28%, var(--color-border-muted));
    border-radius: 0.42rem;
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-muted));
    padding: 0.3rem 0.4rem;
}

.overview-call-pos-detail {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.overview-row-preview {
    display: -webkit-box;
    margin-top: 0.2rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 550;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.overview-message-preview {
    display: block;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
    padding: .6rem .7rem;
    border: 1px solid color-mix(in srgb, var(--color-feature-texts) 16%, var(--color-border-muted));
    border-radius: .65rem;
    background: color-mix(in srgb, var(--color-feature-texts-soft) 65%, var(--color-surface));
    color: var(--color-text);
}

.overview-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem 0.55rem;
    margin-top: 0.36rem;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 700;
}

.overview-message-author {
    color: var(--color-text-muted);
    font-weight: 800;
}

.overview-communication-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.overview-communication-direction .gmi {
    color: currentColor;
    font-size: var(--ui-type-meta);
}

.overview-call-status {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    padding: 0.22rem 0.38rem;
    font-size: var(--ui-type-meta);
    text-transform: uppercase;
}

.overview-row-status-rail {
    display: grid;
    align-content: start;
    justify-items: end;
    align-self: stretch;
    min-width: 0;
    gap: 0.28rem;
}

.overview-row-primary-status,
.overview-row-secondary-statuses {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.overview-row-status-timestamp {
    display: block;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 720;
    line-height: 1.12;
    text-align: center;
    white-space: pre-line;
}

.overview-call-trailing {
    max-width: 9.5rem;
}

.overview-call-timestamp {
    justify-self: center;
}

.overview-call-badge-signals {
    flex-wrap: wrap;
    gap: 0.2rem;
}

.overview-call-account {
    display: block;
    margin-bottom: 0.04rem;
    text-align: left;
}

.overview-call-duration {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 0.18rem;
    margin: 0;
    border-radius: 0.42rem;
    background: color-mix(in srgb, var(--color-feature-calls-soft) 58%, transparent);
    color: var(--color-feature-calls);
    padding: 0.14rem 0.34rem;
    font-size: var(--ui-type-meta);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.overview-call-duration .gmi {
    font-size: 0.84rem;
}

.overview-call-signal {
    padding: 0.22rem 0.4rem;
    font-size: var(--ui-type-meta);
}

.overview-call-signal .gmi {
    flex: 0 0 auto;
    font-size: var(--ui-type-meta);
}

.overview-call-signal-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    min-height: 1.35rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    padding-inline: 0.34rem;
    font-size: var(--ui-type-badge);
    font-weight: 850;
}

.overview-message-status {
    align-self: start;
    max-width: 5.8rem;
    overflow: hidden;
    font-size: var(--ui-type-meta);
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.overview-message-timestamp {
    justify-self: center;
}

.overview-message-party-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.28rem;
}

.overview-message-party-heading > strong {
    min-width: 0;
}

.overview-contact-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-feature-contacts-border);
    border-radius: 0.65rem;
    background: var(--color-feature-contacts-soft);
    color: var(--color-feature-contacts);
    font-size: var(--ui-type-meta);
    font-weight: 950;
}

.overview-contact-avatar > .gmi:first-child {
    font-size: 1.15rem;
}

.overview-contact-latest-kind {
    position: absolute;
    right: -0.28rem;
    bottom: -0.24rem;
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-surface-elevated);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    font-size: var(--ui-type-meta);
    box-shadow: var(--shadow-sm);
}

.overview-contact-latest-kind.is-call {
    color: var(--color-feature-calls);
}

.overview-contact-latest-kind.is-text {
    color: var(--color-feature-texts);
}

.overview-contact-latest-kind.is-incoming {
    background: #dbeafe;
    color: #1d4ed8;
}

.overview-contact-latest-kind.is-outgoing {
    background: #f3e8ff;
    color: #7e22ce;
}

.overview-contact-counts {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
}

.overview-contact-trailing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-self: stretch;
    align-items: center;
    justify-items: end;
    width: max-content;
    max-width: 100%;
    align-content: center;
    min-width: 0;
    column-gap: 0.3rem;
}

.overview-contact-state-line {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 0.32rem;
}

.overview-contact-live-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 1.42rem;
    gap: 0.25rem;
    border: 1px solid var(--color-call-active-border);
    border-radius: 999px;
    background: var(--color-call-active-soft);
    color: var(--color-call-active);
    padding: 0.12rem 0.38rem;
    font-size: var(--ui-type-caption);
    font-weight: 900;
    line-height: 1;
}

.overview-contact-live-badge > span:first-child {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--color-call-active);
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--color-call-active) 14%, transparent);
}

.overview-contact-live-badge strong {
    margin: 0;
    overflow: visible;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.overview-contact-trailing .overview-row-trailing {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-right: 0.15rem;
}

.overview-contact-activity {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    justify-self: center;
    min-width: 0;
    gap: 0.32rem;
    color: var(--color-text-subtle);
    font-size: var(--ui-type-meta);
    font-weight: 720;
    line-height: 1.12;
    text-align: center;
    white-space: pre-line;
}

.overview-contact-activity-kind {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.16rem;
    color: var(--color-text-muted);
    font-size: var(--ui-type-meta);
    font-weight: 700;
    line-height: 1;
}

.overview-contact-activity-kind.is-call {
    color: var(--color-feature-calls);
}

.overview-contact-activity-kind.is-text {
    color: var(--color-feature-texts);
}

.overview-contact-activity-icon {
    font-size: var(--ui-type-meta);
}

.overview-contact-counts > span {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    min-height: 1.65rem;
    padding: 0.2rem 0.52rem;
    font-size: var(--ui-type-meta);
    font-weight: 850;
    line-height: 1;
}

.overview-contact-counts .gmi {
    color: currentColor;
    font-size: 0.9rem;
}

.overview-contact-counts > .is-calls {
    border-color: var(--color-feature-calls-border);
    background: color-mix(in srgb, var(--color-feature-calls-soft) 72%, var(--color-surface-elevated));
    color: var(--color-feature-calls);
}

.overview-contact-counts > .is-messages {
    border-color: var(--color-feature-texts-border);
    background: color-mix(in srgb, var(--color-feature-texts-soft) 72%, var(--color-surface-elevated));
    color: var(--color-feature-texts);
}

.overview-message-media {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.38rem;
}

.overview-message-media-item {
    min-width: 0;
    border: 1px solid var(--color-feature-texts-border);
    border-radius: 0.5rem;
    background: var(--color-feature-texts-soft);
    color: var(--color-feature-texts);
    text-decoration: none;
}

.overview-message-media-item.is-image {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    overflow: hidden;
}

.overview-message-media-item.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overview-message-media-item.is-file {
    display: inline-flex;
    align-items: center;
    max-width: 8rem;
    gap: 0.24rem;
    padding: 0.32rem 0.42rem;
    font-size: var(--ui-type-meta);
    font-weight: 800;
}

.overview-message-media-item.is-file > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-message-media-more {
    color: var(--color-feature-texts);
    font-size: var(--ui-type-meta);
    font-weight: 850;
}

.overview-workspace .overview-contact-row:where(:nth-child(odd of .overview-contact-row)):not(.has-active-call):not(.is-selected) {
    background: var(--communication-record-bg);
}

.overview-workspace .overview-contact-row:where(:nth-child(even of .overview-contact-row)):not(.has-active-call):not(.is-selected) {
    background: var(--communication-row-stripe);
}

.overview-workspace .overview-contact-row:not(.is-selected):hover,
.overview-workspace .overview-contact-row:not(.is-selected):focus-within {
    background: var(--communication-row-hover);
}

.overview-workspace .overview-contact-row.is-selected {
    background: var(--communication-record-selected);
    box-shadow: inset 3px 0 var(--communication-selection-ink), inset 0 0 0 1px var(--communication-selection-ink);
}

.overview-row-trailing {
    align-self: center;
    color: var(--color-text-subtle);
    font-size: 1rem;
}

.overview-contact-row.is-selected .overview-row-trailing {
    color: var(--communication-selection-ink);
}

.overview-panel-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    gap: 0.4rem;
    color: var(--color-text-subtle);
    padding: 1.5rem;
    text-align: center;
}

.overview-panel-empty > .gmi {
    font-size: 2rem;
    color: var(--color-brand);
}

.overview-panel-empty strong {
    color: var(--color-text);
    font-size: var(--ui-type-title);
}

.overview-panel-empty span:last-child {
    max-width: 16rem;
    font-size: var(--ui-type-meta);
    line-height: 1.45;
    text-wrap: balance;
}

.overview-call-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem;
}

.overview-call-drawer-body.is-call-detail-body {
    display: block;
    overflow-y: auto;
}

.workspace-communication-inspector-title {
    font-size: 1.15rem;
}

.workspace-communication-inspector-content {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.workspace-communication-inspector-content.call-detail-card-host {
    display: block;
}

.workspace-communication-inspector-content.call-detail-card-host > .phonecall.comm-card {
    height: auto;
    max-height: none;
    overflow: hidden;
    scrollbar-gutter: auto;
    width: 100%;
    max-width: none;
    margin: 0;
}

.workspace-communication-inspector-content > .txtmsg {
    width: 100%;
    max-width: none;
    margin: 0;
}


@media (min-width: 1180px) {
    .btn-page-overview,
    .btn-page-conversations {
        display: flex;
    }

    .overview-workspace.is-conversations {
        width: 100%;
        transform: none;
    }
}

@media (min-width: 1900px) {
    .overview-workspace.is-conversations {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/* Conversations shares the dock's width and center, clearing navigation when needed. */
@media (min-width: 1180px) {
    html body.workspace-shell-view.overview-workspace-view.overview-conversations-mode main.content > section.overview.app-section {
        grid-column: 1 / -1;
        width: min(var(--app-communications-width, 76rem), calc(100% - var(--app-sidebar-width) - 2 * var(--app-shell-gutter, .5rem)));
        max-width: none;
        justify-self: start;
        margin-left: max(calc(var(--app-sidebar-width) + var(--app-shell-gutter, .5rem)), calc((100% - var(--app-communications-width, 76rem)) / 2));
    }
    html body.workspace-shell-view.overview-workspace-view:not(.overview-conversations-mode):not(:where(.has-workspace-tools-panel)) main.content > section.overview.app-section {
        grid-column: 1 / 4;
        width: auto;
        max-width: none;
        justify-self: stretch;
        margin: .5rem .5rem .5rem calc(var(--app-sidebar-width) + .5rem);
        transform: none;
    }
}
@media (max-width: 1179px) {
    /* Below the desktop shell, preserve the previous full-width tablet layout. */
    body.overview-workspace-view main.content > section.overview.app-section {
        display: flex; flex-direction: column; width: 100%; max-width: none;
        min-height: 0; flex: 1 1 auto; padding: .4rem; margin: 0;
    }
    .overview-workspace, .overview-conversations-layout { min-height: 0; flex: 1 1 auto; }
}

/* Preserve identity before compressing metadata. */
.overview-row strong, .overview-contact-name-line > strong,
.overview-call-party-identity .overview-party-number, .overview-contact-detail-line .overview-row-preview {
    white-space: normal; overflow-wrap: break-word; text-overflow: clip; overflow: visible;
}
.overview-row-eyebrow { white-space: normal; overflow-wrap: break-word; text-transform: none; letter-spacing: 0; }
.overview-row-status-rail { max-width: 9rem; }
.overview-row-status-timestamp { white-space: normal; }
.overview-row-status-timestamp .ui-timestamp { text-align: center; }
.overview-message-status { max-width: 100%; white-space: normal; text-transform: none; }
.overview-call-row.is-active-call, .overview-contact-row.has-active-call { background: var(--color-surface); }
.overview-call-duration { font-variant-numeric: tabular-nums; }
.overview-contact-counts { flex-wrap: wrap; }
.overview-row-live-details { grid-column: 2 / -1; min-width: 0; border-top: 1px solid var(--color-border-muted); padding-top: .3rem; }
.overview-row-live-details summary { font-size: var(--ui-type-meta); color: var(--color-text-muted); cursor: pointer; }
.overview-row-live-leg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .6rem; padding-block: .3rem; font-size: var(--ui-type-meta); }
.overview-row-live-leg > span:first-child { overflow-wrap: anywhere; }
.overview-row-live-action { grid-column: 2 / -1; justify-self: start; }
.overview-row-direction { font-size: var(--ui-type-meta); color: var(--color-text-muted); }
.overview-panel-loaded { flex: 0 0 auto; padding: .3rem .7rem; color: var(--color-text-muted); font-size: var(--ui-type-meta); }
.overview-conversation-timeline .overview-message-preview { max-width: 70ch; -webkit-line-clamp: unset; }

@container communication-panel (max-width: 27rem) {
    .overview-row { grid-template-columns: 1.8rem minmax(0, 1fr); gap: .45rem; padding: .65rem; }
    .overview-row-status-rail, .overview-contact-trailing {
        grid-column: 2; width: 100%; max-width: none; display: flex; flex-wrap: wrap;
        justify-content: space-between; align-items: center; gap: .4rem;
        border-top: 1px solid var(--color-border-muted); padding-top: .4rem;
    }
    .overview-row-status-rail .ui-timestamp.is-stacked time { flex-direction: row; gap: 0 .3rem; }
    .overview-contact-trailing .overview-contact-activity { flex: 1 1 100%; }
    .overview-contact-trailing .overview-row-trailing { display: none; }
    .overview-row-leading { width: 1.8rem; height: 1.8rem; }
    .workspace-pane-header, .call-collection-tabs, .workspace-side-switch { --workspace-panel-header-height: 3.6rem; --workspace-panel-header-padding: .6rem; }
    .workspace-pane-header { gap: .4rem; }
    .overview-row-secondary-statuses { flex-wrap: wrap; }
}

/* Edge surfaces attach to their owner, so expanded rails need no guessed offsets. */
:root { --workspace-edge-radius: .65rem; --workspace-edge-border: var(--communication-rail-separator); }
.workspace-edge-tab { color: var(--communication-rail-text); background: var(--communication-rail-background); box-shadow: var(--elevation-floating-control); }
/* Notices participate in the context/header flow so collections remain unobscured. */
#workspace_status_host, #workspace_updates_host { position: relative; display: flex; justify-content: center; width: 100%; min-width: 0; padding-inline: .5rem; box-sizing: border-box; pointer-events: none; }
#workspace_status_host { z-index: 35; }
#workspace_updates_host { z-index: 2; }

#activity_overview_toggle_host { display: inline-flex; }
.overview-call-analysis { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; border-top: 1px solid var(--color-border-muted); padding-top: .4rem; }
.overview-call-analysis .communication-semantic-badge { max-width: 100%; white-space: normal; }
@media (pointer: coarse) {
    .overview-row-live-details summary { min-height: 2.75rem; display: flex; align-items: center; }
}

@container workspace-board (min-width: 96rem) {
    .overview-board { grid-template-columns: var(--dashboard-wide-columns, repeat(4, minmax(0, 1fr))); --dashboard-current-max-width: var(--dashboard-wide-max-width, 130rem); }
    .overview-calls-group { --dashboard-split-calls: 1; }
    .overview-calls-group.is-showing-voicemail > .overview-active-panel,
    .overview-calls-group.is-showing-recent > .overview-active-panel,
    .overview-calls-group.is-showing-active > .overview-recent-panel { display: flex; }
    .overview-calls-group .overview-active-panel .call-collection-tabs { display: none !important; }
    .overview-calls-group .overview-active-panel .overview-panel-header { display: flex; }
}

@container conversation-layout (max-width: 48rem) {
    .overview-conversations-layout > .overview-conversations,
    .overview-conversations { grid-template-columns: minmax(0, 1fr); }
    .overview-conversations:not(.has-selected-conversation) > .overview-conversation-thread,
    .overview-conversations.has-selected-conversation > .overview-conversation-index { display: none; }
    .overview-conversation-mobile-back { display: inline-flex; align-self: flex-start; margin: .4rem; }
}

.overview-contact-name-action { padding: 0; border: 0; border-radius: .2rem; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.overview-contact-name-action strong { white-space: normal; overflow-wrap: break-word; }

.overview-contact-counts > .overview-contact-count-scope { border: 0; padding: 0; background: transparent; color: var(--color-text-muted); font-size: var(--ui-type-meta); }

/* Let records pass behind the dock; the scroll end keeps the final record reachable. */
.overview-panel-list, .overview-conversation-contact-list, .overview-conversation-timeline {
    padding-bottom: calc(var(--communication-dock-overlay-height, 0px) + 1rem);
    scroll-padding-bottom: calc(var(--communication-dock-overlay-height, 0px) + 1rem);
}

/* Counts and last activity share one compact metadata row. */
.overview-contact-trailing { column-gap: .65rem; }
@container communication-panel (max-width: 27rem) {
    .overview-contact-trailing { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .overview-contact-trailing .overview-contact-state-line { grid-column: 1; grid-row: 1; }
    .overview-contact-trailing .overview-contact-activity { grid-column: 2; grid-row: 1; text-align: end; }
    .overview-contact-trailing .ui-timestamp time { justify-content: flex-end; }
}

/* Conversation metadata uses the same tracks for every row, regardless of values. */
.overview-contact-row.is-conversation-contact .overview-contact-trailing {
    display: grid; grid-column: 2; grid-row: 2; grid-template-columns: 9rem minmax(0, 1fr);
    width: 100%; column-gap: .6rem;
}
.overview-contact-row.is-conversation-contact { grid-template-columns: 1.8rem minmax(0, 1fr); }
.overview-contact-row.is-conversation-contact > .overview-row-content { grid-column: 2; grid-row: 1; }
.overview-contact-row.is-conversation-contact > .overview-contact-avatar { grid-column: 1; grid-row: 1; }
.overview-contact-row.is-conversation-contact .overview-contact-state-line { grid-column: 1; grid-row: 1; width: 100%; }
.overview-contact-row.is-conversation-contact .overview-contact-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .3rem; }
.overview-contact-row.is-conversation-contact .overview-contact-counts > span { justify-content: center; min-width: 0; padding-inline: .3rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.overview-contact-row.is-conversation-contact .overview-contact-activity { grid-column: 2; grid-row: 1; width: 100%; justify-self: stretch; text-align: end; }
.overview-contact-row.is-conversation-contact .overview-contact-activity time { justify-content: flex-end; }
.overview-contact-row.is-conversation-contact .overview-row-trailing { display: none; }

/* Shared with focused communication cards; direction stays in icons and rails. */
.overview-call-row:not(.is-active-call) {
    background: var(--communication-call-surface);
}
.overview-message-row,
.overview-conversation-timeline > .overview-message-row {
    background: var(--communication-text-surface);
}

/* Participant attention is separate from correspondence totals. */
.overview-contact-row.is-conversation-contact { grid-template-columns: 1.8rem minmax(0, 1fr) auto; }
.overview-contact-row.is-conversation-contact .overview-contact-trailing { grid-column: 2 / -1; }
.overview-participant-attention { grid-column: 3; grid-row: 1; display: grid; gap: .3rem; align-self: center; }
.overview-participant-attention > span { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid; border-radius: 999px; padding: .25rem .4rem; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.overview-participant-attention .has-live-calls { background: var(--color-call-active-soft); color: var(--color-call-active); }
.overview-participant-attention .has-new-texts { background: var(--color-feature-texts-soft); color: var(--color-feature-texts); }
.overview-participant-attention .gmi { font-size: .85rem; }

/* Shared summaries in Live Calls, Recent Calls, and Conversations. */
.overview-row.summary-call-card,
.overview-row.summary-message-card {
 --summary-time-column: 5.5rem;
 --summary-control-column: 4.35rem;
 --summary-gap: .75rem;
 --summary-direction: var(--communication-direction-incoming);
 --summary-channel-ink: var(--communication-summary-call-ink);
 --summary-channel-surface: color-mix(in srgb, var(--summary-channel-ink) 9%, var(--color-surface));
 --summary-divider: color-mix(in srgb, var(--summary-channel-ink) 18%, transparent);
 --summary-heading-bg: color-mix(in srgb, var(--summary-channel-ink) 8%, var(--communication-record-bg));
 position: relative;
 isolation: isolate;
 display: block;
 padding: 0;
 overflow: hidden;
 background: var(--communication-record-bg);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-lg, .75rem);
 box-shadow: inset 3px 0 var(--summary-channel-ink), 0 1px 2px color-mix(in srgb, var(--color-text) 5%, transparent);
 transition: border-color .15s ease, box-shadow .15s ease;
}
.overview-row.summary-call-card { container: call-summary / inline-size; }
.overview-row.summary-message-card { container: message-summary / inline-size; --summary-channel-ink: var(--communication-summary-text-ink); }
.overview-row.summary-call-card.outgoing,
.overview-row.summary-message-card.outgoing { --summary-direction: var(--communication-direction-outgoing); }
.overview-panel-list > .summary-call-card,
.overview-panel-list > .summary-message-card { margin: .4rem .5rem; width: calc(100% - 1rem); }
.communication-summary-body { padding: .65rem .75rem; }
.summary-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-bottom: .65rem; border-bottom: 0; background: var(--call-header-background, var(--summary-heading-bg)); border-radius: .5rem; padding: .4rem .5rem; }
.summary-card-heading .summary-channel { display: inline-flex; align-items: center; min-width: 0; gap: .6rem; font-size: .875rem; }
.summary-channel > .communication-entity-icon { color: var(--summary-channel-ink); background: var(--summary-channel-surface); border-color: var(--summary-divider); }
.summary-card-heading .summary-channel > .overview-row-leading { flex-shrink: 0; }
.summary-account-meta { display: grid; gap: .2rem; min-width: 0; }
.summary-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-card-heading .summary-header-date { margin: 0; text-align: left; font-size: .75rem; }
.summary-card-heading .summary-header-date time { justify-content: flex-start; }
.summary-card-heading .summary-header-status { grid-column: 2; justify-self: end; max-width: 100%; white-space: normal; }
.summary-call-grid,
.summary-message-header { display: grid; grid-template-columns: var(--summary-time-column) minmax(0, 1fr) var(--summary-control-column); gap: var(--summary-gap); align-items: center; }
/* Completed calls give the unused parent-control space back to the route. */
.summary-call-grid:not(:has(.summary-statuses)) > .summary-call-route { grid-column: 2 / -1; }
.summary-message-header { margin-bottom: .85rem; grid-template-columns: var(--summary-time-column) minmax(0, 1fr); }

.summary-time-status,
.summary-leg-time { display: grid; align-content: center; justify-items: start; min-width: 0; gap: .1rem; font-size: .75rem; line-height: 1.35; color: var(--color-text-muted); }
.summary-time-status .ui-timestamp,
.summary-leg-time time { font-size: .75rem; font-weight: 750; white-space: nowrap; }
.summary-call-card .summary-leg-status { font-size: .72rem; line-height: 1.35; font-weight: 500; text-transform: none; color: var(--color-text-muted); overflow-wrap: normal; white-space: nowrap; }
/* Reuse the full timeline's state palette for the complete timing column. */
.summary-call-card [data-leg-status] { color: var(--call-leg-status-text, var(--color-text-muted)); }
.summary-call-card [data-leg-status] .ui-timestamp,
.summary-call-card [data-leg-status] .summary-leg-status,
.summary-call-card [data-leg-status] .summary-duration,
.summary-call-card [data-leg-status] .summary-leg-duration { color: inherit; }

/* Endpoints share all available route space; measured phone widths govern reflow. */
.summary-call-card .summary-route,
.summary-message-card .summary-route { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem 6rem; column-gap: .4rem; align-items: center; min-width: 0; }
.summary-call-card .summary-route.inline:not(.has-selection),
.summary-message-card .summary-route.inline { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); }
.summary-endpoint-unit { display: block; min-width: 0; }
.summary-route-from { grid-column: 1; grid-row: 1; }
.summary-route-to { grid-column: 3; grid-row: 1; }
.summary-endpoint { min-width: 0; }
.summary-endpoint > small { display: block; color: var(--color-text-muted); text-transform: uppercase; font-size: .68rem; }
.summary-endpoint-heading { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.summary-endpoint-heading > strong { font-size: .8125rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-endpoint .overview-party-number-line { flex-wrap: nowrap; }
.summary-endpoint .overview-party-number { display: block; white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
/* Solid 24px arrows: no glow, opacity animation, or fractional scaling. */
.summary-flow-arrow { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--summary-direction); }
.summary-flow-arrow svg { display: block; width: 24px; height: 24px; }
.summary-selection-step { grid-column: 4 / 6; grid-row: 1; display: flex; align-items: center; gap: .4rem; min-width: 0; }
.summary-selection-arrow { flex: 0 0 1.5rem; }
.summary-call-card .summary-route.wrap-selection, .summary-message-card .summary-route.wrap-selection { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); }
.summary-route.wrap-selection .summary-selection-step { grid-column: 1 / -1; grid-row: 2; justify-self: end; max-width: 100%; margin-top: .6rem; }
.summary-queue-slot { min-width: 0; }
.summary-route-selection { display: flex; flex-direction: column; gap: .1rem; align-items: flex-start; justify-content: center; min-width: 0; width: 6rem; max-width: 100%; padding: .5rem .45rem; border: 0; border-left: 2px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); }
.summary-route-selection small { font-size: .7rem; line-height: 1.2; text-transform: uppercase; color: var(--color-text-muted); }
.summary-route-selection strong { max-width: 100%; min-width: 0; font-size: .75rem; font-weight: 700; white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
.summary-statuses { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: end; gap: .45rem; min-width: 0; }
.summary-call-card .summary-duration { display: inline-flex; align-items: center; gap: .2rem; background: transparent; border: 0; padding: 0; white-space: nowrap; color: var(--color-text-muted); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.summary-parent-disconnect.phonerow { background: transparent; border: 0; padding: 0; }
.summary-parent-disconnect .call-disconnect-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; }
.summary-parent-disconnect .call-disconnect-button .gmi { font-size: .85rem; }

/* Parent progress starts under From and can use the full route width. */
.summary-call-card .summary-call-grid { grid-template-columns: var(--summary-time-column) minmax(0, 1fr); }
.summary-call-card .summary-call-route.inline { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(var(--summary-routing-width), .65fr); }
.summary-call-route .summary-selection-step { justify-content: flex-start; justify-self: stretch; align-self: start; }
.summary-call-route .summary-queue-slot { display: grid; justify-items: start; gap: .3rem; min-width: 0; flex: 1; }
.summary-call-route .summary-route-selection { align-items: flex-start; text-align: left; width: auto; max-width: var(--summary-routing-width); border-left: 0; padding: 0; }
.summary-parent-progress { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; margin-top: .45rem; max-width: 100%; }
.summary-route-from-status { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.summary-parent-actions { flex: 0 0 auto; }
.summary-route.wrap-selection.has-from-status .summary-selection-step { grid-row: 3; }
.summary-route.cascade.has-from-status > .summary-flow-arrow,
.summary-route.cascade.has-from-status .summary-route-to { grid-row: 3; }
.summary-route.cascade.has-from-status .summary-selection-step { grid-row: 4; }
.summary-route.straight.has-from-status > .summary-flow-arrow { grid-row: 3; }
.summary-route.straight.has-from-status .summary-route-to { grid-row: 4; }
.summary-route.straight.has-from-status .summary-selection-step { grid-row: 5; }
.summary-route:is(.cascade, .straight) .summary-parent-progress { margin-top: 0; }
.summary-parent-progress .call-participant-state { justify-content: flex-start; }
.summary-parent-progress .call-participant-state .call-duration-value { min-width: 0; text-align: left; }
.summary-call-legs .call-participant-content { padding-inline: 0; }
.summary-call-legs .call-participant-actions:empty { display: flex; }
.summary-call-route.wrap-selection .summary-selection-step { width: min(100%, calc(var(--summary-routing-width) + 1.9rem)); }
.summary-call-route.cascade .summary-selection-step, .summary-call-route.straight .summary-selection-step { justify-self: end; margin-left: 0; width: min(100%, calc(var(--summary-routing-width) + 1.9rem)); }

/* Audience and join controls stay separate from endpoint and duration fields. */
.summary-call-card .summary-context-badges { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .65rem; }
.summary-context-badges .communication-semantic-badge { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; color: var(--color-text-muted); font-size: .72rem; font-weight: 500; text-transform: none; }
.summary-call-card .summary-call-legs { margin-top: .5rem; }
.summary-call-card .summary-call-leg { display: grid; grid-template-columns: var(--summary-time-column) minmax(0, 1fr); gap: var(--summary-gap); align-items: center; padding-block: .75rem; background: transparent; border: 0; border-top: 1px solid var(--summary-divider); }
.summary-leg-details { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.summary-leg-person { flex: 1 1 auto; min-width: 0; padding-left: 0; border-left: 0; }
.summary-leg-person > * { display: block; overflow-wrap: anywhere; }
.summary-leg-person > strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-leg-person > span, .summary-leg-person > small { font-size: .72rem; color: var(--color-text-muted); }
.summary-leg-duration { display: inline-flex; align-items: center; gap: .2rem; justify-self: start; white-space: nowrap; font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.summary-time-status .summary-duration, .summary-leg-time .summary-leg-duration { margin-top: .4rem; justify-self: start; justify-content: flex-start; text-align: left; }
.summary-leg-duration .gmi, .summary-duration .gmi { font-size: .85rem; }
.summary-leg-controls { display: grid; align-items: center; grid-template-columns: repeat(2, 2rem); gap: .35rem; flex: 0 0 var(--summary-control-column); }
.summary-leg-controls button { display: grid; place-items: center; align-self: center; height: 2rem; width: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; border: 1px solid var(--color-border-muted); border-radius: .45rem; background: var(--color-surface); color: var(--color-text-muted); }
.summary-leg-controls button:disabled { opacity: .55; cursor: default; }
.summary-leg-controls .call-disconnect-button:not(:disabled) { color: var(--color-danger, #b53f4f); }
.summary-call-card .summary-attempts-toggle { width: 100%; margin-top: .2rem; }
.summary-call-card .summary-ai-insights { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .45rem; padding: .45rem .6rem; border: 1px solid var(--summary-divider); border-radius: .5rem; background: color-mix(in srgb, var(--summary-channel-ink) 6%, var(--communication-record-bg)); font-size: var(--ui-type-meta); }
.summary-ai-fields { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem 1rem; align-items: center; }
.summary-ai-label { flex: 0 0 auto; display: inline-flex; gap: .25rem; align-items: center; color: var(--color-feature-calls); font-weight: 850; }
.summary-ai-label .gmi { font-size: 1rem; }
.summary-ai-finding { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-width: 0; max-width: 100%; font-weight: 650; }
.summary-ai-finding .communication-semantic-badge { max-width: 100%; font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; white-space: normal; overflow-wrap: anywhere; }
.summary-ai-finding .communication-semantic-badge .gmi { font-size: .85rem; flex-shrink: 0; }
.summary-ai-finding small { color: var(--color-text-muted); font-size: .68rem; font-weight: 500; }
.summary-message-card .overview-row-content { display: block; }
.summary-message-card .overview-message-preview { margin-top: 0; background: var(--communication-record-bg); }
.summary-message-card .overview-message-media { justify-content: center; gap: .65rem; }

/* Reflow against actual phone widths, including changes caused by opening Tools. */
.summary-call-card .summary-route.cascade, .summary-message-card .summary-route.cascade {
    grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .5rem; row-gap: .6rem;
}
.summary-route.cascade .summary-route-from { grid-column: 1 / -1; grid-row: 1; }
.summary-route.cascade > .summary-flow-arrow { grid-column: 1; grid-row: 2; }
.summary-route.cascade .summary-route-to { grid-column: 2; grid-row: 2; }
.summary-route.cascade .summary-selection-step { grid-column: 1 / -1; grid-row: 3; margin-left: 2rem; }
.summary-call-card .summary-route.straight, .summary-message-card .summary-route.straight { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; }
.summary-route.straight .summary-route-from { grid-column: 1; grid-row: 1; }
.summary-route.straight > .summary-flow-arrow { grid-column: 1; grid-row: 2; transform: rotate(90deg); }
.summary-route.straight .summary-route-to { grid-column: 1; grid-row: 3; }
.summary-route.straight .summary-selection-step { grid-column: 1; grid-row: 4; flex-direction: column; align-items: flex-start; gap: .35rem; }
.summary-route.straight .summary-selection-arrow { transform: rotate(90deg); }
.summary-endpoint .overview-party-number { flex-shrink: 0; }
@container (max-width: 32rem) {
 .summary-time-status { align-self: start; padding-top: .5rem; }
}
@container (max-width: 24rem) {
 .summary-card-heading { gap: .3rem; }
 .summary-call-grid, .summary-message-header { grid-template-columns: var(--summary-time-column) minmax(0, 1fr); gap: .6rem; }
 .summary-statuses { grid-column: 2; grid-row: 2; }
 .summary-call-card .summary-call-leg { gap: .6rem; }
 .summary-leg-details { flex-wrap: wrap; justify-content: flex-end; }
 .summary-leg-person { flex-basis: 100%; }
}
@media (pointer: coarse) {
 .summary-call-card .summary-attempts-toggle, .summary-call-action-row .summary-primary-action, .summary-parent-disconnect .call-disconnect-button { min-height: 2.75rem; }
 .overview-row.summary-call-card, .overview-row.summary-message-card { --summary-control-column: 5.85rem; }
 .summary-leg-controls { grid-template-columns: repeat(2, 2.75rem); }
 .summary-leg-controls button { min-width: 2.75rem; width: 2.75rem; min-height: 2.75rem; }
}

/* Collection headers and contact metadata retain their existing layout. */
.overview-board .workspace-pane-header,
.overview-board .call-collection-tabs { --workspace-panel-header-height: 4.65rem; --workspace-panel-header-padding: .72rem .82rem; }
@container workspace-board (max-width: 81rem) {
 .overview-board .workspace-pane-header,
 .overview-board .call-collection-tabs { --workspace-panel-header-height: 3.6rem; --workspace-panel-header-padding: .6rem; }
}
.overview-contact-row { column-gap: .7rem; padding-inline: 1rem; }
/* Dashboard counts sit beside activity; conversations retain their current pills. */
.overview-contact-row:not(.is-conversation-contact) .overview-contact-trailing {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: .8rem;
}
.overview-contact-row:not(.is-conversation-contact) .overview-contact-activity {
    grid-column: 2; grid-row: 1; justify-self: end; text-align: end; max-width: 6rem;
}
.overview-contact-row:not(.is-conversation-contact) .overview-contact-activity time { justify-content: flex-end; }
.overview-contact-row:not(.is-conversation-contact) .overview-row-trailing { display: none; }
.overview-contact-row:not(.is-conversation-contact) .overview-contact-counts { min-width: 0; flex-wrap: wrap; gap: .3rem .65rem; }
.overview-contact-row:not(.is-conversation-contact) .overview-contact-counts > span {
    border: 0; border-radius: 0; background: transparent; padding: 0; min-height: 0;
    white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650;
}
.overview-contact-detail-line .overview-row-preview { white-space: nowrap; }
.overview-contact-activity time > span { white-space: nowrap; }

/* Keep desktop contact metadata beside the identity until the panel is narrow. */
@container communication-panel (min-width: 24rem) {
    .overview-contact-row:not(.is-conversation-contact) { grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; }
    .overview-contact-row:not(.is-conversation-contact) .overview-contact-trailing {
        grid-column: 3; grid-row: 1; display: grid; width: max-content; max-width: 100%;
        border-top: 0; padding-top: 0; column-gap: .65rem;
    }
    .overview-contact-row:not(.is-conversation-contact) .overview-contact-counts { display: grid; grid-template-columns: auto; gap: .25rem; }
    .overview-contact-row:not(.is-conversation-contact) .overview-contact-activity { max-width: none; }
}

/* Short dividers separate timing, participants, and controls. */
.summary-call-route, .summary-message-route, .summary-leg-details,
.summary-leg-controls { position: relative; }
.summary-call-route::before, .summary-message-route::before,
.summary-leg-details::before, .summary-leg-controls::before {
    content: ""; position: absolute; pointer-events: none;
    left: calc(var(--summary-gap) / -2); top: .2rem; bottom: .2rem;
    width: 1px; background: var(--summary-divider);
}

@container (max-width: 24rem) {
    .summary-statuses .summary-leg-controls::before,
    .summary-leg-details .summary-leg-controls::before { content: none; }
}

/* Text status lives in the header; message content uses the full card body. */
.summary-message-card .communication-summary-body > .overview-row-content { width: 100%; min-width: 0; }


/* Wide participant rows keep identity, counts and last activity side by side. */
@container communication-panel (min-width: 28rem) {
    .overview-contact-row.is-conversation-contact { grid-template-columns: 1.8rem minmax(0, 1fr) auto auto; align-items: center; }
    .overview-contact-row.is-conversation-contact .overview-participant-attention { grid-column: 3; grid-row: 1; }
    .overview-contact-row.is-conversation-contact .overview-contact-trailing { grid-column: 4; grid-row: 1; width: auto; grid-template-columns: auto 5.3rem; column-gap: .55rem; }
    .overview-contact-row.is-conversation-contact .overview-contact-counts { grid-template-columns: auto; width: auto; gap: .2rem; }
    .overview-contact-row.is-conversation-contact .overview-contact-counts > span { justify-content: flex-start; white-space: nowrap; }
}

/* Shared record interactions: selection remains stronger than hover. */
.overview-panel .summary-call-card:hover,
.overview-panel .summary-message-card:hover,
.overview-panel .overview-contact-row:hover {
    transform: none;
    border-color: var(--color-border-strong, var(--color-brand-border));
}
.overview-panel .summary-call-card:focus-within,
.overview-panel .summary-message-card:focus-within {
    border-color: var(--color-brand-border);
}
.overview-panel .summary-call-card.is-selected,
.overview-panel .summary-message-card.is-selected {
    background: var(--communication-record-selected);
    box-shadow: inset 3px 0 var(--summary-channel-ink), inset 0 0 0 1px var(--communication-selection-ink);
}
.overview-panel .overview-contact-row.is-selected {
    background: var(--communication-record-selected);
    box-shadow: inset 3px 0 var(--communication-selection-ink), inset 0 0 0 1px var(--communication-selection-ink);
}
.overview-contact-name-action:focus-visible { outline: 2px solid var(--communication-selection-ink); outline-offset: 3px; }
.overview-panel .overview-contact-row:not(.has-active-call):not(.is-selected) { background: var(--communication-record-bg); }
.overview-panel .overview-contact-row:nth-child(even of .overview-contact-row):not(.has-active-call):not(.is-selected) { background: var(--communication-row-stripe); }
.overview-panel .overview-contact-row:not(.is-selected):is(:hover, :focus-within) { background: var(--communication-row-hover); }
.overview-panel .summary-call-card:not(.is-selected):is(:hover, :focus-within),
.overview-panel .summary-message-card:not(.is-selected):is(:hover, :focus-within) { box-shadow: inset 3px 0 var(--summary-channel-ink), 0 2px 5px color-mix(in srgb, var(--color-text) 9%, transparent); }

/* Message content is readable in place; only its explicit controls are clickable. */
.overview-row.overview-message-row { cursor: default; }

/* The arrow belongs to the destination line, above lifecycle status and duration. */
.summary-route-destination { display: flex; align-items: flex-start; justify-content: flex-start; gap: .4rem; min-width: 0; }
.summary-route-destination .summary-selection-arrow { flex: 0 0 1.5rem; margin: .82rem 0 0; transform: none; }
.summary-route-destination .summary-route-selection { min-width: 0; }

.summary-call-route.inline .summary-endpoint-unit { align-self: start; }
.summary-call-route.inline > .summary-flow-arrow { align-self: start; margin-top: 1.1rem; }
.summary-call-route .summary-parent-actions:empty { display: none; }