/* =====================================================================
   OSC CHAT — on-site chat widget, styles
   ---------------------------------------------------------------------
   THIS IS THE ONE COPY. Until 2026-07-31 these exact rules were pasted
   into index.html, pricing.html and shop.php — three identical copies
   that had to be edited three times, and eventually weren't. If you are
   changing how the chat looks, change it here and it changes everywhere.

   Its partner is js/osc-chat.js, which builds the widget's markup itself.
   A page needs nothing but these two lines to get a working chat:

     <link rel="stylesheet" href="css/osc-chat.css">
     <script defer src="/js/chat-config.js"></script>
     <script defer src="js/osc-chat.js"></script>

   Design tokens come from the host page's :root. Every var() below also
   carries a fallback, so the widget still looks right on a bare page.
   ===================================================================== */

/* Design tokens are inherited from the site's :root; every var() carries a
   matching fallback so the widget renders correctly even on a bare page. */
#osc-chat-root{
  --oscc-ink:var(--ink,#0f1b2d);
  --oscc-ink-2:var(--ink-2,#16263c);
  --oscc-ink-3:var(--ink-3,#2d3f5a);
  --oscc-paper:var(--paper,#fff);
  --oscc-paper-2:var(--paper-2,#f7f5f0);
  --oscc-gold:var(--gold,#e3b422);
  --oscc-gold-text:var(--gold-text,#8a6c13);
  --oscc-steel:var(--steel,#2c4a75);
  --oscc-steel-soft:var(--steel-soft,#edf2f9);
  --oscc-line:var(--line,#e5e1d6);
  --oscc-muted:var(--muted,#566079);
  --oscc-radius:var(--radius,14px);
  --oscc-shadow-md:var(--shadow-md,0 8px 28px rgba(15,27,45,.13));
  --oscc-shadow-lg:var(--shadow-lg,0 18px 50px rgba(15,27,45,.24));
  --oscc-head:var(--font-head,"Archivo",-apple-system,"Segoe UI",sans-serif);
  --oscc-body:var(--font-body,"Inter",-apple-system,"Segoe UI",sans-serif);
  font-family:var(--oscc-body);
  line-height:1.5;
}
#osc-chat-root *,#osc-chat-root *::before,#osc-chat-root *::after{box-sizing:border-box;margin:0;padding:0}
#osc-chat-root :focus-visible{outline:3px solid var(--oscc-steel);outline-offset:2px}
#osc-chat-root .osc-chat-head :focus-visible,
#osc-chat-launcher:focus-visible{outline-color:#fff}
#osc-chat-launcher:focus-visible{outline-offset:3px}
.osc-chat-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- LAUNCHER ----------
   Mobile-first: bottom 86px clears the site's mobile sticky bars
   (.sticky-cta on index <=760px, .m-total on pricing <=980px, both z-55).
   Desktop >=980px: bottom 24px. z-index 64: above content/header (60),
   below the mobile nav overlay (70) and native <dialog> top layer. */
#osc-chat-launcher{
  position:fixed;right:16px;bottom:86px;z-index:64;
  display:flex;align-items:center;gap:10px;
  background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.osc-chat-launcher-label{
  /* .875rem (14px), not .82rem (13.12px) -- 2026-08-23 audit: this was the last
     sub-14px text node on the four pages that carry the chat widget. */
  font-family:var(--oscc-head);font-weight:800;font-size:.875rem;letter-spacing:.04em;
  background:var(--oscc-gold);color:var(--oscc-ink);
  padding:7px 13px;border-radius:99px;box-shadow:var(--oscc-shadow-md);
}
.osc-chat-orb{
  width:58px;height:58px;border-radius:50%;
  background:var(--oscc-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--oscc-shadow-lg);
  border:2px solid var(--oscc-ink-3);
  transition:transform .15s ease,background .15s ease;
}
#osc-chat-launcher:hover .osc-chat-orb{background:var(--oscc-ink-3);transform:translateY(-2px)}
#osc-chat-launcher:active .osc-chat-orb{transform:translateY(0)}
@media(min-width:980px){#osc-chat-launcher{right:24px;bottom:24px}}
#osc-chat-root.osc-chat-is-open #osc-chat-launcher{display:none}
/* One-time attention pulse, added by JS 4s after load -- motion-safe only */
@media(prefers-reduced-motion:no-preference){
  .osc-chat-pulse .osc-chat-orb{animation:osc-chat-pulse 1.5s ease-out 2}
  @keyframes osc-chat-pulse{
    0%{box-shadow:var(--oscc-shadow-lg),0 0 0 0 rgba(227,180,34,.55)}
    100%{box-shadow:var(--oscc-shadow-lg),0 0 0 20px rgba(227,180,34,0)}
  }
}

/* ---------- PANEL ---------- */
#osc-chat-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:66;
  display:flex;flex-direction:column;
  width:auto;
  height:min(85vh,620px);height:min(85dvh,620px);
  background:var(--oscc-paper);
  border:1px solid var(--oscc-line);border-bottom:0;
  border-radius:16px 16px 0 0;
  box-shadow:var(--oscc-shadow-lg);
  overflow:hidden;
}
@media(prefers-reduced-motion:no-preference){
  #osc-chat-panel{animation:osc-chat-rise .25s ease}
  @keyframes osc-chat-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
#osc-chat-panel[hidden]{display:none}
@media(min-width:560px){
  #osc-chat-panel{
    left:auto;right:16px;bottom:86px;
    width:380px;max-width:calc(100vw - 32px);
    height:min(600px,calc(100vh - 140px));height:min(600px,calc(100dvh - 140px));
    border-radius:var(--oscc-radius);border-bottom:1px solid var(--oscc-line);
  }
}
@media(min-width:980px){
  #osc-chat-panel{right:24px;bottom:24px;height:min(620px,calc(100vh - 60px));height:min(620px,calc(100dvh - 60px))}
}

/* Header */
.osc-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--oscc-ink);color:#fff;padding:14px 16px;flex:none;
}
.osc-chat-brand{font-family:var(--oscc-head);font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.osc-chat-status{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#c9cdd6;margin-top:2px}
.osc-chat-dot{width:8px;height:8px;border-radius:50%;background:var(--oscc-gold);flex:none}
#osc-chat-close{
  width:44px;height:44px;flex:none;border:0;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
#osc-chat-close:hover{background:rgba(255,255,255,.22)}

/* Thread */
.osc-chat-scroll{flex:1;overflow-y:auto;background:var(--oscc-paper-2);padding:16px 14px;overscroll-behavior:contain}
.osc-chat-log{display:flex;flex-direction:column;gap:10px}
.osc-chat-msg{
  max-width:86%;padding:10px 14px;font-size:.92rem;
  border-radius:14px;overflow-wrap:break-word;
}
.osc-chat-msg-a{
  align-self:flex-start;background:var(--oscc-paper);color:var(--oscc-ink);
  border:1px solid var(--oscc-line);border-bottom-left-radius:5px;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(15,27,45,.08));
}
.osc-chat-msg-u{
  align-self:flex-end;background:var(--oscc-ink);color:#fff;
  border-bottom-right-radius:5px;
}
.osc-chat-msg-link{
  display:inline-block;margin-top:7px;font-family:var(--oscc-head);font-weight:700;font-size:.88rem;
  color:var(--oscc-gold-text);text-decoration:underline;text-underline-offset:3px;
}
.osc-chat-msg-link:hover{color:var(--oscc-ink)}
/* Typing indicator */
.osc-chat-typing{display:inline-flex;gap:5px;align-items:center;padding:14px}
.osc-chat-typing i{width:7px;height:7px;border-radius:50%;background:var(--oscc-muted);opacity:.5}
@media(prefers-reduced-motion:no-preference){
  .osc-chat-typing i{animation:osc-chat-blink 1s infinite}
  .osc-chat-typing i:nth-child(2){animation-delay:.18s}
  .osc-chat-typing i:nth-child(3){animation-delay:.36s}
  @keyframes osc-chat-blink{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
}

/* Quick-reply chips */
.osc-chat-chips{
  display:flex;flex-wrap:wrap;gap:8px;flex:none;
  padding:10px 14px;background:var(--oscc-paper);border-top:1px solid var(--oscc-line);
}
.osc-chat-chips[hidden]{display:none}
.osc-chat-chip{
  min-height:44px;padding:8px 15px;cursor:pointer;
  font-family:var(--oscc-body);font-weight:600;font-size:.85rem;color:var(--oscc-ink-3);
  background:var(--oscc-steel-soft);border:1px solid #d5e0ef;border-radius:99px;
  transition:background .15s ease,border-color .15s ease;
}
.osc-chat-chip:hover{background:#e0e9f6;border-color:var(--oscc-steel)}

/* Composer */
.osc-chat-composer{
  display:flex;gap:8px;flex:none;align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--oscc-paper);border-top:1px solid var(--oscc-line);
}
.osc-chat-composer[hidden]{display:none}
#osc-chat-input{
  flex:1;min-height:44px;padding:10px 14px;
  font-family:var(--oscc-body);font-size:16px; /* prevents iOS zoom-on-focus */
  color:var(--oscc-ink);background:#fcfbf8;
  border:1.5px solid var(--oscc-line);border-radius:99px;
  transition:border-color .15s ease;
}
#osc-chat-input:focus{outline:none;border-color:var(--oscc-steel,#2c4a75);background:var(--oscc-paper);box-shadow:0 0 0 3px rgba(44,74,117,.35)}
#osc-chat-send{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--oscc-gold);color:var(--oscc-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(227,180,34,.45);
  transition:background .15s ease,transform .15s ease;
}
#osc-chat-send:hover{background:#f0c53a}
#osc-chat-send:active{transform:translateY(1px)}
#osc-chat-send[disabled]{opacity:.55;cursor:default}

/* Human handoff mini-form (appears inside the thread scroll area) */
.osc-chat-handoff{
  margin-top:12px;padding:16px;
  background:var(--oscc-paper);border:1px solid var(--oscc-line);
  border-radius:var(--oscc-radius);box-shadow:var(--shadow-sm,0 1px 3px rgba(15,27,45,.08));
}
.osc-chat-handoff[hidden]{display:none}
.osc-chat-hf-title{font-family:var(--oscc-head);font-weight:800;font-size:1rem;color:var(--oscc-ink)}
.osc-chat-hf-sub{font-size:.84rem;color:var(--oscc-muted);margin:3px 0 12px}
.osc-chat-hf-field{margin-bottom:10px}
.osc-chat-hf-field label{display:block;font-size:.8rem;font-weight:600;color:var(--oscc-ink-3);margin-bottom:4px}
.osc-chat-hf-field input,.osc-chat-hf-field textarea{
  width:100%;min-height:44px;padding:10px 12px;
  font-family:var(--oscc-body);font-size:16px;color:var(--oscc-ink);
  background:#fcfbf8;border:1.5px solid var(--oscc-line);border-radius:9px;
  transition:border-color .15s ease;
}
.osc-chat-hf-field textarea{resize:vertical;min-height:64px}
.osc-chat-hf-field input:focus,.osc-chat-hf-field textarea:focus{
  outline:none;border-color:var(--oscc-steel,#2c4a75);background:var(--oscc-paper);box-shadow:0 0 0 3px rgba(44,74,117,.35)
}
.osc-chat-hf-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.osc-chat-hf-submit{
  flex:1;min-height:46px;padding:11px 18px;border:0;border-radius:10px;cursor:pointer;
  font-family:var(--oscc-head);font-weight:700;font-size:.95rem;
  background:var(--oscc-gold);color:var(--oscc-ink);
  box-shadow:0 4px 14px rgba(227,180,34,.45);transition:background .15s ease;
}
.osc-chat-hf-submit:hover{background:#f0c53a}
.osc-chat-hf-submit[disabled]{opacity:.6;cursor:default}
.osc-chat-hf-cancel{
  min-height:46px;padding:11px 16px;cursor:pointer;
  font-family:var(--oscc-head);font-weight:700;font-size:.9rem;
  background:transparent;color:var(--oscc-steel);
  border:1.5px solid var(--oscc-line);border-radius:10px;transition:border-color .15s ease;
}
.osc-chat-hf-cancel:hover{border-color:var(--oscc-steel)}
.osc-chat-hf-note{font-size:.76rem;color:var(--oscc-muted);margin-top:10px;text-align:center}

/* Reduced motion: kill every widget animation/transition */
@media(prefers-reduced-motion:reduce){
  #osc-chat-root *,#osc-chat-root *::before,#osc-chat-root *::after{
    animation:none!important;transition:none!important
  }
}
@media print{#osc-chat-root{display:none!important}}