/* build:1755443920 */
/* ===== Chat Composer (bottom bar) + Tools Sheet ===== */
:root{
    --ci-bg:#fff; --ci-border:#e5e7eb; --ci-text:#111827; --ci-muted:#6b7280;
    --ci-accent:#2563eb; --ci-accent-hover:#1d4ed8; --ci-bg-muted:#f3f4f6;
    --ci-radius:14px; --ci-btn:40px; --sheet-bg:rgba(17,24,39,.6);
}
body{ padding-bottom:max(88px,10vh); }

#chat-input-container{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:12px 14px;
    background:linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,0));
}

/* pill */
.chat-composer{
    max-width:880px; margin:0 auto; padding:10px;
    display:flex; align-items:flex-end; gap:10px;
    background:var(--ci-bg); border:1px solid var(--ci-border);
    border-radius:var(--ci-radius); box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.chat-composer textarea{
    flex:1 1 auto; min-height:44px; max-height:28vh; resize:none; outline:none;
    border:1px solid var(--ci-border); background:var(--ci-bg-muted);
    border-radius:12px; padding:10px 12px; line-height:1.35; color:var(--ci-text);
}

/* buttons */
.ci-btn{
    width:var(--ci-btn); height:var(--ci-btn);
    border:1px solid var(--ci-border); background:var(--ci-bg);
    border-radius:12px; display:grid; place-items:center; cursor:pointer;
    transition:background .15s;
}
.ci-btn:hover{ background:var(--ci-bg-muted); }
.ci-btn.send{ background:var(--ci-accent); border-color:var(--ci-accent); }
.ci-btn.send:hover{ background:var(--ci-accent-hover); }
.ci-btn img{ width:20px; height:20px; display:block; }

/* ===== Bottom Sheet ===== */
.tools-backdrop{ position:fixed; inset:0; background:var(--sheet-bg); display:none; z-index:60; }
.tools-backdrop.open{ display:block; }
.tools-sheet{
    position:absolute; left:0; right:0; bottom:0;
    background:#0b0f19; color:#e5e7eb; border-radius:16px 16px 0 0;
    transform:translateY(100%); transition:transform .24s ease;
    padding:16px 14px 22px;
}
.tools-backdrop.open .tools-sheet{ transform:translateY(0); }

.tools-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px; padding-top:6px;
}
.tool-tile{
    background:#111827; border:1px solid #1f2937; border-radius:14px; height:92px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; transition:background .15s;
}
.tool-tile:hover{ background:#0f172a; }
.tool-tile img{ width:22px; height:22px; }
.tool-tile .label{ font-size:14px; }

.tools-actions{ display:flex; gap:10px; margin-top:14px; }
.tools-actions .close{
    flex:1 1 auto; border:1px solid #374151; background:#111827; color:#e5e7eb;
    border-radius:12px; padding:10px; text-align:center; cursor:pointer;
}
.tools-actions .send{
    min-width:120px; background:var(--ci-accent); color:#fff; border:0;
    border-radius:12px; padding:10px 14px; cursor:pointer;
}

/* hidden inputs */
#ci-file-any,#ci-file-image,#ci-file-camera{ display:none; }

@media (max-width:480px){
    #chat-input-container{ padding:10px; }
    .chat-composer{ gap:8px; padding:8px; }
    .chat-composer textarea{ min-height:40px; }
}

/* === UI-3 (2025-08-16): compact centered bar + same width light sheet ================== */
:root{ --ci-max: 720px; } /* единая целевая ширина бара/модалки */

#chat-input-container{
  padding:12px 0;
  background: transparent !important; /* убираем тёмную «линзу» у низа */
  pointer-events: none;                /* кликаем только по пилюле */
}

.chat-composer{
  width: min(calc(100% - 24px), var(--ci-max));
  margin: 0 auto;
  max-width: none;
  align-items: center;
  pointer-events: auto;
  border-radius: 9999px;               /* сильное скругление как на скрине */
}

.chat-composer textarea{
  min-height: 44px;
  max-height: 40vh;
  border: none;
  background: var(--ci-bg-muted);
}

