/* ─────────────────────────────────────────────────────
   HomecChat – Dark Theme Design System
   ───────────────────────────────────────────────────── */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg-deep:     #0d0d0d;
  --bg-sidebar:  #141414;
  --bg-card:     #1a1a1a;
  --bg-input:    #1e1e1e;
  --bg-hover:    rgba(255,255,255,.05);
  --bg-msg-user: #1d2a3a;
  --border:      rgba(255,255,255,.1);
  --border-subtle: rgba(255,255,255,.05);
  --text-primary:   #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted:     #666;
  --accent:      #4f8ef7;
  --accent-hover:#3d7de4;
  --accent-dim:  rgba(79,142,247,.15);
  --green:  #3ecf8e;
  --yellow: #f5a623;
  --red:    #e5534b;
  --vh: 1vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow-x:hidden; overflow-y:auto; }
body {
  font-family:var(--font);
  background:var(--bg-deep);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}

/* ─── App Layout ─────────────────────────────────── */
.app-body {
  display:grid;
  min-height: calc(var(--vh, 1vh) * 100);
  grid-template-columns: 260px 1fr 280px;
  grid-template-rows: calc(var(--vh, 1vh) * 100);
  overflow:hidden;
  padding-bottom: calc(56px + var(--safe-bottom));
}
@media(max-width:1100px){
  .app-body { grid-template-columns: 240px 1fr; }
  #sidebarRight { position:fixed; right:0; top:0; height:100vh; z-index:100; transform:translateX(100%); transition:transform .3s; width:300px; }
  #sidebarRight.open { transform:translateX(0); }
}
@media(max-width:700px){
  .app-body { grid-template-columns: 1fr; }
  #sidebarLeft { position:fixed; left:0; top:0; height:100vh; z-index:100; transform:translateX(-100%); transition:transform .3s; width:280px; }
  #sidebarLeft.open { transform:translateX(0); }
}

/* Backdrop overlay for mobile sidebars */
.sidebar-backdrop {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:99;
}
.sidebar-backdrop.show { display:block; }

/* Mobile models button — hidden on desktop, shown on tablet/phone */
.mobile-models-btn {
  display:none !important;
  align-items:center;
  gap:5px;
  font-size:.82rem;
  white-space:nowrap;
  padding:6px 10px !important;
  border-radius:8px;
  background:var(--bg-card) !important;
  border:1px solid var(--border) !important;
  color:var(--text-primary) !important;
}
.mobile-models-btn:hover { background:var(--accent-dim) !important; border-color:var(--accent) !important; }
@media(max-width:1100px){
  .mobile-models-btn { display:inline-flex !important; }
}

/* ─── Sidebar Base ───────────────────────────────── */
.sidebar-left, .sidebar-right {
  background:var(--bg-sidebar);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--border);
  overflow:hidden;
}
.sidebar-right { border-right:none; border-left:1px solid var(--border); }
.sidebar-header {
  padding:16px 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.section-title { font-size:.95rem; font-weight:600; color:var(--text-secondary); }

/* Brand */
.app-brand { display:flex; align-items:center; gap:8px; }
.brand-icon { font-size:20px; }
.brand-name { font-size:1rem; font-weight:700; color:var(--text-primary); }

/* Buttons */
.icon-btn {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:6px; border-radius:6px; font-size:16px;
  transition:color .15s, background .15s; line-height:1;
}
.icon-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.icon-btn-sm {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:2px 5px; border-radius:4px; font-size:14px;
  transition:color .15s;
}
.icon-btn-sm:hover { color:var(--text-primary); }

/* ─── Left Sidebar ───────────────────────────────── */
.sidebar-actions {
  padding:12px 10px 8px;
  display:flex; gap:8px;
  flex-shrink:0;
}
.btn-new-chat {
  flex:1; padding:9px 10px; border-radius:8px;
  background:var(--accent); color:#fff; border:none;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:background .2s;
}
.btn-new-chat:hover { background:var(--accent-hover); }
.btn-temp-chat {
  padding:9px 10px; border-radius:8px;
  background:var(--bg-card); color:var(--text-secondary);
  border:1px solid var(--border); font-size:.82rem; cursor:pointer;
  white-space:nowrap; transition:border-color .15s;
}
.btn-temp-chat:hover { border-color:var(--accent); color:var(--text-primary); }

.search-wrap { padding:8px 10px 4px; flex-shrink:0; }
.search-input {
  width:100%; padding:8px 12px; border-radius:8px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text-primary); font-size:.85rem;
  outline:none; transition:border-color .2s;
}
.search-input:focus { border-color:var(--accent); }

.sidebar-section { display:flex; flex-direction:column; min-height:0; }
.sidebar-section.flex-grow { flex:1; overflow:hidden; }
.section-header {
  padding:10px 12px 6px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); flex-shrink:0;
}

/* Projects */
.projects-list { padding:0 8px 4px; overflow-y:auto; max-height:180px; }
.project-item {
  padding:7px 10px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-size:.86rem; color:var(--text-secondary);
  transition:background .15s, color .15s;
}
.project-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.project-item.active { background:var(--accent-dim); color:var(--accent); }
.project-item .proj-icon { font-size:14px; }

