/* OpenVibe.Exchange: every AI model, one account. The kit does the pieces; this is the site's one column, its
   hero, marks, panels and the chat's answer columns. Theme tokens only, so it wears every theme, light and dark. */

.ex {
    --ex-max: 1120px;
    --ex-gap: 18px;
}
.ex, .ex *, .ex *::before, .ex *::after { box-sizing: border-box; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--ovk-panel); color: inherit; }

/* One container: the content, and the head's text, start on the same line at every width. */
.ex-wrap { width: 100%; max-width: var(--ex-max); margin: 0 auto; padding: 0 16px 28px; }
.ex-narrow { max-width: 760px; }
.ex-page { padding-top: 10px; }
.ex-muted { color: var(--ovk-muted); }
.ex-prose a:not(.ovk-btn), .ex-list a:not(.ovk-btn), .ex-more a:not(.ovk-btn), .ex-empty a:not(.ovk-btn), .ovk-empty a:not(.ovk-btn) { color: var(--ovk-accent); text-underline-offset: 2px; }

/* A sticky head inside the column still spans the window; its title sits on the content line. */
.ex-page > .ovk-head {
    --ex-head-pad: max(16px, calc((100vw - var(--ex-max)) / 2 + 16px));
    --ex-head-bleed: min(0px, calc((var(--ex-max) - 100vw) / 2 - 16px));
    margin-left: var(--ex-head-bleed);
    margin-right: var(--ex-head-bleed);
    padding-left: var(--ex-head-pad);
    padding-right: var(--ex-head-pad);
}

/* ── Hero ─────────────────────────────────────────────── */
.ex-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 34px 0 22px;
}
@media (min-width: 1024px) {
    .ex-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 34px; padding: 46px 0 26px; }
}
.ex-kicker { margin: 0 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ovk-accent); }
.ex-hero h1 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; }
.ex-lead { max-width: 60ch; margin: 0 0 20px; font-size: 1.02rem; line-height: 1.6; color: var(--ovk-muted); }
.ex-hero .ovk-find { margin-bottom: 14px; }
.ex-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* The preview is not a second product: example words, and the prices and speed are live. */
.ex-preview { border: 1px solid var(--ovk-line); border-radius: 18px; background: var(--ovk-panel); padding: 14px; }
.ex-preview-tag { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ovk-muted); }
.ex-preview-tag span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ex-preview-q { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--ovk-panel-2); font-size: .9rem; }
.ex-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 520px) { .ex-preview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ex-preview-cell { border: 1px solid var(--ovk-line); border-radius: 12px; padding: 10px 12px; background: var(--ovk-bg); }
.ex-preview-cell header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ex-preview-cell header b { font-size: .86rem; }
.ex-preview-cell p { margin: 0 0 8px; font-size: .84rem; line-height: 1.45; color: var(--ovk-text); }
.ex-preview-cell footer { font-size: .74rem; color: var(--ovk-muted); font-variant-numeric: tabular-nums; }

/* ── Numbers, panels and one-line cards ─────────────────── */
.ex .ovk-stats { margin: 12px 0 18px; padding: 0; overflow: visible; flex-wrap: wrap; }
.ex .ovk-stats > div { flex: 1 1 150px; }
.ex .ovk-stats dt { font-size: .78rem; }
@media (min-width: 600px) { .ex .ovk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* The section is the card. Its rows and tables sit directly in it; prose keeps the heading's left edge. */
.ex-card { margin: 0 0 var(--ex-gap); }
.ex-sec-body > p, .ex-sec-body > ul:not(.ex-mlist), .ex-sec-body > h3,
.ex-sec-body > .ex-presets, .ex-sec-body > .ex-floor-box, .ex-sec-body > .ex-seller,
.ex-sec-body > .ovk-receipt, .ex-sec-body > .ovk-notice, .ex-sec-body > .ovk-empty,
.ex-sec-body > .ovk-snippet, .ex-sec-body > .ex-try, .ex-sec-body > .ex-signin,
.ex-sec-body > .ovk-stats, .ex-sec-body > .ex-switch { margin-left: 14px; margin-right: 14px; }
.ex-sec-body > p, .ex-sec-body > ul:not(.ex-mlist), .ex-sec-body > h3, .ex-sec-body > .ex-presets { margin-bottom: 12px; }
.ex-sec-body > .ex-more { padding: 0 14px 12px; margin: 8px 0 0; }
.ex-sec-body > .ovk-list, .ex-sec-body > .ovk-table-wrap, .ex-sec-body > .ex-mlist {
    border: 0; border-radius: 0; background: transparent; margin: 0;
}
.ex-sec-body > .ex-mlist { border-top: 1px solid var(--ovk-line); }
.ex-sec-body > .ovk-list > .ovk-row:first-child, .ex-sec-body > .ex-mlist > .ex-mrow:first-child { border-top: 0; }

.ex-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 var(--ex-gap); }
/* Eight doors: two columns, then four from 1120 px, so no card is left alone on a row (11-07). */
@media (min-width: 720px) { .ex-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .ex-lines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ex-line {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel);
    color: var(--ovk-text); text-decoration: none;
}
.ex-line:hover { border-color: var(--ovk-accent); }
.ex-line > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-line b { font-size: .95rem; }
.ex-line small { color: var(--ovk-muted); font-size: .82rem; line-height: 1.4; }
.ex-line-go { color: var(--ovk-accent); font-weight: 700; }

.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ex-gap); }
@media (min-width: 900px) { .ex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.ex-more { margin: 10px 0 0; font-size: .9rem; }
.ex-more a { text-decoration: none; }
.ex-more a:hover { text-decoration: underline; }
.ex-prose { max-width: 74ch; line-height: 1.65; }
.ex-prose code, .ex-wrap code { font-size: .9em; overflow-wrap: anywhere; }
.ex-h3 { margin: 22px 0 8px; font-size: 1rem; }
.ex-list { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.65; }
.ex-list li { margin: 4px 0; }

.ex-trail { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.ex-trail b { font-variant-numeric: tabular-nums; }
.ex-trail small { color: var(--ovk-muted); font-size: .68rem; }

.ex-row-name { color: inherit; text-decoration: none; }
.ex-row-name:hover { text-decoration: underline; }
.ex-try-link {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--ovk-line); color: var(--ovk-text);
    text-decoration: none; font-size: .82rem; white-space: nowrap;
}
.ex-try-link:hover { border-color: var(--ovk-accent); }

/* ── Model rows ─────────────────────────────────────────── */
.ex-mlist { list-style: none; margin: 0; padding: 0; }
.ex-mrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ovk-line); }
.ex-mrow:first-child { border-top: 0; }
.ex-mrow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ovk-text); text-decoration: none; }
.ex-mrow-main:hover b { text-decoration: underline; }
.ex-mrow-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-mrow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ex-mrow-title b { font-size: .95rem; overflow-wrap: anywhere; }
.ex-mrow-text small { color: var(--ovk-muted); font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }

