:root{
  --bg:#0f0d0b;
  --panel:#16130f;
  --panel-2:#1d1914;
  --border:rgba(255,240,215,0.08);
  --text:#f1e9dc;
  --text-dim:#a79d8d;
  --accent:#c9a24b;
  --accent-soft:rgba(201,162,75,0.14);
  --user-bubble:#2a241b;
  --danger:#e07a6a;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none;}

.app{display:grid; grid-template-columns:280px 1fr; height:100dvh;}

/* Sidebar */
.sidebar{
  background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px; min-height:0;
}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:0 8px 18px;}
.brand{font-family:var(--serif); font-size:22px; font-weight:600;}
.brand span{color:var(--accent);}
.new-chat{
  width:100%; text-align:left; padding:11px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel-2); font-weight:500; font-size:14px;
  transition:border-color .15s;
}
.new-chat:hover{border-color:var(--accent);}
.history-label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); padding:22px 8px 8px;}
.history{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; min-height:0;}
.history-empty{font-size:13px; color:var(--text-dim); padding:6px 8px;}
.history-item{display:flex; align-items:center; border-radius:8px;}
.history-item:hover, .history-item.active{background:var(--panel-2);}
.history-item.active .history-open{color:var(--text);}
.history-open{
  flex:1; min-width:0; text-align:left; padding:9px 8px; font-size:14px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.history-del{padding:6px 10px; font-size:16px; color:var(--text-dim); opacity:0; transition:opacity .15s;}
.history-item:hover .history-del, .history-item.active .history-del{opacity:1;}
.history-del:hover{color:var(--danger);}
.privacy{font-size:11px; color:var(--text-dim); padding:14px 8px 0; border-top:1px solid var(--border); margin-top:12px;}

/* Chat */
.chat{display:flex; flex-direction:column; min-width:0; min-height:0;}
.chat-head{display:flex; align-items:center; gap:10px; padding:16px 24px; border-bottom:1px solid var(--border);}
.chat-title{font-family:var(--serif); font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.icon-btn{font-size:22px; line-height:1; padding:4px 8px; border-radius:8px; color:var(--text-dim);}
.icon-btn:hover{color:var(--text); background:var(--panel-2);}
.open-sidebar, .close-sidebar{display:none;}

.messages{flex:1; overflow-y:auto; padding:32px 24px; display:flex; flex-direction:column; gap:22px;}
.messages > *{width:100%; max-width:760px; margin:0 auto;}

.welcome{margin:auto; text-align:center; padding:40px 0;}
.welcome h2{font-family:var(--serif); font-size:clamp(26px,4vw,36px); font-weight:600; margin-bottom:12px;}
.welcome p{color:var(--text-dim); max-width:460px; margin:0 auto;}

.msg{display:flex;}
.msg.user{justify-content:flex-end;}
.msg .body{font-size:15.5px; overflow-wrap:anywhere;}
.msg.user .body{background:var(--user-bubble); padding:12px 16px; border-radius:16px 16px 4px 16px; max-width:85%; white-space:pre-wrap;}
.msg.assistant{flex-direction:column;}
.msg.assistant .body{max-width:100%;}
.msg.assistant .body p + p, .msg.assistant .body p + ul, .msg.assistant .body p + ol,
.msg.assistant .body ul + p, .msg.assistant .body ol + p, .msg.assistant .body h3{margin-top:12px;}
.msg.assistant .body ul, .msg.assistant .body ol{padding-left:22px;}
.msg.assistant .body li + li{margin-top:4px;}
.msg.assistant .body h3{font-family:var(--serif); font-size:17px;}
.msg.assistant .body code{background:var(--panel-2); padding:1px 6px; border-radius:4px; font-size:.9em;}
.msg.assistant .body .cite{color:var(--accent); font-size:.72em; font-weight:600; margin-left:1px;}
.msg.error .body{color:var(--danger);}

.typing::after{
  content:""; display:inline-block; width:8px; height:16px; background:var(--accent);
  vertical-align:-3px; margin-left:2px; animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0;}}

.sources{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px;}
.source{
  font-size:12px; color:var(--text-dim); border:1px solid var(--border); background:var(--panel);
  padding:5px 10px; border-radius:999px;
}
.source b{color:var(--accent); font-weight:600; margin-right:4px;}

/* Composer */
.composer{
  display:flex; align-items:flex-end; gap:10px;
  width:100%; max-width:808px; margin:0 auto; padding:14px 24px calc(20px + env(safe-area-inset-bottom));
}
.composer textarea{
  flex:1; resize:none; max-height:200px; overflow-y:hidden; padding:13px 16px; border-radius:14px;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font:inherit; font-size:15.5px; line-height:1.5; outline:none; transition:border-color .15s;
}
.composer textarea:focus{border-color:var(--accent);}
.composer textarea::placeholder{color:var(--text-dim);}
.composer button{
  flex-shrink:0; width:46px; height:46px; border-radius:12px;
  background:var(--accent); color:#1a1408; display:grid; place-items:center; transition:opacity .15s;
}
.composer button:disabled{opacity:.4; cursor:not-allowed;}

.backdrop{display:none;}

@media (max-width:800px){
  .app{grid-template-columns:1fr;}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:min(300px, 85vw); z-index:20;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  .sidebar.open{transform:none;}
  .backdrop.open{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10;}
  .open-sidebar, .close-sidebar{display:inline-block;}
  .chat-head{padding:12px 16px;}
  .messages{padding:24px 16px;}
  .composer{padding:12px 16px calc(16px + env(safe-area-inset-bottom));}
}