:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --bg: #100b1d;
  --sidebar: #171128;
  --surface: #211934;
  --surface-strong: #2b2142;
  --surface-hover: #34294c;
  --line: #ffffff19;
  --line-strong: #ffffff2b;
  --text: #f6f2ff;
  --muted: #aaa1bf;
  --subtle: #817794;
  --accent: #aa7bfa;
  --accent-bright: #c9a9ff;
  --accent-wash: #a678f326;
  --aqua: #62d8df;
  --user-bubble: #3a285e;
  --error-bg: #55283d;
  --shadow: 0 18px 48px #09051245;
  --focus: #b58dff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4fc;
  --sidebar: #f0ebf8;
  --surface: #ffffff;
  --surface-strong: #f4eefb;
  --surface-hover: #eae1f5;
  --line: #392a5a18;
  --line-strong: #392a5a2b;
  --text: #261d39;
  --muted: #6f6482;
  --subtle: #8d829e;
  --accent: #7549d5;
  --accent-bright: #663acb;
  --accent-wash: #7b50d21b;
  --aqua: #258d9a;
  --user-bubble: #e8dcfa;
  --error-bg: #fae5eb;
  --shadow: 0 16px 44px #4d33691a;
  --focus: #7549d5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); transition: background .25s ease, color .25s ease; }
