/* 몸톡 — anatomical plate reading room
   plaster ground, plate ink, muscle red used only for citation labels. */

:root {
  --plaster: #e6e7e1;
  --paper: #fbfbf8;
  --ink: #16202a;
  --ink-soft: #4a5764;
  /* --faint draws hairlines and decorative strokes; --sinew sets small text.
     They used to be one token, which put 3.2:1 grey type on the plaster. */
  --faint: #8b8a80;
  --sinew: #63625a;
  --muscle: #a63a2e;
  --vein: #2c5c6a;
  --rule: #d0d1c8;
  --rule-soft: #e2e3dc;

  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  /* Serif fallbacks are serif all the way down, so the swap from the fallback
     to Noto Serif KR does not change the texture of a paragraph mid-load. */
  --serif: "Noto Serif KR", AppleMyungjo, "Nanum Myeongjo", Batang, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --rail-w: 264px;
  --plate-w: 440px;
  --r: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
html.locked { overflow: hidden; overscroll-behavior: none; }

button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }

:focus-visible {
  outline: 2px solid var(--vein);
  outline-offset: 2px;
  border-radius: 5px;
}
.new-chat:focus-visible, .plate-step:focus-visible { outline-color: #79b3c2; }

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100dvh;
  height: var(--vvh, 100dvh);
}

/* ---------- rail ---------- */
.rail {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule);
  padding: 20px 14px 14px;
  background: linear-gradient(180deg, #eaebe5, #e3e4dd);
  min-width: 0; min-height: 0;
}
.rail-head { display: flex; align-items: flex-start; justify-content: space-between; }
.mark { display: flex; flex-direction: column; line-height: 1; }
.mark-ko { font-size: 25px; font-weight: 800; letter-spacing: -.045em; }
.mark-en {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sinew); margin-top: 7px;
}
.rail-sub { margin: 14px 0 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.rail-close { display: none; }

.new-chat {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px;
  background: var(--ink); color: #f4f4ef;
  border: none; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600;
  transition: transform .12s ease, background .2s ease;
}
.new-chat:hover { background: #22303d; }
.new-chat:active { transform: scale(.985); }
.plus { font-size: 16px; line-height: 1; opacity: .7; }

.rail-scroll { flex: 1; overflow-y: auto; margin-top: 22px; min-height: 0; }
.rail-label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sinew);
  margin: 0 0 8px 2px;
}
.sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.s-item {
  display: flex; align-items: center; gap: 1px;
  border-radius: 8px; padding-right: 4px;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.s-item:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.s-item.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(22,32,42,.06); }
.s-item.on .s-open { font-weight: 600; }
.s-open {
  flex: 1; min-width: 0;
  background: none; border: none; text-align: left;
  padding: 7px 8px; font-size: 13px; color: inherit; border-radius: 8px;
}
.s-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tools { flex: none; display: flex; gap: 1px; }
.s-tools > button {
  border: none; background: none; color: var(--sinew);
  font-size: 13px; line-height: 1; padding: 5px; border-radius: 5px;
}
/* Only hide these where a hover can bring them back. On touch the old rule
   left an invisible live tap target that deleted conversations. */
@media (hover: hover) {
  .s-tools > button { opacity: 0; }
  .s-item:hover .s-tools > button,
  .s-item.armed .s-tools > button,
  .s-tools > button:focus-visible { opacity: 1; }
}
/* Permanently visible on touch, so give it a finger-sized target. */
@media (hover: none) {
  .s-tools > button { padding: 9px 10px; font-size: 15px; }
}
.s-rename:hover { color: var(--vein); background: rgba(44,92,106,.1); }
.s-del:hover { color: var(--muscle); background: rgba(166,58,46,.09); }
.s-item.armed .s-del {
  color: var(--muscle); background: rgba(166,58,46,.12);
  font-family: var(--mono); font-size: 11.5px; padding: 4px 7px;
}
.s-edit {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--vein); border-radius: 8px;
  background: var(--paper); color: var(--ink); outline: none;
}
.rail-empty { font-size: 12.5px; color: var(--sinew); padding: 6px 8px; }

