:root{ --bg:#0f1115; --panel:#161a21; --panel2:#1d222b; --line:#262c37; --me:#2b5278; --kirby:#20262f; --txt:#e6e9ef; --dim:#8b93a1; --accent:#4a90d9; /* код всегда на тёмном фоне (в обеих темах) → цвета фиксированы, НЕ наследуют --txt/--bg */ --code-bg:#0c0e12; --code-fg:#e6e9ef; --code-head:#12151b; --rec:#e07b2c; /* запись аудио — спокойный оранжевый (не агрессивно-красный) */ } *{box-sizing:border-box} /* стартовый индикатор: виден до boot() → нет «чёрной пустоты» при загрузке/оффлайне */ #boot-status{position:fixed;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center; color:var(--dim);font-size:15px;text-align:center;padding:20px;z-index:5} #boot-status #boot-reset{background:var(--accent);color:#fff;border:0;padding:10px 18px; border-radius:10px;font-size:15px;cursor:pointer} /* Фиксируем область под видимый вьюпорт: НЕ скроллим весь WebView (баг 100vh в PWA на Android). */ html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none} body{background:var(--bg);color:var(--txt);font:16px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; -webkit-text-size-adjust:100%} .hidden{display:none!important} /* тонкий полупрозрачный скролл во всём приложении: видна только каретка, трек прозрачный. Firefox — scrollbar-color (наследуется от html); WebKit — псевдоэлементы. */ html{scrollbar-width:thin;scrollbar-color:rgba(140,150,165,.4) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(140,150,165,.4);border-radius:9px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:rgba(140,150,165,.65);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* login */ #login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px} #login-form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px} #login-form h1{text-align:center;margin:0 0 8px;font-weight:600} #login-form input{background:var(--panel);border:1px solid var(--line);color:var(--txt); padding:12px 14px;border-radius:10px;font-size:16px;outline:none} #login-form input:focus{border-color:var(--accent)} #login-form button{background:var(--accent);color:#fff;border:0;padding:12px;border-radius:10px;font-size:16px;cursor:pointer} .err{color:#e06c6c;font-size:14px;min-height:18px;text-align:center} /* chat — фиксированный контейнер на весь видимый вьюпорт; скроллит только лента */ #chat{position:fixed;inset:0;display:flex;flex-direction:column} #chat header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--panel);border-bottom:1px solid var(--line)} #chat header .title{font-weight:600} #chat header #menu-toggle{background:var(--panel2);border:1px solid var(--line);color:var(--txt); width:38px;height:32px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1} /* выпадающее меню (гамбургер): чат/проект, команды, тема/звук/выход */ #menu{position:absolute;top:calc(56px + env(safe-area-inset-top));right:10px;z-index:60; background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:0 10px 34px rgba(0,0,0,.38);width:min(300px,92vw)} .menu-inner{display:flex;flex-direction:column;gap:8px;padding:12px} .menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--dim)} .menu-row select{flex:1 1 auto;max-width:200px;background:var(--panel2);border:1px solid var(--line); color:var(--txt);border-radius:8px;padding:6px 8px;font-size:13px;cursor:pointer} .menu-row.col{flex-direction:column;align-items:stretch;gap:6px} .menu-lbl{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em} .topic-list{display:flex;flex-direction:column;gap:4px} .topic-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px; padding:9px 11px;font-size:14px;cursor:pointer;text-align:left} .topic-item:hover{border-color:var(--accent,#5b9dff)} .topic-item.active{border-color:var(--accent,#5b9dff);background:var(--panel)} .topic-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topic-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px; background:var(--accent,#5b9dff);color:#fff;font-size:12px;font-weight:600; display:inline-flex;align-items:center;justify-content:center} .menu-sep{height:1px;background:var(--line);margin:2px 0} .menu-cmds{display:flex;flex-wrap:wrap;gap:6px} .menu-cmds button{background:var(--panel2);border:1px solid var(--line);color:var(--txt); padding:6px 10px;border-radius:8px;font-size:13px;cursor:pointer} .menu-actions{display:flex;flex-direction:column;gap:6px} .menu-actions button{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--txt); padding:8px 10px;border-radius:8px;font-size:14px;cursor:pointer} #messages{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding:14px;display:flex;flex-direction:column;gap:8px} #chat footer{flex:0 0 auto} .msg{max-width:86%;padding:8px 12px;border-radius:14px;word-wrap:break-word;white-space:pre-wrap} .msg.user{align-self:flex-end;background:var(--me);border-bottom-right-radius:4px} /* pre-wrap: сохраняем авторские переносы (\n и \n\n) как в Telegram — иначе HTML схлопывает whitespace и абзацы слипаются. Инлайн-теги (//) при этом рендерятся нормально. */ .msg.assistant{align-self:flex-start;background:var(--kirby);border:1px solid var(--line);border-bottom-left-radius:4px;white-space:pre-wrap} .msg .meta{display:block;font-size:11px;color:var(--dim);margin-top:4px} .msg.assistant a{color:var(--accent)} .msg.assistant pre{white-space:pre-wrap;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--line);padding:8px;border-radius:8px;overflow-x:auto;font-size:13px} .msg.assistant code{background:var(--code-bg);color:var(--code-fg);padding:1px 5px;border-radius:5px;font-size:13px} /* футер-бар — на всю ширину (фон/бордер edge-to-edge); флекс-раскладка ввода — во внутреннем враппере .foot-inner, который в широком режиме центрируется до 1800px (см. @media). */ #chat footer{background:var(--panel);border-top:1px solid var(--line);padding:10px 0; padding-bottom:calc(10px + env(safe-area-inset-bottom))} .foot-inner{display:flex;align-items:flex-end;gap:8px;padding:0 10px} /* line-height 22 → одна строка = 22 + паддинги 10+10 + бордер 2 = 44px, ровно как кнопки (не выше) */ #input{flex:1;min-height:22px;max-height:140px;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);color:var(--txt); padding:10px 12px;border-radius:12px;font-size:16px;line-height:22px;outline:none;white-space:pre-wrap;word-wrap:break-word} #input:empty::before{content:attr(data-placeholder);color:var(--dim);pointer-events:none} #input:focus{border-color:var(--accent)} #input .custom-emoji{display:inline-block;vertical-align:middle;margin:0 2px;width:36px;height:36px} #input .custom-emoji video,#input .custom-emoji .lottie-container,#input .custom-emoji span{width:100%;height:100%;display:block} /* общее правило — только геометрия (иначе его bg/border перебивал бы по специфичности #mic/#attach → они ошибочно красились в accent). Цвет заливки — только у #send. */ #chat footer button{width:44px;height:44px;border-radius:12px;font-size:18px;cursor:pointer;flex:0 0 auto} #send{background:var(--accent);color:#fff;border:0} #mic{background:var(--panel2);border:1px solid var(--line)} #mic.rec{background:var(--rec);border-color:var(--rec);color:#fff} /* панель записи полностью перекрывает футер (44px кнопка + 10+10 паддинги + 1px бордер) → без зазора */ #rec-bar{position:fixed;left:0;right:0;bottom:0;background:var(--rec);color:#fff;padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom));min-height:calc(65px + env(safe-area-inset-bottom)); display:flex;align-items:center;gap:10px;font-size:14px} #rec-bar button{background:rgba(255,255,255,.2);border:0;color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer} /* --- код: инлайн-копирование + блоки с шапкой --- */ .msg.assistant code.inline{cursor:pointer;position:relative} .msg.assistant code.inline:hover{outline:1px solid var(--accent)} .codewrap{margin:8px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--code-bg);color:var(--code-fg)} .codewrap .codehead{display:flex;justify-content:space-between;align-items:center; background:var(--code-head);border-bottom:1px solid var(--line);padding:4px 10px;font-size:12px;color:#8b93a1} .codewrap .codehead button{background:#1d222b;border:1px solid var(--line);color:#e6e9ef; padding:2px 8px;border-radius:6px;font-size:12px;cursor:pointer} .codewrap pre{margin:0;border:0;border-radius:0;background:transparent} .copied{color:#5fd07a!important} /* подсветка (встроенная, минималистичная) */ .hl-str{color:#9ece6a}.hl-num{color:#ff9e64}.hl-com{color:#5c6370;font-style:italic}.hl-kw{color:#7aa2f7}.hl-fn{color:#e0af68} /* --- вложения (md-файлы) --- */ .attns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .attn{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line); border-radius:10px;padding:6px 10px;font-size:13px} .attn .nm{color:var(--txt)} .attn a,.attn button{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;padding:0} /* --- модалка предпросмотра md --- */ #preview{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px} #preview .pv-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:820px; max-height:88dvh;display:flex;flex-direction:column;overflow:hidden} #preview .pv-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)} #preview .pv-head #pv-title{font-weight:600;font-size:14px} #preview .pv-actions{display:flex;gap:12px;align-items:center} #preview .pv-actions a{color:var(--accent);text-decoration:none;font-size:14px} #preview .pv-actions button{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer} #pv-body{overflow-y:auto;padding:16px 18px} /* рендер markdown */ .md{line-height:1.5} .md h1,.md h2,.md h3{margin:.7em 0 .3em;line-height:1.25} .md h1{font-size:1.5em}.md h2{font-size:1.3em}.md h3{font-size:1.12em} .md p{margin:.5em 0}.md ul,.md ol{margin:.4em 0 .4em 1.3em}.md li{margin:.15em 0} .md a{color:var(--accent)} .md code{background:var(--code-bg);color:var(--code-fg);padding:1px 5px;border-radius:5px;font-size:13px} .md pre{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--line);padding:10px;border-radius:8px;overflow-x:auto} .md pre code{background:transparent;padding:0} .md blockquote{border-left:3px solid var(--line);margin:.5em 0;padding:.1em .9em;color:var(--dim)} .md hr{border:0;border-top:1px solid var(--line);margin:1em 0} .md table{border-collapse:collapse;margin:.6em 0;display:block;overflow-x:auto} .md th,.md td{border:1px solid var(--line);padding:5px 9px;font-size:14px} .md th{background:var(--panel2)} /* --- шапка: аватар + спиннер «печатает» + команды --- */ #chat header{gap:10px} .avatar-wrap{position:relative;width:34px;height:34px;flex:0 0 auto} #avatar{width:34px;height:34px;border-radius:50%;display:block} .avatar-wrap .ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;pointer-events:none} .avatar-wrap.pending .ring{border-top-color:var(--accent);border-right-color:var(--accent);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} #typing{color:var(--dim);font-size:13px;font-style:italic} #chat header .spacer{flex:1} /* --- аудио в сообщении --- */ .msg audio{display:block;margin-top:6px;max-width:260px;height:34px} /* --- индикатор «сообщение ушло / ассистент думает»: три точки внизу ленты --- */ .msg.dots{display:flex;gap:6px;align-items:center;width:max-content;padding:14px} .msg.dots span{width:8px;height:8px;border-radius:50%;background:var(--dim);animation:dotpulse 1.4s infinite both} .msg.dots span:nth-child(2){animation-delay:.18s} .msg.dots span:nth-child(3){animation-delay:.36s} @keyframes dotpulse{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}} /* --- прикрепление файла (превью до отправки) --- */ #att-pending{padding:6px 12px;display:flex;flex-wrap:wrap;gap:6px} #att-pending .chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px} #att-pending .chip button{background:none;border:0;color:#e06c6c;cursor:pointer;font-size:14px} #attach{background:var(--panel2);border:1px solid var(--line)} #chat.dragover #messages{outline:2px dashed var(--accent);outline-offset:-6px} /* --- широкий монитор (3440x1440): центрированная колонка (лента + ввод по центру) --- */ @media (min-width:900px){ /* центрируем колонку: лента, внутренний враппер футера, панели. Сам