/* ── Model family marks ─────────────────────────────────── */
.ex-mk {
    --ex-mk: var(--ovk-muted);
    display: inline-grid; place-items: center; flex: none;
    width: var(--ex-mk-size, 28px); height: var(--ex-mk-size, 28px);
    border-radius: calc(var(--ex-mk-size, 28px) * .28);
    background: color-mix(in srgb, var(--ex-mk) 16%, var(--ovk-panel));
    color: var(--ex-mk);
}
.ex-mk svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-mk--accent { --ex-mk: var(--ovk-accent); }
.ex-mk--ok { --ex-mk: var(--ovk-ok); }
.ex-mk--warn { --ex-mk: var(--ovk-warn); }
.ex-mk--bad { --ex-mk: var(--ovk-bad); }
.ex-mk--live { --ex-mk: var(--ovk-live); }
.ex-mk--muted, .ex-mk--other { --ex-mk: var(--ovk-muted); }
.ex-mk--product { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: transparent; }
.ex-mk--machine { --ex-mk: var(--ovk-accent); }
/* Family hues use the semantic tokens: accent, ok, warn, bad, live. */
.ex-mk--deepseek { --ex-mk: var(--ovk-accent); }
.ex-mk--qwen { --ex-mk: var(--ovk-ok); }
.ex-mk--kimi { --ex-mk: var(--ovk-live); }
.ex-mk--glm { --ex-mk: var(--ovk-warn); }
.ex-mk--minimax { --ex-mk: var(--ovk-bad); }
.ex-mk--llama { --ex-mk: var(--ovk-accent); }
.ex-mk--mistral { --ex-mk: var(--ovk-warn); }
.ex-mk--gemma { --ex-mk: var(--ovk-ok); }
.ex-mk--openai { --ex-mk: var(--ovk-ok); }
.ex-mk--anthropic { --ex-mk: var(--ovk-warn); }
.ex-mk--google { --ex-mk: var(--ovk-accent); }
.ex-mk--meta { --ex-mk: var(--ovk-accent); }
.ex-mk--microsoft { --ex-mk: var(--ovk-accent); }

