/*
 * SmartWeb Assistant — public stylesheet
 *
 * Visual properties (colors, backgrounds, borders, radii, shadows, font sizes/weights, padding)
 * live here so site owners can override them via Customize → Additional CSS WITHOUT needing
 * `!important`. Layout (flex, grid, positioning, sizes) stays inline in the React components.
 *
 * All values pull from CSS variables that the plugin injects per-instance on `.swa-root`,
 * so admin Appearance settings keep working unchanged.
 */

/* ── Onboarding ──────────────────────────────────────────────────────────── */

.swa-onboarding-card {
  background: var(--swa-onboarding-card-bg, #fff);
  border: 1px solid var(--swa-onboarding-card-border, var(--swa-border));
  border-radius: var(--swa-radius-lg);
  padding: var(--swa-onboarding-card-padding-y, 28px) var(--swa-onboarding-card-padding-x, 28px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-align: var(--swa-onboarding-card-align, center);
}
.swa-onboarding-question {
  font-size: 20px;
  font-weight: var(--swa-heading-weight, 600);
  color: var(--swa-text);
  text-align: var(--swa-onboarding-card-align, center);
  margin: 0 0 18px;
}
.swa-onboarding-input {
  font-size: 15px;
  background: #fff;
  color: var(--swa-text);
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius);
  padding: 12px 16px;
  transition: border-color 0.15s;
}
.swa-onboarding-input:focus {
  border-color: var(--swa-primary);
}
.swa-onboarding-input.has-error {
  border-color: #ef4444;
}
.swa-onboarding-button {
  font-size: 15px;
  font-weight: 600;
  background: var(--swa-primary);
  color: #fff;
  border-radius: var(--swa-radius);
  padding: 12px 18px;
}
.swa-onboarding-button:disabled {
  opacity: 0.6;
}
.swa-onboarding-back {
  background: transparent;
  color: var(--swa-text-muted);
  border: none;
  padding: 6px;
  font-size: 13px;
}
.swa-onboarding-required {
  color: #cbd5e1;
  font-weight: 400;
}
.swa-onboarding-error {
  color: #ef4444;
  font-size: 13px;
}

/* ── Input card (shared by full-screen Chat and Inline launcher) ─────────── */

.swa-input-card {
  background: #fff;
  border: 1px solid var(--swa-border);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.05);
  padding: 20px 20px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* Claude-like substantial height — taller than wide-and-squat. */
  display: flex;
  flex-direction: column;
  min-height: 120px;
  box-sizing: border-box;
}
.swa-input-card:focus-within { border-color: #d4d4d8; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07); }
.swa-input {
  background: transparent;
  color: var(--swa-text);
  font-size: 16px;
  line-height: 1.55;
}
.swa-send {
  border: none;             /* prevent theme's default 2-tone button border */
  border-radius: 999px;     /* deliberate exception: send button stays a circular icon */
  color: #fff;
  background: var(--swa-primary);
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.swa-send:disabled,
.swa-send.is-disabled {
  background: #e5e7eb;
  border: none;
}

/* ── Chips (empty state, starter, launcher) ──────────────────────────────── */

.swa-chip {
  background: #fff;
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--swa-text-muted);
  padding: 7px 16px;
  transition: all 0.15s;
}
.swa-chip:hover {
  border-color: var(--swa-primary);
  color: var(--swa-primary);
}
.swa-chip.is-open {
  background: color-mix(in srgb, var(--swa-primary) 12%, #fff);
  border-color: var(--swa-primary);
  color: var(--swa-primary);
}

/* ── Greeting / subtitle ─────────────────────────────────────────────────── */

.swa-greeting {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--swa-heading-weight, 600);
  line-height: 1.2;
  color: var(--swa-text);
}
.swa-subtitle {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
  color: var(--swa-text-muted);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */

.swa-topbar {
  background: var(--swa-bg);
  padding: 12px 16px;
}
/* When the bar has no content (desktop: no mobile toggle/brand to show), it
   should not reserve a strip of space or draw a border. */
.swa-topbar:empty {
  padding: 0;
  border: none;
}
.swa-topbar.has-border {
  border-bottom: 1px solid #f1f5f9;
}
.swa-topbar.has-border:empty {
  padding: 0;
  border: none;
}
.swa-brand-text {
  font-weight: 700;
  font-size: 14px;
  color: var(--swa-text);
}
.swa-sidebar-brand-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--swa-text);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.swa-sidebar {
  background: var(--swa-sidebar-bg);
}
.swa-sidebar.is-open {
  border-right: 1px solid var(--swa-border);
}
.swa-sidebar-header {
  padding: 14px 14px 10px;
}
.swa-sidebar-footer {
  border-top: 1px solid #1f1f1e26;
  padding: 12px;
}
/* Per-thread row in the recents list. The wrapper (.swa-thread-row) carries
   hover state so the trash icon can fade in. The inner button (.swa-thread-item)
   keeps the existing selectable/active styling. The trash button is positioned
   absolutely inside the row and is fully customizable via .swa-thread-delete. */
.swa-root .swa-thread-row {
  position: relative;
}
.swa-root .swa-thread-delete:hover {
  color: #1f1f1e;
}
.swa-new-chat {
  background: #fff;
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--swa-text);
  padding: 10px 12px;
}
.swa-clear-btn {
  padding: 10px 12px;
}
.swa-recent-header {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
}
/* Thread items use higher .swa-root prefix specificity (0,2,1) so common theme
   button rules (Astra/Elementor `.elementor-widget-container button`, etc.) lose
   without us resorting to !important. Owner Additional CSS targeting .swa-root
   wins because it appears later in the cascade. */
