/* ============================================================================
   AI СОВЕТ — дизайн-система
   Тёмный премиальный интерфейс: стеклянные панели, мягкое свечение,
   скользящие индикаторы, сдержанная анимация.
   ========================================================================= */
:root{
  --bg:#08090B; --bg2:#0B0D10;
  --surface:#101317; --surface2:#151920; --surface3:#1C222C;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#EDEFF2; --text2:#A7AEB8; --text3:#6C7481;
  --accent:#8B7CFF; --accent2:#4F8CFF;
  --ok:#34D399; --warn:#FBBF24; --danger:#F87171;

  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 20px rgba(0,0,0,.4);
  --sh-3:0 24px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);

  --font:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Unbounded',var(--font);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font); font-size:15px; line-height:1.5;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
button,input,textarea,select{font-family:inherit}
::selection{background:rgba(139,124,255,.32)}

/* ---------- фон: аврора + зерно ---------- */
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(100px); will-change:transform}
.b1{width:560px;height:560px;background:radial-gradient(circle,#6D5BFF,transparent 66%);
  top:-200px;left:-140px;opacity:.30;animation:fl1 30s ease-in-out infinite}
.b2{width:520px;height:520px;background:radial-gradient(circle,#2F7DFF,transparent 66%);
  bottom:-220px;right:-120px;opacity:.24;animation:fl2 36s ease-in-out infinite}
.b3{width:420px;height:420px;background:radial-gradient(circle,#19C6A0,transparent 66%);
  top:44%;left:52%;opacity:.13;animation:fl3 42s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,80px) scale(1.15)}}
@keyframes fl2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-140px,-70px) scale(1.1)}}
@keyframes fl3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,110px) scale(1.2)}}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

#app{position:relative; z-index:2; display:flex; height:100vh; overflow:hidden}

/* ---------- скроллбары ---------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:20px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20);background-clip:content-box}

/* ============================ SIDEBAR ============================ */
#sidebar{
  width:268px; flex:0 0 268px; display:flex; flex-direction:column;
  background:rgba(11,13,16,.72); backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-right:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; padding:20px 18px 16px}
.brand-mark{
  width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,#8B7CFF,#4F8CFF 60%,#2FB8A0);
  box-shadow:0 8px 24px -8px rgba(110,100,255,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-mark span{font-family:var(--display);font-size:13px;color:#fff;letter-spacing:.02em}
.brand-txt{min-width:0}
.brand-txt b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.01em;line-height:1.2}
.brand-txt span{display:block;font-size:11.5px;color:var(--text3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#chatList{position:relative; display:flex; flex-direction:column; gap:2px; padding:6px 10px; overflow-y:auto; flex:1}
.nav-thumb{
  position:absolute; top:0; left:10px; right:10px; height:0; border-radius:12px;
  background:var(--surface3); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 20px -10px rgba(0,0,0,.9);
  transition:transform .42s var(--out), height .42s var(--out), opacity .2s;
  pointer-events:none; opacity:0; z-index:0;
}
.nav-thumb.on{opacity:1}
.nav-group{position:relative; z-index:1; padding:18px 10px 10px}
.nav-group.first{padding-top:8px}
.nav-group-t{font-size:13px; font-weight:600; color:var(--text); letter-spacing:-.005em}
.nav-group-s{font-size:10.5px; line-height:1.45; color:var(--text3); margin-top:4px}
.chat-item{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px;
  cursor:pointer; color:var(--text2); user-select:none;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.chat-item .ic{
  width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:9px;font-size:15px;
  background:var(--surface2); border:1px solid var(--line);
  transition:transform .25s var(--out), border-color .2s, background .2s;
}
.chat-item .tt{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item:hover{color:var(--text)}
.chat-item:hover .ic{transform:translateY(-1px) scale(1.04); border-color:var(--line2)}
.chat-item.active{color:#fff}
.chat-item.active .tt{font-weight:600}
.chat-item.active .ic{
  background:linear-gradient(180deg,rgba(139,124,255,.28),rgba(79,140,255,.10));
  border-color:rgba(139,124,255,.45);
  box-shadow:0 6px 18px -8px rgba(139,124,255,.9);
}

.sidebar-foot{padding:14px 16px 16px; border-top:1px solid var(--line)}
.token-state{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);
  background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:5px 11px 5px 9px;margin-bottom:12px}
.token-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text3)}
.token-state.ok::before{background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.18);animation:pulseDot 2.4s ease-in-out infinite}
.token-state.bad::before{background:var(--danger);box-shadow:0 0 0 3px rgba(248,113,113,.18)}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.16)}50%{box-shadow:0 0 0 6px rgba(52,211,153,.05)}}
.bots-legend{display:flex;flex-wrap:wrap;gap:6px 10px}
.legend-chip{display:flex;align-items:center;gap:6px;color:var(--text3);font-size:11.5px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ============================ MAIN ============================ */
#main{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}

#topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 26px; border-bottom:1px solid var(--line);
  background:rgba(8,9,11,.55); backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  position:sticky; top:0; z-index:20;
}
.head-txt{min-width:0}
.chat-title{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:12px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}

/* --- сегментированный переключатель со скользящим бегунком --- */
.seg{position:relative; display:flex; gap:2px; padding:3px;
  background:var(--surface2); border:1px solid var(--line); border-radius:12px}
