:root {
  --wood: #2b1d14; --wood2: #3d2a1c; --parch: #f3e6c4; --parch2: #e6d4a6; --edge: #b39560; --ink: #3a2414; --ink2: #6b4f35;
  --gold: #f2c248; --think: #5a9ad8; --work: #f08a30; --fail: #b8453d; --ok: #4f8a46;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --chatw: 45vw; --tlh: 0px; --peek: 76px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wood); color: var(--ink); font: 15px/1.45 var(--body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
.pxt { image-rendering: pixelated; display: block; }

/* ---------- map ---------- */
.mapwrap { position: fixed; inset: 0; transition: right .25s ease; }
body.chat-open .mapwrap { right: var(--chatw); }
.map { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.map canvas { display: block; image-rendering: pixelated; transition: filter .3s; }
.mapwrap.replay .map canvas { filter: sepia(.55) saturate(.65) brightness(.82); }
.mapwrap.replay::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 30px rgba(43,29,20,.75); }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flag { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--parch); border: 2px solid var(--ink); border-radius: 3px; padding: 1px 6px 1px 4px; font: 600 12px/1.3 var(--body); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.flag i { width: 8px; height: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); background: var(--pc, var(--gold)); }
.flag.thinking { border-color: var(--think); } .flag.working { border-color: var(--work); } .flag.failed { border-color: var(--fail); }
.sign { position: absolute; transform: translate(-50%, 0); background: #8a5a32; color: var(--parch); border: 2px solid #3a2414; border-radius: 2px; padding: 2px 8px; font: 700 12px/1.3 var(--body); box-shadow: 0 2px 0 rgba(0,0,0,.4); white-space: nowrap; }
.sign.edge { background: rgba(58,36,20,.88); }
.sign .arr { display: inline-block; margin-right: 5px; vertical-align: -2px; }
.hud { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hudtitle { background: var(--parch); border: 2px solid var(--ink); padding: 6px 10px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.crumb { min-height: 44px; background: var(--parch); border: 2px solid var(--ink); padding: 0 14px; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.conn { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); background: var(--parch); border: 2px solid var(--ink); padding: 6px 12px; }


/* ---------- portraits / chips ---------- */
.portrait { width: 64px; height: 72px; background: var(--parch2); border: 2px solid var(--ink); display: grid; place-items: center; flex: none; }
.portrait canvas { image-rendering: pixelated; width: 100%; height: 100%; }
.portrait.sm { width: 36px; height: 40px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: #9a8a70; }
.chip.thinking i { background: var(--think); animation: pulse 1.2s infinite; } .chip.working i { background: var(--work); animation: pulse .8s infinite; } .chip.failed i { background: var(--fail); }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

/* ---------- agent panel ---------- */
.panel { position: fixed; left: 12px; top: 72px; width: min(480px, calc(100vw - 24px)); max-height: calc(100% - 72px - var(--tlh) - 36px); display: flex; flex-direction: column; background: var(--parch); border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.45); z-index: 20; }
.panel[hidden] { display: none; }
.panel .handle { display: none; }
.panel .close { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; font-size: 18px; }
.phead { display: flex; gap: 12px; padding: 14px 44px 10px 14px; border-bottom: 2px dashed var(--edge); }
.ptitle { margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: flex-end; max-width: 100%; }
.pnames { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ptitle canvas { max-width: 100%; height: auto; }
.role { color: var(--ink2); font-size: 13px; text-transform: capitalize; }
.prow { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 14px; font-size: 14px; }
.lbl { color: var(--ink2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.lbl.pad { padding: 8px 14px 4px; }
.spend small { color: var(--ink2); }
.thread { overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.thread .b { background: #fffaf0; border: 1px solid var(--edge); border-radius: 4px; padding: 6px 9px; font-size: 14px; max-width: 92%; }
.thread .b.me { align-self: flex-end; background: var(--parch2); }
.thread .meta { font-size: 11px; color: var(--ink2); margin-bottom: 2px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.more { border: 0; background: none; color: var(--think); padding: 4px 0; min-height: 32px; }
.empty { color: var(--ink2); font-style: italic; font-size: 14px; }

/* ---------- chat ---------- */
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: var(--chatw); display: flex; flex-direction: column; background: var(--parch); border-left: 4px solid var(--ink); background-image: linear-gradient(90deg, rgba(179,149,96,.18), transparent 12%, transparent 88%, rgba(179,149,96,.18)); z-index: 10; }
.chathead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 3px double var(--ink); }
.chtitle { flex: 1; } .chtitle .sub { font-size: 13px; color: var(--ink2); }
.ghost { min-width: 44px; min-height: 44px; border: 2px solid var(--ink); background: var(--parch2); font-weight: 800; font-size: 18px; }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msgs .b { max-width: 82%; padding: 10px 13px; border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.2); font-size: 15px; }
.msgs .b.king { align-self: flex-end; background: #fff4d6; border-color: #a8812e; }
.msgs .b.hand { align-self: flex-start; background: #fffaf0; }
.msgs .b.err { border-color: var(--fail); }
.who { font-size: 11px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.fpill { display: flex; width: fit-content; margin-top: 8px; min-height: 36px; align-items: center; border: 2px solid var(--ink); background: var(--gold); padding: 0 10px; font-weight: 700; font-size: 13px; }
.retry { min-height: 36px; border: 2px solid var(--fail); background: none; color: var(--fail); font-weight: 700; margin-top: 6px; }
.think { align-self: flex-start; max-width: 88%; background: #eef5ff; border: 2px dashed var(--think); padding: 10px 12px; }
.think.working { background: #fff1e2; border-color: var(--work); }
.think .row { display: flex; align-items: center; gap: 10px; }
.think .st { font-weight: 600; transition: opacity .12s; }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 8px; height: 8px; background: currentColor; animation: hop 1s infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.think .path { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.think .path button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; border: 1px solid var(--edge); background: var(--parch); font-size: 12px; padding: 0 6px 0 2px; }
.think .path canvas { width: 16px; height: 18px; image-rendering: pixelated; }
.think .stream { white-space: pre-wrap; margin-top: 6px; color: var(--ink2); }
.composer { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 3px double var(--ink); }
.composer input { flex: 1; min-height: 48px; border: 2px solid var(--ink); background: #fffaf0; padding: 0 12px; font: 16px var(--body); color: var(--ink); }
.composer button { min-width: 72px; min-height: 48px; border: 2px solid var(--ink); background: var(--gold); font-weight: 800; }
.chattab { display: none; }

/* collapsed chat: a tab that keeps the Right Hand's live indicator */
body:not(.chat-open) .chat { top: 12px; right: 12px; bottom: auto; width: 340px; border: 0; background: none; }
body:not(.chat-open) .chat > :not(.chattab) { display: none; }
body:not(.chat-open) .chattab { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: var(--parch); border: 3px solid var(--ink); padding: 6px 8px; box-shadow: 0 3px 0 rgba(0,0,0,.4); min-height: 56px; }
.tabtext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tablive { font-size: 13px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chattab.busy .tablive { color: var(--think); font-weight: 600; }
.chattab.busy.working .tablive { color: var(--work); }
.chattab.busy .tablive::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 6px; animation: pulse 1s infinite; }
.tabopen { border: 2px solid var(--ink); background: var(--gold); padding: 6px 10px; font-weight: 800; font-size: 13px; }
.tabhandle { display: none; }

.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--ink); color: var(--parch); padding: 10px 14px; border: 2px solid var(--gold); max-width: 90vw; z-index: 40; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --chatw: 100vw; }
  body.chat-open .mapwrap { right: 0; }
  .mapwrap { bottom: var(--peek); }
  .chat { top: auto; height: 72dvh; border-left: 0; border-top: 4px solid var(--ink); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.5); }
  .chat::before { content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--edge); }
  .chathead { padding-top: 16px; }
  body:not(.chat-open) .chat { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; }
  body:not(.chat-open) .chattab { border-width: 3px 0 0; border-radius: 12px 12px 0 0; min-height: var(--peek); padding: 14px 12px calc(8px + env(safe-area-inset-bottom)); position: relative; box-shadow: 0 -4px 14px rgba(0,0,0,.45); }
  .tabhandle { display: block; position: absolute; top: 5px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--edge); }
  .hud { left: 10px; top: 10px; }
  .panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 78dvh; border-width: 3px 0 0; border-radius: 12px 12px 0 0; z-index: 30; }
  .panel .handle { display: block; height: 22px; touch-action: none; }
  .panel .handle::after { content: ""; display: block; width: 44px; height: 5px; margin: 8px auto; border-radius: 3px; background: var(--edge); }
  .panel.full { max-height: 100dvh; height: 100dvh; }
  .msgs .b { max-width: 90%; }
  .hud { flex-direction: column; align-items: flex-start; max-width: calc(100% - 130px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ---------- Rev3 run B ---------- */
.flag { font-size: 12px !important; min-height: 20px; }
.flag.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--ink); z-index: 2; }
.sign { font-size: 12px; }
.sign.big { font-size: 14px; padding: 3px 10px; text-shadow: -1px -1px 0 #3a2414, 1px -1px 0 #3a2414, -1px 1px 0 #3a2414, 1px 1px 0 #3a2414; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.mapwrap.following::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px 26px rgba(43,29,20,.6); }
.chain { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; gap: 10px; align-items: stretch; z-index: 12; }
.letterchip { flex: 1; display: flex; gap: 10px; align-items: flex-start; background: var(--parch); border: 3px solid var(--ink); border-radius: 4px; padding: 8px 10px; box-shadow: 0 4px 0 rgba(0,0,0,.35); min-width: 0; }
.letterchip .ltxt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.letterchip .ltxt span { color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hopn { flex: none; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 1px 8px; font: 700 13px/1.4 var(--body); }
.skip { flex: none; align-self: center; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; padding: 0 16px; font-weight: 700; min-height: 44px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.hopbadge { position: absolute; transform: translate(-50%, -100%); z-index: 11; pointer-events: none; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; width: 24px; height: 24px; text-align: center; font: 700 13px/20px var(--body); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .chat { height: 60dvh; }
  .chain { bottom: 12px; }
}
/* Rev4 labels: title line + smaller, dimmer activity line */
.flag .ft { display: flex; flex-direction: column; line-height: 1.15; }
.flag .ft small { font-size: 10.5px; font-weight: 500; opacity: .8; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
/* Rev4 chat: cards never shrink; room below the last card */
.msgs > * { flex-shrink: 0; }
.msgs { scroll-padding-bottom: 16px; }
.msgs::after { content: ""; flex: 0 0 4px; }

/* ---------- build run 1: login gate, connection pip, thread deeds ---------- */
.login { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: radial-gradient(ellipse at 50% 110%, #3b4a63 0%, #1d2238 45%, #0e1020 100%); }
.login .stars { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #ffe9a8 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 33%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 8%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 8% 52%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 78%, #ffe9a8 50%, transparent 51%);
  animation: twinkle 4s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .55; } }
.gate { position: relative; width: min(380px, 100%); background: var(--parch); border: 4px solid var(--ink); box-shadow: 0 0 0 4px #8a5a32, 0 10px 0 rgba(0,0,0,.45), 0 0 80px rgba(255,190,90,.25);
  padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.lkeep { display: flex; justify-content: center; margin-top: -70px; filter: drop-shadow(0 0 18px rgba(255,190,90,.55)); }
.ltitle { margin: 2px 0 0; display: flex; justify-content: center; }
.lsub { margin: 0 0 4px; text-align: center; color: var(--ink2); font-style: italic; font-size: 14px; }
.gate label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; }
.gate input { min-height: 48px; border: 2px solid var(--ink); background: #fffaf0; padding: 0 12px; font: 18px var(--body); color: var(--ink); }
#lCode:not([data-rec="1"]) { letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.gate input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.lerr { min-height: 1.4em; color: var(--fail); font-weight: 700; font-size: 14px; }
.lgo { min-height: 50px; border: 2px solid var(--ink); background: var(--gold); font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 var(--ink); }
.lgo:disabled { filter: grayscale(.7); opacity: .7; cursor: default; }
.login.busy .lgo { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
.lalt { background: none; border: 0; color: var(--ink2); text-decoration: underline; font-size: 13px; min-height: 40px; }
body.locked .mapwrap, body.locked .chat, body.locked .panel { visibility: hidden; }
.logout { height: 40px; font-weight: 700; padding: 0 10px !important; background: var(--parch); border: 2px solid var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.4); font-size: 16px; padding: 0; }
.conn { top: auto; bottom: 16px; left: 16px; transform: none; font-size: 13px; padding: 4px 10px 4px 26px; border-radius: 3px; z-index: 13; background: rgba(243,230,196,.94); }
.conn::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--work); box-shadow: 0 0 6px var(--work); animation: pulse 1s steps(2) infinite; }
.thread .deed { align-self: center; font-size: 12px; color: var(--ink2); font-style: italic; padding: 0 6px; text-align: center; }
.thread .older { align-self: center; background: none; border: 1px dashed var(--edge); color: var(--ink2); padding: 4px 10px; min-height: 36px; }
@media (max-width: 760px) { .conn { bottom: calc(var(--peek) + 10px); } .lkeep { margin-top: -50px; } }
@media (max-width: 760px) { .logout { position: fixed; top: 10px; right: 10px; height: 34px; font-size: 13px; z-index: 6; } }
.sign .arr svg { display: block; }   /* Run3: pixel arrow, no emoji glyphs */

/* round 2: subtle in-chat link status */
.chatnet { margin: 0 12px 6px; padding: 5px 10px; font-size: 12px; color: var(--ink2); font-style: italic; text-align: center; opacity: .85; }
.chatnet[hidden] { display: none; }
.chatnet .dots { color: var(--think); margin-right: 4px; }
.chatnet .dots i { width: 5px; height: 5px; }
/* round 2 (C): follow-the-chain dialogue box, readability first */
.chain { width: min(760px, calc(100% - 24px)); bottom: 24px; }
.letterchip { padding: 14px 18px; gap: 14px; border-width: 4px; background: #fbf3e0; }
.letterchip .ltxt { font: 400 19px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; gap: 4px; color: #1f150d; }
.letterchip .ltxt b { font-size: 17px; letter-spacing: .01em; }
.letterchip .ltxt span { color: #2b1d14; -webkit-line-clamp: 5; }
.hopn { font-size: 15px; padding: 2px 10px; }
@media (max-width: 760px) { .letterchip { padding: 10px 12px; } .letterchip .ltxt { font-size: 16px; line-height: 1.5; } .letterchip .ltxt b { font-size: 15px; } .letterchip .ltxt span { -webkit-line-clamp: 4; } }

/* Round 2 item 4: dialogue box (portrait, tap to advance, end card) */
.chain { width: min(820px, calc(100% - 24px)); cursor: pointer; }
.chain .dport { flex: none; width: 92px; height: 112px; display: flex; align-items: flex-end; justify-content: center; background: #e9d6ac; border: 3px solid var(--ink); border-radius: 3px; overflow: hidden; }
.chain .dport canvas { image-rendering: pixelated; display: block; }
.chain .ltxt b { display: flex; align-items: center; gap: 8px; }
.chain .ltxt b .hopn { font-size: 13px; }
.chain .ltxt #chainTxt { min-height: 3em; }
.chain .dnext { align-self: flex-end; font: 700 13px/1.3 var(--body); font-style: normal; color: #7a4a1c; animation: dnext 1.1s steps(2) infinite; }
@keyframes dnext { 50% { opacity: .35; } }
.chain.end .letterchip { background: #f6e7c4; border-color: #7a4a1c; }
.chain.end .skip { display: none; }
@media (max-width: 760px) { .chain .dport { width: 64px; height: 80px; } .chain { bottom: 12px; } .chain .ltxt #chainTxt { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .chain .dnext { animation: none; } }
@media (max-width: 760px) { .chain { flex-direction: column; align-items: stretch; } .chain .skip { position: absolute; right: 0; top: -50px; min-height: 40px; padding: 0 12px; } .chain .ltxt b { flex-wrap: wrap; gap: 4px 8px; } }
/* ---- Round 3: the Herald's letters (parchment, wax seal) ---- */
.thread .b.lettered { background: #f6ecd2; border-color: #b8945a; }
.hletter { position: relative; padding: 4px 26px 2px 2px; font-family: Georgia, 'Iowan Old Style', serif; color: var(--ink); }
.hletter .lsub { font: 700 11px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #8a5a32; margin-bottom: 4px; }
.hletter .lsal { font-style: italic; margin-bottom: 3px; }
.hletter .lbody { white-space: pre-wrap; line-height: 1.5; }
.hletter .lsig { text-align: right; font-style: italic; margin-top: 4px; color: #4e341c; }
.hletter .seal, .chain.lettered .letterchip::after { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; background: #b8453d; border-radius: 50%; box-shadow: inset -2px -2px 0 #8e2e1e, inset 2px 2px 0 #d86a5a, 0 1px 0 rgba(0,0,0,.25); }
.thread .b .orig, .chain .orig { display: inline-block; margin-top: 4px; border: 0; background: none; padding: 4px 0; min-height: 32px; font: 700 12px var(--body); color: #7a4a1c; text-decoration: underline dotted; cursor: pointer; }
.thread .b .rawtxt { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--ink2); background: rgba(0,0,0,.04); padding: 4px 6px; border-left: 3px solid #b8945a; }
.xlating { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: italic 12px var(--body); color: #8a6a3a; }
.xlating i { width: 12px; height: 9px; background: linear-gradient(#e6d4a6, #e6d4a6) 0 0/100% 100%; border: 1px solid #8a6a3a; animation: xl 1.4s steps(3) infinite; }
@keyframes xl { 50% { transform: translateY(-2px); opacity: .5; } }
.thread .b.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { box-shadow: 0 0 0 3px #e8d44d; } to { box-shadow: 0 0 0 0 transparent; } }
.chain .letterchip { position: relative; }
.chain.lettered .letterchip { background: #f6ecd2; }
.chain.lettered #chainTxt { font-family: Georgia, 'Iowan Old Style', serif; }
.chain #chainTxt .lsal { display: block; font-style: italic; }
.chain #chainTxt .lsig { display: block; text-align: right; font-style: italic; }
.chain .orig { align-self: flex-start; min-height: 28px; padding: 2px 0; }
.extra { font-size: 13px; display: grid; gap: 2px; } .extra b { font-weight: 800; }
/* ---- Round 3: image attach ---- */
.composer .attach { min-width: 48px; width: 48px; padding: 0; display: grid; place-items: center; background: #fffaf0; color: var(--ink); }
.composer .attach.on { background: var(--gold); }
.tray { padding: 8px 12px 0; border-top: 3px double var(--ink); }
.tray + .composer { border-top: 0; }
.tray .thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.tray .thumb { position: relative; width: 64px; height: 64px; border: 2px solid var(--ink); background: #e9d6ac; }
.tray .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.tray .thumb .rm { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: #fffaf0; font: 800 16px/1 var(--body); padding: 0; cursor: pointer; }
.tray .atterr { font-size: 13px; color: #9a2a1e; padding: 4px 0 0; min-height: 0; }
.tray .atterr:empty { display: none; }
.msgs .b .atts { display: grid; gap: 4px; margin-top: 6px; grid-template-columns: repeat(2, minmax(0, 120px)); }
.msgs .b .atts.n1 { grid-template-columns: minmax(0, 220px); }
.msgs .b .atts img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 2px solid var(--ink); background: #e9d6ac; }
.msgs .b .atts.n1 img { aspect-ratio: auto; max-height: 220px; }
.chain #chainTxt span { display: inline; -webkit-line-clamp: unset; overflow: visible; color: inherit; }
.chain #chainTxt .lsal, .chain #chainTxt .lsig { display: block; }
.chain.lettered .letterchip .ltxt #chainTxt { -webkit-line-clamp: 8; }

/* Round 4: markdown in chat bubbles and letters (md.js) */
.mdx > :first-child, .txt > :first-child { margin-top: 0; } .mdx > :last-child, .txt > :last-child { margin-bottom: 0; }
.mdx p, .txt p, .stream p { margin: 0 0 .55em; }
.mdx h3, .mdx h4, .mdx h5, .mdx h6 { margin: .7em 0 .35em; font-size: 1.02em; line-height: 1.3; }
.mdx ul, .mdx ol, .txt ul, .txt ol { margin: .2em 0 .6em; padding-left: 1.7em; } .mdx li { margin: .15em 0; }
.mdx code, .txt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: rgba(0,0,0,.08); padding: .05em .3em; border-radius: 4px; }
.mdx pre, .txt pre { margin: .4em 0 .7em; padding: .6em .75em; background: rgba(20,16,10,.88); color: #f3ead6; border-radius: 6px; overflow-x: auto; max-width: 100%; }
.mdx pre code, .txt pre code { background: none; padding: 0; color: inherit; white-space: pre; }
.mdx blockquote { margin: .3em 0 .6em; padding: .1em .8em; border-left: 3px solid rgba(120,90,40,.45); opacity: .92; }
.mdx hr { border: 0; border-top: 1px solid rgba(120,90,40,.3); margin: .7em 0; }
.mdx a, .txt a { color: #2f5d9a; text-decoration: underline; word-break: break-word; }
.mdtable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .4em 0 .7em; border-radius: 6px; border: 1px solid rgba(120,90,40,.3); }
.mdtable table { border-collapse: collapse; font-size: .92em; min-width: 100%; }
.mdtable th, .mdtable td { padding: .38em .65em; border-bottom: 1px solid rgba(120,90,40,.2); text-align: left; vertical-align: top; white-space: nowrap; }
.mdtable td { white-space: normal; min-width: 7em; }
.mdtable thead th { background: rgba(120,90,40,.14); font-weight: 700; }
.mdtable tbody tr:nth-child(even) { background: rgba(120,90,40,.05); }
.b.king .mdtable th, .b.king .mdtable td { border-color: rgba(255,255,255,.25); }

/* builder patch fix 4: markdown in bubbles */
.b table.mdt{border-collapse:collapse;margin:6px 0} .b .mdt th,.b .mdt td{border:1px solid rgba(0,0,0,.25);padding:3px 8px;text-align:left} .b ul,.b ol{margin:4px 0 4px 20px} .b .mdgap{height:6px} .b code{font-family:inherit;background:rgba(0,0,0,.08);padding:0 3px}