/* mobile.css */

@media (min-width: 768px) and (max-width: 1100px) {
  #header { padding: 0 28px; }
  .hero { padding: 56px 24px 44px; }
  .chat-section { padding: 24px 20px 48px; }
  #coomeet_container { height: 520px; }
  .content-area { padding: 36px 32px; }
}

@media (max-width: 767px) {
  #header { padding: 0 18px; height: 54px; --header-h: 54px; }
  .logo-text { display: none; }
  .online-label { display: none; }
  .online-counter { padding: 6px 14px; gap: 7px; }
  .online-num { font-size: 11px; min-width: 44px; }

  /* Центровка hero — жёстко через !important на случай если template.css перебивает */
  .hero {
    padding: 36px 20px 28px;
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 42px);
    text-align: center !important;
    width: 100% !important;
  }
  .line-white, .line-fire {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
  .hero-sub {
    font-size: 14px;
    max-width: 100%;
    text-align: center !important;
  }
  .hero-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-divider { margin-top: 28px; }

  .chat-section { padding: 0; }

  .chat-frame-outer {
    border-radius: 0; max-width: 100%;
    box-shadow: none;
  }
  .chat-frame-outer::before { border-radius: 0; inset: 0; }
  .chat-frame { border-radius: 0; }
  .chat-topbar { padding: 9px 16px; }

  /* Чат чуть короче экрана — снизу остаётся 48px полоска
     на всю ширину, за которую тянут вниз */
  #coomeet_container { height: calc(100svh - 54px - 36px - 48px); }

  /* Полоска-хэндл под чатом */
  .chat-scroll-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    touch-action: pan-y;
  }

  .chat-scroll-handle::after {
    content: '';
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
  }

  .top-modules  { padding: 14px 18px; max-width: 100%; margin-top: 18px; }
  .content-area {
    max-width: 100%; margin: 16px 0 0;
    border-radius: 0; padding: 28px 20px;
    box-shadow: none;
    border-top: 2px solid rgba(232,25,44,0.15);
  }
  #footer { margin-top: 0; padding: 20px 18px; }
  .f-nav a { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 26px; }
  .hero-eyebrow { font-size: 9px; padding: 5px 12px; }
}

/* ── Горизонталь на телефоне ──────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  /* Скрываем hero — маленький экран, сразу показываем чат */
  .hero        { display: none !important; }
  .hero-divider{ display: none !important; }
  .inset-modules { padding: 0; }

  /* Чат на всю оставшуюся высоту */
  .chat-section { padding: 0; }
  .chat-frame-outer { border-radius: 0; max-width: 100%; box-shadow: none; }
  .chat-frame-outer::before { border-radius: 0; inset: 0; }
  .chat-frame { border-radius: 0; }
  #coomeet_container { height: calc(100svh - 54px - 36px); }
}