/* ═══════════════════════════════════════════════════
   AI SYMPHONY — Styles
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* ── Theme Variables ── */
:root,
[data-theme="dark"] {
  --bg-primary: #0B0D13;
  --bg-secondary: #12141C;
  --bg-tertiary: #1A1D28;
  --bg-hover: #222536;
  --border: #2A2D3E;
  --border-light: #1F2233;
  --text-primary: #E8E8ED;
  --text-secondary: #8B8D9E;
  --text-tertiary: #5A5C6E;
  --gold: #C9A84C;
  --gold-soft: rgba(201,168,76,0.12);
  --gold-hover: #E0BF5A;
  --danger: #EF4444;
  --success: #10B981;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.6);
}

[data-theme="light"] {
  --bg-primary: #F7F6F3;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EFEEEB;
  --bg-hover: #E8E7E4;
  --border: #DEDDD8;
  --border-light: #EEEDE8;
  --text-primary: #1A1A2E;
  --text-secondary: #6B6B7B;
  --text-tertiary: #9B9BA8;
  --gold: #B8982E;
  --gold-soft: rgba(184,152,46,0.1);
  --gold-hover: #D4AE3A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Heebo', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app { width: 100vw; height: 100vh; height: 100dvh; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════
   SPLASH SCREEN
   ══════════════════════════ */
.splash {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #0B0D13;
}
.splash-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem; font-weight: 600;
  color: #C9A84C; letter-spacing: 0.08em;
  opacity: 0; animation: fadeUp 0.8s ease-out 0.3s forwards;
}
.splash-wave {
  width: 120px; height: 30px; margin-top: 24px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; animation: fadeUp 0.6s ease-out 0.9s forwards;
}
.splash-wave span {
  width: 3px; border-radius: 2px; background: #C9A84C;
  animation: waveBar 1.2s ease-in-out infinite;
}
.splash-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.splash-wave span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.splash-wave span:nth-child(3) { height: 24px; animation-delay: 0.2s; }
.splash-wave span:nth-child(4) { height: 16px; animation-delay: 0.3s; }
.splash-wave span:nth-child(5) { height: 8px; animation-delay: 0.4s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes waveBar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.8); }
}

/* ══════════════════════════
   AUTH SCREEN
   ══════════════════════════ */
