/* ===== Layout tokens ===== */
:root{
--ai-leftbar-wide: 245px;
--ai-leftbar-rail: 56px;
--ai-center-max: 820px;
--ai-leftbar-offset: var(--ai-leftbar-wide);

/* ↓ дефолты, чтобы IDE не ругалась и был fallback до первого замера */
--composer-h: 120px;
--composer-gap: 24px;

--site-header-h: 72px; /* дефолт; дальше измеряется скриптом */

--page-left-pad: 12px;
--ai-leftbar-left: 0px;
--ai-leftbar-width: 56px;
}

ai-leftbar { --ai-leftbar-left: 0px; --ai-leftbar-width: 56px; }
.ai-leftbar-collapsed { --ai-leftbar-offset: var(--ai-leftbar-rail); }

/* 📱 Мобилка: контент не отступает из-за левобара, но сам левобар живой */
@media (max-width: 575.98px){
:root{
  --ai-leftbar-offset: 0px;
  --page-left-pad: 0px;
  --ai-leftbar-rail: 0px;
}
body{ padding-left: 0 !important; }
}

/* На мобиле композер не зависит от левой колонки (оверлей), всегда 0 */
@media (max-width: 991.98px){
:root,
.ai-leftbar-collapsed{ --ai-leftbar-offset: 0px; }
}

.ai-shell{
display:grid;
grid-template-columns: var(--ai-leftbar-wide) 1fr;
min-height: calc(100vh - var(--site-header-h, 72px));
transition: grid-template-columns .2s ease;
}
.ai-shell.is-collapsed{ grid-template-columns: var(--ai-leftbar-rail) 1fr; }

.ai-center-wrap{ display:flex; justify-content:center; width:100%; }
.ai-center-inner{
width:100%;
max-width: var(--ai-center-max);
padding: 12px 16px calc(var(--composer-h, 120px) + var(--composer-gap, 24px));
margin: 0 auto;
}

/* mobile: sidebar overlays */
@media (max-width: 991.98px){
.ai-shell{ grid-template-columns: 1fr; }
}

.ai-divider{ height:1px; background:rgba(255,255,255,.08); margin:8px 0; }

html.ai-noscroll, body.ai-noscroll{
overflow: hidden !important;
height: 100%;
}

html, body{
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== New Chat modal: выбор модели карточками ===== */
.model-list-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}

/* карточка модели */
.model-card{
position: relative;
border-radius: 12px;
padding: 10px 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.10);
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
transition: background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.model-card:hover{
background: rgba(255,255,255,.06);
border-color: rgba(130,170,255,.45);
box-shadow: 0 0 0 1px rgba(130,170,255,.25);
}

/* поддерживаем оба варианта "выбрано": selected и active */
.model-card.selected,
.model-card.active{
background: rgba(41,52,78,.75);
border-color: rgba(130,170,255,.9);
box-shadow: 0 0 0 1px rgba(130,170,255,.40);
}

.model-card-provider{ font-size: 12px; opacity: .8; }

.model-card-tags{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:4px;
}

.model-tag{
font-size: 11px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
}

.model-card-desc{ font-size: 12px; color: #c3cad8; opacity: .9; }

/* Прокручиваемая часть внутри модалки */
.newchat-modal .models-scroll{
max-height: 420px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 4px 6px 0;
}

/* группа моделей */
.model-group-block + .model-group-block{ margin-top: 6px; }
.model-group-block .model-list-grid{ margin-top: 2px; }

.model-group-title{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255,255,255,.6);
margin: 8px 0 4px;
}

/* тэг "платно" */
.model-tag-paid{
background: rgba(220,53,69,.16);
border-color: rgba(220,53,69,.45);
color:#fbe6ea;
}

/* звездочка "избранное" */
.model-card-fav{
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
border-radius:999px;
border:none;
background:rgba(0,0,0,.4);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
color:#f5f5f5;
cursor:pointer;
}
.model-card-fav:hover{ background:rgba(0,0,0,.65); }
.model-card-fav.active{ color:#ffd966; }

/* бейджи */
.model-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 6px;
border-radius:999px;
font-size:10px;
line-height:1.2;
margin-right:4px;
}
.model-badge-paid{
background:rgba(220,53,69,.12);
color:#ffc2c9;
border:1px solid rgba(220,53,69,.55);
}
.model-badge-image{
background:rgba(130,170,255,.12);
color:#d1ddff;
border:1px solid rgba(130,170,255,.45);
}

/* Компактный вид карточек в модалке "Новый чат" */
.newchat-modal .models-scroll .row{
margin-right: 0;
margin-left: 0;
--bs-gutter-x: 0.75rem;
}

.newchat-modal .models-scroll .col-12,
.newchat-modal .models-scroll .col-md-4,
.newchat-modal .models-scroll .col-xl-3{
padding-left: 4px;
padding-right: 4px;
}

.newchat-modal .model-card{
padding: 8px 9px;
border-radius: 10px;
}

.newchat-modal .model-card .fw-semibold{ font-size: 13px; }

.newchat-modal .model-badge{
font-size: 9px;
padding: 2px 6px;
}

/* ==== MOBILE TWEAKS: общий каркас и модалки ==== */
@media (max-width: 575.98px){
.ai-shell{
  min-height: calc(100svh - var(--site-header-h, 56px));
}

.ai-center-wrap{
  padding-left: 0;
  padding-right: 0;
}

.ai-center-inner{
  padding: 8px 8px calc(var(--composer-h, 110px) + var(--composer-gap, 16px));
  max-width: 100%;
}

#aiNewChatModal .modal-dialog,
#aiSettingsModal .modal-dialog{
  margin: 0;
  max-width: 100%;
}

#aiNewChatModal .modal-content,
#aiSettingsModal .modal-content{
  border-radius: 0;
}

.newchat-modal .modal-header{ padding: 10px 12px 6px; }
.newchat-modal .modal-body{ padding: 4px 12px 10px; }
.newchat-modal .modal-footer{ padding: 8px 12px 10px; }

.newchat-modal .models-scroll .row > [class*="col-"]{
  padding-left: 2px;
  padding-right: 2px;
}
}

@media (min-width: 576px) and (max-width: 991.98px){
#aiNewChatModal .modal-dialog,
#aiSettingsModal .modal-dialog{
  max-width: 95vw;
  margin-left: auto;
  margin-right: auto;
}
}

/* Кнопка для левого сайдбара для мобилы */
.ai-mobile-left-toggle{
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(15,23,42,.96);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
box-shadow:
  0 1px 0 rgba(255,255,255,.06) inset,
  0 3px 10px rgba(0,0,0,.55);
cursor: pointer;
color: #e5edff;
transition: background .15s ease, transform .06s ease, box-shadow .15s ease, color .15s ease;
}

.ai-mobile-left-toggle svg{
width: 18px;
height: 18px;
display:block;
}

.ai-mobile-left-toggle:hover{
background: rgba(30,64,175,.95);
box-shadow:
  0 2px 12px rgba(15,23,42,.9),
  0 0 0 1px rgba(191,219,254,.6);
}

.ai-mobile-left-toggle:active{
transform: translateY(1px);
box-shadow: 0 1px 6px rgba(0,0,0,.7);
}

.ai-mobile-left-toggle.is-open{
background: rgba(30,64,175,1);
border-color: rgba(191,219,254,.9);
}

@media (min-width: 992px){
.ai-mobile-left-toggle{ display: none !important; }
}

/* ===== AIApp (LightDOM-scoped) ===== */
ai-app { display:block; }

ai-app #shell{
display:grid;
grid-template-columns: var(--ai-leftbar-wide) 1fr;
min-height: calc(100vh - var(--site-header-h, 72px));
transition: grid-template-columns .2s ease;
}
ai-app #shell.is-collapsed{ grid-template-columns: var(--ai-leftbar-rail) 1fr; }

/* центр */
ai-app .center-wrap{
display:flex;
justify-content:center;
align-items:stretch;
width:100%;
min-width:0;
}
ai-app ai-center{
display:block;
flex:1 1 auto;
width:100%;
min-width:0;
}
ai-app .wrap{ display: contents; }

@media (max-width: 991.98px){
ai-app #shell{ grid-template-columns: 1fr; }
}

/* ===== AILeftbar (LightDOM) ===== */
ai-leftbar{ display:block; height:100%; }
ai-leftbar.collapsed .topbar{ justify-content:center; }

ai-leftbar .panel{
border-right:1px solid rgba(255,255,255,.06);
padding:8px;
display:flex;
flex-direction:column;
overflow:hidden; /* скролл только у .list */
}

ai-leftbar .topbar{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:8px;
}
ai-leftbar .title{ font-weight:600; opacity:.85; }
ai-leftbar.collapsed .title{ display:none; }

/* Прокручивается только список */
ai-leftbar .list{
margin-top:8px;
flex:1;
min-height:0;
overflow:auto;
overscroll-behavior: contain;
}

ai-leftbar .empty{opacity:.6; font-size:13px; padding:8px;}

ai-leftbar .chats-title{
font-weight:600; font-size:13px; color:#999;
margin:6px 0 6px 4px;
}

ai-leftbar .chat-item{ position:relative; margin-bottom:2px; }

ai-leftbar .show-more-btn{
width:100%;
border:none;
background:rgba(255,255,255,.03);
color:#ccc;
padding:8px; margin-top:4px;
border-radius:8px; cursor:pointer; font-size:13px;
transition:background .15s;
}
ai-leftbar .show-more-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* Rail */
ai-leftbar .rail{display:none; flex-direction:column; align-items:center; gap:8px; }

/* Контейнер wide */
ai-leftbar .wide{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
}
ai-leftbar.collapsed .wide{display:none;}
ai-leftbar.collapsed .rail{display:flex;}

/* контейнер-строка */
ai-leftbar .chat-row{
position:relative;
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
gap:6px;
}

/* основная кнопка */
ai-leftbar .chat-item__main{
all:unset;
display:block;
padding:6px 10px 6px 14px;
border-radius:6px;
cursor:pointer;
font-size:13px;
color:#f2f2f2;
opacity:.9;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
border:1px solid transparent;
}
ai-leftbar .chat-item__main:hover{ background: rgba(255,255,255,.05); opacity:1; }

ai-leftbar .chat-item.active .chat-item__main{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.16);
color:#fff; opacity:1;
}
ai-leftbar .chat-item.active .chat-item__main::before{
content:'';
position:absolute; left:0; top:6px; bottom:6px; width:3px;
border-radius:2px;
background:#82aaff;
box-shadow:0 0 0 1px rgba(130,170,255,.25);
}

/* удаление */
ai-leftbar .chat-item__delete{
all:unset;
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color:#e7e7e7;
cursor:pointer;
opacity:0;
pointer-events:none;
transition: opacity .12s ease, background .12s ease;
}
ai-leftbar .chat-item:hover .chat-item__delete{ opacity:1; pointer-events:auto; }
ai-leftbar .chat-item__delete:hover{ background: rgba(255,255,255,.12); }
ai-leftbar .chat-item__delete svg{ width:16px; height:16px; display:block; }

/* Десктоп: фикс под хедером */
@media (min-width: 992px){
ai-leftbar .panel{
  position:fixed;
  top: var(--site-header-h, 72px);
  left: var(--ai-leftbar-left, 0px);
  width: var(--ai-leftbar-width, var(--ai-leftbar-wide));
  bottom:0;
  height:auto;
  max-height:none;
  z-index:1000;
  background:transparent;
}

ai-leftbar.collapsed .panel{
  width: var(--ai-leftbar-rail) !important;
  left: 0 !important;
}
}

/* Мобилка: оверлей */
@media (max-width: 991.98px){
ai-leftbar .panel{
  position:fixed; z-index:1040; left:0; top:0; bottom:0;
  background:rgba(27,27,27,.98);
  width:var(--ai-leftbar-wide);
  transform:translateX(-100%);
  transition:transform .2s ease;
  height:auto;
}
ai-leftbar .panel.open{ transform:translateX(0); }
}

/* Гость: скрываем список */
ai-leftbar.is-guest .list{ display:none !important; }
ai-leftbar.is-guest .ai-divider{ display:none !important; }

