/* build:1755443920 */
:root{
  --logs-panel-w: 384px; /* ~w-96 */
}

/* Панель скрыта по умолчанию */
#logs-panel{
  width: var(--logs-panel-w);
  transform: translateX(100%);
  will-change: transform;
  background:#fff;
  border-left:1px solid #e5e7eb;
  box-shadow: -4px 0 24px rgba(0,0,0,.06);
}
#logs-panel.show{ transform: translateX(0); }

#logs-container{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height:1.35;
  background:#f9fafb;
}

/* Цвета строк */
.log-line{ padding:2px 0; white-space:pre-wrap; word-break:break-word; }
.log-success{ color:#059669; } /* green-600 */
.log-warn{ color:#d97706; }    /* amber-600 */
.log-error{ color:#dc2626; }   /* red-600 */
.log-info{ color:#2563eb; }    /* blue-600 */

/* Язычок */
#logs-tab{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 90px;
  width: 28px;             /* узкий */
  border-radius: 8px 0 0 8px;
  background: #2563eb;     /* blue-600 */
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -4px 0 16px rgba(37,99,235,.35);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  z-index: 110;
}

/* Когда панель открыта — язычок скрываем */
body.logs-open #logs-tab{ display:none; }

/* На мобильных панель почти на всю ширину */
@media (max-width: 640px){
  :root{ --logs-panel-w: 92vw; }
}

/* Отступ справа на десктопе, чтобы чат не перекрывать панелью */
@media (min-width: 1024px){
  body.logs-open{ padding-right: var(--logs-panel-w); }
}

/* ▸ компактный язычок (32×96) */
#open-logs{
  width :1.4rem !important;
  height:5rem   !important;  
  line-height:1;
  font-size:.75rem;
  right:-1px;    /* чуть «утоплен» в край */
}

/* === logs-desktop-shift (2025-08-16) ======================================= */
:root{ --logs-w: 360px; }               /* ширина панели логов по умолчанию */

#logs-panel{
  width: var(--logs-w);
  transform: translateX(100%);          /* по умолчанию спрятана */
  transition: transform .28s ease;
}
#logs-panel.open{                        /* если кто-то уже добавляет .open */
  transform: translateX(0) !important;
}

/* Когда логи открыты — сдвигаем контент и кнопку "логи" (ТОЛЬКО десктоп) */
@media (min-width:1024px){
  body.logs-open #page-wrap{
    margin-right: var(--logs-w);
  }
  body.logs-open #open-logs{
    right: calc(var(--logs-w) + 8px) !important;
  }
}

/* На мобиле сдвига нет, панель просто поверх */
@media (max-width:1023px){
  body.logs-open #page-wrap{ margin-right: 0; }
}
/* ========================================================================== */

/* === logs-desktop-shift v2 (2025-08-16) ===================================== */
/* Когда логи открыты — освобождаем справа место под панель */
@media (min-width:1024px){
  body.logs-open{
    padding-right: var(--logs-w);          /* сдвигаем весь контент */
  }
  /* фикс-шапка: уменьшаем её «ширину» справа, чтобы не залезала под панель */
  body.logs-open header{
    right: var(--logs-w) !important;       /* у header уже есть fixed top:0 left:0 */
  }
  /* на всякий случай — перебиваем auto-центрирование контейнера */
  body.logs-open #page-wrap{
    margin-right: var(--logs-w) !important;
  }
}
/* =========================================================================== */

/* === logs-desktop-shift v3 (forced transform) =============================== */
@media (min-width:1024px){
  /* плавность для основных узлов */
  #page-wrap, header, #chat-input-container{
    transition: transform .28s ease;
    will-change: transform;
  }

  /* сам сдвиг при открытых логах */
  body.logs-open #page-wrap,
  body.logs-open header,
  body.logs-open #chat-input-container{
    transform: translateX(calc(var(--logs-w) * -1));
  }

  /* кнопка "логи" уже уезжает вправо в предыдущем патче */
}
/* =========================================================================== */

/* === logs-desktop-shift v3.1 (override old padding-based shift) ============== */
@media (min-width:1024px){
  body.logs-open{ padding-right: 0 !important; }
  body.logs-open header{ right: 0 !important; }
  body.logs-open #page-wrap{ margin-right: auto !important; }
}
/* =========================================================================== */

