/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-3dogeqe85y] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3dogeqe85y] {
    flex: 1;
}

.sidebar[b-3dogeqe85y] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-3dogeqe85y] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3dogeqe85y]  a, .top-row[b-3dogeqe85y]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-3dogeqe85y]  a:hover, .top-row[b-3dogeqe85y]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-3dogeqe85y]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ── Mobile / iPad-portrait (< 992px): off-canvas drawer ── */
@media (max-width: 991.98px) {
    .top-row[b-3dogeqe85y] {
        justify-content: space-between;
    }

    .top-row[b-3dogeqe85y]  a, .top-row[b-3dogeqe85y]  .btn-link {
        margin-left: 0;
    }

    /* Sidebar becomes a fixed slide-in drawer, hidden by default. */
    .sidebar[b-3dogeqe85y] {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 250px;
        max-width: 85vw;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .sidebar-open .sidebar[b-3dogeqe85y] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-3dogeqe85y] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }
}

/* ── Desktop / iPad-landscape (>= 992px): persistent sidebar (unchanged) ── */
@media (min-width: 992px) {
    .page[b-3dogeqe85y] {
        flex-direction: row;
    }

    .sidebar[b-3dogeqe85y] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-3dogeqe85y] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-3dogeqe85y]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-3dogeqe85y], article[b-3dogeqe85y] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-b7f6akreu6] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-b7f6akreu6] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-b7f6akreu6] {
    font-size: 1.1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* MOTLogs ▸ Agent text lockup in the sidebar header. "MOTLogs" links to the
   hub (www.motlogs.com), "Agent" to the app home. The "▸" carries the accent. */
.brand-lockup[b-b7f6akreu6] {
    gap: 6px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.brand-lockup a[b-b7f6akreu6] {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

.brand-lockup a:hover[b-b7f6akreu6] {
    color: var(--accent, #FF5432);
}

.lockup-sep[b-b7f6akreu6] {
    color: var(--accent, #FF5432);
    font-size: 0.85em;
}

/* Bootstrap Icons draw as a ::before glyph inside this fixed 1.25rem box. The glyph
   inherits line-height from the link, and the link's 3rem line-height put the glyph's
   line box well below the box itself — the icon rendered under the label instead of
   beside it. Pin line-height to 1 and centre the glyph in its own box so it sits on
   the label's centre line. flex-shrink:0 stops longer labels squashing the box. */
.bi[b-b7f6akreu6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi[b-b7f6akreu6]::before {
    line-height: 1;
    vertical-align: 0;
}

.bi-house-door-fill-nav-menu[b-b7f6akreu6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-b7f6akreu6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-b7f6akreu6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-b7f6akreu6] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-b7f6akreu6] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-b7f6akreu6] {
        padding-bottom: 1rem;
    }

    .nav-item[b-b7f6akreu6]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-b7f6akreu6]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-b7f6akreu6]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* ═══ Unread badges ═══
   "N new since you last looked" pill, right-aligned inside the nav link. The link is a flex row
   (app.css `.nav-item a`), so margin-left:auto pushes the pill to the far edge regardless of
   label length, and flex-shrink:0 stops a long label crushing it.

   Colour: the brand accent, which is a token (--accent -> --ml-accent on MOTLogs, one of four
   hues on team.help via [data-palette]) and therefore already correct on both brands and both
   themes without a single brand string. The accent is reserved for interactive/brand chrome —
   this is exactly that, and explicitly NOT a chart series colour or a status colour.

   INK IS THEME-CONDITIONAL, and it has to be. Dark accents are LIGHT colours, so white ink on them
   fails WCAG AA badly, and the badge is 0.7rem/700 text whose entire content is the number — there
   is no other channel to read it from. Measured (contrast ratio, ink vs accent):

     dark theme    white ink        #121212 ink
       motlogs     #FF5432  3.20      5.86
       harbor      #4C8DFF  3.20      5.85
       evergreen   #14B8A6  2.49      7.53
       indigo      #818CF8  2.98      6.28
       damson      #E879F9  2.46      7.61

     light theme   #121212 ink      white ink
       motlogs     #CC3415  3.63      5.16
       harbor      #1D4ED8  2.80      6.70
       evergreen   #0F766E  3.42      5.47
       indigo      #4F46E5  2.98      6.29
       damson      #86198F  2.27      8.24

   So: near-black ink on dark, white ink on light — 5.16:1 at worst across all five brand accents in
   both themes. This is the same remap app.css:783-790 already applies to .btn-primary under
   [data-palette]; that rule is scoped to buttons, and it never covered MOTLogs at all (MOTLogs sets
   no data-palette), which is why the badge needs its own. Base = dark, matching the rest of app.css;
   html[data-theme="light"] flips it. The subtle ring adapts too, so the pill stays separated from
   the active-link tint in both directions. */
.nav-badge[b-b7f6akreu6] {
    margin-left: auto;
    min-width: 1.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--accent, #FF5432);
    color: #121212;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .nav-badge[b-b7f6akreu6] {
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65);
}

@media (min-width: 992px) {
    .navbar-toggler[b-b7f6akreu6] {
        display: none;
    }

    .collapse[b-b7f6akreu6] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-b7f6akreu6] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* On the mobile drawer the nav must always scroll, since the sidebar is fixed-height. */
@media (max-width: 991.98px) {
    .nav-scrollable[b-b7f6akreu6] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Dialler.razor.rz.scp.css */
/* Scoped styles for Dialler.razor — Staff Softphone (Advanced tier).
   Uses only design tokens from app.css :root — no hardcoded colours except
   subtle rgba tints derived from the accent/state palette.
   Desktop: centred card, max 420 px (phone-like). Mobile: full-width.
*/

.dialler-card[b-29fq1jt8e7] {
    max-width: 420px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    /* Positioning context for the top-right status light. */
    position: relative;
}

/* ── "Dial out from" picker ── */
.caller-id-row[b-29fq1jt8e7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    /* Leave room on the right so the select never slides under the status light. */
    padding-right: 1rem;
}

.caller-id-label[b-29fq1jt8e7] {
    font-size: .8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.caller-id-select[b-29fq1jt8e7] {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    padding: .5rem .6rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.caller-id-select:focus[b-29fq1jt8e7] {
    border-color: var(--accent);
    outline: none;
}

.caller-id-select:disabled[b-29fq1jt8e7] {
    opacity: .6;
    cursor: not-allowed;
}

.caller-id-static[b-29fq1jt8e7] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .02em;
}

/* ── Error banner ── */
.dialler-error[b-29fq1jt8e7] {
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    background: rgba(231, 76, 60, .12);
    border: 1px solid var(--error);
    border-radius: var(--border-radius);
    font-size: .875rem;
    color: var(--error);
}

/* ── Customer typeahead ── */
.customer-search[b-29fq1jt8e7] {
    position: relative;
    margin-bottom: .9rem;
}

.customer-search-input[b-29fq1jt8e7] {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    padding: .6rem .85rem;
    font-size: .95rem;
    transition: var(--transition);
}

.customer-search-input[b-29fq1jt8e7]::placeholder { color: var(--text-muted); }

.customer-search-input:focus[b-29fq1jt8e7] {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 84, 50, .18);
}

.customer-dropdown[b-29fq1jt8e7] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.customer-row[b-29fq1jt8e7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: .55rem .85rem;
    cursor: pointer;
    transition: var(--transition);
}

.customer-row:last-child[b-29fq1jt8e7] { border-bottom: none; }
.customer-row:hover[b-29fq1jt8e7] { background: var(--bg-elevated); }
.customer-row-muted[b-29fq1jt8e7] { color: var(--text-muted); cursor: default; }

.customer-name[b-29fq1jt8e7] { font-size: .95rem; font-weight: 600; color: var(--text-primary); }
.customer-number[b-29fq1jt8e7] { font-size: .8rem; color: var(--text-secondary); letter-spacing: .03em; }
.customer-dnc[b-29fq1jt8e7] {
    font-size: .7rem;
    color: var(--warning);
    border: 1px solid var(--warning);
    border-radius: 999px;
    padding: 0 .4rem;
    margin-top: .15rem;
}

/* ── Big number display ── */
.number-display-wrap[b-29fq1jt8e7] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
}

.number-display[b-29fq1jt8e7] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border);
    color: var(--text-primary);
    padding: .5rem 2.25rem .5rem .25rem;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-align: center;
    transition: var(--transition);
}

