/* ═══════════════════════════════════════════════════════════
   POSTARAAI TOOL PRO — UI PATCH v1
   Append this AFTER your existing app.css (load order matters).
   Or paste it into the bottom of app.css.

   Fixes:
   - Desktop side-by-side panel layout (CSS didn't know about
     new class names .builder-chat / .builder-code).
   - Mobile congestion: prompt pills hidden, plugin-name fields
     collapsed, footer compacted, tab bar wraps cleanly.
   - Sidebar Z-index above mobile-topbar (otherwise menu opens
     behind the topbar).
═══════════════════════════════════════════════════════════ */

/* ── DESKTOP LAYOUT (>700px) ────────────────────────────────
   The new HTML uses .builder-chat and .builder-code instead of
   the old .chat-panel / .code-panel. Make them sit side-by-side. */
@media (min-width: 701px) {
  .builder-panels {
    flex-direction: row !important;
  }
  .builder-chat,
  .builder-code {
    display: flex !important;
    flex: 1;
    min-width: 0;
  }
  .builder-chat {
    max-width: 480px;
    border-right: 1px solid var(--border, #e5e7eb);
  }
  /* Hide mobile tabs on desktop */
  .mob-tabs {
    display: none !important;
  }
  /* Hide mobile topbar on desktop */
  .mobile-topbar {
    display: none !important;
  }
}

/* ── MOBILE — DECLUTTER (≤700px) ─────────────────────────── */
@media (max-width: 700px) {

  /* Sidebar must sit ABOVE the mobile topbar */
  .sidebar {
    z-index: 200 !important;
  }
  .sidebar-overlay {
    z-index: 150;
  }
  .mobile-topbar {
    z-index: 50;
  }

  /* Make mob-tabs wrap into 2 rows cleanly (tabs + provider/size).
     Single-line was too cramped with 5 items. */
  .mob-tabs > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  /* First three items (Chat/Code/ZIP) take the whole top row */
  .mob-tab-btn {
    flex: 1 1 28% !important;
    min-width: 0 !important;
    height: 34px !important;
    font-size: 11px !important;
  }
  /* Provider + size selectors share the second row */
  .mob-tabs .provider-chip,
  .mob-tabs .size-selector-wrap {
    flex: 1 1 45% !important;
    margin: 0 !important;
    justify-content: center;
  }

  /* Hide the noisy prompt pills on mobile — user already knows
     what to build by the time they're on phone */
  .chat-prompts {
    display: none !important;
  }

  /* Hide the plugin name / version row on mobile until needed
     — it just adds visual clutter. User can still set it on desktop.
     If you WANT it visible, change to display:flex. */
  #plugin-fields {
    display: none !important;
  }

  /* Tighter footer */
  .builder-footer {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    gap: 6px !important;
    overflow: hidden;
  }
  .bf-sep { display: none; } /* hide all separators */
  .builder-footer span:not(.bf-live):not(.bf-right):not(#bf-tokens) {
    display: none; /* hide provider+size labels — already in tab bar */
  }
  .bf-right { font-size: 10px; }

  /* Tighter chat bubbles */
  .msg-bubble {
    padding: 9px 11px !important;
    font-size: 12.5px !important;
  }
  .msg-av { width: 24px !important; height: 24px !important; font-size: 11px !important; }

  /* Tighter composer */
  .chat-input-box {
    padding: 8px !important;
  }
  .composer {
    padding: 7px 7px 7px 11px !important;
  }
  .composer-ta {
    font-size: 14px !important; /* keep ≥14px so iOS doesn't zoom on focus */
  }

  /* Hide the "AI Plugin Builder" panel header on mobile —
     topbar already shows "AI Builder" */
  .builder-chat .panel-hdr,
  .builder-code .panel-hdr {
    display: none !important;
  }

  /* Make panels fill exactly the visible area, no scroll-bleed */
  .builder-chat.panel-active,
  .builder-code.panel-active {
    display: flex !important;
  }
  .builder-chat:not(.panel-active),
  .builder-code:not(.panel-active) {
    display: none !important;
  }
}

/* ── EXTRA-SMALL (≤380px — older phones) ───────────────────
   Even more aggressive decluttering. */
@media (max-width: 380px) {
  .mob-tab-btn {
    font-size: 10px !important;
    height: 30px !important;
  }
  .provider-select,
  .size-selector {
    font-size: 10px !important;
  }
  .size-selector-label {
    display: none !important; /* "SIZE" label takes precious px */
  }
  .builder-footer {
    height: 28px !important;
    font-size: 9px !important;
  }
  .msg-bubble { font-size: 12px !important; }
}