/* ============================================
   Twigem Admin Dashboard Styles
   Theme: Light (Option 1 - Modern Classic)
   Inspired by: Nadalab.ai
   ============================================ */

/* ---- CSS Variables ---- */
:root {
    /* Colors — Nadalab.ai design system (nada-dashboard):
       iris (violet→blue, from the logo) primary · warm stone neutrals ·
       harbor teal info · dimmed amber/red semantics. */
    --bg-primary: #faf8f6;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #f2eeea;

    --text-primary: #1a1714;
    --text-secondary: #5f584e;
    --text-muted: #837a6f;

    --accent-primary: #6c5cde;
    --accent-secondary: #60a5fa;
    --accent-gradient: linear-gradient(135deg, #6c5cde 0%, #60a5fa 100%);
    --accent-glow: 0 0 20px rgba(108, 92, 222, 0.3);

    --success: #3f7d5a;
    --warning: #c08a2e;
    --error: #c13d33;
    --info: #35696a;

    --border-color: #e5ded7;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Typography — Sora (display) · Hanken Grotesk (body) · IBM Plex Mono */
    --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Sora', var(--font-family);

    /* Spacing */
    --sidebar-width: 260px;
    --header-height: 72px;

    /* Borders — DS radius scale: controls 10px (md), cards 14px (lg) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* Transitons */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Environment indicator */
    --env-ribbon-h: 28px;
    /* Layout offset reserved for the ribbon. 0 by default so production — which
       shows NO ribbon — has no blank gap; bumped to --env-ribbon-h only when a
       ribbon is actually rendered (body.has-env-ribbon, set by the JS). */
    --env-offset: 0px;
    --env-prod-bg: #B3261D;     /* deep crimson — UNVERIFIED only (production shows no ribbon) */
    --env-sandbox-bg: #0F766E;  /* teal — sandbox */
    --env-staging-bg: #475569;  /* slate — uat/sit/staging */
    --env-local-bg: #10B981;    /* emerald — local dev (uses dark text for contrast) */
    --env-text: #FFFFFF;
}

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
}

/* Headings set in the display face (Sora, tight tracking) per the DS. */
h1, h2, .page-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---- Login Page ---- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #faf8f6 0%, #f2eeea 100%);
    padding-top: var(--env-offset);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 24px;
}

.login-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header .logo {
    margin-bottom: 16px;
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--text-secondary);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-family);
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Shrink to the grid track instead of forcing horizontal overflow. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 222, 0.1);
}

.error-message {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: var(--radius-md);
    color: var(--error);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    line-height: 1.25;
    position: relative;
    overflow: hidden;
}

