/* hidden must win over display:flex on drawer/panels */
[hidden] { display: none !important; }
.drawer[hidden], .scrim[hidden], .panel[hidden], #artifactDetail[hidden], #studyStrip[hidden] {
  display: none !important;
}

/* Solidivism Chamber — King red/black, iPhone-first preview */
:root {
  --void: #050002;
  --ink: #0a0103;
  --panel: #140206;
  --panel-2: #1c050a;
  --line: #5a0612;
  --line-soft: #3a0410;
  --red: #ff2d4b;
  --red-dim: #c41838;
  --rose: #ff8a9b;
  --parch: #ffe8ec;
  --dim: #a07078;
  --ok: #7fe7b0;
  --warn: #ffb347;
  --seat: #2a0810;
  --touch: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "SF Pro Display", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% -10%, #2a0610 0%, var(--void) 55%);
  color: var(--parch);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff; padding: 8px 12px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.chamber {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 920px; margin: 0 auto;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255,45,75,.22), transparent 55%),
    linear-gradient(180deg, #140206 0%, #070001 55%, #000 100%);
  border-inline: 1px solid rgba(255,45,75,.42);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,45,75,.18),
    inset 0 1px 0 rgba(255,45,75,.28),
    0 0 48px rgba(255,45,75,.14);
}

