/* 맥락 금고 (Context Vault) — chat + minimal rail + floating window (light). Week 3.
   Opacity = membership in the context window. */
:root {
  --bg-app: #f3f1ec;
  --bg-chat: #faf9f6;
  --bg-panel-solid: #ffffff;
  --border-color: rgba(43, 38, 30, 0.12);
  --border-strong: rgba(43, 38, 30, 0.24);
  --bg-hover: rgba(43, 38, 30, 0.05);
  --bg-sunken: rgba(43, 38, 30, 0.035);
  --text-main: #2a2520;
  --text-muted: #5c544d;
  --text-dim: #948b81;
  --ember: #c25330;
  --ember-soft: rgba(194, 83, 48, 0.12);
  --keep-gold: #b07d2a;
  --keep-soft: rgba(176, 125, 42, 0.16);
  --sel: #2e6f8e;
  --sel-soft: rgba(46, 111, 142, 0.15);
  --danger: #b33629;
  --danger-soft: rgba(179, 54, 41, 0.09);
  --ok: #3c6f4c;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, "Nanum Myeongjo", serif;
  --font-mono: 'JetBrains Mono', "Consolas", monospace;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-soft: 0 8px 30px rgba(43, 38, 30, 0.07);
  --shadow-float: 0 14px 44px rgba(43, 38, 30, 0.22);
  --radius: 13px;
}
body.dark-theme {
  --bg-app: #121316;
  --bg-chat: #16171b;
  --bg-panel-solid: #1c1d22;
  --border-color: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-sunken: rgba(255, 255, 255, 0.04);
  --text-main: #e8e6e3;
  --text-muted: #9e9b97;
  --text-dim: #6f6c68;
  --ember: #e07b4f;
  --ember-soft: rgba(224, 123, 79, 0.16);
  --keep-gold: #c8a25f;
  --keep-soft: rgba(200, 162, 95, 0.18);
  --sel: #79b0c9;
  --sel-soft: rgba(121, 176, 201, 0.18);
  --danger: #d95b5b;
  --danger-soft: rgba(217, 91, 91, 0.13);
  --ok: #82ab8c;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 16px 50px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-sans); background: var(--bg-app); color: var(--text-main); line-height: 1.55; display: flex; flex-direction: column; overflow: hidden; transition: background 0.3s, color 0.3s; }

/* Header / guide bar */
.app-header { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--border-color); background: var(--bg-panel-solid); }
.brand { display: flex; flex-direction: column; gap: 1px; }
.brand .badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); font-weight: 600; }
.brand h1 { font-family: var(--font-serif); font-size: 19px; font-weight: 600; }
.brand .sub { font-size: 12px; color: var(--text-dim); }
.header-spacer { flex: 1; }
.header-controls { display: flex; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 9px; padding: 7px 12px; transition: var(--transition); }
.icon-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.guide-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 22px; border-bottom: 1px solid var(--border-color); background: var(--bg-app); font-size: 12px; color: var(--text-dim); }
.guide-bar .gb-label { font-weight: 600; color: var(--text-muted); }
.step { font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; background: var(--bg-panel-solid); border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 11px; transition: var(--transition); }
.step:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-main); }
.step:disabled { opacity: 0.4; cursor: default; }
.step.active { border-color: var(--ember); background: var(--ember-soft); color: var(--ember); }
.gb-hint { margin-left: auto; font-size: 11.5px; }

/* Workspace: rail + chat; floating window overlays the chat */
.workspace { position: relative; flex: 1; display: grid; grid-template-columns: 158px 1fr; gap: 14px; padding: 14px; overflow: hidden; }
.panel { background: var(--bg-panel-solid); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; overflow: hidden; }

