/* ============================================================================
   atelier.css — "Atelier / Swiss" design system for The Room.
   Warm paper, warm ink, one Klein-blue accent, hairlines instead of shadows,
   squared corners, grotesque type. Styles the multi-page shell AND the existing
   app / JS-generated markup (.button, .message, .chatbot-card, ...).
   ============================================================================ */

:root {
    --paper:     #f4f1ea;
    --paper-2:   #efebe2;
    --paper-3:   #e9e4d9;
    --ink:       #1a1712;
    --ink-2:     #423c32;
    --muted:     #6b6459;
    --faint:     #9b9384;
    --rule:      rgba(26, 23, 18, 0.16);
    --rule-soft: rgba(26, 23, 18, 0.09);
    --klein:     #1e2aa8;
    --klein-ink: #ffffff;
    --sel:       rgba(30, 42, 168, 0.10);
    --good:      #1f7a4d;
    --warn:      #b26a00;
    --bad:       #b4231a;

    --font: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
    --mono: "SF Mono", ui-monospace, "Roboto Mono", "DejaVu Sans Mono", monospace;

    --rail-w: 248px;
    --gap: 24px;
}
:root[data-theme="dark"] {
    --paper: #16140f; --paper-2: #1c1a14; --paper-3: #232019;
    --ink: #ede9df; --ink-2: #cfc9bc; --muted: #9b9382; --faint: #6f6858;
    --rule: rgba(237, 233, 223, 0.18); --rule-soft: rgba(237, 233, 223, 0.09);
    --klein: #6f7bf0; --klein-ink: #0d0b07; --sel: rgba(111, 123, 240, 0.16);
    --good: #4fae7d; --warn: #d6961f; --bad: #e0645b;
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
::selection { background: var(--sel); }
html, body { margin: 0; padding: 0; }
body {
    background: var(--paper); color: var(--ink);
    font-family: var(--font); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--klein); text-decoration: none; }
/* Native <button> chrome (white bg, UA border) must never leak through the
   dark/light themes: every button starts as plain inherited text and each
   component class opts back into its own box. */
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--klein); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

.mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- app shell ----------------------------------------------------------- */
.app-shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
.nav-toggle { display: none; }
.rail-backdrop { display: none; }
@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; }
    /* sidebar becomes an off-canvas drawer toggled by the hamburger */
    .rail { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 60; background: var(--paper);
        transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
    .rail.open { transform: translateX(0); }
    .rail-backdrop.open { display: block; position: fixed; inset: 0; z-index: 55;
        background: color-mix(in srgb, var(--ink) 42%, transparent); }
    .nav-toggle { display: inline-flex; }
}

.rail { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--rule);
    display: flex; flex-direction: column; padding: 26px 0 20px; overflow-y: auto; }