.btn-sm {
    padding: 6px 16px;
    font-size: 12px;
    gap: 6px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 32px;
    font-size: 16px;
    gap: 10px;
    border-radius: var(--radius-lg);
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow:
        0 4px 12px rgba(108, 92, 222, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(108, 92, 222, 0.35),
        0 0 15px rgba(96, 165, 250, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 6px rgba(108, 92, 222, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    filter: brightness(0.95);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.5);
}

.btn-secondary {
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(108, 92, 222, 0.1);
}

.btn-secondary:active {
    background: #eae4dd;
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:disabled {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.btn-warning:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.2);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}

.btn-success:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: white;
}

.btn-danger:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.footer-actions-right {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.btn-full {
    width: 100%;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Dashboard Layout ---- */
.dashboard {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    padding-top: var(--env-offset);
}

/* Reserve space for the ribbon only when one is actually shown (non-production).
   Production renders no ribbon, so --env-offset stays 0 and the chrome sits flush
   at the top. */
body.has-env-ribbon {
    --env-offset: var(--env-ribbon-h);
}

/* ---- Environment ribbon ---- */
.env-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--env-ribbon-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1001; /* above sidebar (1000) and content-header (50) */
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: #b5124e; /* single standard env-banner colour for all environments */
    user-select: none;
    white-space: nowrap;
}
.env-ribbon svg { width: 14px; height: 14px; }

/* The ribbon spans the MAIN content column only — not the sidebar, which
   reclaims the full viewport height via `.sidebar { top: 0 }` below. The login
   page has no sidebar (it IS .login-page, so it keeps the base left:0), and on
   mobile the sidebar is an off-canvas overlay (reset to 0 in the media query).
   Per-environment colours were dropped in favour of one standard banner colour
   (set on .env-ribbon above); the env-* classes from the JS are now inert. */
body:not(.login-page) .env-ribbon { left: var(--sidebar-width); }

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: transform var(--transition-base);
}

.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tall DNA-helix mark from the DS — fixed height, natural width. */
.sidebar-header .logo {
    height: 36px;
    width: auto;
}

.sidebar-header h1 {
    font-size: 18px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 0 12px;
    margin-bottom: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.nav-item:hover svg {
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--accent-gradient);
    color: white;
}

.nav-item.active svg {
    color: white;
}

.sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 15px;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Main Content ---- */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    /* Fixed-height shell: header stays put, the content body scrolls inside.
       Kills the window-level scrollbar (the stray ▲▼ on the right). */
    height: calc(100vh - var(--env-offset));
    min-height: 0;
    min-width: 0;
    width: calc(100% - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: margin-left var(--transition-base), width var(--transition-base);
}

.sidebar-collapsed .main-content {
    margin-left: 0;
    width: 100%;
}

.content-header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    /* .dashboard's padding-top already clears the fixed ribbon, so the header
       sticks at 0 within that offset — using --env-ribbon-h here double-counts
       it and opens a gap between the ribbon and the header. */
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-toggle {
    display: flex;
    color: var(--text-primary);
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
}

.search-box input {
    border: none;
    background: none;
    font-size: 13px;
    font-family: var(--font-family);
    width: 200px;
}

.search-box input:focus {
    outline: none;
}

.search-box svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.content-body {
    padding: 32px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Cards ---- */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-premium);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: 24px;
}

/* ---- Stats Grid ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.purple {
    background: rgba(108, 92, 222, 0.1);
    color: var(--accent-primary);
}

.stat-icon.green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon.blue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.stat-icon.orange {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-change {
    font-size: 12px;
    margin-top: 4px;
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--error);
}

/* ---- Table ---- */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-primary);
}

td {
    font-size: 15px;
    color: var(--text-primary);
}

tr:hover td {
    background: var(--bg-primary);
}

/* App → Recent Call Logs: stronger row feedback on hover/click than the
   near-invisible default above (accent-tinted instead of bg-primary). */
#calls-section tbody tr:hover td {
    background: rgba(108, 92, 222, 0.08);
}

#calls-section tbody tr:active td {
    background: rgba(108, 92, 222, 0.16);
}

/* ---- Status Badge ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.badge.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.badge.neutral {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ---- Utilities ---- */
.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.font-mono {
    font-family: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Loading State ---- */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ---- Modal ---- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the drawer (1200) so confirm/display dialogs raised from inside the
       drawer (rotate key, alerts) stack on top of it, not behind. */
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-small {
    max-width: 400px;
}

.modal-content.modal-xl {
    max-width: 1140px;
}

.text-xs {
    font-size: 11px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#test-phone {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-family);
    transition: all 0.2s;
    background: var(--bg-primary);
}

#test-phone:focus {
    outline: none;
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 222, 0.1);
}

