/* chat-polish.css — candidate 18 pass 4 (Jan, 2026-10-21, after using the chat on his phone: "dim the background when the chat
   modal pops up and make a little more margin at the top for the modal").

   PRESENTATION ONLY. The chat widget's markup, inline styles and scripts (both variants: the widget on 14 pages and the iframe
   shell on the home page) are PROTECTED (src/tools/protected.py, gate G11) and are NOT edited. This sheet is linked from the
   page head, outside the protected slice, and changes only how the chat LOOKS when it is open. No script is added and no
   behaviour changes: the backdrop is pointer-events:none (no tap-to-close), the launcher and the window keep their own
   z-indexes (999 / 998) and stay above it.

   Open-state hooks, read from the protected partials, never written to:
     - both variants toggle .open on the launcher button #cicChatBtn;
     - the widget variant additionally toggles body.cic-chat-open (and, at <=480px, makes body position:fixed, which turns
       body into a stacking context — so the backdrop MUST live inside body, not on html; it does: body::before).
   body::before is the site's decorative radial-gradient layer (site-core.css / the home page's inline copy, z-index 0; hidden
   by enterprise.css under reduced motion and print). While the chat is open this sheet re-purposes that pseudo-element as
   the dim; the gradient returns the moment the chat closes. The :has() rule (home iframe variant) is written as its own rule
   so that a browser without :has() still applies the widget rule; without :has() the home page simply shows no dim.

   Stacking while open, lowest first: page content and the sticky header (Tailwind z-50) < backdrop 997 < chat window 998
   < launcher 999 < mobile-menu overlay 1000. */

/* 1. Backdrop: full viewport, above the page and the header, below the chat window and launcher, decorative only. */
body.cic-chat-open::before {
  content: ""; display: block; position: fixed; inset: 0; z-index: 997;
  background: rgba(10, 11, 15, 0.6); opacity: 1; visibility: visible; mix-blend-mode: normal;
  pointer-events: none;
  animation: cic-chat-dim-in .2s ease;
}
body:has(#cicChatBtn.open)::before {
  content: ""; display: block; position: fixed; inset: 0; z-index: 997;
  background: rgba(10, 11, 15, 0.6); opacity: 1; visibility: visible; mix-blend-mode: normal;
  pointer-events: none;
  animation: cic-chat-dim-in .2s ease;
}
@keyframes cic-chat-dim-in { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: no fade, and the dim must survive enterprise.css's `body::before{display:none !important}` under the same
   media query (same importance, higher specificity here). */
@media (prefers-reduced-motion: reduce) {
  body.cic-chat-open::before { animation: none !important; display: block !important; }
  body:has(#cicChatBtn.open)::before { animation: none !important; display: block !important; }
}

/* Print: enterprise.css already hides body::before in print; stated here so the intent is explicit. */
@media print {
  body.cic-chat-open::before { display: none !important; }
  body:has(#cicChatBtn.open)::before { display: none !important; }
}

/* 2. Top margin on phones. The protected widget rule at <=480px pins the open window to top:12px !important (CIC-CHAT-MOBILE-FIX-R1);
   this wins on specificity (0,3,0 vs 0,1,0) with the same !important and keeps the protected bottom
   (safe-area-inset-bottom + 88px), so the input row and send button stay exactly where they are above the keyboard area;
   only the top edge moves down, to 72px plus the status-bar safe area. */
@media (max-width: 480px) {
  body.cic-chat-open .cichocki-chat-window.open {
    top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  }
}
/* 481-720px: the widget is bottom:100px with a fixed 520px height, so on a short viewport it could start under the top edge;
   cap the height so the top edge is never above 72px (+ safe area). Flex column: the message list shrinks, the input row stays. */
@media (min-width: 481px) and (max-width: 720px) {
  body.cic-chat-open .cichocki-chat-window.open {
    max-height: calc(100vh - 100px - env(safe-area-inset-top, 0px) - 72px);
    max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px) - 72px);
  }
}
/* Home iframe shell: already 70vh / bottom 90px at <=480px (top 163px on a 390x844 phone, measured) and 600px / bottom 100px
   above that with max-height 100vh-120px; the same cap keeps its top edge >= 72px (+ safe area) on short viewports. */
@media (max-width: 480px) {
  .cichocki-chat-shell.open {
    max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px) - 72px);
    max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px) - 72px);
  }
}
@media (min-width: 481px) and (max-width: 720px) {
  .cichocki-chat-shell.open {
    max-height: calc(100vh - 100px - env(safe-area-inset-top, 0px) - 72px);
    max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px) - 72px);
  }
}
/* Desktop (>720px): placement unchanged (widget bottom 100px / 520px tall = top 180px at 1280x800; shell top 100px). */