/* ===== AILeftbar (LightDOM) — hard reset для кнопок/инпутов (как было в ShadowDOM) ===== */
ai-leftbar button,
ai-leftbar input {
font: inherit;
letter-spacing: inherit;
}

ai-leftbar button{
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
padding: 0;
margin: 0;
color: inherit;
}

/* Кнопка-иконка: убираем влияние глобальных стилей и фиксируем геометрию */
ai-leftbar .btn-icon{
all: unset;
box-sizing: border-box;

width:40px;
height:40px;
border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);

cursor:pointer;

/* важно: чтобы не раздувало по line-height */
font-size:0;
line-height:0;
}
ai-leftbar .btn-icon svg{
display:block;
width:18px;
height:18px;
}

/* “Широкие” кнопки: фиксируем шрифт/line-height, чтобы не были “толстыми” */
ai-leftbar .btn-ghost{
all: unset;
box-sizing: border-box;

width:100%;
display:flex;
align-items:center;
gap:10px;

border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);

padding:8px 10px;
border-radius:10px;
cursor:pointer;

font-size:13px;
line-height:1.2;
}
ai-leftbar .btn-ghost span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* Поиск: фиксируем шрифт/line-height и убираем bootstrap-овские “эффекты” инпута */
ai-leftbar .search{
display:flex;
gap:8px;
align-items:center;

border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);

padding:6px 10px;
border-radius:10px;

font-size:13px;
line-height:1.2;
}

ai-leftbar .search input{
font-size:13px;
line-height:1.2;

background:transparent;
border:none;
outline:none;
box-shadow:none;

color:#fff;
width:100%;
padding:0;
margin:0;

/* важное: чтобы bootstrap не “сдвигал” высоту */
min-height: unset;
}

/* ===== AICenter (LightDOM) ===== */
ai-center{
display:block;
width:100%;
min-width:0;
}

ai-center .ai-center-inner{
width:100%;
max-width:var(--ai-center-max);
padding:12px 16px calc(var(--composer-h, 120px) + 24px + env(safe-area-inset-bottom, 0px));
margin: 0 auto;
box-sizing: border-box;
}

@media (max-width: 575.98px){
ai-center .ai-center-inner{
  padding:10px 0 calc(var(--composer-h, 120px) + 14px + env(safe-area-inset-bottom, 0px));
}

ai-center .transcript{
  margin-top:4px;
  margin-bottom:16px;
}
}

ai-center .transcript{
margin-top:8px;
width:100%;
margin-bottom: 30px;
}

ai-center .composer-wrap{
position: fixed;
left: var(--ai-leftbar-offset, 0px);
right: 0;
bottom: 0;
z-index: 5;
display:flex;
justify-content:center;
padding:10px;
}

@media (max-width: 991.98px){
ai-center .composer-wrap{
  left: 0;
  right: 0;
  padding:8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
}

ai-center .composer{
width:100%;
max-width:var(--ai-center-max);
border-radius:16px;
padding:8px;
}

ai-center .toast{
position: fixed;
right: 16px;
bottom: 120px;
z-index: 2000;
background: rgba(220,53,69,.15);
border: 1px solid rgba(220,53,69,.35);
color:#fff;
padding:10px 12px;
border-radius:10px;
font-size:13px;
}

@media (max-width: 575.98px){
ai-center .toast{
  left: 8px;
  right: 8px;
  bottom: calc(var(--composer-h, 120px) + 12px + env(safe-area-inset-bottom, 0px));
  font-size:12px;
}
}

ai-center .composer-wrap.hidden{ display:none; }
ai-center[data-empty="1"] .composer-wrap { display: none; }

ai-center[data-empty="1"] .ai-center-inner{
height: calc(100dvh - var(--site-header-h,72px));
min-height: 0;
padding-bottom: 12px !important;
box-sizing: border-box;
overflow: clip;
}

/* =========================
 AITranscript (Light DOM)
 ========================= */
ai-transcript{
--composer-h: 120px;
--composer-gap: 24px;
--ai-img-bubble-max: 980px;

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

display:block;
min-width:0;
}

/* ===== Список и строки ===== */
ai-transcript .list{
display:flex;
flex-direction:column;
gap:12px;
padding:0 8px;
align-items:stretch;
}
ai-transcript .msg{
display:flex;
width:100%;
scroll-margin-bottom: calc(var(--composer-h, 120px) + 16px);
}
ai-transcript .u{ justify-content:flex-end; }
ai-transcript .a{ justify-content:flex-start; width:100%; }

/* ===== Пузырьки ===== */
ai-transcript .bubble{
position: relative;
border: none;
background: transparent;
border-radius: 18px;
font-size:16px;
line-height:1.66;
padding: 10px 40px 34px 14px;
box-sizing:border-box;
word-wrap: break-word;
}

/* user — пузырь справа */
ai-transcript .u .bubble{
max-width: clamp(64%, 82%, 880px);
margin-left: auto;
background: radial-gradient(circle at 0% 0%, rgba(59,130,246,.28), rgba(15,23,42,.98));
box-shadow:
  0 10px 32px rgba(15,23,42,.75),
  0 0 0 1px rgba(56,189,248,.18);
color:#eaf3ff;
}

/* assistant — карточка во всю ширину */
ai-transcript .a .bubble{
display:block;
flex:1 1 0%;
width:100%;
max-width:none !important;
min-width:0;
align-self:stretch;

border-radius: 18px;

padding-top: 28px;     /* место под бейдж модели */
padding-right: 96px;   /* место под бейдж + экшены */
}

/* ===== Контент внутри пузырька ===== */
ai-transcript .content{ white-space: normal; line-height: 1.66; }
ai-transcript .content p{ margin:0 0 10px; }
ai-transcript .content h1,
ai-transcript .content h2,
ai-transcript .content h3{ margin:14px 0 8px; line-height:1.35; }
ai-transcript .content ul,
ai-transcript .content ol{ margin:8px 0 8px 22px; }
ai-transcript .content code{
padding: 0 4px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             "Liberation Mono", "Courier New", monospace;
}
ai-transcript .content pre{
background: rgba(255,255,255,.06);
padding: 10px;
border-radius: 8px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             "Liberation Mono", "Courier New", monospace;
}
ai-transcript .content blockquote{
margin:8px 0;
padding:6px 10px;
border-left:3px solid rgba(130,170,255,.35);
background: rgba(130,170,255,.06);
border-radius:6px;
}
ai-transcript .content a{ color:#9ecbff; text-decoration:none; }
ai-transcript .content a:hover{ text-decoration:underline; }

/* ===== Кнопки действий ===== */
ai-transcript .actions{
position:absolute;
right:10px;
bottom:10px;
display:flex;
gap:8px;
opacity:0;
transform: translateY(1px);
transition: opacity .12s ease, transform .12s ease;
pointer-events:none;
}
ai-transcript .bubble:hover .actions{
opacity:1;
transform: translateY(0);
pointer-events:auto;
}

ai-transcript .action-btn{
width:24px;
height:24px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
cursor:pointer;
padding:0;
color:#e7e7e7;
}
ai-transcript .action-btn:hover{ background:rgba(255,255,255,.12); }
ai-transcript .action-btn.pulse{ animation: ai-btn-pulse 280ms ease; }

@keyframes ai-btn-pulse{
0%{transform:scale(1)}
50%{transform:scale(1.12)}
100%{transform:scale(1)}
}

/* ===== Индикатор печати / генерации ===== */
ai-transcript .typing{
  display:none;
  align-items:center;
  gap:7px;
  width: fit-content;

  margin-top:14px;
  padding:8px 11px 8px 12px;
  margin-left:4px;

  border-radius:999px;
  background: rgba(15,23,42,.52);
  border:1px solid rgba(34,197,94,.16);
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);

  opacity:1;

  margin-bottom: calc(var(--composer-h, 120px) + 16px);
  scroll-margin-bottom: calc(var(--composer-h, 120px) + 16px);
}

ai-transcript .typing.show{
  display:inline-flex;
}

ai-transcript .typing .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
  opacity:.45;
  box-shadow:0 0 0 rgba(34,197,94,0);
  animation: aiTypingPulse 1.15s infinite ease-in-out;
}

ai-transcript .typing .dot:nth-child(2){
  animation-delay:140ms;
}

ai-transcript .typing .dot:nth-child(3){
  animation-delay:280ms;
}

@keyframes aiTypingPulse{
  0%, 80%, 100%{
    transform: translateY(0) scale(.78);
    opacity:.35;
    box-shadow:0 0 0 rgba(34,197,94,0);
  }

  40%{
    transform: translateY(-3px) scale(1.22);
    opacity:1;
    box-shadow:
      0 0 10px rgba(34,197,94,.75),
      0 0 22px rgba(34,197,94,.35);
  }
}

@media (prefers-reduced-motion: reduce){
  ai-transcript .typing .dot{
    animation:none;
    opacity:.75;
  }
}

/* ===== Бейдж модели ===== */
ai-transcript .model-badge{
position:absolute;
top:6px;
right:8px;
font-size:11.5px;
line-height:1;
color:#cfd8ff;
opacity:.85;
padding:4px 6px;
border-radius:6px;
background: rgba(130,170,255,.10);
border:1px solid rgba(130,170,255,.25);
user-select:none;
pointer-events:none;
}

/* ===== Чип usage ===== */
ai-transcript .usage{
position:absolute;
left:10px;
bottom:10px;
font-size:12px;
line-height:1;
color:#cfd2da;
opacity:.85;
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
padding:4px 6px;
border-radius:6px;
user-select:none;
display:none;
}

/* ===== Код-блоки ===== */
ai-transcript .code-block{
position: relative;
margin: 12px 0 14px;
border-radius: 12px;
border: 1px solid rgba(148,163,184,.25);
overflow: hidden;
}

ai-transcript .msg.a .bubble .content .code-block{ margin-right: -82px; }
ai-transcript .msg.u .bubble .content .code-block{ margin-right: -26px; }

ai-transcript .code-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:6px 10px;
font-size:12px;
line-height:1;
background:#020617;
border-bottom:1px solid rgba(148,163,184,.25);
}

ai-transcript .code-lang{
color:#9ca3af;
text-transform:lowercase;
letter-spacing:.03em;
font-weight:500;
user-select:none;
white-space:nowrap;
}

ai-transcript .code-copy-btn{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
line-height:1;
padding:4px 9px;
border-radius:6px;
border:1px solid rgba(148,163,184,.45);
background:rgba(15,23,42,.4);
color:#e5e7eb;
cursor:pointer;
transition:
  background .12s ease,
  border-color .12s ease,
  box-shadow .12s ease,
  transform .08s ease,
  opacity .12s ease;
}
ai-transcript .code-copy-btn svg{ width:14px; height:14px; }
ai-transcript .code-copy-btn:hover{
background:rgba(31,41,55,.9);
border-color:rgba(156,163,175,.9);
box-shadow:0 0 0 1px rgba(15,23,42,1) inset;
}
ai-transcript .code-copy-btn:active{
transform:translateY(0.5px);
box-shadow:0 0 0 1px rgba(15,23,42,1) inset;
}
ai-transcript .code-copy-btn.copied{
background:rgba(22,163,74,.95);
border-color:rgba(187,247,208,1);
color:#ecfdf5;
opacity:.95;
}

ai-transcript .code-block pre{
margin:0;
padding:10px 12px 12px;
border-radius:0;
background:#020617;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             "Liberation Mono","Courier New",monospace;
font-size:13px;
line-height:1.6;
overflow:auto;
}

ai-transcript .code-block pre::-webkit-scrollbar{ height:8px; }
ai-transcript .code-block pre::-webkit-scrollbar-track{ background:rgba(15,23,42,1); }
ai-transcript .code-block pre::-webkit-scrollbar-thumb{
background:rgba(55,65,81,.9);
border-radius:999px;
}
ai-transcript .code-block pre::-webkit-scrollbar-thumb:hover{ background:rgba(75,85,99,1); }

ai-transcript .hljs{ background:none; }