.swa-root .swa-thread-item {
  background: transparent;
  color: var(--swa-text);
  font-size: 13px;
  border: none;
  box-shadow: none;
  text-shadow: none;
  border-radius: var(--swa-radius);
  padding: 8px 10px;
  line-height: 1.3;
}
.swa-root .swa-thread-item:hover {
  background: color-mix(in srgb, var(--swa-primary) 8%, #f1f5f9);
  color: var(--swa-text);
}
.swa-root .swa-thread-item.is-active {
  background: color-mix(in srgb, var(--swa-primary) 14%, #e2e8f0);
  color: var(--swa-text);
}
.swa-root .swa-thread-item:focus,
.swa-root .swa-thread-item:focus-visible {
  outline: none;
}
.swa-clear-btn {
  background: transparent;
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius);
  font-size: 12px;
  color: var(--swa-text-muted);
}

/* ── Message bubbles ─────────────────────────────────────────────────────── */

.swa-message-user .swa-bubble {
  background: #f1f5f9;
  color: var(--swa-text);
  border-radius: var(--swa-radius-lg);
  font-size: 15px;
  line-height: 1.6;
  padding: 10px 16px;
}
.swa-message-ai .swa-bubble {
  background: transparent;
  color: var(--swa-text);
  font-size: 15px;
  line-height: 1.6;
  padding: 4px 0;
}
.swa-typing {
  color: #94a3b8;
  font-size: 14px;
  padding: 8px 0;
}
.swa-error-bubble {
  padding: 10px 14px;
}
.swa-messages-scroll {
  padding: 24px 16px 8px;
}
.swa-messages-dock {
  background: var(--swa-bg);
  padding: 12px 16px 18px;
}
.swa-empty-state {
  padding: 24px 16px;
}

/* ── Launcher panel (suggestions revealed by chip click) ─────────────────── */

.swa-launcher-panel {
  background: #fff;
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius-lg);
  padding: 12px;
}
.swa-launcher-suggestion {
  background: transparent;
  color: var(--swa-text);
  font-size: 14px;
  border-radius: var(--swa-radius);
  padding: 10px 12px;
}
.swa-launcher-suggestion:hover {
  background: rgba(15, 23, 42, 0.04);
}
.swa-launcher-status {
  color: var(--swa-text-muted);
  font-size: 13px;
  padding: 8px;
}
.swa-input-card.is-compact {
  padding: 10px 12px;
  min-height: 0;
  display: flex;
  flex-direction: row;
  border-radius: var(--swa-radius-lg, 16px);
}
.swa-input-card.is-compact .swa-input {
  padding: 6px 4px;
}
/* Bottom controls row — send pinned bottom-right; margin-top:auto fills the
   card to its min-height so the button anchors at the bottom (Claude-like). */