/* ---- Form Enhancements ---- */
.form-row {
    display: grid;
    /* minmax(0,...) lets tracks shrink below input intrinsic width — without it
       number/text inputs refuse to shrink and force horizontal overflow. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.form-group select,
.filter-group select,
.form-group input[type="date"],
.filter-group input[type="date"],
.filter-group input[type="text"],
.search-field input[type="text"] {
    padding: 11px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-family);
    background: var(--bg-secondary);
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    min-width: 140px;
}

.filter-group input[type="text"],
.search-field input[type="text"] {
    background-image: none;
    padding-right: 16px;
    cursor: text;
}

.form-group select:focus,
.filter-group select:focus,
.form-group input[type="date"]:focus,
.filter-group input[type="date"]:focus,
.search-field input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 222, 0.1);
}

.form-group input[type="file"] {
    font-size: 13px;
    color: var(--text-secondary);
}

.form-group input[type="file"]::file-selector-button {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.2s;
}

.form-group input[type="file"]::file-selector-button:hover {
    background: var(--bg-primary);
    border-color: var(--text-muted);
}

.form-group textarea {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-family);
    resize: vertical;
    min-height: 100px;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 222, 0.1);
}

.form-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--accent-primary);
}

/* ---- Action Buttons ---- */
.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon.text-error:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.text-error {
    color: var(--error);
}

/* ---- Wide Modal & Form Sections ---- */
.modal-content.modal-wide {
    max-width: 700px;
}

.form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

/* Auto-fill Container */
.config-auto-fill {
    background: var(--bg-primary);
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.config-auto-fill label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.config-auto-fill .input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.config-auto-fill textarea {
    flex: 1;
    min-height: 42px !important;
    padding: 10px 14px;
}

.config-auto-fill .file-group {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 4px;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ---- Filters Bar ---- */
.filters-bar {
    padding: 20px 24px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.filters-row {
    display: flex;
    gap: 12px 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filters-row-search {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    align-items: center;
    gap: 12px;
}

/* Compact search: icon-led field, capped width — not a full-bleed input. */
.search-field {
    position: relative;
    flex: 1 1 280px;
    max-width: 460px;
}

.search-field input[type="text"] {
    width: 100%;
    padding-left: 42px;
}

.search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.search-ico:hover { color: var(--accent-primary); }

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Compact floor so App + Status + Period fit one row (search takes the 2nd). */
.filters-row .filter-group select { min-width: 132px; }

/* Quick date-range presets — pill chips, the row's one distinctive control. */
.period-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.period-pill {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.period-pill:hover { border-color: var(--accent-primary); color: var(--text-primary); }

.period-pill.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* Custom From → To pickers (shown only in Custom mode). */
.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range input[type="date"] { min-width: 150px; }
.date-sep { color: var(--text-muted); font-weight: 600; }

/* ---- Pagination ---- */
.pagination {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.pagination span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Range input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* ---- Status Switch (Modern Toggle) ---- */
.status-switch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    margin-top: 16px;
    gap: 8px;
    border-top: 1px solid var(--border-color);
}

.status-switch-container {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.status-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s;
    user-select: none;
}

.status-label.off-label {
    color: var(--text-muted);
}

.status-label.on-label {
    color: var(--success);
}

.status-switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 32px;
}

/* Hide the checkbox completely */
.status-switch input {
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    position: absolute;
    z-index: -1;
}

.status-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D1D5DB;
    /* Light gray for inactive */
    transition: .4s;
    border-radius: 32px;
}

.status-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.status-switch input:checked+.status-slider {
    background-color: var(--success);
    /* Green for active */
}

.status-switch input:checked+.status-slider:before {
    transform: translateX(68px);
    /* 100 - 24 - 8 = 68 */
}

.status-switch-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    transition: opacity 0.2s;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.status-switch-text.on {
    left: 12px;
    opacity: 0;
}

.status-switch-text.off {
    right: 10px;
    opacity: 1;
}

.status-switch input:checked+.status-slider .status-switch-text.off {
    opacity: 0;
}

.status-switch input:checked+.status-slider .status-switch-text.on {
    opacity: 1;
}

/* Sidebar Backdrop */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
    display: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Sidebar open logic moved to media query for mobile only */

/* ---- Live Test Modal ---- */
.lt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.lt-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.lt-status-badge.lt-status-connecting::before {
    background: #f59e0b;
    animation: lt-pulse 1s infinite;
}

.lt-status-badge.lt-status-connected {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.lt-status-badge.lt-status-connected::before {
    background: var(--success);
    animation: lt-pulse 2s infinite;
}

.lt-status-badge.lt-status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.lt-status-badge.lt-status-error::before {
    background: var(--error);
}

@keyframes lt-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.lt-media-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.lt-recording-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.lt-recording-section {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.lt-selected-label {
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-media-selects {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.lt-compact-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    max-width: 160px;
    min-width: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}

.lt-media-actions {
    display: flex;
    gap: 4px;
}

.lt-media-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.lt-media-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lt-media-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.lt-volume-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lt-video-container {
    background: #000;
    border-bottom: 1px solid var(--border-color);
}

.lt-chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 250px;
    max-height: 350px;
    background: var(--bg-primary);
}

.lt-msg {
    padding: 8px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
    max-width: 85%;
    word-wrap: break-word;
}

.lt-msg.system {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    max-width: 100%;
    font-style: italic;
}

.lt-msg.warning {
    background: #ef4444;
    color: white;
    font-weight: bold;
    text-align: center;
    max-width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
}

.lt-msg.user {
    background: var(--accent-primary);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.lt-msg.user-transcript {
    background: rgba(108, 92, 222, 0.2);
    color: var(--text-primary);
    margin-left: auto;
    border-bottom-right-radius: 4px;
    border: 1px dashed rgba(108, 92, 222, 0.3);
    opacity: 1;
}

.lt-msg.assistant {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.lt-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.lt-chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
}

.lt-chat-input-area input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 222, 0.1);
}

.lt-send-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: white;
    cursor: pointer;
    transition: all 0.15s;
}

.lt-send-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.btn-danger {
    background: var(--error);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-danger:hover {
    opacity: 0.9;
}

.lt-recording-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
}

#lt-call-recording-select {
    padding: 4px 8px;
    font-size: 11px;
    height: 28px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

/* Responsive Queries */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --env-ribbon-h: 24px;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-premium);
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* Sidebar is an off-canvas overlay on mobile → ribbon spans full width. */
    body:not(.login-page) .env-ribbon {
        left: 0;
    }

    .content-header {
        padding: 0 16px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .content-body {
        padding: 20px 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .modal-content {
        max-width: 95vw;
        border-radius: var(--radius-lg);
    }

    .modal-content.modal-wide {
        max-width: 95vw;
    }

    .header-actions {
        gap: 8px;
    }

    .header-actions .btn span {
        display: none;
    }

    .header-actions .btn {
        padding: 10px;
        min-width: 40px;
    }

    .header-actions .btn svg {
        margin: 0;
    }

    .filters-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-group {
        flex: 1 1 calc(50% - 4px);
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .filter-group {
        flex: 1 1 100%;
    }

    .modal-header h3 {
        font-size: 16px;
    }

    .stat-value {
        font-size: 24px;
    }

    /* Recording Selector Modal Styles */
    #lt-recording-selector-modal {
        display: none;
        position: fixed;
        z-index: 1100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #lt-recording-selector-modal .modal-content {
        background-color: var(--bg-primary);
        margin: 5% auto;
        padding: 20px;
        border: 1px solid var(--border-color);
        width: 80%;
        max-width: 800px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-premium);
    }

    #lt-recording-list-body tr td {
        vertical-align: middle;
    }

    .btn-xs {
        padding: 2px 6px;
        font-size: 11px;
    }

    .badge-info {
        background: #0ea5e9;
        color: white;
    }

    .badge-primary {
        background: var(--accent-primary);
        color: white;
        border: 1px solid var(--border-color);
    }

    #lt-selected-recording-label {
        display: inline-block;
        background: var(--bg-tertiary);
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
    }
}

/* ════════════════════════════════════════════════════════════════════
   PCI orchestrator page
   ════════════════════════════════════════════════════════════════════ */

/* Lifecycle pipeline — the page's signature. Each stage is a filter button. */
.pci-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 24px;
    margin-bottom: 20px;
}