.ci-btn{
  width: var(--ci-btn); height: var(--ci-btn);
  border-radius: 9999px;
  border: 1px solid var(--ci-border);
  background: #fff;
}
.ci-btn:hover{ background: #f5f6f7; }
.ci-btn.send{ background: var(--ci-accent); border-color: var(--ci-accent); }
.ci-btn.send:hover{ background: var(--ci-accent-hover); }

/* Светлая модалка РОВНО ширины бара */
.tools-backdrop{ background: rgba(15,23,42,.35); }
.tools-sheet{
  left: 50%; bottom: 12px; transform: translate(-50%,16px);
  width: min(calc(100% - 24px), var(--ci-max)) !important;
  padding: 16px;
  background: #fff !important; color:#111827;
  border: 1px solid var(--ci-border);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.tools-backdrop.open .tools-sheet{ transform: translate(-50%,0); }

/* Плитки чуть светлее */
.tool-tile{ background:#F7F8FA; border:1px solid var(--ci-border); }
.tool-tile .label{ color:#374151; }

/* Прятать старую панель действий, если вдруг осталась */
.tools-actions{ display:none !important; }

@media (max-width:480px){
  #chat-input-container{ padding:10px 0; }
  .chat-composer{ width: min(calc(100% - 16px), var(--ci-max)); }
  .tools-sheet{   width: min(calc(100% - 16px), var(--ci-max)) !important; }
}
/* === /UI-3 ============================================================================ */

/* === UI-4 (2025-08-16): final polish (680px bar, strong rounding, soft shadow) ======= */
:root{
  --ci-max: 680px;                 /* целевая ширина бара/модалки как в рефе */
  --ci-shadow: 0 10px 30px rgba(0,0,0,.08);
}

#chat-input-container{
  padding: 12px 0;
  background: transparent !important;
  pointer-events: none;
}

.chat-composer{
  width: min(calc(100% - 24px), var(--ci-max));
  margin: 0 auto;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;           /* «таблетка» */
  box-shadow: var(--ci-shadow);
  display: flex; align-items: center; gap: 8px;
  pointer-events: auto;
}

.chat-composer textarea{
  min-height: 44px; max-height: 40vh;
  border: none; outline: none;
  background: #F3F4F6;
  border-radius: 12px;
  padding: 8px 10px;
}
.chat-composer textarea::placeholder{ color:#9CA3AF; }

.ci-btn{
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 1px solid #E5E7EB;
  background: #fff;
  display: grid; place-items: center;
  transition: background .12s ease;
}
.ci-btn:hover{ background:#F5F6F7; }
.ci-btn img{ width:20px; height:20px; opacity:.9; display:block; }
.ci-btn.send{ background:#2563EB; border-color:#2563EB; }
.ci-btn.send:hover{ background:#1D4ED8; }

/* Модалка — та же ширина, светлая */
.tools-backdrop{ background: rgba(15,23,42,.35); }
.tools-sheet{
  left:50%; bottom:12px; transform:translate(-50%,16px);
  width: min(calc(100% - 24px), var(--ci-max)) !important;
  padding:16px; background:#fff !important; color:#111827;
  border:1px solid #E5E7EB; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.tools-backdrop.open .tools-sheet{ transform:translate(-50%,0); }
.tool-tile{ background:#F7F8FA; border:1px solid #E5E7EB; }
.tool-tile .label{ color:#374151; }
.tools-actions{ display:none !important; } /* на всякий случай */

/* Кнопка «логи» — чтобы не перекрывала бар */
#open-logs{
  top:auto !important; transform:none !important;
  bottom: 120px !important; right: 8px !important;
}

/* Мобилки */
@media (max-width:480px){
  #chat-input-container{ padding:10px 0; }
  .chat-composer{ width: min(calc(100% - 16px), var(--ci-max)); }
  .tools-sheet{   width: min(calc(100% - 16px), var(--ci-max)) !important; }
}
/* === /UI-4 ============================================================================ */

/* === UI-4a (click fix): включаем клики по модалке и её контенту =========== */
#chat-input-container .tools-backdrop,
#chat-input-container .tools-sheet,
#chat-input-container .tools-sheet *{
  pointer-events: auto !important;
}

/* Крестик — нормальная зона клика и позиция */
.tools-close-x{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#F3F4F6; border:1px solid #E5E7EB; cursor:pointer;
}
.tools-close-x:hover{ background:#ECEEF0; }
/* ========================================================================== */

/* === UI-4c (icons fit + gentle hover) ===================================== */
/* БОКС для иконок – больше, центрирование */
.ci-ico{ display:inline-flex; align-items:center; justify-content:center; }
.ci-btn .ci-ico{ width:20px; height:20px; }               /* плюс/отправка в баре */
.tool-tile .ci-ico{ width:28px; height:28px; }            /* иконки в модалке */

/* Сам SVG – рисуем полностью и управляем размером через CSS */
.ci-ico svg{
  display:block;
  width:100% !important; height:100% !important;
  overflow:visible;            /* чтобы stroke не «резался» по краям */
}

/* Нормальная окраска иконок (поддерживаем outline-иконки через stroke) */
.ci-btn.send .ci-ico svg *{ fill:#fff !important; stroke:#fff !important; }
.tool-tile .ci-ico svg *{ fill:#111827; stroke:#111827; stroke-width:1.5; }

/* Плитки инструментов – чуть выше и светлее, без «ухода в тьму» */
.tool-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px; min-height:110px;
  background:#FFFFFF; border:1px solid #E5E7EB; border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition: background .12s, box-shadow .12s, transform .12s;
}
.tool-tile .label{ font-size:14px; color:#374151; }

.tool-tile:hover{
  background:#F7F9FB;                      /* лёгкая подсветка вместо затемнения */
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.tool-tile:hover .label{ color:#111827; }
.tool-tile:hover .ci-ico svg *{ fill:#0F172A; stroke:#0F172A; }

/* Крестик закрытия – чуть контрастнее на светлом фоне */
.tools-close-x{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#F3F4F6; border:1px solid #E5E7EB; cursor:pointer;
}
.tools-close-x:hover{ background:#ECEEF0; }
/* ========================================================================== */

/* === UI-4d (icons via currentColor, stroke-only; nicer hover) ======================= */
/* Размеры «боксов» под иконки */
.ci-btn .ci-ico{ width:18px; height:18px; }
.tool-tile .ci-ico{ width:32px; height:32px; margin-bottom:6px; }

/* Рисуем контуром, НЕ заливаем — цвет берём из color родителя */
.ci-ico svg,
.ci-ico svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Цвета-источники для иконок */
.ci-btn{ color:#374151; }          /* плюс в баре тёмно-серый */
.ci-btn.send{ color:#ffffff; }     /* на синей кнопке иконка белая */

.tool-tile{ color:#0F172A; }       /* иконка в модалке тёмная */
.tool-tile .label{ color:#374151; }

/* Лёгкий hover без «ухода в тьму» */
.tool-tile{
  background:#FFFFFF; border:1px solid #E5E7EB; border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition: background .12s, box-shadow .12s, transform .12s, color .12s;
  min-height:110px; padding:14px;
}
.tool-tile:hover{
  background:#F7F9FB;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transform:translateY(-1px);
  color:#0B1220;                    /* иконка чуть контрастнее */
}
.tool-tile:hover .label{ color:#111827; }

/* Крестик закрытия — контрастнее */
.tools-close-x{
  background:#F3F4F6; border:1px solid #E5E7EB;
}
.tools-close-x:hover{ background:#ECEEF0; }
/* ==================================================================================== */
/* === UI-4e (tools hover pop stronger) ==================================== */
.tools-grid{ gap:16px; } /* чуть больше воздуха между плитками */

.tool-tile{
  will-change: transform, box-shadow;
  transition:
    transform .14s cubic-bezier(.2,.8,.2,1),
    box-shadow .14s,
    color .14s,
    background .14s,
    border-color .14s;
}

/* подпрыгивание при наведении */
@keyframes tile-pop{
  0%   { transform: translateY(0)    scale(0.98); }
  40%  { transform: translateY(-4px) scale(1.035); }
  100% { transform: translateY(-3px) scale(1.03); }
}

.tool-tile:hover{
  animation: tile-pop 160ms ease-out;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  background:#F8FAFC;
  border-color:#D5DAE1;
}

.tool-tile:active{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.tool-tile:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px rgba(37,99,235,.45),
    0 14px 30px rgba(0,0,0,.16);
}

/* бережём пользователей, кому нельзя анимацию */
@media (prefers-reduced-motion: reduce){
  .tool-tile{ transition: box-shadow .12s, color .12s, background .12s, border-color .12s; }
  .tool-tile:hover,.tool-tile:active{ animation:none; transform:none; }
}
/* ======================================================================== */
/* === UI-4f (send icon fill + safe controls position) ==================== */
/* 1) У «Отправить» иконка с ЗАЛИВКОЙ (белая на синем фоне). */
.ci-btn.send { color:#fff; }
.ci-btn.send .ci-ico svg,
.ci-btn.send .ci-ico svg *{
  fill: currentColor !important;
  stroke: none !important;
}

/* 2) Кнопки управления модалкой — большие хиты и ЧУТЬ вне карточки */
.tools-sheet{ position:relative; }
.tools-action{
  position:absolute; top:-12px; width:34px; height:34px;
  display:flex;align-items:center;justify-content:center;
  background:#fff; border:1px solid #E5E7EB; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  cursor:pointer; z-index:2;
}
.tools-action svg{ width:18px; height:18px; display:block; }
.tools-back-x{ left:-12px; }
.tools-close-x{ right:-12px; }
.tools-action:hover{ background:#F3F4F6; }

/* На совсем узких экранах — внутрь, чтобы не обрезалось */
@media (max-width:480px){
  .tools-back-x{ left:8px; top:8px; }
  .tools-close-x{ right:8px; top:8px; }
}
/* ======================================================================= */
/* === UI-4g (fix bottom sheet position + send icon stroke) ================= */
/* 1) Модалка снова прижата к низу экрана, центрирована по ширине */
.tools-backdrop{ position:fixed; inset:0; } /* страхуем фон */
.tools-sheet{
  position:absolute;        /* важно: не relative */
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
}

/* 2) Самолётик на кнопке отправки — белый контур (stroke), без заливки */
.ci-btn.send .ci-ico svg,
.ci-btn.send .ci-ico svg *{
  fill:none !important;
  stroke:#ffffff !important;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* ========================================================================== */
/* === UI-4h: floating close button over sheet ================================= */
/* Модалка прижата к низу и центрирована */
.tools-backdrop{ position:fixed; inset:0; }
.tools-sheet{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
}

/* Парящий крестик — отдельно от модалки, с зазором */
.tools-fab-close{
  position:absolute;
  right: 12px;
  bottom: calc(100% + 12px); /* над правым верхним углом модалки, с отступом */
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #E5E7EB;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  cursor:pointer; z-index:3;
}
.tools-fab-close:hover{ background:#F3F4F6; }

/* Иконка креста */
.tools-fab-close svg{
  width:18px; height:18px; display:block;
  stroke: #111827; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* На очень узких экранах — не выходить за край */
@media (max-width:480px){
  .tools-fab-close{ right:8px; bottom: calc(100% + 8px); }
}

/* «Самолётик» на кнопке отправки — белый контур */
.ci-btn.send .ci-ico svg,
.ci-btn.send .ci-ico svg *{
  fill:none !important;
  stroke:#ffffff !important;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* ============================================================================
*/
/* ui4h-fix: size for inline svg wrapper */
.ci-ico{ display:inline-block; width:20px; height:20px; line-height:0; vertical-align:middle; }
/* === UI-4i: logs button back to center; no initial page scroll =================== */

/* 1) Кнопка "логи" всегда по центру правого края, поверх всего и с учётом safe-area */
#open-logs{
  position: fixed !important;
  right: max(0px, env(safe-area-inset-right)) !important;
  top: 50vh !important;
  transform: translateY(-50%) !important;
  z-index: 110 !important;
}

/* 2) Убираем искусственный скролл страницы */
body{ padding-bottom: 0 !important; }

/* 3) Делаем запас места под фиксированный композер только внутри зоны сообщений */
main#chat{
  padding-bottom: 120px;              /* можно подстроить; на мобиле чуть больше */
}
@media (max-width: 480px){
  main#chat{ padding-bottom: 140px; }
}
/* =============================================================================== */

/* === UI-4 (2025-08-16): mobile header hide + settings FAB + compact settings sheet ===== */
@media (max-width: 640px){
  header{ display:none !important; }
  #page-wrap{ padding-top:12px !important; }
}

/* FAB — кнопка настроек (правее/ниже FAB логов) */
#open-settings{
  position:fixed; right:18px; bottom:calc(max(88px,10vh) + 18px);
  width:44px; height:44px; border-radius:9999px; z-index:160;
  background:#2563eb; color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(37,99,235,.35);
  border:1px solid rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease;
}
#open-settings:active{ transform:scale(.95); }
#open-settings img{ width:22px; height:22px; }

/* Под мобильную компоновку: FAB логов чуть выше, чтобы не перекрывать крестик/композер */
@media (max-width: 640px){
  #open-logs{ right:18px !important; top:50% !important; transform:translateY(-50%); }
}

/* Backdrop + панель настроек */
.settings-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; z-index:170;
}
.settings-backdrop.open{ display:block; }

.settings-panel{
  position:absolute; right:12px;
  bottom:calc(max(88px,10vh) + 16px); /* над композером */
  width:min(92vw, 360px);
  background:#fff; color:#111827; border:1px solid #e5e7eb;
  border-radius:18px; box-shadow:0 18px 48px rgba(0,0,0,.18);
  transform:translateY(12px); opacity:0; transition:.18s ease;
}
.settings-backdrop.open .settings-panel{ transform:translateY(0); opacity:1; }

.settings-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #eef0f2;
}
.settings-title{ font-weight:700; letter-spacing:.2px; }

.settings-close,.settings-back{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.settings-close svg, .settings-back svg{ width:18px; height:18px; stroke:#111827; stroke-width:2; fill:none; }

.settings-body{ padding:10px; }

.settings-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; border:1px solid #edf1f4; border-radius:14px;
  background:#fff; margin-bottom:10px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.settings-item:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px); }

.settings-item .left{ display:flex; align-items:center; gap:10px; }
.settings-item img{ width:22px; height:22px; }
.settings-item .label{ font-weight:600; }

.settings-chevron{ opacity:.6; }

/* вложенные страницы (providers/models) */
.settings-sub{ display:none; }
.settings-sub.active{ display:block; }


/* === Mobile settings FAB -> outline pill like logs =================== */
@media (max-width:1023px){
  .mobile-settings-fab{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom,0) + 92px) !important;
    right:calc(env(safe-area-inset-right,0) + 0px) !important;
    width:48px !important; height:112px !important;
    padding:0 !important;
    border:2px solid #111827 !important;     /* чёрная окантовка */
    background:#fff !important;               /* цвет как у чата */
    color:#111827 !important;
    border-radius:12px 0 0 12px !important;   /* как у #open-logs */
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:120;
  }
  .mobile-settings-fab svg{ width:22px; height:22px; opacity:.9; }
  .mobile-settings-fab:active{ transform:translateY(1px); }
}

/* === Mobile settings FAB: outline pill like logs ==================== */
@media (max-width:1023px){
  #settings-fab, .mobile-settings-fab{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom,0) + 92px) !important;
    right:0 !important;
    width:48px !important; height:112px !important;
    border-radius:12px 0 0 12px !important;
    border:2px solid #111827 !important;   /* чёрная окантовка */
    background:#fff !important;             /* цвет как у чата */
    color:#111827 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:center;
    z-index:120;
  }
  #settings-fab svg, .mobile-settings-fab svg{ width:22px; height:22px; }
}

/* === mobile settings FAB to pill (outline) === */
@media (max-width:1023px){
  #settings-fab, .mobile-settings-fab{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom,0) + 92px) !important;
    right:0 !important;
    width:48px !important; height:112px !important;
    border-radius:12px 0 0 12px !important;
    border:2px solid #111827 !important;   /* чёрная окантовка */
    background:#ffffff !important;          /* как фон чата */
    color:#111827 !important;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:120;
  }
  #settings-fab svg, .mobile-settings-fab svg{ width:22px; height:22px; }
}

/* --- mobile settings FAB: pill outline --- */
@media (max-width:1023px){
  #settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom,0) + 92px) !important;
    right:0 !important;
    width:48px !important;
    height:112px !important;
    border-radius:12px 0 0 12px !important; /* форма «пилюли» */
    background:#fff !important;             /* как фон чата */
    color:#111827 !important;               /* тёмная иконка */
    border:2px solid #111827 !important;    /* чёрная окантовка */
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:120;
  }
  #settings-fab svg,
  .mobile-settings-fab svg,
  button[aria-label="Настройки"] svg{
    width:22px; height:22px;
  }
}

/* === UI-4j (2025-08-17): Settings FAB = как "логи"; плавающая карточка; иконки без текста === */

/* 1) FAB «Настройки»: узкая пилюля, как #open-logs, с мини-стрелкой */
@media (max-width:1023px){
  :root{
    --toggle-w: 1.4rem;   /* как у #open-logs */
    --toggle-h: 5rem;     /* как у #open-logs */
  }
  #settings-fab{
    position: fixed;
    right: 0 !important;
    top: 60vh;                          /* висит «в воздухе» в нижней половине */
    transform: translateY(-50%);
    width: var(--toggle-w) !important;
    height: var(--toggle-h) !important;
    border-radius: 12px 0 0 12px !important;
    border: 2px solid #111827 !important;
    background: #fff !important;
    color:#111827 !important;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    z-index: 160;
  }
  #settings-fab svg{ width:18px; height:18px; }
}

/* 2) Плавающая карточка настроек — компактная, у правого края, над композером */
.settings-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:170; }
.settings-backdrop.open{ display:block; }

.ms-card{
  position: fixed !important;
  right: calc(env(safe-area-inset-right,0) + 12px);
  bottom: 140px;                           /* висит над композером, не прилипает к краю */
  width: min(92vw, 360px);
  background:#fff; color:#111827;
  border:1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  padding: 12px;
}

/* Внутри карточки — «шапка» */
.ms-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom: 6px;
}
.ms-title{ font-weight:700; letter-spacing:.2px; }
.ms-close{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid #e5e7eb; background:#fff; }

/* Root: ряды только с иконками */
.ms-row{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; margin:8px 0;
  border:1px solid #edf1f4; border-radius:14px; background:#fff;
}
.ms-ico{ width:22px; height:22px; display:block; }
.ms-chevron{ opacity:.7; }

/* Страницы */
.ms-page[hidden]{ display:none !important; }
.ms-sub-head{ display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
.ms-back{ width:34px; height:34px; display:grid; place-items:center; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.ms-sub-title{ font-weight:600; }

/* Сетка провайдеров — только иконки */
.ms-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;
}
.ms-tile{
  display:grid; place-items:center; padding:12px; background:#fff; border:1px solid #e5e7eb;
  border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.ms-ico-big{ width:28px; height:28px; }

/* Список моделей — компактные чипы */
.ms-list{ display:flex; flex-wrap:wrap; gap:8px; }
.ms-chip{
  border:1px solid #e5e7eb; border-radius:12px; padding:8px 10px; background:#fff; font-weight:600; font-size:13px;
}

/* На узких — держим карточку в той же зоне */
@media (max-width:480px){
  .ms-card{ right: 10px; bottom: 120px; width: min(94vw, 340px); }
}
/* === /UI-4j =============================================================== */

/* === settings FAB position sync & root icon tiles ================================== */
@media (max-width:1023px){
  /* FAB висит «в воздухе» чуть ниже, чем логи */
  #settings-fab{
    top: 62vh !important;               /* пара к #open-logs: 52vh vs 62vh */
  }
}

/* Корневой экран модалки: сетка квадратных иконок без подписей */
.ms-grid-root{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.ms-root-tile{
  display:grid; place-items:center;
  width:100%; aspect-ratio: 1/1;       /* ровный квадрат */
  background:#fff; color:#111827;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.ms-root-tile img{
  width:26px; height:26px; display:block;
}

/* Плавающая карточка — оставляем как в UI-4j, но фиксируем якорь ещё чуть выше */
@media (max-width:480px){
  .ms-card{ bottom: 128px !important; }
}

/* === UI-4k (final): logs pill hard flush-right + compact gap to settings === */
@media (max-width:1023px){
  #open-logs{
    position: fixed !important;
    right: 0 !important;
    inset-inline-end: 0 !important;
    margin: 0 !important;
    translate: 0 !important;
    top: 56vh !important;
    transform: translateY(-50%) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  @supports (right: env(safe-area-inset-right)){
    #open-logs{ right: 0 !important; }
  }
  #settings-fab{ top: 62vh !important; }
}

/* === UI-4k2: anchor logs/FAB to bottom to avoid overlap =================== */
@media (max-width:1023px){
  :root{
    --toggle-h: 5rem;
    --fab-gap : 12px;
    --base-bottom: calc(env(safe-area-inset-bottom, 0) + 120px);
  }
  #settings-fab{
    top: auto !important;
    bottom: var(--base-bottom) !important;
    right: 0 !important;
    transform: none !important;
  }
  #open-logs{
    top: auto !important;
    bottom: calc(var(--base-bottom) + var(--toggle-h) + var(--fab-gap)) !important;
    right: 0 !important;
    inset-inline-end: 0 !important;
    margin: 0 !important;
    translate: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transform: none !important;
  }
}
@media (max-width:480px){
  :root{ --base-bottom: calc(env(safe-area-inset-bottom, 0) + 128px); }
}

/* === UI-4k3: lift logs & settings by one toggle height ==================== */
@media (max-width:1023px){
  :root{
    --lift: var(--toggle-h);
  }
  #settings-fab{
    bottom: calc(var(--base-bottom) + var(--lift)) !important;
  }
  #open-logs{
    bottom: calc(var(--base-bottom) + var(--lift) + var(--toggle-h) + var(--fab-gap)) !important;
  }
}

/* === UI-4k4: real toggle height = 112px ====================================== */
@media (max-width:1023px){
  :root{ --toggle-h: 112px; }
}
/* === FINAL mobile-pills-unify v1.0 (2025-08-17) ===============================
   Делаем одинаковые размеры и радиусы для #open-logs / #logs-tab и #settings-fab.
   Специфичность повышена (#id#id) и везде !important, чтобы перебить всё выше.
=============================================================================== */
@media (max-width:1023px){
  :root{ --pill-w:36px; --pill-h:84px; }

  /* размеры и форма — ОБЕ пилюли */
  #open-logs#open-logs,
  #logs-tab#logs-tab,
  #settings-fab#settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    width:var(--pill-w) !important;
    height:var(--pill-h) !important;
    border-radius:12px 0 0 12px !important;
    padding:0 !important;
  }

  /* визуальная консистентность цветов */
  #open-logs#open-logs, #logs-tab#logs-tab{
    background:#2563eb !important; border:none !important;
  }
  #settings-fab#settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    background:#fff !important; border:2px solid #111827 !important;
  }
}
/* === FINAL mobile-pills-slim v1.1 (2025-08-17) =================================
   Делаем ОБЕ пилюли (логи/настройки) одинаковыми и тоньше: 18×84.
   Подрезаем размер стрелок до 12px. Сильная специфичность и !important.
=============================================================================== */
@media (max-width:1023px){
  :root{ --pill-w:18px; --pill-h:84px; --pill-gap:12px; }

  /* размеры и форма обеих пилюль */
  #open-logs#open-logs,
  #logs-tab#logs-tab,
  #settings-fab#settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    width:var(--pill-w) !important;
    height:var(--pill-h) !important;
    border-radius:12px 0 0 12px !important;
    padding:0 !important;
  }

  /* цвета/бордеры */
  #open-logs#open-logs, #logs-tab#logs-tab{
    background:#2563eb !important; border:none !important;
  }
  #settings-fab#settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    background:#fff !important; border:2px solid #111827 !important;
  }

  /* размер стрелок */
  #open-logs#open-logs::after, #logs-tab#logs-tab::after{
    content:""; width:12px; height:12px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  #settings-fab#settings-fab svg,
  .mobile-settings-fab svg,
  button.settings-fab svg,
  button.fab-settings svg,
  button[aria-label="Настройки"] svg{
    width:12px !important; height:12px !important;
  }
}
/* === mobile-pills-slim v1.2 (25x84) ========================================= */
@media (max-width:1023px){
  :root{ --pill-w:25px; --pill-h:84px; --pill-gap:12px; }

  /* размеры обеих пилюль */
  #open-logs#open-logs,
  #logs-tab#logs-tab,
  #settings-fab#settings-fab,
  .mobile-settings-fab,
  button.settings-fab,
  button.fab-settings,
  button[aria-label="Настройки"]{
    width:var(--pill-w) !important;
    height:var(--pill-h) !important;
    border-radius:12px 0 0 12px !important;
    padding:0 !important;
  }

  /* стрелки */
  #open-logs#open-logs::after,
  #logs-tab#logs-tab::after{
    content:""; width:14px; height:14px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  #settings-fab#settings-fab svg,
  .mobile-settings-fab svg,
  button.settings-fab svg,
  button.fab-settings svg,
  button[aria-label="Настройки"] svg{
    width:14px !important; height:14px !important;
  }
}

@media (min-width: 1024px){
  #settings-fab{ display:none !important; }
}

/* === center mobile settings card horizontally === */
@media (max-width: 640px){
  /* элемент имеет классы settings-panel ms-card */
  .settings-backdrop .ms-card{
    /* убираем привязку к правому краю и центрируем */
    left: 0; right: 0;
    margin-left: auto; margin-right: auto;
    /* ширина уже задана в базовых стилях: width: min(94vw, 340px); */
  }
}

/* === mobile settings card: true horizontal centering (fixed pos) === */
@media (max-width: 640px){
  .settings-backdrop .ms-card{
    left: 50% !important;
    right: auto !important;               /* перебиваем прежний right: ... */
    transform: translateX(-50%);          /* центр по оси X */
    /* bottom задаётся выше, оставляем как есть (120–140px над композером) */
  }
}

/* === ms-card HARD CENTER override ======================================= */
@media (max-width: 1023px){
  /* центрируем именно модалку настроек */
  #ms-modal .ms-card{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(94vw, 360px) !important;
    bottom: 128px !important; /* если нужно выше/ниже — скажи, подстроим */
  }
}

/* === ms-card NARROWER by 10px each side (−20px total) ===================== */
@media (max-width: 1023px){
  #ms-modal .ms-card{
    width: calc(min(94vw, 360px) - 20px) !important; /* было min(94vw, 360px) */
  }
}
/* ===== mobile-settings (chips active) 2025-08-21-155317 ===== */
#ms-modal .ms-chip{
  border:1px solid #e5e7eb; /* gray-200 */
  border-radius:9999px;
  padding:.375rem .75rem;
  background:#fff;
  color:#111827;
}
#ms-modal .ms-chip:hover{ background:#f9fafb; }
#ms-modal .ms-chip.active,
#ms-modal .ms-chip[aria-pressed="true"]{
  background:#f3f4f6;      /* gray-100 */
  border-color:#d1d5db;    /* gray-300 */
}
/* cache-bust 1755794559 */