:root {
  --ink: #191818;
  --muted: #7c8288;
  --line: #e5e5e5;
  --paper: #f8f9fa;
  --white: #fff;
  --green: #191818;
  --green-2: #3164e6;
  --orange: #f73c01;
  --blue: #3164e6;
  --pale: #e8f3f9;
  --shadow: 0 18px 60px rgba(25, 24, 24, .09);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "Inter", sans-serif; color: var(--ink); background: var(--paper); }
button, textarea { font: inherit; }
button { color: inherit; }
.app-shell { height: 100%; display: grid; grid-template-columns: 285px 1fr; }
.sidebar { background: #fff; color: var(--ink); border-right: 1px solid var(--line); display: flex; min-height: 0; flex-direction: column; padding: 27px 19px 18px; position: relative; z-index: 5; }
.brand { display: block; padding: 3px 8px 30px; }
.brand img { width: 205px; display:block; height:auto; }
.brand small { color: #9ca1a4; font-size: 7px; font-weight:700; letter-spacing: .24em; display:block; margin:7px 0 0 1px; }
.new-chat { width: 100%; border: 0; background: var(--orange); color: white; border-radius: 6px; padding: 12px 14px; text-align: left; cursor: pointer; font-weight: 600; transition: .18s ease; box-shadow:0 7px 16px rgba(247,60,1,.13); }
.new-chat:hover { background: #f95420; transform:translateY(-1px); }
.new-chat span { color: white; font-size: 20px; margin-right: 8px; }
.history-label { color: #a0a5a8; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 29px 9px 10px; }
.session-list { overflow-y: auto; display: grid; gap: 4px; }
.session-item { border: 0; color: #676d71; padding: 10px 11px; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 11px; }
.session-item:hover { color:var(--ink); background:#f4f6f7; }.session-item.active { color: var(--blue); background: #edf2ff; font-weight:600; }
.session-item::before { content: "◫"; color: #9ba1a4; margin-right: 9px; }
.sidebar-footer { margin-top: auto; }
.admin-entry { color:#5f676b; text-decoration:none; border:1px solid var(--line); border-radius:7px; padding:11px; display:grid; grid-template-columns:27px 1fr auto; gap:8px; align-items:center; }.admin-entry>span { color:var(--orange); font-size:15px; }.admin-entry strong,.admin-entry small { display:block; }.admin-entry strong { font-size:9px; }.admin-entry small { color:#a0a5a8; font-size:8px; margin-top:3px; }.admin-entry b { color:#aeb3b5; }.admin-entry:hover { border-color:#ffc7b5; background:#fff9f7; }
.connection { display: flex; align-items: center; gap: 10px; margin: 15px 8px; color: #53605a; }
.connection strong, .connection small, .profile strong, .profile small { display: block; }
.connection strong { font-size: 10px; }.connection small { color: #99a09c; font-size: 8px; }
.status-dot { width: 8px; height: 8px; background: #42ce87; border-radius: 50%; box-shadow: 0 0 0 4px rgba(66,206,135,.1); }
.profile { border-top: 1px solid var(--line); display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 17px 6px 2px; }
.avatar { width: 34px; height: 34px; background: var(--ink); color:#fff; display: grid; place-items: center; border-radius: 7px; font-weight: 700; font-size: 11px; }
.profile strong { font-size: 9px; }.profile small { font-size: 8px; color: #9ba1a4; }.profile > span { color: #adb2b4; }
.main-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 72px 1fr auto; background: #f8f9fa; }
.topbar { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 34px; }
.chat-title { font-size: 13px; font-weight: 700; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-state { color: #8a948f; font-size: 9px; margin-top: 4px; }.model-state span { width: 6px; height: 6px; background: #45b97c; display: inline-block; border-radius: 50%; margin-right: 5px; }
.top-actions { display: flex; align-items: center; gap: 13px; }
.mode-pill { background: var(--pale); color: var(--blue); border-radius: 20px; padding: 7px 11px; font-size: 9px; font-weight: 700; }
.theme-toggle { width:34px; height:34px; border:1px solid var(--line); border-radius:7px; display:grid; place-items:center; color:#6e7579; background:#fff; font-size:16px; cursor:pointer; transition:.2s; }.theme-toggle:hover { color:var(--orange); border-color:#ffc7b5; }
.icon-button { border: 0; background: transparent; color: #89928e; cursor: pointer; font-size: 18px; }.menu-button { display: none; }
.chat { min-height: 0; overflow-y: auto; padding: 38px clamp(24px, 7vw, 110px) 22px; scroll-behavior: smooth; }
.welcome { max-width: 760px; margin: 3vh auto 0; text-align: center; }
.welcome[hidden] { display:none !important; }
.welcome-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 25px; }.welcome-brand img { width:210px; }.welcome-brand span { color:#fff; background:var(--ink); border-radius:4px; padding:6px 8px; letter-spacing:.12em; font-size:8px; font-weight:800; }
.eyebrow { color: #e56831; letter-spacing: .16em; font-size: 9px; font-weight: 800; margin: 0 0 7px; }
h1 { font-size: clamp(27px, 4vw, 38px); letter-spacing: -.04em; margin: 0; }
.welcome-copy { color: var(--muted); max-width: 535px; margin: 13px auto 29px; font-size: 12px; line-height: 1.65; }
.suggestions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; text-align: left; max-width:650px; margin:0 auto; }
.suggestion-card { border: 1px solid var(--line); background: white; border-radius: 13px; padding: 16px 13px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(18,40,31,.03); }
.suggestions strong, .suggestions small { display: block; }.suggestions strong { font-size: 10px; }.suggestions small { color: #98a09c; font-size: 8px; margin-top: 4px; }.suggestions b { color: #aeb5b2; }
.suggestion-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 15px; }.suggestion-icon.orange { color: #e3632b; background: #fff0e9; }.suggestion-icon.blue { color: #4682a7; background: #eaf4f8; }.suggestion-icon.green { color: #3f8c6c; background: #e9f5ef; }.suggestion-icon.purple { color:#7356a6; background:#f2edfa; }
.messages { max-width: 850px; margin: 0 auto; display: grid; gap: 28px; }
.message { display: grid; grid-template-columns: 38px 1fr; gap: 13px; animation: enter .25s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.message.user { grid-template-columns: 1fr; justify-items: end; }
.message.user .bubble { color: #26483b; background: #eef3f0; border-radius: 16px 16px 3px 16px; max-width: 75%; padding: 13px 17px; }
.message-avatar { width: 36px; height: 36px; border-radius: 7px; background: var(--orange); color: white; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.bubble { font-size: 13px; line-height: 1.7; min-width: 0; }
.bubble p { margin: 0 0 11px; }.bubble p:last-child { margin-bottom: 0; }
.bubble h2,.bubble h3,.bubble h4 { color:var(--ink); line-height:1.3; margin:20px 0 8px; letter-spacing:-.015em; }
.bubble h2:first-child,.bubble h3:first-child,.bubble h4:first-child { margin-top:0; }
.bubble h2 { font-size:18px; }.bubble h3 { font-size:15px; }.bubble h4 { font-size:13px; }
.bubble ul,.bubble ol { margin: 6px 0 13px; padding-left: 22px; }.bubble li { margin: 7px 0; }
.bubble strong { color: #191818; }.bubble a { color:var(--blue); text-underline-offset:2px; }
.bubble code { padding:2px 5px; border-radius:4px; background:#eef1f2; font-size:.92em; }
.table-scroll { overflow-x:auto; margin:10px 0 16px; border:1px solid var(--line); border-radius:8px; }
.bubble table { width:100%; border-collapse:collapse; min-width:480px; font-size:11px; line-height:1.45; }
.bubble th,.bubble td { padding:9px 11px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.bubble th { color:var(--ink); background:#f1f4f5; font-weight:700; }.bubble tbody tr:last-child td { border-bottom:0; }
.message-meta { color: #9aa29e; font-size: 9px; margin-top: 8px; }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.source { background: #f1f4f2; color: #607069; border-radius: 20px; padding: 5px 8px; font-size: 8px; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing span { animation: blink 1.2s infinite; display: inline-block; margin-right: 3px; }.typing span:nth-child(2) { animation-delay: .15s; }.typing span:nth-child(3) { animation-delay: .3s; } @keyframes blink { 50% { opacity: .2; } }
.composer-wrap { padding: 8px clamp(24px, 7vw, 110px) 15px; background: linear-gradient(transparent, #f8f9fa 20%); }
.composer { max-width: 850px; margin: auto; background: white; border: 1px solid #dce2de; border-radius: 15px; padding: 13px 13px 9px 17px; box-shadow: 0 9px 35px rgba(26,46,38,.08); transition: .2s; }
.composer:focus-within { border-color: #a7bbb2; box-shadow: 0 12px 40px rgba(26,46,38,.12); }
.composer textarea { border: 0; outline: 0; resize: none; width: 100%; max-height: 130px; min-height: 30px; color: var(--ink); font-size: 12px; background: transparent; line-height: 1.5; }
.composer textarea::placeholder { color: #a2aaa6; }
.composer-actions { display: flex; align-items: center; gap: 9px; min-height: 34px; }
.research-button { border: 1px solid transparent; background: #f2f5f3; color: #5c6f66; border-radius: 8px; padding: 6px 9px; font-size: 9px; cursor: pointer; display:flex; align-items:center; gap:6px; transition:.18s ease; }.research-button b { font-weight:700; }.research-button.active { color: white; background: #285bdc; border-color:#6388e8; box-shadow:0 0 0 3px rgba(49,100,230,.14); }.research-button.active::after { content:"ВКЛ"; color:#173575; background:#dbe6ff; border-radius:5px; padding:3px 5px; margin-left:2px; font-size:7px; font-weight:800; letter-spacing:.06em; }.research-button span { font-size: 14px; vertical-align: -1px; }
.hint { margin-left: auto; color: #a0a8a4; font-size: 8px; }
.send-button { width: 31px; height: 31px; border: 0; border-radius: 9px; background: var(--orange); color: white; font-size: 19px; cursor: pointer; box-shadow: 0 7px 14px rgba(255,107,44,.2); display:grid; place-items:center; transition:.18s ease; }.send-button.stop { background:#d94848; box-shadow:0 7px 16px rgba(217,72,72,.25); }.send-button.stop:hover { background:#e35a5a; transform:scale(1.04); }.send-button.stopping { opacity:.6; cursor:wait; }.stop-icon { display:block; width:10px; height:10px; border-radius:2px; background:#fff; }.send-button:disabled { opacity: .45; cursor: wait; }
button:disabled, textarea:disabled { cursor:wait; opacity:.55; }
.session-item:disabled { pointer-events:none; }
.disclaimer { color: #abb2ae; font-size: 8px; text-align: center; margin: 9px 0 0; }
.toast { position: fixed; right: 22px; bottom: 22px; padding: 11px 15px; background: #152b23; color: white; border-radius: 9px; font-size: 11px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; z-index: 10; }.toast.show { opacity: 1; transform: none; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f3f3;
  --muted: #a2aaae;
  --line: #34383a;
  --paper: #151718;
  --white: #202325;
  --green: #f73c01;
  --shadow: 0 18px 60px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] body { background:#151718; }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar { background:#1d2021; }
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .welcome-brand img { background:#fff; border-radius:5px; padding:6px; }
html[data-theme="dark"] .welcome-brand span { color:#fff; background:#2a2e30; border:1px solid #42484b; }
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .history-label { color:#8e969a; }
html[data-theme="dark"] .session-item { color:#aeb5b8; }
html[data-theme="dark"] .session-item:hover { color:#fff; background:#282c2e; }
html[data-theme="dark"] .session-item.active { color:#9bb7ff; background:#25304a; }
html[data-theme="dark"] .admin-entry { color:#c4c9cb; background:#202325; }
html[data-theme="dark"] .admin-entry:hover { background:#2a2422; }
html[data-theme="dark"] .connection { color:#c5cbcd; }
html[data-theme="dark"] .main-panel,
html[data-theme="dark"] .composer-wrap { background:#151718; }
html[data-theme="dark"] .topbar { border-color:#34383a; }
html[data-theme="dark"] .model-state { color:#91999d; }
html[data-theme="dark"] .theme-toggle { color:#d2d6d8; background:#25292a; }
html[data-theme="dark"] .suggestion-card,
html[data-theme="dark"] .composer { background:#202325; border-color:#383d3f; box-shadow:0 10px 35px rgba(0,0,0,.18); }
html[data-theme="dark"] .message.user .bubble { color:#e7e9e9; background:#292d2e; }
html[data-theme="dark"] .bubble strong { color:#fff; }
html[data-theme="dark"] .bubble code,
html[data-theme="dark"] .bubble th { background:#25292a; }
html[data-theme="dark"] .source,
html[data-theme="dark"] .research-button { color:#b5bcbf; background:#282c2e; }
html[data-theme="dark"] .research-button.active { color:#fff; background:#3568e8; border-color:#82a1f2; box-shadow:0 0 0 3px rgba(75,119,235,.28), 0 8px 20px rgba(0,0,0,.22); }
html[data-theme="dark"] .research-button.active::after { color:#dbe5ff; background:#18346f; }
html[data-theme="dark"] .composer textarea { color:#f1f3f3; }
html[data-theme="dark"] .composer:focus-within { border-color:#656d70; box-shadow:0 12px 40px rgba(0,0,0,.24); }
html[data-theme="dark"] .toast { background:#f1f3f3; color:#191818; }
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; inset: 0 auto 0 0; width: 285px; transform: translateX(-105%); transition: .25s; box-shadow: 20px 0 60px rgba(0,0,0,.2); }.sidebar.open { transform: none; }.menu-button { display: block; margin-right: 12px; }.topbar { justify-content: flex-start; padding: 0 17px; }.top-actions { margin-left: auto; }.mode-pill { display: none; }.chat { padding: 24px 16px 16px; }.suggestions { grid-template-columns: 1fr; }.welcome { margin-top: 0; }.composer-wrap { padding: 8px 13px 10px; }.message.user .bubble { max-width: 90%; }.hint { display: none; }
}