.pci-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pci-stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 78px;
    padding: 10px 16px 10px 13px;
    border: 1px solid transparent;
    border-left: 3px solid var(--stage-color, var(--text-muted));
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.pci-stage:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.pci-stage.active {
    background: var(--bg-secondary);
    border-color: var(--stage-color);
    box-shadow: var(--shadow-md);
}

.pci-stage-count {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.pci-stage-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pci-stage.q { --stage-color: var(--text-muted); }
.pci-stage.d { --stage-color: var(--info); }
.pci-stage.p { --stage-color: var(--warning); }
.pci-stage.c { --stage-color: var(--success); }

.pci-arrow {
    color: var(--text-muted);
    font-size: 20px;
    opacity: 0.45;
    padding: 0 2px;
}

.pci-attention {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 24px;
    border-left: 1px solid var(--border-color);
}

.pci-attention-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pci-attention-clear {
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
}

.pci-chip {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.pci-chip:hover { background: rgba(239, 68, 68, 0.18); }

.pci-chip.active {
    background: var(--error);
    color: #fff;
    border-color: var(--error);
}

/* Jobs toolbar (search + vendor filter + active-filter clear) */
.pci-jobs-header {
    gap: 16px;
    flex-wrap: wrap;
}

.pci-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pci-search,
.pci-vendor-filter {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}

.pci-search { min-width: 220px; }

.pci-search:focus,
.pci-vendor-filter:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--accent-glow);
}

