.chat-layout { max-width: 1060px; margin: 0 auto; padding: 1.5rem 2rem 2rem; display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; height: calc(100vh - 120px); }

/* HISTORY PANEL */
.chat-history-panel { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--aged); border-radius: var(--radius-lg); background: white; }
.chat-history-header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--aged); display: flex; align-items: center; justify-content: space-between; }
.chat-history-title { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-gray); }
.new-chat-btn { background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-sm); padding: 0.3rem 0.7rem; font-size: 0.65rem; letter-spacing: 0.1em; transition: all var(--transition); }
.new-chat-btn:hover { background: var(--rust); }
.chat-list { flex: 1; overflow-y: auto; }
.chat-list::-webkit-scrollbar { width: 4px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--aged); border-radius: 2px; }

.chat-preview-item { padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--aged); cursor: pointer; transition: all var(--transition); position: relative; }
.chat-preview-item:hover { background: var(--paper); }
.chat-preview-item.active { background: linear-gradient(135deg,#fdf8f0,#f5ede0); border-right: 3px solid var(--rust); }
.chat-preview-title { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.chat-preview-snippet { font-size: 0.68rem; color: var(--warm-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview-time { font-size: 0.6rem; color: var(--mist); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.chat-preview-delete { position: absolute; top: 0.7rem; right: 0.7rem; background: none; border: none; color: var(--mist); font-size: 0.8rem; opacity: 0; transition: all var(--transition); padding: 0.2rem; }
.chat-preview-item:hover .chat-preview-delete { opacity: 1; }
.chat-preview-delete:hover { color: var(--rust); }
.rag-chip { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.58rem; color: var(--sage); background: #eafaf1; border-radius: 10px; padding: 0.1rem 0.4rem; }

/* CHAT MAIN */
.chat-main { display: flex; flex-direction: column; border: 1px solid var(--aged); border-radius: var(--radius-lg); background: white; overflow: hidden; }
.chat-main-header { padding: 1rem 1.4rem; border-bottom: 1px solid var(--aged); display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.chat-main-title { font-family: var(--font-serif); font-size: 1.05rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-rag-badge { font-size: 0.62rem; color: var(--sage); background: #eafaf1; border: 1px solid #c3e6cb; border-radius: var(--radius-full); padding: 0.2rem 0.6rem; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; flex-shrink: 0; }

/* MESSAGES */
.chat-messages { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--aged); border-radius: 2px; }

.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.ai   { align-self: flex-start; align-items: flex-start; }

.msg-bubble { padding: 0.8rem 1.1rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.65; white-space: pre-wrap; }
.msg.user .msg-bubble { background: var(--ink); color: var(--paper); border-bottom-right-radius: 3px; }
.msg.ai   .msg-bubble { background: var(--chat-ai); color: var(--ink); border-bottom-left-radius: 3px; font-family: var(--font-body); }

.msg-time { font-size: 0.58rem; color: var(--mist); margin-top: 0.25rem; padding: 0 0.3rem; }
.msg-rag-ctx { font-size: 0.62rem; color: var(--sage); background: #f0faf5; border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; margin-top: 0.25rem; border-left: 2px solid var(--sage); }

.typing-indicator { display: flex; gap: 4px; padding: 0.7rem 1rem; background: var(--chat-ai); border-radius: 12px; border-bottom-left-radius: 3px; width: fit-content; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-gray); animation: typingDot 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%,100% { opacity:0.3; transform:scale(0.8); } 50% { opacity:1; transform:scale(1); } }

.rag-searching { padding: 0.3rem 1.4rem 0; font-size: 0.65rem; color: var(--sage); display: flex; align-items: center; gap: 0.5rem; }
.rag-dot-anim span { display: inline-block; animation: ragDot 1s infinite; margin-right: 1px; }
.rag-dot-anim span:nth-child(2) { animation-delay: 0.15s; }
.rag-dot-anim span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ragDot { 0%,100% { opacity:0.3; } 50% { opacity:1; } }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.8rem 1rem; border-top: 1px solid var(--aged); }
.chat-suggestion { padding: 0.35rem 0.8rem; background: white; border: 1px solid var(--aged); border-radius: var(--radius-full); font-size: 0.7rem; color: var(--warm-gray); transition: all var(--transition); }
.chat-suggestion:hover { border-color: var(--rust); color: var(--rust); background: var(--paper); }

.chat-input-area { padding: 0.8rem 1rem; border-top: 1px solid var(--aged); display: flex; gap: 0.6rem; align-items: flex-end; }
.chat-textarea { flex: 1; background: var(--paper); border: 1px solid var(--aged); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-size: 0.82rem; color: var(--ink); resize: none; outline: none; min-height: 44px; max-height: 120px; transition: border-color var(--transition); line-height: 1.5; }
.chat-textarea:focus { border-color: var(--rust); }
.chat-send-btn { background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-md); padding: 0.7rem 1.1rem; font-size: 1rem; transition: all var(--transition); flex-shrink: 0; line-height: 1; }
.chat-send-btn:hover { background: var(--rust); }

.welcome-chat { text-align: center; padding: 2.5rem 2rem; color: var(--warm-gray); }
.welcome-chat-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
.welcome-chat-title { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--ink); }
.welcome-chat-sub { font-size: 0.8rem; line-height: 1.7; max-width: 360px; margin: 0 auto; font-style: italic; font-family: var(--font-body); }

@media (max-width: 700px) { .chat-layout { grid-template-columns: 1fr; height: auto; } .chat-history-panel { height: 180px; } .chat-main { height: 520px; } }