.number-display[b-29fq1jt8e7]::placeholder {
    color: var(--text-muted);
    letter-spacing: .05em;
    font-weight: 400;
}

.number-display:focus[b-29fq1jt8e7] {
    border-bottom-color: var(--accent);
    outline: none;
}

.number-display:disabled[b-29fq1jt8e7] { opacity: .8; }

.backspace-btn[b-29fq1jt8e7] {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: .25rem .35rem;
    line-height: 1;
    transition: var(--transition);
}

.backspace-btn:hover[b-29fq1jt8e7] { color: var(--text-primary); }

/* ── Validation hint ── */
.dial-hint[b-29fq1jt8e7] {
    text-align: center;
    font-size: .8rem;
    color: var(--text-muted);
    min-height: 1.1rem;
    margin-bottom: 1rem;
}

.dial-hint-ok[b-29fq1jt8e7]  { color: var(--success); }
.dial-hint-bad[b-29fq1jt8e7] { color: var(--warning); }

/* ── In-call timer ── */
.call-timer[b-29fq1jt8e7] {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

/* ── Dialpad ── */
.dialpad[b-29fq1jt8e7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    justify-items: center;
    margin-bottom: 1.25rem;
}

.dialpad-btn[b-29fq1jt8e7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform .06s ease, background var(--transition), border-color var(--transition);
    user-select: none;
}

.dialpad-btn:hover:not(:disabled)[b-29fq1jt8e7] {
    background: var(--bg-surface);
    border-color: var(--border-strong);
}

.dialpad-btn:active:not(:disabled)[b-29fq1jt8e7] {
    transform: scale(.93);
    background: var(--accent);
    border-color: var(--accent);
}

.dialpad-btn:disabled[b-29fq1jt8e7] { opacity: .35; cursor: not-allowed; }

.dialpad-digit[b-29fq1jt8e7] {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
}

.dialpad-letters[b-29fq1jt8e7] {
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-top: .2rem;
    min-height: .7rem;
}

/* ── Primary call button ── */
.call-btn[b-29fq1jt8e7] {
    width: 100%;
    padding: 1rem;
    background: var(--accent);
    border: none;
    border-radius: var(--border-radius);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.call-btn:hover:not(:disabled)[b-29fq1jt8e7] { background: var(--accent-hover); }
.call-btn:disabled[b-29fq1jt8e7] { opacity: .4; cursor: not-allowed; }
.call-btn-icon[b-29fq1jt8e7] { font-size: 1.1rem; }

/* ── In-call action row ── */
.action-row[b-29fq1jt8e7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.round-btn[b-29fq1jt8e7] {
    flex: 1;
    max-width: 150px;
    padding: .9rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.mute-btn.active[b-29fq1jt8e7] {
    background: var(--warning);
    border-color: var(--warning);
    color: #000;
}

.hangup-btn[b-29fq1jt8e7] {
    background: var(--error);
    border-color: var(--error);
    color: #fff;
}

.hangup-btn:hover[b-29fq1jt8e7] { background: #c0392b; border-color: #c0392b; }

/* ── Status light ──
   Small pill in the card's top-right corner. The state name lives on the tooltip
   (title attribute on the markup), so the dot itself carries no text and never
   reflows the layout as the state changes. Solid fills are used because the faint
   badge tints don't read at this size. */
.status-dot[b-29fq1jt8e7] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 5;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: help;
}

.status-dot.dot-muted[b-29fq1jt8e7] { background: var(--text-muted); border-color: var(--border); }
.status-dot.dot-ready[b-29fq1jt8e7] { background: var(--success);    border-color: var(--success); }
.status-dot.dot-warn[b-29fq1jt8e7]  { background: var(--warning);    border-color: var(--warning); animation: dot-pulse-b-29fq1jt8e7 1.1s ease-in-out infinite; }
.status-dot.dot-live[b-29fq1jt8e7]  { background: var(--success);    border-color: var(--success); animation: dot-pulse-b-29fq1jt8e7 1.6s ease-in-out infinite; }
.status-dot.dot-error[b-29fq1jt8e7] { background: var(--error);      border-color: var(--error); }

@keyframes dot-pulse-b-29fq1jt8e7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 84, 50, .0); opacity: 1; }
    50%      { box-shadow: 0 0 0 4px rgba(255, 84, 50, .18); opacity: .65; }
}

/* Screen-reader-only live region. */
.sr-only[b-29fq1jt8e7] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Mic test ── */
.mic-toggle[b-29fq1jt8e7] {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: .95rem;
}
.mic-toggle:hover[b-29fq1jt8e7] { color: var(--text-primary); border-color: var(--border-strong); }
.mic-toggle.active[b-29fq1jt8e7] { background: var(--accent); border-color: var(--accent); color: #fff; }

.mic-panel[b-29fq1jt8e7] {
    display: flex; flex-direction: column; gap: .5rem;
    margin-bottom: .9rem; padding: .6rem .75rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.mic-select[b-29fq1jt8e7] {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--border-radius); color: var(--text-primary);
    padding: .4rem .5rem; font-size: .85rem;
}
.mic-meter[b-29fq1jt8e7] {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.08);
}
.mic-meter-fill[b-29fq1jt8e7] {
    height: 100%; background: linear-gradient(90deg, var(--success), var(--warning));
    transition: width .08s linear;
}
.mic-hint[b-29fq1jt8e7] { font-size: .75rem; color: var(--text-muted); }

/* ── Recent calls ── */
.recent-row[b-29fq1jt8e7] { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.recent-label[b-29fq1jt8e7] { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.recent-chips[b-29fq1jt8e7] { display: flex; gap: .4rem; overflow-x: auto; flex: 1; }
.recent-chip[b-29fq1jt8e7] {
    flex: 0 0 auto;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-secondary);
    padding: .3rem .7rem; font-size: .8rem; cursor: pointer;
    white-space: nowrap; transition: var(--transition);
}
.recent-chip:hover[b-29fq1jt8e7] { color: var(--text-primary); border-color: var(--accent); }

/* ── Text / Video actions ── */
.message-actions-row[b-29fq1jt8e7] {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .75rem;
}
.msg-action-btn[b-29fq1jt8e7] {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--border-radius); color: var(--text-primary);
    padding: .55rem .6rem; font-size: .88rem; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.msg-action-btn:hover:not(:disabled)[b-29fq1jt8e7] { border-color: var(--border-strong); background: var(--bg-surface); }
.msg-action-btn:disabled[b-29fq1jt8e7] { opacity: .4; cursor: not-allowed; }
.msg-action-ico[b-29fq1jt8e7] { font-size: 1rem; line-height: 1; }
.msg-action-checking[b-29fq1jt8e7] { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

.msg-result[b-29fq1jt8e7] {
    font-size: .82rem;
    margin-bottom: .75rem;
    padding: .45rem .7rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
}
.msg-result.ok[b-29fq1jt8e7]   { color: var(--success); border-color: var(--success); background: rgba(46, 204, 113, .1); }
.msg-result.warn[b-29fq1jt8e7] { color: var(--warning); border-color: var(--warning); background: rgba(243, 156, 18, .12); }

.sms-composer[b-29fq1jt8e7] {
    display: flex; flex-direction: column; gap: .4rem;
    margin-bottom: .9rem; padding: .65rem .75rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.sms-composer-text[b-29fq1jt8e7] {
    width: 100%; resize: vertical; min-height: 3.2rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--border-radius); color: var(--text-primary);
    padding: .5rem .65rem; font-size: .9rem; font-family: inherit;
}
.sms-composer-text:focus[b-29fq1jt8e7] { border-color: var(--accent); outline: none; }
.sms-composer-row[b-29fq1jt8e7] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sms-composer-count[b-29fq1jt8e7] { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.sms-composer-actions[b-29fq1jt8e7] { display: flex; align-items: center; gap: .6rem; }

/* ── DNC warning ── */
.dnc-warn[b-29fq1jt8e7] {
    display: flex; flex-direction: column; gap: .4rem;
    margin-bottom: 1rem; padding: .6rem .75rem;
    background: rgba(243, 156, 18, .12); border: 1px solid var(--warning);
    border-radius: var(--border-radius); font-size: .85rem; color: var(--warning);
}
.dnc-actions[b-29fq1jt8e7] { display: flex; gap: .75rem; justify-content: flex-end; }
.btn-text[b-29fq1jt8e7] { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: .85rem; }
.btn-text:hover[b-29fq1jt8e7] { color: var(--text-primary); }
.btn-text.danger[b-29fq1jt8e7] { color: var(--error); font-weight: 600; }

/* ── Call button pulse (while registering) ── */
.call-btn.pulsing[b-29fq1jt8e7] { animation: btn-pulse-b-29fq1jt8e7 1.3s ease-in-out infinite; }
@keyframes btn-pulse-b-29fq1jt8e7 { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* ════════════════ IN-CALL SCREEN ════════════════ */
.dialler-card.in-call[b-29fq1jt8e7] { align-items: stretch; }

.call-screen[b-29fq1jt8e7] { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem 0; }

.call-avatar[b-29fq1jt8e7] {
    width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 2px solid var(--accent);
    color: var(--text-primary); font-size: 1.8rem; font-weight: 700;
    margin-bottom: .35rem; letter-spacing: .02em;
}

.call-party-name[b-29fq1jt8e7] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); text-align: center; }
.call-party-number[b-29fq1jt8e7] { font-size: .95rem; color: var(--text-secondary); letter-spacing: .05em; }

.call-status-line[b-29fq1jt8e7] { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; min-height: 1.6rem; }
.call-status-pill[b-29fq1jt8e7] {
    font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px;
    border: 1px solid transparent;
}
.call-status-pill.connecting[b-29fq1jt8e7] { color: var(--text-secondary); border-color: var(--border); }
.call-status-pill.ringing[b-29fq1jt8e7] { color: var(--warning); border-color: var(--warning); animation: btn-pulse-b-29fq1jt8e7 1.1s ease-in-out infinite; }
.call-status-pill.hold[b-29fq1jt8e7] { color: var(--warning); border-color: var(--warning); }
.call-status-pill.warn[b-29fq1jt8e7] { color: var(--error); border-color: var(--error); }

.call-screen .call-timer[b-29fq1jt8e7] { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: .06em; }

/* Caller context */
.context-panel[b-29fq1jt8e7] {
    width: 100%; margin: .25rem 0 .75rem; padding: .6rem .8rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.context-title[b-29fq1jt8e7] { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .35rem; }
.context-muted[b-29fq1jt8e7] { font-size: .85rem; color: var(--text-muted); }
.context-list[b-29fq1jt8e7] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.context-list li[b-29fq1jt8e7] { font-size: .85rem; color: var(--text-primary); }
.context-kind[b-29fq1jt8e7] {
    display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    color: var(--accent); margin-right: .4rem; letter-spacing: .04em;
}

.in-call-pad[b-29fq1jt8e7] { margin-top: .5rem; }

/* Control cluster */
.call-controls[b-29fq1jt8e7] {
    display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1rem; width: 100%;
}
.ctrl-btn[b-29fq1jt8e7] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-primary); cursor: pointer; transition: var(--transition);
}
.ctrl-btn:hover:not(:disabled)[b-29fq1jt8e7] { border-color: var(--border-strong); background: var(--bg-surface); }
.ctrl-btn.active[b-29fq1jt8e7] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ctrl-btn:disabled[b-29fq1jt8e7] { opacity: .4; cursor: not-allowed; }
.ctrl-ico[b-29fq1jt8e7] { font-size: 1.15rem; line-height: 1; }
.ctrl-lbl[b-29fq1jt8e7] { font-size: .62rem; letter-spacing: .02em; }
.ctrl-btn.end[b-29fq1jt8e7] { background: var(--error); border-color: var(--error); color: #fff; }
.ctrl-btn.end:hover[b-29fq1jt8e7] { background: #c0392b; border-color: #c0392b; }
.ctrl-btn.end .ctrl-ico[b-29fq1jt8e7] { transform: rotate(135deg); }

/* ════════════════ DISPOSITION CARD ════════════════ */
.disposition-card[b-29fq1jt8e7] {
    max-width: 420px; margin: 1rem auto; padding: 1rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.disp-head[b-29fq1jt8e7] { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.disp-outcomes[b-29fq1jt8e7] { display: flex; flex-wrap: wrap; gap: .4rem; }
.disp-outcome[b-29fq1jt8e7] {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-secondary);
    padding: .35rem .8rem; font-size: .82rem; cursor: pointer; transition: var(--transition);
}
.disp-outcome:hover[b-29fq1jt8e7] { color: var(--text-primary); border-color: var(--border-strong); }
.disp-outcome.active[b-29fq1jt8e7] { background: var(--accent); border-color: var(--accent); color: #fff; }
.disp-note[b-29fq1jt8e7] {
    width: 100%; resize: vertical; min-height: 2.4rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--border-radius); color: var(--text-primary);
    padding: .55rem .7rem; font-size: .9rem; font-family: inherit;
}
.disp-note:focus[b-29fq1jt8e7] { border-color: var(--accent); outline: none; }
.disp-actions[b-29fq1jt8e7] { display: flex; justify-content: flex-end; }

/* Keyboard focus visibility (a11y) */
.dialpad-btn:focus-visible[b-29fq1jt8e7], .ctrl-btn:focus-visible[b-29fq1jt8e7], .call-btn:focus-visible[b-29fq1jt8e7],
.recent-chip:focus-visible[b-29fq1jt8e7], .disp-outcome:focus-visible[b-29fq1jt8e7], .mic-toggle:focus-visible[b-29fq1jt8e7] {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .dialler-card[b-29fq1jt8e7] {
        max-width: 100%;
        margin: .75rem;
    }

    .dialpad-btn[b-29fq1jt8e7] {
        width: 64px;
        height: 64px;
    }

    .dialpad-digit[b-29fq1jt8e7] { font-size: 1.5rem; }
    .number-display[b-29fq1jt8e7] { font-size: 1.8rem; }

    /* Full-screen call view on phones — the active call takes over the viewport. */
    .dialler-card.in-call[b-29fq1jt8e7] {
        position: fixed;
        inset: 0;
        margin: 0;
        max-width: 100%;
        border-radius: 0;
        justify-content: center;
        z-index: 40;
    }
    .call-avatar[b-29fq1jt8e7] { width: 96px; height: 96px; font-size: 2rem; }
    .call-party-name[b-29fq1jt8e7] { font-size: 1.5rem; }
    .ctrl-btn[b-29fq1jt8e7] { width: 68px; height: 68px; }

    .disposition-card[b-29fq1jt8e7] { margin: .75rem; max-width: 100%; }
}
/* /Pages/InterviewReview.razor.rz.scp.css */
/* Scoped to InterviewReview.razor (Blazor CSS isolation). Card/timeline chrome only — the page reuses
   .glass-card / .btn-pill / badge classes from the shared theme, so nothing here duplicates them. */

.review-card[b-zaydxdcr1u] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
}

.review-card-body[b-zaydxdcr1u] {
    padding: 1rem 1.25rem;
}

.fact-text[b-zaydxdcr1u] {
    font-size: 1.05rem;
}

.evidence-quote[b-zaydxdcr1u] {
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.75rem;
    margin-bottom: 0;
}

/* Side-by-side on desktop, stacked on phones — same 991.98px gate the rest of the app's
   toolbar-wrap rules use, so the fold point is consistent with every other page. */
.conflict-pair[b-zaydxdcr1u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 991.98px) {
    .conflict-pair[b-zaydxdcr1u] {
        grid-template-columns: 1fr;
    }
}

.conflict-side[b-zaydxdcr1u] {
    border: 1px dashed rgba(255, 193, 7, 0.4);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

.drift-timeline .drift-entry[b-zaydxdcr1u] {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drift-timeline .drift-entry:last-child[b-zaydxdcr1u] {
    border-bottom: none;
}
/* /Pages/WhatsAppMessages.razor.rz.scp.css */
/* ── Header toolbar wrap (< 992px) ──
   The header card lays the title and the agent-filter + Refresh controls in one
   justify-content-between flex row with NO wrap. On phones and iPad the 280px
   select + label + Refresh button can't sit beside the title, so the row
   overflows / squashes. Below the sidebar-drawer cutoff (matching the rest of
   the app's mobile gates), let the controls wrap onto their own line and give
   them a little breathing room. Desktop (>=992px) never matches this query, so
   the current single-row layout is byte-unchanged there. */
@media (max-width: 991.98px) {
    .wa-toolbar[b-gx107css25] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}
/* /Shared/InterviewPanel.razor.rz.scp.css */
/*
    Interview panel — scoped styles.

    Moved here with the markup when the interview became a component rendered by both /interview and
    the Agent page's inline view. Blazor scopes a .razor.css to the component it is named after, so
    leaving it beside the page would have styled the page's (now empty) shell and left the panel bare
    wherever it was embedded.

    Everything structural (cards, buttons, spacing) comes from app.css's .glass-card / .btn-pill, so
    this looks like the rest of the dashboard on both brands and in both themes. What is here is
    only what the panel invents: the level meter, the transcript, the coverage checklist and the
    topic menu.

    Colours go through app.css's custom properties (--accent, --success, --border, --text-muted, …)
    rather than literals. Those tokens resolve per brand AND per theme; a hardcoded hex would be
    right in one of the ten palette/theme combinations and wrong in the other nine.
*/

.interview-steps[b-yfo2h6xkmw],
.interview-topics[b-yfo2h6xkmw] {
    padding-left: 1.1rem;
    margin-bottom: 0;
}

.interview-steps li[b-yfo2h6xkmw],
.interview-topics li[b-yfo2h6xkmw] { margin-bottom: .5rem; }

/* ── Microphone level ──────────────────────────────────────────────────────────
   Same shape and the same green→amber gradient as the Dialler's meter, on
   purpose: this is the second mic meter in the product, and two that look
   different read as one of them being broken. */
.mic-meter[b-yfo2h6xkmw] {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(128, 128, 128, .18);
}

.mic-meter-fill[b-yfo2h6xkmw] {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--warning));
    transition: width .08s linear;
}

/* ── Transcript ───────────────────────────────────────────────────────────── */
.interview-transcript[b-yfo2h6xkmw] {
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.interview-line[b-yfo2h6xkmw] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .8rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-surface);
}

/* The agent's turns carry the accent tint the nav already uses for "active" —
   --accent-glow is defined for every palette/theme pair, unlike a hand-mixed rgba. */
.interview-line.from-agent[b-yfo2h6xkmw] {
    background: var(--accent-glow);
    border-color: var(--border-strong);
}

.interview-who[b-yfo2h6xkmw] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.interview-text[b-yfo2h6xkmw] {
    white-space: pre-wrap;   /* the interviewer writes in short paragraphs */
    word-break: break-word;  /* a pasted URL must not widen the card */
}

.interview-status[b-yfo2h6xkmw] {
    font-size: .8rem;
    color: var(--text-muted);
}

.interview-status.is-live[b-yfo2h6xkmw]::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--success);
}

/* ── The talking avatar (live voice only) ────────────────────────────────────
   Ported from PortfolioStaticGenerator.BaseCss's .avatar rules — same shapes,
   this dashboard's own --accent/--bg-surface/--border tokens standing in for
   the per-tenant AccentPair the public microsite derives. --av-level (0..1) is
   written by interview-avatar-ring.js through the CSSOM, never by Blazor, so a
   render here does not fight the animation frame that is updating it. */
.interview-avatar[b-yfo2h6xkmw] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.interview-avatar .avatar[b-yfo2h6xkmw] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 92px;
    height: 92px;
    --av-level: 0;
}