.rail-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 11px 12px;
  background: none; border: 1px solid var(--rule);
  border-radius: var(--r); font-size: 13px; font-weight: 500;
  transition: border-color .2s ease, background .2s ease;
}
.rail-foot:hover { background: rgba(255,255,255,.55); border-color: var(--faint); }
.rail-foot .mono { color: var(--sinew); }

/* ---------- stage ---------- */
/* min-height: 0 is load-bearing. Without it a grid item's automatic minimum
   size lets .stage grow to its content, .thread never scrolls, and the whole
   document scrolls instead — which pushes the composer off screen. */
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--plaster); }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-bottom: 1px solid var(--rule);
  background: rgba(232,233,227,.86); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title { flex: 1; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-note { color: var(--sinew); }
.icon-btn {
  display: none; border: none; background: none; color: var(--ink-soft);
  font-size: 15px; line-height: 1; padding: 6px; border-radius: 7px;
}
.icon-btn:hover { background: rgba(255,255,255,.6); color: var(--ink); }

.thread {
  flex: 1; overflow-y: auto; padding: 34px 22px 12px;
  /* Scroll anchoring fights the follow-the-stream logic; auto-scroll is
     decided in scroll.js by reader intent, not by the browser. */
  overflow-anchor: none;
}

.to-bottom {
  position: absolute; left: 50%; z-index: 6;
  bottom: calc(104px + env(safe-area-inset-bottom));
  padding: 7px 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft);
  font-size: 12.5px; box-shadow: 0 4px 14px rgba(22,32,42,.14);
  /* visibility, not just opacity: an invisible pill must not take a tab stop */
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-bottom.on { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%); }
.to-bottom:hover { border-color: var(--vein); color: var(--vein); }

/* ---------- welcome ---------- */
.welcome { max-width: 720px; margin: 0 auto; padding: 18px 0 8px; }
.welcome-plate { display: flex; gap: 26px; align-items: flex-start; }
.plate-figure { flex: none; width: 76px; color: var(--faint); opacity: .85; }
.plate-figure svg { width: 100%; height: auto; }
.welcome-copy h1 {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.32; margin: 2px 0 12px;
}
.welcome-copy p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); max-width: 46ch; }

.starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
.starter {
  text-align: left; background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 13px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.starter:hover { border-color: var(--vein); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22,32,42,.07); }
.starter .s-kicker {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muscle); margin-bottom: 6px;
}

/* ---------- messages ---------- */
#messages { max-width: 720px; margin: 0 auto; padding-bottom: 30px; }
.msg { margin-bottom: 30px; }

.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble {
  background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: 14px 14px 4px 14px; padding: 11px 15px;
  font-size: 14.5px; line-height: 1.65; max-width: 82%;
  white-space: pre-wrap; word-break: break-word;
}