.seg-wrap{flex-wrap:wrap; border-radius:14px}
.seg-thumb{
  position:absolute; top:3px; left:0; height:0; width:0; border-radius:9px; z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
  border:1px solid var(--line2);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .38s var(--out), width .38s var(--out), height .38s var(--out), opacity .2s;
  opacity:0; pointer-events:none;
}
.seg-thumb.on{opacity:1}
.seg button{
  position:relative; z-index:1; background:transparent; border:none; cursor:pointer;
  color:var(--text2); padding:8px 14px; font-size:13px; font-weight:500; white-space:nowrap;
  border-radius:9px; transition:color .22s var(--ease);
}
.seg button:hover{color:var(--text)}
.seg button.active{color:#fff; font-weight:600}

/* --- кнопки --- */
.btn{
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--surface2); color:var(--text);
  padding:9px 15px; border-radius:11px; font-size:13px; font-weight:500;
  transition:border-color .2s, background .2s, transform .18s var(--out), box-shadow .25s;
}
.btn:hover{border-color:var(--line2); background:var(--surface3); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--surface2)}
.btn.icon{padding:7px 11px;font-size:14px;line-height:1}
.btn.danger:hover{border-color:rgba(248,113,113,.45); color:#ffb9b9; background:rgba(248,113,113,.08)}
.btn.primary{
  background:linear-gradient(180deg,#FFFFFF,#DCE0E6); color:#0A0B0D; border:none; font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 28px -14px rgba(255,255,255,.65);
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 34px -14px rgba(255,255,255,.75)}
.btn.primary::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-130%); transition:transform .75s var(--ease);
}
.btn.primary:hover::after{transform:translateX(130%)}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary:disabled::after{display:none}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);
  pointer-events:none;animation:rip .6s var(--out) forwards}
.btn.primary .ripple{background:rgba(0,0,0,.18)}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* ============================ ЧАТ ============================ */
#messages{flex:1; overflow-y:auto; padding:30px 26px 14px; display:flex; flex-direction:column; gap:20px}
#messages>*{width:100%; max-width:940px; margin-inline:auto}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.msg,.vote-card,.result-card,.summary-card,.round-sep{animation:rise .5s var(--out) both}

