/* ═══════════════════════════════════════════════════════════════
   KAIROS UI — shared response-box (code window) system
   Loaded by: index.html, api-docs.html, docs.html, manual.html
   kairos-ui.js wraps every <pre> into this chrome; the static
   markup form is also valid without JS (index.html uses it).
   Palette stays on brand: cyan --accent, coral, gold, green.
   ═══════════════════════════════════════════════════════════════ */

.kx-code {
    --kx-accent: var(--accent, #00FFFF);
    position: relative;
    margin: 16px 0 24px;
    border: 1px solid rgba(0, 255, 255, 0.14);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.055) 0%, rgba(148, 163, 184, 0) 42px),
        linear-gradient(180deg, rgba(10, 16, 30, 0.92) 0%, rgba(5, 9, 18, 0.97) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 14px 34px -18px rgba(0, 0, 0, 0.85),
        0 0 0 rgba(0, 255, 255, 0);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.kx-code:hover {
    border-color: rgba(0, 255, 255, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 18px 40px -18px rgba(0, 0, 0, 0.9),
        0 0 26px -6px rgba(0, 255, 255, 0.18);
    transform: translateY(-1px);
}
/* Sweep of light along the top edge on hover — cheap, transform-only */
.kx-code::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 42%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.55), transparent);
    transform: translateX(-110%);
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.kx-code:hover::before { transform: translateX(260%); }

/* ── Chrome header ── */
.kx-code-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    user-select: none;
}
.kx-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.kx-dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: #FF7F50;                       /* coral  — brand */
    box-shadow: 0 0 6px -1px rgba(255, 127, 80, 0.6);
}
.kx-dots i:nth-child(2) { background: #f59e0b; box-shadow: 0 0 6px -1px rgba(245, 158, 11, 0.6); }  /* gold  */
.kx-dots i:nth-child(3) { background: #22c55e; box-shadow: 0 0 6px -1px rgba(34, 197, 94, 0.6); }   /* green */
.kx-code-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kx-copy {
    margin-left: auto;
    flex-shrink: 0;
    appearance: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.kx-copy:hover { color: var(--kx-accent); border-color: rgba(0, 255, 255, 0.45); background: rgba(0, 255, 255, 0.06); }
.kx-copy:focus-visible { outline: 2px solid var(--kx-accent); outline-offset: 2px; }
.kx-copy.ok { color: #22c55e; border-color: rgba(34, 197, 94, 0.5); }

/* ── Body: the pre lives here; the BODY owns scrolling ── */
.kx-code-body {
    position: relative;
    overflow: auto;
    max-height: min(420px, 62vh);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.28) transparent;
    transition: max-height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kx-code.kx-open .kx-code-body { max-height: none; }
.kx-code-body::-webkit-scrollbar { width: 8px; height: 8px; }
.kx-code-body::-webkit-scrollbar-track { background: transparent; }
.kx-code-body::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.kx-code-body::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 255, 255, 0.4); }
.kx-code-body::-webkit-scrollbar-corner { background: transparent; }

/* Neutralise each page's own pre skin inside the shell (docs/manual/api-docs
   all style bare `pre` with borders + backgrounds of their own). */
.kx-code .kx-code-body > pre {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    box-shadow: none !important;
    padding: 16px 18px 18px;
    overflow: visible;              /* the body scrolls, not the pre */
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;              /* fallback, then fluid */
    font-size: clamp(11.5px, 0.3vw + 10.8px, 13px);
    line-height: 1.68;
    tab-size: 2;
    color: #d6e2f0;
}

/* ── Overflow governance: fade + expand affordance ── */
.kx-expand {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 74px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    appearance: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(5, 9, 18, 0) 0%, rgba(5, 9, 18, 0.86) 68%, rgba(5, 9, 18, 0.97) 100%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94a3b8;
    transition: color 0.2s ease;
}
.kx-expand:hover { color: var(--kx-accent); }
.kx-expand:focus-visible { outline: 2px solid var(--kx-accent); outline-offset: -3px; }
.kx-expand .kx-chev { display: inline-block; margin-left: 7px; transition: transform 0.25s ease; }
.kx-expand:hover .kx-chev { transform: translateY(2px); }

/* Absorbed page labels (api-docs .code-label) disappear — the chrome shows them */
.kx-absorbed { display: none !important; }

/* ── Small screens ── */
@media (max-width: 640px) {
    .kx-code { margin: 14px 0 20px; border-radius: 12px; }
    .kx-code-head { min-height: 34px; gap: 9px; padding: 0 8px 0 12px; }
    .kx-dots i { width: 8px; height: 8px; }
    .kx-code-body { max-height: min(340px, 58vh); }
    .kx-code .kx-code-body > pre { padding: 13px 14px 15px; }
    .kx-copy { padding: 4px 10px; }
}

/* ── Motion preferences ── */
@media (prefers-reduced-motion: reduce) {
    .kx-code, .kx-code-body, .kx-copy, .kx-expand, .kx-expand .kx-chev { transition: none !important; }
    .kx-code::before { display: none; }
    .kx-code:hover { transform: none; }
}

/* Inside api-docs .endpoint cards: float the windows within the card */
.ep-body .kx-code { margin: 14px 14px 18px; }
.ep-body .kx-code + .kx-code { margin-top: 4px; }

/* ── Responsive hardening (all pages loading this file) ──
   Grid/flex children default to min-width:auto, so one long
   unbreakable token (an endpoint path in an <h3><code>…) forces
   the whole column wider than a phone viewport and pushes the
   copy buttons off-screen. Let columns shrink and tokens break. */
.layout > *, .container > *, main > * { min-width: 0; }
h1, h2, h3, h4, p, li, .ep-desc, .sub { overflow-wrap: break-word; }
h1 code, h2 code, h3 code, p code, li code { overflow-wrap: anywhere; }

/* Flex-item min-width trap on the docs/manual layouts: a wide table
   inside .main-content/.manual-content stretches the column past the
   phone viewport. Let the column shrink and let tables scroll in place. */
.main-content, .manual-content, .docs-layout > *, .manual-wrap > * { min-width: 0; }
@media (max-width: 768px) {
    .main-content table, .manual-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Inline code inside content columns may hold long SQL/paths */
.main-content code, .manual-content code, .callout code, .endpoint code { overflow-wrap: anywhere; }

/* Sub-360px devices: clip the last few px of bleed rather than
   letting ancient viewports wobble sideways */
@media (max-width: 380px) {
    html, body { overflow-x: clip; }
}