.msg.bot .who {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sinew); margin-bottom: 12px;
}
.msg.bot .who::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.trace { margin: 0 0 14px; }
.trace-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 2px 0;
  font-family: var(--mono); font-size: 12px; color: var(--sinew);
}
.trace-toggle:hover { color: var(--vein); }
.trace-steps { display: none; flex-direction: column; gap: 5px; margin-top: 9px; padding-left: 11px; border-left: 1px solid var(--rule); }
.trace.open .trace-steps { display: flex; }
.trace-step { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.trace-step b { color: var(--vein); font-weight: 500; }
.trace-think { font-family: var(--sans); font-size: 12.5px; color: var(--sinew); line-height: 1.6; font-style: italic; }

.prose { font-family: var(--serif); font-size: 15.5px; line-height: 1.85; color: var(--ink); word-break: break-word; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
/* the volatile tail block(s) while streaming — no box of its own */
.prose .tail { display: contents; }
.prose > .tail:first-child > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose h1, .prose h2, .prose h3 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.4; margin: 1.7em 0 .6em;
}
.prose h1 { font-size: 19px; } .prose h2 { font-size: 17px; } .prose h3 { font-size: 15.5px; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.25em; }
.prose li { margin-bottom: .45em; }
.prose strong { font-weight: 600; }
.prose a { color: var(--vein); text-underline-offset: 3px; }
.prose code {
  font-family: var(--mono); font-size: .86em;
  background: rgba(44,92,106,.08); padding: 1px 5px; border-radius: 4px;
}
.prose pre {
  margin: 0 0 1.05em; padding: 12px 14px; overflow-x: auto;
  background: rgba(22,32,42,.045); border: 1px solid var(--rule-soft); border-radius: 8px;
}
.prose pre code { background: none; padding: 0; font-size: .82em; line-height: 1.65; }
.prose blockquote {
  margin: 0 0 1.05em; padding: 2px 0 2px 15px;
  border-left: 2px solid var(--muscle); color: var(--ink-soft);
}
.prose .table-wrap { margin: 0 0 1.1em; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 0; font-family: var(--sans); font-size: 13.5px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 7px 10px; text-align: left; vertical-align: top; }
.prose th { background: rgba(255,255,255,.6); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 1.6em 0; }

/* citation labels — the signature: anatomy-plate numbering */
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 19px; padding: 0 5px; margin: 0 1px 0 3px;
  border: 1px solid var(--muscle); border-radius: 4px;
  background: rgba(166,58,46,.06); color: var(--muscle);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  vertical-align: 1px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cite:hover, .cite.on { background: var(--muscle); color: #fbfbf8; }

.legend { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.legend-title {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sinew); margin-bottom: 9px;
}
.legend-item {
  display: flex; gap: 9px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: none;
  padding: 6px 8px 6px 0; border-radius: 7px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.legend-item:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.legend-num {
  flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--muscle);
  border: 1px solid var(--muscle); border-radius: 4px; padding: 1px 5px; background: rgba(166,58,46,.06);
}
.legend-src { flex: 1; }
.legend-src b { font-weight: 600; color: var(--ink); }
.legend-loc { font-family: var(--mono); font-size: 11.5px; color: var(--sinew); flex: none; }

.cursor {
  display: inline-block; width: 7px; height: 15px; margin-left: 2px;
  background: var(--muscle); vertical-align: -2px; animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.note {
  margin-top: 14px; padding-top: 9px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--sinew);
}

.err {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 13px; color: var(--muscle);
  background: rgba(166,58,46,.07);
  border: 1px solid rgba(166,58,46,.25); border-radius: var(--r); padding: 10px 12px;
}
.err-retry {
  border: 1px solid rgba(166,58,46,.4); background: rgba(255,255,255,.55);
  color: var(--muscle); border-radius: 7px; padding: 4px 11px; font-size: 12.5px;
}
.err-retry:hover { background: var(--muscle); color: var(--paper); }

/* ---------- composer ---------- */
.composer-wrap { padding: 10px 22px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(230,231,225,0), var(--plaster) 34%); }
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 720px; margin: 0 auto; padding: 8px 8px 8px 15px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 15px; transition: border-color .18s ease, box-shadow .18s ease;
}
.composer:focus-within { border-color: var(--vein); box-shadow: 0 3px 18px rgba(22,32,42,.08); }
.composer textarea {
  flex: 1; border: none; outline: none; resize: none; background: none;
  /* 16px keeps iOS Safari from zooming the page on focus. */
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink);
  max-height: 168px; padding: 6px 0;
}
.composer textarea::placeholder { color: var(--sinew); }
.composer button {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 9px;
  background: var(--ink); color: #f6f6f1;
  display: grid; place-items: center; transition: background .2s ease, opacity .2s ease;
}
.composer button:disabled { opacity: .35; cursor: default; }
.composer button:not(:disabled):hover { background: var(--muscle); }
.composer button.stopping { background: var(--muscle); }
.composer button.stopping:hover { background: #8b3025; }
.disclaimer { max-width: 720px; margin: 8px auto 0; font-size: 12px; color: var(--sinew); text-align: center; }

/* ---------- plate panel ---------- */
.plate {
  position: fixed; top: 0; right: 0; z-index: 30;
  width: var(--plate-w); max-width: 92vw;
  height: 100dvh; height: var(--vvh, 100dvh);
  background: var(--paper); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform .26s cubic-bezier(.2,.8,.3,1);
  box-shadow: -14px 0 40px rgba(22,32,42,.1);
}
.plate.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .plate { transition: none; } }
.plate-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 13px; border-bottom: 1px solid var(--rule);
}
.plate-id { min-width: 0; }
.plate-head h2 { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.plate-kicker { color: var(--muscle); text-transform: uppercase; letter-spacing: .14em; }
.plate .icon-btn { display: block; flex: none; }

.plate-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--rule-soft);
}
.plate-nav[hidden] { display: none; }
.plate-step {
  flex: none; width: 34px; height: 27px; line-height: 1;
  border: 1px solid var(--rule); border-radius: 7px;
  background: none; color: var(--ink-soft); font-size: 15px;
}
.plate-step:disabled { opacity: .3; cursor: default; }
.plate-step:not(:disabled):hover { border-color: var(--vein); color: var(--vein); }
#plateWhere { color: var(--sinew); }