.swa-input-card-row {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: auto;
  padding-top: 10px;
}

/* ── Icon button (sidebar/topbar circular icons) ─────────────────────────── */

.swa-root .swa-icon-btn {
  background: transparent;
  border: none;
  color: var(--swa-text-muted);
  border-radius: var(--swa-radius);
}
.swa-root .swa-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--swa-text);
}

/* ── Confirm dialog (Clear-everything modal) ─────────────────────────────── */

.swa-modal-overlay {
  background: rgba(15, 23, 42, 0.55);
}
.swa-modal-card {
  background: #fff;
  color: var(--swa-text);
  border-radius: var(--swa-radius-lg);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
}
.swa-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--swa-text);
}
.swa-modal-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--swa-text-muted);
}
.swa-btn-secondary {
  background: #fff;
  color: var(--swa-text-muted);
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius);
  font-size: 13px;
  font-weight: 600;
}
.swa-btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: var(--swa-radius);
  font-size: 13px;
  font-weight: 600;
}

/* ── Error states ────────────────────────────────────────────────────────── */

.swa-error-bubble {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--swa-radius);
  color: #b91c1c;
  font-size: 13px;
}
.swa-error-text {
  color: #b91c1c;
}

/* ── Textarea direction (reset theme RTL bleed) ──────────────────────────── */