.pci-clear {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.pci-clear:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.pci-total { white-space: nowrap; }

/* Demoted config tables sit side-by-side when there's room, stack when not. */
.pci-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 20px;
    align-items: start;
}

@media (prefers-reduced-motion: reduce) {
    .pci-stage { transition: none; }
    .pci-stage:hover { transform: none; }
}

@media (max-width: 768px) {
    .pci-pipeline { padding: 16px; gap: 16px; }
    .pci-attention {
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }
    .pci-search { min-width: 0; flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   Drawer — right-side edit panel for dense config records
   ════════════════════════════════════════════════════════════════════ */
/* easeOutQuart — the deceleration curve the smoothest sidebars (Notion/Linear/
   GitLab) use; CSS transform transitions stay GPU-composited and don't drop
   frames, unlike JS/spring animations. */
:root { --drawer-ease: cubic-bezier(0.165, 0.84, 0.44, 1); --drawer-dur: 0.3s; }

.drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    /* visibility (not display:none) so the slide can actually transition; held
       open through the close slide, then hidden. */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--drawer-dur);
}

.drawer.open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity var(--drawer-dur) var(--drawer-ease);
}

.drawer.open .drawer-backdrop { opacity: 1; }

.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 520px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    will-change: transform;
    transition: transform var(--drawer-dur) var(--drawer-ease);
}

.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.drawer-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 2px;
}

.drawer-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 24px 16px;
}

.drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

/* Grouped form sections (used inside the drawer) */
.form-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.form-section > .form-group + .form-group,
.form-section > .form-row + .form-group,
.form-section > .form-group + .form-row {
    margin-top: 14px;
}

.form-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.input-suffix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-suffix input { flex: 1; min-width: 0; }
.input-suffix span { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}

body.drawer-lock { overflow: hidden; }

/* Test-job editor inside the drawer */
#tvlk-test-body {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.pci-json-result {
    margin-top: 12px;
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--text-primary);
}

/* Revealed secret (key / one-time URL) shown in the reveal drawer */
.pci-secret {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
    resize: vertical;
}

.drawer-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* "Live" indicator on the auto-updating job detail */
.pci-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--success);
}

.pci-live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pci-pulse 1.6s ease-in-out infinite;
}

@keyframes pci-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .pci-live::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .drawer,
    .drawer.open,
    .drawer-backdrop,
    .drawer-panel { transition-duration: 0s; }
}

/* ════════════════════════════════════════════════════════════════════
   App detail — tenant glance + tabbed sections
   ════════════════════════════════════════════════════════════════════ */