/* === logs-desktop-shift v4 (single scheme, no transform) ==================== */
:root{ --logs-w: 420px; } /* будет перезаписываться JS по фактической ширине */

@media (min-width:1024px){
  /* Гасим старые transform-сдвиги, если они где-то остались */
  body.logs-open #page-wrap,
  body.logs-open header,
  body.logs-open #chat-input-container{
    transform: none !important;
  }

  /* ЕДИНАЯ схема: фиксированные узлы "ужимаем" справа на ширину панели */
  header{ left:0; right:0; }                         /* базово */
  #chat-input-container{ left:0; right:0; }          /* базово */

  body.logs-open header{ right: var(--logs-w) !important; }
  body.logs-open #chat-input-container{ right: var(--logs-w) !important; }

  /* Контенту просто отдаём место панели справа */
  body.logs-open #page-wrap{ margin-right: var(--logs-w) !important; }
}
/* =========================================================================== */

/* === logs-desktop header fix: respect --logs-w ================================= */
@media (min-width:1024px){
  /* Tailwind даёт header.w-full → width:100%; тут сбрасываем, чтобы сработал right */
  body.logs-open header{
    left: 0 !important;
    right: var(--logs-w) !important;
    width: auto !important;         /* критично: иначе w-full перекрывает right */
    max-width: none !important;     /* на всякий случай */
  }
}

/* === logs toggle: flush right (incl. safe-area) ===================== */
#open-logs{ right:0 !important; margin-right:0 !important; }
@supports (right: env(safe-area-inset-right)) {
  #open-logs{ right: calc(env(safe-area-inset-right,0) + 0px) !important; }
}

/* === fix: logs toggle flush right =================================== */
#open-logs{ right:0 !important; margin-right:0 !important; }
@supports (right: env(safe-area-inset-right)) {
  /* Не отодвигаем на safe-area, держим в ноль */
  #open-logs{ right:0 !important; }
}

/* === fix: logs pill flush-right === */
#open-logs{
  right:0 !important;
  margin-right:0 !important;
}
@supports (right: env(safe-area-inset-right)){
  #open-logs{ right:0 !important; }
}

/* --- flush right for logs pill --- */
#open-logs{
  position:fixed !important;
  right:0 !important;
  inset-inline-end:0 !important;    /* логическое свойство на всякий */
  margin-right:0 !important;
  transform:translateY(-50%) !important; /* только по Y, без сдвига по X */
}
@supports (right: env(safe-area-inset-right)){
  #open-logs{ right:0 !important; }
}

/* === logs-pill vFINAL: flush-right + aligned above settings FAB (mobile) === */
@media (max-width:1023px){
  #open-logs{
    position: fixed !important;
    right: 0 !important;
    inset-inline-end: 0 !important;
    margin: 0 !important;
    /* по вертикали — чуть выше FAB настроек */
    top: 52vh !important;
    transform: translateY(-50%) !important;
    /* убираем «визуальный зазор» справа за счёт радиуса */
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* на всякий: никаких сдвигов по X */
    translate: 0 !important;
  }
}

/* === logs-mobile v2: arrow tab + card panel =================================== */
@media (max-width:1023px){
  #open-logs{
    font-size: 0 !important;
    writing-mode: horizontal-tb !important;
    width: 48px !important;
    height: 112px !important;
    padding: 0 !important;
    background-image: url('/static/chat/icons/chevron-left.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }
  #logs-panel{
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0) + 128px) !important;
    width: min(92vw, 360px) !important;
    height: min(72vh, calc(100vh - 160px)) !important;
    transform: none !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
    z-index: 120 !important;
    background: #fff !important;
  }
  #logs-panel.show{ transform: none !important; }
  #logs-container{ padding: 12px !important; background:#fff !important; }
}

/* === logs-mobile v2.1: keep logs tab visible; panel offset from right ========= */
@media (max-width:1023px){
  :root{
    --toggle-w: 48px;
    --tab-gap : 12px;
  }
  #open-logs{
    z-index: 170 !important;
  }
  #logs-panel{
    right: calc(var(--toggle-w) + var(--tab-gap)) !important;
    width: min(
      calc(100vw - (var(--toggle-w) + var(--tab-gap) + 24px)),
      360px
    ) !important;
    height: min(70vh, calc(100vh - 168px)) !important;
  }
}