/* ===== Превью прикреплённых изображений (thumbs) ===== */
ai-transcript .bubble .thumbs{
display:grid;
gap:8px;
margin-top:10px;
justify-content:start;
grid-template-columns:repeat(auto-fit, minmax(96px, 120px));
grid-auto-flow:row dense;
}
@media (max-width: 575.98px){
ai-transcript .bubble .thumbs{
  grid-template-columns:repeat(auto-fit, minmax(88px,108px));
  gap:6px;
}
}
ai-transcript .thumbs .thumb{
width:100%;
aspect-ratio:1/1;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
border-radius:10px;
overflow:hidden;
position:relative;
}
ai-transcript .thumbs .thumb img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
}
ai-transcript .thumbs .thumb a{ position:absolute; inset:0; display:block; }
ai-transcript .thumbs .thumb:hover{ border-color: rgba(255,255,255,.22); }
ai-transcript .bubble .thumbs[data-count="1"] .thumb{ aspect-ratio:16/9; grid-column:span 2; }
ai-transcript .bubble .thumbs[data-count="1"] img{
max-width:720px;
width:100%;
height:auto;
display:block;
border-radius:12px;
}
ai-transcript .bubble .thumbs[data-count="1"]{ display:block; padding:8px 0 0 0; }

/* ===== Унификация контейнеров изображения ассистента ===== */
ai-transcript .msg.a .bubble .image-wrap,
ai-transcript .row.a .image-wrap,
ai-transcript .row.a.img-bubble .image-wrap{
display:block;
inline-size:100%;
max-inline-size:100%;
overflow:hidden;
padding:10px 12px;
box-sizing:border-box;
margin-top:8px;
}
ai-transcript .row.a.img-bubble{
max-inline-size: var(--ai-img-bubble-max);
inline-size: clamp(280px, 92vw, var(--ai-img-bubble-max));
margin-inline:auto;
}
ai-transcript .msg.a .bubble .image-wrap img.ai-img[data-ai-img],
ai-transcript .row.a .image-wrap img.ai-img,
ai-transcript .row.a.img-bubble .image-wrap img.ai-img[data-ai-img]{
display:block;
inline-size:100% !important;
max-inline-size:100% !important;
block-size:auto !important;
max-block-size:78vh;
object-fit:contain !important;
object-position:center center;
border-radius:14px;
box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
ai-transcript .msg.a .bubble .image-wrap img.ai-img[data-ai-img],
ai-transcript .row.a .image-wrap img.ai-img{
height:auto !important;
width:100% !important;
aspect-ratio:auto !important;
}
ai-transcript .row.a.img-bubble .image-wrap img.ai-img[data-ai-img]{ cursor: zoom-in; }

/* ===== Мобильные правки ===== */
@media (max-width: 575.98px){
ai-transcript .list{ padding: 0 4px; gap: 10px; }

ai-transcript .bubble{
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 34px 26px 10px;
}

ai-transcript .u .bubble{ max-width: 96%; }

ai-transcript .a,
ai-transcript .a .bubble{
  width: 100%;
  max-width: none !important;
}

ai-transcript .a .bubble{
  padding-top: 22px;
  padding-right: 5px; /* было 96px */
}

ai-transcript .model-badge{
  top: 4px;
  right: 6px;
  font-size: 10.5px;
  padding: 3px 5px;
}

ai-transcript .usage{
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  padding: 3px 5px;
}

ai-transcript .actions{
  right: 6px;
  bottom: 6px;
  gap: 6px;

  /* 📱 На мобильных кнопки действий всегда видимы */
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

ai-transcript .action-btn{
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

ai-transcript .typing{
  margin-top: 10px;
  padding-left: 12px;
  margin-bottom: calc(var(--composer-h, 120px) + 8px);
}

ai-transcript .msg.a .bubble .content .code-block{ margin-right: 0; }
ai-transcript .msg.u .bubble .content .code-block{ margin-right: 0; }

ai-transcript .code-block pre{
  font-size: 12px;
  padding: 8px 10px 10px;
}
}

/* ===== Image modal preview (старый модал, если используется) ===== */
ai-transcript .img-modal-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
backdrop-filter:blur(4px);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
ai-transcript .img-modal-backdrop.hidden{ display:none; }
ai-transcript .img-modal{
max-width:92vw;
max-height:92vh;
border-radius:12px;
overflow:hidden;
box-shadow:0 0 12px rgba(0,0,0,.6);
background:rgba(0,0,0,.2);
}
ai-transcript .img-modal img{
display:block;
width:100%;
height:auto;
object-fit:contain;
}
ai-transcript .img-modal .actions{
display:flex;
justify-content:flex-end;
gap:10px;
padding:8px 12px;
background:rgba(20,20,20,.5);
}
ai-transcript .img-modal button{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
border-radius:8px;
color:#fff;
cursor:pointer;
font-size:14px;
padding:6px 10px;
}
ai-transcript .img-modal button:hover{ background:rgba(255,255,255,.16); }

/* ===== Самописный лайтбокс ===== */
.ai-lightbox{
position:fixed;
inset:0;
z-index:2147483000;
background:rgba(0,0,0,.92);
display:grid;
place-items:center;
padding:24px;
box-sizing:border-box;
}
.ai-lightbox .canvas{
max-inline-size:min(96vw,1280px);
max-block-size:88vh;
overflow:hidden;
border-radius:16px;
background:#000;
box-shadow:
  0 0 0 1px rgba(255,255,255,.12) inset,
  0 10px 40px rgba(0,0,0,.45);
}
.ai-lightbox .canvas img{
display:block;
inline-size:100%;
block-size:auto;
max-block-size:88vh;
object-fit:contain;
border-radius:16px;
}
.ai-lightbox .toolbar{
position:fixed;
top:14px;
right:14px;
display:flex;
gap:8px;
pointer-events:auto;
z-index:2147483001;
}
.ai-lightbox .btn{
appearance:none;
border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.12);
color:#fff;
font:500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
padding:8px 10px;
border-radius:10px;
cursor:pointer;
}
.ai-lightbox .btn:hover{ background:rgba(255,255,255,.20); }
.ai-lightbox .btn.icon{
width:34px;
height:34px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* Ответ-картинка: не показываем usage и кнопки действий */
ai-transcript .msg.a.img-answer .usage,
ai-transcript .msg.a.img-answer .actions{
display: none !important;
}

/* ===== Ответ, заблокированный модерацией (единый стиль) ===== */
ai-transcript .msg.a.moderation-blocked .bubble{
background: transparent;
box-shadow:
  0 18px 46px rgba(127,29,29,.48),
  0 0 0 1px rgba(248,113,113,.42);
}
ai-transcript .msg.a.moderation-blocked .usage{
display: none !important;
}
ai-transcript .msg.a.moderation-blocked .moderation-label{
position:absolute;
top:6px;
left:10px;
font-size:11px;
line-height:1;
padding:3px 6px;
border-radius:6px;
color:#fee2e2;
background:rgba(127,29,29,.35);
border:1px solid rgba(248,113,113,.55);
user-select:none;
}

/* ===== AIComposer (LightDOM) ===== */
ai-composer{ display:block; width:100%; min-width:0; }
ai-composer *, ai-composer *::before, ai-composer *::after{ box-sizing:border-box; }

ai-composer .composer{
width:100%;
border:1px solid rgba(255,255,255,.10);
background: rgba(15,15,15,.85);
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 18px rgba(0,0,0,.35);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
padding:6px 8px;
border-radius:12px;
}
ai-composer .composer:focus-within{
border-color: rgba(110, 66, 255, .45);
box-shadow: 0 0 0 2px rgba(110, 66, 255, .15);
background: rgba(20,20,20,.9);
}
ai-composer .composer.moderation-blocked{
border-color: rgba(248,113,113,.75);
box-shadow: 0 0 0 2px rgba(248,113,113,.30);
background: rgba(24,0,0,.92);
}

/* ВАЖНО: НЕ .row (bootstrap), а свой класс */
ai-composer .composer-row{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
gap:6px;
margin-top:2px;
}
ai-composer .composer-side{ display:flex; gap:6px; align-items:center; }

ai-composer .btn-icon{
width:34px; height:34px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
color:#e7e7e7;
cursor:pointer;
transition:background .15s ease, transform .06s ease, opacity .15s ease;
}
ai-composer .btn-icon:hover{ background:rgba(255,255,255,.09); }
ai-composer .btn-icon:active{ transform: translateY(1px); }
ai-composer .btn-icon[disabled]{ opacity:.45; cursor:not-allowed; }

ai-composer textarea{
width:100%;
display:block;
min-height:24px;
max-height:200px;
resize:none;
background:transparent; color:#fff; border:none; outline:none;
padding:6px 10px;
line-height:1.4;
font-size:14px;
overflow-y:auto;
overscroll-behavior:contain;
}
ai-composer textarea::placeholder{ color: rgba(255,255,255,.60); }

ai-composer #send{
width:36px; height:36px; border-radius:999px;
background: rgba(130,170,255,.18);
border-color: rgba(130,170,255,.35);
}
ai-composer #send:not([disabled]):hover{ background: rgba(130,170,255,.30); }
ai-composer #send[disabled]{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }

ai-composer .btn-clear{ opacity:.9; width:32px; height:32px; }
ai-composer .btn-clear:hover{ opacity:1; }

ai-composer .btn-stop{
width:32px; height:32px;
background: rgba(220,53,69,.20);
border-color: rgba(220,53,69,.45);
}
ai-composer .btn-stop:hover{ background: rgba(220,53,69,.32); }
ai-composer .btn-stop[disabled]{ opacity:.55; }

ai-composer .attachments{ display:flex; gap:8px; flex-wrap:wrap; padding:4px 4px 0 4px; }
ai-composer .attachments:empty{ padding:0; }

ai-composer .chip{
position:relative; overflow:hidden;
width:64px; height:64px; border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
ai-composer .chip img{ width:100%; height:100%; object-fit:cover; display:block; }
ai-composer .chip button{
position:absolute; top:4px; right:4px;
width:22px; height:22px; border-radius:7px;
border:1px solid rgba(255,255,255,.18);
background:rgba(0,0,0,.35); color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
}
ai-composer .chip button:hover{ background:rgba(0,0,0,.55); }

ai-composer .hint{
display:flex; align-items:center; justify-content:space-between;
font-size:11px; color:#b6bfd6; opacity:.8;
padding:4px 2px 0;
user-select:none;
}
ai-composer .busy-ind{ display:none; }
ai-composer.busy .busy-ind{ display:inline; }

ai-composer .drop{ outline: 2px dashed rgba(130,170,255,.45); outline-offset: 4px; }

@media (max-width: 575.98px){
ai-composer .composer{ padding:6px; border-radius:10px; }
ai-composer textarea{ min-height:28px; max-height:160px; padding:6px 8px; }
ai-composer .attachments{ padding:4px 2px 0 2px; }
ai-composer .chip{ width:52px; height:52px; }
ai-composer .hint{ padding:3px 2px 0; font-size:10px; }
}
@media (max-width: 360px){
ai-composer .composer-row{ flex-wrap:wrap; row-gap:4px; }
ai-composer .composer-side:last-child{ margin-left:auto; }
}

/* =========================
 AIEmpty (LightDOM)
 ========================= */
ai-empty{
--empty-y-shift: -20vh;   /* десктоп — чуть выше центра */
--empty-gap: 2px;         /* базовый вертикальный зазор */
display:block;
}

ai-empty *, ai-empty *::before, ai-empty *::after{ box-sizing: border-box; }

ai-empty .hero-wrap{
min-height: calc(100svh - var(--site-header-h,72px));
display:flex;
align-items:center;
justify-content:center;
padding: 20px 16px;
overflow:hidden;
}

ai-empty .hero{
width:min(880px, 92vw);
display:flex;
flex-direction:column;
align-items:center;
gap: var(--empty-gap);
transform: translateY(var(--empty-y-shift));
min-width: 0;
}

ai-empty h1{
margin: 0 0 8px 0;
font-size: clamp(20px, 3.2vw, 28px);
letter-spacing:.2px;
color:#e9eef9;
text-align:center;
}

ai-empty .lead{
color:#a9b7cc;
font-size:13.5px;
text-align:center;
margin: 0 0 6px 0;
}

ai-empty .model-pill-wrapper{
display:inline-flex;
align-items:center;
gap:8px;
margin-left:8px;
}

/* ===== Кнопка "Новый чат" ===== */
ai-empty .model-newchat-btn{
appearance:none;
border: 1px solid rgba(34,197,94,.45);
background:
  radial-gradient(120% 140% at 10% 0%, rgba(34,197,94,.22) 0%, rgba(34,197,94,0) 55%),
  linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.96));
color:#e9edff;
border-radius:999px;
padding: 8px 18px;
font-size:11.5px;
line-height:1;
text-transform:uppercase;
letter-spacing:.09em;
cursor:pointer;

display:inline-flex;
align-items:center;
gap:8px;

box-shadow:
  0 10px 22px rgba(0,0,0,.45),
  inset 0 0 0 1px rgba(255,255,255,.03);

transition:
  transform .12s ease,
  box-shadow .15s ease,
  border-color .15s ease,
  background .15s ease,
  filter .15s ease;
}

ai-empty .model-newchat-btn::before{
content:"+";
width:18px;
height:18px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:12px;
color: rgba(240,255,248,.95);
background: rgba(34,197,94,.18);
border: 1px solid rgba(34,197,94,.28);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

ai-empty .model-newchat-btn:hover{
border-color: rgba(34,197,94,.75);
box-shadow:
  0 14px 30px rgba(0,0,0,.55),
  0 0 0 3px rgba(34,197,94,.10),
  inset 0 0 0 1px rgba(255,255,255,.04);
transform: translateY(-1px);
filter:saturate(1.05);
}

ai-empty .model-newchat-btn:active{
transform: translateY(0) scale(.99);
box-shadow:
  0 10px 22px rgba(0,0,0,.50),
  inset 0 0 0 1px rgba(255,255,255,.03);
}

ai-empty .model-newchat-btn:focus-visible{
outline:none;
box-shadow:
  0 0 0 2px rgba(2,6,23,.9),
  0 0 0 4px rgba(34,197,94,.45),
  0 14px 30px rgba(0,0,0,.55);
}

ai-empty .model-pill{
display:none;
align-items:center;
gap:6px;
margin-left:8px;
padding:4px 9px;
border-radius:999px;
font-size:11px;
line-height:1;
text-transform:uppercase;
letter-spacing:0.06em;
color:#e5edff;
background:rgba(15,23,42,.95);
border:1px solid rgba(129,140,248,.55);
box-shadow:0 4px 12px rgba(15,23,42,.9);
white-space:nowrap;
}

ai-empty .model-pill::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:linear-gradient(135deg, #4ade80, #22c55e);
box-shadow:0 0 0 4px rgba(34,197,94,.25);
}

ai-empty .hero-composer{
width:100%;
display:block;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-top: var(--empty-gap);
margin-bottom: calc(var(--empty-gap) + 2px);
box-shadow: none;
}

/* важно: в LightDOM иногда нужно явно */
ai-empty #heroComposer{
display:block;
width:100%;
}

/* ===== SEO-текст ===== */
ai-empty .seo{
width:100%;
display:flex;
justify-content:center;
margin-top: 8px;
}

ai-empty .seo-text{
margin:0;
max-width:720px;
text-align:center;
font-size:12.5px;
line-height:1.45;
color: rgba(169,183,204,.92);
opacity:.95;
}

/* ===== МОБИЛЬНОЕ ===== */
@media (max-width: 575.98px){
ai-empty{
  --empty-y-shift: 0;
  --empty-gap: 12px;
  display:block;
}

ai-empty .hero-wrap{
  position: fixed;
  top: var(--site-header-h,72px);
  left: 0;
  right: 0;
  bottom: 0;
  min-height: auto;
  padding: 16px 12px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

ai-empty .hero{
  width:100%;
  max-width:100%;
  align-items:stretch;
  transform:none;
  gap: var(--empty-gap);
}

ai-empty .hero > div:first-child{
  padding: 0 8px;
  text-align:center;
}

ai-empty h1{ font-size:20px; }

ai-empty .lead{
  font-size:13px;
  margin-bottom:2px;
}

ai-empty .model-pill-wrapper{
  display:block;
  margin-left:0;
  margin-top:6px;
}

ai-empty .model-newchat-btn{
  display:inline-flex;
  margin:0 auto;
}

ai-empty .model-pill{
  justify-content:center;
  margin:0 auto;
}

ai-empty .hero-composer{
  margin-top:4px;
  margin-bottom:8px;
}

ai-empty #heroComposer{
  display:block;
  width:100%;
  max-width:100%;
}

ai-empty .seo{ margin-top:10px; }
ai-empty .seo-text{ font-size:12px; }
}

ai-center .ai-center-inner{
  padding-bottom: calc(var(--composer-h, 120px) + 4px + env(safe-area-inset-bottom, 0px)) !important;
}

ai-transcript .typing{
  margin-bottom: calc(var(--composer-h, 120px) + 4px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ===== Mobile leftbar: при открытии показываем полноценный wide-сайдбар ===== */
@media (max-width: 991.98px){
  ai-leftbar .panel.open{
    width: var(--ai-leftbar-wide, 245px) !important;
  }

  ai-leftbar .panel.open .wide{
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  ai-leftbar .panel.open .rail{
    display: none !important;
  }

  ai-leftbar.collapsed .panel.open .wide{
    display: flex !important;
  }

  ai-leftbar.collapsed .panel.open .rail{
    display: none !important;
  }

  ai-leftbar.collapsed .panel.open .title{
    display: block !important;
  }

  ai-leftbar.collapsed .panel.open .topbar{
    justify-content: space-between !important;
  }
}

/* =========================================================
   AI Leftbar v3 — premium glass sidebar
   ========================================================= */

ai-leftbar .panel{
  color:#eef4ff;
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.18), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(139,92,246,.13), transparent 32%),
    linear-gradient(180deg, rgba(12,17,27,.98), rgba(5,8,14,.985));
  border-right:1px solid rgba(148,163,184,.14);
  box-shadow:
    18px 0 60px rgba(0,0,0,.34),
    inset -1px 0 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}

ai-leftbar .topbar{
  height:48px;
  padding:4px 2px 8px;
  margin-bottom:8px;
}

ai-leftbar .title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(226,232,240,.62);
}

ai-leftbar .btn-icon,
ai-leftbar .btn-ghost,
ai-leftbar .search,
ai-leftbar .show-more-btn{
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 22px rgba(0,0,0,.14);
}

ai-leftbar .btn-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  color:rgba(226,232,240,.82);
  transition:.16s ease;
}

