/* ==== Sani Chat usability layer (theme 0.6.75, Ninad's decisions of 2 Nov 2026) ====
   Loaded only where the SaniIntelligence Floating Chat plugin loads its own stylesheet, and after it (functions.php,
   saniservice_chat_ux_assets). The plugin files are untouched; every rule here wins on specificity (two ids, or
   html body + id) so it also beats the plugin's own !important rules. Existing tokens only; the one derived colour is
   a color-mix() of two tokens with a token fallback. Behaviour lives in chat-ux.js.
   NOT changed on purpose: the vertical "CHAT WITH US" tab (design, size, colour, position, scroll reveal) and the
   desktop/tablet panel geometry. */

/* 1. The tab: a keyboard-focus indicator only (its normal appearance is unchanged). Inset, so the right screen edge
      cannot clip it; ink on the gold tab is 7.7:1. */
html body #sani-chat-button:focus { outline: none; }
html body #sani-chat-button:focus-visible { outline: 3px solid var(--ink, #16191c); outline-offset: -6px; }

/* While the theme's phone/tablet menu is open the menu stays on top: the menu panel lives inside #nav (z-index 100),
   the tab normally sits at 9999. Stacking only; nothing else about the tab changes. */
html body.nav-open #sani-chat-button { z-index: 99; }

/* 2. Close, call and send: keyboard-focus indicators (keyboard focus only, no change for mouse or touch). */
html body #sani-chat-header #sani-chat-close:focus { outline: none; }
html body #sani-chat-header #sani-chat-close:focus-visible,
html body #sani-chat-header #sani-chat-call:focus-visible,
html body #sani-chat-input button:focus-visible { outline: 2px solid var(--ink, #16191c); outline-offset: 2px; }

/* 3. Text sizes: message bubbles 15px (were 13px), the message field 16px so iOS does not zoom on focus. The viewport
      tag still allows pinch-zoom. */
html body #sani-chat-messages .sani-chat-bubble { font-size: 15px !important; }
html body #sani-chat-input #sani-chat-user-input { font-size: 16px !important; }

/* 4. Contrast. Placeholder: --ink-soft at .80 instead of .55, 4.87:1 on the field (4.99:1 focused; needs 4.5:1).
      Send arrow: gold 45% / bronze (--accent), 3.38:1 on the field (3.50:1 focused; needs 3:1), the closest on-brand
      colour to the old gold that passes; bronze alone (6.1:1) is the fallback. Hover stays ink. */
html body #sani-chat-input #sani-chat-user-input::placeholder { color: var(--ink-soft, #3d4248); opacity: .8; }
html body #sani-chat-box #sani-chat-input button::after {
  color: var(--accent, #6b4f2e);
  color: color-mix(in srgb, var(--gold, #c9a673) 45%, var(--accent, #6b4f2e));
}
html body #sani-chat-box #sani-chat-input button:hover::after { color: var(--ink, #16191c); }

/* 5. Phone sheet: screens under 600px wide or under 500px tall. The open chat covers the whole screen; chat-ux.js
      contains focus, makes the page behind inert, locks scrolling while open and sizes the sheet to the visible area
      (.scx-vv) so the field stays above an on-screen keyboard. */
@media (max-width: 599.98px), (max-height: 499.98px) {
  html body #sani-chat-box {
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100vh !important; height: 100dvh !important;
    min-height: 0 !important; max-height: none !important;
    border-radius: 0 !important;
  }
  html body #sani-chat-box.scx-vv { top: var(--scx-vvt, 0px) !important; bottom: auto !important; height: var(--scx-vvh, 100dvh) !important; }
  html body #sani-chat-box #sani-chat-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 10px calc(20px + env(safe-area-inset-left, 0px)) !important;
    border-bottom: 1px solid var(--line, #d2ccbf) !important;
  }
  html body #sani-chat-box #sani-chat-header #sani-chat-close { width: 44px !important; height: 44px !important; }
  html body #sani-chat-box #sani-chat-input {
    padding: 10px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)) !important;
    border-top: 1px solid var(--line, #d2ccbf) !important;
  }
  html.sani-chat-open body #sani-chat-button { opacity: 0 !important; pointer-events: none !important; }
}

/* 6. Reduced motion: the plugin already removes the panel and tab transitions; the typing dots and the unread badge
      stop too. */
@media (prefers-reduced-motion: reduce) {
  html body .typing-dots span, html body #sani-chat-notification.pulse { animation: none !important; }
}