/* ---------- LEFT: minimal rail ---------- */
.rail { padding: 12px 11px; gap: 9px; }
.rail-sec { margin-bottom: 2px; }
.rail-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text-muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lg-dot.in { background: var(--ember); }
.lg-dot.out { background: var(--text-dim); opacity: 0.5; }
.lg-dot.kept { background: var(--keep-gold); }
.rail-btn { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; transition: var(--transition); }
.rail-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.rail-btn.on { border-color: var(--ember); color: var(--ember); background: var(--ember-soft); }
.rail-spacer { flex: 1; }
.trash { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 4px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-sunken); }
.trash-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-dim); }
.trash-row .tr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-restore { font-size: 10px; font-weight: 600; cursor: pointer; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-panel-solid); color: var(--ok); }
.btn-restore:hover { border-color: var(--ok); }
.trash-empty { font-size: 10.5px; color: var(--text-dim); font-style: italic; padding: 3px; }

.bulk-bar { display: none; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--sel); border-radius: 10px; background: var(--sel-soft); }
.bulk-bar.show { display: flex; }
.bulk-count { font-size: 11px; color: var(--text-muted); }
.bulk-count b { color: var(--sel); font-family: var(--font-mono); }
.bulk-btn { font-size: 12px; font-weight: 600; cursor: pointer; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-panel-solid); color: var(--text-muted); transition: var(--transition); text-align: left; }
.bulk-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.bulk-btn.keep:hover { border-color: var(--keep-gold); color: var(--keep-gold); }
.bulk-btn.del:hover { border-color: var(--danger); color: var(--danger); }
.bulk-btn.clear { background: transparent; border: none; color: var(--text-dim); padding: 3px; text-align: center; }
.bulk-btn.clear:hover { color: var(--text-main); }

/* ---------- CENTER: chat ---------- */
.center { position: static; }
.chat-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border-color); }
.chat-head .title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; }
.chat-head .ch-hint { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.thread { position: relative; flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.marquee { position: absolute; border: 1px solid var(--sel); background: var(--sel-soft); border-radius: 3px; pointer-events: none; display: none; z-index: 40; }

.horizon { display: flex; align-items: center; gap: 10px; margin: 4px 2px; color: var(--text-dim); font-size: 10.5px; font-family: var(--font-mono); }
.horizon::before, .horizon::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.msg { max-width: 78%; display: flex; flex-direction: column; gap: 4px; position: relative; scroll-margin: 18px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; align-items: flex-start; }
.msg .who { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); display: flex; gap: 7px; align-items: center; }
.msg-check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--bg-panel-solid); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; flex-shrink: 0; transition: var(--transition); }
.msg-check:hover { border-color: var(--sel); }
.msg.sel .msg-check { background: var(--sel); border-color: var(--sel); }
.msg .topic-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 6px; background: var(--bg-sunken); border: 1px solid var(--border-color); color: var(--text-dim); }
.msg .keep-dot { color: var(--keep-gold); font-size: 11px; }
.bubble { font-size: 14px; line-height: 1.55; padding: 11px 15px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-chat); cursor: pointer; transition: opacity 0.3s, filter 0.3s, background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.msg.user .bubble { background: var(--ember-soft); border-bottom-right-radius: 5px; }
.bubble:hover { border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.msg.kept .bubble { border-left: 3px solid var(--keep-gold); }
.msg.sel .bubble { box-shadow: 0 0 0 2px var(--sel); border-color: var(--sel); }
.msg.out .bubble { opacity: 0.4; filter: grayscale(0.7); border-style: dashed; }
.msg.out .who { opacity: 0.55; }
.ctx-tag { display: none; font-size: 10px; font-family: var(--font-mono); color: var(--text-dim); align-items: center; gap: 5px; }
.msg.out .ctx-tag { display: inline-flex; }
.msg.flash .bubble { animation: flash 1s ease; }
@keyframes flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--sel-soft); border-color: var(--sel); } }
.act-hint { position: absolute; bottom: 100%; margin-bottom: 5px; white-space: nowrap; font-size: 11px; padding: 3px 8px; border-radius: 7px; pointer-events: none; background: var(--text-main); color: var(--bg-panel-solid); opacity: 0; transition: opacity 0.15s; z-index: 5; }
.msg.user .act-hint { right: 4px; } .msg.assistant .act-hint { left: 4px; }
.msg:hover .act-hint { opacity: 0.9; }
.msg.contaminated .bubble { border-left: 3px solid var(--danger); background: var(--danger-soft); }
.msg .taint, .msg .clean-flag { display: none; font-size: 11.5px; margin-top: 1px; align-items: center; gap: 6px; }
.msg.contaminated .taint { display: flex; color: var(--danger); }
.msg.clean .clean-flag { display: flex; color: var(--ok); }
.msg-regen { align-self: flex-start; font-size: 11px; color: var(--text-muted); cursor: pointer; background: var(--bg-panel-solid); border: 1px solid var(--border-color); border-radius: 7px; padding: 3px 9px; margin-top: 3px; transition: var(--transition); }
.msg-regen:hover { color: var(--text-main); border-color: var(--border-strong); }