.interview-avatar .avatar > *[b-yfo2h6xkmw] { position: relative; z-index: 1; }

.interview-avatar .avatar[b-yfo2h6xkmw]::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: calc(.45 + .55 * var(--av-level));
    transform: scale(calc(1 + .13 * var(--av-level)));
    will-change: transform, opacity;
    pointer-events: none;
}

.interview-avatar .avatar[b-yfo2h6xkmw]::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: calc(.34 * var(--av-level));
    transform: scale(calc(1 + .26 * var(--av-level)));
    will-change: transform, opacity;
    pointer-events: none;
}

/* The monogram is always in the markup, under the photo (see InterviewPanel.razor) — the same
   §7-ladder bottom rung the microsite draws: a broken image or an unresolved CDN key still
   leaves a ring around something rather than around nothing.

   FILLED WITH THE ACCENT, WHITE LETTER (product decision, 2026-08-20). It was previously a
   --bg-surface disc with an accent letter, which read as a hole rather than a presence.

   ⚠️ WHITE-ON-ACCENT IS BELOW AA FOR NORMAL TEXT AND THAT IS A DELIBERATE, INFORMED CHOICE HERE.
   The measured figures in app.css (the .channel-tabs block) are 2.46–3.20:1 across the five brand
   accents in DARK mode. Two things make this the one place it is defensible, and both must stay
   true if anyone edits this rule:
     1. It is LARGE TEXT — 32px at weight 700 clears WCAG's 18.66px-bold threshold, so the bar is
        3:1, not 4.5:1. The brighter accents sit at or just under that; the darker light-mode
        accents (#CC3415, #1D4ED8, #0F766E, #4F46E5) clear it comfortably.
     2. IT CARRIES NO INFORMATION. The letter is a decorative fallback for a missing avatar photo,
        and the ring beside it already conveys speaking/listening. Nothing is lost by not reading it.
   If this monogram ever becomes something a user must READ, this rule needs re-measuring — do not
   simply reuse it elsewhere. */
