/* ===== Telegram-style BOTTOM NAVIGATION =====
   Появляется только на mobile (≤768px), фиксирована внизу,
   safe-area-inset-bottom учтена. Прячет старые .sidebar-tabs
   и показывает 5 иконок в стиле iOS Telegram.
   ============================================================ */

@media (max-width: 768px) {

  /* Прячем СТАРЫЕ верхние tab'ы (Чаты/Тендеры/Контакты) — заменяем на bottom-nav */
  .sidebar-tabs {
    display: none !important;
  }

  /* Bottom-nav контейнер */
  .tg-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
    transition: transform .2s ease;
  }

  [data-theme="dark"] .tg-bottom-nav {
    background: rgba(33, 33, 33, 0.94);
    border-top-color: var(--border);
  }

  .tg-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .1s ease;
    position: relative;
    min-height: 48px;
  }

  .tg-bottom-nav-item svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
  }

  .tg-bottom-nav-item span {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .tg-bottom-nav-item.active {
    color: var(--primary);
  }

  .tg-bottom-nav-item:active {
    background: var(--hover);
  }

  /* Badge на иконке (как у Telegram — синий круг с числом) */
  .tg-bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.94);
  }
  [data-theme="dark"] .tg-bottom-nav-badge {
    box-shadow: 0 0 0 1.5px rgba(33,33,33,0.94);
  }

  /* Контент списка чатов нуждается в нижнем padding чтобы не залезать под nav */
  .app .sidebar .chat-list {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* В кабинете поставщика — bottom-nav заменяет sidebar-nav */
  .cabinet-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
  }
  .cabinet-nav {
    display: none !important; /* старый sidebar-nav скрыт */
  }
  .cabinet-main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Если открыт чат — bottom-nav прячется (для максимума места под composer) */
  .app.has-active .tg-bottom-nav {
    transform: translateY(100%);
  }

  /* Search в Telegram стиле — глобальная pill */
  .app .sidebar .search {
    padding: 8px 12px !important;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
  }

  /* TG-style top filters chips (если включены) */
  .tg-filter-chips {
    display: flex;
    gap: 8px;
    padding: 6px 12px 10px;
    overflow-x: auto;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tg-filter-chips::-webkit-scrollbar { display: none; }
  .tg-filter-chip {
    flex-shrink: 0;
    background: var(--chat-bg-secondary);
    color: var(--text);
    border: none;
    border-radius: 16px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .1s ease;
  }
  .tg-filter-chip.active {
    background: var(--primary);
    color: #fff;
  }
  .tg-filter-chip-badge {
    background: rgba(255,255,255,.25);
    color: inherit;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
  }
  .tg-filter-chip:not(.active) .tg-filter-chip-badge {
    background: var(--primary);
    color: #fff;
  }
}

/* === Dynamic Island & Home Indicator awareness (v2) === */