/* ── Products (AI in OpenVibe) ──────────────────────────── */
.ex-product-list { list-style: none; margin: 0; padding: 0; }
.ex-product-row + .ex-product-row { border-top: 1px solid var(--ovk-line); }
.ex-product-row a { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ovk-text); text-decoration: none; }
.ex-product-row a > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-product-row small { color: var(--ovk-muted); font-size: .8rem; }
.ex-product-row a:hover b { text-decoration: underline; }
.ex-product-cell { display: inline-flex; align-items: center; gap: 8px; }

/* ── One model ──────────────────────────────────────────── */
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ex-chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--ovk-line); color: var(--ovk-text);
    text-decoration: none; font-size: .88rem; background: var(--ovk-panel);
}
.ex-chip:hover { border-color: var(--ovk-accent); }
.ex-chip.is-on { border-color: var(--ovk-accent); background: color-mix(in srgb, var(--ovk-accent) 16%, transparent); font-weight: 600; }
.ex-offer-name { font-weight: 600; }
.ex-mini {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--ovk-line); color: var(--ovk-text);
    text-decoration: none; font-size: .82rem;
}
.ex-mini:hover { border-color: var(--ovk-accent); }

.ex-presets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
@media (min-width: 720px) { .ex-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-preset { border: 1px solid var(--ovk-line); border-radius: 14px; padding: 12px 14px; background: var(--ovk-bg); }
.ex-preset header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.ex-preset code { font-size: .78rem; color: var(--ovk-muted); }
.ex-preset p { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ovk-muted); }

.ex-try { max-width: 780px; margin: 0; }
.ex-try textarea, .ovt-settings-body textarea, .ovt-settings-body input[type="number"] {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--ovk-line); background: var(--ovk-input, var(--ovk-panel));
    color: var(--ovk-text); font: inherit; line-height: 1.5;
}
.ex-try-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.ex-label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: .9rem; }
.ex-signin { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ex-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* ── Sell ──────────────────────────────────────────────── */
.ex-seller {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px;
    border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-bg);
}
.ex-seller.is-example { border-style: dashed; }
.ex-seller b { display: block; font-size: .95rem; }
.ex-seller p { margin: 2px 0 0; font-size: .84rem; color: var(--ovk-muted); line-height: 1.4; }
.ex-seller > div { flex: 1; min-width: 0; }
.ex-badge-note { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ovk-muted); border: 1px solid var(--ovk-line); border-radius: 999px; padding: 3px 8px; }
.ex-steps ol { margin: 0 0 14px; padding-left: 1.2em; line-height: 1.8; }

/* ── Status ────────────────────────────────────────────── */
.ex-changelog { list-style: none; margin: 0; padding: 0; }
.ex-changelog li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ovk-line); font-size: .9rem; }
.ex-changelog li:first-child { border-top: 0; }
.ex-changelog time { flex: none; color: var(--ovk-muted); font-variant-numeric: tabular-nums; }

/* ── Chat ──────────────────────────────────────────────── */
body.ex-app .ovf { display: none; }
.ex-chat .ovt-settings { margin: 0 0 8px; }
.ex-chat .ovt-settings summary { cursor: pointer; font-size: .85rem; color: var(--ovk-muted); }
.ex-chat .ovt-settings-body { padding: 8px 0 4px; }
.ex-chat .ovt-composer { max-width: 100%; }

/* One round: the answers side by side on a computer, stacked on a phone. */
.ex-round { max-width: 1100px; margin: 0 auto; width: 100%; }
.ex-answer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1024px) {
    .ex-answer-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-answer-grid[data-count="3"], .ex-answer-grid[data-count="4"], .ex-answer-grid[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ex-answer-col { min-width: 0; border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel); padding: 12px 14px; }
.ex-answer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ex-answer-head b { font-size: .9rem; }
.ex-answer-cost { margin-left: auto; font-size: .74rem; color: var(--ovk-muted); font-variant-numeric: tabular-nums; text-align: right; }
.ex-answer-col .ovt-answer { font-size: .94rem; }
.ex-answer-col .ovt-meta { display: none; }
.ex-receipt { margin-top: 8px; border-top: 1px solid var(--ovk-line); padding-top: 6px; }
.ex-receipt summary { cursor: pointer; font-size: .78rem; color: var(--ovk-muted); }
.ex-receipt dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 8px 0 0; font-size: .78rem; }
.ex-receipt dt { color: var(--ovk-muted); }
.ex-receipt dd { margin: 0; overflow-wrap: anywhere; }