/* Chat list */
.chat-list {
  flex:1; overflow-y:auto; padding:0 6px 8px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.chat-list::-webkit-scrollbar { width:4px; }
.chat-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.chat-group-label {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted);
  padding:10px 8px 4px;
}
.chat-item {
  padding:8px 10px; border-radius:8px; cursor:pointer;
  display:flex; align-items:flex-start; gap:6px;
  position:relative; transition:background .15s;
  margin-bottom:1px;
}
.chat-item:hover { background:var(--bg-hover); }
.chat-item.active { background:var(--bg-card); }
.chat-item .chat-icon { font-size:13px; margin-top:2px; flex-shrink:0; }
.chat-item-body { flex:1; min-width:0; }
.chat-item-title { font-size:.88rem; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-meta  { font-size:.72rem; color:var(--text-muted); margin-top:2px; }
.chat-item-badge {
  font-size:.7rem; padding:1px 6px; border-radius:10px;
  background:rgba(245,166,35,.15); color:var(--yellow);
  flex-shrink:0; margin-top:2px;
}
.chat-item-del {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:3px 5px; border-radius:4px;
  font-size:13px; opacity:0; transition:opacity .15s;
}
.chat-item:hover .chat-item-del { opacity:1; }
.chat-item-del:hover { color:var(--red); }

/* Sidebar footer */
.sidebar-footer {
  padding:12px 10px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.page-footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:14px 16px calc(14px + var(--safe-bottom));
  background:var(--bg-sidebar);
  border-top:1px solid var(--border);
  color:var(--text-muted);
  text-align:center;
  font-size:.88rem;
  z-index:50;
}
.page-footer a {
  color:var(--text-muted);
  text-decoration:none;
}
.page-footer a:hover {
  color:var(--text-primary);
}
.user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; flex-shrink:0;
}
.user-details { flex:1; min-width:0; }
.user-name { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-sub  { font-size:.73rem; color:var(--text-muted); }

/* ─── Chat Main ──────────────────────────────────── */
.chat-main {
  display:flex; flex-direction:column;
  background:var(--bg-deep);
  overflow:hidden; position:relative;
}

/* Top bar */
.chat-topbar {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; background:var(--bg-deep);
}
.chat-title-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.chat-title { font-size:1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-badge {
  font-size:.7rem; padding:2px 8px; border-radius:10px;
  background:rgba(245,166,35,.15); color:var(--yellow); flex-shrink:0;
}
.topbar-actions { display:flex; gap:4px; }
#mobileMenuBtn { display:none; }
@media(max-width:700px){ #mobileMenuBtn{ display:flex; } }

/* Welcome screen */
.welcome-screen {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 20px; text-align:center;
}
.welcome-icon { font-size:56px; margin-bottom:16px; }
.welcome-screen h2 { font-size:1.6rem; font-weight:700; margin-bottom:8px; }
.welcome-screen p  { color:var(--text-secondary); max-width:440px; margin-bottom:24px; }
.welcome-tips { display:flex; flex-direction:column; gap:10px; max-width:400px; width:100%; }
.tip { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px 16px; font-size:.88rem; color:var(--text-secondary); text-align:left; }
.tip.tip-action { cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.tip.tip-action:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* Messages */
.messages-area {
  flex:1; overflow-y:auto; padding:16px 12px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.messages-area::-webkit-scrollbar { width:5px; }
.messages-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
.messages-inner { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* Message bubbles */
.msg-wrap { display:flex; flex-direction:column; gap:4px; }
.msg-wrap.user { align-items:flex-end; }
.msg-wrap.assistant { align-items:flex-start; }
.msg-meta { font-size:.72rem; color:var(--text-muted); padding:0 4px; }
.msg-bubble {
  max-width:80%; padding:12px 16px; border-radius:16px;
  line-height:1.65; font-size:.93rem; word-break:break-word;
  white-space:pre-wrap;
}
.msg-wrap.user     .msg-bubble { background:var(--bg-msg-user); border-radius:16px 16px 4px 16px; color:var(--text-primary); }
.msg-wrap.assistant .msg-bubble { background:var(--bg-card); border:1px solid var(--border); border-radius:16px 16px 16px 4px; }
.msg-bubble code {
  background:rgba(0,0,0,.3); padding:2px 6px; border-radius:4px;
  font-family:'Courier New',monospace; font-size:.85em;
}
.msg-bubble pre {
  background:rgba(0,0,0,.4); padding:14px; border-radius:8px;
  overflow-x:auto; margin:8px 0; font-size:.85rem;
}
.msg-bubble pre code { background:none; padding:0; }
.typing-cursor { display:inline-block; width:8px; height:14px; background:var(--accent); animation:blink 0.8s infinite; border-radius:1px; margin-left:2px; vertical-align:middle; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.error-bubble { background:rgba(229,83,75,.12); border:1px solid rgba(229,83,75,.3); color:#ff8a80; border-radius:10px; padding:10px 14px; font-size:.88rem; }

/* Input area */
.input-area {
  padding:12px 16px calc(14px + var(--safe-bottom));
  border-top:1px solid var(--border);
  background:var(--bg-deep);
  flex-shrink:0;
}
.upload-preview { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.upload-chip {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; font-size:.8rem;
  display:flex; align-items:center; gap:6px; color:var(--text-secondary);
}
.upload-chip button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; padding:0; line-height:1; }
.upload-chip button:hover { color:var(--red); }
.input-row { display:flex; align-items:flex-end; gap:8px; }
.textarea-wrap { flex:1; position:relative; }
textarea {
  width:100%; padding:11px 14px; border-radius:12px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text-primary); font-size:.93rem; font-family:var(--font);
  resize:none; outline:none; transition:border-color .2s;
  max-height:200px; overflow-y:auto; line-height:1.5;
}
textarea:focus { border-color:var(--accent); }
textarea::placeholder { color:var(--text-muted); }
.send-btn {
  width:40px; height:40px; border-radius:10px;
  background:var(--accent); color:#fff; border:none;
  cursor:pointer; font-size:1rem; display:flex;
  align-items:center; justify-content:center;
  transition:background .2s, opacity .2s;
  flex-shrink:0;
}
.send-btn:disabled { opacity:.4; cursor:default; }
.send-btn:not(:disabled):hover { background:var(--accent-hover); }
.attach-btn { font-size:18px; padding:8px; }
.input-hint { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--text-muted); margin-top:6px; padding:0 2px; }

/* ─── Right Sidebar (Models) ─────────────────────── */
.model-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.tab-btn {
  flex:1; padding:10px 6px; background:none; border:none;
  color:var(--text-muted); font-size:.83rem; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; flex-direction:column; flex:1; overflow:hidden; }
.tab-panel.active { display:flex; }
.tab-search { padding:8px 10px 4px; flex-shrink:0; }
.avail-legend { padding:4px 10px 8px; font-size:.75rem; color:var(--text-muted); flex-shrink:0; }
.models-list {
  flex:1; overflow-y:auto; padding:4px 6px 8px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.models-list::-webkit-scrollbar { width:4px; }
.models-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

/* Model cards */
.model-card {
  padding:10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:border-color .15s, background .15s;
  margin-bottom:4px;
}
.model-card:hover { background:var(--bg-hover); border-color:var(--border); }
.model-card.selected { background:var(--accent-dim); border-color:var(--accent); }
.model-card .model-name { font-size:.88rem; font-weight:600; color:var(--text-primary); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-card .model-size { font-size:.75rem; color:var(--text-muted); }
.model-card .model-desc { font-size:.77rem; color:var(--text-secondary); margin-top:4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.model-card .badge { display:inline-block; font-size:.68rem; padding:2px 7px; border-radius:10px; font-weight:700; margin-top:5px; }
.badge.easy   { background:rgba(62,207,142,.15); color:var(--green); }
.badge.medium { background:rgba(245,166,35,.15);  color:var(--yellow); }
.badge.high   { background:rgba(229,83,75,.15);   color:var(--red); }
.avail-card .model-actions { margin-top:8px; }
.btn-download {
  padding:5px 12px; border-radius:6px; border:1px solid var(--border);
  background:none; color:var(--text-secondary); font-size:.78rem; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.btn-download:hover { border-color:var(--accent); color:var(--accent); }

/* ─── Modals ─────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; z-index:500;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:28px 32px; width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal h3 { font-size:1.1rem; font-weight:700; margin-bottom:16px; }
.modal-input {
  width:100%; padding:10px 13px; border-radius:8px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text-primary); font-size:.93rem; outline:none;
  transition:border-color .2s;
}
.modal-input:focus { border-color:var(--accent); }
.modal-actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }
.btn-primary {
  padding:9px 18px; border-radius:8px; background:var(--accent);
  color:#fff; border:none; font-size:.9rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary {
  padding:9px 18px; border-radius:8px;
  background:var(--bg-hover); color:var(--text-secondary);
  border:1px solid var(--border); font-size:.9rem; cursor:pointer;
  transition:background .15s;
}
.btn-secondary:hover { background:var(--bg-card); color:var(--text-primary); }
.btn-danger {
  padding:9px 18px; border-radius:8px;
  background:rgba(229,83,75,.15); color:var(--red);
  border:1px solid rgba(229,83,75,.3); font-size:.9rem; cursor:pointer;
  transition:background .15s;
}
.btn-danger:hover { background:rgba(229,83,75,.25); }

/* ─── Toast ──────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-primary); padding:10px 20px; border-radius:10px;
  font-size:.88rem; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transition:all .3s; z-index:1000; white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Loading ────────────────────────────────────── */
.loading-spinner { text-align:center; padding:24px; color:var(--text-muted); font-size:.88rem; }

/* ─── Form elements global ───────────────────────── */
.form-group { margin-bottom:16px; }
select.modal-input { appearance:auto; }