/* NetShow Door — the composite box (PKT-DOOR-05, 2026-09-02).
 *
 * One centred box, the face beside it, a caption at paint, three chips, 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.
 *
 * Grid: [face 96px | box] — stacked and centred at 375, side by side from 768.
 */

.ns-door-page {
    min-height: calc(100vh - 3.25rem);
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 5vw, 3.5rem) 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);
}

/* 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 {
    position: relative;
    width: min(100%, 46rem);
    margin: 0 auto;
    padding: clamp(1rem, 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);
}

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

@media (min-width: 768px) {
    .ns-door__grid {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--ns-space-5, 1.5rem);
    }
}

/* ── face ── */
.ns-door__face {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px 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-fast, .15s 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; }

/* presence ring — the fabric vocabulary, one token each (netshow-door.js sets it) */
.ns-door__face[data-ns-presence="listening"],
.ns-door__face[data-ns-presence="processing"],
.ns-door__face[data-ns-presence="speaking"] {
    box-shadow: 0 0 0 3px var(--ns-accent-subtle, rgba(245, 158, 11, .1)), 0 0 0 1px var(--ns-accent, #f59e0b);
}

@media (min-width: 768px) {
    .ns-door__face { margin: .25rem 0 0; }
}

/* ── box ── */
.ns-door__box { min-width: 0; text-align: left; }

.ns-door__caption {
    margin: 0 0 var(--ns-space-3, .75rem);
    padding: .8rem 1rem;
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-lg, .75rem);
    background: var(--ns-bg-elevated, #424649);
    color: var(--ns-text-primary, #fff);
    font-size: 1.05rem;
    line-height: 1.45;
}

.ns-door__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ns-space-2, .5rem);
    margin: 0 0 var(--ns-space-3, .75rem);
}

.ns-door__chip {
    min-height: 40px;
    padding: .45rem .95rem;
    border: 1px solid var(--ns-border-strong, #525252);
    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; }

.ns-door__thread { min-width: 0; }

/* 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; }

/* ── 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 {
    margin: var(--ns-space-3, .75rem) 0 0;
    padding: .9rem 1rem;
    border: 1px solid var(--ns-border, #404040);
    border-radius: var(--ns-radius-lg, .75rem);
    background: var(--ns-bg-elevated, #424649);
}
.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 24 px glyph and the drawer it opens ── */
.ns-door__more {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--ns-radius-full, 9999px);
    background: transparent;
    color: var(--ns-text-muted, #6b7280);
    cursor: pointer;
}
.ns-door__more svg { width: 24px; height: 24px; }
.ns-door__more:hover,
.ns-door__more:focus-visible,
.ns-door__more[aria-expanded="true"] {
    color: var(--ns-text-primary, #fff);
    background: var(--ns-bg-tertiary, #3d3d3d);
    outline: none;
}

.ns-door__drawer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .9rem;
    margin: var(--ns-space-4, 1rem) 0 0;
    padding: .8rem 0 0;
    border-top: 1px solid var(--ns-border-subtle, #333);
    color: var(--ns-text-secondary, #a0a0a0);
    font-size: var(--ns-text-sm, .875rem);
}
.ns-door__drawer[hidden] { display: none; }
.ns-door__drawer a:not(.landing-btn):not(.landing-link-btn) {
    color: inherit;
    font-weight: var(--ns-font-medium, 500);
    text-underline-offset: .2em;
}
.ns-door__drawer a:not(.landing-btn):not(.landing-link-btn):hover,
.ns-door__drawer a:not(.landing-btn):not(.landing-link-btn):focus-visible { color: var(--ns-accent, #f59e0b); }
.ns-door__drawer .landing-btn,
.ns-door__drawer .landing-link-btn { font-size: var(--ns-text-sm, .875rem); }

@media (max-width: 575.98px) {
    .ns-door { padding: .9rem; border-radius: var(--ns-radius-lg, .75rem); }
    .ns-door__more { top: .35rem; right: .35rem; }
    .ns-door__caption { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ns-door__face, .ns-door__chip { transition: none; }
}