ai-leftbar .btn-icon:hover{
  color:#fff;
  background:rgba(30,41,59,.82);
  border-color:rgba(147,197,253,.34);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 3px rgba(59,130,246,.10);
}

ai-leftbar .btn-icon:active{
  transform:translateY(1px) scale(.98);
}

ai-leftbar .btn-ghost{
  min-height:40px;
  padding:10px 12px;
  border-radius:15px;
  color:rgba(226,232,240,.86);
  font-size:13px;
  font-weight:650;
  transition:.16s ease;
}

ai-leftbar .btn-ghost:hover{
  color:#fff;
  background:rgba(30,41,59,.86);
  border-color:rgba(148,163,184,.28);
  transform:translateY(-1px);
}

ai-leftbar #newChatBtn{
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,.30), transparent 48%),
    linear-gradient(135deg, rgba(30,64,175,.58), rgba(15,23,42,.72));
  border-color:rgba(96,165,250,.34);
}

ai-leftbar #newChatBtn:hover{
  border-color:rgba(147,197,253,.58);
  box-shadow:
    0 14px 34px rgba(37,99,235,.22),
    0 0 0 3px rgba(59,130,246,.13);
}

ai-leftbar .search{
  min-height:40px;
  padding:9px 12px;
  border-radius:15px;
  color:rgba(226,232,240,.58);
  transition:.16s ease;
}

ai-leftbar .search:focus-within{
  background:rgba(2,6,23,.72);
  border-color:rgba(96,165,250,.55);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.14),
    0 12px 28px rgba(0,0,0,.28);
}

ai-leftbar .search input{
  color:#f8fafc;
  caret-color:#93c5fd;
}

ai-leftbar .search input::placeholder{
  color:rgba(203,213,225,.45);
}

ai-leftbar #clearSearch{
  opacity:.45;
  transition:.15s ease;
}

ai-leftbar #clearSearch:hover{
  opacity:1;
  color:#fff;
}

ai-leftbar .ai-divider{
  margin:12px 0;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.18), transparent);
}

ai-leftbar .chats-title{
  margin:4px 0 10px 6px;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:rgba(148,163,184,.54);
}

ai-leftbar .list{
  padding:0 1px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.24) transparent;
}

ai-leftbar .list::-webkit-scrollbar{
  width:8px;
}

ai-leftbar .list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(148,163,184,.18);
}

ai-leftbar .list::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.32);
}

ai-leftbar .chat-item{
  margin-bottom:4px;
  border-radius:14px;
}

ai-leftbar .chat-row{
  grid-template-columns:minmax(0, 1fr) 30px;
  gap:4px;
  border-radius:14px;
}

ai-leftbar .chat-item__main{
  min-width:0;
  padding:9px 10px 9px 13px;
  border-radius:14px;
  font-size:13px;
  line-height:1.25;
  color:rgba(226,232,240,.76);
  opacity:1;
  border:1px solid transparent;
  transition:.15s ease;
}

ai-leftbar .chat-item__main:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
}

ai-leftbar .chat-item.active .chat-item__main{
  color:#fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,.28), transparent 50%),
    linear-gradient(135deg, rgba(30,64,175,.52), rgba(30,41,59,.72));
  border-color:rgba(147,197,253,.30);
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

ai-leftbar .chat-item.active .chat-item__main::before{
  left:3px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, #93c5fd, #6366f1);
  box-shadow:0 0 16px rgba(96,165,250,.72);
}

ai-leftbar .chat-item__delete{
  width:28px;
  height:28px;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  color:rgba(203,213,225,.42);
  opacity:0;
  pointer-events:none;
  transition:.14s ease;
}

ai-leftbar .chat-item:hover .chat-item__delete,
ai-leftbar .chat-item:focus-within .chat-item__delete{
  opacity:1;
  pointer-events:auto;
}

ai-leftbar .chat-item__delete:hover{
  color:#fecaca;
  background:rgba(248,113,113,.13);
  border-color:rgba(248,113,113,.26);
}

ai-leftbar .chat-item__mode-chip{
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  color:#f3e8ff;
  background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(79,70,229,.18));
  border:1px solid rgba(167,139,250,.36);
  box-shadow:0 0 14px rgba(139,92,246,.12);
}

ai-leftbar .show-more-btn{
  margin-top:10px;
  min-height:39px;
  border-radius:14px;
  color:rgba(226,232,240,.70);
  font-size:13px;
  font-weight:650;
  transition:.16s ease;
}

ai-leftbar .show-more-btn:hover{
  color:#fff;
  background:rgba(30,41,59,.86);
  border-color:rgba(147,197,253,.28);
}

ai-leftbar .empty{
  padding:11px 9px;
  border-radius:14px;
  color:rgba(203,213,225,.48);
  font-size:13px;
}

ai-leftbar .rail{
  padding-top:2px;
  gap:10px;
}

ai-leftbar.collapsed .panel{
  padding-left:8px;
  padding-right:8px;
}

ai-leftbar.collapsed .btn-icon{
  background:rgba(15,23,42,.58);
}

@media (max-width: 991.98px){
  ai-leftbar .panel{
    background:
      radial-gradient(circle at 18% 0%, rgba(59,130,246,.20), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(139,92,246,.15), transparent 32%),
      linear-gradient(180deg, rgba(12,17,27,.99), rgba(5,8,14,.99));
    box-shadow:
      28px 0 80px rgba(0,0,0,.58),
      inset -1px 0 0 rgba(255,255,255,.05);
  }

  ai-leftbar .panel.open{
    width:min(86vw, 292px) !important;
  }
}

ai-composer .composer{
  position: relative;
  padding: 10px 12px 8px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(18,24,33,.92), rgba(10,14,20,.96)),
    radial-gradient(circle at 10% 0%, rgba(96,165,250,.12), transparent 34%);
  box-shadow:
    0 18px 55px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