.rail-brand { padding: 0 22px 20px; }
.rail-brand .mark { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--ink); }
.rail-brand .sub { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rail-group { padding: 14px 0 2px; }
.rail-group-h { padding: 0 22px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.rail-link { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 8px;
    padding: 7px 22px; font-size: 14px; color: var(--ink-2); border-left: 2px solid transparent; }
.rail-link .n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.rail-link .tag { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.rail-link:hover { color: var(--ink); background: var(--rule-soft); }
.rail-link.active { color: var(--ink); border-left-color: var(--klein); font-weight: 600; }
.rail-link.active .n { color: var(--klein); }
.rail-foot { margin-top: auto; padding: 16px 22px 0; border-top: 1px solid var(--rule-soft);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rail-foot button, .rail-foot a { all: unset; cursor: pointer; color: var(--muted); }
.rail-foot button:hover, .rail-foot a:hover { color: var(--klein); }

.stage { min-width: 0; display: flex; flex-direction: column; }
.stage-head { padding: 30px 40px 18px; border-bottom: 1px solid var(--rule); }
.stage-head .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--klein); }
.stage-head h1 { margin-top: 8px; font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.stage-head .meta { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-head .meta b { color: var(--ink); font-weight: 600; }
.stage-body { padding: 24px 40px 48px; min-width: 0; }
@media (max-width: 620px) { .stage-head, .stage-body { padding-left: 20px; padding-right: 20px; } }

/* ---- buttons (existing .button / .btn classes) --------------------------- */
.button, .btn, button.button {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 10px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
    border-radius: 0; cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; }
.button:hover, .btn:hover { background: var(--ink); color: var(--paper); }
.button.primary, .btn-primary, .button.split-button-main {
    background: var(--klein); border-color: var(--klein); color: var(--klein-ink); }
.button.primary:hover, .btn-primary:hover { filter: brightness(1.08); background: var(--klein); color: var(--klein-ink); }
.button.secondary { border-color: var(--rule); color: var(--muted); }
.button.secondary:hover { background: var(--paper-3); color: var(--ink); }
.button.warning { border-color: var(--warn); color: var(--warn); }
.button.warning:hover { background: var(--warn); color: var(--paper); }
.button.danger { border-color: var(--bad); color: var(--bad); }
.button.danger:hover { background: var(--bad); color: var(--paper); }
.button i, .btn i { font-size: 0.9em; }

/* split "Start" button: main action + a joined dropdown toggle (opens the
   Enable/Disable Features panel — i.e. the per-run tools). */
.split-button-container { display: inline-flex; align-items: stretch; }
.split-button-main { border-right: 0; }
.split-button-toggle { padding-left: 11px; padding-right: 11px; border-left: 1px solid color-mix(in srgb, var(--klein-ink) 35%, var(--klein)); }

/* ---- inputs -------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], select, textarea {
    font: inherit; font-size: 14px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: 0;
    padding: 10px 12px; transition: border-color 120ms; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--klein); }
textarea { resize: vertical; }
label { font-size: 13px; color: var(--muted); }

/* ---- panels / cards ------------------------------------------------------ */
.panel { background: transparent; border: 0; }
.panel-header { padding: 0 0 16px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.panel-header-content { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel-header-content h2 { font-size: 20px; font-weight: 700; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- The Room: chat as a transcript ------------------------------------- */
.chat-container { display: flex; flex-direction: column; }
.message { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 24px;
    padding: 20px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.message > *:not(.message-header) { grid-column: 2; }
.message-header { grid-column: 1; display: flex; flex-direction: column; gap: 2px;
    font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bot-name { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.message-time { color: var(--faint); font-variant-numeric: tabular-nums; }
.message-content { font-size: 16px; line-height: 1.62; color: var(--ink); max-width: 66ch; }
.message-content pre { background: var(--paper-2); border: 1px solid var(--rule-soft); padding: 12px; overflow-x: auto; }
.message-content code { background: var(--paper-2); border: 1px solid var(--rule-soft); padding: 1px 5px; font-size: 0.88em; }
.message.human .message-content { border-left: 2px solid var(--klein); padding-left: 18px; }
.message.human .bot-name { color: var(--klein); }

/* Thinking / reasoning tokens — clearly set apart from the answer, collapsible */
.message-thinking-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--rule); padding: 6px 11px; margin: 0 0 10px;
    transition: color .12s, border-color .12s; }
.message-thinking-toggle:hover { color: var(--klein); border-color: color-mix(in srgb, var(--klein) 40%, var(--rule)); }
.message-thinking-toggle i { color: var(--klein); }
.message-thinking { border-left: 2px solid var(--klein); background: var(--paper-2); padding: 12px 16px; margin: 0 0 14px; }
.message-thinking pre { margin: 0; background: transparent; border: 0; padding: 0;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted);
    white-space: pre-wrap; word-break: break-word; }

.human-input-container { margin-top: 22px; border: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; }
.human-input { border: 0; background: transparent; padding: 14px; min-height: 54px; }
.human-input:focus { outline: none; }
.human-input-actions { display: flex; }
.send-button, .cancel-button { all: unset; cursor: pointer; padding: 0 22px; display: grid; place-items: center;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.send-button { background: var(--klein); color: var(--klein-ink); }
.send-button:hover { filter: brightness(1.08); }
.cancel-button { color: var(--muted); border-left: 1px solid var(--rule); }
.cancel-button:hover { color: var(--bad); }

.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 0; background: var(--faint); display: inline-block; }
.status-dot.active { background: var(--good); }
.status-dot.inactive { background: var(--faint); }

.active-files-banner { border: 1px solid var(--rule); padding: 8px 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.toggle-container { display: inline-flex; align-items: center; gap: 8px; }
.toggle-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---- Agents: chatbot cards as a hairline grid ---------------------------- */
.chatbots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.chatbot-card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px; background: transparent; }
.chatbot-card-header { display: flex; align-items: center; gap: 12px; }
.chatbot-profile-image { width: 34px; height: 34px; border-radius: 0; border: 1px solid var(--rule); object-fit: cover; }
.chatbot-card-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; flex: 1; }
.chatbot-card-actions { display: flex; align-items: center; gap: 8px; }
.action-button { all: unset; cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px; }
.action-button:hover { color: var(--klein); }
.action-button.delete:hover { color: var(--bad); }
.chatbot-status-indicator .text-green-500 { color: var(--good); }
.chatbot-status-indicator .text-gray-400 { color: var(--faint); }
.chatbot-card-content { margin-top: 14px; }
.chatbot-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.chatbot-info-item { display: flex; flex-direction: column; gap: 2px; }
.chatbot-info-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.chatbot-info-value { font-size: 14px; color: var(--ink); }

/* ---- modals (existing .modal) -------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(20, 18, 14, 0.4); display: none;
    align-items: center; justify-content: center; z-index: 1040; }
.modal.active { display: flex; }
.modal-content { background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
    width: min(560px, 92vw); max-height: 88vh; overflow: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.modal-header h3 { font-size: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--paper-2); }
.modal-body { padding: 24px; }
/* Most legacy modals put their <form> straight inside .modal-content with no
   .modal-body wrapper — give those forms the same breathing room, and let the
   inner footer break back out to full width. (Non-form direct children like
   .presets-list carry their own padding in atelier/modals.css.) */
.modal-content > form { padding: 20px 24px 24px; }
.modal-content > form > .modal-footer { margin: 20px -24px -24px; }

/* ---- section / form patterns (settings, aws, steps, templates, ...) ------ */
.hidden { display: none !important; }
.full-width { width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--klein); width: 16px; height: 16px; }

.form-group, .setting-item { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.form-group > label, .setting-item > label, .setting-header {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.input-field, .search-input, .model-select, .credential-field { width: 100%; }

/* The settings sub-nav (Conversation / Templates / …) toggles `.active` on
   exactly one section at a time — inactive sections MUST be hidden or the
   whole panel stacks into an unreadable jumble (this is what hid the prompts). */
.settings-section { display: none; }
.settings-section.active { display: block; margin-bottom: 30px; }
.settings-section > h2, .settings-section > h3 { padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; font-size: 18px; }
.settings-group { border: 1px solid var(--rule); padding: 24px; margin-bottom: 18px; }
/* the last field in a bordered group must not add its own bottom margin on
   top of the group's padding (uneven breathing room against the border) */
.settings-group .setting-item:last-child,
.settings-group .form-group:last-child,
.modal-body .form-group:last-child,
.modal-body .setting-item:last-child { margin-bottom: 0; }
.panel-content { min-width: 0; }

/* a horizontal in-page nav (settings sub-nav) as Swiss tabs */
.settings-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.settings-nav-item { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent; border: 0; padding: 9px 14px; color: var(--muted);
    border-bottom: 2px solid transparent; cursor: pointer; }
.settings-nav-item:hover { color: var(--ink); }
.settings-nav-item.active { color: var(--ink); border-bottom-color: var(--klein); }

/* extra button aliases used in some sections */
.aws-btn, .editor-btn, .search-btn {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--rule);
    background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; transition: background 120ms, color 120ms; }
.aws-btn:hover, .editor-btn:hover, .search-btn:hover { background: var(--ink); color: var(--paper); }
.aws-btn.primary { background: var(--klein); border-color: var(--klein); color: var(--klein-ink); }

/* badges / tags */
.recommended-badge, .region-badge, .recommended {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border: 1px solid var(--rule); color: var(--muted); }
.recommended-badge, .recommended { color: var(--klein); border-color: color-mix(in srgb, var(--klein) 40%, var(--rule)); }

/* AWS region picker */
.region-checkbox-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.region-name { font-weight: 600; }
.region-code, .region-info { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.aws-step { border-left: 2px solid var(--rule); padding-left: 16px; margin-bottom: 20px; }

/* steps */
.step-header { display: flex; align-items: baseline; gap: 12px; }
.step-number { font-family: var(--mono); font-size: 12px; color: var(--klein); }
.step-info { color: var(--muted); font-size: 13px; }

/* templates / prompt editor — sidebar list + editor pane (Swiss) */
.templates-editor { border: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 520px; }
.templates-header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.templates-header h3 { font-size: 15px; }
.templates-actions { display: flex; gap: 8px; }
.templates-container { display: flex; flex: 1; min-height: 0; }
.templates-sidebar { width: 260px; flex: 0 0 260px; border-right: 1px solid var(--rule); overflow-y: auto; }
.templates-list { padding: 12px; }
.template-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 6px;
    border: 1px solid transparent; border-left: 2px solid transparent; cursor: pointer; color: var(--muted);
    transition: background 120ms, color 120ms, border-color 120ms; }
.template-item i { width: 16px; text-align: center; }
.template-item span { flex: 1; font-size: 13px; }
.template-item:hover { color: var(--ink); background: var(--paper-2); }
.template-item.active { color: var(--ink); background: var(--paper-2); border-left-color: var(--klein); }
.char-count { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.templates-editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.editor-info { display: flex; align-items: baseline; gap: 16px; }
.template-name { font-weight: 700; font-size: 14px; }
.editor-stats { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.editor-actions { display: flex; gap: 6px; }
.template-editor-wrapper { flex: 1; position: relative; min-height: 340px; }
.template-editor { display: none; position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; outline: none; padding: 20px; resize: none; background: var(--paper); color: var(--ink);
    font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.template-editor.active { display: block; }
.template-editor:focus { background: var(--paper-2); }
.template-editor::placeholder { color: var(--faint); }
.templates-editor.fullscreen { position: fixed; inset: 0; z-index: 1100; background: var(--paper); min-height: 0; }

/* credentials (cookies / passwords) — same tab pattern as settings sub-nav */
.credentials-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.credentials-tab { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 9px 14px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.credentials-tab:hover { color: var(--ink); }
.credentials-tab.active, .credentials-tab.active:hover { color: var(--ink); border-bottom-color: var(--klein); }
.credentials-content { display: none; }
.credentials-content.active { display: block; }

/* stat cards */
.stat-card { border: 1px solid var(--rule); padding: 16px; }
.stat-card .value, .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card .label, .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* generic tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); }

.loading-spinner { width: 18px; height: 18px; border: 2px solid var(--rule); border-top-color: var(--klein); border-radius: 50%; animation: atelier-spin 0.8s linear infinite; }
@keyframes atelier-spin { to { transform: rotate(360deg); } }

/* ---- top bar (global controls migrated from the classic navbar) ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 40px; border-bottom: 1px solid var(--rule); background: var(--paper); }
@media (max-width: 620px) { .topbar { padding: 10px 20px; } }
.topbar-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: transparent;
    border: 1px solid transparent; padding: 7px 11px; cursor: pointer; text-decoration: none; }
.topbar-btn:hover { color: var(--ink); border-color: var(--rule); }
.topbar-btn .kbd, .topbar-btn kbd { font-family: var(--mono); font-size: 10px; color: var(--faint); border: 1px solid var(--rule); padding: 1px 5px; }
.connection-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.connection-status::before { content: ""; width: 7px; height: 7px; background: var(--faint); }
.connection-status.connected::before { background: var(--good); }
.connection-status.disconnected::before { background: var(--bad); }

/* ---- global search overlay (Ctrl/⌘-K) ------------------------------------ */
.global-search-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: none; align-items: flex-start; justify-content: center; z-index: 1050; padding: 12vh 20px 20px; }
.global-search-overlay.active { display: flex; }
.search-container { width: min(640px, 96vw); background: var(--paper); border: 1px solid var(--ink); }
.search-input-wrapper { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.search-input-wrapper .search-icon { color: var(--muted); }
#global-search-input { flex: 1; border: 0; background: transparent; font-size: 17px; color: var(--ink); }
#global-search-input:focus { outline: none; }
.search-shortcuts { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.search-shortcuts kbd, kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--rule); padding: 1px 5px; color: var(--muted); }
.search-categories { display: flex; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.category { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 7px 11px; color: var(--muted); cursor: pointer; border: 1px solid transparent; }
.category:hover { color: var(--ink); }
.category.active { color: var(--ink); border-color: var(--klein); }
.results-container { max-height: 52vh; overflow-y: auto; }
.results-container:empty::after { content: "Type to search across the studio…"; display: block; padding: 24px 18px; color: var(--faint); font-family: var(--mono); font-size: 12px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
    .stage-head { padding: 22px 18px 14px; }
    .stage-body { padding: 18px 18px 40px; }
    .topbar { padding: 10px 18px; flex-wrap: wrap; row-gap: 8px; }
    .stage-head h1 { font-size: 27px; }
    .stage-head .meta { gap: 10px 16px; }

    /* chat transcript: stack the mono metadata above the message */
    .message { grid-template-columns: 1fr; gap: 6px; }
    .message > *:not(.message-header) { grid-column: 1; }
    .message-header { grid-column: 1; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
    .message.human .message-content { margin-left: 0; padding-left: 14px; }

    /* wide content scrolls inside its own container, page never scrolls sideways */
    .stage-body table { display: block; overflow-x: auto; white-space: nowrap; }
    .two, .settings-nav { grid-template-columns: 1fr; }
    .composer { grid-template-columns: 1fr; }
    .composer .send { padding: 12px; }
    .panel-header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
    .controls { gap: 8px; }
    .chatbots-grid { grid-template-columns: 1fr; }

    /* bordered form containers: slightly tighter padding on small screens */
    .settings-group { padding: 18px; }
    .modal-body { padding: 18px; }
    .modal-content > form { padding: 16px 18px 18px; }
    .modal-content > form > .modal-footer { margin: 16px -18px -18px; }

    /* prompt editor: stack the template list above the editor pane */
    .templates-container { flex-direction: column; }
    .templates-sidebar { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--rule); max-height: 220px; }
    .templates-header { flex-wrap: wrap; gap: 8px; }
    .editor-toolbar { flex-wrap: wrap; gap: 8px; }
    .credentials-tabs { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }