#page-companion {
    min-height: calc(100vh - 110px);
    padding: 10px 14px 14px;
}

/* ============================================================= *
 * Living portrait call view — warm, calm, full-viewport stage   *
 * (replaces green cyber/debug harness chrome)                   *
 * ============================================================= */

.cmp-face-shell.cmp-living-portrait,
.cmp-face-shell {
    --mouth-open: 0;
    --cmp-warm-bg: #14110f;
    --cmp-warm-panel: rgba(28, 24, 22, 0.78);
    --cmp-warm-border: rgba(255, 236, 210, 0.12);
    --cmp-warm-text: #f4ebe3;
    --cmp-warm-muted: #c4b5a6;
    --cmp-accent: #c8956c;
    position: relative;
    min-height: calc(100vh - 120px);
    display: block;
    color: var(--cmp-warm-text);
}

.cmp-face-main {
    min-width: 0;
    display: contents;
}

.cmp-stage {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: calc(100vh - 120px);
    border-radius: 18px;
    border: 1px solid var(--cmp-warm-border);
    background:
        radial-gradient(ellipse at 50% 28%, rgba(210, 168, 120, 0.16), transparent 52%),
        radial-gradient(ellipse at 50% 100%, rgba(40, 28, 22, 0.9), transparent 55%),
        linear-gradient(180deg, #1c1714 0%, #12100e 48%, #0c0b0a 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Explicitly kill legacy cyber grid / scanline chrome if any remnant remains. */
.cmp-stage::before,
.cmp-scanlines {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

.cmp-call-chrome {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px 8px;
}

.cmp-chrome-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cmp-proactive-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cmp-warm-muted);
    font-size: 0.78rem;
}

.cmp-proactive-select {
    appearance: none;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 999px;
    background: rgba(20, 16, 14, 0.72);
    color: var(--cmp-warm-text);
    padding: 6px 12px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.cmp-portrait-area {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 4px 16px 8px;
}

.cmp-face-orbit {
    position: relative;
    z-index: 2;
    /* Keep portrait dominant but leave room for chrome + conversation dock. */
    width: min(42vw, 48vh, 460px);
    min-width: 220px;
    max-width: min(92%, 520px);
    max-height: min(52vh, 520px);
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
}

.cmp-face-orbit::before,
.cmp-face-orbit::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.cmp-face-orbit::before {
    inset: -8%;
    background: radial-gradient(circle at 50% 42%, rgba(232, 196, 150, 0.14), transparent 62%);
    opacity: 1;
}

.cmp-face-orbit::after {
    inset: -2%;
    border: 1px solid rgba(255, 230, 200, 0.08);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

.cmp-head {
    --mouth-open: 0;
    --head-tilt: 0deg;
    position: relative;
    width: 100%;
    aspect-ratio: 1.25;
    overflow: hidden;
    border-radius: 16px;
    transform: rotate(var(--head-tilt)) translateY(calc(var(--mouth-open) * -5px));
    transition: transform 80ms linear;
    background: #1a1614;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.cmp-head-host {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 38%, rgba(240, 210, 170, 0.12), transparent 48%),
        #161210;
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 230, 200, 0.06);
}

.cmp-head-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.cmp-static-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    border-radius: inherit;
    z-index: 2;
}

/* WebGL 3D avatar (progressive enhancement over the 2D cyber-head rig). The
   AvatarViewer appends its own <canvas class="cmp-avatar-canvas"> into
   #cmpHeadHost; when it mounts we hide the 2D canvas + loading text underneath
   and let the 3D face cover the stage. If WebGL/model load fails the class is
   never added, so the 2D rig stays visible as the fallback. */
.cmp-avatar-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#cmpHeadHost.cmp-has-3d .cmp-head-canvas,
#cmpHeadHost.cmp-has-3d .cmp-head-loading,
#cmpHeadHost.cmp-has-3d .cmp-static-portrait {
    display: none;
}

/* Living Portrait renderer (DEFAULT consumer avatar). companionPortrait.js
   appends its own <canvas class="cmp-portrait-canvas"> into #cmpHeadHost and
   animates the persona's photoreal portrait in real time. When it mounts we
   hide the (cyberpunk) 2D rig canvas, the static <img>, and the loading text
   underneath so the animated portrait owns the stage. On failure the class is
   never added, so the static portrait / rig remains as the fallback. */
