.chat-flex { display:flex; height:calc(100vh - var(--topbar-height)); margin:-16px; }
.chat-header { flex:none; display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:rgba(26,27,28,0.6); }
.chat-header h2 { margin:0; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.chat-header .sub { color:var(--muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch; }
.msg-row { display:flex; max-width:72%; position:relative; }
.msg-row:hover .msg-actions { opacity:1; }
.msg-row.user { align-self:flex-end; justify-content:flex-end; }
.msg-row.bot { align-self:flex-start; }
.msg-bubble { padding:10px 14px; border-radius:16px; line-height:1.5; font-size:.9rem; word-wrap:break-word; white-space:pre-wrap; }
.msg-row.user .msg-bubble { background:var(--accent); color:#101112; border-bottom-right-radius:4px; }
.msg-row.bot .msg-bubble { background:var(--surface-2); border-bottom-left-radius:4px; }
.msg-actions { position:absolute; top:-6px; right:-6px; display:flex; gap:2px; opacity:0; transition:opacity 120ms; z-index:2; }
.msg-actions button { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:.65rem; cursor:pointer; display:grid; place-items:center; padding:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.msg-actions button:hover { color:var(--text); background:var(--surface-2); }
.msg-row.user .msg-actions { right:auto; left:-6px; }
.chat-input-area { flex:none; display:flex; gap:8px; align-items:flex-end; padding:10px 14px; border-top:1px solid var(--border); background:rgba(26,27,28,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.chat-input-area textarea { flex:1; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text); font-family:inherit; font-size:.9rem; resize:none; outline:none; min-height:var(--touch-min); max-height:100px; transition:border-color 180ms; }
.chat-input-area textarea:focus { border-color:var(--accent); }
.chat-input-area textarea::placeholder { color:var(--muted); }
.chat-input-area .btn-primary { min-width:64px; }
.typing-indicator { display:flex; align-items:center; gap:4px; padding:10px 14px; }
.typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:typing 1.2s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay:.2s; }
.typing-indicator span:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,60%,100% { opacity:.3; transform:scale(1); } 30% { opacity:1; transform:scale(1.15); } }
.chat-name-input { background:transparent; border:none; border-bottom:1px solid transparent; color:var(--text); font:inherit; font-size:.9rem; font-weight:600; outline:none; padding:0; min-width:60px; max-width:200px; }
.chat-name-input:focus { border-bottom-color:var(--accent); }
.chats-sidebar { width:260px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; display:none; flex-direction:column; }
.chats-sidebar.open { display:flex; }
.chats-sidebar .chat-item { padding:12px 16px; min-height:var(--touch-min); border-bottom:1px solid var(--border); cursor:pointer; transition:background 120ms; font-size:.85rem; }
.chats-sidebar .chat-item:hover { background:var(--surface-2); }
.chats-sidebar .chat-item.active { background:var(--accent-glow); }
.chats-sidebar .chat-item .date { font-size:.72rem; color:var(--muted); margin-top:2px; }
.sidebar-state-message { padding:14px; color:var(--muted); font-size:.8rem; }
.edit-msg-input { width:100%; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:.85rem; padding:8px 10px; resize:none; outline:none; }
.edit-msg-input:focus { border-color:var(--accent); }
.edit-msg-actions { display:flex; gap:4px; margin-top:4px; }
.similar-panel { display:none; flex:none; border-bottom:1px solid var(--border); background:var(--surface); padding:12px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.similar-panel-inner { display:flex; gap:10px; }
.similar-card { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:72px; padding:8px; border-radius:var(--radius); border:1px solid var(--border); text-decoration:none; transition:background 120ms; }
.similar-card:hover { background:var(--surface-2); }
.similar-card-img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.similar-card-initial { width:40px; height:40px; border-radius:50%; background:var(--accent-glow); display:grid; place-items:center; font-size:.8rem; font-weight:600; }
.similar-card-label { font-size:.7rem; color:var(--text); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:64px; }
.chat-header-actions { display:flex; gap:6px; flex-shrink:0; }
.chat-header-actions .btn-sm { padding:4px 10px; font-size:.75rem; min-height:var(--touch-min); min-width:var(--touch-min); }
@media (max-width:768px) { .chat-flex { margin:-12px; } .msg-row { max-width:88%; } .chat-header { padding:8px 10px; gap:6px; } .chat-messages { padding:10px; gap:6px; } .chat-input-area { padding:8px 10px; gap:6px; } .chat-input-area textarea { font-size:.85rem; min-height:40px; max-height:80px; padding:8px 12px; } .msg-bubble { font-size:.85rem; padding:8px 12px; } .chat-header-actions .btn-sm { padding:4px 6px; font-size:.7rem; min-width:36px; } .chat-name-input { max-width:120px; font-size:.85rem; } .chats-sidebar { position:fixed; top:var(--topbar-height); left:0; bottom:0; width:280px; max-width:80vw; z-index:50; box-shadow:4px 0 20px rgba(0,0,0,0.4); border-right:1px solid var(--border); } #btnToggleChats { display:flex !important; } .chat-header h2 { font-size:.85rem; } .chat-header .sub { font-size:.7rem; } .similar-card { min-width:64px; } .similar-card-img, .similar-card-initial { width:36px; height:36px; } }
@media (max-width:480px) { .msg-row { max-width:92%; } .chat-messages { padding:8px; gap:4px; } .msg-bubble { font-size:.82rem; padding:8px 10px; border-radius:14px; } .chat-header { padding:6px 8px; } .chat-input-area { padding:6px 8px; } .chat-input-area textarea { font-size:.82rem; min-height:36px; max-height:72px; padding:6px 10px; } .msg-actions button { width:24px; height:24px; font-size:.6rem; } .chat-header-actions .btn-sm { min-width:32px; padding:3px 5px; font-size:.65rem; } }
@media (min-width:769px) { #btnToggleChats { display:none !important; } }
.chat-sidebar-header { padding:12px 14px; font-size:.8rem; font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; min-height:var(--touch-min); }
.chat-sidebar-header .btn { padding:2px 6px; font-size:.65rem; }
.chat-main-panel { flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-title-wrap { flex:1; min-width:0; }
.chat-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.demo-pill { font-size:.6rem; font-weight:400; background:var(--surface-2); padding:2px 8px; border-radius:999px; color:var(--muted); white-space:nowrap; }
.hidden { display:none; }
.chat-inline-error, .chat-static-error { margin:0 14px 8px; flex:none; }
.fallback-notice { justify-content:center; color:var(--muted); font-size:.8rem; }