.interview-avatar .mono[b-yfo2h6xkmw] {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 700;
    /* No border: on a filled disc a --border rim reads as a seam between the fill and the ring,
       and the ring outside (::before/::after) is what gives the orb its edge. */
    border: 0;
}

/* Clips the photo to its circle without clipping the ring, which grows OUTSIDE the frame at
   inset:-8px above — the same reason PortfolioStaticGenerator puts this on its own wrapper
   rather than on .avatar itself. */
.interview-avatar .avatar-clip[b-yfo2h6xkmw] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    display: block;
}

.interview-avatar .avatar-photo[b-yfo2h6xkmw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* The ring still SHOWS — a fixed opacity, no scale — it simply stops moving. Same values as
   PortfolioStaticGenerator.BaseCss, so a tenant sees one consistent "reduced motion" avatar
   across the microsite, the widget and this panel. */
@media (prefers-reduced-motion: reduce) {
    .interview-avatar .avatar[b-yfo2h6xkmw]::before { transform: none; opacity: .35; }
    .interview-avatar .avatar[b-yfo2h6xkmw]::after { display: none; }
}

/* ── Coverage checklist ───────────────────────────────────────────────────── */
.interview-checklist[b-yfo2h6xkmw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.interview-checklist li[b-yfo2h6xkmw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
}

.interview-checklist li:last-child[b-yfo2h6xkmw] { border-bottom: 0; }

.interview-checklist li.is-covered .bi[b-yfo2h6xkmw] { color: var(--success); }

/* "Already knew this" — dimmed rather than hidden, so the tenant can see the
   agent skipped it deliberately instead of forgetting to ask. */
.interview-checklist li.is-known[b-yfo2h6xkmw] { color: var(--text-muted); }

/* Two homes, two layouts. In the checklist the row is a flex line and the note belongs hard right,
   which is what margin-left:auto does there. In the TOPIC PICKER it sits inside a plain <label> in
   normal inline flow, where auto resolves to zero — so the note ran straight into the topic title
   ("Common questionsalways covered") and read like a rendering fault. An explicit gap is the base;
   the flex push is restored by the more specific rule below it. */
.interview-note[b-yfo2h6xkmw] {
    font-size: .72rem;
    color: var(--text-muted);
    margin-left: .5rem;
}

.interview-checklist .interview-note[b-yfo2h6xkmw] { margin-left: auto; }

.interview-refusal[b-yfo2h6xkmw] { border-left: 3px solid var(--warning); }

/* ── Topic menu ───────────────────────────────────────────────────────────────
   The pre-flight pick of what to be interviewed about. Rows a higher plan would
   unlock are DIMMED, NOT HIDDEN: an owner who never sees a topic cannot ask for
   the plan that includes it. */
.interview-menu[b-yfo2h6xkmw] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 15rem;
    overflow-y: auto;
}

.interview-menu li[b-yfo2h6xkmw] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .35rem 0;
}