.cmp-portrait-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    z-index: 2;
}
#cmpHeadHost.cmp-has-portrait .cmp-head-canvas,
#cmpHeadHost.cmp-has-portrait .cmp-head-loading,
#cmpHeadHost.cmp-has-portrait .cmp-static-portrait {
    display: none;
}

/* met4citizen/TalkingHead renderer (feature-flagged, ?avatarRenderer=talkinghead).
   companion.js creates <div id="cmpThHost" class="cmp-th-host"> inside #cmpHeadHost
   and TalkingHead appends its own WebGL <canvas> into it. When active we hide every
   legacy layer underneath so TalkingHead owns the stage — one authoritative renderer. */
.cmp-th-host {
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    overflow: hidden;
}
.cmp-th-host canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
}
#cmpHeadHost.cmp-has-th .cmp-head-canvas,
#cmpHeadHost.cmp-has-th .cmp-portrait-canvas,
#cmpHeadHost.cmp-has-th .cmp-avatar-canvas,
#cmpHeadHost.cmp-has-th .cmp-static-portrait,
#cmpHeadHost.cmp-has-th .cmp-ditto-canvas,
#cmpHeadHost.cmp-has-th .cmp-talking-video,
#cmpHeadHost.cmp-has-th .cmp-head-loading {
    display: none;
}

/* Real-time Ditto transport. The canvas overlays the Living Portrait without
   removing it, so opacity alone provides a clean stall/recovery crossfade. */
.cmp-ditto-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
    z-index: 4;
}
#cmpHeadHost.cmp-has-ditto .cmp-ditto-canvas {
    opacity: 1;
}

/* M2 "Real Motion": the per-turn SadTalker talking clip. A single reused
   <video class="cmp-talking-video"> is mounted into #cmpHeadHost and plays the
   generated speaking sequence with its own TTS audio. While it is present the
   portrait canvas (and every other underlying layer) is hidden — exactly one
   mouth system on stage at a time. On teardown the class is removed and the
   animated portrait owns the stage again. */
.cmp-talking-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    border-radius: inherit;
    background: #161210;
    z-index: 3;
}
#cmpHeadHost.cmp-has-video .cmp-portrait-canvas,
#cmpHeadHost.cmp-has-video .cmp-avatar-canvas,
#cmpHeadHost.cmp-has-video .cmp-head-canvas,
#cmpHeadHost.cmp-has-video .cmp-head-loading,
#cmpHeadHost.cmp-has-video .cmp-static-portrait,
#cmpHeadHost.cmp-has-video .cmp-ditto-canvas {
    display: none;
}

/* "Animating <persona>…" hold shown while the talking clip renders. Warm
   palette, no decorative motion — only the elapsed seconds update (via JS). */