@media (max-width: 768px) {
  /* Bottom-nav: гарантированный нижний padding учитывает home indicator */
  .tg-bottom-nav {
    /* Базовый padding + safe-area + минимум 34px (home indicator) */
    padding: 6px 4px calc(max(8px, env(safe-area-inset-bottom, 8px)) + 4px) 4px !important;
  }

  /* iPhone Pro/Pro Max с Dynamic Island — даём ещё больше места сверху */
  @supports (padding-top: env(safe-area-inset-top)) {
    .app .sidebar,
    .cabinet-layout {
      padding-top: env(safe-area-inset-top, 0px);
    }
  }

  /* На устройствах с Dynamic Island (узнаём по viewport height) — гарантированно 64px сверху */
  .app .sidebar .sidebar-header,
  .cabinet-logo {
    /* минимум 12 + 47 = 59, для DI прибавим запас */
    min-height: 44px;
  }

  /* Chat list padding-bottom = высота bottom-nav + home indicator */
  .app .sidebar .chat-list {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cabinet-main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Composer (внизу чата) — поднять выше home indicator */
  .chat-view .composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* === HARD SAFE-AREA для top контейнеров (Dynamic Island fix) === */
@media (max-width: 768px) {
  /* Главный заголовок чат-листа (заказчик) */
  .app .sidebar .sidebar-header {
    padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
    /* Для iPhone Pro/Max с DI — гарантируем минимум 64px */
  }

  /* Кабинет поставщика — лого с компанией */
  .cabinet-nav .cabinet-logo {
    padding-top: max(4px, env(safe-area-inset-top, 4px)) !important;
  }

  /* Когда открыт чат — header чата тоже сдвигаем */
  .chat-view .chat-header {
    padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
  }

  /* Login/onboarding/public-invite экраны */
  .login-card, .public-invite-card, .onboarding {
    margin-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* iPhone Pro / Pro Max с Dynamic Island — ЖЁСТКИЕ 64px (DI = 59px + 5px запас) */
/* Identifier: viewport height в диапазоне DI-устройств */
@media (max-width: 768px) and (min-height: 850px) and (max-height: 960px) {
  .app .sidebar .sidebar-header {
    padding-top: max(64px, env(safe-area-inset-top)) !important;
    min-height: 100px;
  }
  .cabinet-nav .cabinet-logo {
    padding-top: max(64px, env(safe-area-inset-top)) !important;
  }
  .chat-view .chat-header {
    padding-top: max(64px, env(safe-area-inset-top)) !important;
  }
}

/* iPhone обычные (без DI, с notch) — 47px минимум */
@media (max-width: 768px) and (min-height: 800px) and (max-height: 849px) {
  .app .sidebar .sidebar-header {
    padding-top: max(47px, env(safe-area-inset-top)) !important;
    min-height: 80px;
  }
  .cabinet-nav .cabinet-logo {
    padding-top: max(47px, env(safe-area-inset-top)) !important;
  }
  .chat-view .chat-header {
    padding-top: max(47px, env(safe-area-inset-top)) !important;
  }
}

/* === FIX: восстановить cabinet-main на mobile === */
@media (max-width: 768px) {
  /* Старая логика скрывала cabinet-main без has-content. На mobile с bottom-nav
     наоборот — main ВСЕГДА видим, nav скрыт. */
  .cabinet-layout:not(.has-content) .cabinet-main {
    display: block !important;
  }
  .cabinet-layout.has-content .cabinet-main {
    display: block !important;
  }
  /* nav 100% скрыт */
  .cabinet-layout .cabinet-nav { display: none !important; }
}

/* === FIX: bubble alignment + composer above bottom-nav === */

/* Messages container — flex-column так bubble'ы выравниваются по краю */
.messages {
  display: flex !important;
  flex-direction: column !important;
}

/* Mine — справа */
.msg.mine {
  float: none !important;
  align-self: flex-end !important;
  max-width: 75% !important;
}

/* Theirs — слева */
.msg.theirs {
  float: none !important;
  align-self: flex-start !important;
  max-width: 75% !important;
}

/* Composer + AI кнопки не должны закрываться bottom-nav'ом */
@media (max-width: 768px) {
  .chat-view .composer {
    /* Composer должен быть над bottom-nav. На mobile bottom-nav скрывается при has-active,
       но composer сам по себе всё равно должен иметь нижний отступ */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* AI-suggestion кнопки над composer'ом — не должны закрываться */
  .ai-suggest-bar,
  [class*="ai-suggest"],
  .quick-actions,
  .chat-actions {
    margin-bottom: 0 !important;
  }

  /* Когда чат открыт у заказчика — bottom-nav прячется */
  /* Условие: .app.has-active или .cabinet-layout.has-content */
  .app.has-active .tg-bottom-nav,
  body:has(.chat-view.active) .tg-bottom-nav,
  body:has(.messages) .tg-bottom-nav {
    transform: translateY(110%) !important;
  }
}

/* === Telegram chat background + bubble visibility fix === */
:root {
  --chat-pattern-bg: #e6ebee;       /* TG-light beige-grey */
  --bubble-shadow: 0 1px 1px rgba(0, 0, 0, 0.13), 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] {
  --chat-pattern-bg: #0e0e0e;
  --bubble-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Фон чата — НЕ белый, чтобы bubble theirs было видно */
.chat-view {
  background: var(--chat-pattern-bg) !important;
  /* SVG TG-pattern опционально, пока однотонный */
}
.chat-view::before {
  display: none !important; /* убираем старый gradient overlay */
}
.messages {
  background: transparent !important;
}

/* Theirs bubble — заметная тень + 1px outline */
.msg.theirs .msg-bubble {
  background: #ffffff !important;
  box-shadow: var(--bubble-shadow) !important;
  border: none !important;
  border-radius: 18px !important;
  /* tail-corner (нижний-левый) */
}
.msg.theirs.pos-last .msg-bubble,
.msg.theirs.pos-single .msg-bubble {
  border-bottom-left-radius: 4px !important;
}

/* Mine bubble — БЕЗ фиолетовых теней, чистый зелёный */
.msg.mine .msg-bubble {
  background: var(--bubble-mine, #eeffde) !important;
  box-shadow: var(--bubble-shadow) !important;
  border: none !important;
  border-radius: 18px !important;
  color: #000 !important;
}
.msg.mine.pos-last .msg-bubble,
.msg.mine.pos-single .msg-bubble {
  border-bottom-right-radius: 4px !important;
}

/* Mine — никаких inset градиентов */
.msg.mine .msg-bubble::before,
.msg.mine .msg-bubble::after {
  display: none !important;
}

/* Mine time tick (✓✓) — зелёный */
.msg.mine .msg-time { color: #4fae4e !important; }

/* Tail (визуальный «хвостик» как у TG) — упрощённо через ::after */
.msg-bubble { position: relative; }

/* Dark mode: theirs bubble чёрный с белым текстом */
[data-theme="dark"] .msg.theirs .msg-bubble {
  background: #212121 !important;
  color: #fff !important;
}
/* === FIX: cabinet-main top padding под Dynamic Island === */
@media (max-width: 768px) {
  /* cabinet-main content (где h1 "Привет, Поставщик") — добавляем safe-area сверху */
  .cabinet-main {
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
  }
}

/* iPhone Pro / Pro Max с Dynamic Island (viewport height 850-960) */
@media (max-width: 768px) and (min-height: 850px) and (max-height: 960px) {
  .cabinet-main {
    padding-top: max(70px, env(safe-area-inset-top)) !important;
  }
}

/* iPhone обычные с notch (viewport height 800-849, например iPhone 14 = 844) */
@media (max-width: 768px) and (min-height: 800px) and (max-height: 849px) {
  .cabinet-main {
    padding-top: max(56px, env(safe-area-inset-top)) !important;
  }
}

/* iPhone SE и узкие без notch — стандартный padding */
@media (max-width: 768px) and (max-height: 799px) {
  .cabinet-main {
    padding-top: 20px !important;
  }
}

/* === FIX: AI-кнопки в чате — wrap вместо horizontal scroll === */
@media (max-width: 768px) {
  .composer .ai-row {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 4px 0 6px !important;
    margin-bottom: 6px !important;
  }
  .composer .ai-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    background: var(--primary-tint, rgba(51,144,236,0.1)) !important;
    color: var(--primary, #3390ec) !important;
    border: none !important;
    box-shadow: none !important;
    flex: 0 1 auto;
    white-space: nowrap;
    /* Длинные надписи — не обрезать а сжать */
    min-width: 0;
  }
  .composer .ai-btn:hover {
    background: rgba(51,144,236,0.18) !important;
    transform: none !important;
  }
  .composer .ai-btn.send-quote {
    background: var(--success, #00c73e) !important;
    color: #fff !important;
  }

  /* Composer — padding-bottom учитывает home indicator */
  .composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
}