/* === logs-mobile v2.2: blue pill with white arrow; panel offset & gestures === */
@media (max-width:1023px){
  :root{ --toggle-w:48px; --tab-gap:12px; }
  #open-logs{
    width:48px !important; height:112px !important;
    border-radius:12px 0 0 12px !important;
    right:0 !important; font-size:0 !important; writing-mode:initial !important;
    display:flex !important; align-items:center; justify-content:center;
    background:#2563eb !important; box-shadow:-4px 0 16px rgba(37,99,235,.35);
    background-image:none !important; z-index:180 !important; cursor:pointer;
  }
  #open-logs::after{
    content:""; width:18px; height:18px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  #logs-panel{
    right:calc(var(--toggle-w) + var(--tab-gap)) !important;
    width:min(calc(100vw - (var(--toggle-w) + var(--tab-gap) + 24px)), 360px) !important;
    height:min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important; border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important; overflow:hidden !important;
    touch-action: pan-y;
  }
  #logs-container{ padding:12px !important; }
}

/* === logs-mobile v2.5: blue pill + white arrow; panel offset/size; z-index === */
@media (max-width:1023px){
  :root{ --logs-pill-w:48px; --logs-pill-gap:12px; }

  #open-logs{
    position:fixed !important;
    right:0 !important;
    width:48px !important; height:112px !important;
    border-radius:12px 0 0 12px !important;
    display:flex !important; align-items:center; justify-content:center;
    font-size:0 !important; writing-mode:initial !important;
    background:#2563eb !important;
    box-shadow:-4px 0 16px rgba(37,99,235,.35);
    background-image:none !important;
    z-index:180 !important; cursor:pointer;
  }
  #open-logs::after{
    content:""; width:18px; height:18px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }

  #logs-panel{
    right:calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    top:8vh !important;
    width:min(calc(100vw - (var(--logs-pill-w) + var(--logs-pill-gap) + 24px)), 360px) !important;
    height:min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
    overflow:hidden !important;
    background:#fff !important;
    z-index:170 !important;
    touch-action: pan-y;
  }
  #logs-container{ padding:12px !important; }
}

/* === logs-mobile v2.6: smaller blue pill + white chevron; panel fits screen === */
@media (max-width:1023px){
  :root{ --logs-pill-w:44px; --logs-pill-gap:12px; }

  #open-logs{
    position:fixed !important;
    right:0 !important;
    width:44px !important; height:96px !important;   /* компактнее */
    border-radius:12px 0 0 12px !important;
    display:flex !important; align-items:center; justify-content:center;
    font-size:0 !important; writing-mode:initial !important;
    background:#2563eb !important;
    box-shadow:-4px 0 16px rgba(37,99,235,.35);
    background-image:none !important;
    z-index:180 !important;  /* выше панели */
    cursor:pointer;
  }
  #open-logs::after{
    content:""; width:18px; height:18px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }

  #logs-panel{
    right:calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    top:8vh !important;
    width:min(calc(100vw - (var(--logs-pill-w) + var(--logs-pill-gap) + 24px)), 360px) !important;
    height:min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
    overflow:hidden !important;
    background:#fff !important;
    z-index:170 !important; /* ниже пилюли */
    touch-action: pan-y;
  }
  #logs-container{ padding:12px !important; }
}

/* === logs-mobile v2.8: force-closed default, compact pill, proper stacking === */
#logs-panel{
  /* по умолчанию ВСЕГДА закрыто */
  display:none !important;
  opacity:0; pointer-events:none;
  transform: translateX(100%) !important;
  transition: transform .28s ease, opacity .2s ease;
}
#logs-panel.show,
body.logs-open #logs-panel{
  display:block !important;
  opacity:1; pointer-events:auto;
  transform: translateX(0) !important;
}

