/* ============================================================
   SOChat - responsive.css
   Responsive behavior for tablet and mobile
   ============================================================ */

/* ---- Tablet: 768px - 1024px ---- */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 280px;
  }

  .messages-area {
    padding: 16px 24px;
  }

  .msg-row {
    max-width: 80%;
  }

  /* Slightly tighter typography on tablet */
  .chat-item-name    { font-size: .875rem; }
  .chat-item-preview { font-size: .775rem; }
  .bubble            { font-size: .875rem; }
}

/* ---- Mobile: < 768px ---- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 100vw;
  }

  body { overflow: hidden; }

  /* Sidebar becomes full-width drawer */
  .sidebar {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100%;
    transform: translateX(0);
    z-index: 200;
    transition: transform var(--t-slow);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
  }

  /* When a chat is selected, hide sidebar */
  .sidebar.slide-out {
    transform: translateX(-100%);
  }

  /* Chat panel fills screen */
  .chat-panel {
    width: 100vw;
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    transform: translateX(100%);
    transition: transform var(--t-slow);
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
  }

  .chat-panel.slide-in {
    transform: translateX(0);
  }

  /* Show back button on mobile */
  .btn-back { display: flex; }

  /* Messages: full width with side safe-area (landscape notch) */
  .messages-area {
    padding: 12px max(12px, env(safe-area-inset-right))
             12px max(12px, env(safe-area-inset-left));
  }

  .msg-row {
    max-width: 88%;
  }

  /* Composer: push above iPhone home indicator and ensure solid background */
  .composer {
    background: var(--sidebar-bg);
    padding: 10px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 5;
  }

  /* Sidebar header: handle notch at top */
  .sidebar-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  /* Chat header: handle notch at top and ensure center alignment */
  .chat-header {
    height: auto;
    min-height: calc(68px + env(safe-area-inset-top));
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: 8px;
    display: flex;
    align-items: center;
  }

  /* Sidebar footer: push above home indicator and ensure solid background */
  .sidebar-footer {
    background: var(--sidebar-bg);
    padding: 12px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 5;
  }

  /* Profile modal full width */
  .modal {
    padding: 24px 20px;
    max-width: 100%;
    margin: 0 8px;
  }

  /* Settings tabs: allow horizontal scroll if they overflow */
  .settings-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-left: 16px;
    padding-right: 16px;
    gap: 0;
  }
  .settings-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .settings-tab {
    padding: 10px 14px;
    font-size: .8rem;
    flex-shrink: 0; /* Don't squish tabs */
  }

  /* Toast bottom center — above home bar */
  #toast-container {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 0; left: 0;
    align-items: center;
    padding: 0 16px;
  }

  /* ---- Adaptive typography on mobile ---- */
  .chat-item-name      { font-size: .875rem; }
  .chat-item-preview   { font-size: .775rem; }
  .chat-item-time      { font-size: .67rem;  }
  .bubble              { font-size: .875rem; line-height: 1.45; }
  .msg-time            { font-size: .65rem;  }
  .chat-header-name    { font-size: .9rem;   }
  .chat-header-status  { font-size: .72rem;  }
  .sidebar-user-name   { font-size: .83rem;  }
  .section-label       { font-size: .66rem;  }
  #messageInput        { font-size: 1rem;   } /* 1rem (16px) natively prevents iOS auto-zoom on focus */
}

/* ---- Hide scrollbar on mobile for cleaner look ---- */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0; }
}

/* ---- Very small screens: 360px and below ---- */
@media (max-width: 360px) {
  .auth-card          { padding: 24px 14px; }
  .welcome-title      { font-size: 1.05rem; }
  .chat-item-name     { font-size: .83rem;  }
  .chat-item-preview  { font-size: .74rem;  }
  .bubble             { font-size: .83rem;  padding: 8px 12px; }
  .chat-header-name   { font-size: .85rem;  }
  .sidebar-user-name  { font-size: .8rem;   }
  .brand-name         { font-size: 1rem;    }
}