/* ==========================================================================
   Swordis — Contact + AI chat (framework-free twin)  ·  base + keyframes

   Design tokens live in tokens.css (the storefront token file). Everything
   else is inline style objects in app.js referencing those CSS variables.
   This file only carries the chat's own base styles (scoped to
   .swordis-scope) and its animations/scrollbars.
   ========================================================================== */
/* Base + resets: inside the chat only (.swordis-scope), never the page — see
   the note at the top of tokens.css on how site-wide rules broke the store. */
.swordis-scope, .swordis-scope *, .swordis-scope *::before, .swordis-scope *::after { box-sizing: border-box; }
.swordis-scope {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-primary, #1a2d28);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.swordis-scope img { display: block; max-width: 100%; }
.swordis-scope button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.swordis-scope a { color: inherit; text-decoration: none; }
.swordis-scope input, .swordis-scope textarea { font: inherit; color: inherit; }

/* The widget renders its own headings as div[role=heading] rather than real
   h1–h6 tags, specifically so theme stylesheets that blanket-style bare
   heading tags with `!important` (e.g. `h3 { font-size: 24px !important }`)
   can't blow up product names / article titles inside the chat. This rule is
   just a backstop in case a real heading tag ever ends up in here. */
#swordis-assist-root h1, #swordis-assist-root h2, #swordis-assist-root h3,
#swordis-assist-root h4, #swordis-assist-root h5, #swordis-assist-root h6,
.swordis-modal-overlay h1, .swordis-modal-overlay h2, .swordis-modal-overlay h3,
.swordis-modal-overlay h4, .swordis-modal-overlay h5, .swordis-modal-overlay h6 {
  font-size: inherit !important;
}

/* Same reasoning as above, for our own <header> tag: some themes apply a
   default margin to bare `header` elements site-wide, which showed up as a
   grey gap above the dark-green floating-widget header. Our header is
   always the first child of the widget column, so it should touch the
   panel's top edge exactly — padding stays controlled by app.js's inline
   styles (different per surface), only margin needs the backstop. */
[data-support-widget] > header {
  margin: 0 !important;
}

/* ── Chat animations (ported from the React build) ──────────────────────── */
@keyframes sw-support-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-support-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sw-preview-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Closing counterpart of sw-support-rise — the desktop panel used to vanish on
   a bare display:none, which read as a hard cut next to its animated open. */
@keyframes sw-support-sink {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(16px); }
}
/* Full-screen mobile panel: a sheet that slides off the bottom edge rather
   than fading, so the storefront is revealed by the panel moving away instead
   of flickering through it mid-fade. */