.cmp-animating {
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: calc(100% - 24px);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--cmp-warm-border);
    background: rgba(18, 14, 12, 0.82);
    color: var(--cmp-warm-text);
    font-size: 0.82rem;
    backdrop-filter: blur(10px);
}
.cmp-animating-label { color: var(--cmp-warm-text); }
.cmp-animating-elapsed {
    color: var(--cmp-warm-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.6em;
    text-align: right;
}
.cmp-animating-actions {
    display: inline-flex;
    gap: 6px;
}
.cmp-clip-stop { color: #e7b6a0; }

/* Voice-only fallback notice (reply gated too-long, budget lapse, render fail).
   Shares the animating pill's slot but only shows once the hold has ended. */
.cmp-clip-notice {
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    z-index: 5;
    max-width: calc(100% - 24px);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--cmp-warm-border);
    background: rgba(18, 14, 12, 0.82);
    color: var(--cmp-warm-muted);
    font-size: 0.8rem;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.cmp-clip-notice[hidden] { display: none; }

/* Animation-mode toggle: Fast is the only option without a real portrait. */
.cmp-clip-label.is-disabled { opacity: 0.5; }

.cmp-head-loading {
    position: absolute;
    inset: auto 16px 16px;
    z-index: 3;
    padding: 9px 12px;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 10px;
    color: var(--cmp-warm-muted);
    background: rgba(18, 14, 12, 0.78);
    font-size: 0.82rem;
    backdrop-filter: blur(8px);
}

.cmp-state-chip {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cmp-warm-border);
    background: rgba(18, 14, 12, 0.72);
    color: var(--cmp-warm-text);
    font-size: 0.86rem;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.cmp-conversation-dock {
    position: relative;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding: 8px 14px 14px;
    background: linear-gradient(180deg, transparent, rgba(12, 10, 9, 0.55) 28%, rgba(12, 10, 9, 0.82));
    border-top: 1px solid rgba(255, 230, 200, 0.06);
}

.cmp-transcript-wrap {
    max-height: min(28vh, 240px);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cmp-memory-drawer,
.cmp-dev-drawer {
    position: absolute;
    z-index: 20;
    top: 58px;
    right: 12px;
    width: min(360px, calc(100% - 24px));
    max-height: calc(100% - 80px);
    overflow: auto;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--cmp-warm-border);
    background: rgba(22, 18, 16, 0.94);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
}

.cmp-dev-drawer-head,
.cmp-memory-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cmp-memory-honesty {
    margin: 10px 0 0;
    color: var(--cmp-warm-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.cmp-fact-source {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--cmp-warm-muted);
}

.cmp-tool-btn.is-active,
.cmp-ghost-btn.is-active {
    border-color: rgba(200, 149, 108, 0.55);
    color: #f8e7d4;
    background: rgba(200, 149, 108, 0.14);
}

/* Legacy side panel (if any remnant markup) stays non-intrusive */
.cmp-side-panel {
    display: none;
}

.cmp-face-ref {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: contrast(1.1) saturate(1.14) brightness(0.94);
    transform: scale(calc(1 + var(--mouth-open) * 0.005));
    transform-origin: 50% 50%;
    transition: transform 90ms linear, filter 130ms ease;
}

.cmp-face-circuit {
    position: absolute;
    z-index: 2;
    top: 47%;
    width: 25%;
    height: 36%;
    opacity: 0.58;
    background:
        linear-gradient(0deg, transparent 0 21%, rgba(103, 255, 205, 0.48) 21.4%, transparent 22% 52%, rgba(103, 255, 205, 0.35) 52.4%, transparent 53%),
        linear-gradient(90deg, transparent 0 18%, rgba(103, 255, 205, 0.4) 18.5%, transparent 19.1% 58%, rgba(103, 255, 205, 0.28) 58.5%, transparent 59%);
    mix-blend-mode: screen;
    filter: blur(0.1px);
}

.cmp-face-circuit-left {
    left: 0;
    clip-path: polygon(0 18%, 68% 18%, 68% 30%, 100% 30%, 100% 34%, 58% 34%, 58% 48%, 90% 48%, 90% 52%, 46% 52%, 46% 72%, 86% 72%, 86% 76%, 0 76%);
}

.cmp-face-circuit-right {
    right: 0;
    transform: scaleX(-1);
    clip-path: polygon(0 18%, 68% 18%, 68% 30%, 100% 30%, 100% 34%, 58% 34%, 58% 48%, 90% 48%, 90% 52%, 46% 52%, 46% 72%, 86% 72%, 86% 76%, 0 76%);
}

.cmp-eye-glow {
    position: absolute;
    z-index: 4;
    top: 44.9%;
    width: 8.4%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(calc(0.9 + var(--mouth-open) * 0.16));
    background:
        radial-gradient(circle, rgba(255, 255, 255, 1) 0 18%, rgba(200, 255, 197, 0.96) 23%, rgba(92, 255, 157, 0.68) 42%, rgba(56, 211, 124, 0.24) 63%, transparent 74%);
    box-shadow:
        0 0 calc(18px + var(--mouth-open) * 18px) rgba(143, 255, 174, 0.86),
        0 0 calc(54px + var(--mouth-open) * 38px) rgba(69, 255, 154, 0.54);
    mix-blend-mode: screen;
    opacity: calc(0.74 + var(--mouth-open) * 0.2);
    transition: transform 70ms linear, opacity 120ms ease;
}

.cmp-eye-glow-left { left: 34.2%; }
.cmp-eye-glow-right { left: 65.9%; }

.cmp-mouth-slot {
    position: absolute;
    z-index: 5;
    left: 38.4%;
    top: 67.5%;
    width: 23.2%;
    height: calc(3.7% + var(--mouth-open) * 6.2%);
    border-radius: 50% 50% 42% 42% / 28% 28% 72% 72%;
    background: rgba(0, 6, 5, 0.58);
    overflow: hidden;
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.88),
        0 0 calc(8px + var(--mouth-open) * 28px) rgba(99, 255, 206, 0.28);
    transform: translateY(calc(var(--mouth-open) * 4px));
    transition: height 55ms linear, transform 55ms linear, box-shadow 55ms linear;
}

.cmp-mouth-shadow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 35%, transparent 0 42%, rgba(0, 0, 0, 0.72) 74%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.76));
}

