:root {
  --text: #fff;
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.5);
  --glass: rgba(105,108,114,.34);
  --glass-side: rgba(48,50,54,.38);
  --glass-head: rgba(70,72,76,.22);
  --bubble-in: rgba(58,60,64,.62);
  --bubble-out: rgba(150,152,158,.5);
  --field: rgba(48,50,54,.55);
  --hover: rgba(255,255,255,.08);
  --active: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.12);
  --green: #6fd286;
  --green-ink: #17331e;
  --danger: #ff8f8f;
  --radius-win: 34px;
  --opus: linear-gradient(135deg,#b48cff,#6a4cff);
  --sonnet: linear-gradient(135deg,#f0a07c,#d0623f);
  --haiku: linear-gradient(135deg,#7fe0d0,#2e9e9a);
  --fable: linear-gradient(135deg,#ffd77a,#d8962b);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.5 Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: #7d8590;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
svg { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.err { color: var(--danger); min-height: 1.2em; margin: 6px 0 0; font-size: 14px; }

/* ---------- обои ---------- */
.wallpaper {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    linear-gradient(180deg, #8b939d 0%, #9aa2ab 38%, #a8a49c 62%, #b59f86 100%);
  background-size: cover; background-position: center;
}
.wallpaper.custom > * { display: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; }
.b1 { width: 46vw; height: 70vh; right: -6vw; top: 4vh; background: radial-gradient(circle, #f4f6f8 0%, #dfe5ea 45%, transparent 70%); }
.b2 { width: 26vw; height: 46vh; right: 4vw; top: 30vh; background: radial-gradient(circle, #4f7a45 0%, #3b5c35 50%, transparent 72%); opacity: .7; }
.b3 { width: 30vw; height: 60vh; left: -8vw; top: 6vh; background: radial-gradient(circle, #5d6672 0%, #49515c 55%, transparent 75%); }
.b4 { width: 34vw; height: 30vh; left: 34vw; top: -10vh; background: radial-gradient(circle, #e8e9ea 0%, transparent 70%); opacity: .55; }
.floor { position: absolute; left: -10%; right: -10%; bottom: -8vh; height: 34vh; background: linear-gradient(180deg, transparent, #b58f67 30%, #9a7550); filter: blur(30px); opacity: .9; }

/* ---------- стекло ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 80px rgba(20,22,28,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(70,72,78,.92); }
}

/* ---------- окно ---------- */
.window {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 330px 1fr;
  width: min(1320px, calc(100vw - 48px));
  height: calc(100dvh - 48px);
  margin: 24px auto;
  border-radius: var(--radius-win);
  overflow: hidden;
}

/* ---------- сайдбар ---------- */
.sidebar { display: flex; flex-direction: column; background: var(--glass-side); min-height: 0; border-right: 1px solid var(--line); }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 20px 12px 26px; }
.side-head h1 { font-size: 28px; font-weight: 600; margin: 0; letter-spacing: .2px; }
.search { margin: 4px 16px 10px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: 14px; background: rgba(0,0,0,.16); color: var(--text-3); }
.search svg { width: 17px; height: 17px; }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); min-width: 0; }
.search input::placeholder { color: var(--text-3); }
.conv-list { list-style: none; margin: 0; padding: 4px 10px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.conv {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 16px; cursor: pointer; position: relative;
}
.conv:hover { background: var(--hover); }
.conv.active { background: var(--active); }
.conv .t { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .p { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--text-2); }
.conv .r svg { width: 14px; height: 14px; opacity: .7; }
.conv-group { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; padding: 12px 14px 4px; }
.side-foot { display: flex; gap: 8px; padding: 12px 16px 18px; }
.side-foot .pill:first-child { flex: 1; justify-content: center; }

.avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--opus); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  color: #fff; font-weight: 800; font-size: 15px;
}
.avatar svg { width: 22px; height: 22px; color: rgba(255,255,255,.95); }
.avatar.sonnet { background: var(--sonnet); }
.avatar.haiku { background: var(--haiku); }
.avatar.fable { background: var(--fable); }
.avatar.sm { width: 38px; height: 38px; }
.avatar.sm svg { width: 18px; height: 18px; }

/* ---------- кнопки ---------- */
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); transition: background .15s; }
.icon-btn:hover { background: rgba(255,255,255,.2); }
.icon-btn svg { width: 18px; height: 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(30,32,36,.45); font-weight: 600; transition: background .15s; }
.pill:hover { background: rgba(30,32,36,.62); }
.pill.ghost { background: rgba(255,255,255,.1); }
.pill.ghost:hover { background: rgba(255,255,255,.18); }
.pill svg { width: 17px; height: 17px; }
.btn-green {
  height: 46px; padding: 0 26px; border-radius: 999px; background: var(--green); color: var(--green-ink);
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .1s;
  box-shadow: 0 6px 18px rgba(60,170,90,.25);
}
.btn-green:hover { filter: brightness(1.06); }
.btn-green:active { transform: scale(.97); }
.btn-green:disabled { opacity: .5; cursor: default; }
.btn-green.stop { background: rgba(255,255,255,.88); color: #222; box-shadow: none; }
.btn-green svg { width: 16px; height: 16px; }

/* ---------- чат ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--glass-head); border-bottom: 1px solid var(--line); }
.chat-head .back { display: none; }
.chat-head .avatar { width: 40px; height: 40px; }
.head-text { flex: 1; min-width: 0; }
.head-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-title input { width: 100%; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; outline: 0; }
.head-sub { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-actions { display: flex; gap: 8px; }
.head-actions .icon-btn { width: 36px; height: 36px; }
#pinBtn[aria-pressed="true"] { background: rgba(255,255,255,.3); }

.messages { flex: 1; overflow-y: auto; padding: 18px 28px 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; overscroll-behavior: contain; }
.day { align-self: center; font-size: 12px; color: var(--text-2); padding: 6px 0 2px; }
.empty { margin: auto; text-align: center; max-width: 420px; padding: 20px; }
.empty h2 { font-size: 26px; font-weight: 700; margin: 14px 0 6px; }
.logo-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto; background: rgba(217,119,87,.9); box-shadow: 0 8px 24px rgba(217,119,87,.35); }
.logo-mark svg { width: 28px; height: 28px; color: #fff; }
.logo-mark.big { width: 64px; height: 64px; border-radius: 20px; }
.logo-mark.big svg { width: 34px; height: 34px; }

.msg { display: flex; flex-direction: column; max-width: min(78%, 820px); }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; max-width: min(88%, 900px); }
.bubble { padding: 12px 16px 8px; border-radius: 22px; position: relative; min-width: 72px; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.user .bubble { background: var(--bubble-out); border-bottom-right-radius: 8px; }
.msg.assistant .bubble { background: var(--bubble-in); border-bottom-left-radius: 8px; }
.bubble .time { display: block; text-align: right; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.msg-actions { display: flex; gap: 2px; margin: 4px 6px 0; opacity: 0; transition: opacity .15s; font-size: 12px; color: var(--text-3); align-items: center; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg.last .msg-actions { opacity: 1; }
.msg-actions button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.msg-actions button:hover { background: var(--hover); color: var(--text); }
.msg-actions svg { width: 15px; height: 15px; }
.msg-actions .cost { padding: 0 6px; }

.typing { display: inline-flex; gap: 5px; padding: 14px 18px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); animation: blink 1.2s infinite both; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* вложения в сообщениях */
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; justify-content: flex-end; }
.msg-files img { max-width: 240px; max-height: 220px; border-radius: 14px; display: block; cursor: zoom-in; object-fit: cover; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(0,0,0,.18); font-size: 13px; max-width: 260px; color: var(--text); text-decoration: none; }
.file-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip svg { width: 18px; height: 18px; }

/* размышления, поиск, источники */
details.thinking { margin: 2px 0 8px; border-radius: 14px; background: rgba(0,0,0,.14); }
details.thinking summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 6px; }
details.thinking summary::-webkit-details-marker { display: none; }
details.thinking summary svg { width: 15px; height: 15px; }
details.thinking .tbody { padding: 0 14px 10px; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; max-height: 360px; overflow-y: auto; }
details.thinking.live summary span::after { content: '…'; animation: blink 1.2s infinite; }
.search-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); background: rgba(0,0,0,.14); border-radius: 999px; padding: 4px 10px; margin: 2px 4px 6px 0; max-width: 100%; }
.search-pill svg { width: 13px; height: 13px; }
.search-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sources a { font-size: 12px; color: var(--text); text-decoration: none; background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px 10px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sources a:hover { background: rgba(255,255,255,.2); }
.note { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.note.error { color: var(--danger); }
.note button { color: var(--text); text-decoration: underline; padding: 0 4px; }

/* markdown */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.3; margin: 1em 0 .45em; font-weight: 800; }
.md h1 { font-size: 1.35em; } .md h2 { font-size: 1.22em; } .md h3 { font-size: 1.1em; }
.md ul, .md ol { padding-left: 1.4em; margin: 0 0 .7em; }
.md li { margin: .2em 0; }
.md a { color: #cfe4ff; }
.md blockquote { margin: 0 0 .7em; padding: 2px 12px; border-left: 3px solid rgba(255,255,255,.35); color: var(--text-2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.md table { border-collapse: collapse; margin: 0 0 .8em; display: block; overflow-x: auto; max-width: 100%; font-size: 14px; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: rgba(255,255,255,.08); }
.md code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: .88em; background: rgba(0,0,0,.25); padding: .1em .4em; border-radius: 6px; }
.md pre { margin: 0 0 .8em; border-radius: 14px; background: rgba(18,20,24,.72); overflow: hidden; }
.md pre .code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 14px; font-size: 12px; color: var(--text-3); background: rgba(255,255,255,.05); }
.md pre .code-head button { color: var(--text-2); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; }
.md pre .code-head button:hover { background: var(--hover); color: var(--text); }
.md pre .code-head svg { width: 13px; height: 13px; }
.md pre code { display: block; padding: 12px 14px; overflow-x: auto; background: none; font-size: 13px; line-height: 1.55; }
.md pre code.hljs { background: none; padding: 12px 14px; }
.md img { max-width: 100%; border-radius: 10px; }

/* ---------- композер ---------- */
.composer { padding: 10px 20px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.select-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 30px 0 12px; border-radius: 999px; background: rgba(30,32,36,.38); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.select-pill:hover { background: rgba(30,32,36,.55); }
.select-pill svg { width: 15px; height: 15px; }
.select-pill .chev { position: absolute; right: 10px; width: 13px; height: 13px; pointer-events: none; opacity: .8; }
.select-pill select { appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0; cursor: pointer; font-weight: 600; padding: 0; }
.select-pill select option { background: #3b3d42; color: #fff; }
.select-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--opus); }
.select-pill .dot.sonnet { background: var(--sonnet); } .select-pill .dot.haiku { background: var(--haiku); } .select-pill .dot.fable { background: var(--fable); }
.toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(30,32,36,.38); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s; }
.toggle svg { width: 15px; height: 15px; }
.toggle:hover { background: rgba(30,32,36,.55); }
.toggle[aria-pressed="true"] { background: rgba(255,255,255,.85); color: #24262a; }

.input-row { display: flex; align-items: flex-end; gap: 10px; }
.input-row .attach { width: 46px; height: 46px; background: rgba(30,32,36,.38); }
.input-wrap { flex: 1; display: flex; align-items: flex-end; background: var(--field); border-radius: 24px; padding: 4px 6px 4px 18px; border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.input-wrap:focus-within { border-color: rgba(255,255,255,.28); }
#input {
  flex: 1; resize: none; border: 0; outline: 0; background: none; padding: 9px 0; line-height: 1.45;
  field-sizing: content; width: 100%; min-block-size: 1lh; max-block-size: 11lh; height: auto; min-width: 0;
}
#input::placeholder { color: var(--text-3); }
.mic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); flex: none; }
.mic:hover { color: var(--text); background: var(--hover); }
.mic.on { color: #fff; background: #e5484d; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(229,72,77,.25); } }
.edit-note { font-size: 12.5px; color: var(--text-2); padding: 0 6px; }
.edit-note button { color: var(--text); text-decoration: underline; }

.attachments { display: flex; gap: 8px; flex-wrap: wrap; }
.attachments:empty { display: none; }
.att { position: relative; height: 64px; min-width: 64px; max-width: 220px; border-radius: 14px; background: rgba(0,0,0,.2); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; overflow: hidden; }
.att img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.att.img { width: 64px; padding: 0; }
.att span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 1; }
.att .rm svg { width: 12px; height: 12px; }
.att.loading::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45) linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent) no-repeat; background-size: 50% 100%; animation: shimmer 1s infinite linear; }
@keyframes shimmer { from { background-position: -100% 0; } to { background-position: 200% 0; } }

.drop-hint { position: absolute; inset: 12px; border: 2px dashed rgba(255,255,255,.6); border-radius: 26px; display: none; place-items: center; font-size: 18px; font-weight: 700; background: rgba(40,42,46,.55); z-index: 5; pointer-events: none; }
.chat.dragging .drop-hint { display: grid; }

/* ---------- вход ---------- */
.login { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); border-radius: 30px; padding: 34px 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 8px 0 0; font-size: 26px; }
.login-card p { margin: 0 0 6px; }
.login-card input, .settings input, .settings textarea, .settings select { width: 100%; background: var(--field); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 11px 14px; outline: 0; }
.login-card input:focus, .settings input:focus, .settings textarea:focus { border-color: rgba(255,255,255,.35); }

/* ---------- настройки ---------- */
dialog.settings { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border-radius: 28px; padding: 0; color: var(--text); background: rgba(80,83,90,.72); overflow: hidden; }
dialog.settings::backdrop { background: rgba(20,22,26,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.settings-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.settings-inner > header { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 8px; }
.settings-inner > header h2 { margin: 0; font-size: 22px; }
.settings-inner > section { padding: 10px 22px; }
.settings-inner > section:not(:last-of-type) { border-bottom: 1px solid var(--line); }
.settings-inner { overflow-y: auto; }
.settings h3 { margin: 0 0 8px; font-size: 15px; }
.settings .small { margin: 6px 0 0; }
.settings textarea { resize: vertical; min-height: 90px; }
.settings select option { background: #3b3d42; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-inner > .err { padding: 0 22px; }
.settings-inner > footer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px 20px; position: sticky; bottom: 0; background: rgba(74,77,84,.96); border-top: 1px solid var(--line); }
.usage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.usage .card { background: rgba(0,0,0,.16); border-radius: 14px; padding: 10px 12px; }
.usage .card b { font-size: 20px; display: block; }
.usage .card span { font-size: 12px; color: var(--text-2); }
.usage .models { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 50; background: rgba(30,32,36,.9); padding: 10px 18px; border-radius: 999px; font-size: 14px; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,12,.82); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

/* ---------- мобильная версия ---------- */
@media (max-width: 820px) {
  .window { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; grid-template-columns: 100% 100%; overflow: hidden; }
  .sidebar, .chat { grid-row: 1; transition: transform .28s cubic-bezier(.3,.7,.3,1); }
  .sidebar { grid-column: 1; border-right: 0; padding-top: env(safe-area-inset-top); }
  .chat { grid-column: 2; }
  .window.show-chat .sidebar, .window.show-chat .chat { transform: translateX(-100%); }
  .chat-head { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .chat-head .back { display: grid; }
  .head-actions .icon-btn { width: 34px; height: 34px; }
  #renameBtn { display: none; }
  .messages { padding: 14px 12px 8px; }
  .msg, .msg.assistant { max-width: 92%; }
  .composer { padding: 8px 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .controls > * { flex: none; }
  .row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- чат: чёрный фон, белый текст ---------- */
.chat { background: #000; }
.chat-head { background: #000; border-bottom: 1px solid rgba(255,255,255,.08); }
.messages { padding-left: 32px; padding-right: 32px; gap: 18px; }
.msg.assistant { max-width: min(100%, 860px); width: 100%; }
.msg.assistant .bubble { background: none; padding: 0; border-radius: 0; }
.msg.assistant .bubble .time { text-align: left; }
.msg.user .bubble { background: #1c1c1e; border-radius: 20px; border-bottom-right-radius: 8px; }
.msg-actions { margin-left: 0; }
.msg.assistant .msg-actions { margin-left: -6px; }
.md { color: #fff; font-size: 15.5px; line-height: 1.6; }
.md pre { background: #121212; border: 1px solid rgba(255,255,255,.08); }
.md code { background: rgba(255,255,255,.1); }
.md th { background: rgba(255,255,255,.06); }
details.thinking { background: #141414; border: 1px solid rgba(255,255,255,.06); }
.search-pill { background: #161616; }
.typing { padding: 6px 0; }
.composer { background: #000; }
.input-wrap { background: #161616; border-color: rgba(255,255,255,.1); }
.input-row .attach, .select-pill, .toggle { background: #161616; }
.input-row .attach:hover, .select-pill:hover, .toggle:hover { background: #222; }
.toggle[aria-pressed="true"] { background: #fff; color: #000; }
.chat .icon-btn { background: #161616; }
.chat .icon-btn:hover { background: #262626; }
.drop-hint { background: rgba(0,0,0,.75); }
@media (max-width: 820px) {
  .messages { padding-left: 14px; padding-right: 14px; }
  .msg.assistant { max-width: 100%; }
}

/* ---------- чат: сплошной чёрный фон, белый текст ---------- */
.chat { background: #000; color: #fff; }
.chat-head { background: #000; border-bottom: 1px solid #1d1d20; }
.chat .bubble .time, .chat .msg-actions, .chat .day { color: rgba(255,255,255,.45); }
.chat .md pre { background: #0c0c0e; border: 1px solid #232327; }
.chat .md pre .code-head { background: #18181b; }
.chat .md code { background: #232327; }
.chat .md pre code { background: none; }
.chat details.thinking, .chat .search-pill, .chat .file-chip, .chat .att { background: #222226; }
.chat .icon-btn { background: #1c1c1f; }
.chat .icon-btn:hover { background: #2a2a2e; }
.chat .drop-hint { background: rgba(0,0,0,.85); }

/* ---------- композер как в claude.ai ---------- */
.composer { background: #000; padding: 6px 22px 10px; gap: 4px; }
.input-box { display: flex; align-items: flex-end; gap: 8px; background: #1b1b1d; border: 1px solid #333338; border-radius: 22px; padding: 8px 8px 8px 18px; transition: border-color .15s; }
.input-box:focus-within { border-color: #55555c; }
.input-box #input { padding: 7px 0; font-size: 15.5px; min-block-size: 2lh; }
.send { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #d97757; color: #fff; transition: filter .15s, opacity .15s; }
.send:hover { filter: brightness(1.08); }
.send svg { width: 18px; height: 18px; }
.send.stop { background: #fff; color: #000; }
.tool-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; }
.tl { display: flex; align-items: center; gap: 2px; }
.tb { height: 34px; min-width: 34px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,.85); }
.tb:hover { background: #1c1c1f; color: #fff; }
.tb svg { width: 20px; height: 20px; }
#optsBtn svg:last-child { width: 15px; height: 15px; opacity: .8; }
#optsBtn .ind { width: 16px; height: 16px; color: #8ab4ff; }
.tb.mic.on { background: #e5484d; color: #fff; }
.hint { font-size: 13.5px; color: rgba(255,255,255,.42); text-align: center; white-space: nowrap; }
.tr { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.txt-select { appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0; cursor: pointer; font-size: 15px; color: rgba(255,255,255,.5); padding: 6px 6px; border-radius: 10px; field-sizing: content; width: auto; min-inline-size: 3ch; max-inline-size: 18ch; }
.txt-select.strong { color: #fff; }
.txt-select:hover { background: #1c1c1f; }
.txt-select option { background: #1b1b1d; color: #fff; }
.opts { position: fixed; inset: auto; margin: 0; padding: 6px; width: 270px; border-radius: 16px; background: #1b1b1d; border: 1px solid #333338; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-align: left; }
.opt:hover { background: #26262a; }
.opt span { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.opt small { color: rgba(255,255,255,.45); font-size: 12px; }
.opt svg { width: 18px; height: 18px; }
.opt .ok { opacity: 0; color: #d97757; }
.opt[aria-pressed="true"] .ok { opacity: 1; }
@media (max-width: 820px) {
  .composer { padding: 6px 10px 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .tool-row { grid-template-columns: auto 1fr; }
  .hint { display: none; }
}

/* ---------- вариант B: на весь экран, всё тёмное ---------- */
body { background: #000; }
.wallpaper { display: none; }
.window { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; box-shadow: none; background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidebar { background: #111113; border-right: 1px solid #1d1d20; }
.search { background: #1c1c1f; color: rgba(255,255,255,.55); }
.conv:hover { background: #1a1a1d; }
.conv.active { background: #222226; }
.side-head .icon-btn { background: #1c1c1f; }
.side-head .icon-btn:hover { background: #2a2a2e; }
.side-foot .pill { background: #222226; }
.side-foot .pill:hover { background: #2a2a2e; }
.side-foot .pill.ghost { background: #1c1c1f; }
.login-card { background: #111113; border: 1px solid #26262a; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.settings { background: #111113; border: 1px solid #26262a; -webkit-backdrop-filter: none; backdrop-filter: none; }
.settings-inner > footer { background: #111113; }
.settings input, .settings textarea, .settings select, .login-card input { background: #1c1c1f; border-color: #2c2c30; }
.usage .card { background: #1c1c1f; }
.settings section:has(#wallBtn) { display: none; }
@media (min-width: 821px) {
  .messages { padding-left: max(24px, calc((100% - 820px) / 2)); padding-right: max(24px, calc((100% - 820px) / 2)); }
  .composer { width: 100%; max-width: 868px; margin: 0 auto; box-sizing: border-box; }
}