:root {
  --ink: #4a352e;
  --muted: #94796b;
  --paper: #fff5d9;
  --line: #f0d9aa;
  --dark: #b84b40;
  --lime: #ffd777;
  --sage: #648c77;
  --coral: #ef7667;
  font-family: "Noto Serif KR", "Batang", "AppleMyungjo", serif;
}

body { color: var(--ink); background: #fff3d2; }
button, textarea, input { font-family: "Noto Serif KR", "Batang", "AppleMyungjo", serif; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline-color: #dc6657; }

.sidebar {
  color: #fff7e6;
  background: #c95649;
  background-image: linear-gradient(90deg, transparent 97%, rgba(255,220,132,.13) 97%), linear-gradient(rgba(255,239,200,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  border-right: 4px solid #e9bd63;
  box-shadow: inset -7px 0 #b94e43, inset -10px 0 #f5d786;
}
.brand-mark {
  border: 2px solid #f6d77f;
  border-radius: 50%;
  color: #b94d43;
  background: #fff0c6;
  font-family: "Noto Serif KR", "Batang", serif;
}
.brand-copy small { color: #ffe3a3; letter-spacing: .16em; }
.new-chat, .fortune-nav { border: 1px solid rgba(255,227,163,.6); border-radius: 20px; }
.new-chat { color: #fff8e8; background: #b74a40; }
.new-chat:hover, .fortune-nav:hover { border-color: #ffe18b; background: #a94239; }
.fortune-nav { color: #fff5dc; background: #a94239; }
.section-heading h2 { color: #ffe8b4; }
.section-heading #session-count { color: #fff0c7; }
.session-item { color: #fff0d4; border-radius: 12px; }
.session-item:hover, .session-item.active { border-color: rgba(255,225,139,.55); background: rgba(132,48,41,.32); }
.library-section, .sidebar-footer { border-color: rgba(255,231,185,.4); }
.add-file, .new-chat>span, .fortune-nav span, .fortune-nav b { color: #ffdf86; }
.file-icon { border-color: rgba(255,231,185,.65); }
.document-item { color: #fff3d7; }
.document-copy strong { color: #fff7e7; font-size: 11px; font-weight: 800; }
.document-copy small { color: #ffe2a0; font-size: 10px; }
.library-note, .empty-note { color: #ffe0a4; font-size: 11px; line-height: 1.65; }
.sidebar-footer { color: #fff0cf; font-size: 11px; }
.model-name { color: #ffe4aa; font-size: 10px; }
.status-dot.online { background: #b7ec70; box-shadow: 0 0 0 3px rgba(45,101,59,.48); }

.main-panel {
  background-color: #fff7e2;
  background-image: radial-gradient(rgba(212,155,84,.13) .8px, transparent .8px);
  background-size: 17px 17px;
}
.topbar { border-color: #f0dba9; background: rgba(255,247,226,.95); }
.topic { color: #815d48; }
.topic-mark { background: #e76a5c; box-shadow: 0 0 0 4px rgba(231,106,92,.14); }
.top-new-chat, .help-button, .menu-button {
  border-color: #efd49a;
  border-radius: 18px;
  color: #815d48;
  background: #fffaf0;
}
.top-new-chat:hover, .help-button:hover { border-color: #e57a65; background: #fff0d3; }
.eyebrow { color: #a36b45; letter-spacing: .04em; }
.eyebrow span { width: 22px; height: 3px; border-radius: 3px; background: #e76a5c; }
.welcome { position: relative; }
.welcome::before, .welcome::after {
  position: absolute;
  z-index: 0;
  color: rgba(218,168,87,.35);
  font-family: serif;
  pointer-events: none;
}
.welcome::before { content: "☁"; top: 12px; right: 4px; font-size: 74px; }
.welcome::after { content: "✳"; right: 34px; bottom: 78px; color: rgba(236,161,87,.5); font-size: 42px; }
.welcome>* { position: relative; z-index: 1; }
.welcome h1 { color: #b94d43; font-family: "Noto Serif KR", "Batang", serif; font-weight: 850; letter-spacing: -.04em; }
.welcome h1 em { color: #648c77; }
.welcome>p { color: #866d59; }
.suggestions button {
  border: 1px solid #efd7a8;
  border-radius: 14px;
  color: #654b3d;
  background: rgba(255,252,241,.92);
  box-shadow: 0 4px 12px rgba(147,91,53,.06);
}
.suggestions button:hover { border-color: #e88870; background: #fff9ea; }
.suggestion-number, .arrow { color: #d76a56; }
.avatar { border: 1px solid #edce86; border-radius: 50%; color: #fff9e9; background: #658c77; }
.message-row.user .avatar { border-color: #edb8a3; border-radius: 50%; background: #e77765; }
.message-content { color: #4b3c32; }
.source-chip { border-color: #ecd8b4; border-radius: 12px; color: #5f8069; background: #f4f0d9; }
.composer {
  border: 1px solid #e9d1a2;
  border-radius: 17px;
  background: rgba(255,252,244,.98);
  box-shadow: 0 9px 24px rgba(131,79,47,.1);
}
.composer:focus-within { border-color: #e47d69; box-shadow: 0 9px 24px rgba(131,79,47,.1), 0 0 0 3px rgba(228,125,105,.13); }
.composer-hint span { color: #d56c58; }
.send-button, .fortune-submit { border-radius: 18px; color: #fff9e8; background: #d85d50; }
.send-button:hover, .fortune-submit:hover { background: #bd4b42; }
.send-button b, .fortune-submit b { border-radius: 50%; color: #fff0c8; background: #8a5542; }
.privacy-note { color: #9a806d; }
.fortune-launch {
  border: 2px solid #f4d274;
  border-radius: 3px;
  color: #fff9e8;
  background: #e96f61;
  box-shadow: 0 5px 0 #bd5148, 0 8px 14px rgba(144,65,52,.12);
}
.fortune-launch:hover { background: #d95e54; transform: translateY(-1px); }
.fortune-launch>span, .fortune-launch b { color: #ffe08a; }
.fortune-dialog { border-color: #e8c77d; border-radius: 12px; background: #fff7e2; }
.form-control, .dialog-close { border-color: #e9d5ae; border-radius: 8px; background: #fffdf6; }
.toast { border-color: #edd3a0; border-radius: 12px; color: #4a352e; background: #fffaf0; }

/* The fortune result uses the red hanging scroll shown in the reference. */
.fortune-scroll { filter: drop-shadow(0 9px 9px rgba(133,67,43,.14)); }
.fortune-scroll-rod { border-color: #e8bd63; background: #c78b4f; }
.fortune-scroll-rod::before, .fortune-scroll-rod::after { border-color: #f1ce78; background: #d59b5c; }
.fortune-scroll-sheet { border-color: #ffdc7b; background: #f27667; }
.fortune-scroll-sheet::before { border-color: rgba(255,231,151,.8); }
.fortune-traditional .fortune-copy { color: #fff9e9; }

@media (max-width: 650px) {
  .sidebar { border-right-width: 3px; }
  .welcome { padding-top: 34px; }
  .welcome h1 { font-size: 33px; }
  .welcome::before { top: -2px; right: 0; font-size: 55px; }
  .welcome::after { right: 16px; bottom: 66px; font-size: 32px; }
}