.swa-root textarea.swa-input {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* ── Product cards (in chat + catalog grid) ──────────────────────────────── */
.swa-product-card {
  background: var(--swa-card-bg, #fff);
  border: 1px solid var(--swa-card-border, #e5e7eb);
  border-radius: var(--swa-radius, 12px);
  padding: 16px 18px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.swa-product-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
  border-color: var(--swa-primary, #7c3aed);
}
.swa-product-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.swa-product-card-title { font-size: 15px; font-weight: 700; color: var(--swa-text, #1e293b); }
.swa-product-card-price { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--swa-card-price-color, #7c3aed); }
.swa-product-card-price.is-free { color: var(--swa-card-free-color, #16a34a); }
.swa-product-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.swa-product-card-tag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--swa-text-muted, #64748b); background: var(--swa-chip-bg, #f1f5f9);
  padding: 3px 8px; border-radius: 999px;
}
.swa-product-card-excerpt { font-size: 13px; line-height: 1.55; color: var(--swa-text-muted, #64748b); margin: 10px 0 0; }
.swa-product-card-learn { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--swa-primary, #7c3aed); }

/* ── Catalog grid ([gk_catalog]) ─────────────────────────────────────────── */
.swa-catalog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.swa-catalog-filter { padding: 8px 10px; border: 1px solid var(--swa-card-border, #e5e7eb); border-radius: 8px; font-size: 14px; background: #fff; }
.swa-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.swa-catalog-learn { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--swa-primary, #7c3aed); text-decoration: none; }
.swa-catalog-learn:hover { text-decoration: underline; }

/* ── Product slide-in panel + floating action buttons ────────────────────── */
.swa-product-panel-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 100040; }
.swa-product-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--swa-bg, #fff); z-index: 100041; box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column; animation: swaPanelIn .22s ease;
}
@keyframes swaPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Sticky header: title left, close right, subtle bottom border (as before). */
.swa-panel-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--swa-bg, #fff);
  border-bottom: 1px solid var(--swa-border, #e2e8f0);
}
.swa-panel-header-title {
  font-size: 15px; font-weight: 600; color: var(--swa-text, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px;
}
.swa-panel-close {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: none;
  background: var(--swa-chip-bg, #f1f5f9); color: var(--swa-text, #1e293b); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; padding: 0; box-shadow: none;
}
.swa-panel-close:hover { background: var(--swa-border, #e2e8f0); }
.swa-panel-close span { display: block; margin-top: -2px; }

.swa-product-panel-body { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.swa-product-panel-image { width: 100%; height: 200px; border-radius: var(--swa-radius, 12px); background-size: cover; background-position: center; margin-bottom: 18px; }
.swa-product-panel-meta-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.swa-product-panel-price { font-size: 18px; font-weight: 700; color: var(--swa-card-price-color, #7c3aed); }
.swa-product-panel-price.is-free { color: var(--swa-card-free-color, #16a34a); }
.swa-product-panel-version { font-size: 13px; color: var(--swa-text-muted, #64748b); }
.swa-product-panel-excerpt { font-size: 15px; line-height: 1.7; color: var(--swa-text, #1e293b); }
.swa-panel-content { font-size: 15px; line-height: 1.7; color: var(--swa-text, #1e293b); display: block; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.swa-panel-content > * { max-width: 100%; }
.swa-panel-content > :first-child { margin-top: 0; }
.swa-panel-content img { max-width: 100%; height: auto; border-radius: 8px; }
.swa-panel-content h1, .swa-panel-content h2, .swa-panel-content h3 { color: var(--swa-text, #1e293b); }
/* Arbitrary post/page/WooCommerce HTML renders inside the panel — neutralize
   theme floats/columns/flex that would collapse a heading into one-letter-per-line. */
.swa-panel-content :where(h1, h2, h3, h4, p, div, span, ul, ol, figure) { float: none; columns: auto; writing-mode: horizontal-tb; }

/* Floating action buttons pinned to the panel's right edge, collapsed to an
   icon that expands leftward on hover. */
.swa-fab-stack { position: absolute; right: 0; top: 30%; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; z-index: 3; }
.swa-fab {
  display: flex; align-items: center; gap: 0; height: 44px; border-radius: 999px 0 0 999px;
  overflow: hidden; max-width: 44px; width: max-content; transition: max-width .28s ease;
  text-decoration: none; box-shadow: -4px 4px 16px rgba(15, 23, 42, .18); cursor: pointer;
}
.swa-fab:hover { max-width: 400px; }
.swa-fab-icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.swa-fab-label { white-space: nowrap; font-size: 14px; font-weight: 600; padding-right: 18px; }
.swa-fab-primary { background: var(--swa-primary, #7c3aed); color: #fff; }
.swa-fab-secondary { background: #fff; color: var(--swa-primary, #7c3aed); border: 1px solid var(--swa-card-border, #e5e7eb); }

/* ── In-flow onboarding (full-screen toggle OFF) ─────────────────────────── */
.swa-root-onboarding-inflow { position: relative; width: 100%; }

/* ── Bespoke GregnKemy landing (split-screen + marquee) ──────────────────── */
.swa-root-landing { font-family: var(--swa-font); }
.swa-lp { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.swa-lp-left { background: var(--swa-landing-left-bg, #ffffff); display: flex; align-items: center; justify-content: center; padding: 40px; }
.swa-lp-left-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.swa-lp-logo { max-height: 56px; max-width: 220px; margin: 0 0 32px; display: block; }
.swa-lp-headline { font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--swa-text, #1e293b); margin: 0 0 16px; font-family: var(--swa-lp-headline-font, var(--swa-font)); }
.swa-lp-subtitle { font-size: 17px; line-height: 1.6; color: var(--swa-text-muted, #64748b); margin: 0 0 32px; font-family: var(--swa-lp-subtitle-font, var(--swa-font)); }
.swa-lp-onboarding { width: 100%; }

.swa-lp-right { position: relative; background: var(--swa-landing-right-bg, #f5f3ff); overflow: hidden; display: flex; align-items: center; }
.swa-lp-rows { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.swa-lp-row { position: relative; overflow: hidden; }
.swa-lp-track { display: flex; width: max-content; will-change: transform; }
/* Two rows scroll in opposite directions. Each track holds the group twice;
   translating by exactly -50% lands copy 2 where copy 1 began — seamless, never
   cuts. transform is GPU-composited for smooth motion. */
.swa-lp-track-left  { animation: swaLpSlideL 40s linear infinite; }
.swa-lp-track-right { animation: swaLpSlideR 40s linear infinite; }
@keyframes swaLpSlideL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes swaLpSlideR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.swa-lp-group { display: flex; flex-shrink: 0; }
.swa-lp-item { display: flex; align-items: center; gap: 14px; margin: 0 11px; padding: 20px 34px; background: #fff; border: 1.5px solid var(--swa-card-border, #e6ddfb); border-radius: 18px; white-space: nowrap; box-shadow: 0 6px 18px rgba(124, 58, 237, .07); transition: background .25s, border-color .25s, box-shadow .25s; }
.swa-lp-item:hover { background: var(--swa-primary, #7c3aed); border-color: var(--swa-primary, #7c3aed); box-shadow: 0 10px 26px rgba(124, 58, 237, .30); }
.swa-lp-item-ic { width: 30px; height: 30px; flex: none; color: var(--swa-primary, #7c3aed); transition: color .25s; }
.swa-lp-item-ic svg { display: block; }
.swa-lp-item-tx { font-size: 21px; font-weight: 600; color: var(--swa-text, #2b2350); transition: color .25s; }
.swa-lp-item:hover .swa-lp-item-tx, .swa-lp-item:hover .swa-lp-item-ic { color: #fff; }
.swa-lp-fade { position: absolute; top: 0; bottom: 0; width: 110px; z-index: 3; pointer-events: none; }
.swa-lp-fade-left { left: 0; background: linear-gradient(90deg, var(--swa-landing-right-bg, #f5f3ff), rgba(245, 243, 255, 0)); }
.swa-lp-fade-right { right: 0; background: linear-gradient(270deg, var(--swa-landing-right-bg, #f5f3ff), rgba(245, 243, 255, 0)); }

/* Tablet & below: collapse to a single centered column, hide the marquee, and
   show only the onboarding. Card constrained so it never overflows. */
@media (max-width: 960px) {
  .swa-lp { grid-template-columns: 1fr; }
  .swa-lp-right { display: none; }
  .swa-lp-left { padding: 32px 20px; }
  .swa-lp-headline { font-size: 30px; }
  .swa-lp .swa-onboarding,
  .swa-lp .swa-onboarding-card { width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 520px) {
  .swa-lp-headline { font-size: 25px; }
  .swa-lp-subtitle { font-size: 15px; }
}

/* ── Inline-launcher onboarding modal (imagine.art style) ────────────────── */
/* When the inline launcher engages and onboarding is required, the onboarding
   opens as a centered, compact modal over the page — never a full-width stretch. */
.swa-onboarding-modal-overlay {
  position: fixed; inset: 0; z-index: 100050;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  animation: swaFadeIn .18s ease;
}
@keyframes swaFadeIn { from { opacity: 0; } to { opacity: 1; } }
.swa-onboarding-modal-card {
  position: relative;
  width: 100%; max-width: 440px;
  animation: swaModalPop .2s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes swaModalPop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.swa-onboarding-modal-card .swa-onboarding,
.swa-onboarding-modal-card .swa-onboarding-card { width: 100%; min-width: 0; box-sizing: border-box; }
.swa-onboarding-modal-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: none;
  background: #fff; color: var(--swa-text, #1e293b); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; box-shadow: 0 4px 14px rgba(15, 23, 42, .2);
}
.swa-onboarding-modal-close span { display: block; margin-top: -2px; }