/* ── Uncensored ────────────────────────────────────────── */
.ex-floor-box {
    border: 1px solid color-mix(in srgb, var(--ovk-bad) 45%, var(--ovk-line));
    border-radius: 14px; padding: 14px 16px;
    background: color-mix(in srgb, var(--ovk-bad) 8%, transparent);
}
.ex-floor-box p:last-child { margin-bottom: 0; }
.ex-confirm { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; }
.ex-check { display: inline-flex; gap: 8px; align-items: center; }

/* ── Tables on a phone ─────────────────────────────────── */
.ex .ovk-table td small { color: var(--ovk-muted); }

@media (max-width: 600px) {
    .ex-hero { padding-top: 22px; }
    .ex-hero-actions .ovk-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Companions: the gallery, a character page, the card form ───────────── */
.ex-companions-head { padding: 30px 0 14px; }
.ex-companions-head h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 5vw, 2.4rem); letter-spacing: -.02em; }
.ex-head-actions { margin: 12px 0 0; }
.ex-lede { margin: 0; max-width: 62ch; color: var(--ovk-muted); font-size: .95rem; line-height: 1.55; }
.ex-gallery-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0 14px; }
.ex-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 320px; }
.ex-search input { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .92rem; }
.ex-search input[type=search] { flex: 1 1 200px; }
.ex-search input[type=text] { flex: 1 1 150px; }
.ex-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-sort { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .88rem; cursor: pointer; }
.ex-sort.is-on { border-color: var(--ovk-accent); color: var(--ovk-accent); font-weight: 600; }
.ex-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .92rem; text-decoration: none; cursor: pointer; }
.ex-btn-primary { background: var(--ovk-accent); border-color: var(--ovk-accent); color: var(--ovk-on-accent, #fff); font-weight: 600; }
.ex-gallery-tags { margin: 0 0 16px; }
.ex-taglist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .82rem; text-decoration: none; }
.ex-chip.is-on { border-color: var(--ovk-accent); color: var(--ovk-accent); }
.ex-chip-18 { border-color: var(--ovk-accent); color: var(--ovk-accent); font-weight: 700; }
.ex-chip-n { color: var(--ovk-muted); font-size: .75rem; }
.ex-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; list-style: none; margin: 0 0 18px; padding: 0; }
.ex-card-tile { border: 1px solid var(--ovk-line); border-radius: 14px; background: var(--ovk-panel); padding: 14px; }
.ex-card-tile-link { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; color: inherit; text-decoration: none; }
.ex-card-face { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--ovk-panel-2, var(--ovk-panel)); }
.ex-card-face-blank { display: inline-block; border: 1px dashed var(--ovk-line); }
.ex-card-tile-body { display: grid; gap: 3px; min-width: 0; }
.ex-card-tile-name { font-size: 1rem; line-height: 1.25; }
.ex-card-tile-by { font-size: .8rem; color: var(--ovk-muted); }
.ex-card-tile-desc { font-size: .85rem; color: var(--ovk-muted); line-height: 1.45; }
.ex-card-tile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ex-more { margin: 0 0 22px; border-top: 1px solid var(--ovk-line); padding-top: 10px; }
.ex-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .95rem; color: var(--ovk-accent); }
.ex-mine h2 { font-size: 1.1rem; margin: 24px 0 10px; }
.ex-companion { max-width: 760px; }
.ex-companion-head { display: flex; gap: 16px; align-items: center; padding: 26px 0 8px; }
.ex-companion-head h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.ex-companion-avatar { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; }
.ex-companion-by { margin: 0; color: var(--ovk-muted); font-size: .88rem; }
.ex-companion-desc { font-size: 1rem; line-height: 1.6; }
.ex-companion-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-companion-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0; }
.ex-companion-section { margin: 18px 0; }
.ex-companion-section h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ovk-muted); margin: 0 0 6px; }
.ex-companion-section p { margin: 0; line-height: 1.6; }
.ex-companion-model, .ex-companion-meta { font-size: .85rem; color: var(--ovk-muted); }
/* The export links act as buttons, so they get a finger-sized target at every width. */
.ex-companion-export { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
.ex-form { display: grid; gap: 6px; margin: 16px 0 26px; }
.ex-form .ex-label { margin-top: 10px; font-size: .85rem; font-weight: 600; }
.ex-form input[type=text], .ex-form textarea, .ex-form select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .92rem; min-height: 44px; font-family: inherit; }
.ex-form textarea { min-height: 88px; resize: vertical; }
.ex-form button { justify-self: start; }
.ex-hint { font-size: .8rem; color: var(--ovk-muted); line-height: 1.5; }
.ex-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.ex-inline input[type=text] { flex: 1 1 240px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-panel); color: inherit; font-size: .9rem; }
.ex-branch-turn { list-style: none; margin: 0 0 4px; }
.ex-branch-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ex-branch-count { font-size: .78rem; color: var(--ovk-muted); }
.ex-branch { font-size: .78rem; color: var(--ovk-accent); text-decoration: none; }
.ex-saw-context { margin: 0; padding-left: 18px; font-size: .82rem; line-height: 1.5; }
.ex-saw-system { white-space: pre-wrap; font-size: .78rem; line-height: 1.5; background: var(--ovk-panel); border: 1px solid var(--ovk-line); border-radius: 10px; padding: 10px; max-height: 260px; overflow: auto; }