ai-composer .composer:focus-within{
  border-color: rgba(147,197,253,.42);
  background:
    linear-gradient(180deg, rgba(20,27,38,.96), rgba(10,14,20,.98)),
    radial-gradient(circle at 10% 0%, rgba(96,165,250,.18), transparent 36%);
  box-shadow:
    0 22px 65px rgba(0,0,0,.42),
    0 0 0 3px rgba(59,130,246,.11),
    inset 0 1px 0 rgba(255,255,255,.06);
}

ai-composer textarea{
  min-height: 34px;
  padding: 8px 10px 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #eef4ff;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.25) transparent;
}

ai-composer textarea::placeholder{
  color: rgba(203,213,225,.56);
}

ai-composer textarea::-webkit-scrollbar{
  width: 8px;
}

ai-composer textarea::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.22);
  border-radius: 999px;
}

ai-composer .composer-row{
  margin-top: 4px;
  align-items: flex-end;
}

ai-composer .composer-side{
  gap: 7px;
}

ai-composer .btn-icon{
  width: 36px;
  height: 36px;
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.045);
  color: rgba(226,232,240,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .08s ease,
    opacity .16s ease;
}

ai-composer .btn-icon:hover{
  background: rgba(255,255,255,.085);
  border-color: rgba(148,163,184,.28);
  color: #fff;
  box-shadow:
    0 8px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
}

ai-composer .btn-icon:active{
  transform: translateY(1px) scale(.98);
}

ai-composer .btn-icon[disabled]{
  opacity: .38;
  box-shadow: none;
}

ai-composer #send{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #eff6ff;
  border-color: rgba(96,165,250,.40);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg, rgba(37,99,235,.95), rgba(79,70,229,.95));
  box-shadow:
    0 10px 28px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
}

ai-composer #send:not([disabled]):hover{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,1), rgba(99,102,241,1));
  border-color: rgba(147,197,253,.58);
  box-shadow:
    0 14px 34px rgba(37,99,235,.36),
    0 0 0 3px rgba(59,130,246,.12),
    inset 0 1px 0 rgba(255,255,255,.16);
}

ai-composer #send[disabled]{
  color: rgba(226,232,240,.38);
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

ai-composer .btn-clear{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

ai-composer .btn-stop{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #fee2e2;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(185,28,28,.90), rgba(220,38,38,.86));
  border-color: rgba(248,113,113,.45);
  box-shadow: 0 10px 28px rgba(185,28,28,.24);
}

ai-composer .btn-stop:hover{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, rgba(220,38,38,.96), rgba(239,68,68,.90));
}

ai-composer .hint{
  padding: 5px 2px 0;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(203,213,225,.58);
  opacity: 1;
}

ai-composer.busy .busy-ind{
  color: rgba(147,197,253,.95);
}

ai-composer .attachments{
  gap: 9px;
  padding: 2px 2px 8px;
}

ai-composer .chip{
  width: 62px;
  height: 62px;
  border-radius: 15px;
  border-color: rgba(148,163,184,.24);
  background: rgba(15,23,42,.72);
  box-shadow:
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}

ai-composer .chip img{
  border-radius: inherit;
}

ai-composer .chip button{
  top: 5px;
  right: 5px;
  width: 23px;
  height: 23px;
  border-radius: 9px;
  background: rgba(2,6,23,.72);
  border-color: rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}

ai-composer .chip button:hover{
  background: rgba(127,29,29,.82);
  border-color: rgba(248,113,113,.42);
}

ai-composer .composer.drop{
  outline: none;
  border-color: rgba(147,197,253,.60);
  box-shadow:
    0 22px 65px rgba(0,0,0,.42),
    0 0 0 4px rgba(59,130,246,.16),
    inset 0 1px 0 rgba(255,255,255,.07);
}

ai-composer .composer.moderation-blocked{
  border-color: rgba(248,113,113,.72);
  background:
    linear-gradient(180deg, rgba(45,13,18,.96), rgba(15,8,12,.98));
  box-shadow:
    0 22px 65px rgba(127,29,29,.28),
    0 0 0 3px rgba(248,113,113,.18);
}

@media (max-width: 575.98px){
  ai-composer .composer{
    padding: 9px 10px 7px;
    border-radius: 18px;
  }

  ai-composer textarea{
    min-height: 36px;
    max-height: 160px;
    padding: 7px 8px 5px;
    font-size: 14px;
  }

  ai-composer .btn-icon{
    width: 35px;
    height: 35px;
    border-radius: 12px;
  }

  ai-composer #send,
  ai-composer .btn-stop{
    width: 37px;
    height: 37px;
  }

  ai-composer .chip{
    width: 54px;
    height: 54px;
    border-radius: 13px;
  }

  ai-composer .hint{
    font-size: 10.5px;
  }
}

/* Composer v2.1 — smaller action buttons */
ai-composer .btn-icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

ai-composer .btn-icon svg{
  width: 15px;
  height: 15px;
}

ai-composer #attach{
  width: 30px;
  height: 30px;
}

ai-composer #send{
  width: 32px;
  height: 32px;
}

ai-composer #send svg{
  width: 15px;
  height: 15px;
}

ai-composer .btn-stop{
  width: 32px;
  height: 32px;
}

@media (max-width: 575.98px){
  ai-composer .btn-icon,
  ai-composer #attach{
    width: 30px;
    height: 30px;
  }

  ai-composer #send,
  ai-composer .btn-stop{
    width: 32px;
    height: 32px;
  }
}

/* ===================== New Chat Modal polish ===================== */

.newchat-modal {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, .16), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(139, 92, 246, .13), transparent 30%),
    #171922;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
  overflow: hidden;
}

.newchat-modal .modal-header {
  padding: 20px 22px 10px;
}

.newchat-modal .modal-title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.newchat-modal .modal-body {
  padding: 10px 22px 18px;
}

.newchat-modal .modal-footer {
  padding: 12px 22px 20px;
}

.newchat-modal .form-label {
  color: rgba(248, 250, 252, .92);
  font-size: 14px;
  font-weight: 650;
}

.newchat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.newchat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(15, 23, 42, .42);
  color: rgba(226, 232, 240, .82);
  font-size: 12px;
  font-weight: 650;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.newchat-filter-btn:hover {
  color: #fff;
  border-color: rgba(96, 165, 250, .42);
  background: rgba(30, 41, 59, .72);
  transform: translateY(-1px);
}

.newchat-filter-btn.active {
  color: #fff;
  border-color: rgba(96, 165, 250, .72);
  background: linear-gradient(135deg, rgba(37, 99, 235, .62), rgba(124, 58, 237, .48));
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .13);
}

.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}

.models-scroll {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(2, 6, 23, .22);
  max-height: min(52vh, 460px);
  overflow: auto;
}

.models-scroll::-webkit-scrollbar {
  width: 8px;
}

.models-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .28);
}

.model-search-input {
  height: 36px;
  border-radius: 12px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(3, 7, 18, .52);
  color: #e5e7eb;
}

.model-search-input:focus {
  border-color: rgba(96, 165, 250, .72);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
  background: rgba(3, 7, 18, .72);
  color: #fff;
}

#newchat-model-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#newchat-model-list .model-group-title,
#newchat-model-list .models-group-title,
#newchat-model-list .newchat-model-group-title {
  margin: 2px 0 8px;
  color: rgba(148, 163, 184, .92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#newchat-model-list .model-card,
#newchat-model-list .newchat-model-card,
#newchat-model-list button[data-model-id] {
  min-height: 46px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .62);
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

#newchat-model-list .model-card:hover,
#newchat-model-list .newchat-model-card:hover,
#newchat-model-list button[data-model-id]:hover {
  border-color: rgba(96, 165, 250, .52);
  background: rgba(30, 41, 59, .86);
  transform: translateY(-1px);
}

#newchat-model-list .active,
#newchat-model-list .selected,
#newchat-model-list [aria-selected="true"] {
  border-color: rgba(96, 165, 250, .9) !important;
  background: linear-gradient(135deg, rgba(30, 64, 175, .58), rgba(30, 41, 59, .88)) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.model-details {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(15, 23, 42, .38);
  color: rgba(226, 232, 240, .9);
}

.model-details-placeholder {
  font-size: 13px;
}

#newchat-title {
  height: 42px;
  border-radius: 13px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .62);
  color: #fff;
}

#newchat-title:focus {
  border-color: rgba(96, 165, 250, .72);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

#newchat-create-btn {
  border-radius: 11px;
  padding-inline: 16px;
  font-weight: 700;
}

.newchat-modal .btn-secondary {
  border-radius: 11px;
  padding-inline: 14px;
}

.model-card-title {
  padding-right: 22px;
  margin-bottom: 6px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.model-badge-video {
  border-color: rgba(244, 114, 182, .45);
  background: rgba(244, 114, 182, .12);
  color: #fbcfe8;
}

.model-badge-vision {
  border-color: rgba(34, 211, 238, .42);
  background: rgba(34, 211, 238, .11);
  color: #a5f3fc;
}

.model-badge-free {
  border-color: rgba(74, 222, 128, .42);
  background: rgba(74, 222, 128, .10);
  color: #bbf7d0;
}

.model-details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.model-details-meta {
  margin-top: 10px;
  color: rgba(148, 163, 184, .92);
  font-size: 12px;
}

/* =========================================================
   AITranscript polish — user prompt bubble + flat assistant
   ========================================================= */

/* Пользовательский пузырёк: современный, плотный, “premium” */
ai-transcript .msg.u .bubble{
  max-width: min(78%, 760px);
  padding: 12px 44px 36px 16px;
  border-radius: 22px 22px 6px 22px;

  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,.32), transparent 42%),
    linear-gradient(135deg, rgba(30,64,175,.96), rgba(15,23,42,.98));

  color: #f4f8ff;

  box-shadow:
    0 14px 36px rgba(2,6,23,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(147,197,253,.18);
}

ai-transcript .msg.u .bubble .content{
  font-size: 15.5px;
  line-height: 1.62;
}

ai-transcript .msg.u .bubble .content p:last-child{
  margin-bottom: 0;
}

/* Usage-чип внутри пользовательского пузырька */
ai-transcript .msg.u .usage{
  left: 12px;
  bottom: 10px;

  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;

  color: rgba(226,232,240,.92);
  background: rgba(2,6,23,.34);
  border: 1px solid rgba(255,255,255,.14);

  padding: 5px 8px;
  border-radius: 999px;

  backdrop-filter: blur(10px);
}

/* Кнопки копировать/цитировать в пользовательском пузырьке */
ai-transcript .msg.u .actions{
  right: 10px;
  bottom: 9px;
  gap: 6px;
}

ai-transcript .msg.u .action-btn{
  width: 26px;
  height: 26px;
  border-radius: 999px;

  color: rgba(241,245,249,.92);
  background: rgba(2,6,23,.30);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 14px rgba(0,0,0,.18);

  backdrop-filter: blur(10px);
}

ai-transcript .msg.u .action-btn:hover{
  color: #fff;
  background: rgba(59,130,246,.35);
  border-color: rgba(191,219,254,.34);
}

/* Ассистентский ответ оставляем плоским, без “пузыря” */
ai-transcript .msg.a .bubble{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;

  padding-left: 4px;
  padding-right: 86px;
  padding-bottom: 36px;

  color: #e8edf7;
}

ai-transcript .msg.a .bubble .content{
  font-size: 16px;
  line-height: 1.72;
  color: rgba(232,237,247,.96);
}

/* Кнопки ассистента — менее навязчивые */
ai-transcript .msg.a .actions{
  right: 4px;
  bottom: 8px;
}

ai-transcript .msg.a .action-btn{
  width: 25px;
  height: 25px;
  border-radius: 999px;

  color: rgba(203,213,225,.82);
  background: rgba(15,23,42,.38);
  border: 1px solid rgba(148,163,184,.16);
}

ai-transcript .msg.a .action-btn:hover{
  color: #fff;
  background: rgba(30,41,59,.86);
  border-color: rgba(148,163,184,.32);
}

/* Usage ассистента — нейтральный маленький чип */
ai-transcript .msg.a .usage{
  left: 4px;
  bottom: 9px;

  font-size: 11.5px;
  font-weight: 600;

  color: rgba(203,213,225,.78);
  background: rgba(15,23,42,.36);
  border: 1px solid rgba(148,163,184,.14);

  padding: 5px 8px;
  border-radius: 999px;
}