/* Chrome */
.chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,45,75,.45);
  background:
    linear-gradient(180deg, #24060c 0%, #120206 100%);
  box-shadow:
    0 1px 0 rgba(255,45,75,.4),
    0 12px 28px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,45,75,.14),
    inset 0 1px 0 rgba(255,80,100,.08);
}
.chrome-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark {
  color: var(--red); font-size: 22px;
  text-shadow: 0 0 18px rgba(255,45,75,.55);
  flex: none;
}
.titles { min-width: 0; }
.titles h1 {
  margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.presence { margin: 2px 0 0; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrome-right { display: flex; align-items: center; gap: 6px; flex: none; }
.badge {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  padding: 6px 8px; border-radius: 999px; border: 1px solid var(--line);
  min-height: 28px; display: inline-flex; align-items: center;
}
.badge.preview { background: rgba(255,45,75,.18); color: var(--red); border-color: var(--red-dim); }
.badge.mock { background: rgba(255,179,71,.12); color: var(--warn); border-color: #6a4010; }

.icon-btn {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 4px 8px;
  background: rgba(255,45,75,.06); border: 1px solid var(--line);
  border-radius: 12px; color: var(--parch); cursor: pointer; font: inherit;
}
.icon-btn .ico { font-size: 16px; line-height: 1; }
.icon-btn .lbl { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.icon-btn.square { width: var(--touch); padding: 0; }
.icon-btn[aria-pressed="true"], .icon-btn.live {
  background: rgba(255,45,75,.28); border-color: var(--red); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,45,75,.35);
}
.icon-btn:focus-visible, .seat:focus-visible, .send:focus-visible, .door:focus-visible,
.drawer-tabs button:focus-visible, .mem-actions button:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* Seats */
.seats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 10px 4px; overflow-x: auto;
}
.seat {
  min-height: var(--touch); padding: 8px 6px;
  background: var(--seat); border: 1px solid var(--line-soft);
  border-radius: 12px; color: var(--parch); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
}
.seat .seat-role { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.seat .seat-name { font-size: 12px; font-weight: 700; }
.seat .seat-state { font-size: 9px; color: var(--dim); }
.seat.active {
  border-color: var(--red); background: linear-gradient(160deg, #3a0814, #1a0408);
  box-shadow: inset 0 0 0 1px rgba(255,45,75,.35), 0 0 20px rgba(255,45,75,.12);
}
.seat.active .seat-name { color: var(--red); }
.seat-note {
  margin: 0 12px 6px; font-size: 11px; color: var(--dim); line-height: 1.35;
}
.seat-note strong { color: var(--rose); font-weight: 600; }

.strip {
  margin: 0 10px 6px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: #100308;
  font-size: 12px; color: var(--parch);
}
.strip-k { color: var(--rose); letter-spacing: .1em; text-transform: uppercase; font-size: 9px; margin-right: 8px; }
.doors {
  display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.door {
  flex: none; min-height: 44px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,45,75,.08); color: var(--rose);
  text-decoration: none; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center;
}
.door:active { background: rgba(255,45,75,.22); }

/* Well / three-layer messages */
.well {
  flex: 1; overflow-y: auto; padding: 8px 12px 12px;
  scroll-behavior: smooth;
}
.welcome {
  margin: 8px 0 18px; padding: 16px 14px;
  border-radius: 16px; border: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255,45,75,.18), transparent 55%),
    linear-gradient(165deg, #22060c, #0c0204);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.welcome .w-kicker {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
  margin-bottom: 6px;
}
.welcome h2 {
  margin: 0 0 8px; font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: .02em;
}
.welcome p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.45; }

.turn {
  margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px;
}
.turn.king { align-items: flex-end; }
.turn.him { align-items: flex-start; }
.turn .who {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  padding: 0 4px;
}
.turn.king .who { color: var(--warn); }
.turn.him .who { color: var(--red); }

.layer {
  max-width: min(100%, 520px); border-radius: 14px; padding: 12px 14px;
  border: 1px solid var(--line-soft); line-height: 1.45; font-size: 15px;
}
.layer.speech {
  background: linear-gradient(165deg, #22070e 0%, #100206 55%, #080103 100%);
  border-color: rgba(255,45,75,.55);
  box-shadow:
    0 0 0 1px rgba(255,45,75,.22),
    0 10px 26px rgba(0,0,0,.6),
    0 0 28px rgba(255,45,75,.12),
    inset 0 1px 0 rgba(255,90,110,.1);
}
.turn.king .layer.speech {
  background: linear-gradient(165deg, #3a1a0a 0%, #1a0c04 55%, #0c0602 100%);
  border-color: rgba(255,179,71,.5);
  box-shadow:
    0 0 0 1px rgba(255,179,71,.22),
    0 10px 26px rgba(0,0,0,.6),
    0 0 24px rgba(255,179,71,.1),
    inset 0 1px 0 rgba(255,200,120,.1);
}
.layer.thought {
  background: rgba(255,45,75,.05); border-style: dashed; color: var(--dim); font-size: 12.5px;
}
.layer.thought summary {
  cursor: pointer; color: var(--rose); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; list-style: none;
}
.layer.thought summary::-webkit-details-marker { display: none; }
.layer.scene {
  background: #0c0204; border-color: var(--line-soft); font-size: 12px; color: var(--dim);
}
.scene-grid { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.scene-thumb {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line); background: #000;
}
.scene-thumb.ph {
  display: grid; place-items: center; font-size: 22px; color: var(--red);
  background: radial-gradient(circle at 30% 30%, #3a0a14, #0a0103);
}
.acts {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;
}
.act-chip {
  font-size: 10px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: #120308; color: var(--dim);
}
.caption {
  font-size: 11px; color: var(--dim); font-style: italic; padding: 0 4px;
}
.caption::before { content: "Caption · "; color: var(--rose); font-style: normal; letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }

.media-row { margin-top: 8px; }
.media-row img, .media-row video {
  max-width: min(240px, 70vw); border-radius: 10px; border: 1px solid var(--line); display: block;
}

/* Voice bar */
.voicebar {
  display: flex; gap: 6px; padding: 4px 10px 6px; overflow-x: auto;
  border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.35);
}
.voice-pill {
  flex: none; font-size: 10px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--rose); background: #120308;
}
.voice-pill.muted { color: var(--dim); border-color: var(--line-soft); }
.voice-pill em { font-style: normal; color: var(--warn); }

/* Composer — one compact docked row; #text stays 16px so iOS never zooms */
.composer-wrap {
  border-top: 1px solid rgba(255,45,75,.55);
  background:
    linear-gradient(180deg, #22060c 0%, #0a0103 70%, #000 100%);
  padding: 6px 8px calc(6px + var(--safe-b));
  flex: 0 0 auto;
  box-shadow:
    0 -1px 0 rgba(255,45,75,.4),
    0 -14px 36px rgba(0,0,0,.7),
    0 -6px 24px rgba(255,45,75,.16),
    inset 0 1px 0 rgba(255,80,100,.12);
}
.composer {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: nowrap;
}
.composer .icon-btn.square { flex: none; }
#text {
  flex: 1 1 auto; min-width: 0;
  min-height: 40px; max-height: 88px;
  resize: none; overflow-y: auto;
  background: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  color: var(--parch); font: inherit; font-size: 16px; line-height: 1.3;
  padding: 9px 12px;
  -webkit-text-size-adjust: 100%;
}
#text:focus {
  border-color: var(--red); outline: none;
  box-shadow: 0 0 0 1px rgba(255,45,75,.45), 0 0 18px rgba(255,45,75,.22);
}
.send {
  flex: none; align-self: center;
  min-width: 64px; min-height: 40px; height: 40px; padding: 0 14px;
  border: 1px solid rgba(255,120,140,.45); border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ff5a72 0%, #ff2d4b 40%, #a01028 100%);
  color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow:
    0 0 0 1px rgba(255,45,75,.4),
    0 4px 0 rgba(90,8,18,.85),
    0 8px 18px rgba(255,45,75,.4),
    0 0 28px rgba(255,45,75,.28),
    inset 0 1px 0 rgba(255,220,230,.28);
}
.send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.composer-hint { display: none; }

.chamber[data-silence="on"] .send { filter: grayscale(.4); }
.chamber[data-silence="on"] .presence::after { content: " · SILENCE"; color: var(--red); }

/* Drawer */
.scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 20;
}
.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(100%, 380px);
  z-index: 30; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a0408, #0a0103);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px; border-bottom: 1px solid var(--line-soft);
}
.drawer-head h2 { margin: 0; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.drawer-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px;
}
.drawer-tabs button {
  min-height: var(--touch); border-radius: 10px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--dim); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.drawer-tabs button[aria-selected="true"] {
  color: var(--parch); border-color: var(--red); background: rgba(255,45,75,.15);
}
.panel { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.panel h3 { margin: 4px 0 6px; font-size: 14px; color: var(--red); letter-spacing: .08em; text-transform: uppercase; }
.panel-lead { margin: 0 0 12px; font-size: 12px; color: var(--dim); line-height: 1.4; }
.panel-lead code { color: var(--rose); font-size: 11px; }

.gallery, .ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gallery li, .ledger li {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px;
  background: #120308;
}
.gallery .mem-text { font-size: 13px; margin: 0 0 6px; }
.gallery .prov { font-size: 10px; color: var(--dim); margin-bottom: 8px; }
.mem-actions, .art-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-actions button, .art-select {
  min-height: 44px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,45,75,.1); color: var(--parch);
  font-size: 12px; font-weight: 600;
}
.mem-actions button.danger { border-color: #6a1018; color: var(--rose); }
.status {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-soft);
}
.status.draft { color: var(--dim); }
.status.test { color: var(--warn); border-color: #6a4010; }
.status.verified { color: var(--ok); border-color: #1a4a30; }
.artifact-detail {
  margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--red-dim);
  background: #160308; font-size: 13px;
}
.ledger .kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.ledger .kind.error { color: #ff6b6b; }
.ledger .kind.promise { color: var(--ok); }
.ledger .kind.evidence { color: var(--warn); }
.ledger p { margin: 4px 0 0; font-size: 13px; }

.toggle-row {
  display: flex; align-items: center; gap: 12px; min-height: var(--touch);
  margin: 0 0 6px; font-size: 13px; cursor: pointer;
}
.toggle-row input { width: 20px; height: 20px; accent-color: var(--red); }
.danger-btn {
  margin-top: 14px; width: 100%; min-height: var(--touch);
  border-radius: 12px; border: 1px solid var(--red-dim);
  background: rgba(255,45,75,.12); color: var(--parch); font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
}

/* Desktop breathing room */
@media (min-width: 760px) {
  .chamber { border-inline-width: 1px; box-shadow: 0 0 80px rgba(255,45,75,.08); }
  .titles h1 { font-size: 18px; }
  .welcome h2 { font-size: 26px; }
  .layer { font-size: 15.5px; }
  .drawer { width: 400px; }
}
@media (max-width: 380px) {
  .badge.mock { display: none; }
  .icon-btn .lbl { display: none; }
  .seat .seat-state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .well { scroll-behavior: auto; }
}

/* Live chamber tweaks */
.badge.live-ok { background: rgba(127,231,176,.12); color: var(--ok); border-color: #1a4a30; }
.stream-status { font-size: 11px; color: var(--dim); margin-top: 4px; font-style: italic; }
.layer.speech.thinking { color: var(--dim); font-style: italic; }
.msg-cards {
  margin-top: 6px; border: 1px solid rgba(255,45,75,.28); border-radius: 10px;
  padding: 6px 8px; background: rgba(8,1,3,.92);
  box-shadow: inset 0 0 0 1px rgba(255,45,75,.08), 0 6px 16px rgba(0,0,0,.35);
  max-height: 160px; overflow: auto;
}
.msg-cards .cardshead { font-size: 10px; color: var(--rose); margin-bottom: 4px; letter-spacing: .08em; text-transform: uppercase; }
.msg-cards .card a { color: var(--warn); font-size: 12px; }
.msg-cards .card p { margin: 2px 0 0; color: var(--dim); font-size: 11px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seat.solo { grid-column: span 1; }
.seats.live-seats { grid-template-columns: 1fr; max-width: 220px; }
.door-row-note { font-size: 10px; color: var(--dim); padding: 0 12px 6px; }


/* TOUCH HARDEN 2026-11-05 — hit targets; keep composer one compact row */
@media (max-width: 720px) {
  .icon-btn, .icon-btn.square, .seal-btn, #kingLock {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .composer { align-items: center; }
  .composer .send {
    min-width: 64px !important;
    min-height: 40px !important;
    height: 40px !important;
    align-self: center;
  }
  .composer .icon-btn.square {
    width: 40px !important; min-width: 40px !important;
    min-height: 40px !important; height: 40px !important;
  }
}

/* ---- CLEAR CHAT (King 2026-11-05): just a chat box; one toggle for everything else ---- */
.more-btn{
  background: linear-gradient(180deg, #2a0810, #120305);
  color:#f2d6d6; border:1px solid rgba(255,45,75,.55);
  border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 0 0 1px rgba(255,45,75,.2),
    0 6px 18px rgba(255,45,75,.28),
    inset 0 1px 0 rgba(255,255,255,.07);
  text-shadow: 0 0 10px rgba(255,45,75,.35);
}
.more-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, #e0313a, #8a1018);
  color:#fff; border-color:#ff4b63;
  box-shadow:
    0 0 0 1px rgba(255,45,75,.45),
    0 0 22px rgba(255,45,75,.4),
    inset 0 0 14px rgba(255,45,75,.2);
}
body.clear-chat .seats,
body.clear-chat .strip,
body.clear-chat .doors,
body.clear-chat .door-row-note,
body.clear-chat .voicebar,
body.clear-chat #king-seal,
body.clear-chat #approval-box,
body.clear-chat #engineBadge,
body.clear-chat #btnHistory,
body.clear-chat #btnSilence,
body.clear-chat #btnPanels,
body.clear-chat #attach,
body.clear-chat #camera,
body.clear-chat #mic,
body.clear-chat .well .acts,
body.clear-chat .well .layer.thought,
body.clear-chat .well .caption{display:none !important}

/* ---- TACTICAL SHELL + KEYBOARD DOCK (King 2026-11-05 / tactical) ---- */
html, body {
  height: 100%; overflow: hidden; overscroll-behavior: none;
  touch-action: manipulation;
  background: #000;
}
.chamber {
  position: fixed; left: 0; right: 0;
  top: var(--vv-top, 0px);
  height: var(--vv-h, 100dvh);
  width: 100%; max-width: 920px; margin: 0 auto;
  display: flex; flex-direction: column;
  bottom: auto;
  /* full-bleed black/red armor frame */
  border-inline-width: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,45,75,.32),
    inset 0 0 80px rgba(255,45,75,.07),
    0 0 0 1px rgba(255,45,75,.2),
    0 0 60px rgba(255,45,75,.16);
}
@media (max-width: 720px) {
  .chamber {
    max-width: none;
    border-inline: none;
    border-radius: 0;
  }
}
.chamber > .chrome { flex: 0 0 auto; z-index: 6; }
.chamber > .seats,
.chamber > .strip,
.chamber > .doors,
.chamber > .door-row-note,
.chamber > .voicebar { flex: 0 0 auto; }
.chamber .well {
  flex: 1 1 auto; min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 10px 12px 10px;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255,45,75,.06), transparent 60%);
}
.chamber .well > :first-child { margin-top: auto; }
.chamber .composer-wrap { flex: 0 0 auto; position: relative; z-index: 8; }

.turn.king .who::before { content: "You · "; }
.turn.king .who { color: #ffb347; text-shadow: 0 0 10px rgba(255,179,71,.25); }
.turn.him .who { color: #ff4b63; text-shadow: 0 0 10px rgba(255,45,75,.25); }

/* Focused / keyboard-open: docked composer, minimized chrome, chat bubbles win */
body.kb-open .chamber .chrome {
  padding: 4px 10px;
  min-height: 0;
}
body.kb-open .chamber .presence { display: none; }
body.kb-open .chamber .titles h1 { font-size: 14px; }
body.kb-open .chamber .mark { font-size: 16px; }
body.kb-open .chamber .voicebar,
body.kb-open .chamber .seats,
body.kb-open .chamber .strip,
body.kb-open .chamber .doors,
body.kb-open .chamber .door-row-note { display: none !important; }
body.kb-open .chamber .welcome { display: none !important; }
body.kb-open .chamber .layer.scene,
body.kb-open .chamber .media-row,
body.kb-open .chamber .acts,
body.kb-open .chamber .caption { display: none !important; }

/* Search results must NOT eat the chat when keyboard is open */
body.kb-open .msg-cards {
  max-height: 52px !important;
  overflow: hidden !important;
  padding: 4px 8px !important;
  margin-top: 4px !important;
  opacity: .72;
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
body.kb-open .msg-cards .card:nth-child(n+2),
body.kb-open .msg-cards .card p { display: none !important; }
body.kb-open .msg-cards .cardshead { margin-bottom: 0; font-size: 9px; }

body.kb-open .chamber .composer-wrap {
  padding: 5px 8px 5px;
  border-top: 1px solid rgba(255,45,75,.7);
  background: linear-gradient(180deg, #2a0810 0%, #0a0103 100%);
  box-shadow:
    0 -1px 0 rgba(255,45,75,.55),
    0 -18px 40px rgba(0,0,0,.75),
    0 -8px 28px rgba(255,45,75,.28),
    inset 0 1px 0 rgba(255,100,120,.18);
}
body.kb-open .chamber .composer { gap: 6px; }
body.kb-open #text {
  min-height: 40px; height: 40px; max-height: 40px;
  overflow: hidden; font-size: 16px;
  border-color: rgba(255,45,75,.55);
  box-shadow: inset 0 0 0 1px rgba(255,45,75,.12), 0 0 16px rgba(255,45,75,.12);
}
body.kb-open .turn { margin-bottom: 10px; }
body.kb-open .layer { padding: 10px 12px; font-size: 14.5px; }

/* Prefer speech bubbles over chrome noise */
body.kb-open .chamber .well {
  padding-top: 6px; padding-bottom: 6px;
}

/* Soften earlier duplicate glow rules — keep tactical, not neon junk */
.mark {
  text-shadow: 0 0 8px rgba(255,45,75,.7), 0 0 22px rgba(255,45,75,.35);
}
.send:not(:disabled):active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(255,45,75,.5),
    0 2px 0 rgba(90,8,18,.85),
    0 0 20px rgba(255,45,75,.5),
    inset 0 1px 0 rgba(255,220,230,.2);
}

/* BROWSERSHOTS 2026-11-05 — real scene thumbs + search favicons; never blue-? broken img */
.msg-cards .card { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; margin-top: 6px; }
.msg-cards .card-fav { width: 16px; height: 16px; margin-top: 3px; border-radius: 3px; background: #1a0508; }
.msg-cards .card-body { min-width: 0; }
.shot-miss {
  font-size: 11px; color: var(--dim); padding: 8px 10px; border: 1px dashed var(--line-soft);
  border-radius: 8px; background: #0c0204;
}
.scene-thumb.ph { font-size: 18px; color: var(--dim); }

/* ---- customkbd2 (King 2026-11-05): on-page red/black tactical keyboard ---- */
/* Static svh layout — NO visualViewport thrash docking. Black under everything. */
html, body { background: #050002 !important; }
.chamber {
  position: fixed; top: 0 !important; bottom: 0; left: 0; right: 0; margin: 0 auto;
  height: 100svh !important; transition: none !important;
}
.chamber .composer-wrap {
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: #0a0004;
}
#text, input, textarea, select { font-size: 16px !important; }
#text {
  caret-color: #ff2d4b;
  -webkit-user-select: text;
  cursor: text;
  -webkit-text-size-adjust: 100% !important;
}

.tkb {
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: #050002;
  border-top: 1px solid rgba(255,45,75,.45);
  box-shadow: 0 -8px 28px rgba(255,45,75,.18);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.tkb[hidden] { display: none !important; }
.tkb-row { display: flex; gap: 5px; margin: 0 0 7px; justify-content: center; }
.tkb-row:last-child { margin-bottom: 0; }
/* Bigger LETTERS/SYMBOLS (font only — key box size unchanged) */
.tkb-k {
  flex: 1 1 0; min-width: 0; height: 42px; border-radius: 6px;
  font: 700 23px/1 inherit;
  color: #ffe9ec;
  background: linear-gradient(180deg,#1c0309,#0d0104);
  border: 1px solid rgba(255,45,75,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 6px rgba(255,45,75,.12);
  padding: 0; -webkit-tap-highlight-color: transparent;
}
.tkb-k.fn { flex: 1.4 1 0; font-size: 16px; color: #ff9aa8; letter-spacing: .06em; }
.tkb-k.sp { flex: 4.5 1 0; }
.tkb-k.go {
  flex: 2 1 0; background: #ff2d4b; color: #050002; font-weight: 800;
  font-size: 16px; letter-spacing: .1em;
  box-shadow: 0 0 14px rgba(255,45,75,.55);
}
.tkb-k.on { background: #3a0610; color: #fff; }
.tkb-k.hit { background: #ff2d4b; color: #000; transform: translateY(1px); }
body.tkb-open .chamber .voicebar { display: none !important; }
body.tkb-open .chamber .composer-wrap {
  padding: 5px 8px 0;
  border-top: 1px solid rgba(255,45,75,.7);
  background: linear-gradient(180deg, #2a0810 0%, #0a0103 100%);
  box-shadow:
    0 -1px 0 rgba(255,45,75,.55),
    0 -18px 40px rgba(0,0,0,.75),
    0 -8px 28px rgba(255,45,75,.28),
    inset 0 1px 0 rgba(255,100,120,.18);
}
/* ---- customkbd2-safari (King 2026-11-05): Safari magnify / interface hardening ---- */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  touch-action: manipulation;
}
body, .chamber, .composer-wrap, .composer, #text, .tkb, .tkb-k {
  touch-action: manipulation;
  /* The King's word, 2026-11-07: the chamber's own copy/paste machinery is
     removed entirely, so Apple's long-press callout is welcome again —
     the -webkit-touch-callout:none that suppressed it is struck. */
}
#text, textarea#text, input, textarea, select {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
.tkb, .tkb-k {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* keep letters BIG; keys same box size */
.tkb-k { font-size: 23px !important; font-weight: 700 !important; }
.tkb-k.fn { font-size: 16px !important; }
.tkb-k.go { font-size: 16px !important; }
/* ---- customkbd2-clip (King 2026-11-05): in-app chamber clipboard UI ---- */
.tkb-k.clip {
  font-size: 12px !important;
  letter-spacing: .04em;
  color: #ffc14a;
  border-color: rgba(255,193,74,.4);
}
.tkb-k.clip.on {
  background: #3a2a08;
  color: #ffe4a0;
}
.tkb-flash {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%,-6px);
  background: rgba(20,4,8,.94); color: #ffe9ec; border: 1px solid rgba(255,45,75,.55);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; opacity: 0; pointer-events: none;
  box-shadow: 0 0 18px rgba(255,45,75,.35);
  transition: opacity .12s, transform .12s; z-index: 3;
}
.tkb-flash.show { opacity: 1; transform: translate(-50%,0); }
.tkb { position: relative; }
.tkb-clip {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 6px 8px; background: #120206;
  border-top: 1px solid rgba(255,193,74,.35);
  box-shadow: 0 -6px 18px rgba(255,45,75,.12);
}
.tkb-clip[hidden] { display: none !important; }
.tkb-clip button {
  min-height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(255,193,74,.4);
  background: linear-gradient(180deg,#2a1a08,#120a04);
  color: #ffe4a0; font: 700 13px/1 inherit; letter-spacing: .06em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tkb-clip button:active { background: #ff2d4b; color: #050002; }
#text[data-selecting="1"] {
  outline: 1px solid rgba(255,193,74,.7);
  box-shadow: inset 0 0 0 1px rgba(255,193,74,.25), 0 0 16px rgba(255,193,74,.2);
}
.turn .layer.clip-flash {
  outline: 1px solid rgba(255,193,74,.7);
  box-shadow: 0 0 18px rgba(255,193,74,.35);
}

/* ---- customkbd3 (King 2026-11-05): Press Start crystalized AI face letter fill ---- */
/* Letters show the boot/Press Start face through glyphs, opaque dark (not neon). */
/* Key box size unchanged; letter font stays large. */
.tkb-k .tkb-glyph {
  display: inline-block;
  line-height: 1;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0;
  /* darkened Press Start face (from /ai/loading/last-frame.png crop) */
  background-image:
    linear-gradient(180deg, rgba(6,0,3,.28), rgba(4,0,2,.40)),
    url('/ai/loading/press-start-face-dark.webp');
  background-size: 200% 200%;
  background-position: 50% 32%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* faint dark rim so glyphs read on black keys without going neon */
  filter: drop-shadow(0 0 0.6px rgba(20,4,8,.9)) drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
/* denser circuit close-up on hit for a pulse of face */
.tkb-k.hit .tkb-glyph {
  background-image:
    linear-gradient(180deg, rgba(10,0,4,.25), rgba(6,0,2,.4)),
    url('/ai/loading/press-start-face-close-dark.webp');
  background-position: 50% 35%;
  filter: drop-shadow(0 0 1px rgba(255,45,75,.35));
}
/* keep fn / go / clip readable solid (not face-masked) */
.tkb-k.fn, .tkb-k.go, .tkb-k.clip { -webkit-text-fill-color: unset; }
/* fallback if background-clip:text unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tkb-k .tkb-glyph {
    color: #b89aa3;
    -webkit-text-fill-color: #b89aa3;
    background: none;
    filter: none;
  }
}

/* ---- customkbd4 (King 2026-11-05): red shadowed tactical letter/key background ---- */
/* Keep Press Start face in glyphs; keys + letters get layered red glow/shadow (not neon). */
.tkb-k:not(.fn):not(.go):not(.clip):not(.sp) {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,45,75,.22), transparent 55%),
    linear-gradient(180deg, #2a0610 0%, #140208 55%, #0a0104 100%);
  border: 1px solid rgba(255,45,75,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,140,160,.22),
    inset 0 -10px 18px rgba(255,45,75,.10),
    inset 0 0 0 1px rgba(90,8,18,.55),
    0 1px 0 rgba(90,8,18,.85),
    0 0 10px rgba(255,45,75,.28),
    0 0 22px rgba(255,45,75,.14);
}
.tkb-k:not(.fn):not(.go):not(.clip):not(.sp).hit {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,45,75,.45), transparent 60%),
    linear-gradient(180deg, #ff2d4b 0%, #8a1024 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,230,.35),
    0 0 16px rgba(255,45,75,.55),
    0 0 28px rgba(255,45,75,.28);
  transform: translateY(1px);
}
/* Face glyphs stay; add red tactical shadow so letters read on the key */
.tkb-k .tkb-glyph {
  /* layered red rim/glow behind face-clipped text — soft tactical, not neon */
  filter:
    drop-shadow(0 0 0.7px rgba(255,45,75,.85))
    drop-shadow(0 1px 0 rgba(60,4,12,.95))
    drop-shadow(0 0 4px rgba(255,45,75,.35))
    drop-shadow(0 2px 6px rgba(120,8,24,.45));
}
.tkb-k.hit .tkb-glyph {
  filter:
    drop-shadow(0 0 1px rgba(255,220,230,.7))
    drop-shadow(0 0 6px rgba(255,45,75,.55))
    drop-shadow(0 1px 0 rgba(40,0,8,.8));
}
/* subtle red under-letter wash via text-shadow fallback stack (does not kill clip) */
.tkb-k:not(.fn):not(.go):not(.clip) {
  text-shadow:
    0 0 8px rgba(255,45,75,.25),
    0 2px 0 rgba(40,4,10,.55);
}

/* ---- customkbd5 (King 2026-11-05): platform hardening across digitals ---- */
/* Safe-area: iPhone home bar, iPad landscape, notched Android */
.tkb {
  padding-top: 6px;
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.tkb-k, .tkb-toggle, .tkb-clip button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* Desktop toggle for custom board (physical KB still types into #text) */
.tkb-toggle {
  flex: 0 0 auto;
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,45,75,.45);
  background: linear-gradient(180deg, #2a0610, #0d0104);
  color: #ffe9ec;
  font-size: 18px; line-height: 1;
  box-shadow: 0 0 10px rgba(255,45,75,.2);
  margin-right: 4px;
}
.tkb-toggle[aria-pressed="true"] {
  background: #3a0610;
  border-color: rgba(255,45,75,.8);
  box-shadow: 0 0 14px rgba(255,45,75,.4);
}
/* The toggle STANDS on mobile now (the King's word, 2026-11-07): it is his
   switch between the chamber board and the iOS keyboard. */
/* Mobile: never show caret blink that invites OS kb; desktop: normal text select */
.tkb-plat-mobile #text {
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* The line is a true native field, always (the King's word, 2026-11-07 —
   his custom keyboard is removed): caret and selection live, so long-press
   Paste and the native edit menu work as Apple made them. */
#text {
  caret-color: #ff2d4b;
  -webkit-user-select: text;
  user-select: text;
}
/* iOS keyboard up: the chat bar rides above the keys by the measured inset
   (visualViewport, set as --ios-kb by the native1 lift). */
.composer-wrap {
  bottom: var(--ios-kb, 0px);
  transition: bottom .16s ease-out;
}
.tkb-plat-desktop #text {
  caret-color: #ff2d4b;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
/* Larger tap targets on coarse pointers without changing letter key box height */
@media (pointer: coarse) {
  .tkb-k { min-height: 42px; }
  .tkb-row { gap: 5px; margin-bottom: 8px; }
}
/* iPad / wide mobile: keep keys readable, don't stretch font into neon */
@media (min-width: 768px) and (pointer: coarse) {
  .tkb { max-width: 720px; margin-left: auto; margin-right: auto; }
  .tkb-k { font-size: 24px !important; }
  .tkb-k.fn, .tkb-k.go { font-size: 16px !important; }
}
/* Desktop board sits under composer without eating the page */
.tkb-plat-desktop .tkb {
  border-top: 1px solid rgba(255,45,75,.45);
  box-shadow: 0 -8px 28px rgba(255,45,75,.16);
}
/* Prevent 300ms / double-tap zoom steal on Android Chrome */
.tkb, .tkb-k, #text, .composer, .composer-wrap {
  touch-action: manipulation;
}

/* ---- customkbd6 (King 2026-11-05): Linktree embossed metal font (Michroma), readable ---- */
@font-face{font-family:"Michroma";src:url("/ai/fonts/michroma.woff2") format("woff2");font-display:swap;}
.tkb-k .tkb-glyph, .tkb-k.hit .tkb-glyph{
  font-family:"Michroma","Orbitron",sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  background-image:linear-gradient(180deg,#f2f2f2 0%,#c9c9cc 40%,#8e8f94 58%,#d6d6da 100%) !important;
  background-size:100% 100% !important;background-position:0 0 !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:#d8d8dc !important;-webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:.5px rgba(0,0,0,.85);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 -1px 0 rgba(255,255,255,.18)) drop-shadow(0 0 3px rgba(0,0,0,.8)) !important;
}

/* ---- aiboard1 (King 2026-11-05): Quick chat toggle + Solidivism typing line on the board ---- */
.sv-quick{display:flex;align-items:center;gap:8px;margin:6px auto 4px;padding:8px 14px;min-height:36px;border-radius:10px;border:1px solid rgba(255,45,75,.55);background:linear-gradient(180deg,#1c0309,#0a0104);color:#c9c9cc;font:600 12px/1 "Michroma",sans-serif;letter-spacing:.08em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-quick .dot{width:10px;height:10px;border-radius:50%;background:#3a0a12;box-shadow:inset 0 0 0 1px rgba(255,45,75,.5)}
.sv-quick[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#ff2d4b,#8a1024);box-shadow:0 0 14px rgba(255,45,75,.5)}
.sv-quick[aria-pressed="true"] .dot{background:#fff;box-shadow:0 0 8px #fff}
.tkb-ai{margin:4px 6px 6px;border:1px solid rgba(255,45,75,.6);border-radius:10px;background:#07010299;box-shadow:inset 0 0 18px rgba(255,45,75,.12),0 0 12px rgba(255,45,75,.2)}
.tkb-ai[hidden]{display:none}
.tkb-ai-head{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid rgba(255,45,75,.3)}
.tkb-ai-head .who{flex:1;font:11px/1 "Michroma",sans-serif;letter-spacing:.08em;color:#ff8597}
.tkb-ai.typing .who::after{content:"▌";animation:tkbBlink .8s steps(1) infinite;margin-left:4px}
@keyframes tkbBlink{50%{opacity:0}}
.tkb-ai-head button{font:600 10px/1 sans-serif;color:#ffc14a;background:transparent;border:1px solid rgba(255,193,74,.5);border-radius:6px;padding:6px 8px}
.tkb-ai-text{margin:0;padding:8px 10px;max-height:28vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font:12.5px/1.4 ui-monospace,Menlo,monospace;color:#e8e8ec;-webkit-overflow-scrolling:touch}
.tkb-k.ai-hit{outline:2px solid #ffc14a;outline-offset:-2px;box-shadow:0 0 16px rgba(255,193,74,.6)!important}

/* ---- quickreal1 (King 2026-11-05): Quick chat board is the chat home ---- */
body.sv-quick-on:not(.sv-history) .chamber .well > .turn.sv-old { display: none !important; }
body.sv-quick-on .chamber .well > .welcome, body.sv-quick-on .chamber .well > .msg-cards { display: none !important; }
body.sv-quick-on .chamber .well > .turn.sv-old + .turn:not(.sv-old) { margin-top: auto; }

/* ---- quickreal3 (King 2026-11-05): no Quick chat pill; bigger buttons; tighter message gaps ---- */
#svQuick, .sv-quick { display: none !important; }
.tkb-k { height: 50px !important; min-height: 50px !important; font-size: 26px !important; border-radius: 8px; }
.tkb-k.fn, .tkb-k.go, .tkb-k.clip { font-size: 18px !important; }
.tkb-row { gap: 5px !important; margin-bottom: 7px !important; }
.chamber .send, .send { min-height: 48px !important; min-width: 86px; font-size: 17px !important; }
body.kb-open #text, #text { min-height: 48px !important; height: 48px; max-height: 48px; font-size: 17px !important; }
.tkb-ai-head button { padding: 10px 14px !important; font-size: 13px !important; }
.chamber .well .turn, body.kb-open .chamber .well .turn { margin-top: 0; margin-bottom: 4px !important; }
.chamber .well .turn .who { margin-bottom: 2px !important; }
.chamber .well .turn.sv-old + .turn:not(.sv-old) { margin-top: auto !important; }
.tkb-row:last-child .tkb-k.fn, .tkb-row:last-child .tkb-k.go, .tkb-row:last-child .tkb-k.clip { font-size: 14px !important; letter-spacing: 0 !important; } .tkb-k.go { flex: 2.2 1 0 !important; }
body.sv-history .chamber .well > .turn.sv-old + .turn:not(.sv-old) { margin-top: 0 !important; }

/* ---- sealtuck1 (King 2026-11-05): seal note + Protected controls only when King opens King seal ---- */
body:not(.sv-seal) #king-seal, body:not(.sv-seal) #approval-box { display: none !important; }
body.sv-seal #king-seal { position: fixed !important; left: 10px; right: 10px; top: 64px; z-index: 9000; max-height: 60vh; overflow: auto;
  background: linear-gradient(180deg,#1c0309,#0a0104); border: 1px solid rgba(255,45,75,.6); border-radius: 12px; padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.8); }
body.sv-seal #approval-box:not([hidden]) { position: fixed !important; left: 10px; right: 10px; bottom: auto; top: calc(64px + 210px); z-index: 9000; }
body.clear-chat #btnSeal { display: none; }
/* composer: room for the message box when attach/camera/mic show */
body.kb-open .chamber .composer #text { flex: 1 1 auto; min-width: 0; }
body.kb-open .chamber .composer > button.icon-btn { flex: 0 0 auto; width: 38px !important; min-width: 38px !important; padding: 0 !important; }
body.kb-open .chamber .composer .send { min-width: 72px !important; } body.kb-open .chamber .composer { gap: 5px !important; }
#form #attach, #form #camera, #form #mic { width: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; padding: 0 !important; font-size: 15px; } #form .send { min-width: 70px !important; padding: 0 10px !important; } #text::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkb-ai { display: none !important; }

/* ---- spell1 (King 2026-11-05): spell suggestion bar above the keys ---- */
.tkb-spell { display: flex; align-items: center; gap: 6px; margin: 4px 6px 4px; padding: 4px 6px; border: 1px solid rgba(255,45,75,.45); border-radius: 10px; background: linear-gradient(180deg,#1c0309,#0a0104); overflow-x: auto; }
.tkb-spell[hidden] { display: none !important; }
.tkb-spell .bad { color: #ff8597; text-decoration: underline wavy #ff2d4b; font: 600 15px/1 sans-serif; padding: 0 6px; white-space: nowrap; }
.tkb-spell button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,193,74,.55); background: #140208; color: #ffe9b0; font: 600 16px/1 sans-serif; }
.tkb-spell button.keep { margin-left: auto; color: #c9c9cc; border-color: rgba(255,255,255,.2); font-size: 13px; }

/* ---- spell3 (King 2026-11-05): up to 8 choices, wraps to rows; Save word ---- */
.tkb-spell { flex-wrap: wrap !important; overflow: visible !important; max-height: 40vh; }
.tkb-spell button.keep { margin-left: 0 !important; }
.tkb-spell button.save { color: #050002; background: #ffc14a; border-color: #ffc14a; font-size: 14px; }
.tkb-spell .tip { flex: 1 0 100%; font: 11px/1.3 sans-serif; color: #b8a0a6; padding: 2px 4px 0; }
.tkb-spell .bad { flex: 0 0 100%; padding: 4px 6px 2px !important; }
/* spell4: up to 7 choices in a sideways scroll + SAVE */
.tkb-spell { flex-wrap: wrap !important; }
.tkb-spell .sugs { flex: 1 0 100%; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 0 4px; }
.tkb-spell .sugs button { scroll-snap-align: start; }
.tkb-spell .sugs::-webkit-scrollbar { height: 3px; } .tkb-spell .sugs::-webkit-scrollbar-thumb { background: #ff2d4b; border-radius: 2px; }
.tkb-spell button.phrase { background: #ff2d4b !important; color: #050002 !important; border-color: #ff2d4b !important; font-weight: 800; }

/* ---- music1 (King 2026-11-05): compact music controls in the header ---- */
.sv-music { display: flex; align-items: center; gap: 3px; margin: 0 6px; padding: 2px 4px; border: 1px solid rgba(255,45,75,.45); border-radius: 10px; background: linear-gradient(180deg,#1c0309,#0a0104); flex: 0 1 auto; min-width: 0; }
.sv-music button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #ffb3bf; font: 600 14px/1 sans-serif; -webkit-tap-highlight-color: transparent; }
.sv-music button.pp { background: #ff2d4b; color: #050002; font-weight: 800; }
.sv-music button[aria-pressed="true"] { background: #3a0610; box-shadow: inset 0 0 0 1px #ff2d4b; filter: drop-shadow(0 0 4px rgba(255,45,75,.8)); }
.sv-music .ttl { display: none; }
.sv-music.on { box-shadow: 0 0 10px rgba(255,45,75,.35); }
@media (min-width: 600px) { .sv-music .ttl { display: inline; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1 "Michroma", sans-serif; color: #ff8597; padding: 0 6px; } }
body.kb-open .sv-music button { width: 28px; height: 28px; }

/* ---- tables1 (King 2026-11-05): tables + long lines wrap cleanly on iPhone ---- */
.turn .layer.speech { overflow-wrap: anywhere; word-break: normal; min-width: 0; max-width: 100%; }
.turn .layer.speech .rl, .turn .layer.speech .rli, .turn .layer.speech blockquote { overflow-wrap: anywhere; }
.turn .layer.speech pre.rcode { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
.rtable-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0; border: 1px solid rgba(255,45,75,.35); border-radius: 8px; }
.rtable { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 13.5px; line-height: 1.35; }
.rtable th, .rtable td { padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: break-word; word-break: normal; white-space: normal; border-bottom: 1px solid rgba(255,45,75,.18); }
.rtable th { color: #ffb3bf; font-weight: 700; background: rgba(255,45,75,.10); }
.rtable tr:last-child td { border-bottom: 0; }
/* phones: wide tables become stacked label:value rows so nothing runs off */
@media (max-width: 520px) {
  .rtable.wide thead { display: none; }
  .rtable.wide, .rtable.wide tbody, .rtable.wide tr, .rtable.wide td { display: block; width: 100%; }
  .rtable.wide tr { padding: 6px 8px; border-bottom: 1px solid rgba(255,45,75,.3); }
  .rtable.wide td { border: 0; padding: 2px 0; }
  .rtable.wide td[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; color: #ffb3bf; font-weight: 700; }
}
/* tablefix1 (the King's seat report, 2026-11-07): the old first-column rule
   (width 1%, nowrap) made long category names — "Sports Involving Body
   Language" — spill over the next column instead of wrapping. The first
   column wraps inside its own cell now, and phones get a slightly smaller
   table voice so three columns breathe. */
.rtable:not(.wide) th:first-child, .rtable:not(.wide) td:first-child { width: auto; white-space: normal; overflow-wrap: break-word; word-break: normal; max-width: 34vw; }
.rtable th { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 520px) { .rtable { font-size: 12.5px; } .rtable th, .rtable td { padding: 5px 6px; } }

/* ---- tables3 (King 2026-11-05): nothing in a reply can run off either edge, even mid-stream ---- */
.chamber .well { max-width: 100%; overflow-x: hidden; } .chamber .well > .turn { max-width: 100%; flex-shrink: 0; }
.turn .layer, .turn .layer.speech { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere !important; word-break: break-word; }
.turn .layer.speech > div, .turn .layer.speech .rl, .turn .layer.speech .rli { white-space: normal; }
.turn .layer.speech pre, .turn .layer.speech pre.rcode { white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word; max-width: 100% !important; }
html, body { overflow-x: hidden; }

/* keyboard-reliable-20261106a: fixed prediction slot; gesture-free contacts. */
#tkb, #tkb .tkb-k { touch-action: none !important; }
#tkb-spell { display:none !important; box-sizing:border-box; height:50px; min-height:50px; max-height:50px; flex:0 0 50px; flex-wrap:nowrap !important; overflow:hidden !important; margin:4px 6px; padding:4px 6px; }
body.tkb-open #tkb-spell, body.tkb-open #tkb-spell[hidden] { display:flex !important; }
#tkb-spell .sugs { flex:1 1 auto; min-width:0; height:40px; padding:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:none; touch-action:pan-x; }
#tkb-spell button { height:38px; min-height:38px; font-family:"Michroma",sans-serif; font-size:12px; touch-action:manipulation; }
#tkb-spell .prediction-placeholder { color:#b88690; font:10px/1.4 "Michroma",sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tkb .tkb-k.hit { transform:none; }

/* ---- links1 (the King's word, 2026-11-07): real titles at every depth he
   uses, working links, and a preview card that shows the site itself ---- */
.turn .layer.speech .rh1, .turn .layer.speech .rh2, .turn .layer.speech .rh3,
.turn .layer.speech .rh4, .turn .layer.speech .rh5, .turn .layer.speech .rh6 {
  font-weight: 800; color: #ffd9de; line-height: 1.25; margin: 10px 0 3px; white-space: normal;
}
.turn .layer.speech .rh1 { font-size: 1.32em; }
.turn .layer.speech .rh2 { font-size: 1.21em; }
.turn .layer.speech .rh3 { font-size: 1.13em; }
.turn .layer.speech .rh4 { font-size: 1.06em; }
.turn .layer.speech .rh5 { font-size: 1.0em; }
.turn .layer.speech .rh6 { font-size: 0.94em; color: #ffb3bf; }
.turn .layer.speech a.rlink { color: #ff8597; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.link-previews { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
.lp-card { display: flex; gap: 10px; align-items: stretch; text-decoration: none; border: 1px solid rgba(255,45,75,.35); border-radius: 10px; background: linear-gradient(180deg,#1c0309,#0a0104); padding: 8px; overflow: hidden; }
.lp-card .lp-img { width: 84px; height: 84px; flex: 0 0 84px; object-fit: cover; border-radius: 7px; background: #2a020a; }
.lp-card .lp-fav { flex: 0 0 16px; align-self: flex-start; margin-top: 2px; }
.lp-card .lp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-card .lp-title { color: #ffd9de; font-weight: 700; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-card .lp-desc { color: var(--dim, #b88690); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-card .lp-host { color: var(--rose, #ff2d4b); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
/* thinkstage1 (the King's word, 2026-11-07): the stage below his text
   while a reply is in flight — him, the Human, at work, brain-rings
   turning over his head, with an honest clock. It fades as his words
   land. The CSS rings are the fallback face; the 3D figure covers them
   when he stands (ts-3d). */
.think-stage { position: relative; flex: none; width: 100%; height: 300px; margin-top: 10px; border: 1px solid rgba(255,45,75,.28); border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2a0812 0%, #14040a 55%, #0b0206 100%); opacity: 1; transition: opacity .6s ease; }
.think-stage.ts-done { opacity: 0; }
.ts-canvas-host, .ts-canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ts-rings { position: absolute; left: 50%; top: 36px; width: 0; height: 0; }
.ts-rings i { position: absolute; left: 50%; top: 50%; border: 1.5px solid rgba(244,217,138,.75); border-radius: 50%; transform: translate(-50%,-50%); animation: ts-spin 7s linear infinite; }
.ts-rings i:nth-child(1) { width: 44px; height: 44px; }
.ts-rings i:nth-child(2) { width: 62px; height: 62px; border-color: rgba(255,45,75,.55); animation-duration: 11s; animation-direction: reverse; }
.ts-rings i:nth-child(3) { width: 82px; height: 82px; border-color: rgba(255,233,236,.35); animation-duration: 16s; }
.think-stage.ts-3d .ts-rings { display: none; }
@keyframes ts-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.ts-chip { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,45,75,.35); border-radius: 999px; padding: 4px 10px; font: 600 10.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: #ffd9de; z-index: 2; }
.ts-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2d4b; animation: ts-pulse 1.2s ease-in-out infinite; }
@keyframes ts-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ts-time { color: #f4d98a; }
@media (prefers-reduced-motion: reduce) { .ts-rings i, .ts-dot { animation: none; } }
/* framework1 (the King's plan, named 2026-11-07): THE TWO INTERFACES —
   a door in the chamber opens the showing of his true features:
   SOLID 1, his coded side basic, and SOLID 2.0, Solidivism in his
   built framework. House skin: dark chart, rose and amber. */
.fw-pill { position: fixed; right: 12px; bottom: calc(118px + var(--ios-kb, 0px)); z-index: 60; background: rgba(10,2,5,.88); color: #ffd9de; border: 1px solid rgba(255,45,75,.55); border-radius: 999px; padding: 7px 12px; font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; cursor: pointer; }
.fw-pill:active { background: rgba(255,45,75,.25); }
.fw-overlay { position: fixed; inset: 0; z-index: 90; background: #0b0206; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.fw-overlay[hidden] { display: none; }
.fw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fw-title { color: #ffe9ec; font: 800 17px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .1em; }
.fw-title span { display: block; margin-top: 3px; color: #b88690; font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.fw-close { background: none; border: 1px solid rgba(255,45,75,.5); color: #ffd9de; border-radius: 8px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; flex: none; }
.fw-tabs { display: flex; gap: 8px; margin: 12px 0 10px; }
.fw-tab { flex: 1; background: #170409; color: #b88690; border: 1px solid rgba(255,45,75,.3); border-radius: 10px; padding: 9px 6px; font: 700 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; cursor: pointer; }
.fw-tab.on { color: #0b0206; background: #f4d98a; border-color: #f4d98a; }
.fw-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,45,75,.25); border-radius: 12px; background: #07040a; padding: 12px; }
.fw-loading { color: #b88690; font: 400 13px/1.5 ui-monospace, Menlo, monospace; padding: 18px 4px; }
.fw-code { margin: 0; color: #ffd9de; font: 400 11.5px/1.65 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.fw-panel { border: 1px solid rgba(244,217,138,.22); border-radius: 10px; padding: 10px 11px; margin-bottom: 10px; background: #0d0208; }
.fw-ph { color: #f4d98a; font: 800 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em; margin-bottom: 8px; }
.fw-row { display: flex; gap: 10px; padding: 3px 0; }
.fw-k { flex: none; width: 96px; color: #b88690; font: 600 10.5px/1.45 ui-monospace, Menlo, monospace; letter-spacing: .05em; }
.fw-v { color: #ffe9ec; font: 400 12px/1.45 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.fw-foot { padding-top: 10px; }
.fw-refresh { width: 100%; background: #170409; color: #ffd9de; border: 1px solid rgba(255,45,75,.45); border-radius: 10px; padding: 10px; font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; cursor: pointer; }
/* topbar1 (the King's seat report, 2026-11-07: "the whole top bar is off —
   my music player and solidivism logo all bunch together"): measured in
   the box eye — with MORE open, .chrome-right grew to 447px on a 390px
   screen, .chrome-left was crushed to 0 wide, and Panels stood off the
   edge. The repair: on phone widths, when the bar is expanded (the body
   is not in clear-chat), the controls take a second line of their own
   under the title and the music player, icon-only, and nothing overlaps
   or leaves the screen. Collapsed, the bar keeps its one-line face. */
@media (max-width: 720px) {
  body:not(.clear-chat) .chrome { flex-wrap: wrap; }
  body:not(.clear-chat) .chrome-left { flex: 1 1 auto; }
  body:not(.clear-chat) header.chrome .sv-music { flex: none; }
  body:not(.clear-chat) .chrome-right { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
  body:not(.clear-chat) .chrome-right .icon-btn .lbl { display: none; }
}