.auth-screen {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg-primary); padding: 24px;
}
.auth-card {
  text-align: center; max-width: 380px; width: 100%;
  animation: fadeUp 0.6s ease-out;
}
.auth-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem; font-weight: 600;
  color: var(--gold); margin-bottom: 8px;
}
.auth-emoji { font-size: 2.5rem; margin-bottom: 16px; }
.auth-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem; line-height: 1.7;
  margin-bottom: 40px; font-weight: 300;
}
.auth-btn {
  width: 100%; padding: 16px 24px;
  background: var(--gold); color: #0B0D13; border: none;
  border-radius: 12px;
  font-family: 'Heebo'; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-btn:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.auth-sub { margin-top: 16px; font-size: 0.82rem; color: var(--text-tertiary); }

/* ══════════════════════════
   ONBOARDING
   ══════════════════════════ */
.onboard-overlay {
  width: 100%; height: 100%;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.onboard-card {
  max-width: 420px; width: 100%; text-align: center;
  animation: fadeUp 0.5s ease-out;
}
.onboard-emoji { font-size: 3.5rem; margin-bottom: 20px; display: block; }
.onboard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem; font-weight: 600;
  color: var(--gold); margin-bottom: 12px;
}
.onboard-text {
  color: var(--text-secondary);
  font-size: 0.95rem; line-height: 1.8;
  margin-bottom: 36px; font-weight: 300;
}
.onboard-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.onboard-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: all 0.3s;
}
.onboard-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }
.onboard-actions { display: flex; gap: 12px; justify-content: center; }
.onboard-skip {
  padding: 12px 24px; background: transparent;
  border: 1px solid var(--border); border-radius: 12px;
  color: var(--text-secondary);
  font-family: 'Heebo'; font-size: 0.9rem;
  cursor: pointer; transition: all 0.2s;
}
.onboard-skip:hover { border-color: var(--text-tertiary); }
.onboard-next {
  padding: 12px 32px; background: var(--gold);
  border: none; border-radius: 12px;
  color: #0B0D13; font-family: 'Heebo';
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.onboard-next:hover { background: var(--gold-hover); }

/* ══════════════════════════
   MAIN LAYOUT
   ══════════════════════════ */
.main-layout {
  display: flex; height: 100vh; height: 100dvh;
  background: var(--bg-primary);
}

/* ── Sidebar ── */
.sidebar {
  width: 280px; min-width: 280px;
  background: var(--bg-secondary);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease;
}
[dir="rtl"] .sidebar { border-left: 1px solid var(--border-light); }
[dir="ltr"] .sidebar { border-right: 1px solid var(--border-light); }

.sidebar-header {
  padding: 20px 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600; color: var(--gold);
}
.new-chat-btn {
  width: 36px; height: 36px;
  background: var(--gold-soft); border: none;
  border-radius: 8px; color: var(--gold);
  font-size: 1.2rem; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.new-chat-btn:hover { background: var(--gold); color: #0B0D13; }

.sidebar-list { flex: 1; overflow-y: auto; padding: 4px 8px; }

.empty-sidebar {
  padding: 24px 16px; text-align: center;
  color: var(--text-tertiary); font-size: 0.85rem;
}

.chat-item {
  padding: 12px; margin-bottom: 2px;
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active { background: var(--gold-soft); }
.chat-item-title {
  font-size: 0.88rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-meta {
  font-size: 0.75rem; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
}
.chat-item-models { display: flex; gap: 2px; }
.chat-item-dot { width: 6px; height: 6px; border-radius: 50%; }
.chat-item-delete {
  position: absolute; top: 8px;
  width: 24px; height: 24px;
  background: transparent; border: none;
  color: var(--text-tertiary); font-size: 0.8rem;
  cursor: pointer; opacity: 0; transition: opacity 0.2s;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
[dir="rtl"] .chat-item-delete { left: 8px; }
[dir="ltr"] .chat-item-delete { right: 8px; }
.chat-item:hover .chat-item-delete { opacity: 1; }
.chat-item-delete:hover { color: var(--danger); }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  display: flex; gap: 8px;
}
.sidebar-footer-btn {
  flex: 1; padding: 10px 12px;
  background: transparent; border: 1px solid var(--border-light);
  border-radius: 8px; color: var(--text-secondary);
  font-family: 'Heebo'; font-size: 0.8rem;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sidebar-footer-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Chat Area ── */
.chat-area {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0;
}

/* ── Model Bar ── */
.model-bar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; flex-shrink: 0;
  background: var(--bg-secondary);
  -ms-overflow-style: none; scrollbar-width: none;
}
.model-bar::-webkit-scrollbar { display: none; }

.menu-btn {
  display: none;
  width: 36px; height: 36px;
  background: transparent; border: none;
  color: var(--text-secondary);
  border-radius: 8px; font-size: 1.2rem;
  cursor: pointer; flex-shrink: 0;
  align-items: center; justify-content: center;
}
.menu-btn:hover { background: var(--bg-hover); }

.model-chips { display: flex; gap: 8px; flex-wrap: nowrap; }

.model-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.82rem; font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  transition: all 0.2s;
}
.model-chip:hover { border-color: var(--text-tertiary); }
.model-chip-color { width: 8px; height: 8px; border-radius: 50%; }
.model-chip-remove {
  width: 16px; height: 16px;
  background: transparent; border: none;
  color: var(--text-tertiary); font-size: 0.7rem;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.model-chip-remove:hover { background: var(--danger); color: white; }

.add-model-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 20px;
  border: 1px dashed var(--border);
  background: transparent; color: var(--gold);
  font-family: 'Heebo'; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.add-model-btn:hover { border-color: var(--gold); background: var(--gold-soft); }

/* ── Messages ── */
.messages-area {
  flex: 1; overflow-y: auto;
  padding: 20px; display: flex;
  flex-direction: column; gap: 16px;
}
.empty-chat {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-tertiary); text-align: center; padding: 40px;
}
.empty-chat-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; }
.empty-chat-text { font-size: 0.95rem; line-height: 1.6; max-width: 300px; }

.msg-row { display: flex; flex-direction: column; animation: fadeUp 0.3s ease-out; }
.user-row { align-items: flex-end; }
[dir="rtl"] .user-row { align-items: flex-start; }
.ai-row { align-items: flex-start; }
[dir="rtl"] .ai-row { align-items: flex-end; }

.msg-bubble {
  max-width: 75%; padding: 12px 16px;
  border-radius: 20px;
  font-size: 0.9rem; line-height: 1.7;
  word-wrap: break-word;
}
.msg-bubble.user {
  background: var(--gold); color: #0B0D13;
}
.msg-bubble.ai {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}
[dir="ltr"] .msg-bubble.ai { border-left: 3px solid var(--model-color, var(--border)); }
[dir="rtl"] .msg-bubble.ai { border-right: 3px solid var(--model-color, var(--border)); }

.msg-model-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 0.78rem; font-weight: 600;
}
.msg-model-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}
.msg-model-name { font-weight: 600; }

.msg-actions {
  display: flex; gap: 4px; margin-top: 8px;
  opacity: 0; transition: opacity 0.2s;
}
.msg-row:hover .msg-actions { opacity: 1; }
.msg-action-btn {
  padding: 4px 10px; background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 6px; color: var(--text-tertiary);
  font-size: 0.72rem; font-family: 'Heebo';
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 4px;
}
.msg-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.msg-time { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 4px; padding: 0 4px; }

.msg-text { white-space: pre-wrap; }
.code-block {
  background: var(--bg-primary); padding: 12px;
  border-radius: 8px; margin: 8px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem; overflow-x: auto;
  direction: ltr; text-align: left;
}
.inline-code {
  background: var(--bg-primary); padding: 2px 6px;
  border-radius: 4px; font-family: 'Courier New', monospace;
  font-size: 0.82rem;
}

.thinking-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 0.85rem; color: var(--text-secondary);
}
.thinking-dots { display: flex; gap: 3px; }
.thinking-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: thinkBounce 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.filtered-notice {
  text-align: center; padding: 8px 16px;
  font-size: 0.78rem; color: var(--text-tertiary);
  cursor: pointer; transition: color 0.15s;
}
.filtered-notice:hover { color: var(--text-secondary); }