/* Текстовые элементы в ответе ассистента */
ai-transcript .msg.a .content h1,
ai-transcript .msg.a .content h2,
ai-transcript .msg.a .content h3{
  color: #f8fafc;
  font-weight: 750;
  letter-spacing: -.015em;
}

ai-transcript .msg.a .content p{
  margin-bottom: 12px;
}

ai-transcript .msg.a .content strong{
  color: #f8fafc;
}

/* Мобильная адаптация */
@media (max-width: 575.98px){
  ai-transcript .msg.u .bubble{
    max-width: 94%;
    padding: 10px 40px 34px 13px;
    border-radius: 20px 20px 6px 20px;
  }

  ai-transcript .msg.u .bubble .content{
    font-size: 14px;
    line-height: 1.58;
  }

  ai-transcript .msg.a .bubble{
    padding-left: 2px;
    padding-right: 4px;
    padding-top: 26px;
  }

  ai-transcript .msg.a .bubble .content{
    font-size: 14.5px;
    line-height: 1.62;
  }

  ai-transcript .msg.a .model-badge{
    left: 2px;
    right: auto;
    top: 0;
    max-width: calc(100% - 8px);
  }

  ai-transcript .msg.a .actions{
    right: 4px;
    bottom: 6px;
  }
}

ai-transcript .stream-cursor{
  display:inline;
  margin-left:1px;
  vertical-align:baseline;
  color:#22c55e !important;
  text-shadow: 0 0 8px rgba(34,197,94,.65);
  animation: ai-stream-cursor-blink 1s steps(2, start) infinite;
}

ai-transcript pre code .stream-cursor{
  color:#22c55e !important;
  text-shadow: 0 0 8px rgba(34,197,94,.65);
}

@keyframes ai-stream-cursor-blink{
  0%, 45%{ opacity:1; }
  46%, 100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  ai-transcript .stream-cursor{
    animation:none;
    opacity:.75;
  }
}

/* =========================================================
   AITranscript code block — seamless ChatGPT-like variant
   ========================================================= */

ai-transcript .code-block{
  margin: 16px 0 18px;
  border-radius: 12px;
  overflow: hidden;

  background: #0b0f19;
  border: none !important;

  box-shadow: none !important;
}

ai-transcript .code-header{
  min-height: 34px;
  height: 34px;
  padding: 0 10px 0 14px;

  background: #0b0f19 !important;
  border: none !important;
  border-bottom: none !important;
}

ai-transcript .code-lang{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 0;
  border: none;
  background: transparent;

  color: rgba(203,213,225,.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
}

ai-transcript .code-lang::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(96,165,250,.9);
}

ai-transcript .code-copy-btn{
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;

  padding: 0;
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none !important;
  border-radius: 7px;

  background: transparent;
  color: rgba(203,213,225,.72);

  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

ai-transcript .code-copy-btn svg{
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
}

ai-transcript .code-copy-btn:hover{
  background: rgba(255,255,255,.07);
  color: #fff;
}

ai-transcript .code-copy-btn.copied{
  background: rgba(34,197,94,.16);
  color: #86efac;

  font-size: 0 !important;
  line-height: 0 !important;
}

ai-transcript .code-copy-btn.copied svg{
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
}

ai-transcript .code-block pre{
  margin: 0;
  padding: 14px 18px 18px;

  background: #0b0f19 !important;

  font-size: 13.5px;
  line-height: 1.68;
  tab-size: 2;
}

ai-transcript .code-block pre code{
  display: block;
  min-width: max-content;
  padding: 0;
  background: transparent;
}

/* мягкий скролл внутри кода */
ai-transcript .code-block pre{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.30) transparent;
}

ai-transcript .code-block pre::-webkit-scrollbar{
  height: 8px;
  width: 8px;
}

ai-transcript .code-block pre::-webkit-scrollbar-track{
  background: transparent;
}

ai-transcript .code-block pre::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.28);
  border-radius: 999px;
}

ai-transcript .code-block pre::-webkit-scrollbar-thumb:hover{
  background: rgba(203,213,225,.42);
}

@media (max-width: 575.98px){
  ai-transcript .code-block{
    border-radius: 10px;
    margin: 12px 0 14px;
  }

  ai-transcript .code-header{
    min-height: 32px;
    height: 32px;
    padding: 0 8px 0 12px;
  }

  ai-transcript .code-copy-btn{
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
  }

  ai-transcript .code-block pre{
    padding: 12px 14px 15px;
    font-size: 12.5px;
    line-height: 1.62;
  }
}

/* Fix: центрирование галочки после копирования кода */
ai-transcript .code-copy-btn.copied{
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;

  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

ai-transcript .code-copy-btn.copied svg{
  position: static !important;
  display: block !important;

  width: 15px !important;
  height: 15px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  inset: auto !important;
}

ai-transcript .code-copy-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

ai-transcript .code-copy-check svg{
  display: block;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

/* Model badge внутри ответа ассистента */
ai-transcript .msg.a .model-badge{
  top: 4px !important;
  right: 4px !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 9px;
  border-radius: 999px;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;

  color: rgba(241,245,249,.96);

  background:
    linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.16));

  border: 1px solid rgba(147,197,253,.36);

  box-shadow:
    0 6px 18px rgba(37,99,235,.16),
    inset 0 1px 0 rgba(255,255,255,.08);

  opacity: 1 !important;
}

ai-transcript .msg.a .model-badge::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 9px rgba(96,165,250,.75);
  flex: 0 0 auto;
}

.newchat-mode-switch{
  display: flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.newchat-mode-btn{
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  color: rgba(255,255,255,.72);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  transition: .15s ease;
}

.newchat-mode-btn:hover{
  color: #fff;
  background: rgba(255,255,255,.07);
}

.newchat-mode-btn.active{
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 22px rgba(99,102,241,.28);
}

.agent-status-box{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(220,230,255,.72);
}

.agent-status-line{
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-status-line::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6da2ff;
  box-shadow: 0 0 10px rgba(109,162,255,.8);
}

/* ===== Current chat mode badge ===== */
ai-center .ai-current-mode{
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 4px auto 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  color: rgba(226,232,240,.92);
  background: rgba(15,23,42,.52);
  border: 1px solid rgba(148,163,184,.20);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

ai-center .ai-current-mode[hidden]{
  display: none !important;
}

ai-center .ai-current-mode-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 10px rgba(96,165,250,.75);
}

ai-center .ai-current-mode.agent{
  color: #ede9fe;
  background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(139,92,246,.18));
  border-color: rgba(167,139,250,.34);
}

ai-center .ai-current-mode.agent .ai-current-mode-dot{
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(167,139,250,.82);
}

ai-leftbar .chat-item__main{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

ai-leftbar .chat-item__title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ai-leftbar .chat-item__mode-chip{
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  color: #ede9fe;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(167,139,250,.32);
}

@media (max-width: 575.98px){
  ai-center .ai-current-mode{
    margin-top: 2px;
    margin-bottom: 10px;
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* =========================================================
   User prompt collapse / expand
   ========================================================= */

/* Для длинных пользовательских сообщений */
ai-transcript .msg.u .bubble.is-collapsible{
  overflow: hidden;
}

/* Свернутое состояние */
ai-transcript .msg.u .bubble.is-collapsed .content{
  max-height: 280px;
  overflow: hidden;
  position: relative;
}

/* Нижнее затемнение в свернутом prompt */
ai-transcript .msg.u .bubble.is-collapsed .content::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(15,23,42,0),
    rgba(15,23,42,.96)
  );
}

/* Развернутое состояние */
ai-transcript .msg.u .bubble.is-expanded .content{
  max-height: none;
  overflow: visible;
}

/* Контейнер кнопки */
ai-transcript .msg.u .user-expand-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
}

/* Сама кнопка */
ai-transcript .msg.u .user-expand-btn{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(219,234,254,.96);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

ai-transcript .msg.u .user-expand-btn:hover{
  color: #ffffff;
  text-decoration: underline;
}

/* В свернутом состоянии оставляем место под кнопку + usage/actions */
ai-transcript .msg.u .bubble.is-collapsed{
  padding-bottom: 50px;
}

/* В развернутом состоянии тоже не даём кнопкам налезать на текст */
ai-transcript .msg.u .bubble.is-expanded{
  padding-bottom: 50px;
}

/* User prompt больше не получает большие code-card внутри пузырька.
   Если пользователь вставил код, он отображается как обычный текст с переносами. */
ai-transcript .msg.u .content{
  overflow-wrap: anywhere;
  word-break: break-word;
}

ai-transcript .msg.u .content br{
  display: block;
}

/* Мобильный вариант */
@media (max-width: 575.98px){
  ai-transcript .msg.u .bubble.is-collapsed .content{
    max-height: 240px;
  }

  ai-transcript .msg.u .bubble.is-collapsed,
  ai-transcript .msg.u .bubble.is-expanded{
    padding-bottom: 54px;
  }

  ai-transcript .msg.u .user-expand-btn{
    font-size: 12.5px;
  }
}

/* Fine-tune user expand button placement */
ai-transcript .msg.u .user-expand-wrap{
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

ai-transcript .msg.u .user-expand-btn{
  padding: 2px 0 !important;
  gap: 6px;
}

/* Заменяем символ на аккуратную SVG-стрелку */
ai-transcript .msg.u .user-expand-btn::after{
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  opacity: .92;
  transform: none;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

ai-transcript .msg.u .bubble.is-expanded .user-expand-btn::after{
  transform: rotate(180deg);
}

/* Preserve indentation in user prompts */
ai-transcript .msg.u .content{
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 2;
}

/* Чтобы длинные строки кода не ломали пузырёк */
ai-transcript .msg.u .content{
  max-width: 100%;
}

/* =========================================================
   New Chat Modal — model cards with provider icons
   ========================================================= */

#newchat-model-list .model-card{
  min-height: 66px;
  padding: 10px 34px 10px 10px !important;
}

.model-card-main{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.model-card-content{
  min-width: 0;
  flex: 1 1 auto;
}

.model-brand{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 850;
  letter-spacing: -.04em;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 20px rgba(0,0,0,.22);
}

.model-brand span{
  transform: translateY(-.5px);
}

.model-brand-card{
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.model-brand-details{
  width: 42px;
  height: 42px;
  font-size: 18px;
  border-radius: 16px;
}

.model-brand-openai{
  background: linear-gradient(135deg, #111827, #334155);
}

.model-brand-anthropic{
  background: linear-gradient(135deg, #7c2d12, #c2410c);
}

.model-brand-deepseek{
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
}

.model-brand-grok{
  background: linear-gradient(135deg, #020617, #64748b);
}

.model-brand-google{
  background: linear-gradient(135deg, #2563eb, #22c55e 48%, #f59e0b);
}

.model-brand-qwen{
  background: linear-gradient(135deg, #6d28d9, #38bdf8);
}

.model-brand-meta{
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.model-brand-yandex{
  background: linear-gradient(135deg, #dc2626, #f97316);
}

.model-brand-sber{
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.model-brand-default{
  background: linear-gradient(135deg, #475569, #1e293b);
}

#newchat-model-list .model-card-title{
  padding-right: 0;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.18;
}

#newchat-model-list .model-badge{
  max-width: 100%;
  white-space: nowrap;
}

/* Details block: не обрезаем описание */
#newchat-model-details.model-details{
  max-height: 148px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}

#newchat-model-details.model-details::-webkit-scrollbar{
  width: 7px;
}

#newchat-model-details.model-details::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.32);
  border-radius: 999px;
}

.model-details-head-v2{
  align-items: flex-start;
  justify-content: flex-start;
}

.model-details-main{
  min-width: 0;
  flex: 1 1 auto;
}

.model-details-title-v2{
  margin-bottom: 5px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.model-details-text-v2{
  color: rgba(226,232,240,.9);
  font-size: 12.5px;
  line-height: 1.48;
  white-space: normal;
}

#newchat-model-details .model-details-meta{
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.35;
}

/* чуть лучше сетка карточек в модалке */
.newchat-modal .models-scroll .col-12,
.newchat-modal .models-scroll .col-md-4,
.newchat-modal .models-scroll .col-xl-3{
  padding-left: 5px;
  padding-right: 5px;
}

@media (max-width: 575.98px){
  #newchat-model-list .model-card{
    min-height: 62px;
    padding: 9px 32px 9px 9px !important;
  }

  .model-brand-card{
    width: 32px;
    height: 32px;
    border-radius: 13px;
    font-size: 14px;
  }

  #newchat-model-details.model-details{
    max-height: 132px;
  }
}

.ai-memory-panel{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.42);
}

.ai-memory-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:10px;
}

.ai-memory-title{
  font-size:14px;
  font-weight:800;
  color:#f8fafc;
}

.ai-memory-subtitle{
  margin-top:3px;
  font-size:12px;
  color:rgba(203,213,225,.72);
}

.ai-memory-switch{
  flex:0 0 auto;
  font-size:12px;
  color:rgba(226,232,240,.86);
}

.ai-memory-summary{
  min-height:96px;
  resize:vertical;
  border-radius:12px;
  background:rgba(2,6,23,.46);
  border-color:rgba(148,163,184,.22);
  color:#eef4ff;
  font-size:13px;
  line-height:1.45;
}

.ai-memory-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.btn-web-search{
  position: relative;
}

.btn-web-search .web-search-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-web-search .web-search-icon svg{
  display: block;
}

.btn-web-search.active{
  border-color: rgba(99, 102, 241, .75);
  background: rgba(99, 102, 241, .18);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .35), 0 0 18px rgba(99, 102, 241, .22);
}

.btn-web-search.active::after{
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .85);
}

/* Markdown tables in AI answers */
.msg.a .content .md-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 14px 0;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
}

.msg.a .content table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.msg.a .content th,
.msg.a .content td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  text-align: left;
  vertical-align: top;
}