.round-sep{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:6px 0 0}
.round-sep::before,.round-sep::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.msg{display:flex; gap:12px; align-items:flex-start}
.msg.user{flex-direction:row-reverse}
.avatar{
  width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#08090B;
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 8px 20px -10px rgba(0,0,0,.9);
}
.msg-body{min-width:0; max-width:78%}
.msg.user .msg-body{display:flex;flex-direction:column;align-items:flex-end}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--text2)}
.bubble{
  padding:13px 16px; border-radius:var(--r); line-height:1.58; white-space:pre-wrap;
  word-wrap:break-word; overflow-wrap:anywhere; font-size:14.5px;
  background:var(--surface); border:1px solid var(--line);
  border-top-left-radius:5px; box-shadow:var(--sh-1);
}
.msg.user .bubble{
  background:linear-gradient(180deg,#FFFFFF,#E4E7EC); color:#0A0B0D; border:none;
  border-top-left-radius:var(--r); border-top-right-radius:5px;
  box-shadow:0 10px 30px -16px rgba(255,255,255,.5);
}
.msg.bot.err .bubble{border-color:rgba(248,113,113,.35); color:#ffc0c0; background:rgba(248,113,113,.05)}
.badge-win{margin-left:2px;background:linear-gradient(180deg,#FCD34D,#F59E0B);color:#241a00;
  border-radius:7px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 18px -8px rgba(251,191,36,.9)}
.tag-follow{color:var(--text3);font-weight:500;font-size:12px}

/* --- голосование --- */
.vote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.vote-card h4{margin:0 0 12px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.vote-row{display:flex;gap:9px;align-items:baseline;padding:8px 0;font-size:13.5px;border-top:1px solid var(--line)}
.vote-row:first-of-type{border-top:none}
.vote-row .voter{font-weight:600;min-width:84px}
.vote-row .arrow{color:var(--text3)}
.vote-row .reason{color:var(--text3);font-size:13px}

.result-card{background:var(--surface);border:1px solid rgba(251,191,36,.28);border-radius:var(--r-lg);padding:16px 18px;
  box-shadow:0 22px 56px -40px rgba(251,191,36,.8)}
.result-card h4{margin:0 0 14px;font-size:14.5px;font-weight:600}
.tally{display:flex;flex-direction:column;gap:9px}
.tally-row{display:flex;align-items:center;gap:12px;font-size:13px}
.tally-row .name{min-width:84px;font-weight:500;color:var(--text2)}
.bar{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.bar>span{display:block;height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width 1.05s var(--out)}
.tally-row.win .bar>span{background:linear-gradient(90deg,#FBBF24,#FCD34D)}
.tally-row .cnt{min-width:24px;text-align:right;color:var(--text3);font-variant-numeric:tabular-nums}

/* --- итог --- */
.summary-card{
  position:relative; border-radius:var(--r-xl); padding:20px 22px;
  background:linear-gradient(180deg,rgba(52,211,153,.09),rgba(255,255,255,.012));
  border:1px solid rgba(52,211,153,.3);
  box-shadow:0 30px 70px -45px rgba(52,211,153,.85);
}
.summary-card.err{border-color:var(--line);background:var(--surface);box-shadow:none}
.summary-head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#6EE7B7;margin-bottom:10px}
.summary-head::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.summary-body{line-height:1.65;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;font-size:14.5px}

/* --- пустое состояние --- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:8vh 20px 0;animation:rise .6s var(--out) both}
.empty-mark{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;margin-bottom:8px;
  background:linear-gradient(145deg,rgba(139,124,255,.22),rgba(79,140,255,.10));
  border:1px solid rgba(139,124,255,.32); font-size:26px;
  box-shadow:0 20px 50px -24px rgba(139,124,255,.9)}
.empty h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.empty p{margin:0;color:var(--text3);font-size:13.5px;max-width:44ch;line-height:1.6}
.empty-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px;max-width:620px}
.chip{background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:9px 15px;
  font-size:13px;color:var(--text2);cursor:pointer;
  transition:transform .2s var(--out), border-color .2s, color .2s, background .2s}
.chip:hover{transform:translateY(-2px);border-color:rgba(139,124,255,.45);color:#fff;background:var(--surface3)}

/* --- статус «думает» --- */
.status{padding:10px 26px;font-size:13px;border-top:1px solid var(--line);
  background:rgba(8,9,11,.6);backdrop-filter:blur(16px);display:flex;align-items:center;gap:10px}
.status b{color:var(--text)}
.status .shimmer{background:linear-gradient(90deg,var(--text3) 20%,var(--text) 45%,var(--text3) 70%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sh 2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.dots{display:inline-flex;gap:3px;flex:none}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bnc 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bnc{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}
.hidden{display:none !important}

/* --- композер --- */
#composer{padding:14px 26px 18px; border-top:1px solid var(--line);
  background:rgba(8,9,11,.6); backdrop-filter:blur(20px) saturate(140%)}
.composer-box{display:flex;gap:10px;align-items:flex-end;max-width:940px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 8px 8px 6px;
  transition:border-color .25s, box-shadow .25s}
.composer-box:focus-within{border-color:rgba(139,124,255,.45);
  box-shadow:0 0 0 4px rgba(139,124,255,.10), var(--sh-2)}
#input{flex:1;resize:none;min-height:40px;max-height:190px;background:transparent;color:var(--text);
  border:none;padding:10px 12px;font-size:14.5px;line-height:1.5;outline:none;
  transition:height .12s ease;
  scrollbar-width:none;-ms-overflow-style:none}
/* полоску прокрутки в поле не показываем — она мозолит глаза, прокрутка работает */
#input::-webkit-scrollbar{width:0;height:0;display:none}
@media (prefers-reduced-motion:reduce){ #input{transition:none} }
#input::placeholder{color:var(--text3)}
.composer-hint{max-width:940px;margin:9px auto 0;font-size:11.5px;color:var(--text3);text-align:center}

/* ============================ ГЕНЕРАЦИЯ ============================ */
#genView{flex:1;overflow-y:auto;padding:26px 26px 48px}
.gen-inner{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
#genModes{align-self:flex-start;max-width:100%}
.gen-panel{display:flex;flex-direction:column;gap:20px}
.gen-panel>*{animation:rise .45s var(--out) both}
.gen-desc{color:var(--text2);font-size:14px;line-height:1.6;margin:-4px 0 0}

.gen-field{display:flex;flex-direction:column;gap:9px}
.gen-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);font-weight:600}
.gen-select,.gen-prompt{
  background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;font-size:14.5px;width:100%;
  transition:border-color .22s, box-shadow .22s;
}
.gen-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236C7481' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.gen-select:focus,.gen-prompt:focus{outline:none;border-color:rgba(139,124,255,.5);
  box-shadow:0 0 0 4px rgba(139,124,255,.10)}
.gen-prompt{resize:vertical;min-height:96px;line-height:1.55}
.gen-prompt::placeholder{color:var(--text3)}

.gen-toggle{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  font-size:14.5px;transition:border-color .2s,background .2s}
.gen-toggle:hover{border-color:var(--line2)}
.gen-toggle input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* --- загрузка файлов --- */
.gen-upload{display:flex;flex-direction:column;gap:12px}
.gen-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:26px 20px;border:1.5px dashed var(--line2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.015);cursor:pointer;text-align:center;
  transition:border-color .22s, background .22s, transform .22s var(--out);
}
.gen-drop:hover{border-color:rgba(139,124,255,.5);background:rgba(139,124,255,.05)}
.gen-drop.drag{border-color:var(--accent);background:rgba(139,124,255,.10);transform:scale(1.012);
  box-shadow:0 0 0 4px rgba(139,124,255,.10)}
.gen-drop .up-ic{font-size:24px;line-height:1;margin-bottom:3px}
.gen-drop .up-t{font-size:14px;font-weight:600;color:var(--text)}
.gen-drop .up-h{font-size:12px;color:var(--text3)}

.gen-thumbs{display:flex;flex-wrap:wrap;gap:11px}
.gen-thumb{position:relative;width:104px;height:104px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);animation:pop .35s var(--out) both}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.gen-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--out)}
.gen-thumb:hover img{transform:scale(1.06)}
.gen-thumb-x{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;border:none;
  border-radius:50%;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:12px;line-height:1;
  backdrop-filter:blur(6px);transition:background .2s,transform .2s var(--out)}
.gen-thumb-x:hover{background:var(--danger);transform:scale(1.1)}

.gen-files{display:flex;flex-direction:column;gap:9px}
.gen-file{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;animation:pop .35s var(--out) both}
.gen-file-ic{font-size:17px}
.gen-file-nm{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gen-file .gen-thumb-x{position:static;width:24px;height:24px;background:var(--surface3)}

/* --- выбор модели --- */
.gen-adv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gen-adv>summary{cursor:pointer;padding:14px 16px;font-size:14px;list-style:none;user-select:none;
  display:flex;align-items:center;gap:8px;transition:background .2s}
.gen-adv>summary:hover{background:var(--surface2)}
.gen-adv>summary::-webkit-details-marker{display:none}
.gen-adv>summary::before{content:'';width:6px;height:6px;border-right:1.6px solid var(--text3);
  border-bottom:1.6px solid var(--text3);transform:rotate(-45deg);transition:transform .28s var(--out);margin-right:2px}
.gen-adv[open]>summary::before{transform:rotate(45deg)}
.gen-adv-hint{color:var(--text3);font-size:13px;font-weight:400}
.gen-adv-single{padding:14px 16px;font-size:14px;line-height:1.55}
.gen-model-list{display:flex;flex-direction:column;gap:9px;padding:4px 14px 14px}
.gen-model-row{
  position:relative;overflow:hidden;display:flex;gap:11px;align-items:flex-start;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  transition:border-color .22s, background .22s, transform .2s var(--out);
}
.gen-model-row::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 62%);
  transition:opacity .28s}
.gen-model-row:hover::before{opacity:1}
.gen-model-row:hover{border-color:var(--line2);transform:translateY(-1px)}
.gen-model-row.sel{border-color:rgba(139,124,255,.5);background:rgba(139,124,255,.07)}
.gen-model-row input{margin-top:3px;accent-color:var(--accent);flex:none}
.gen-model-txt{font-size:14px;line-height:1.5}
.gen-model-note{color:var(--text3);font-size:12.5px}

.tier-chip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:5px;padding:2px 7px;margin-right:8px;vertical-align:middle}
.tier-prem{color:#0D0A24;background:linear-gradient(180deg,#C4B5FD,#A78BFA)}
.tier-mid{color:#04152B;background:linear-gradient(180deg,#93C5FD,#60A5FA)}
.tier-low{color:#012019;background:linear-gradient(180deg,#6EE7B7,#34D399)}
.badge-hit{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(180deg,#FCD34D,#F59E0B);color:#241a00;border-radius:5px;padding:2px 7px;margin-left:7px}
.badge-new{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(180deg,#6EE7B7,#34D399);color:#012019;border-radius:5px;padding:2px 7px;margin-left:7px}

.gen-run{align-self:flex-start;padding:13px 28px;font-size:15px;border-radius:var(--r)}
.gen-result{margin-top:2px}
.gen-stub{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;color:var(--text2);line-height:1.7;font-size:13.5px;animation:rise .4s var(--out) both}
.gen-stub b{color:var(--text)}
.gen-stub code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#C4B5FD;
  background:rgba(139,124,255,.12);padding:2px 7px;border-radius:6px}

/* ============================ МОДАЛКА ============================ */
.modal{position:fixed;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:100;animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  width:min(780px,92vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--sh-3);
  animation:popIn .32s var(--out) both}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;
  border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
.modal-body{padding:8px 20px 18px;overflow:auto}
.test-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.test-row:first-child{border-top:none}
.test-row .st{width:18px;flex:none}
.test-row .slug{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text3);min-width:170px;font-size:12px}
.test-row .msg-t{color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.test-row.ok .st{color:var(--ok)}
.test-row.bad .st{color:var(--danger)}

/* ============================ АДАПТИВ ============================ */
@media (max-width:1180px){
  .chat-sub{display:none}
  .controls{gap:8px}
  .seg button{padding:8px 12px;font-size:12.5px}
}
@media (max-width:1000px){
  #topbar{padding:12px 18px}
  #messages{padding:24px 18px 12px}
  #composer{padding:12px 18px 16px}
  #genView{padding:20px 18px 40px}
}
@media (max-width:860px){
  #sidebar{width:74px;flex-basis:74px}
  .brand{justify-content:center;padding:18px 0 14px}
  .brand-txt{display:none}
  .nav-group{display:none}
  .chat-item{justify-content:center;padding:9px 0}
  .chat-item .tt{display:none}
  .nav-thumb{left:12px;right:12px}
  /* на узком экране подвал не прячем, а сжимаем: круглая кнопка профиля
     (внутри неё выход, данные и удаление аккаунта) и баланс одним числом.
     Селекторы с #sidebar — чтобы перебить общие правила ниже по файлу. */
  #sidebar .sidebar-foot{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 6px 14px}
  #sidebar .user-line{justify-content:center;width:100%}
  #sidebar .user-name{display:none}
  #sidebar .user-prof{margin:0;padding:6px 9px;border-radius:999px;font-size:10.5px;
    line-height:1.1;letter-spacing:.02em}
  #sidebar .balance-box{width:100%;padding:6px 0;text-align:center}
  #sidebar .bal-label,#sidebar .bal-unit,#sidebar .bal-prices,#sidebar .bal-warn{display:none}
  #sidebar .bal-line{justify-content:center;gap:0}
  #sidebar .bal-value{font-size:13px;color:var(--text2)}
  /* на телефоне клавиатурные подсказки ни о чём — там нет Shift+Enter */
  .composer-hint{display:none}
  /* панель над чатом на телефоне: одна строка с горизонтальной прокруткой,
     служебная проверка моделей уходит в профиль и тут не показывается */
  #topbar{align-items:center;gap:10px}
  #chatControls{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
  #chatControls::-webkit-scrollbar{display:none}
  #chatControls > *{flex:none}
  #testBtn{display:none}
  #topbar .chat-title{font-size:15px}
  .chat-sub{display:none}
  .controls{gap:7px}
  .seg button{padding:8px 11px;font-size:12.5px}
  .btn{padding:8px 12px;font-size:12.5px}
  .msg-body{max-width:86%}
}
@media (max-width:560px){
  #topbar{flex-wrap:wrap;gap:10px}
  .controls{width:100%}
  .empty{padding-top:5vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .blob{animation:none}
}

/* ---------- результат генерации ---------- */
.gen-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;animation:rise .4s var(--out) both}
.gen-out.ok{border-color:rgba(52,211,153,.3);
  background:linear-gradient(180deg,rgba(52,211,153,.07),rgba(255,255,255,.012));
  box-shadow:0 28px 64px -46px rgba(52,211,153,.8)}
.gen-out.fail{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.05)}
.gen-out-head{display:flex;align-items:center;gap:10px;font-size:14.5px;margin-bottom:12px;flex-wrap:wrap}
.gen-out.ok .gen-out-head b{color:#6EE7B7}
.gen-out.fail .gen-out-head b{color:#FCA5A5}
.gen-out-sub{color:var(--text3);font-size:12.5px;font-weight:500;margin-left:auto}
.gen-out-err{color:#FCA5A5;font-size:13.5px;line-height:1.6;word-break:break-word}
.gen-out-note{color:var(--text3);font-size:12px;margin-top:10px;line-height:1.5}

.gen-progress{height:6px;background:rgba(255,255,255,.07);border-radius:20px;overflow:hidden}
.gen-progress>span{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .8s var(--out);position:relative;overflow:hidden}
.gen-progress>span::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:swipe 1.5s linear infinite}
@keyframes swipe{to{transform:translateX(100%)}}

.gen-media{display:flex;flex-direction:column;gap:12px}
.gen-media img,.gen-media video{width:100%;height:auto;border-radius:var(--r);display:block;
  border:1px solid var(--line);background:var(--surface2);box-shadow:var(--sh-2)}
.gen-media audio{width:100%}
.gen-out-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}

/* ---------- кнопка «Копировать» у текстов ---------- */
.copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  background:transparent;border:none;color:var(--text3);cursor:pointer;
  padding:3px 7px;border-radius:7px;font-size:11.5px;font-weight:500;font-family:inherit;
  opacity:0;transition:opacity .2s,color .2s,background .2s}
.msg:hover .copy-btn,.summary-card:hover .copy-btn,.copy-btn:focus-visible{opacity:1}
.copy-btn:hover{color:var(--text);background:rgba(255,255,255,.07)}
.copy-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.copy-btn.done{color:var(--ok);opacity:1}
.msg.user .copy-btn{color:var(--text3)}
@media (hover:none){.copy-btn{opacity:1}}

/* ---------- файл результата + кнопка скачивания ---------- */
.gen-item{display:flex;flex-direction:column;gap:10px}
.gen-item + .gen-item{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.gen-item-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gen-item-bar .btn{padding:8px 15px;font-size:13px}
.gen-item-name{color:var(--text3);font-size:11.5px;margin-left:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- панель выбора агента ---------- */
.agent-bar{margin:16px 26px 0;align-self:flex-start;max-width:calc(100% - 52px);flex:none}
.agent-bar button{font-size:12.5px;padding:7px 12px}
.agent-bar{max-height:none}
@media (max-width:1000px){ .agent-bar{margin:12px 18px 0;max-width:calc(100% - 36px)} }
.agent-avatar{font-size:15px;background:linear-gradient(180deg,var(--surface3),var(--surface2));
  border:1px solid var(--line);color:var(--text)}

/* ---------- память о пользователе ---------- */
.mem-box{margin:12px 26px 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;flex:none}
.mem-box>summary{cursor:pointer;list-style:none;user-select:none;padding:11px 16px;
  font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;transition:background .2s}
.mem-box>summary::-webkit-details-marker{display:none}
.mem-box>summary::before{content:'';width:6px;height:6px;border-right:1.6px solid var(--text3);
  border-bottom:1.6px solid var(--text3);transform:rotate(-45deg);transition:transform .28s var(--out)}
.mem-box[open]>summary::before{transform:rotate(45deg)}
.mem-box>summary:hover{background:var(--surface2)}
.mem-box>summary b{color:var(--text);font-weight:600}
.mem-hint{margin-left:auto;color:var(--text3);font-size:11.5px}

.mem-body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px}
.mem-section{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);
  font-weight:600;margin-top:6px}
.mem-section span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--text3);opacity:.75}
.mem-section span::before{content:' · '}

.mem-profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.mem-field{display:flex;flex-direction:column;gap:5px}
.mem-field>span{font-size:11.5px;color:var(--text3)}
.mem-field input,.mem-add input{background:var(--surface2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;width:100%;transition:border-color .2s}
.mem-field input:focus,.mem-add input:focus{outline:none;border-color:rgba(139,124,255,.5)}

.mem-facts{display:flex;flex-direction:column;gap:7px}
.mem-fact{display:flex;align-items:center;gap:10px;background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.mem-k{color:var(--text3);min-width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-del{flex:none;width:24px;height:24px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--text3);font-size:12px;transition:background .2s,color .2s}
.mem-del:hover{background:rgba(248,113,113,.15);color:var(--danger)}
.mem-empty{color:var(--text3);font-size:13px;line-height:1.55}

.mem-add{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.mem-in-k{flex:0 0 170px}
.mem-in-v{flex:1;min-width:190px}
.mem-add .btn{padding:9px 16px;font-size:13px;flex:none}
.mem-note{font-size:12px;min-height:16px}
.mem-note.ok{color:var(--ok)}
.mem-note.bad{color:#FCA5A5}

@media (max-width:1000px){ .mem-box{margin:10px 18px 0} }

/* ---------- экран входа ---------- */
#authScreen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto}
.auth-card{width:min(420px,100%);background:rgba(16,19,23,.86);backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--sh-3);
  animation:rise .5s var(--out) both}
.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.auth-brand b{display:block;font-family:var(--display);font-size:16px;line-height:1.2}
.auth-brand span{display:block;font-size:11.5px;color:var(--text3);margin-top:3px}
.auth-tabs{width:100%;margin-bottom:20px}
.auth-tabs button{flex:1;justify-content:center;text-align:center}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field>span{font-size:11.5px;color:var(--text3)}
.auth-field input{background:var(--surface2);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:12px 14px;font:inherit;font-size:14.5px;transition:border-color .2s,box-shadow .2s}
.auth-field input:focus{outline:none;border-color:rgba(139,124,255,.5);box-shadow:0 0 0 4px rgba(139,124,255,.10)}
.auth-submit{margin-top:6px;padding:13px;font-size:15px;width:100%}
.auth-err{min-height:18px;font-size:13px;color:#FCA5A5;text-align:center}

/* ---------- пользователь в подвале сайдбара ---------- */
#userBox{margin-bottom:10px}
.user-line{display:flex;align-items:center;gap:8px}
.user-name{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-out{margin-left:auto;flex:none;background:transparent;border:none;color:var(--text3);
  cursor:pointer;font-size:11.5px;font-family:inherit;padding:3px 7px;border-radius:7px;transition:.2s}
.user-out:hover{color:var(--text);background:rgba(255,255,255,.07)}
.user-warn{font-size:11px;color:var(--warn);margin-top:5px}
.user-prof{margin-left:auto;flex:none;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text2);font-family:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.user-prof:hover{background:rgba(255,255,255,.1);color:var(--text);border-color:rgba(255,255,255,.18)}

/* итог: кто именно его свёл + аварийный вариант */
.summary-by{margin-left:auto;font-size:11px;color:var(--text3);font-weight:500;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.summary-card .copy-btn{margin-left:10px}
.summary-card.fallback{border-color:rgba(251,191,36,.35);
  background:linear-gradient(180deg,rgba(251,191,36,.07),rgba(255,255,255,.012));
  box-shadow:0 26px 60px -44px rgba(251,191,36,.7)}
.summary-card.fallback .summary-head{color:#FCD34D}
.summary-card.fallback .summary-head::before{background:var(--warn);
  box-shadow:0 0 0 4px rgba(251,191,36,.16)}

/* ---------- очистка памяти и права на данные ---------- */
.mem-hint-line{font-size:12px;color:var(--text3);line-height:1.5;
  padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.mem-tools{display:flex;gap:9px;flex-wrap:wrap}
.mem-tools .btn{padding:8px 13px;font-size:12.5px}

.user-acts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px}
.user-link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:11.5px;color:var(--text3);text-decoration:underline;text-underline-offset:2px;
  transition:color .2s}
.user-link:hover{color:var(--text)}
.user-link.danger:hover{color:var(--danger)}

/* ---------- баланс ---------- */
.balance-box{margin-bottom:12px}
.bal-line{display:flex;align-items:baseline;gap:7px;background:var(--surface2);
  border:1px solid var(--line);border-radius:12px;padding:9px 13px}
.bal-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.bal-value{margin-left:auto;font-size:17px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bal-unit{font-size:11.5px;color:var(--text3)}
.bal-line.low{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
.bal-line.low .bal-value{color:#FCD34D}
.bal-warn{font-size:11px;color:var(--warn);margin-top:5px}


/* ---------- профиль ---------- */
.modal-prof{max-width:620px}
.prof-sec{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
  margin:20px 0 10px;display:flex;align-items:baseline;gap:8px}
.prof-sec:first-child{margin-top:8px}
.prof-sec span{text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text3);opacity:.75}
.prof-acc{display:flex;align-items:center;gap:14px;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:12px 14px}
.prof-acc-l{min-width:0;flex:1}
.prof-email{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-badge{margin-top:4px;font-size:11.5px}
.prof-badge.ok{color:var(--ok,#5bd6a4)}
.prof-badge.warn{color:var(--warn)}
.prof-bal{display:flex;align-items:baseline;gap:5px;flex:none}
.prof-bal-v{font-size:20px;font-weight:600;color:var(--text)}
.prof-bal-u{font-size:11.5px;color:var(--text3)}
.prof-line{font-size:12.5px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.prof-row{display:flex;flex-wrap:wrap;gap:8px}
.prof-note{min-height:18px;margin-top:12px;font-size:12px}
.prof-note.ok{color:var(--ok,#5bd6a4)}
.prof-note.bad{color:var(--danger)}
.mem-link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;
  color:var(--accent,#8b7cff);text-decoration:underline;text-underline-offset:2px}
.mem-link:hover{opacity:.8}


/* ---------- цена генерации ---------- */
.gen-price{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px}
.gp-main{font-size:13px;color:var(--text)}
.gp-main.low{color:var(--warn)}
.gp-sub{font-size:11.5px;color:var(--text3)}
.gp-sub.low{color:var(--warn)}
.gp-warn{font-size:12px;color:var(--warn)}


/* ---------- экран «Цены» ---------- */
.modal-prices{max-width:700px}
.prc-top{font-size:12.5px;color:var(--text2);line-height:1.55;margin:6px 0 4px}
.prc-sec{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
  margin:22px 0 10px;display:flex;align-items:baseline;gap:8px}
.prc-sec span{text-transform:none;letter-spacing:0;font-size:11.5px;opacity:.75}
.prc-tbl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.prc-row{display:flex;align-items:baseline;gap:10px;padding:9px 13px;background:var(--surface2)}
.prc-row + .prc-row{border-top:1px solid var(--line)}
.prc-name{flex:1;min-width:0;font-size:13px;color:var(--text)}
.prc-coins{flex:none;font-size:13px;font-weight:600;color:var(--text)}
.prc-rub{flex:none;width:92px;text-align:right;font-size:12px;color:var(--text3)}
.prc-note{flex:none;font-size:11px;color:var(--text3);opacity:.8}
.prc-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.prc-pack{position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px}
.prc-pack.best{border-color:rgba(139,124,255,.5)}
.pp-name{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3)}
.pp-coins{font-size:17px;font-weight:600;color:var(--text);margin-top:5px}
.pp-price{font-size:14px;color:var(--text2);margin-top:2px}
.pp-per{font-size:11.5px;color:var(--text3);margin-top:3px}
.pp-disc{position:absolute;top:10px;right:10px;font-size:11px;color:#5bd6a4}
.prc-soon{font-size:11.5px;color:var(--text3);margin-top:8px}
.prc-rules{display:flex;flex-direction:column;gap:6px}
.prc-rule{font-size:12.5px;color:var(--text2);line-height:1.5;padding-left:14px;position:relative}
.prc-rule:before{content:'·';position:absolute;left:4px;color:var(--text3)}

/* цена в панели генерации */
.gp-head{display:flex;align-items:baseline;gap:9px}
.gp-coins{font-size:15px;font-weight:600;color:var(--text)}
.gp-coins.low{color:var(--warn)}
.gp-rub{font-size:12px;color:var(--text3)}
.gp-all{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:12px;
  color:var(--text3);text-decoration:underline;text-underline-offset:2px}
.gp-all:hover{color:var(--text)}
.gen-adv-price,.gen-model-price{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;
  color:var(--text2);background:rgba(255,255,255,.06);border-radius:999px;padding:1px 8px}
.bal-prices{margin-top:7px;width:100%;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:11.5px;color:var(--text3);text-align:right;text-decoration:underline;text-underline-offset:2px}
.bal-prices:hover{color:var(--text)}


/* ---------- марки моделей на вкладках режимов ---------- */

.mode-title{display:block}
.mode-brands{display:flex;flex-wrap:wrap;gap:4px}
.mode-brand{font-size:10.5px;letter-spacing:.01em;color:var(--text3);background:rgba(255,255,255,.05);
  border:1px solid transparent;border-radius:999px;padding:1px 7px;cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease}
.mode-brand:hover{color:var(--text);background:rgba(255,255,255,.12)}
.mode-brand.on{color:var(--text);background:rgba(139,124,255,.18);border-color:rgba(139,124,255,.45)}


/* ---------- выбор модели: бренды, версии, поиск ---------- */
.gen-find{margin:8px 0 10px}
.gen-find-in{width:100%;background:var(--surface2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:13px;padding:8px 11px;border-radius:var(--r-md);outline:none}
.gen-find-in:focus{border-color:rgba(139,124,255,.5)}
.gen-brand + .gen-brand{margin-top:12px}
.gen-brand-head{display:flex;align-items:baseline;gap:8px;margin:0 0 5px 2px}
.gen-brand-name{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.gen-brand-cnt{font-size:11px;color:var(--text3);opacity:.7}
.gen-empty-find{font-size:12.5px;color:var(--text3);padding:10px 2px}
.mb-caret{opacity:.6;font-size:9px}
.mode-brand.more{font-style:italic;opacity:.8}


/* ---------- строка выбора модели под вкладками ---------- */
.model-bar{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:2px 0 16px}
.model-bar.hidden{display:none}
.mb-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-right:2px}
.mchip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--text2);font-family:inherit;font-size:12.5px;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.mchip:hover{background:rgba(255,255,255,.1);color:var(--text)}
.mchip.on{background:rgba(139,124,255,.18);border-color:rgba(139,124,255,.5);color:var(--text)}
.mchip-name{white-space:nowrap}
.mchip-price{font-size:11px;color:var(--text3);background:rgba(0,0,0,.25);border-radius:999px;padding:1px 7px}
.mchip.on .mchip-price{color:var(--text2)}
.mchip.more{color:var(--text3)}
.mchip-cnt{font-size:11px;opacity:.7}
.model-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:min(430px,calc(100% - 16px));
  max-height:380px;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.45);padding:12px}
.mm-wrap .gen-find-in{margin-bottom:10px}
.model-menu .gen-model-row{display:block;width:100%;text-align:left;background:transparent;
  border:1px solid transparent;border-radius:var(--r-md);padding:8px 10px;cursor:pointer;font-family:inherit}
.model-menu .gen-model-row:hover{background:rgba(255,255,255,.05)}
.model-menu .gen-model-row.sel{background:rgba(139,124,255,.14);border-color:rgba(139,124,255,.4)}


/* полоса вкладок снова с моделями под названием */
#genModes{position:relative}
#genModes button{flex-direction:column;align-items:flex-start;gap:3px;line-height:1.25}
.mode-brand.pick{color:var(--text2);border:1px dashed rgba(255,255,255,.18)}
.mode-brand.pick:hover{color:var(--text);border-color:rgba(255,255,255,.35)}


/* строка модели в выпадающем списке: имя слева, цена справа */
.mm-top{display:flex;align-items:center;gap:8px}
.mm-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-price{margin-left:auto;flex:none;font-size:11.5px;font-weight:600;color:var(--text2);
  background:rgba(255,255,255,.06);border-radius:999px;padding:1px 8px}
.model-menu .gen-model-note{display:block;margin-top:3px}


/* вкладки режимов растягиваются на всю ширину — без пустого места справа */
#genModes{justify-content:center;width:100%;box-sizing:border-box}
#genModes button{flex:1 1 220px;max-width:calc(50% - 4px);justify-content:center;text-align:center}
#genModes button .mode-brands{justify-content:center}
#genModes button .mode-title{width:100%}


/* ---------- запись голоса ---------- */
.rec-box{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--surface2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.rec-box.live{border-color:rgba(255,107,107,.55)}
.rec-btn{flex:none}
.rec-file{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:12.5px;
  color:var(--text3);text-decoration:underline;text-underline-offset:2px}
.rec-file:hover{color:var(--text)}
.rec-note{flex-basis:100%;font-size:12px;color:var(--text3);line-height:1.45}
.rec-hint{font-size:12px;color:var(--text3)}
.rec-time{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#ff6b6b;animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.rec-play{flex:1;min-width:220px;height:34px}
@media (prefers-reduced-motion: reduce){ .rec-dot{animation:none} }

.rec-hint.bad{color:var(--warn)}


/* ---------- вход: ссылки и подтверждения ---------- */
.auth-link{background:none;border:none;padding:0;margin-top:2px;cursor:pointer;font-family:inherit;
  font-size:12.5px;color:var(--text3);text-decoration:underline;text-underline-offset:2px;align-self:flex-start}
.auth-link:hover{color:var(--text)}
.auth-ok{font-size:12.5px;color:var(--ok,#5bd6a4);line-height:1.5}
.prof-resend{margin-top:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text2);
  font-family:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer}
.prof-resend:hover{color:var(--text);background:rgba(255,255,255,.1)}


/* ---------- вход через Telegram ---------- */
.auth-or{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--text3);font-size:11.5px}
.auth-or:before,.auth-or:after{content:'';flex:1;height:1px;background:var(--line)}
.tg-btn{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  background:#2aabee;color:#fff;font-size:14px;font-weight:600;padding:11px 16px;border-radius:var(--r-lg);
  transition:filter .18s ease}
.tg-btn:hover{filter:brightness(1.08)}
.tg-ic{font-size:15px}


/* ---------- кнопка-иконка (очистка переписки) ---------- */
.btn.icon-only{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0}
.btn.icon-only svg{width:17px;height:17px}


/* ---------- круглая кнопка отправки ---------- */
.send-btn{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:none;border-radius:50%;cursor:pointer;color:#fff;
  background:linear-gradient(145deg,#3B6FE0,#2952B8);
  box-shadow:0 4px 14px rgba(41,82,184,.35);
  transition:transform .15s ease,opacity .15s ease,filter .15s ease}
.send-btn svg{width:18px;height:18px;margin-left:1px}
.send-btn:hover{filter:brightness(.92)}
.send-btn:active{transform:scale(.94)}
.send-btn:disabled{opacity:.4;cursor:default;transform:none}
@media (max-width:860px){
  .send-btn{width:38px;height:38px}
  .composer-box{gap:8px}
}


/* ===== iOS: высота под клавиатуру и ровный список агентов на телефоне ===== */
@supports (height:100dvh){ #app{height:100dvh} }
@media (max-width:860px){
  /* высоту приложения задаёт видимая часть экрана (visualViewport, см. app.js):
     при открытии клавиатуры окно сжимается и поле ввода остаётся над ней.
     Никакого position:fixed — iOS от него ломает раскладку. */
  #app{height:var(--vv-h,100dvh)}
  #composer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  #sidebar .sidebar-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

  /* агенты: вместо рваных рядов — ровный столбец со своей прокруткой */
  /* колонка должна уметь сжиматься, иначе композер выдавливается за экран,
     когда открыта клавиатура */
  #main{min-height:0}
  #messages{min-height:0}
  #composer{flex:none}
  .mem-box{flex:none}
  /* max-height в процентах считается от текущей высоты окна, а не от 100vh,
     поэтому список сам ужимается вместе с приложением */
  #agentBar{flex:0 1 auto; min-height:0; flex-direction:column; flex-wrap:nowrap;
    align-self:stretch; width:auto; max-width:none; margin:12px 18px 0;
    max-height:32%; overflow-y:auto;
    scrollbar-width:none; -ms-overflow-style:none}
  #agentBar::-webkit-scrollbar{width:0;height:0;display:none}
  #agentBar .seg-thumb{display:none}
  #agentBar button{width:100%; text-align:left; white-space:normal; padding:9px 12px;
    border:1px solid transparent}
  #agentBar button.active{background:rgba(139,124,255,.16); border-color:rgba(139,124,255,.34)}
}