@keyframes sw-support-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sw-support-sheet-out {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  #swordis-launcher-panel { animation-duration: .01ms !important; }
}
@keyframes sw-support-slide-over {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sw-support-dots {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* ── Product photos ───────────────────────────────────────────────────────
   Catalogue shots are cut out on pure white, which next to the card's own
   white reads as a bright empty hole. Multiplying the photo over a light grey
   tint turns those white pixels grey while leaving the sword itself alone —
   no re-editing of the images required. */
.sw-product-photo { background: var(--product-photo-bg); }
.sw-product-photo > img { mix-blend-mode: multiply; }

/* Slim custom scrollbars inside the chat surfaces */
[data-support-scroll]::-webkit-scrollbar { width: 6px; height: 6px; }
[data-support-scroll]::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
[data-support-scroll] { scrollbar-width: thin; }
/* Keep a swipe that runs past the end of a chat scroller from handing the
   gesture to the page behind it (rubber-banding the site under the widget). */
[data-support-scroll] { overscroll-behavior: contain; }

/* ── Mobile contact-page embed ────────────────────────────────────────────
   On phones the card should run edge-to-edge (no side gutters, no rounded
   corners) and use most of the viewport height, rather than sitting as a
   centered, padded card. This only touches our own shortcode container —
   it does not reach into the theme's page template. */
@media (max-width: 640px) {
  .swordis-assist-embed-pad {
    padding: 0 !important;
  }
  .swordis-assist-card {
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    height: calc(100vh - 98px) !important;
    height: calc(100dvh - 98px) !important; /* dynamic viewport height where supported */
    min-height: 480px;
  }

  /* Client asked to hide the storefront footer below the chat on mobile
     (not shrink the chat itself). This stylesheet only loads on the page
     carrying [swordis_assist], and only targets the theme footer when it
     directly follows our mount point — so it can't affect the footer
     anywhere else on the site. */
  #swordis-assist-root + footer.footer {
    display: none !important;
  }

  /* Topic chips (home screen) + issue-reason chips (defective-item flow) —
     client asked for these ~10-15% bigger on mobile, on both the floating
     widget and the /contact embed. */
  .sw-chip {
    padding: 9px 16px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }
  .sw-chip-emoji {
    font-size: 18px !important;
  }
}

/* Typing on a phone: the keyboard leaves so little room that the T&C line is
   just noise, so it steps out of the way until the composer loses focus.
   Capped at the launcher's own mobile breakpoint (560px, see MOBILE_BP in
   launcher.js) rather than the 640px embed one — above it the panel is the
   floating desktop card, which focuses its composer the moment it opens and
   has no keyboard covering anything, so the line must stay put there. */
@media (max-width: 560px) {
  /* Typing on a phone leaves very little room, so the chrome steps aside: the
     header moves out of the way (the "push the top part too" the client asked
     for, done here rather than left to the browser to pan away) and the T&C
     line goes with it. Both come straight back when the composer blurs. */
  /* !important is load-bearing here, not defensive: renderHeader() in app.js
     writes `display: flex` as an INLINE style on .sw-chat-header every time it
     draws, and an inline declaration outranks a stylesheet one. Without this
     the header never actually hid — it only looked like it did while the
     browser shifted content around the rising keyboard, then reappeared the
     moment the panel was resized, which read as the header "coming back". */
  .sw-kb-open .sw-chat-header,
  .sw-kb-open .sw-tc-footer {
    display: none !important;
  }
}

/* ── Desktop /contact embed — slightly larger box + type ─────────────────
   Client compared the full-page embed against the Claude design and asked
   for a bit more width and font size on desktop specifically (mobile and
   the floating widget already matched). `zoom` scales the whole subtree
   (fonts, paddings, gaps) uniformly without touching every inline style. */
@media (min-width: 641px) {
  .swordis-assist-card {
    zoom: 1.07;
  }

  /* Cap the bot's own message bubbles for readable line length on the wide
     /contact embed (spec 5.4). Overrides the inline max-width the bubble
     ships with; only applies on desktop — mobile keeps the full-width inline
     value. The floating launcher column is narrower than this cap, so it is
     unaffected there. */
  .sw-bot-bubble {
    max-width: 680px !important;
  }
}

/* ── Product quick-view modal ─────────────────────────────────────────────
   Guarantee the floating-sheet look (gutter + rounded corners) on every
   screen size, even if something else on the page tries to zero out
   padding/border-radius on fixed-position overlays. */
.swordis-modal-overlay {
  padding: 14px !important;
  box-sizing: border-box !important;
}
.swordis-modal-sheet {
  border-radius: 16px !important;
}
/* Mobile: narrow, near-full-height sheet. Desktop (.swordis-modal-sheet--wide,
   set by app.js when the viewport is wide enough): a two-column sheet with
   room for the image beside the details — see openProductModal(). */
.swordis-modal-sheet:not(.swordis-modal-sheet--wide) {
  width: min(420px, 100%) !important;
}
.swordis-modal-sheet--wide {
  width: min(880px, 100%) !important;
}

/* ── Site-wide floating launcher ──────────────────────────────────────────
   launcher.js builds and positions the FAB/pill, status dot, unread badge
   and preview card entirely with inline styles (same approach as app.js),
   so it can react to state (open/mobile/unread) without fighting CSS
   specificity — this file only needs to supply its rise/fade keyframes
   above. Nothing else in this stylesheet reaches outside the widget's own
   containers. */