/* ── Input Area ── */
.input-area {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border-light);
}
.input-wrapper {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 8px 12px;
  transition: border-color 0.2s;
}
.input-wrapper:focus-within { border-color: var(--gold); }
.input-field {
  flex: 1; border: none; outline: none;
  background: transparent; color: var(--text-primary);
  font-family: 'Heebo'; font-size: 0.9rem;
  line-height: 1.6; resize: none;
  min-height: 24px; max-height: 120px;
}
.input-field::placeholder { color: var(--text-tertiary); }
.input-btns { display: flex; gap: 4px; align-items: center; }
.input-icon-btn {
  width: 34px; height: 34px;
  background: transparent; border: none;
  color: var(--text-tertiary);
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.input-icon-btn:hover { color: var(--gold); background: var(--gold-soft); }
.send-btn {
  width: 34px; height: 34px;
  background: var(--gold); border: none;
  border-radius: 8px; color: #0B0D13;
  font-size: 1rem; cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:hover { background: var(--gold-hover); }
.send-btn:disabled { opacity: 0.3; cursor: default; }
.char-counter {
  font-size: 0.7rem; color: var(--text-tertiary);
  padding: 4px 4px 0;
}
[dir="rtl"] .char-counter { text-align: left; }
[dir="ltr"] .char-counter { text-align: right; }
.char-counter.warn { color: var(--danger); }

.file-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px; border: 1px solid var(--border);
  font-size: 0.82rem;
}
.file-preview-name { flex: 1; color: var(--text-primary); }
.file-preview-remove {
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer; font-size: 0.9rem;
}
.file-preview-remove:hover { color: var(--danger); }

/* ══════════════════════════
   MODALS
   ══════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%; max-width: 520px;
  max-height: 80vh;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: modalSlide 0.3s ease-out; overflow: hidden;
}
@keyframes modalSlide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  padding: 20px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.modal-title { font-size: 1.1rem; font-weight: 600; }
.modal-close {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--text-tertiary); border-radius: 8px;
  cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

.search-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
  font-family: 'Heebo'; font-size: 0.85rem; outline: none;
}
.search-input:focus { border-color: var(--gold); }

.provider-section { margin-bottom: 20px; }
.provider-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 0.85rem; font-weight: 600;
  color: var(--text-secondary);
}
.provider-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}

.model-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 4px;
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.model-option:hover { background: var(--bg-hover); border-color: var(--border); }
.model-option.selected { background: var(--gold-soft); border-color: var(--gold); }
.model-option-info { display: flex; flex-direction: column; gap: 2px; }
.model-option-name { font-size: 0.88rem; font-weight: 500; }
.model-option-tags { display: flex; gap: 4px; }
.model-tag {
  font-size: 0.68rem; padding: 2px 8px;
  border-radius: 10px; font-weight: 500;
}
.model-tag.free { background: rgba(16,185,129,0.12); color: #10B981; }
.model-tag.fast { background: rgba(59,130,246,0.12); color: #3B82F6; }
.model-tag.strong { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.model-tag.code { background: rgba(249,115,22,0.12); color: #F97316; }

.role-config {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-tertiary);
}
.role-label {
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 8px;
}
.role-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.role-chip {
  padding: 6px 14px; border-radius: 16px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary);
  font-family: 'Heebo'; font-size: 0.78rem;
  cursor: pointer; transition: all 0.15s;
}
.role-chip:hover { border-color: var(--text-tertiary); }
.role-chip.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

.role-custom-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
  font-family: 'Heebo'; font-size: 0.85rem;
  outline: none; margin-top: 8px;
}
.role-custom-input:focus { border-color: var(--gold); }

.when-responds-select {
  width: 100%; padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
  font-family: 'Heebo'; font-size: 0.85rem;
  outline: none; cursor: pointer; appearance: none;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  display: flex; gap: 10px; justify-content: flex-end;
}
.modal-footer-btn {
  padding: 10px 24px; border-radius: 8px;
  font-family: 'Heebo'; font-size: 0.88rem;
  font-weight: 500; cursor: pointer;
  transition: all 0.15s; border: none;
}
.btn-cancel {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-cancel:hover { background: var(--bg-hover); }
.btn-primary { background: var(--gold); color: #0B0D13; }
.btn-primary:hover { background: var(--gold-hover); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

/* ── Settings ── */
.settings-section { margin-bottom: 24px; }
.settings-section-title {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-row:last-child { border-bottom: none; }
.settings-label {
  font-size: 0.9rem;
  display: flex; align-items: center; gap: 8px;
}
.toggle {
  width: 44px; height: 24px;
  background: var(--border);
  border-radius: 12px; border: none;
  cursor: pointer; position: relative;
  transition: background 0.2s;
}
.toggle.on { background: var(--gold); }
.toggle::after {
  content: ''; width: 18px; height: 18px;
  background: white; border-radius: 50%;
  position: absolute; top: 3px;
  transition: transform 0.2s;
}
[dir="ltr"] .toggle::after { left: 3px; }
[dir="rtl"] .toggle::after { right: 3px; }
[dir="ltr"] .toggle.on::after { transform: translateX(20px); }
[dir="rtl"] .toggle.on::after { transform: translateX(-20px); }

.lang-select {
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
  font-family: 'Heebo'; font-size: 0.85rem;
  cursor: pointer; outline: none;
}

.settings-danger-btn {
  width: 100%; padding: 12px;
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 8px; color: var(--danger);
  font-family: 'Heebo'; font-size: 0.88rem;
  cursor: pointer; transition: all 0.15s;
}
.settings-danger-btn:hover { background: rgba(239,68,68,0.08); }

/* ── Notifications ── */
.ios-install-hint {
  position: fixed; bottom: 20px; left: 20px; right: 20px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-primary);
  box-shadow: var(--shadow-lg); z-index: 60;
  animation: fadeUp 0.3s ease-out;
}
.ios-install-hint button {
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer; font-size: 1rem;
}

.update-notification {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #0B0D13;
  border-radius: 12px; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.85rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 60;
  animation: fadeUp 0.3s ease-out;
}
.update-notification button {
  background: rgba(0,0,0,0.15); border: none;
  color: #0B0D13; padding: 6px 14px;
  border-radius: 6px; cursor: pointer;
  font-family: 'Heebo'; font-size: 0.8rem; font-weight: 600;
}

.offline-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--danger); color: white;
  text-align: center; padding: 8px;
  font-size: 0.82rem; font-weight: 500;
  z-index: 60;
}