@media (max-width:1023px){
  :root{ --logs-pill-w:44px; --logs-pill-gap:12px; }
  #open-logs{
    position:fixed !important; right:0 !important;
    width:44px !important; height:96px !important;
    border-radius:12px 0 0 12px !important;
    display:flex !important; align-items:center; justify-content:center;
    font-size:0 !important; writing-mode:initial !important;
    background:#2563eb !important; box-shadow:-4px 0 16px rgba(37,99,235,.35);
    background-image:none !important;
    z-index:180 !important; cursor:pointer;
  }
  #open-logs::after{
    content:""; width:18px; height:18px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  #logs-panel{
    position:fixed; right:calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    top:8vh !important;
    width:min(calc(100vw - (var(--logs-pill-w) + var(--logs-pill-gap) + 24px)), 360px) !important;
    height:min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important; border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
    background:#fff !important; overflow:hidden !important;
    z-index:170 !important; /* ниже пилюли */
    touch-action: pan-y;
  }
  #logs-container{ padding:12px !important; }
}
/* ========================================================================== */

/* === logs-mobile v2.9: compact pill, proper z-index, panel offset === */
@media (max-width:1023px){
  :root{ --logs-pill-w:36px; --logs-pill-gap:12px; }

  #open-logs{
    position:fixed !important;
    right:0 !important; top:50% !important; transform:translateY(-50%) !important;
    width:36px !important; height:84px !important;
    border-radius:12px 0 0 12px !important;
    display:flex !important; align-items:center; justify-content:center;
    background:#2563eb !important; box-shadow:-4px 0 16px rgba(37,99,235,.35);
    font-size:0 !important; writing-mode:initial !important; background-image:none !important;
    z-index:5000 !important; pointer-events:auto !important;
  }
  #open-logs::after{
    content:""; width:16px; height:16px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }

  /* панель сдвинута влево настолько, чтобы пилюля всегда была видно и кликабельна */
  #logs-panel{
    right: calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    width: min(calc(100vw - (var(--logs-pill-w) + var(--logs-pill-gap) + 24px)), 360px) !important;
    height: min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important; border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
    background:#fff !important; overflow:hidden !important;
    z-index:170 !important; touch-action: pan-y;
  }

  #logs-container{ padding:12px !important; }
}

/* Гарантируем «по умолчанию закрыто» */
#logs-panel{
  display:none !important;
  opacity:0; pointer-events:none;
  transform: translateX(100%) !important;
  transition: transform .28s ease, opacity .2s ease;
}
#logs-panel.show,
body.logs-open #logs-panel{
  display:block !important;
  opacity:1; pointer-events:auto;
  transform: translateX(0) !important;
}

/* === logs-mobile v3.2: compact blue pill for #open-logs И #logs-tab, панель со сдвигом === */
@media (max-width:1023px){
  :root{ --logs-pill-w:36px; --logs-pill-gap:12px; }

  /* Пилюля: одинаковый вид для обеих реализаций */
  #open-logs, #logs-tab{
    position:fixed !important;
    right:0 !important; top:50% !important; transform:translateY(-50%) !important;
    width:36px !important; height:84px !important;
    border-radius:12px 0 0 12px !important;
    display:flex !important; align-items:center; justify-content:center;
    background:#2563eb !important; box-shadow:-4px 0 16px rgba(37,99,235,.35);
    font-size:0 !important; writing-mode:initial !important; background-image:none !important;
    color:transparent !important; letter-spacing:0 !important;
    z-index:5000 !important; pointer-events:auto !important; user-select:none !important;
  }
  #open-logs::after, #logs-tab::after{
    content:""; width:16px; height:16px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  /* НЕ скрываем пилюлю при открытой панели */
  body.logs-open #logs-tab,
  body.logs-open #open-logs{
    display:flex !important;
  }

  /* Панель: оставляем место под пилюлю справа */
  #logs-panel{
    right: calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    width: min(calc(100vw - (var(--logs-pill-w) + var(--logs-pill-gap) + 24px)), 360px) !important;
    height: min(70vh, calc(100vh - 168px)) !important;
    border-radius:16px !important; border:1px solid #e5e7eb !important;
    box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
    background:#fff !important; overflow:hidden !important;
    z-index:170 !important; touch-action: pan-y;
  }

  #logs-container{ padding:12px !important; }
}

