/* ═══════════════════════════════════════════════════════════════════════
   CHAT WIDGET — RESPONSIVE STYLESHEET (FULL RANGE)
   ═══════════════════════════════════════════════════════════════════════

   COVERAGE
   --------
   ≥ 2560px   4K / ultra-wide monitors           → largest window, big bubble
   ≥ 1920px   large desktops (FHD+)              → larger window
   ≥ 1600px   standard desktops                  → slightly larger
   ≥ 1440px   small desktops / large laptops     → mild bump
   1025–1439  baseline (your inline styles win)  → no override
   ≤ 1024px   small laptops / large tablets      → tighter
   ≤ 768px    tablets                            → near-full-width
   ≤ 480px    phones                             → full-screen takeover
   ≤ 360px    tiny phones                        → extra compact
   ≤ 800px tall (≥ 1025px wide) → short laptops  → height-capped
   ≤ 600px tall (≥ 481px wide)  → landscape phones

   HOW TO USE
   ----------
   1) Save next to your chat components
        components/chat/chat-responsive.css

   2) Import ONCE at the top of ChatBubble.tsx:
        import './chat-responsive.css';

   3) Add these className props (NOTHING is removed — only added):

      A) ChatBubble.tsx — on the floating window wrapper <div>
         (the one with `bottom: 96, right: 24, zIndex: 9999`):
            className={`qrs-chat-container ${isExpanded ? 'qrs-expanded' : ''}`}

      B) ChatBubble.tsx — on each <NotificationToast> wrapper <div>
         (the one with zIndex: 10001):
            className="qrs-notif-toast"

      C) ChatPanel.tsx — on the root <div>:
            className="qrs-chat-panel"

      D) ChatWindow.tsx — on the root <div>:
            className="qrs-chat-window"

   All inline styles stay exactly as written; these rules only override
   on viewports that don't match the default desktop sizing.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════
   ▼ DESKTOP — LARGER THAN BASELINE ▼
   ═════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. SMALL DESKTOPS / LARGE LAPTOPS  (≥ 1440px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .qrs-chat-container {
    width:  440px !important;
    height: 680px !important;
    right:  28px !important;
  }

  .qrs-chat-container.qrs-expanded {
    width:  min(940px, calc(100vw - 56px)) !important;
    height: min(820px, calc(100vh - 120px)) !important;
  }

  .qrs-chat-bubble {
    width:  62px !important;
    height: 62px !important;
    right:  28px !important;
    bottom: 28px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   2. STANDARD DESKTOPS  (≥ 1600px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .qrs-chat-container {
    width:  460px !important;
    height: 700px !important;
    right:  32px !important;
  }

  .qrs-chat-container.qrs-expanded {
    width:  min(980px, calc(100vw - 64px)) !important;
    height: min(840px, calc(100vh - 130px)) !important;
  }

  .qrs-chat-bubble {
    width:  64px !important;
    height: 64px !important;
    right:  32px !important;
    bottom: 32px !important;
  }

  .qrs-notif-toast {
    width: 380px !important;
    right: 32px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   3. LARGE DESKTOPS — FHD+  (≥ 1920px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .qrs-chat-container {
    width:  480px !important;
    height: 720px !important;
    right:  36px !important;
  }

  .qrs-chat-container.qrs-expanded {
    width:  min(1040px, calc(100vw - 72px)) !important;
    height: min(880px, calc(100vh - 140px)) !important;
  }

  .qrs-chat-bubble {
    width:  66px !important;
    height: 66px !important;
    right:  36px !important;
    bottom: 36px !important;
  }

  .qrs-notif-toast {
    width: 400px !important;
    right: 36px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   4. ULTRA-WIDE / 4K MONITORS  (≥ 2560px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 2560px) {
  .qrs-chat-container {
    width:  520px !important;
    height: 780px !important;
    right:  48px !important;
  }

  .qrs-chat-container.qrs-expanded {
    width:  min(1200px, calc(100vw - 96px)) !important;
    height: min(960px, calc(100vh - 160px)) !important;
  }

  .qrs-chat-bubble {
    width:  72px !important;
    height: 72px !important;
    right:  48px !important;
    bottom: 48px !important;
  }

  .qrs-notif-toast {
    width: 420px !important;
    right: 48px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   ▼ SMALLER — LAPTOPS, TABLETS, PHONES ▼
   ═════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   5. SMALL LAPTOPS / LARGE TABLETS  (≤ 1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .qrs-chat-container {
    width:  min(400px, calc(100vw - 32px)) !important;
    height: min(620px, calc(100vh - 120px)) !important;
  }

  .qrs-chat-container.qrs-expanded {
    width:  min(720px, calc(100vw - 32px)) !important;
    height: min(760px, calc(100vh - 110px)) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   6. TABLETS  (≤ 768px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .qrs-chat-container,
  .qrs-chat-container.qrs-expanded {
    width:     calc(100vw - 24px) !important;
    max-width: 460px !important;
    height:    calc(100vh - 110px) !important;
    right:     12px !important;
    bottom:    88px !important;
  }

  .qrs-chat-container.qrs-expanded {
    max-width: none !important;
  }

  .qrs-notif-toast {
    width:     calc(100vw - 24px) !important;
    max-width: 360px !important;
    right:     12px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   7. PHONES  (≤ 480px) — full-screen takeover
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .qrs-chat-container,
  .qrs-chat-container.qrs-expanded {
    width:         100vw !important;
    height:        100vh !important;
    height:        100dvh !important;   /* dynamic viewport for mobile chrome */
    max-width:     none !important;
    top:           0 !important;
    left:          0 !important;
    right:         0 !important;
    bottom:        0 !important;
    border-radius: 0 !important;
    border:        none !important;
    z-index:       10000 !important;
  }

  /* Hide floating bubble while chat is open on phones (modern :has()) */
  body:has(.qrs-chat-container) .qrs-chat-bubble {
    display: none !important;
  }

  /* Compact bubble when visible */
  .qrs-chat-bubble {
    width:  54px !important;
    height: 54px !important;
    bottom: 16px !important;
    right:  16px !important;
  }

  /* Notifications anchored just above the bubble, edge-to-edge */
  .qrs-notif-toast {
    width:     calc(100vw - 16px) !important;
    max-width: none !important;
    right:     8px !important;
    bottom:    80px !important;
  }

  /* Tighter padding so message bubbles use the full width */
  .qrs-msg-row {
    padding-left:  8px !important;
    padding-right: 8px !important;
  }

  /* 15px+ on inputs prevents iOS zoom-on-focus */
  .qrs-ta {
    font-size: 15px !important;
  }

  /* Slim down headers a touch on narrow widths */
  .qrs-chat-window > div:first-child {
    padding: 12px 14px !important;
  }

  .qrs-chat-panel > div:first-child {
    padding: 16px 16px 12px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   8. TINY PHONES  (≤ 360px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .qrs-chat-bubble {
    width:  50px !important;
    height: 50px !important;
  }

  .qrs-msg-row {
    padding-left:  4px !important;
    padding-right: 4px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   ▼ HEIGHT-BASED QUERIES ▼
   ═════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   9. SHORT LAPTOPS  (≤ 800px tall, ≥ 1025px wide)
   ───────────────────────────────────────────────────────────── */
@media (max-height: 800px) and (min-width: 1025px) {
  .qrs-chat-container {
    height: calc(100vh - 130px) !important;
  }

  .qrs-chat-container.qrs-expanded {
    height: calc(100vh - 130px) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   10. LANDSCAPE PHONES / VERY SHORT  (≤ 600px tall)
   ───────────────────────────────────────────────────────────── */
@media (max-height: 600px) and (min-width: 481px) {
  .qrs-chat-container,
  .qrs-chat-container.qrs-expanded {
    height: calc(100vh - 80px) !important;
    bottom: 70px !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   ▼ EXTRAS ▼
   ═════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   11. FALLBACK for browsers without :has() support
   Add class `qrs-chat-open` on <body> when chat is open if needed
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.qrs-chat-open .qrs-chat-bubble {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   12. TOUCH DEVICES — no hover, hide hover toolbar
   (long-press / right-click context menu still works)
   ───────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .qrs-msg-actions {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   13. iOS SAFE-AREA INSETS — notch / home-indicator support
   ───────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 480px) {
    .qrs-chat-container {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .qrs-chat-bubble {
      bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ─────────────────────────────────────────────────────────────
   14. PRINT — hide chat entirely
   ───────────────────────────────────────────────────────────── */
@media print {
  .qrs-chat-container,
  .qrs-chat-bubble,
  .qrs-notif-toast {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   15. REDUCED MOTION — respect user preference
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qrs-chat-container,
  .qrs-chat-bubble,
  .qrs-notif-toast,
  .qrs-msg-row {
    animation: none !important;
    transition: none !important;
  }
}