.chat-foot { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border-color); }
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 9px; padding: 8px 13px; transition: var(--transition); }
.btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-main); }
.btn:disabled { opacity: 0.45; cursor: default; }
.status { font-size: 12px; color: var(--text-dim); margin-left: auto; text-align: right; line-height: 1.4; }
.status b { color: var(--text-muted); font-family: var(--font-mono); }
.status .last { display: block; font-size: 11px; opacity: 0.85; }

/* ---------- floating "context window" ---------- */
.ctxwin { position: absolute; top: 22px; right: 22px; width: 250px; max-height: 72%; z-index: 50; display: flex; flex-direction: column; background: var(--bg-panel-solid); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-float); overflow: hidden; }
.ctxwin.hidden { display: none; }
.cw-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-sunken); cursor: grab; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cw-head:active { cursor: grabbing; }
.cw-head .cw-title { flex: 1; }
.cw-head .cw-title b { color: var(--ember); font-family: var(--font-mono); }
.cw-close { border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--text-dim); padding: 0 3px; }
.cw-close:hover { color: var(--text-main); }
.cw-body { overflow-y: auto; padding: 7px; display: flex; flex-direction: column; gap: 3px; }
.cw-row { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 6px; cursor: pointer; font-size: 11px; border: 1px solid transparent; transition: background 0.12s; }
.cw-row:hover { background: var(--bg-hover); border-color: var(--border-color); }
.cw-row .cw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); flex-shrink: 0; }
.cw-row.kept .cw-dot { background: var(--keep-gold); }
.cw-row .cw-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); }
.cw-row.out { opacity: 0.4; }
.cw-row.out .cw-dot { background: var(--text-dim); }
.cw-divider { font-size: 9.5px; font-family: var(--font-mono); color: var(--text-dim); padding: 6px 7px 2px; letter-spacing: 0.04em; }

.thread::-webkit-scrollbar, .cw-body::-webkit-scrollbar, .trash::-webkit-scrollbar { width: 8px; }
.thread::-webkit-scrollbar-thumb, .cw-body::-webkit-scrollbar-thumb, .trash::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ---------- Week 4: key-screen mode — subtract noise, foreground the resolved moment ---------- */
.icon-btn.primary { color: #fff; background: var(--ember); border-color: var(--ember); }
.icon-btn.primary:hover { color: #fff; background: #a8431f; border-color: #a8431f; }
body.dark-theme .icon-btn.primary { color: #1a1208; }

/* subtraction (fully reversible — no features removed, only hidden in key-screen mode) */
body.keyscreen .guide-bar { display: none; }
body.keyscreen .brand .sub,
body.keyscreen .chat-head .ch-hint,
body.keyscreen .act-hint { display: none; }

/* the single net addition: one before→after caption pill, anchored just above the clean answer */
.keyscreen-caption {
  align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 2px auto 0; padding: 7px 14px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  background: var(--bg-sunken); border: 1px dashed var(--border-strong); border-radius: 10px;
}
.keyscreen-caption .ks-cap b { color: var(--text-main); }
.keyscreen-caption .ks-bad { color: var(--danger); font-weight: 700; }
.keyscreen-caption .ks-good { color: var(--ok); font-weight: 700; }
.keyscreen-caption .ks-arrow { color: var(--text-dim); }