.interview-menu li.is-unavailable[b-yfo2h6xkmw] { opacity: .55; }

.interview-menu .form-check-label[b-yfo2h6xkmw] { cursor: pointer; }

/* The disabled box keeps its cursor, so a locked row does not look clickable. */
.interview-menu input:disabled + .form-check-label[b-yfo2h6xkmw] { cursor: default; }
/* /Shared/RaiseJiraTicketButton.razor.rz.scp.css */
/* Scoped styles for RaiseJiraTicketButton.razor.
   Structure (buttons, badges, spinner) comes from app.css / Bootstrap, same as every other
   action on the call-detail and Missed Calls screens - this file only adds the layout needed
   to stack the error line under the button without it colliding with neighbouring controls. */

.jira-ticket-action[b-54wt3ejf4j] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.jira-ticket-error[b-54wt3ejf4j] {
    max-width: 260px;
}

.jira-ticket-chip[b-54wt3ejf4j] {
    text-decoration: none;
}

.jira-ticket-chip:hover .badge[b-54wt3ejf4j] {
    filter: brightness(1.1);
}
/* /Shared/VoiceClonePanel.razor.rz.scp.css */
/* ── The level orb, while a voice-clone recording is running ──────────────────
   The same control the interview shows while it is listening, so "the app is
   hearing me" looks identical wherever it happens.

   🪤 A THIRD COPY OF THESE SHAPES, AND THAT IS A DELIBERATE, BOUNDED CHOICE.
   The originals are PortfolioStaticGenerator.BaseCss (the public microsite) and
   InterviewPanel.razor.css. Blazor's scoped CSS cannot be shared between
   components — a scoped rule only matches its own component's elements — so the
   options were: duplicate here, or lift all three into app.css and change the
   two screens that already work. Lifting is the right end state and is NOT what
   this change is for; doing it while adding a mic check would put a working
   interview and a live marketing site into the blast radius of a recording
   feature. Recorded here so the next person lifting them knows there are three.

   ⚠️ IF YOU EDIT THE SHAPES, EDIT ALL THREE. The whole point is that they match.

   --av-level (0..1) is written by interview-avatar-ring.js through the CSSOM —
   driven HERE by the microphone (voiceRecorder.getOutputLevel) rather than by
   agent audio. Never written by Blazor, so a re-render does not fight the
   animation frame updating it. */