/* ══════════════════════════
   RESPONSIVE
   ══════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed; inset: 0; z-index: 40;
    width: 100%; border: none;
  }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0) !important; }
  .menu-btn { display: flex; }
  .model-bar { padding: 10px 12px; }
  .messages-area { padding: 12px; }
  .input-area { padding: 8px 12px 12px; }
  .msg-bubble { max-width: 88%; }
  .modal-content { max-width: 100%; margin: 0 8px; border-radius: 16px; }
}

/* ══════════════════════════
   FIX #5: Auth language switch
   ══════════════════════════ */
.auth-lang-switch {
  position: absolute; top: 20px; right: 20px;
}
.auth-lang-select {
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: 'Heebo', sans-serif; font-size: 0.85rem;
  cursor: pointer; outline: none;
  appearance: auto;
}
.lang-switch-btn {
  padding: 6px 14px; border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: 'Heebo', sans-serif; font-size: 0.8rem;
  cursor: pointer; transition: all 0.2s;
}
.lang-switch-btn.active {
  background: var(--gold); color: #0B0D13; font-weight: 600;
}

/* ══════════════════════════
   FIX #3: Provider cards
   ══════════════════════════ */
.provider-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 6px;
  border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-light);
  transition: all 0.15s;
}
.provider-card:hover { background: var(--bg-hover); border-color: var(--border); }
.provider-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.provider-card-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.provider-card-name { font-size: 0.95rem; font-weight: 600; }
.provider-card-count { font-size: 0.78rem; color: var(--text-tertiary); }
.provider-card-arrow { color: var(--text-tertiary); font-size: 1.2rem; }
.all-models-card { border-style: dashed; }
.all-models-card:hover { border-color: var(--gold); }