/* The companions' chat rides openvibe-shared's thread UI. On a phone the shared pieces are a touch short of
   a finger (36-42px); this page raises them to 44px without touching the shared package. */
.ex-companion-chat .ovk-sidebar-action,
.ex-companion-chat .ovk-sidebar-item,
.ex-companion-chat .ovt-btn,
.ex-companion-chat .ovk-sidebar-find input,
.ex-companion-chat .ov-sel,
.ex-companion-chat .ovt-composer textarea,
.ex-companion-chat .ovt-settings-body input,
.ex-companion-chat .ovt-settings-body select { min-height: 44px; }
.ex-companion-chat .ov-sel-native { min-height: 44px; }
.ex-companion-chat .ovt-send { min-height: 44px; min-width: 44px; }
.ex-companion-chat .ov-sel-native { position: absolute; opacity: 0; height: 44px; }

/* ── Companions: the chat ──────────────────────────────────────────────── */
/* A monogram: the first letter of the name, on a colour the name picks out of the kit's palette, so the same
   name always gets the same colour and a card is never an empty square. */
.ex-mono {
    display: inline-grid; place-items: center; overflow: hidden;
    background: color-mix(in srgb, var(--ex-mono, var(--ovk-accent)) 22%, var(--ovk-panel));
    /* The letter is the palette colour mixed towards the panel's text colour, so it reads on the tint in a light
       theme and in a dark one: the palette's fills alone are not text colours. */
    color: color-mix(in srgb, var(--ex-mono, var(--ovk-accent)) 50%, var(--ovk-text));
    font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.ex-card-face.ex-mono { font-size: 1.7rem; }
.ex-companion-avatar.ex-mono { font-size: 2.4rem; }

/* The chat is an app: the window does not scroll, the thread scrolls in its own pane. So the navbar stays where it
   is, the thread starts under the one header, and nothing ever slides under a translucent bar. */
body.ex-companion-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
/* One header on the chat page: the site's own bar (faded at the top, and another site's chrome) is not there, so the
   chat's header is the top of the window and the thread starts under it. */
body.ex-companion-shell #navbar-mount,
body.ex-companion-shell .account-bar { display: none; }
body.ex-companion-shell > main.ex { flex: 1; min-height: 0; display: flex; }
.ex-companion-chat .ovt { flex: 1; min-height: 0; height: auto; }
.ex-companion-chat .ovt-main { min-height: 0; }
.ex-companion-chat .ovt-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
/* The person's side keeps its bubble and its actions together, whatever height the turn is. */
.ex-companion-chat .ovt-you { align-content: start; }
@media (min-width: 761px) { .ex-companion-chat .ovt > .ovk-sidebar { position: static; height: auto; } }
@media (min-width: 1180px) { .ex-companion-chat .ovt-panel { position: static; height: auto; } }

/* The chat's header: the character, its name, and the model it talks on, as a chip that opens the settings. */
.ex-chat-head { gap: 8px; }
.ex-chat-id { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ex-chat-face { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; flex: none; }
.ex-chat-title { font-size: 16px; }
.ex-chat-settings { flex: none; }
.ex-chat-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 40vw;
    min-height: 44px; padding: 0 12px; overflow: hidden; cursor: pointer; list-style: none;
}
.ex-chat-chip::-webkit-details-marker { display: none; }
.ex-chat-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-chat-chip-caret { flex: none; font-size: .7rem; opacity: .75; }
/* The settings drop from the header, over the thread. The header is the containing block (it is sticky). */
.ex-chat-settings-body {
    position: absolute; z-index: 40; right: 12px; top: calc(100% + 8px);
    width: min(320px, calc(100% - 24px)); padding: 2px 14px 14px;
    border-radius: 16px; border: 1px solid var(--ovk-line); background: var(--ovk-panel);
    box-shadow: var(--ov-elev-3, 0 14px 32px rgba(0, 0, 0, .4));
}
.ex-chat-settings-body .ex-label { margin: 12px 0 6px; font-size: .85rem; }
.ex-chat-settings-body select,
.ex-chat-settings-body input,
.ex-chat-settings-body textarea {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px;
    border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-input, var(--ovk-panel));
    color: var(--ovk-text); font: inherit;
}
.ex-chat-settings-body textarea { min-height: 72px; resize: vertical; }