.app-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.app-tab {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.app-tab:hover { color: var(--text-primary); }

.app-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* App↔Persona webhook cascade explainer + reach counts */
.cascade-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.cascade-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   Persona editor — a WIDE slide-in drawer (reuses the .drawer easeOutQuart
   motion). Opens in place over whatever page you're on (App detail, Call Logs,
   Call detail) via editPersona(), so closing returns you there. The full 4-tab
   form lives inside the panel.
   ════════════════════════════════════════════════════════════════════ */
.modal.persona-editor-page {
    display: block;          /* override base .modal display:none — visibility drives show/hide */
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--drawer-dur);
}
.modal.persona-editor-page.open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.modal.persona-editor-page .modal-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity var(--drawer-dur) var(--drawer-ease);
}
.modal.persona-editor-page.open .modal-backdrop { opacity: 1; }

/* Conversation-pace presets (Turn-taking) */
.pace-presets {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pace-preset {
    flex: 1 1 0;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.pace-preset:hover { border-color: var(--text-muted); }

.pace-preset.active {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.06);
    box-shadow: var(--accent-glow);
}

.pace-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pace-desc { font-size: 11px; color: var(--text-muted); }

/* Bridge applicability pills — mark which transport a setting affects.
   telephony = both phone bridges; sip / twilio / web = that one only. */
.bridge-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
    border: 1px solid;
}
.bridge-badge.telephony { color: #0ea5e9; border-color: rgba(14,165,233,0.4);  background: rgba(14,165,233,0.08); }
.bridge-badge.sip       { color: #a78bfa; border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.10); }
.bridge-badge.twilio    { color: #22d3ee; border-color: rgba(34,211,238,0.4);  background: rgba(34,211,238,0.08); }
.bridge-badge.web       { color: #10b981; border-color: rgba(16,185,129,0.4);  background: rgba(16,185,129,0.08); }

/* Advanced timing disclosure */
.advanced-timing {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.advanced-timing > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.advanced-timing > summary::-webkit-details-marker { display: none; }

.advanced-timing > summary::before {
    content: '▸';
    display: inline-block;
    transition: transform var(--transition-fast);
}

.advanced-timing[open] > summary::before { transform: rotate(90deg); }

/* Tools tab — titled capability groups */
.tool-group-head {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.tool-group-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.tool-group-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.modal-content.persona-editor {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 820px;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    /* Grey canvas like the App detail page — tabs on grey, form in a white card. */
    background: var(--bg-primary);
    transform: translateX(100%);
    will-change: transform;
    transition: transform var(--drawer-dur) var(--drawer-ease);
}
.modal.persona-editor-page.open .modal-content.persona-editor { transform: translateX(0); }

/* min-height:0 lets the form body actually shrink to the flex space and become
   the scroll context — without it the body grows to its content, pushing the
   footer off-screen (tall tabs) or leaving a stray scrollbar (short tabs).
   Tabs + footer stay pinned. */
/* Form body = a white card floating on the grey canvas (App-detail look). */
.modal-content.persona-editor .modal-body {
    min-height: 0;
    margin: 16px 28px 20px;
    padding: 16px 32px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* The active tab panel is the first visible content — kill its top padding so
   the fields sit right under the tab bar (no tall white band). Panels are the
   direct children of the form body; the tab buttons live outside it. */
.modal-content.persona-editor .modal-body > [data-section] { padding-top: 0; }

/* Thin, modern scrollbar instead of the chunky native one (Chromium/Edge). */
.modal-content.persona-editor .modal-body::-webkit-scrollbar { width: 9px; }
.modal-content.persona-editor .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-content.persona-editor .modal-body::-webkit-scrollbar-thumb {
    background: var(--border-color); border-radius: 999px; border: 2px solid var(--bg-secondary);
}
.modal-content.persona-editor .modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Drawer form rhythm (Edit Persona + Test Call) — calmer, more generous
   vertical spacing so the dense config reads cleanly. Scoped to the panel so
   other forms are untouched. */
.modal-content.persona-editor .form-section { padding: 22px 0; }
.modal-content.persona-editor .form-section:first-child { padding-top: 4px; }
.modal-content.persona-editor .form-section-title { margin-bottom: 18px; }
.modal-content.persona-editor .form-section > .form-group + .form-group,
.modal-content.persona-editor .form-section > .form-row + .form-group,
.modal-content.persona-editor .form-section > .form-group + .form-row,
.modal-content.persona-editor .form-section > .form-row + .form-row { margin-top: 18px; }
.modal-content.persona-editor .form-group { gap: 7px; }
.modal-content.persona-editor .form-row { gap: 18px; }
.modal-content.persona-editor .checkbox-grid { margin-top: 16px; gap: 10px; }
.modal-content.persona-editor .script-tabs { margin-bottom: 14px; }
.modal-content.persona-editor .script-editor { margin-top: 20px; }
.modal-content.persona-editor .tool-group-head { margin-top: 26px; padding-top: 18px; }
.modal-content.persona-editor .modal-footer {
    flex: 0 0 auto;
    padding: 16px 32px;
    background: var(--bg-secondary);
}
.modal-content.persona-editor .persona-tabs { flex: 0 0 auto; background: transparent; }

.persona-tabs {
    display: flex;
    gap: 4px;
    /* Match App detail: breathing room under the header, 32px content inset. */
    padding: 24px 32px 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex: 0 0 auto;
}

.persona-tab {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.persona-tab:hover { color: var(--text-primary); }

.persona-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* ── Drawer form field labels (make each control's "title" obvious) ──
   Field labels were thin grey (13px/500/secondary) and read like captions.
   Darken + bold them so each title stands out from its help text. Scoped to the
   persona-editor panel so it covers BOTH Edit Persona and Test Call. */
.modal-content.persona-editor .form-group > label,
.modal-content.persona-editor .checkbox-grid > label,
.modal-content.persona-editor .checkbox-row > label {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Script editor: greeting / instructions / extraction schema as sub-tabs ── */
.script-editor { display: flex; flex-direction: column; }

.script-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.script-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.script-tab:hover { color: var(--text-primary); }

.script-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.script-panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 320px;
    resize: vertical;
    line-height: 1.55;
    padding: 12px 14px;
}

/* Note now sits between the sub-tabs and the input. */
.script-help {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── "Turn off automatic turn detection" — alert when enabled ──
   Pure CSS via :has() so it auto-syncs on load (no JS, no state to restore). */
.vad-warn-row {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 8px 10px;
    margin: -8px -10px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.vad-warn-row .vad-warn-badge { display: none; }

.vad-warn-row:has(input:checked) {
    background: #FEF3C7;
    border-color: var(--warning);
    /* Clear the expanded amber box from "Conversation pace" below it. */
    margin-bottom: 14px;
}

.vad-warn-row:has(input:checked) .vad-warn-badge {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #92400E;
}

@media (max-width: 768px) {
    /* Sidebar is an off-canvas overlay on mobile → page spans full width. */
    .modal-content.persona-editor { max-width: 100%; }
    .persona-tabs { padding: 16px 16px 0; }
    .modal-content.persona-editor .modal-body { margin: 14px 14px; padding: 16px; }
    .modal-content.persona-editor .modal-footer { padding: 12px 16px; }
    .modal-content.persona-editor .modal-footer .btn { padding: 8px 12px; }
}
/* ── Call-detail drawer ─────────────────────────────────────────────────────
   Reuses the PCI vendor drawer shell (.drawer/.drawer-panel) but wider and
   with a dedicated key/value layout. */
.drawer-panel.cd-panel { max-width: 780px; }

.cd-panel .drawer-header h3 {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}

.cd-section { padding: 18px 0; border-bottom: 1px solid var(--border-color); }
.cd-section:first-child { padding-top: 8px; }
.cd-section:last-child { border-bottom: none; padding-bottom: 4px; }

.cd-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.cd-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.cd-section-head .cd-section-title { margin-bottom: 0; }

/* Hero: the at-a-glance facts (status, outcome, direction, duration…). */
.cd-hero {
    display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: flex-start;
    padding: 16px 18px; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.cd-hero-item { display: flex; flex-direction: column; gap: 5px; }
.cd-hero-item .k {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 700;
}
.cd-hero-item .v {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}

.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.cd-field label {
    display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px;
}
.cd-field .cd-val { font-size: 15px; color: var(--text-primary); word-break: break-word; }
.cd-mono { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 13px; }

/* Collapsible disclosure rows (custom instructions, metadata, logs…). */
.cd-collapse + .cd-collapse { border-top: 1px solid var(--border-color); }
.cd-collapse-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 2px;
    cursor: pointer; user-select: none; font-weight: 600; font-size: 13px;
    color: var(--text-primary);
}
.cd-collapse-head .caret { width: 12px; text-align: center; color: var(--text-muted); font-weight: 700; }
.cd-collapse-head:hover { color: var(--accent-primary); }

.cd-pre {
    background: var(--bg-primary); padding: 12px; border-radius: var(--radius-sm);
    overflow: auto; max-height: 320px; font-size: 12px; border: 1px solid var(--border-color);
    white-space: pre-wrap; word-break: break-word; margin: 0;
}
.cd-pre-dark {
    background: #0d1117; color: #c9d1d9; border-color: #30363d;
    max-height: 400px; font-family: 'Courier New', monospace; font-size: 11px;
}

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

/* ── Overview: on-air console + vitals ──────────────────────────────────────
   The hero goes dark (broadcast-console contrast) with an emerald on-air signal
   and an indigo→violet 24h call-volume waveform — the page's signature. */
.ov-hero {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(135deg, #0F172A 0%, #1e1b4b 100%);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.ov-live { display: flex; flex-direction: column; gap: 2px; }
.ov-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.ov-status.on { color: #34d399; }
.ov-status.idle { color: #94a3b8; }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ov-status.on .ov-dot { animation: ov-pulse 1.8s ease-out infinite; }
@keyframes ov-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.ov-live-num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.ov-live-cap { font-size: 13px; color: #cbd5e1; }
.ov-live-today { font-size: 12px; color: #94a3b8; margin-top: 12px; }

.ov-wave-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ov-wave-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 700;
}
.ov-wave-total { color: #fff; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-wave-total span { font-size: 11px; color: #94a3b8; font-weight: 600; }
.ov-wave { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.ov-bar {
    flex: 1; min-width: 0;
    background: linear-gradient(180deg, #8b6fe4, #6c5cde);
    border-radius: 3px 3px 0 0; opacity: 0.85;
    transform-origin: bottom;
    animation: ov-grow 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.ov-bar.now { background: linear-gradient(180deg, #34d399, #10b981); opacity: 1; }
@keyframes ov-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ov-wave-axis { display: flex; justify-content: space-between; font-size: 10px; color: #64748b; }

.ov-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.ov-tile {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 16px 18px;
}
.ov-tile-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
.ov-tile-v { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ov-tile-unit { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ov-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.ov-meter { height: 6px; border-radius: 999px; background: var(--bg-tertiary); margin-top: 10px; overflow: hidden; }
.ov-meter span { display: block; height: 100%; background: linear-gradient(90deg, #6c5cde, #60a5fa); border-radius: 999px; }
.ov-bridge-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg-tertiary); margin-top: 6px; }
.ov-bridge-bar span { display: block; height: 100%; }
.ov-bridge-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.ov-bridge-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

@media (max-width: 900px) { .ov-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
    .ov-hero { grid-template-columns: 1fr; gap: 20px; }
    .ov-live-num { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ov-status.on .ov-dot { animation: none; }
    .ov-bar { animation: none; }
}