/* NetShow Door — the composite box (PKT-DOOR-05, 2026-09-02; calm consumer pass 2026-09-07).
 *
 * One centred box: the face on top as the focal point, one welcome line under
 * it, one composer, three quiet chips, one labelled Menu button — and nothing
 * else on the page. Every colour is a --ns-* token from design-system.css
 * (dark / light / calm themes all resolve); the fallbacks after each var() are
 * that file's dark values, so a page that forgot the design system still paints
 * the same picture. No indigo, no new palette.
 *
 * The widget root (#ns-chat-root) ALSO carries the class `ns-door` in door mode, so
 * the card rules are keyed on `.ns-door[data-ns-door]` — the composite root alone —
 * and never paint a second frame around the composer.
 *
 * Layout: face stacked above the box at every width. On a wide-but-short
 * viewport (a landscape phone, a small laptop window: ≥768 wide, ≤600 tall)
 * the hero face would push the composer under the fold, so the grid drops to
 * the compact [face 96px | box] row instead.
 *
 * The composer is ns-chat-widget.js in door mode. It injects its own rules at
 * `#ns-chat-root.ns-door …` (specificity 1,1,1); the overrides below are scoped
 * `.ns-door [data-ns-door-box] #ns-chat-root.ns-door …` (1,3,1) so they win
 * without touching the widget. Nothing here changes what the widget shows or
 * hides (.ns-in / .ns-snd / .ns-mic / .ns-voice-bar visibility stays its call).
 */