.interview-avatar[b-hx742v2jxj] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.interview-avatar .avatar[b-hx742v2jxj] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 92px;
    height: 92px;
    --av-level: 0;
}

.interview-avatar .avatar > *[b-hx742v2jxj] { position: relative; z-index: 1; }

.interview-avatar .avatar[b-hx742v2jxj]::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: calc(.45 + .55 * var(--av-level));
    transform: scale(calc(1 + .13 * var(--av-level)));
    will-change: transform, opacity;
    pointer-events: none;
}

.interview-avatar .avatar[b-hx742v2jxj]::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: calc(.34 * var(--av-level));
    transform: scale(calc(1 + .26 * var(--av-level)));
    will-change: transform, opacity;
    pointer-events: none;
}

/* Filled with the accent, white letter — see InterviewPanel.razor.css for the measured
   contrast argument. It holds here for the same two reasons: large text, and the letter
   carries no information (the ring conveys the state). */
.interview-avatar .mono[b-hx742v2jxj] {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 700;
    border: 0;
}

/* Respect a reduced-motion preference: the ring still brightens, but stops pulsing. */
@media (prefers-reduced-motion: reduce) {
    .interview-avatar .avatar[b-hx742v2jxj]::before,
    .interview-avatar .avatar[b-hx742v2jxj]::after {
        transform: none;
    }
}