.msg.a .content th{
  font-weight: 700;
  background: rgba(148, 163, 184, .10);
}

.msg.a .content tr:last-child td{
  border-bottom: 0;
}

.msg.a .content td code,
.msg.a .content th code{
  white-space: nowrap;
}

/* Markdown / LaTeX math in AI answers */
.msg.a .content .katex{
  font-size: 1.05em;
}

.msg.a .content .katex-display{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  margin: 14px 0;
}

.msg.a .content .katex-display > .katex{
  max-width: 100%;
}

.msg.a .content .katex-error{
  color: #fca5a5;
  white-space: pre-wrap;
}

.voice-panel{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 2px;
  color:#cbd5e1;
  font-size:12px;
}

.voice-panel[hidden]{
  display:none !important;
}

.voice-wave{
  display:flex;
  align-items:center;
  gap:3px;
  height:24px;
}

.voice-wave span{
  display:block;
  width:3px;
  height:8px;
  border-radius:999px;
  background:rgba(226,232,240,.85);
  animation: aiVoiceWave 900ms ease-in-out infinite;
}

.voice-wave span:nth-child(2){ animation-delay:.08s; }
.voice-wave span:nth-child(3){ animation-delay:.16s; }
.voice-wave span:nth-child(4){ animation-delay:.24s; }
.voice-wave span:nth-child(5){ animation-delay:.32s; }
.voice-wave span:nth-child(6){ animation-delay:.40s; }
.voice-wave span:nth-child(7){ animation-delay:.32s; }
.voice-wave span:nth-child(8){ animation-delay:.24s; }
.voice-wave span:nth-child(9){ animation-delay:.16s; }
.voice-wave span:nth-child(10){ animation-delay:.08s; }

@keyframes aiVoiceWave{
  0%, 100%{ height:7px; opacity:.45; }
  50%{ height:22px; opacity:1; }
}

.btn-voice.recording{
  color:#fff;
  background:rgba(239,68,68,.22);
  border-color:rgba(239,68,68,.55);
}

.voice-stop-dot{
  width:11px;
  height:11px;
  border-radius:3px;
  background:#ef4444;
  display:inline-block;
  box-shadow:0 0 0 4px rgba(239,68,68,.16);
}

.btn-voice.transcribing{
  color:#fff;
  background:rgba(59,130,246,.18);
}

.voice-spinner{
  width:15px;
  height:15px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  display:inline-block;
  animation: aiVoiceSpin .75s linear infinite;
}

@keyframes aiVoiceSpin{
  to{ transform:rotate(360deg); }
}

.video-wrap {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ai-video-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
}

.ai-video-player {
  display: block;
  width: 100%;
  max-height: 520px;
  background: #000;
}

.ai-video-download {
  display: inline-flex;
  padding: 10px 12px;
  font-size: 14px;
  text-decoration: none;
}

.ai-video-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 4px;
}

.ai-video-note {
  padding: 0 12px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.62);
}

/* Центровка иконки микрофона в кнопке */
ai-composer .btn-voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

ai-composer .btn-voice .voice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

ai-composer .btn-voice .voice-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  transform: translateY(-1px);
}

/* =========================================================
   AI Settings Modal — session parameters
   ========================================================= */

#aiSettingsModal .modal-dialog{
  max-width: 760px;
}

.ai-settings-modal{
  position: relative;
  overflow: hidden;
  color: #eef4ff;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(59,130,246,.18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(139,92,246,.16), transparent 32%),
    linear-gradient(180deg, rgba(18,24,33,.98), rgba(9,13,20,.98));
  box-shadow:
    0 32px 100px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
}

.ai-settings-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent);
  opacity:.55;
}

.ai-settings-modal .modal-header{
  position: relative;
  padding: 22px 24px 10px;
}

.ai-settings-modal .modal-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.ai-settings-modal .btn-close{
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 12px;
  background-size: 13px;
  background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .85;
}

.ai-settings-modal .btn-close:hover{
  opacity: 1;
  background-color: rgba(255,255,255,.11);
}

.ai-settings-modal .modal-body{
  position: relative;
  padding: 12px 24px 14px;
}

.ai-settings-modal .modal-footer{
  position: relative;
  padding: 12px 24px 22px;
  gap: 8px;
}

.ai-settings-modal .form-label{
  margin-bottom: 7px;
  color: rgba(226,232,240,.92);
  font-size: 13px;
  font-weight: 700;
}

.ai-settings-modal .form-control{
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.42);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.ai-settings-modal .form-control::placeholder{
  color: rgba(203,213,225,.48);
}

.ai-settings-modal .form-control:focus{
  color: #fff;
  background: rgba(2,6,23,.62);
  border-color: rgba(96,165,250,.68);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.ai-settings-modal input.form-control{
  height: 40px;
}

.ai-settings-modal textarea.form-control{
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}

.ai-settings-modal textarea.form-control::-webkit-scrollbar{
  width: 8px;
}

.ai-settings-modal textarea.form-control::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(148,163,184,.28);
}

.ai-settings-modal .row.g-3{
  --bs-gutter-x: 14px;
  --bs-gutter-y: 16px;
}

.ai-settings-modal .col-md-4{
  position: relative;
}

.ai-settings-modal .col-md-4 .form-control{
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,.10), transparent 46%),
    rgba(2,6,23,.42);
}

/* Memory block inside settings */
.ai-settings-modal .ai-memory-panel{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(96,165,250,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,.15), transparent 38%),
    rgba(15,23,42,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.22);
}

.ai-settings-modal .ai-memory-head{
  align-items: center;
  margin-bottom: 12px;
}

.ai-settings-modal .ai-memory-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 850;
  color: #f8fafc;
}

.ai-settings-modal .ai-memory-title::before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 14px rgba(96,165,250,.85);
}

.ai-settings-modal .ai-memory-subtitle{
  margin-top: 5px;
  color: rgba(203,213,225,.68);
  font-size: 12.5px;
}

.ai-settings-modal .ai-memory-switch{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
}

.ai-settings-modal .ai-memory-switch .form-check-input{
  width: 38px;
  height: 20px;
  margin-top: 0;
  cursor: pointer;
  background-color: rgba(15,23,42,.85);
  border-color: rgba(148,163,184,.30);
  box-shadow: none;
}

.ai-settings-modal .ai-memory-switch .form-check-input:checked{
  background-color: #2563eb;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

.ai-settings-modal .ai-memory-switch .form-check-label{
  color: rgba(226,232,240,.82);
  font-size: 12px;
  font-weight: 650;
}

.ai-settings-modal .ai-memory-summary{
  min-height: 92px;
  border-radius: 14px;
  background: rgba(2,6,23,.52);
  border-color: rgba(148,163,184,.22);
  color: #eef4ff;
  font-size: 13px;
  line-height: 1.48;
}

.ai-settings-modal .ai-memory-actions{
  margin-top: 11px;
}

.ai-settings-modal #memory-clear-btn{
  border-radius: 11px;
  font-weight: 700;
  border-color: rgba(248,113,113,.48);
  color: #fecaca;
}

.ai-settings-modal #memory-clear-btn:hover{
  background: rgba(220,38,38,.16);
  border-color: rgba(248,113,113,.72);
  color: #fff;
}

.ai-settings-modal #memory-status{
  color: rgba(148,163,184,.78) !important;
}

.ai-settings-modal .ai-divider{
  margin: 16px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.20), transparent);
}

/* Footer buttons */
.ai-settings-modal .btn{
  border-radius: 12px;
  min-height: 34px;
  padding-inline: 15px;
  font-weight: 750;
}

.ai-settings-modal .btn-secondary{
  border-color: rgba(148,163,184,.18);
  background: rgba(148,163,184,.14);
  color: rgba(226,232,240,.90);
}

.ai-settings-modal .btn-secondary:hover{
  background: rgba(148,163,184,.22);
  color: #fff;
}

.ai-settings-modal .btn-primary{
  border-color: rgba(96,165,250,.52);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, rgba(37,99,235,.96), rgba(79,70,229,.96));
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
}

.ai-settings-modal .btn-primary:hover{
  border-color: rgba(147,197,253,.72);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,1), rgba(99,102,241,1));
  box-shadow:
    0 16px 34px rgba(37,99,235,.36),
    0 0 0 3px rgba(59,130,246,.13);
}

/* Mobile */
@media (max-width: 575.98px){
  #aiSettingsModal{
    padding: 10px !important;
  }

  #aiSettingsModal .modal-dialog{
    margin: 0 auto !important;
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 20px);
    display: flex;
    align-items: center;
  }

  .ai-settings-modal{
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
  }

  .ai-settings-modal .modal-header{
    flex: 0 0 auto;
    padding: 18px 20px 8px;
  }

  .ai-settings-modal .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 20px 12px;
  }

  .ai-settings-modal .modal-footer{
    flex: 0 0 auto;
    padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(148,163,184,.14) !important;
    background: rgba(9,13,20,.98);
  }

  .ai-settings-modal .ai-memory-head{
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-settings-modal .ai-memory-switch{
    width: 100%;
    justify-content: space-between;
  }
}

.ai-settings-modal .ai-memory-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  background: rgba(2,6,23,.52);
  border: 1px solid rgba(148,163,184,.22);
}

.ai-settings-modal .ai-memory-item{
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.16);
}

.ai-settings-modal .ai-memory-item-text{
  color: #eef4ff;
  font-size: 13px;
  line-height: 1.45;
}

.ai-settings-modal .ai-memory-item-remove{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  border: 1px solid rgba(248,113,113,.28);
  background: rgba(127,29,29,.16);
  color: #fecaca;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ai-settings-modal .ai-memory-item-remove:hover{
  background: rgba(220,38,38,.24);
  border-color: rgba(248,113,113,.55);
  color: #fff;
}

.ai-settings-modal .ai-memory-empty{
  padding: 10px;
  color: rgba(203,213,225,.62);
  font-size: 13px;
}

/* Кликабельные изображения в ответах ассистента */
.ai-msg img,
.msg img,
.message img,
.assistant img,
.ai-generated-image,
.chat-image,
.transcript-image {
  cursor: pointer;
}

/* Про биллинг */
.ai-balance-top{
    height:40px;
    min-width:90px;

    padding:0 12px;

    border:none;
    border-radius:12px;

    display:flex;
    align-items:center;
    gap:6px;

    color:#fff;

    background:
      rgba(255,255,255,.045);

    border:1px solid rgba(255,255,255,.08);

    transition:.2s;
}

.ai-balance-top:hover{
    background:
      rgba(124,92,255,.14);

    border-color:
      rgba(124,92,255,.30);

    transform:translateY(-1px);
}

.ai-balance-top .currency{
    color:#6ee7b7;
    font-weight:700;
}

