/* ТЕМА: все цвета здесь */
:root{--bg:#0a1822;--line:#12303f;--text:#e6f6ff;--sub:#7fa3b8;--acc:#38c6f4;--me:#0f4a63;--them:#10283a;--chat:#06111a}
*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea{font:inherit;color:inherit}[hidden]{display:none!important}small{color:var(--sub)}
#auth{display:grid;place-items:center;height:100dvh}#af{display:flex;flex-direction:column;gap:10px;width:min(340px,90vw)}
#af input,#af button{padding:11px;border-radius:8px;border:1px solid var(--line);background:transparent}
#af button{background:var(--acc);color:#fff;border:0;cursor:pointer}#as{color:var(--acc);cursor:pointer;text-align:center}#ae{color:#d93a3a;min-height:1em}
#app{display:flex;height:100dvh}.side{width:340px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.top,.hd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}.top{justify-content:space-between}
.top button,.hd button{background:none;border:0;font-size:18px;cursor:pointer}
#q{margin:10px 12px;padding:9px 14px;border:1px solid var(--line);border-radius:20px;background:transparent}
#list{overflow:auto;flex:1}.ci{display:flex;gap:10px;padding:10px 14px;cursor:pointer}.ci:hover,.ci.on{background:var(--them)}
.av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:600;font-size:18px}
.ct{min-width:0;flex:1}.row{display:flex;justify-content:space-between;gap:8px}
.tr{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{flex:1;display:flex;flex-direction:column;background:var(--chat);min-width:0}#empty{margin:auto;color:var(--sub)}
#cv{display:flex;flex-direction:column;height:100%}.hd{background:var(--bg)}#back{display:none}#ht{font-weight:600}#hs{display:block;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pin,#cx{padding:7px 14px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;color:var(--acc)}
#pin{cursor:pointer}#pin span,#cxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#cxx{cursor:pointer}
#msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:4px}
.m{max-width:min(78%,560px)}.m.me{align-self:flex-end}.m.th{align-self:flex-start}
.b{padding:7px 11px;border-radius:12px;background:var(--them);word-break:break-word}.me .b{background:var(--me)}
.tx{white-space:pre-wrap}.b small{display:block;text-align:right;font-size:11px}
.nm{color:var(--acc);font-weight:600;font-size:13px}.rp{border-left:3px solid var(--acc);padding-left:8px;margin-bottom:4px;font-size:13px;color:var(--sub)}
.im{max-width:100%;max-height:340px;border-radius:8px;display:block;margin-bottom:4px}.fl{color:var(--acc)}
.act{display:none;gap:12px;font-size:13px;padding:2px 6px;justify-content:flex-end}.act a{cursor:pointer;color:var(--sub)}.m:hover .act,.m.sel .act{display:flex}
.cmp{display:flex;gap:6px;padding:8px;background:var(--bg);align-items:flex-end}.cmp button{background:none;border:0;font-size:20px;cursor:pointer;padding:6px}
#in{flex:1;resize:none;max-height:120px;padding:9px 14px;border:1px solid var(--line);border-radius:18px;background:transparent}
@media(max-width:700px){.side{width:100%}.chat{display:none}#app.open .side{display:none}#app.open .chat{display:flex}#back{display:block}}
.logo{font:800 34px/1 system-ui;letter-spacing:6px;text-align:center;color:var(--acc);text-shadow:0 0 18px #38c6f4aa;margin-bottom:6px}#at{margin:0}#af button,.av{color:#04151f}