.cmp-mouth-core {
    position: absolute;
    left: 10%;
    right: 10%;
    top: calc(45% - var(--mouth-open) * 12%);
    height: calc(10% + var(--mouth-open) * 28%);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(197, 255, 229, 0.86), rgba(71, 255, 184, 0.92), transparent);
    filter: blur(1.5px);
    opacity: calc(0.28 + var(--mouth-open) * 0.66);
}

.cmp-mouth-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        rgba(92, 255, 193, 0.32) 9px,
        transparent 12px
    );
    opacity: calc(0.2 + var(--mouth-open) * 0.44);
}

.cmp-face-vignette {
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 8, 7, 0.2), transparent 19%, transparent 81%, rgba(0, 8, 7, 0.2)),
        linear-gradient(180deg, rgba(0, 8, 7, 0.16), transparent 16%, transparent 76%, rgba(0, 8, 7, 0.26));
    mix-blend-mode: multiply;
}

.cmp-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8a8178;
    flex-shrink: 0;
}

.cmp-status-dot.is-idle,
.cmp-status-dot.is-ready { background: #7dba8a; }
.cmp-status-dot.is-listening { background: #7eb6d9; box-shadow: 0 0 10px rgba(126, 182, 217, 0.45); }
.cmp-status-dot.is-thinking,
.cmp-status-dot.is-transcribing,
.cmp-status-dot.is-generating_voice,
.cmp-status-dot.is-reconnecting { background: #d4b06a; box-shadow: 0 0 10px rgba(212, 176, 106, 0.4); }
.cmp-status-dot.is-speaking,
.cmp-status-dot.is-animating_face { background: #c8956c; box-shadow: 0 0 10px rgba(200, 149, 108, 0.45); }
.cmp-status-dot.is-paused { background: #a89b8c; }
.cmp-status-dot.is-error,
.cmp-status-dot.is-blocked { background: #d47a72; box-shadow: 0 0 10px rgba(212, 122, 114, 0.4); }
.cmp-status-dot.is-cancelled { background: #8a8178; }

.cmp-signal {
    position: absolute;
    right: 14px;
    bottom: 52px;
    z-index: 4;
    padding: 6px 9px;
    color: var(--cmp-warm-muted);
    border: 1px solid var(--cmp-warm-border);
    border-radius: 8px;
    background: rgba(18, 14, 12, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
}

.cmp-progress-subtle {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 42px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 230, 200, 0.08);
    overflow: hidden;
    z-index: 4;
}

.cmp-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #c8956c, #e0b48a);
    transition: width 180ms ease;
}

.cmp-console {
    display: contents;
}

.cmp-call-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cmp-toolbar-spacer { flex: 1; }

.cmp-transcript {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    max-height: min(26vh, 220px);
}

.cmp-turn {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--cmp-warm-border);
    background: rgba(28, 24, 22, 0.78);
}

.cmp-turn span {
    display: block;
    margin-bottom: 4px;
    color: var(--cmp-warm-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmp-turn p {
    margin: 0;
    color: var(--cmp-warm-text);
    white-space: pre-wrap;
    line-height: 1.4;
}

.cmp-turn-user {
    align-self: flex-end;
    background: rgba(70, 52, 40, 0.72);
}

.cmp-turn-assistant {
    align-self: flex-start;
}

.cmp-turn-system {
    align-self: center;
    max-width: 94%;
    opacity: 0.78;
}

.cmp-turn p.is-error,
.cmp-turn.is-error p {
    color: #f0b4ae;
}

.cmp-input-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 84px 72px;
    gap: 8px;
    align-items: end;
}

.cmp-input-row textarea {
    width: 100%;
    min-height: 52px;
    max-height: 120px;
    resize: vertical;
    color: var(--cmp-warm-text);
    background: rgba(16, 13, 11, 0.88);
    border: 1px solid var(--cmp-warm-border);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    outline: none;
}

.cmp-input-row textarea:focus {
    border-color: rgba(200, 149, 108, 0.55);
    box-shadow: 0 0 0 2px rgba(200, 149, 108, 0.12);
}

.cmp-icon-btn,
.cmp-send,
.cmp-tool-btn,
.cmp-ghost-btn {
    min-height: 42px;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 12px;
    color: var(--cmp-warm-text);
    background: rgba(28, 24, 22, 0.85);
    cursor: pointer;
    font-weight: 600;
}

.cmp-icon-btn,
.cmp-send {
    min-height: 52px;
    font-weight: 700;
}

.cmp-send {
    background: linear-gradient(135deg, #b07a4e, #c8956c);
    color: #1a120c;
    border-color: transparent;
}

.cmp-icon-btn {
    display: grid;
    place-items: center;
    gap: 2px;
}

.cmp-btn-icon {
    font-size: 0.82rem;
    line-height: 1;
}

.cmp-btn-label {
    font-size: 0.74rem;
}

.cmp-icon-btn:hover,
.cmp-send:hover,
.cmp-tool-btn:hover,
.cmp-ghost-btn:hover {
    border-color: rgba(200, 149, 108, 0.5);
}

.cmp-icon-btn.is-recording {
    color: #1a120c;
    background: #d4b06a;
    box-shadow: 0 0 18px rgba(212, 176, 106, 0.4);
}

.cmp-stop {
    border-color: rgba(212, 122, 114, 0.45);
}

.cmp-audio {
    width: 100%;
    height: 34px;
    margin-top: 2px;
    filter: none;
    opacity: 0.85;
}

.cmp-health-card {
    padding: 12px;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 12px;
    background: rgba(18, 14, 12, 0.55);
    margin-bottom: 10px;
}

.cmp-card-title {
    margin-bottom: 10px;
    color: var(--cmp-warm-text);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.cmp-health-list {
    display: grid;
    gap: 8px;
}

.cmp-health-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 9px;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 8px;
    background: rgba(12, 10, 9, 0.45);
}

.cmp-health-row span {
    text-transform: capitalize;
}

.cmp-health-row b {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmp-health-row small {
    grid-column: 1 / -1;
    color: var(--cmp-warm-muted);
    overflow-wrap: anywhere;
}

.cmp-health-row.is-good b { color: #9dcea8; }
.cmp-health-row.is-bad b { color: #e0a39c; }

.cmp-mock-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--cmp-warm-muted);
}

.cmp-mock-toggle input {
    accent-color: var(--cmp-accent);
}

.cmp-explode-toggle {
    min-height: 36px;
    margin-top: 10px;
    padding: 8px 9px;
    border: 1px solid rgba(212, 176, 106, 0.35);
    border-radius: 8px;
    background: rgba(212, 176, 106, 0.08);
}

.cmp-explode-toggle input {
    accent-color: #d4b06a;
}

.cmp-mock-demo {
    width: 100%;
    min-height: 38px;
    margin-top: 10px;
    border: 1px solid rgba(200, 149, 108, 0.35);
    border-radius: 10px;
    color: #1a120c;
    background: linear-gradient(135deg, #d4b06a, #e8c9a0);
    cursor: pointer;
    font-weight: 700;
}

.cmp-mock-demo:hover {
    box-shadow: 0 0 16px rgba(200, 149, 108, 0.22);
}

.cmp-debug-list {
    display: grid;
    gap: 7px;
}

.cmp-debug-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid var(--cmp-warm-border);
    border-radius: 8px;
    background: rgba(12, 10, 9, 0.4);
}

.cmp-debug-row span {
    color: var(--cmp-warm-muted);
    text-transform: none;
}

.cmp-debug-row b {
    color: var(--cmp-warm-text);
    font-variant-numeric: tabular-nums;
}

.cmp-setup-text {
    color: var(--cmp-warm-muted);
    line-height: 1.45;
    white-space: pre-wrap;
}

.cmp-face-shell[data-state="listening"] .cmp-head-host {
    animation: cmp-soft-breathe 1400ms ease-in-out infinite alternate;
}

.cmp-face-shell[data-state="thinking"] .cmp-head-host {
    animation: cmp-soft-breathe 1100ms ease-in-out infinite alternate;
}

.cmp-face-shell[data-state="speaking"] .cmp-head-host {
    animation: cmp-head-speak 320ms ease-in-out infinite alternate;
}

.cmp-face-shell[data-state="error"] .cmp-stage {
    border-color: rgba(212, 122, 114, 0.45);
}

@keyframes cmp-soft-breathe {
    from { filter: brightness(1); }
    to { filter: brightness(1.04); }
}

@keyframes cmp-head-speak {
    from { transform: translateY(0); }
    to { transform: translateY(-1.5px); }
}

@media (max-width: 1180px) {
    .cmp-face-orbit {
        width: min(46vw, 46vh, 420px);
        max-height: min(50vh, 480px);
    }
}

@media (max-width: 760px) {
    #page-companion {
        padding: 6px;
    }

    .cmp-face-shell,
    .cmp-face-shell.cmp-living-portrait {
        min-height: calc(100vh - 96px);
    }

    .cmp-stage {
        min-height: calc(100vh - 96px);
        border-radius: 12px;
    }

    .cmp-face-orbit {
        width: min(70vw, 38vh, 300px);
        min-width: 180px;
        max-height: min(40vh, 340px);
        aspect-ratio: 3 / 4;
    }

    .cmp-call-chrome {
        padding: 10px 10px 6px;
        gap: 8px;
    }

    .cmp-chrome-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .cmp-conversation-dock {
        padding: 8px 10px 12px;
    }

    .cmp-transcript {
        max-height: min(22vh, 160px);
    }

    .cmp-input-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .cmp-input-row textarea {
        grid-column: 1 / -1;
        order: -1;
    }

    .cmp-memory-drawer,
    .cmp-dev-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 55vh;
        border-radius: 16px 16px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-face-shell *,
    .cmp-face-shell *::before,
    .cmp-face-shell *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* ============================================================= *
 * Companion Phase 1 — browse grid, call chrome, status ladder    *
 * All classes cmp- namespaced; JS-injected into #companion-root. *
 * ============================================================= */

/* [hidden] must win over the .cmp-face-shell{display:grid} rule, or the
   browse/call view toggle (and inline hidden panels) would never hide. */
.cmp-companion [hidden] { display: none !important; }

.cmp-companion { min-height: calc(100vh - 138px); color: #e5f7ff; }

/* ---- browse header ---- */
.cmp-browse {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cmp-browse-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 2px;
}

.cmp-browse-title h2 {
    margin: 0;
    font-size: 1.32rem;
    letter-spacing: 0.02em;
    color: #e8faff;
}

.cmp-browse-sub {
    margin: 4px 0 0;
    color: #83d7ea;
    font-size: 0.86rem;
}

.cmp-browse-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cmp-quota-chip {
    padding: 7px 11px;
    border: 1px solid rgba(91, 210, 255, 0.22);
    border-radius: 999px;
    background: rgba(3, 8, 14, 0.7);
    color: #bdeeff;
    font-size: 0.76rem;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.cmp-quota-chip.is-limit {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
    background: rgba(239, 68, 68, 0.12);
}

.cmp-ghost-btn {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid rgba(91, 210, 255, 0.28);
    border-radius: 6px;
    background: #0b1726;
    color: #dff7ff;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.84rem;
}

.cmp-ghost-btn:hover { border-color: rgba(91, 210, 255, 0.7); }

.cmp-link-btn {
    border: none;
    background: none;
    color: #5bd2ff;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
    padding: 0;
}

/* ---- semantic "find my match" recommender ---- */
.cmp-reco {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 2px 0;
}

.cmp-reco-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(95, 255, 206, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(6, 24, 20, 0.72), rgba(3, 12, 11, 0.72));
    box-shadow: inset 0 0 24px rgba(69, 255, 190, 0.06);
}

.cmp-reco-spark {
    flex: 0 0 auto;
    padding-left: 4px;
    color: #6cffd2;
    font-size: 1rem;
    text-shadow: 0 0 10px rgba(108, 255, 210, 0.7);
}

.cmp-reco-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: #e8faff;
    font: inherit;
    font-size: 0.9rem;
    padding: 6px 4px;
    outline: none;
}

.cmp-reco-input::placeholder { color: #5f9fb0; }

.cmp-reco-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 16px;
    border: 1px solid rgba(95, 255, 206, 0.4);
    border-radius: 6px;
    background: linear-gradient(180deg, #0c2a22, #08201a);
    color: #b8ffe6;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    white-space: nowrap;
}

.cmp-reco-btn:hover { border-color: rgba(95, 255, 206, 0.8); }
.cmp-reco-btn:disabled { opacity: 0.6; cursor: default; }

.cmp-reco-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(95, 255, 206, 0.16);
    border-radius: 10px;
    background: rgba(4, 16, 13, 0.5);
}

.cmp-reco-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cmp-reco-label {
    color: #8affd9;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cmp-reco-note {
    color: #83d7ea;
    font-size: 0.84rem;
}

.cmp-match {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid rgba(95, 255, 206, 0.4);
    border-radius: 999px;
    background: rgba(20, 60, 48, 0.5);
    color: #9dffd8;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .cmp-reco-form { flex-wrap: wrap; }
    .cmp-reco-btn { flex: 1 1 100%; }
}

/* ---- pinned / recents strips ---- */
.cmp-strip { display: flex; flex-direction: column; gap: 8px; }

.cmp-strip-label {
    color: #83d7ea;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-left: 2px;
}

.cmp-strip-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.cmp-strip-row .cmp-persona-card { flex: 0 0 240px; }

/* ---- persona grid + cards ---- */
.cmp-persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.cmp-grid-empty {
    grid-column: 1 / -1;
    padding: 28px;
    text-align: center;
    color: #83d7ea;
    border: 1px dashed rgba(91, 210, 255, 0.24);
    border-radius: 8px;
}

.cmp-persona-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(91, 210, 255, 0.18);
    border-radius: 10px;
    background: #09111d;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.cmp-persona-card:hover,
.cmp-persona-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(91, 210, 255, 0.6);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), 0 0 26px rgba(94, 255, 206, 0.12);
    outline: none;
}

.cmp-persona-portrait {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center 30%;
    background-color: #04130f;
}

.cmp-portrait-fallback {
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    font-weight: 800;
    color: #6cffd2;
    background:
        radial-gradient(circle at 50% 40%, rgba(91, 255, 200, 0.22), transparent 55%),
        linear-gradient(160deg, #06241d, #041a15);
}

.cmp-persona-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 13px 13px;
}

.cmp-persona-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmp-persona-name {
    font-weight: 800;
    font-size: 1.02rem;
    color: #e8faff;
}

.cmp-persona-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #83d7ea;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cmp-persona-tagline {
    margin: 0;
    color: #c4e8f5;
    font-size: 0.86rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cmp-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.cmp-tag {
    padding: 3px 8px;
    border: 1px solid rgba(91, 210, 255, 0.2);
    border-radius: 999px;
    background: rgba(3, 8, 14, 0.5);
    color: #9fd8ea;
    font-size: 0.7rem;
}

.cmp-persona-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    color: #8fb2c1;
    font-size: 0.74rem;
}

.cmp-persona-foot .cmp-voice { text-transform: capitalize; }

.cmp-tier {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

.cmp-tier-mature {
    color: #fecdd3;
    background: rgba(244, 63, 94, 0.16);
    border: 1px solid rgba(244, 63, 94, 0.4);
}

/* ---- favorite / pin button ---- */
.cmp-fav-btn {
    border: 1px solid rgba(91, 210, 255, 0.25);
    border-radius: 6px;
    background: rgba(3, 8, 14, 0.72);
    color: #cbe9f5;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 6px 9px;
}

.cmp-fav-btn:hover { border-color: rgba(255, 223, 107, 0.6); color: #facc15; }
.cmp-fav-btn.is-fav { color: #facc15; border-color: rgba(255, 223, 107, 0.55); }

.cmp-card-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

/* ---- trusted badge ---- */
.cmp-trusted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.44);
    color: #86efac;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cmp-badge-inline { padding: 1px 6px; font-size: 0.72rem; }

/* ---- call chrome / active persona ---- */
.cmp-call-topbar { display: contents; }

.cmp-back-btn { flex: 0 0 auto; }

.cmp-active-persona {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(255, 230, 200, 0.12);
    border-radius: 999px;
    background: rgba(18, 14, 12, 0.72);
    backdrop-filter: blur(8px);
    max-width: min(52%, 420px);
    min-width: 0;
}

.cmp-active-portrait {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 30%;
    background-color: #2a221c;
    border: 1px solid rgba(255, 230, 200, 0.18);
}

.cmp-active-portrait.cmp-portrait-fallback {
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: #f4ebe3;
}

.cmp-active-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cmp-active-name-row { display: flex; align-items: center; gap: 8px; }
.cmp-active-name { font-weight: 700; color: #f4ebe3; }

.cmp-active-category {
    color: #c4b5a6;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmp-active-tagline {
    color: #b8a99a;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.cmp-active-persona .cmp-fav-btn { margin-left: auto; }

/* ---- status ladder / progress ---- */
.cmp-status-block {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
}

.cmp-progress {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 230, 200, 0.08);
    overflow: hidden;
}

.cmp-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #c8956c, #e0b48a);
    transition: width 180ms ease;
}

.cmp-progress[data-state="error"] .cmp-progress-fill { background: #d47a72; }
.cmp-progress[data-state="cancelled"] .cmp-progress-fill { background: #8a8178; }
.cmp-progress[data-state="ready"] .cmp-progress-fill { background: linear-gradient(90deg, #7dba8a, #a8d4b0); }

.cmp-phase-label {
    color: #c4b5a6;
    font-size: 0.72rem;
    min-height: 0;
    margin-left: 4px;
}

.cmp-status-dot.is-speaking_text_ready { background: #b8c97a; box-shadow: 0 0 10px rgba(184, 201, 122, 0.35); }

/* ---- call console toolbar / starters ---- */
.cmp-call-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cmp-toolbar-spacer { flex: 1 1 auto; }
.cmp-quota-compact { font-size: 0.72rem; padding: 5px 10px; }

.cmp-tool-btn {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 230, 200, 0.12);
    border-radius: 999px;
    background: rgba(28, 24, 22, 0.85);
    color: #f4ebe3;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.cmp-tool-btn:hover:not(:disabled) { border-color: rgba(200, 149, 108, 0.5); }
.cmp-tool-btn:disabled { opacity: 0.42; cursor: default; }

.cmp-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }

.cmp-starter-chip {
    padding: 7px 12px;
    border: 1px solid rgba(255, 230, 200, 0.12);
    border-radius: 999px;
    background: rgba(28, 24, 22, 0.7);
    color: #e8dcd0;
    cursor: pointer;
    font-size: 0.8rem;
}

.cmp-starter-chip:hover { border-color: rgba(200, 149, 108, 0.5); color: #f8efe6; }

@media (max-width: 760px) {
    .cmp-active-tagline { display: none; }
    .cmp-active-persona { max-width: 100%; flex: 1 1 auto; }
    .cmp-persona-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ============================================================= *
 * Companion Phase 2 — memory drawer + moderation "blocked"       *
 * Cyan palette, cmp- namespaced; card reuses .cmp-health-card.    *
 * ============================================================= */

.cmp-memory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.cmp-memory-head .cmp-card-title { margin-bottom: 0; }

.cmp-count-chip {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 9px;
    border: 1px solid rgba(91, 210, 255, 0.28);
    border-radius: 999px;
    background: rgba(3, 8, 14, 0.7);
    color: #bdeeff;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.cmp-memory-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cmp-fact-list {
    display: grid;
    gap: 7px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.cmp-fact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(91, 210, 255, 0.13);
    border-radius: 6px;
    background: rgba(3, 8, 14, 0.48);
}

.cmp-fact-text {
    color: #dcf4ff;
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cmp-fact-del {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91, 210, 255, 0.2);
    border-radius: 6px;
    background: rgba(3, 8, 14, 0.6);
    color: #9fd8ea;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.cmp-fact-del:hover {
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

.cmp-forget-all {
    min-height: 34px;
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #fecaca;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
}

.cmp-forget-all:hover { border-color: rgba(239, 68, 68, 0.6); }

.cmp-memory-empty,
.cmp-memory-note {
    color: #83d7ea;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.8;
}

.cmp-memory-note { color: #8fb2c1; }

/* ---- moderation "blocked" status + notice bubble ---- */
.cmp-status-dot.is-blocked {
    background: #f59e0b;
    box-shadow: 0 0 14px #f59e0b;
}

.cmp-progress[data-state="blocked"] .cmp-progress-fill { background: #f59e0b; }

.cmp-turn-blocked {
    align-self: center;
    max-width: 92%;
    opacity: 1;
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.12);
}

.cmp-turn-blocked p { color: #fde68a; }
.cmp-turn-blocked span { color: #fcd34d; }