/* The quiet actions under a message: small, and there on hover, on focus, and always on a touch screen. */
.ex-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 2px; }
.ex-acts-you { justify-content: flex-end; }
.ex-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: none;
    color: var(--ovk-muted); font: inherit; font-size: 12.5px; line-height: 1.2;
    cursor: pointer; text-decoration: none;
}
.ex-act:hover, .ex-act:focus-visible { background: var(--ovk-panel-2); color: var(--ovk-text); }
.ex-act-strong { color: var(--ovk-accent); font-weight: 600; }
.ex-act-form { display: inline-flex; margin: 0; }

/* Edit, in place: the summary opens the box, and the box becomes the message when it is saved. */
.ex-menu { position: relative; }
.ex-menu > summary { list-style: none; cursor: pointer; }
.ex-menu > summary::-webkit-details-marker { display: none; }
.ex-lbl-shut { display: none; }
.ex-menu[open] .ex-lbl-open { display: none; }
.ex-menu[open] .ex-lbl-shut { display: inline; }
/* While the box is open the label keeps the edge the message had, above the box. */
.ex-menu[open] > summary { display: flex; width: 100%; justify-content: flex-end; }
.ex-menu-body {
    display: grid; gap: 8px; justify-items: start; margin-top: 6px; padding: 10px;
    width: min(420px, 76vw); box-sizing: border-box;
    border-radius: 14px; border: 1px solid var(--ovk-line); background: var(--ovk-panel);
    box-shadow: var(--ov-elev-2, 0 10px 24px -18px rgba(0, 0, 0, .7));
}
.ex-menu-body textarea {
    width: 100%; box-sizing: border-box; min-height: 76px; padding: 8px 10px;
    border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-input, var(--ovk-panel));
    color: var(--ovk-text); font: inherit; line-height: 1.5; resize: vertical;
}
/* While the message is being edited, it is the box. */
.ovt-turn:has(.ex-menu[open]) .ovt-bubble { display: none; }

/* The branch arrows: the turn's branch line, 1/2. */
.ex-branch-nav { display: inline-flex; align-items: center; gap: 2px; }
.ex-branch-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; min-height: 32px; border-radius: 9px;
    color: var(--ovk-muted); text-decoration: none; font-size: 16px; line-height: 1;
}
.ex-branch-arrow:hover, .ex-branch-arrow:focus-visible { background: var(--ovk-panel-2); color: var(--ovk-text); }
.ex-branch-arrow.is-off { opacity: .3; }
.ex-branch-count { font-size: 12.5px; color: var(--ovk-muted); font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
    .ex-acts { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
    .ovt-turn:hover .ex-acts, .ovt-turn:focus-within .ex-acts { opacity: 1; pointer-events: auto; }
}
.ex-acts:has(.ex-menu[open]) { opacity: 1; pointer-events: auto; }

/* On a touch screen the quiet actions are always there, and they are finger-sized. */
@media (hover: none), (pointer: coarse) {
    .ex-act { min-height: 44px; }
    .ex-branch-arrow { min-width: 44px; min-height: 44px; }
}

/* ── Strict privacy and a sealed chat ─────────────────────── */
.ex-check {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 10px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ovk-text);
    cursor: pointer;
}
.ex-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ovk-accent, currentColor); }
.ex-small { font-size: 12.5px; margin: 2px 0 0; }
.ex-switch { max-width: 640px; }
.ex-switch .ovk-btn { margin-top: 8px; }

.ex-sealed-card {
    display: grid; gap: 14px; margin-top: 18px;
    padding: 16px; border-radius: 16px;
    border: 1px solid var(--ovk-line); background: var(--ovk-panel);
}
.ex-sealed-title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.ex-sealed-status { margin: 0; color: var(--ovk-muted); font-size: 14px; line-height: 1.55; }
.ex-sealed-status.is-ready { color: var(--ovk-text); }
.ex-sealed-turns { display: grid; gap: 12px; max-height: 58vh; overflow: auto; }
.ex-sealed-turns:empty { display: none; }
.ex-turn {
    display: grid; gap: 4px; max-width: 760px;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--ovk-line); background: var(--ovk-panel-2, var(--ovk-panel));
}
.ex-turn--user { background: transparent; justify-self: end; }
.ex-turn-who { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ovk-muted); }
.ex-turn-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 15px; }
.ex-sealed-form { display: grid; gap: 8px; }
.ex-sealed-form textarea {
    width: 100%; box-sizing: border-box; min-height: 92px; padding: 10px 12px;
    border-radius: 12px; border: 1px solid var(--ovk-line);
    background: var(--ovk-input, var(--ovk-panel)); color: var(--ovk-text); font: inherit; line-height: 1.55; resize: vertical;
}
.ex-sealed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ex-sealed-row select {
    min-height: 40px; padding: 6px 10px; border-radius: 10px;
    border: 1px solid var(--ovk-line); background: var(--ovk-input, var(--ovk-panel)); color: var(--ovk-text); font: inherit;
}
.ex-sealed-note {
    margin: 16px 0 0; max-width: 68ch; font-size: 13px; line-height: 1.6; color: var(--ovk-muted);
}
.ex-sealed-note strong { color: var(--ovk-text); }