/* Форс-старт: закрыто по умолчанию */
#logs-panel{
  display:none !important;
  opacity:0; pointer-events:none;
  transform: translateX(100%) !important;
  transition: transform .28s ease, opacity .2s ease;
}
#logs-panel.show,
body.logs-open #logs-panel{
  display:block !important;
  opacity:1; pointer-events:auto;
  transform: translateX(0) !important;
}

/* === mobile pills align v1: одинаковые размеры и отступы для логов/настроек === */
@media (max-width:1023px){
  :root{ --pill-w:36px; --pill-h:84px; --pill-gap:12px; }

  /* ЛОГИ — синяя пилюля с белой стрелкой */
  #open-logs, #logs-tab{
    position:fixed !important;
    right:0 !important;
    top:50% !important;                    /* центр экрана */
    transform:translateY(-50%) !important;
    width:var(--pill-w) !important;
    height:var(--pill-h) !important;
    border-radius:12px 0 0 12px !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    display:flex !important; align-items:center; justify-content:center;
    background:#2563eb !important; box-shadow:-4px 0 16px rgba(37,99,235,.35);
    font-size:0 !important; writing-mode:initial !important; background-image:none !important;
    z-index:5000 !important;
  }
  #open-logs::after, #logs-tab::after{
    content:""; width:16px; height:16px; display:block;
    background:url("/static/chat/icons/chevron-left.svg") no-repeat center / contain;
  }
  body.logs-open #open-logs, body.logs-open #logs-tab{ display:flex !important; } /* не скрываем */

  /* НАСТРОЙКИ — белая пилюля с чёрной стрелкой, ровно ниже логов на 1 кнопку + зазор */
  #open-settings{
    position:fixed !important;
    right:0 !important;
    top: calc(50% + var(--pill-h) + var(--pill-gap)) !important; /* ниже на 96px */
    transform:translateY(-50%) !important;
    width:var(--pill-w) !important;
    height:var(--pill-h) !important;
    border-radius:12px 0 0 12px !important;
    padding:0 !important; margin:0 !important;
    display:flex !important; align-items:center; justify-content:center;
    background:#fff !important; border:1px solid #e5e7eb !important;
    box-shadow:0 6px 22px rgba(0,0,0,.10) !important;
    z-index:4000 !important;
  }
  #open-settings > *,  /* прячем внутреннюю шестерёнку/иконки */
  #open-settings svg, #open-settings img{ display:none !important; }
  #open-settings::after{
    content:""; width:16px; height:16px; display:block;
    background:url("/static/chat/icons/chevron-left-black.svg") no-repeat center / contain;
  }

  /* Панель логов оставляет справа место под пилюлю */
  #logs-panel{
    right: calc(var(--pill-w) + var(--pill-gap)) !important;
  }
}

/* === hard-align pills v1 (duplicate-ID specificity to beat any earlier !important) === */
@media (max-width:1023px){
  #open-logs#open-logs, #logs-tab#logs-tab{
    width:36px !important; height:84px !important; border-radius:12px 0 0 12px !important;
  }
  #open-settings#open-settings{
    width:36px !important; height:84px !important; border-radius:12px 0 0 12px !important;
  }
}
/* === FINAL logs-panel offset for slim pill (2025-08-17) ====================== */
@media (max-width:1023px){
  :root{ --pill-w:18px; --pill-gap:12px; }
  #open-logs{
    width:var(--pill-w) !important; height:84px !important;
    border-radius:12px 0 0 12px !important;
  }
  #open-logs::after{ width:12px; height:12px; }
  #logs-panel{
    right: calc(var(--pill-w) + var(--pill-gap)) !important;
  }
}
/* === logs-panel offset for 25px pill ======================================== */
@media (max-width:1023px){
  :root{ --pill-w:25px; --pill-gap:12px; }
  #open-logs{
    width:var(--pill-w) !important; height:84px !important;
    border-radius:12px 0 0 12px !important;
  }
  #open-logs::after{ width:14px; height:14px; }
  #logs-panel{
    right: calc(var(--pill-w) + var(--pill-gap)) !important;
  }
}
/* === logs-flex v3.0: header fixed, list scrolls; no clipping ================= */
#logs-panel{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;              /* скругления остаются у панели */
}
#logs-container{
  flex:1 1 auto !important;                /* занимает всё оставшееся место */
  overflow:auto !important;                /* скролл именно внутри списка */
  -webkit-overflow-scrolling: touch;       /* плавный скролл на iOS/Android */
  max-height:none !important;
  box-sizing:border-box; padding:12px !important;
}