.ns-door-page {
    min-height: calc(100vh - 3.25rem);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem) 1rem 3rem;
    background:
        radial-gradient(circle at 50% 0%, var(--ns-accent-subtle, rgba(245, 158, 11, .1)), transparent 28rem),
        var(--ns-bg-primary, #1a1a1a);
    color: var(--ns-text-primary, #fff);
    overflow-x: clip;
}

/* The brand mark is the only chrome above the box. */
.ns-door-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ns-space-2, .5rem);
    padding: .9rem 0;
    color: var(--ns-accent, #f59e0b);
    font-size: var(--ns-text-lg, 1.125rem);
    font-weight: var(--ns-font-semibold, 600);
    text-decoration: none;
}
.ns-door-brand:hover,
.ns-door-brand:focus-visible { color: var(--ns-accent-hover, #d97706); }

.ns-door[data-ns-door] {
    position: relative;
    width: min(100%, 46rem);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(3.25rem, 4vw + 2.25rem, 3.75rem) clamp(1rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-xl, 1rem);
    background: var(--ns-bg-surface, #2f3437);
    box-shadow: var(--ns-shadow-xl, 0 20px 25px rgba(0, 0, 0, .3));
    color: var(--ns-text-primary, #fff);
    text-align: center;
}

.ns-door__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ns-space-4, 1rem);
    align-items: start;
    justify-items: center;
}

/* ── face: the focal point ── */
.ns-door__face {
    /* hero size; the 45vw cap keeps it a portrait, not a poster, when text is enlarged on a narrow phone */
    --ns-door-face-size: min(clamp(7.5rem, 28vw, 10.5rem), 45vw);
    position: relative;
    width: var(--ns-door-face-size);
    height: var(--ns-door-face-size);
    margin: 0;
    overflow: hidden;
    border: 2px solid var(--ns-border-strong, #525252);
    border-radius: var(--ns-radius-full, 9999px);
    background: var(--ns-bg-elevated, #424649);
    box-shadow: var(--ns-shadow-md, 0 4px 6px rgba(0, 0, 0, .3));
    transition: box-shadow var(--ns-transition-base, .25s ease), border-color var(--ns-transition-base, .25s ease);
}
.ns-door__face img,
.ns-door__face .ns-alive-card-mount,
.ns-door__face netshow-alive {
    width: 100%;
    height: 100%;
}
.ns-door__face img { display: block; object-fit: cover; }
.ns-door__face .ns-alive-card-mount { position: absolute; inset: 0; }
.ns-door__face .ns-alive-card-mount[hidden] { display: none; }

/* presence ring — the fabric vocabulary (observing · listening · processing · speaking),
   one token each. netshow-door.js mirrors the widget's ns-presence onto the face
   (data-ns-presence) and folds voice-lane classes into the door state
   (data-ns-door-state on the root: idle · listening · working · speaking · resting · error).
   Nothing below moves unless the visitor is actually being listened to. */
.ns-door__face[data-ns-presence="listening"],
.ns-door[data-ns-door-state="listening"] .ns-door__face {
    border-color: var(--ns-accent, #f59e0b);
    box-shadow: 0 0 0 4px var(--ns-accent-subtle, rgba(245, 158, 11, .1)), var(--ns-shadow-md, 0 4px 6px rgba(0, 0, 0, .3));
}
.ns-door__face[data-ns-presence="processing"],
.ns-door[data-ns-door-state="working"] .ns-door__face {
    border-color: var(--ns-accent-hover, #d97706);
    border-style: dashed;
    box-shadow: 0 0 0 4px var(--ns-accent-subtle, rgba(245, 158, 11, .1));
}
.ns-door__face[data-ns-presence="speaking"],
.ns-door[data-ns-door-state="speaking"] .ns-door__face {
    border-color: var(--ns-accent, #f59e0b);
    box-shadow: 0 0 0 6px var(--ns-accent-subtle, rgba(245, 158, 11, .1)), 0 0 0 1px var(--ns-accent, #f59e0b);
}
.ns-door[data-ns-door-state="resting"] .ns-door__face,
.ns-door[data-ns-door-state="error"] .ns-door__face {
    border-color: var(--ns-border, #404040);
    box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(0, 0, 0, .3));
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes ns-door-listen {
        0%, 100% { box-shadow: 0 0 0 4px var(--ns-accent-subtle, rgba(245, 158, 11, .1)), var(--ns-shadow-md, 0 4px 6px rgba(0, 0, 0, .3)); }
        50% { box-shadow: 0 0 0 9px var(--ns-accent-subtle, rgba(245, 158, 11, .1)), var(--ns-shadow-md, 0 4px 6px rgba(0, 0, 0, .3)); }
    }
    .ns-door[data-ns-door-state="listening"] .ns-door__face { animation: ns-door-listen 2.4s ease-in-out infinite; }
}

/* ── box ── */
.ns-door__box {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: var(--ns-space-3, .75rem);
    justify-items: center;
}

/* ONE welcome line — plain text under the face, no bubble, no frame. */
.ns-door__caption {
    max-width: 34rem;
    margin: 0;
    padding: 0 .25rem;
    color: var(--ns-text-primary, #fff);
    font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
    line-height: 1.4;
    font-weight: var(--ns-font-medium, 500);
    overflow-wrap: anywhere;
}

/* presence word under the welcome: Listening / Thinking / Speaking / Voice is resting */
.ns-door__status {
    margin: calc(-1 * var(--ns-space-2, .5rem)) 0 0;
    color: var(--ns-text-secondary, #a0a0a0);
    font-size: var(--ns-text-sm, .875rem);
    letter-spacing: .02em;
}
.ns-door__status[hidden] { display: none; }
.ns-door[data-ns-door-state="listening"] .ns-door__status { color: var(--ns-accent, #f59e0b); }
.ns-door[data-ns-door-state="error"] .ns-door__status { color: var(--ns-warning, #f59e0b); }

/* ── the one composer frame (the widget lives inside) ── */
.ns-door__thread {
    width: 100%;
    min-width: 0;
    text-align: left;
}

/* the no-JS composer form, until the box is live */
.ns-door__thread [data-ns-door-fallback] { padding: .25rem 0 0; }
.ns-door__thread [data-ns-door-fallback][hidden] { display: none; }

/* widget door mode: the panel grows with the conversation instead of reserving a
   380 px frame of nothing. Empty thread → collapsed; messages → up to ~48vh, scrolling. */
.ns-door [data-ns-door-box] #ns-chat-root.ns-door { width: 100%; }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-pnl {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-msgs {
    flex: 0 1 auto;
    max-height: min(24rem, 48vh);
    overflow: auto;
    padding: .25rem .15rem .75rem;
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-msgs:empty { display: none; }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-cmp {
    border-top: 0;
    padding: 0;
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-msgs:not(:empty) + .ns-cmp {
    border-top: 1px solid var(--ns-border-subtle, #333);
    padding-top: var(--ns-space-3, .75rem);
}
/* the frame: one rounded field that holds the text, the mic and send */
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-frm {
    align-items: center;
    gap: .35rem;
    padding: .3rem .3rem .3rem .45rem;
    border: 1px solid var(--ns-border-strong, #525252);
    border-radius: var(--ns-radius-lg, .75rem);
    background: var(--ns-bg-primary, #1a1a1a);
    transition: border-color var(--ns-transition-fast, .15s ease), box-shadow var(--ns-transition-fast, .15s ease);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-frm:focus-within {
    border-color: var(--ns-accent, #f59e0b);
    box-shadow: 0 0 0 3px var(--ns-accent-subtle, rgba(245, 158, 11, .1));
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-in {
    min-width: 0;
    min-height: 44px;
    max-height: 9rem;
    padding: .7rem .4rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ns-text-primary, #fff);
    font-size: 1rem;
    line-height: 1.4;
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-in:focus { border: 0; box-shadow: none; outline: none; }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-in::placeholder { color: var(--ns-text-muted, #6b7280); }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-mic,
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-snd {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--ns-radius-md, .5rem);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-mic {
    border: 1px solid var(--ns-border, #404040);
    background: var(--ns-bg-elevated, #424649);
    color: var(--ns-text-primary, #fff);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-mic:hover,
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-mic:focus-visible {
    border-color: var(--ns-accent, #f59e0b);
    background: var(--ns-bg-tertiary, #3d3d3d);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-snd {
    background: var(--ns-accent, #f59e0b);
    color: var(--ns-accent-text, #000);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-snd:disabled { opacity: .45; }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-mic:focus-visible,
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-snd:focus-visible {
    outline: 2px solid var(--ns-accent, #f59e0b);
    outline-offset: 2px;
}
/* voice lane: the widget swaps the textarea for its state bar inside the same frame */
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-voice-bar {
    min-width: 0;
    flex: 1 1 auto;
    height: 44px;
    padding: 0 .35rem;
    font-size: var(--ns-text-sm, .875rem);
    color: var(--ns-text-secondary, #a0a0a0);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-voice-bar[data-state="listening"] { color: var(--ns-accent, #f59e0b); }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-voice-bar[data-state="unavailable"] { color: var(--ns-text-muted, #6b7280); }
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-meter {
    padding: .4rem .25rem 0;
    color: var(--ns-text-muted, #6b7280);
    font-size: var(--ns-text-xs, .75rem);
}
.ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-bub {
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ── chips: quiet quick starts under the composer ── */
.ns-door__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ns-space-2, .5rem);
    margin: 0;
}
.ns-door__chips-lead {
    color: var(--ns-text-muted, #6b7280);
    font-size: var(--ns-text-sm, .875rem);
}
.ns-door__chip {
    min-height: 40px;
    padding: .45rem .95rem;
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-full, 9999px);
    background: transparent;
    color: var(--ns-text-secondary, #a0a0a0);
    font: inherit;
    font-size: var(--ns-text-sm, .875rem);
    font-weight: var(--ns-font-medium, 500);
    cursor: pointer;
    transition: color var(--ns-transition-fast, .15s ease), border-color var(--ns-transition-fast, .15s ease), background var(--ns-transition-fast, .15s ease);
}
.ns-door__chip:hover,
.ns-door__chip:focus-visible {
    border-color: var(--ns-accent, #f59e0b);
    background: var(--ns-accent-subtle, rgba(245, 158, 11, .1));
    color: var(--ns-text-primary, #fff);
    outline: none;
}
.ns-door__chips[hidden] { display: none; }

/* ── consent sentence (netshow-door.js appends it as the agent's own turn) ── */
.ns-door__consent-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ns-space-2, .5rem);
    margin: .35rem 0 0;
}
.ns-door__consent-pill {
    min-height: 36px;
    padding: .35rem .9rem;
    border: 1px solid var(--ns-border-strong, #525252);
    border-radius: var(--ns-radius-full, 9999px);
    background: var(--ns-bg-surface, #2f3437);
    color: var(--ns-text-primary, #fff);
    font: inherit;
    font-size: var(--ns-text-sm, .875rem);
    font-weight: var(--ns-font-medium, 500);
    cursor: pointer;
}
.ns-door__consent-pill--yes {
    border-color: var(--ns-accent, #f59e0b);
    background: var(--ns-accent, #f59e0b);
    color: var(--ns-accent-text, #000);
}
.ns-door__consent-pill:hover,
.ns-door__consent-pill:focus-visible { border-color: var(--ns-accent, #f59e0b); outline: none; }
.ns-door__consent-pill[disabled] { opacity: .6; cursor: default; }

/* ── keep-it card ── */
.ns-door__keep {
    width: 100%;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-lg, .75rem);
    background: var(--ns-bg-elevated, #424649);
    text-align: left;
}
.ns-door__keep[hidden] { display: none; }
.ns-door__keep-title {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: var(--ns-font-semibold, 600);
    color: var(--ns-text-primary, #fff);
}
.ns-door__keep-body {
    margin: 0 0 .7rem;
    color: var(--ns-text-secondary, #a0a0a0);
    font-size: var(--ns-text-sm, .875rem);
    line-height: 1.45;
}
.ns-door__keep-pills { display: flex; flex-wrap: wrap; gap: var(--ns-space-2, .5rem); }
.ns-door__pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .45rem 1rem;
    border: 1px solid var(--ns-border-strong, #525252);
    border-radius: var(--ns-radius-full, 9999px);
    color: var(--ns-text-primary, #fff);
    font-size: var(--ns-text-sm, .875rem);
    font-weight: var(--ns-font-medium, 500);
    text-decoration: none;
}
.ns-door__pill:hover,
.ns-door__pill:focus-visible { border-color: var(--ns-accent, #f59e0b); color: var(--ns-text-primary, #fff); }
.ns-door__pill--primary {
    border-color: var(--ns-accent, #f59e0b);
    background: var(--ns-accent, #f59e0b);
    color: var(--ns-accent-text, #000);
}
.ns-door__pill--primary:hover,
.ns-door__pill--primary:focus-visible { background: var(--ns-accent-hover, #d97706); color: var(--ns-accent-text, #000); }

/* ── the Menu button and the one menu it opens ── */
.ns-door__more {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .85rem 0 .65rem;
    border: 1px solid transparent;
    border-radius: var(--ns-radius-full, 9999px);
    background: transparent;
    color: var(--ns-text-secondary, #a0a0a0);
    font: inherit;
    font-size: var(--ns-text-sm, .875rem);
    font-weight: var(--ns-font-medium, 500);
    cursor: pointer;
    transition: color var(--ns-transition-fast, .15s ease), background var(--ns-transition-fast, .15s ease), border-color var(--ns-transition-fast, .15s ease);
}
.ns-door__more svg { width: 22px; height: 22px; flex: 0 0 22px; }
.ns-door__more:hover,
.ns-door__more[aria-expanded="true"] {
    color: var(--ns-text-primary, #fff);
    background: var(--ns-bg-tertiary, #3d3d3d);
    border-color: var(--ns-border, #404040);
}
.ns-door__more:focus-visible {
    outline: 2px solid var(--ns-accent, #f59e0b);
    outline-offset: 2px;
}

/* the menu: a disclosure anchored under the button, one column of readable groups */
.ns-door__drawer {
    position: absolute;
    top: calc(.6rem + 44px + .4rem);
    right: .6rem;
    z-index: 5;
    box-sizing: border-box;
    width: min(100% - 1.2rem, 22rem);
    max-height: min(70vh, 34rem);
    overflow: auto;
    display: grid;
    gap: var(--ns-space-4, 1rem);
    padding: var(--ns-space-4, 1rem);
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-lg, .75rem);
    background: var(--ns-bg-elevated, #424649);
    box-shadow: var(--ns-shadow-xl, 0 20px 25px rgba(0, 0, 0, .3));
    color: var(--ns-text-primary, #fff);
    text-align: left;
}
.ns-door__drawer[hidden] { display: none; }
.ns-door__menu-group {
    display: grid;
    gap: .15rem;
    min-width: 0;
}
.ns-door__menu-title {
    margin: 0 0 .25rem;
    padding: 0 .75rem;
    color: var(--ns-text-muted, #6b7280);
    font-size: var(--ns-text-xs, .75rem);
    font-weight: var(--ns-font-semibold, 600);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ns-door__drawer a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .75rem;
    border-radius: var(--ns-radius-md, .5rem);
    color: var(--ns-text-primary, #fff);
    font-size: var(--ns-text-base, 1rem);
    font-weight: var(--ns-font-medium, 500);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ns-door__drawer a:hover,
.ns-door__drawer a:focus-visible {
    color: var(--ns-text-primary, #fff);
    background: var(--ns-bg-tertiary, #3d3d3d);
    text-decoration: none;
    outline: none;
}
.ns-door__drawer a:focus-visible { box-shadow: inset 0 0 0 2px var(--ns-accent, #f59e0b); }
.ns-door__drawer .landing-link-btn { justify-content: flex-start; color: var(--ns-text-primary, #fff); }
.ns-door__drawer .landing-btn.landing-btn-primary {
    justify-content: center;
    margin-top: .25rem;
    background: var(--ns-accent, #f59e0b);
    border-color: var(--ns-accent, #f59e0b);
    color: var(--ns-accent-text, #000);
    font-weight: var(--ns-font-semibold, 600);
}
.ns-door__drawer .landing-btn.landing-btn-primary:hover,
.ns-door__drawer .landing-btn.landing-btn-primary:focus-visible {
    background: var(--ns-accent-hover, #d97706);
    color: var(--ns-accent-text, #000);
}

/* ── wide but short (landscape phone, small laptop window): compact row ── */
@media (min-width: 768px) and (max-height: 600px) {
    .ns-door[data-ns-door] { text-align: left; }
    .ns-door__grid {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--ns-space-5, 1.5rem);
        justify-items: stretch;
    }
    .ns-door__face { --ns-door-face-size: 96px; margin: .25rem 0 0; }
    .ns-door__box { justify-items: start; }
    .ns-door__caption { font-size: 1.05rem; }
    .ns-door__chips { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .ns-door[data-ns-door] {
        padding-top: 3.4rem;
        padding-left: .9rem;
        padding-right: .9rem;
        border-radius: var(--ns-radius-lg, .75rem);
    }
    .ns-door__more { top: .45rem; right: .45rem; }
    .ns-door__drawer {
        top: calc(.45rem + 44px + .35rem);
        right: .45rem;
        left: .45rem;
        width: auto;
    }
    .ns-door__chips-lead { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ns-door__face,
    .ns-door__chip,
    .ns-door__more,
    .ns-door [data-ns-door-box] #ns-chat-root.ns-door .ns-frm { transition: none; }
    .ns-door[data-ns-door-state="listening"] .ns-door__face { animation: none; }
}