body.app-open { height: var(--app-height, 100dvh); overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent-bright); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent-wash); }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { height: var(--app-height, 100dvh); min-height: 0; display: grid; grid-template-columns: 258px minmax(0, 1fr); overflow: hidden; background: var(--bg); }
.sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 31px 17px 21px; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 42px; }
.brand-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #d7b9ff, #8e56e9 58%, #5a3ab7); color: #fff; box-shadow: 0 8px 26px #9864ed59, inset 0 1px #ffffff9c; font-weight: 800; font-size: 23px; letter-spacing: -.12em; padding-right: 4px; }
.brand strong { display: block; font-size: 17px; letter-spacing: -.035em; }
.brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.side-label, .chat-list-head { color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.side-label { padding: 0 12px; margin-bottom: 12px; }
.nav { display: grid; gap: 4px; }
.nav-item { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 13px; padding: 10px 12px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; font-weight: 650; transition: background .18s, color .18s, border-color .18s; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.selected { background: var(--accent-wash); color: var(--accent-bright); border-color: var(--line-strong); }
.nav-item.selected .icon { color: var(--accent); }
.count { margin-left: auto; min-width: 18px; text-align: center; font-size: 11px; }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; padding: 29px 12px 11px; }
.chat-list-head button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.chat-list-head button:hover { background: var(--accent-wash); color: var(--accent-bright); }
.chat-list-head .icon { width: 17px; height: 17px; }
.chat-list { min-height: 60px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.chat-list button { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); padding: 9px 12px; text-align: left; font-size: 12px; }
.chat-list button .icon { width: 16px; height: 16px; }
.chat-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list button:hover { background: var(--surface-hover); color: var(--text); }
.chat-list button.selected { background: var(--surface-strong); color: var(--text); border-color: var(--line); }
.chat-list button.selected .icon { color: var(--accent); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.connection { display: flex; align-items: center; gap: 11px; padding: 10px 11px; }
.connection strong, .connection small { display: block; }
.connection strong { font-size: 12px; }
.connection small { color: var(--muted); margin-top: 4px; font-size: 11px; }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #dfa679; box-shadow: 0 0 0 4px #dfa67922; }
.status-dot.ok { background: #68d9bd; box-shadow: 0 0 0 4px #68d9bd24; }
.quiet { display: flex; align-items: center; gap: 9px; margin: 10px 0 0 1px; border: 0; border-radius: 10px; padding: 9px 10px; background: transparent; color: var(--muted); font-size: 12px; }
.quiet:hover { color: var(--text); background: var(--surface-hover); }
.quiet .icon { width: 17px; height: 17px; }

.main-column { min-width: 0; height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.main-column::before { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse 48% 37% at 82% 8%, #9855de16, transparent 73%), radial-gradient(ellipse 44% 32% at 18% 76%, #3687ab0b, transparent 75%); }
:root[data-theme="light"] .main-column::before { background: radial-gradient(ellipse 52% 38% at 83% 8%, #b695ec1c, transparent 73%), radial-gradient(ellipse 36% 28% at 15% 74%, #79c8d10d, transparent 75%); }
.topbar, .view { position: relative; z-index: 1; }
.topbar { height: 69px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 33px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); }
.topbar-note { color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.refresh-status { color: var(--muted); font-size: 11px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; }
.theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
.theme-toggle .icon { width: 17px; height: 17px; }
.mobile-brand, .mobile-logout, .mobile-nav { display: none; }
.view { width: min(100%, 1120px); margin: 0 auto; }
.chat-view { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 44px; overflow: hidden; }
.chat-heading { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 112px; padding: 25px 0 17px; }
.eyebrow { margin: 0 0 9px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.chat-heading h1, .page-heading h1 { margin: 0; color: var(--text); font-size: clamp(26px, 3vw, 34px); line-height: 1.12; font-weight: 720; letter-spacing: -.045em; }
.chat-heading h1 { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heading-orbit { width: 58px; height: 58px; flex: none; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(from 40deg, #7ae2db, #9061e0, #dc83ff, #5552ab, #7ae2db); box-shadow: 0 0 28px #aa74ee55; animation: orb-glow 5s ease-in-out infinite alternate; }
.heading-orbit::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.heading-orbit span { position: relative; width: 23px; height: 23px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #d9a6ff 22%, #824de7 65%, #342b81); box-shadow: 0 0 12px #b28cff; }
.chat-toolbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 0 15px; border-bottom: 1px solid var(--line); }
.chat-toolbar select { width: min(340px, 100%); min-width: 0; height: 38px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--text); padding: 0 13px; font-size: 13px; font-weight: 650; }
.chat-toolbar button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; white-space: nowrap; }
.chat-toolbar .icon { width: 17px; height: 17px; }
.rename-form { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rename-form input { flex: 1; min-width: 0; height: 39px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0 12px; font-size: 16px; }
.rename-form button { height: 39px; padding: 0 13px; white-space: nowrap; }
.chat-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 20px; padding: 26px 4px 28px 0; }
.empty-chat { flex: 1; min-height: 250px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.empty-orb { position: relative; width: 92px; height: 92px; margin-bottom: 23px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff, #d5a8ff 15%, #9c5cef 44%, #422073 71%, #2e184b); box-shadow: 0 0 0 12px #a566f615, 0 0 0 27px #a566f60b, 0 15px 48px #8b51dc77, inset -12px -15px 23px #1c133166; animation: orb-float 5s ease-in-out infinite alternate; }
.empty-orb::after { content: ""; position: absolute; inset: -20px; border: 1px solid #a66ce733; border-radius: 44% 56% 62% 38% / 48% 43% 57% 52%; transform: rotate(-28deg); }
.empty-chat h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; font-weight: 690; }
.empty-chat p { margin: 8px 0 0; max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.message { max-width: min(84%, 760px); align-self: flex-start; display: flex; align-items: flex-start; gap: 11px; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #c69cff, #7646cd); color: #fff; box-shadow: 0 4px 15px #8a50d346; font-size: 13px; font-weight: 850; }
.message.user .avatar { background: var(--surface-strong); box-shadow: none; color: var(--accent-bright); }
.message.system .avatar { background: var(--surface-strong); color: var(--muted); box-shadow: none; }
.message.system .avatar .icon { width: 17px; height: 17px; }
.bubble { min-width: 74px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 17px 17px 17px 5px; background: var(--surface); box-shadow: 0 8px 28px #0000000e; }
.message.user .bubble { border-color: var(--accent-wash); border-radius: 17px 17px 5px 17px; background: var(--user-bubble); }
.message.system .bubble { background: var(--surface-strong); }
.message.system.error .bubble { background: var(--error-bg); }
.bubble-text { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.62; }
.message-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--subtle); font-size: 10px; }
.speak-button { display: inline-grid; place-items: center; width: 25px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.speak-button:hover { background: var(--accent-wash); color: var(--accent-bright); }
.speak-button .icon { width: 16px; height: 16px; }
.composer-wrap { flex: none; padding: 13px 0 19px; border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -14px 24px var(--bg); }
.composer { min-height: 63px; display: flex; align-items: flex-end; gap: 6px; padding: 9px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow); }
.composer textarea { flex: 1; min-width: 0; min-height: 43px; max-height: 130px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 10px 5px; font-size: 16px; line-height: 1.45; }
.composer textarea::placeholder { color: var(--subtle); }
.attach-button { width: 41px; height: 43px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.attach-button:hover { background: var(--surface-hover); color: var(--text); }
.attach-button.recording { color: #ff8db4; background: #ff75a323; animation: pulse-record 1s infinite alternate; }
.send-button { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: linear-gradient(135deg, #ae7cff, #7750d4); color: #fff; box-shadow: 0 6px 22px #8952d278; }
.send-button:hover, .primary:hover { filter: brightness(1.1); }
.send-button .icon { width: 21px; height: 21px; stroke-width: 2.2; }
.composer-footer { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 3px 0; color: var(--subtle); font-size: 11px; }
.composer-footer > span.active { color: var(--accent-bright); }
.voice-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; font-size: 11px; }
.voice-toggle input { accent-color: var(--accent); }
.inline-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--accent-bright); padding: 0; font-weight: 700; font-size: 12px; }
.inline-link:hover { text-decoration: underline; }
.inline-link .icon { width: 15px; height: 15px; }
.pending-files { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.file-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); padding: 6px 7px 6px 9px; font-size: 11px; overflow-wrap: anywhere; }
.file-chip .icon { width: 14px; height: 14px; }
.file-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.file-chip button:hover { background: var(--surface-hover); color: var(--text); }
.file-link { display: flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--accent-bright); font-size: 12px; overflow-wrap: anywhere; }
.file-link .icon { width: 14px; height: 14px; }
.history-button { align-self: center; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 15px; background: var(--surface); color: var(--accent-bright); font-size: 12px; font-weight: 700; }

.page-view { flex: 1; min-height: 0; overflow-y: auto; padding: 42px 44px 74px; }
.page-heading { margin-bottom: 27px; }
.page-heading p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 28px #0000000d; }
.form-panel { padding: 23px 25px; margin-bottom: 32px; }
.panel h2, .section-title h2 { margin: 0; font-size: 16px; font-weight: 730; letter-spacing: -.025em; }
.form-panel h2 { margin-bottom: 18px; }
.form-panel label, .stack label { display: grid; gap: 7px; margin-bottom: 15px; color: var(--muted); font-size: 12px; font-weight: 650; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-panel input, .form-panel textarea, .form-panel select, .stack input { width: 100%; min-height: 43px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); color: var(--text); padding: 10px 12px; outline: 0; font-size: 16px; }
.form-panel textarea { min-height: 72px; resize: vertical; }
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus, .stack input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-wash); }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; padding: 11px 16px; font-size: 13px; font-weight: 730; }
.primary { border: 0; background: linear-gradient(135deg, #a775f5, #7047ce); color: #fff; }
.secondary { border: 1px solid var(--line-strong); background: var(--surface-strong); color: var(--text); }
.secondary:hover { background: var(--surface-hover); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.muted { color: var(--muted); font-size: 13px; }
.item-list { display: grid; gap: 10px; }
.item { display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; background: var(--surface); }
.item-main { flex: 1; min-width: 0; }
.item-title { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.item-note { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.item-date { margin-top: 8px; color: var(--subtle); font-size: 11px; }
.item-actions { display: flex; align-items: center; gap: 7px; }
.icon-button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--surface-strong); color: var(--muted); }
.icon-button:hover { background: var(--accent-wash); color: var(--accent-bright); }
.icon-button .icon { width: 16px; height: 16px; }
.check-button { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 7px; background: var(--bg); color: #fff; padding: 0; }
.check-button.done { border-color: var(--accent); background: var(--accent); }
.check-button .icon { width: 15px; height: 15px; }
.item.done .item-title { color: var(--subtle); text-decoration: line-through; }
.badge { border-radius: 999px; padding: 5px 9px; background: var(--surface-strong); color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.badge.running { background: #6e85e32b; color: #9facff; }
.badge.done { background: #40b9972b; color: #65d9b6; }
.badge.error { background: #dc5a812c; color: #ff9db5; }
.badge.queued { background: #c79a562b; color: #e7c07e; }
:root[data-theme="light"] .badge.running { color: #5267b5; }
:root[data-theme="light"] .badge.done { color: #267f67; }
:root[data-theme="light"] .badge.error { color: #b73c62; }
:root[data-theme="light"] .badge.queued { color: #8d692e; }
.empty-list { border: 1px dashed var(--line-strong); border-radius: 13px; padding: 25px; color: var(--muted); text-align: center; font-size: 13px; }
.settings-panel { margin-top: 39px; padding: 22px 25px; }
.settings-panel p { margin: 7px 0 20px; }
.settings-panel .stack { max-width: 430px; }

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 77% 18%, #7d3bbb38, transparent 33%), radial-gradient(circle at 15% 84%, #28809b21, transparent 37%), var(--bg); }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--line-strong); border-radius: 25px; background: var(--surface); box-shadow: var(--shadow); }
.login-card .brand-mark.large { width: 58px; height: 58px; border-radius: 18px; margin-bottom: 32px; font-size: 30px; }
.login-card h1 { margin: 0 0 13px; font-size: 34px; line-height: 1.13; font-weight: 750; letter-spacing: -.05em; }
.login-card .muted { margin: 0 0 26px; line-height: 1.55; }
.login-card .primary { width: 100%; justify-content: space-between; }
.error-text { min-height: 18px; color: #ff9db5; font-size: 12px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: 360px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-strong); color: var(--text); padding: 13px 16px; box-shadow: var(--shadow); font-size: 13px; }
@keyframes pulse-record { from { opacity: 1; } to { opacity: .56; } }
@keyframes orb-glow { from { filter: brightness(.9); transform: scale(.97); } to { filter: brightness(1.16); transform: scale(1.03); } }
@keyframes orb-float { from { transform: translateY(4px); } to { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 940px) {
  .app-shell { grid-template-columns: 218px minmax(0, 1fr); }
  .sidebar { padding-left: 11px; padding-right: 11px; }
  .chat-view, .page-view { padding-left: 28px; padding-right: 28px; }
  .topbar { padding: 0 28px; }
  .composer-footer > span:not(.active) { display: none; }
}

@media (max-width: 700px) {
  .app-shell { display: block; position: relative; }
  .sidebar { display: none; }
  .main-column { height: calc(100% - 63px - env(safe-area-inset-bottom)); }
  .topbar { height: 58px; padding: 0 16px; }
  .topbar-note { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; letter-spacing: -.03em; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; border-radius: 11px; font-size: 18px; }
  .topbar-actions { gap: 7px; }
  .theme-toggle { width: 37px; height: 37px; padding: 0; }
  .theme-toggle span { display: none; }
  .mobile-logout { display: inline-grid; }
  .chat-view { width: 100%; padding: 0 16px; }
  .chat-heading { min-height: 80px; padding: 15px 0 12px; }
  .chat-heading h1 { max-width: calc(100vw - 105px); font-size: 25px; }
  .heading-orbit { width: 45px; height: 45px; }
  .heading-orbit span { width: 18px; height: 18px; }
  .chat-toolbar { padding-bottom: 11px; }
  .chat-toolbar select { flex: 1; width: 0; height: 38px; }
  .chat-toolbar button { padding: 0 9px; }
  .chat-toolbar #new-chat-mobile span { display: none; }
  .rename-form { flex-wrap: wrap; }
  .rename-form input { flex-basis: 100%; }
  .chat-feed { gap: 15px; padding: 18px 0 20px; }
  .message { max-width: 96%; gap: 7px; }
  .avatar { width: 26px; height: 26px; border-radius: 9px; font-size: 11px; }
  .bubble { padding: 11px 13px; }
  .bubble-text { font-size: 14px; }
  .empty-chat { min-height: 210px; }
  .empty-orb { width: 71px; height: 71px; margin-bottom: 21px; }
  .empty-chat h2 { font-size: 20px; }
  .composer-wrap { padding: 9px 0 10px; }
  .composer { min-height: 55px; padding: 5px; gap: 3px; border-radius: 15px; }
  .composer textarea { min-height: 42px; padding: 9px 2px; }
  .attach-button, .send-button { width: 39px; height: 41px; }
  .composer-footer { font-size: 10px; }
  .composer-footer > span:not(.active) { display: none; }
  .voice-toggle { font-size: 10px; }
  .inline-link { font-size: 10px; }
  .mobile-nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(63px + env(safe-area-inset-bottom)); display: flex; align-items: flex-start; justify-content: space-around; gap: 2px; padding: 7px 4px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--sidebar); z-index: 5; }
  .mobile-nav button { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); padding: 3px 2px; font-size: 9px; }
  .mobile-nav button.selected { color: var(--accent-bright); }
  .mobile-nav .icon { width: 20px; height: 20px; }
  .page-view { width: 100%; padding: 25px 16px 55px; }
  .page-heading { margin-bottom: 22px; }
  .page-heading h1 { font-size: 28px; }
  .form-panel, .settings-panel { padding: 20px 17px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .section-title { align-items: flex-start; }
  .section-title .muted { max-width: 45%; text-align: right; font-size: 11px; }
  .item { padding: 13px; }
  .login-card { padding: 29px; }
  .toast { left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); max-width: none; }
}

@media (max-width: 360px) {
  .chat-view { padding: 0 12px; }
  .chat-heading h1 { font-size: 22px; }
  .composer-footer { gap: 5px; }
  .voice-toggle, .inline-link { font-size: 9px; }
}