/* Мобильные: убираем фиксированную height и ставим max-height, чтобы не резало */
@media (max-width:1023px){
  #logs-panel{
    height:auto !important;
    max-height: min(78vh, calc(100vh - 132px)) !important;  /* чуть выше и не за край */
    top: 8vh !important;                                     /* как и раньше */
  }
  /* панель остаётся сдвинутой влево на ширину пилюли (25px) + зазор */
  :root{ --pill-w:25px; --pill-gap:12px; }
  #logs-panel{ right: calc(var(--pill-w) + var(--pill-gap)) !important; }
}
/* === logs-flex v3.1: поведение скролла контейнера ===================== */
#logs-container{
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;   /* мгновенный догон до низа */
}
@media (max-width:1023px){
  /* чуть больше окна на мобиле и использование dvh, где доступно */
  #logs-panel{
    max-height: min(80vh, calc(100vh - 120px)) !important;
  }
  @supports (height: 100dvh){
    #logs-panel{
      max-height: min(80dvh, calc(100dvh - 120px)) !important;
    }
  }
}
/* === logs-mobile v3.2: bottom gap so last lines are fully visible === */
#logs-container .log-line:last-child{ margin-bottom: 8px; }
@media (max-width:1023px){
  /* больше «воздуха» снизу, чтобы последняя строка не упиралась в скругление */
  #logs-container{ padding: 12px 12px 40px !important; }
}

/* === mobile bottom-gap v3.3 — панель логов всегда над полем ввода === */
@media (max-width:1023px){
  /* ширина «пилюли» уже выставлена выше; оставляем 25px по требованию */
  :root{
    --logs-pill-w: 25px;
    --logs-pill-gap: 12px;
    /* JS положит сюда реальную величину; запас по умолчанию ~120px */
    --logs-bottom-gap: calc(env(safe-area-inset-bottom,0) + 120px);
  }
  #open-logs#open-logs{
    width: var(--logs-pill-w) !important;
    height: 84px !important;
    border-radius:12px 0 0 12px !important;
  }
  #open-logs#open-logs::after{ width:14px; height:14px; }

  /* панель сдвигаем влево на ширину пилюли и поднимаем от нижнего края */
  #logs-panel{
    right: calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    top: auto !important;
    bottom: var(--logs-bottom-gap) !important;
    height: auto !important;
    /* ограничиваем высоту так, чтобы всё помещалось между top и bottom */
    max-height: min(82dvh, calc(100dvh - (var(--logs-bottom-gap) + 16px))) !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  /* побольше «воздуха» внизу, чтобы последняя строка не пряталась за скруглением */
  #logs-container{
    padding: 12px 12px 56px !important;
  }
}

/* === mobile bottom-gap v3.3 — панель логов всегда над полем ввода === */
@media (max-width:1023px){
  /* ширина «пилюли» уже выставлена выше; оставляем 25px по требованию */
  :root{
    --logs-pill-w: 25px;
    --logs-pill-gap: 12px;
    /* JS положит сюда реальную величину; запас по умолчанию ~120px */
    --logs-bottom-gap: calc(env(safe-area-inset-bottom,0) + 120px);
  }
  #open-logs#open-logs{
    width: var(--logs-pill-w) !important;
    height: 84px !important;
    border-radius:12px 0 0 12px !important;
  }
  #open-logs#open-logs::after{ width:14px; height:14px; }

  /* панель сдвигаем влево на ширину пилюли и поднимаем от нижнего края */
  #logs-panel{
    right: calc(var(--logs-pill-w) + var(--logs-pill-gap)) !important;
    top: auto !important;
    bottom: var(--logs-bottom-gap) !important;
    height: auto !important;
    /* ограничиваем высоту так, чтобы всё помещалось между top и bottom */
    max-height: min(82dvh, calc(100dvh - (var(--logs-bottom-gap) + 16px))) !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  /* побольше «воздуха» внизу, чтобы последняя строка не пряталась за скруглением */
  #logs-container{
    padding: 12px 12px 56px !important;
  }
}