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

:root {
  --bg-primary: #0e0e18;
  --bg-secondary: #141420;
  --bg-tertiary: #1c1c2e;
  --bg-hover: #24243a;
  --bg-active: #2c2c48;
  --surface-border: rgba(180,170,220,0.08);
  --text-primary: #e0ddf0;
  --text-secondary: #9896b0;
  --text-muted: #5e5c78;
  --accent: #a78bfa;
  --accent-hover: #b9a0ff;
  --accent-glow: rgba(167,139,250,0.12);
  --pastel-rose: #f0a0b0;
  --pastel-mint: #80d8b8;
  --pastel-peach: #f0c090;
  --pastel-sky: #90c0f0;
  --pastel-lilac: #c0a0e0;
  --danger: #e87090;
  --success: #70d0a0;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --sidebar-width: 270px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-primary); color:var(--text-primary); height:100vh; overflow:hidden; line-height:1.6; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(167,139,250,0.2); border-radius:2px; }

#app { display:flex; height:100vh; }

svg.icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
svg.icon-sm { width:14px; height:14px; }
svg.icon-lg { width:22px; height:22px; }
svg.icon-xl { width:36px; height:36px; }

/* ── Auth ───────────────────────── */
.auth-screen { display:flex; align-items:center; justify-content:center; width:100%; height:100vh; background:radial-gradient(ellipse at 50% 30%,rgba(167,139,250,0.06),transparent 70%); }
.auth-card { background:var(--bg-secondary); border:1px solid var(--surface-border); border-radius:16px; padding:40px; width:400px; max-width:90vw; }
.auth-card h1 { font-size:22px; font-weight:600; margin-bottom:8px; color:var(--accent); display:flex; align-items:center; gap:8px; }
.auth-card p { color:var(--text-secondary); font-size:14px; margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:11px; color:var(--text-muted); margin-bottom:6px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.form-group input { width:100%; padding:10px 14px; background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; font-family:inherit; outline:none; transition:border-color var(--transition); }
.form-group input:focus { border-color:var(--accent); }
.btn-primary { width:100%; padding:12px; background:var(--accent); color:#0e0e18; border:none; border-radius:var(--radius-sm); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all var(--transition); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-icon { width:32px; height:32px; padding:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); border:none; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn-icon:hover { color:var(--text-primary); background:var(--bg-hover); }
.auth-toggle { text-align:center; margin-top:16px; font-size:13px; color:var(--text-muted); }
.auth-toggle a { color:var(--accent); cursor:pointer; text-decoration:none; }
.auth-error { color:var(--danger); font-size:13px; margin-bottom:12px; display:none; }

/* ── Sidebar ────────────────────── */
.sidebar { width:var(--sidebar-width); min-width:var(--sidebar-width); height:100vh; background:var(--bg-secondary); border-right:1px solid var(--surface-border); display:flex; flex-direction:column; }
.sidebar-header { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--surface-border); }
.sidebar-header h2 { font-size:15px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:6px; }
.new-chat-btn { padding:6px 12px; background:var(--accent); color:#0e0e18; border:none; border-radius:var(--radius-sm); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; gap:4px; }
.new-chat-btn:hover { background:var(--accent-hover); }

/* ── Characters ─────────────────── */
.characters-section { padding:10px 12px; border-bottom:1px solid var(--surface-border); }
.characters-section h3 { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; padding:0 4px; }
.char-grid { display:flex; flex-wrap:wrap; gap:6px; }
.char-card { width:52px; text-align:center; cursor:pointer; transition:all var(--transition); position:relative; }
.char-card:hover .char-avatar { border-color:var(--accent); transform:scale(1.05); }
.char-card.active .char-avatar { border-color:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.char-avatar { width:44px; height:44px; border-radius:50%; border:2px solid var(--surface-border); overflow:hidden; margin:0 auto 3px; transition:all var(--transition); background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.char-avatar img { width:100%; height:100%; object-fit:cover; }
.char-name { font-size:9px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-card.active .char-name { color:var(--accent); font-weight:500; }
.add-char-btn { width:44px; height:44px; border-radius:50%; border:2px dashed rgba(167,139,250,0.2); background:transparent; color:var(--text-muted); cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; margin:0 auto 3px; }
.add-char-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.char-edit-btn { position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:var(--bg-tertiary); border:1px solid var(--surface-border); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:all var(--transition); padding:0; z-index:2; }
.char-edit-btn .icon { width:10px; height:10px; }
.char-card:hover .char-edit-btn { opacity:1; }
.char-edit-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-hover); }

/* ── Modal ──────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal { background:var(--bg-secondary); border:1px solid var(--surface-border); border-radius:16px; width:460px; max-width:92vw; max-height:85vh; overflow-y:auto; }
.modal-header { padding:14px 18px; border-bottom:1px solid var(--surface-border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:15px; font-weight:600; }
.modal-body { padding:18px; }
.modal-footer { padding:12px 18px; border-top:1px solid var(--surface-border); display:flex; justify-content:flex-end; gap:8px; }
.avatar-picker { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.avatar-preview { width:64px; height:64px; border-radius:50%; border:2px solid var(--surface-border); overflow:hidden; background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition:border-color var(--transition); color:var(--text-muted); }
.avatar-preview:hover { border-color:var(--accent); }
.avatar-preview img { width:100%; height:100%; object-fit:cover; }
.avatar-actions { flex:1; }
.avatar-actions .btn-sm { padding:5px 12px; font-size:11px; border-radius:6px; background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--surface-border); cursor:pointer; transition:all var(--transition); display:inline-flex; align-items:center; gap:4px; font-family:inherit; }
.avatar-actions .btn-sm:hover { border-color:var(--accent); color:var(--text-primary); }
.form-group textarea { width:100%; padding:10px 14px; background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:13px; font-family:inherit; line-height:1.5; resize:vertical; outline:none; min-height:120px; transition:border-color var(--transition); }
.form-group textarea:focus { border-color:var(--accent); }
.btn-danger { background:rgba(232,112,144,0.1); color:var(--danger); border:1px solid rgba(232,112,144,0.2); padding:7px 14px; border-radius:var(--radius-sm); font-family:inherit; font-size:12px; cursor:pointer; transition:all var(--transition); }
.btn-danger:hover { background:rgba(232,112,144,0.2); }
.btn-save { background:var(--accent); color:#0e0e18; border:none; padding:7px 18px; border-radius:var(--radius-sm); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition); }
.btn-save:hover { background:var(--accent-hover); }

/* ── Thread List ────────────────── */
.thread-list { flex:1; overflow-y:auto; padding:6px; }
.thread-item { padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all var(--transition); margin-bottom:1px; }
.thread-item:hover { background:var(--bg-hover); }
.thread-item.active { background:var(--bg-active); }
.thread-title { flex:1; font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-item.active .thread-title { color:var(--text-primary); }
.thread-actions { display:flex; gap:2px; opacity:0; transition:opacity var(--transition); }
.thread-item:hover .thread-actions { opacity:1; }
.thread-actions .btn-icon { width:24px; height:24px; }

.sidebar-footer { padding:10px 14px; border-top:1px solid var(--surface-border); display:flex; align-items:center; justify-content:space-between; }
.user-info { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }
.user-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--pastel-rose)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#0e0e18; }

/* ── Main ───────────────────────── */
.main-content { flex:1; display:flex; flex-direction:column; height:100vh; min-width:0; }
.chat-header { padding:10px 18px; border-bottom:1px solid var(--surface-border); display:flex; align-items:center; justify-content:space-between; background:var(--bg-secondary); min-height:48px; }
.chat-header-left { display:flex; align-items:center; gap:10px; }
.chat-title { font-size:14px; font-weight:500; }
.active-char-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 2px; background:var(--accent-glow); border:1px solid rgba(167,139,250,0.15); border-radius:16px; font-size:10px; color:var(--accent); font-weight:500; }
.active-char-badge .mini-avatar { width:18px; height:18px; border-radius:50%; overflow:hidden; background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; }
.active-char-badge .mini-avatar img { width:100%; height:100%; object-fit:cover; }

/* ── Messages ───────────────────── */
.messages-container { flex:1; overflow-y:auto; padding:20px 0; }
.messages-inner { max-width:760px; margin:0 auto; padding:0 20px; }
.message { margin-bottom:20px; animation:msgIn .3s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.message-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.message-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; overflow:hidden; background:var(--bg-tertiary); flex-shrink:0; }
.message-avatar img { width:100%; height:100%; object-fit:cover; }
.message-user .message-avatar { background:linear-gradient(135deg,var(--pastel-sky),var(--pastel-lilac)); color:#0e0e18; }
.message-assistant .message-avatar { background:linear-gradient(135deg,var(--accent),var(--pastel-rose)); color:#0e0e18; }
.message-role { font-size:12px; font-weight:600; }
.message-user .message-role { color:var(--pastel-sky); }
.message-assistant .message-role { color:var(--accent); }
.message-content { padding:14px 18px; border-radius:var(--radius); font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.message-user .message-content { background:rgba(144,192,240,0.06); border:1px solid rgba(144,192,240,0.08); }
.message-assistant .message-content { background:rgba(167,139,250,0.04); border:1px solid rgba(167,139,250,0.08); }
.message-actions { display:flex; gap:3px; margin-top:4px; opacity:0; transition:opacity var(--transition); }
.message:hover .message-actions { opacity:1; }
.msg-action-btn { padding:3px 8px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:11px; border-radius:4px; transition:all var(--transition); display:inline-flex; align-items:center; gap:3px; font-family:inherit; }
.msg-action-btn:hover { color:var(--text-primary); background:var(--bg-hover); }

.typing-indicator { display:flex; gap:4px; padding:14px 18px; }
.typing-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:tPulse 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes tPulse { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ── Roleplay formatting ───────── */
.rp-action { font-style:italic; color:rgba(200,180,230,0.85); }
.rp-dialogue { color:#e8c89a; font-weight:500; }

/* ── Input ──────────────────────── */
.input-area { padding:12px 20px 16px; border-top:1px solid var(--surface-border); background:var(--bg-secondary); }
.input-area-inner { max-width:760px; margin:0 auto; }
.input-wrapper { display:flex; gap:8px; align-items:flex-end; background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:var(--radius); padding:8px 10px; transition:border-color var(--transition); }
.input-wrapper:focus-within { border-color:rgba(167,139,250,0.3); box-shadow:0 0 0 2px var(--accent-glow); }
#messageInput { flex:1; background:none; border:none; color:var(--text-primary); font-family:inherit; font-size:13px; line-height:1.5; resize:none; outline:none; max-height:180px; min-height:22px; }
#messageInput::placeholder { color:var(--text-muted); }
.send-btn { width:34px; height:34px; background:var(--accent); border:none; border-radius:var(--radius-sm); color:#0e0e18; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); flex-shrink:0; }
.send-btn:hover { background:var(--accent-hover); }
.send-btn:disabled { opacity:.35; cursor:not-allowed; }
.stop-btn { display:none; padding:6px 14px; background:var(--danger); color:white; border:none; border-radius:var(--radius-sm); font-family:inherit; font-size:12px; cursor:pointer; margin:0 auto 6px; }
.stop-btn.visible { display:flex; align-items:center; gap:4px; }

.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); gap:12px; padding:40px; }
.empty-state .icon { width:48px; height:48px; opacity:.35; color:var(--accent); }
.empty-state h2 { font-size:16px; color:var(--text-secondary); font-weight:500; }
.empty-state p { font-size:13px; text-align:center; max-width:360px; }
.input-hint { font-size:10px; color:var(--text-muted); margin-top:5px; text-align:center; }

/* ── Input Selectors Row ────────── */
.input-selectors { display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; align-items:center; }

/* ── Model Selector ─────────────── */
.model-selector-area { position:relative; }
.model-selector-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:16px; cursor:pointer; transition:all var(--transition); font-family:inherit; font-size:11px; color:var(--text-secondary); }
.model-selector-btn:hover { border-color:var(--accent); color:var(--text-primary); }
.model-btn-label { font-weight:500; }
.model-arrow { font-size:9px; color:var(--text-muted); }

/* ── Persona Selector ───────────── */
.persona-selector-area { position:relative; }
.persona-selector-btn { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 3px; background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:16px; cursor:pointer; transition:all var(--transition); font-family:inherit; font-size:11px; color:var(--text-secondary); }
.persona-selector-btn:hover { border-color:var(--pastel-sky); color:var(--text-primary); }
.persona-mini-av { width:20px; height:20px; border-radius:50%; overflow:hidden; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.persona-mini-av img { width:100%; height:100%; object-fit:cover; }
.persona-mini-av svg { width:12px; height:12px; }

.persona-popup { position:absolute; bottom:calc(100% + 4px); left:0; width:260px; max-height:380px; overflow-y:auto; background:var(--bg-secondary); border:1px solid var(--surface-border); border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,0.5); z-index:100; animation:popIn .12s ease; }
.persona-popup-header { padding:8px 12px; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--surface-border); display:flex; justify-content:space-between; align-items:center; }
.persona-popup-header .btn-icon { width:20px; height:20px; }
.persona-option { width:100%; display:flex; align-items:center; gap:8px; padding:7px 12px; background:none; border:none; color:var(--text-secondary); font-family:inherit; font-size:12px; cursor:pointer; transition:background var(--transition); text-align:left; }
.persona-option:hover { background:var(--bg-hover); color:var(--text-primary); }
.persona-option.active { background:var(--bg-active); color:var(--text-primary); }
.persona-opt-av { width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.persona-opt-av img { width:100%; height:100%; object-fit:cover; }
.persona-opt-name { font-weight:500; flex:1; }
.persona-opt-edit { opacity:0; transition:opacity var(--transition); }
.persona-option:hover .persona-opt-edit { opacity:1; }
.model-tag { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:600; border:1px solid; letter-spacing:.2px; }

.model-popup { position:absolute; bottom:calc(100% + 4px); left:0; width:240px; max-height:360px; overflow-y:auto; background:var(--bg-secondary); border:1px solid var(--surface-border); border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,0.5); z-index:100; animation:popIn .12s ease; }
@keyframes popIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.model-popup-header { padding:8px 12px; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--surface-border); }
.model-option { width:100%; display:flex; align-items:center; gap:6px; padding:8px 12px; background:none; border:none; color:var(--text-secondary); font-family:inherit; font-size:12px; cursor:pointer; transition:background var(--transition); text-align:left; }
.model-option:hover { background:var(--bg-hover); color:var(--text-primary); }
.model-option.active { background:var(--bg-active); color:var(--text-primary); }
.model-opt-name { font-weight:500; }
.model-check { color:var(--accent); font-weight:700; margin-left:auto; }

/* ── Rename Prompt ──────────────── */
.rename-input { background:var(--bg-tertiary); border:1px solid var(--accent); border-radius:4px; color:var(--text-primary); font-family:inherit; font-size:12px; padding:4px 8px; width:100%; outline:none; }

/* ── Language Preset Buttons ───── */
.btn-lang { padding:5px 12px; font-size:11px; font-weight:600; border:1px solid var(--surface-border); border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:all var(--transition); }
.btn-lang:hover { background:var(--accent); color:#0e0e18; border-color:var(--accent); }
.btn-lang.active { background:var(--accent); color:#0e0e18; border-color:var(--accent); }

/* ── Greetings ─────────────────── */
.greetings-list { display:flex; flex-direction:column; gap:8px; }
.greeting-item { background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:var(--radius-sm); padding:10px; position:relative; }
.greeting-item-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.greeting-item-title { flex:1; background:none; border:none; border-bottom:1px solid var(--surface-border); color:var(--text-primary); font-family:inherit; font-size:12px; font-weight:600; padding:2px 0; outline:none; }
.greeting-item-title:focus { border-color:var(--accent); }
.greeting-item-del { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px; font-size:14px; line-height:1; }
.greeting-item-del:hover { color:#e87070; }
.greeting-item textarea { width:100%; min-height:60px; max-height:120px; background:var(--bg-secondary); border:1px solid var(--surface-border); border-radius:4px; color:var(--text-secondary); font-family:inherit; font-size:11px; padding:6px 8px; resize:vertical; outline:none; }
.greeting-item textarea:focus { border-color:rgba(167,139,250,0.3); }

/* ── Greeting Picker (empty chat) ── */
.greeting-picker { display:flex; flex-direction:column; gap:8px; width:100%; max-width:500px; margin-top:12px; }
.greeting-card { background:var(--bg-tertiary); border:1px solid var(--surface-border); border-radius:var(--radius); padding:12px 16px; cursor:pointer; text-align:left; transition:all var(--transition); }
.greeting-card:hover { border-color:var(--accent); background:var(--bg-hover); transform:translateY(-1px); }
.greeting-card-title { font-size:12px; font-weight:600; color:var(--accent); margin-bottom:4px; }
.greeting-card-preview { font-size:11px; color:var(--text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Sidebar overlay backdrop ──── */
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99; }

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤768px)
   ══════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --sidebar-width:280px; }

  /* Sidebar: fixed overlay */
  .sidebar { position:fixed; left:0; top:0; z-index:100; width:var(--sidebar-width); transform:translateX(-100%); transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .sidebar.open { transform:translateX(0); }
  .sidebar.open ~ .sidebar-backdrop,
  .sidebar-backdrop.visible { display:block; }

  /* Characters: horizontal scroll */
  .characters-section { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .char-grid { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .char-card { min-width:52px; }

  /* Thread list: bigger touch targets */
  .thread-item { padding:10px 12px; min-height:40px; }
  .thread-actions { opacity:1; } /* always visible on mobile */

  /* Chat header */
  .chat-header { padding:8px 12px; }
  .chat-title { font-size:13px; max-width:55vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .active-char-badge { font-size:9px; }

  /* Messages */
  .messages-container { padding:12px 0; }
  .messages-inner { padding:0 12px; }
  .message-content { padding:10px 14px; font-size:13px; }
  .message-avatar { width:24px; height:24px; font-size:10px; }
  .message-actions { opacity:1; }
  .msg-action-btn { font-size:10px; padding:4px 6px; }

  /* Input area: fixed bottom */
  .input-area { padding:8px 12px 12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .input-wrapper { padding:6px 8px; }
  #messageInput { font-size:14px; } /* prevent iOS zoom */
  .send-btn { width:36px; height:36px; }
  .input-hint { font-size:9px; }

  /* Model popup */
  .model-popup { width:calc(100vw - 40px); max-width:300px; left:0; }
  .model-selector-btn { font-size:10px; padding:3px 8px; }

  /* Modals: near full screen */
  .modal { width:95vw; max-height:90vh; border-radius:12px; }
  .modal-body { padding:14px; }
  .form-group textarea { min-height:100px; font-size:14px; } /* prevent iOS zoom */
  .form-group input { font-size:14px; }

  /* Auth */
  .auth-card { padding:28px 20px; width:95vw; }
}

/* ══════════════════════════════════════════════════
   SMALL MOBILE  (≤400px)
   ══════════════════════════════════════════════════ */
@media (max-width:400px) {
  :root { --sidebar-width:260px; }
  .sidebar-header h2 { font-size:13px; }
  .new-chat-btn { font-size:11px; padding:5px 10px; }
  .char-avatar { width:38px; height:38px; }
  .char-name { font-size:8px; }
  .chat-title { font-size:12px; max-width:45vw; }
  .message-content { padding:8px 12px; font-size:12px; }
  .model-popup { width:calc(100vw - 24px); }
}