.modal-back {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--text-secondary); border-radius: 8px;
  cursor: pointer; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.modal-back:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ══════════════════════════
   FIX #2: Save role checkbox
   ══════════════════════════ */
.save-role-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--text-secondary);
  margin-top: 10px; cursor: pointer;
}
.save-role-label input[type="checkbox"] {
  accent-color: var(--gold);
}

/* ══════════════════════════
   FIX #6: @ Mention dropdown
   ══════════════════════════ */
.mention-dropdown {
  position: absolute; bottom: 100%; left: 12px; right: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 200px; overflow-y: auto;
  z-index: 30;
  animation: modalSlide 0.15s ease-out;
}
[dir="rtl"] .mention-dropdown { left: 12px; right: 12px; }
.mention-item {
  padding: 10px 14px;
  cursor: pointer; transition: background 0.1s;
  font-size: 0.88rem;
  display: flex; align-items: center; gap: 8px;
}
.mention-item:hover { background: var(--bg-hover); }
.mention-item:first-child { border-radius: 12px 12px 0 0; }
.mention-item:last-child { border-radius: 0 0 12px 12px; }
.mention-item:only-child { border-radius: 12px; }

/* Position input-area as relative for dropdown */
.input-area { position: relative; }

/* ══════════════════════════
   FIX #9: Install button
   ══════════════════════════ */
.install-app-btn {
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
  font-family: 'Heebo'; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.install-app-btn:hover { background: var(--gold); color: #0B0D13; }

/* ══════════════════════════
   FILE & IMAGE STYLES
   ══════════════════════════ */
.generated-image {
  max-width: 100%; border-radius: 12px;
  margin-top: 8px; cursor: pointer;
  transition: transform 0.2s;
}
.generated-image:hover { transform: scale(1.02); }

.file-processing {
  font-size: 0.85rem; margin-inline-start: 4px;
}
.file-warning {
  display: block; margin-top: 6px;
  font-size: 0.72rem; color: var(--danger);
}
.file-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px; border: 1px solid var(--border);
  font-size: 0.82rem;
}