.plate-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.plate-img { width: 100%; border: 1px solid var(--rule); border-radius: 8px; display: block; background: #fff; }
.plate-video { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 8px; background: #000; }
.plate-sum { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.plate-sec {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sinew); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.plate-figs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plate-figs li { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); padding-left: 20px; position: relative; }
.plate-figs li::before { content: "🖼"; position: absolute; left: 0; font-size: 11px; }
.plate-text { font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); white-space: pre-wrap; }
.plate-link {
  display: inline-block; margin-top: 12px; font-size: 12.5px;
  color: var(--vein); text-underline-offset: 3px;
}

.scrim {
  position: fixed; inset: 0; z-index: 20; background: rgba(22,32,42,.32);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* ---------- library ---------- */
.library {
  width: min(820px, 94vw); max-height: 86dvh; padding: 0;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 28px 70px rgba(22,32,42,.28);
}
.library::backdrop { background: rgba(22,32,42,.42); }
.library-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper); border-radius: 14px 14px 0 0;
}
.library-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.library-head p { margin: 5px 0 0; color: var(--sinew); }
.library .icon-btn { display: block; }
.library-body { padding: 6px 20px 22px; overflow-y: auto; max-height: calc(86dvh - 70px); }
.lib-loading { font-size: 13px; color: var(--sinew); padding: 18px 2px; }

.lib-doc { border-bottom: 1px solid var(--rule-soft); }
.lib-doc:last-child { border-bottom: none; }
.lib-doc-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 14px 2px; text-align: left;
}
.lib-doc-head:hover .lib-doc-title { color: var(--vein); }
.lib-kind {
  flex: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--rule); color: var(--sinew);
}
.lib-kind.video { border-color: rgba(166,58,46,.35); color: var(--muscle); }
.lib-doc-title { flex: 1; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.lib-doc-meta { font-family: var(--mono); font-size: 11.5px; color: var(--sinew); }
.lib-sections { display: none; padding: 0 2px 16px; }
.lib-doc.open .lib-sections { display: block; }
.lib-sec { padding: 8px 0 8px 14px; border-left: 1px solid var(--rule); margin-bottom: 2px; cursor: pointer; }
.lib-sec:hover .lib-sec-title { color: var(--vein); }
.lib-sec-title { font-size: 13px; font-weight: 500; }
.lib-sec-title .mono { color: var(--sinew); margin-left: 6px; }
.lib-sec-sum { font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); margin: 4px 0 0; }
.lib-sub { margin-left: 12px; padding-left: 12px; border-left: 1px dotted var(--rule); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: 0; left: 0; z-index: 40;
    width: 84vw; max-width: 320px;
    height: 100dvh; height: var(--vvh, 100dvh);
    transform: translateX(-101%); transition: transform .26s cubic-bezier(.2,.8,.3,1);
  }
  .rail.open { transform: none; }
  @media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
  .rail-close, .icon-btn#railOpen { display: block; }
  .thread { padding: 22px 16px 8px; }
  .composer-wrap { padding-inline: 16px; }
  .welcome-plate { gap: 16px; }
  .plate-figure { width: 54px; }
  .welcome-copy h1 { font-size: 24px; }
  .starters { grid-template-columns: 1fr; }
  .plate { width: 100vw; max-width: none; }
  .to-bottom { bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* let the table find its natural width and scroll inside .table-wrap */
  .prose table { width: auto; min-width: 100%; }
  .prose th, .prose td { white-space: nowrap; }
}