@media (max-width: 640px) {
    .ex-sealed-card { padding: 12px; border-radius: 14px; }
    .ex-sealed-turns { max-height: none; }
    .ex-sealed-row select { width: 100%; }
    .ex-sealed-row .ex-check { min-height: 44px; }
}

@media (max-width: 700px) {
    .ex-check { min-height: 44px; align-items: center; }
}

/* ── The Arena and the rankings ─────────────────────────── */
.ex-arena-form textarea { width: 100%; }
.ex-arena-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.ex-arena-form-row .ex-muted { font-size: .82rem; }
.ex-arena-steps { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: arena; }
.ex-arena-steps li { position: relative; padding-left: 34px; line-height: 1.5; }
.ex-arena-steps li::before {
    counter-increment: arena; content: counter(arena);
    position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center; font-size: .78rem; font-weight: 800;
    background: var(--ovk-panel-2); color: var(--ovk-accent);
}
.ex-arena-recent { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ovk-line); }
.ex-arena-recent li { border-bottom: 1px solid var(--ovk-line); }
.ex-arena-recent a { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; padding: 12px 14px; text-decoration: none; color: inherit; }
.ex-arena-recent a:hover, .ex-arena-recent a:focus-visible { background: var(--ovk-panel-2); }
.ex-arena-recent small { color: var(--ovk-muted); font-size: .78rem; }
.ex-arena-count { margin: 0 0 8px; font-size: .82rem; }
.ex-arena-prompt { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.55; }

.ex-arena-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 860px) { .ex-arena-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-arena-answer { min-width: 0; border: 1px solid var(--ovk-line); border-radius: 16px; background: var(--ovk-panel); padding: 12px 14px; }
.ex-arena-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ovk-line); }
.ex-arena-head b { font-size: .95rem; }
.ex-arena-head .ex-muted { font-size: .74rem; overflow-wrap: anywhere; }
.ex-arena-letter {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
    background: var(--ovk-panel-2); color: var(--ovk-accent); font-weight: 800; font-size: .82rem;
}
.ex-arena-text { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.ex-arena-receipt { margin-top: 12px; }

.ex-arena-vote { margin-top: 16px; }
.ex-arena-vote fieldset { margin: 0; padding: 0; border: 0; }
.ex-arena-vote legend { font-weight: 700; margin-bottom: 8px; }
.ex-arena-vote-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-arena-vote-row .ovk-btn { flex: 1 1 140px; min-height: 44px; }
.ex-arena-vote .ex-muted { margin: 8px 0 0; font-size: .8rem; }
.ex-arena-voted { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 16px 0 0; }

@media (min-width: 860px) {
    .ex-rankings-table td:first-child, .ex-rankings-table th:first-child { white-space: nowrap; }
}

/* A table's model link is a finger target on a phone, not only a word in a cell. */
@media (max-width: 700px) {
    .ex-page .ovk-table th a, .ex-page .ovk-table td a { display: inline-flex; align-items: center; min-height: 44px; }
    .ex-arena-voted .ovk-btn { min-height: 44px; }
}

/* The status changelog: one line per change, so a long model name can wrap without a flex split. */
.ex-changes { list-style: none; margin: 0 0 12px; padding: 0; }
.ex-changes li { padding: 8px 0; border-top: 1px solid var(--ovk-line); font-size: .9rem; line-height: 1.5; }
.ex-changes li:first-child { border-top: 0; }

/* ── Companions: memory and lorebooks ─────────────────────────────────── */
.ex-chat-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.ex-locked { margin: 0 0 8px; font-size: .88rem; color: var(--ovk-muted); }
.ex-sealed { display: inline-block; padding: 2px 8px; border: 1px dashed var(--ovk-line); border-radius: 8px; color: var(--ovk-muted); font-style: italic; }
.ex-memory-lock, .ex-memory-add, .ex-memory-list { margin: 22px 0; }
.ex-memory-lock h2, .ex-memory-add h2, .ex-memory-list h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ovk-muted); margin: 0 0 8px; }
.ex-notes, .ex-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-note, .ex-entry, .ex-lorebook { border: 1px solid var(--ovk-line); border-radius: 14px; padding: 12px 14px; background: var(--ovk-panel); }
.ex-note-head, .ex-entry-head, .ex-lorebook-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.ex-note-text, .ex-entry-text { margin: 0 0 8px; line-height: 1.55; overflow-wrap: anywhere; }
.ex-note-acts { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ex-entry-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ex-lorebook { margin: 18px 0; }
.ex-lorebook-head h2 { margin: 0; font-size: 1.05rem; }
.ex-lorebook .ex-menu-body, .ex-note .ex-menu-body { margin-top: 10px; }
.ex-menu-body input[type=text], .ex-menu-body input[type=number], .ex-menu-body select {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px;
    border-radius: 10px; border: 1px solid var(--ovk-line); background: var(--ovk-input, var(--ovk-panel));
    color: var(--ovk-text); font: inherit;
}
.ex-menu-body input[type=file] { max-width: 100%; }
.ex-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; }
.ex-check input { width: 20px; height: 20px; }
.ex-saw-list { margin: 0; padding-left: 18px; font-size: .82rem; line-height: 1.5; }
@media (max-width: 420px) {
    .ex-note, .ex-entry, .ex-lorebook { padding: 10px 12px; }
    .ex-note-acts .ex-act, .ex-note-acts .ex-act-form button { min-height: 44px; }
}