#billing-top-nav {
  display: none;
  align-items: center;
}

#billing-top-nav.is-visible {
  display: flex !important;
}

.ai-balance-top {
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.045);
  color: #f4f7ff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ai-balance-top:hover {
  background: rgba(124, 92, 255, 0.14);
  border-color: rgba(124, 92, 255, 0.30);
}

.ai-balance-top .currency {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 201, 255, 0.14);
  color: #8edcff;
  font-size: 0.75rem;
}

@media (max-width:991px){

    .ai-balance-top{
        min-width:auto;
        padding:0 10px;
    }

    #billingBalanceTop{
        max-width:65px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
}

@media (min-width: 992px) {
  #billing-top-nav {
    order: 1;
    margin-right: 4px;
  }

  #menu-top-nav {
    order: 2;
    margin-right: 14px;
  }

  #input-output {
    order: 3;
  }

  #profile-1 {
    order: 4;
  }

  #billing-top-nav.is-visible {
    display: flex !important;
    align-items: center;
  }

  #nav_id_menu .navbar-nav {
    gap: 4px;
  }
}

.ai-billing-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.ai-billing-preset{
  min-height:40px;
  padding:0 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#dce6ff;
  font-weight:800;
}

.ai-billing-preset:hover{
  background:rgba(124,92,255,.12);
  border-color:rgba(124,92,255,.32);
  color:#fff;
}

.ai-billing-preset.active{
  background:rgba(124,92,255,.22);
  border-color:rgba(124,92,255,.55);
  color:#fff;
}

.ai-billing-modal-v2{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(124,92,255,.28);
  border-radius:26px;
  background:
    radial-gradient(circle at 16% 0%, rgba(124,92,255,.24), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(76,141,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(20,27,42,.98), rgba(9,13,23,.99));
  color:#eef3ff;
  box-shadow:0 24px 80px rgba(0,0,0,.62);
}

.ai-billing-modal-glow{
  position:absolute;
  inset:-120px -120px auto auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(124,92,255,.18);
  filter:blur(38px);
  pointer-events:none;
}

.ai-billing-header{
  position:relative;
  padding:24px 24px 10px;
  align-items:flex-start;
}

.ai-billing-kicker{
  color:#8ea2ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.ai-billing-title{
  color:#fff;
  font-size:24px;
  font-weight:950;
  line-height:1.1;
}

.ai-billing-close{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:#c7d2e8;
  font-size:26px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ai-billing-close:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}

.ai-billing-body{
  position:relative;
  padding:12px 24px 18px;
}

.ai-billing-balance-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}

.ai-billing-balance-label{
  color:#9ca8bf;
  font-size:13px;
  font-weight:700;
}

.ai-billing-balance-value{
  margin-top:5px;
  color:#fff;
  font-size:30px;
  font-weight:950;
  letter-spacing:-.03em;
}

.ai-billing-balance-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.32);
  color:#bba8ff;
  font-size:22px;
  font-weight:950;
}

.ai-billing-section{
  margin-top:18px;
}

.ai-billing-section-title{
  margin-bottom:10px;
  color:#dce6ff;
  font-size:14px;
  font-weight:900;
}

.ai-billing-presets{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.ai-billing-preset{
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:#dce6ff;
  font-weight:900;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.ai-billing-preset:hover{
  transform:translateY(-1px);
  background:rgba(124,92,255,.13);
  border-color:rgba(124,92,255,.36);
  color:#fff;
}

.ai-billing-preset.active{
  background:linear-gradient(135deg, rgba(124,92,255,.34), rgba(76,141,255,.22));
  border-color:rgba(124,92,255,.68);
  color:#fff;
  box-shadow:0 10px 26px rgba(124,92,255,.18);
}

.ai-billing-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(76,141,255,.075);
  border:1px solid rgba(76,141,255,.14);
  color:#b8c6df;
  font-size:13px;
  line-height:1.45;
}

.ai-billing-status{
  min-height:20px;
  margin-top:10px;
  color:#aebad0;
  font-size:13px;
}

.ai-billing-footer{
  position:relative;
  padding:0 24px 24px;
  gap:10px;
}

.ai-billing-secondary,
.ai-billing-primary{
  min-height:42px;
  border-radius:14px;
  font-weight:900;
  padding:9px 16px;
}

.ai-billing-secondary{
  color:#dce6ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.ai-billing-secondary:hover{
  color:#fff;
  background:rgba(255,255,255,.11);
}

.ai-billing-primary{
  color:#fff;
  border:0;
  background:linear-gradient(135deg, #7c5cff, #4c8dff);
  box-shadow:0 12px 28px rgba(76,141,255,.28);
}

.ai-billing-primary:hover{
  color:#fff;
  filter:brightness(1.06);
}

@media(max-width:575.98px){
  .ai-billing-modal-v2{
    border-radius:22px;
  }

  .ai-billing-header{
    padding:20px 18px 8px;
  }

  .ai-billing-body{
    padding:10px 18px 16px;
  }

  .ai-billing-footer{
    padding:0 18px 20px;
  }

  .ai-billing-presets{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ai-billing-balance-value{
    font-size:26px;
  }
}

.ai-billing-test-badge{
  margin-bottom:14px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,193,7,.12);
  border:1px solid rgba(255,193,7,.32);
  color:#ffe39a;
  font-size:13px;
  font-weight:850;
  text-align:center;
}

/*  ------------------------------ */
.billing-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;

  margin-top:10px;
  padding:6px 11px;

  border-radius:999px;

  font-size:12px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.01em;

  color:#dbe7ff;

  background:
    linear-gradient(
      180deg,
      rgba(31,84,255,.25),
      rgba(31,84,255,.08)
    );

  border:1px solid rgba(90,140,255,.25);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 6px 20px rgba(0,0,0,.25);
}

.billing-chip::before{
  content:"₽";
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:18px;
  height:18px;

  margin-right:7px;

  border-radius:50%;

  font-size:11px;
  font-weight:900;

  color:#bfe4ff;
  background:rgba(80,140,255,.20);
  border:1px solid rgba(120,170,255,.25);
}

.billing-chip.billing-error{
  color:#ffd0d0;
  background:linear-gradient(
    180deg,
    rgba(255,70,70,.20),
    rgba(255,70,70,.08)
  );
  border-color:rgba(255,90,90,.35);
}

.billing-chip.billing-error::before{
  content:"!";
  color:#ffd0d0;
  background:rgba(255,70,70,.18);
  border-color:rgba(255,90,90,.35);
}

#newchat-mode-hint{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(238, 243, 255, .9);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

#newchat-mode-hint.is-agent{
  color: #f4f7ff;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, .24), rgba(48, 119, 255, .13)),
    rgba(255, 255, 255, .055);
  border-color: rgba(148, 124, 255, .48);
  box-shadow:
    0 12px 30px rgba(76, 68, 255, .16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.newchat-agent-hint-title{
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 850;
  color: #ffffff;
}

.newchat-agent-hint-text{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(238, 243, 255, .92);
}

#newchat-mode-hint.is-manual{
  color: #f0f4ff;
  background:
    linear-gradient(135deg, rgba(60, 116, 255, .14), rgba(255, 255, 255, .055)),
    rgba(255, 255, 255, .05);
  border-color: rgba(120, 155, 255, .28);
}

.btn-agent-start{
  margin-top: 8px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, .34), rgba(30, 112, 255, .20)),
    rgba(255,255,255,.045);
  border-color: rgba(139, 113, 255, .42);
  box-shadow: 0 10px 24px rgba(76, 68, 255, .14);
}

.btn-agent-start:hover{
  background:
    linear-gradient(135deg, rgba(124, 92, 255, .48), rgba(30, 112, 255, .28)),
    rgba(255,255,255,.07);
  border-color: rgba(160, 138, 255, .62);
}

.agent-start-icon{
  display:inline-flex;
  width:18px;
  justify-content:center;
  filter: drop-shadow(0 0 8px rgba(160, 138, 255, .55));
}

.btn-agent-start-rail{
  color:#fff;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, .36), rgba(30,112,255,.18)),
    rgba(255,255,255,.045);
  border-color: rgba(139,113,255,.42);
}

#newChatBtn{
  margin-bottom: 8px;
}

/* =========================================================
   FINAL FIX: New Chat Modal layout
   ========================================================= */

#aiNewChatModal .modal-dialog{
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  margin: 12px auto !important;
}

#aiNewChatModal .newchat-modal{
  max-height: calc(100dvh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#aiNewChatModal .newchat-modal .modal-header{
  flex: 0 0 auto !important;
  padding: 16px 22px 8px !important;
}

#aiNewChatModal .newchat-modal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 22px 12px !important;
}

#aiNewChatModal .newchat-modal .modal-footer{
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 10px 22px 16px !important;
  margin: 0 !important;
  background: rgba(23,25,34,.98) !important;
  border-top: 1px solid rgba(148,163,184,.14) !important;
}

#newchat-model-scroll{
  max-height: clamp(220px, 38dvh, 390px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#newchat-model-details.model-details{
  max-height: 92px !important;
  min-height: 58px !important;
  overflow-y: auto !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding: 10px 12px !important;
}

#aiNewChatModal .mb-3{
  margin-bottom: 12px !important;
}

#newchat-title{
  margin-bottom: 0 !important;
}

@media (max-height: 760px){
  #aiNewChatModal .modal-dialog{
    margin: 8px auto !important;
  }

  #aiNewChatModal .newchat-modal{
    max-height: calc(100dvh - 16px) !important;
  }

  #newchat-model-scroll{
    max-height: clamp(180px, 32dvh, 320px) !important;
  }

  #newchat-model-details.model-details{
    max-height: 78px !important;
  }
}

@media (max-width: 575.98px){
  #aiNewChatModal .modal-dialog{
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    margin: 6px auto !important;
  }

  #aiNewChatModal .newchat-modal{
    max-height: calc(100dvh - 12px) !important;
    border-radius: 20px !important;
  }

  #aiNewChatModal .newchat-modal .modal-header{
    padding: 16px 16px 8px !important;
  }

  #aiNewChatModal .newchat-modal .modal-body{
    padding: 8px 16px 12px !important;
  }

  #aiNewChatModal .newchat-modal .modal-footer{
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #newchat-model-scroll{
    max-height: 38dvh !important;
  }
}

/* =========================================================
   Desktop AI layout: leftbar from top to bottom like ChatGPT
   ========================================================= */

@media (min-width: 992px) {
  body.ai-chat-page {
    --ai-chat-left-offset: var(--ai-leftbar-offset, var(--ai-leftbar-wide));
  }

  body.ai-chat-page #transparent-menu-background {
    left: var(--ai-chat-left-offset) !important;
    width: calc(100% - var(--ai-chat-left-offset)) !important;
  }

  body.ai-chat-page #header_id {
    margin-left: var(--ai-chat-left-offset) !important;
    width: calc(100% - var(--ai-chat-left-offset)) !important;
  }

  body.ai-chat-page ai-leftbar .panel {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    z-index: 1035 !important;
  }

  body.ai-chat-page ai-leftbar .topbar {
    min-height: 56px;
    height: 56px;
    padding-top: 6px;
    align-items: center;
  }

  body.ai-chat-page ai-leftbar .title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  body.ai-chat-page ai-leftbar .title.home-link {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    background: url("/static/docapp/images/favicon.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 12px rgba(124, 92, 255, 0.34));
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
  }

  body.ai-chat-page ai-leftbar .title.home-link:hover {
    transform: translateY(-1px);
  }

  body.ai-chat-page ai-leftbar.collapsed .title.home-link {
    display: none;
  }
}

/* На десктопе в AI-чате скрываем основной логотип в верхнем меню.
   На мобильной версии он остаётся как раньше. */
@media (min-width: 992px) {
  body.ai-chat-page #nav_id_menu .navbar-brand {
    display: none !important;
  }
}

/* Логотип внутри открытого мобильного сайдбара */
@media (max-width: 991.98px) {
  body.ai-chat-page ai-leftbar .panel.open .title {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
  }

  body.ai-chat-page ai-leftbar .panel.open .title.home-link {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    background: url("/static/docapp/images/favicon.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 12px rgba(124, 92, 255, 0.34));
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
  }
}