.ex-back { display: inline-flex; align-items: center; min-height: 44px; }
.ex-menu-body input[type=file] { min-height: 44px; }
.ex-memory-lock a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pooled machines (design 2026-11-06, part 4): four stacked steps, every control 44 px on a phone, nothing wider
   than the screen. The numbers are Node's measurements; a machine that cannot join is greyed, never hidden. */
.ex-pool-steps { display: grid; gap: 14px; margin-top: 14px; }
.ex-pool-step { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-primary, #0a0f1c); min-width: 0; }
.ex-pool-h { margin: 0 0 10px; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.ex-pool-form { display: grid; gap: 12px; }
.ex-pool-machines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-pool-machine { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); min-width: 0; }
.ex-pool-machine.is-off { opacity: .6; }
.ex-pool-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
.ex-pool-pick input { width: 20px; height: 20px; flex: none; }
.ex-pool-detail, .ex-pool-link, .ex-pool-why, .ex-pool-note, .ex-pool-head { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-secondary, #96a7c2); overflow-wrap: anywhere; }
.ex-pool-why, .ex-pool-note { color: var(--text-muted, #7386a3); }
.ex-pool-link.is-good { color: var(--success-text, #22c55e); font-weight: 700; }
.ex-pool-link.is-bad { color: var(--error, #ef4444); font-weight: 700; }
.ex-pool-head b { color: var(--text-primary, #e6edf7); }
.ex-pool-approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-pool-approval { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); }
.ex-pool-controls { display: grid; gap: 10px; margin: 0 0 10px; }
.ex-pool-controls dt { font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.ex-pool-controls dd { margin: 2px 0 0; line-height: 1.5; color: var(--text-secondary, #96a7c2); }
.ex-pool-stop { margin-top: 12px; }
.ex-pool .ex-field select, .ex-pool .ex-btn, .ex-pool .ovk-btn { min-height: 44px; }
.ex-pool .ex-field select { width: 100%; max-width: 100%; }
@media (max-width: 560px) {
    .ex-pool-step { padding: 12px; }
    .ex-pool-approval { align-items: flex-start; }
    .ex-pool .ex-field select { width: 100%; }
}

/* Why this model, Start building and the merged FAQ (moved from ai.openvibe.services, 2026-11-07). */
.ex-why-answer { margin: 16px 0; padding: 16px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #101828); min-width: 0; }
.ex-answer-body { margin: 8px 0 12px; }
.ex-answer-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.ex-why-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; font-size: .9rem; }
.ex-why-facts dt { font-weight: 800; color: var(--text-muted, #7386a3); }
.ex-why-facts dd { margin: 0; color: var(--text-secondary, #96a7c2); overflow-wrap: anywhere; }
.ex-why-form { display: grid; gap: 10px; }
.ex-why-form textarea { width: 100%; min-height: 96px; }
.ex-why-gate { margin: 8px 0; }
.ex-faq { display: grid; gap: 10px; }
.ex-faq .ovk-fold { margin: 0; }