/*
 * 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: var(--swa-radius-lg);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  padding: 14px 16px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.swa-input {
  background: transparent;
  color: var(--swa-text);
  font-size: 16px;
  line-height: 1.55;
}
.swa-send {
  border-radius: 999px;     /* deliberate exception: send button stays a circular icon */
  color: #fff;
  background: var(--swa-primary);
  transition: background 0.15s;
}
.swa-send:disabled,
.swa-send.is-disabled {
  background: #e5e7eb;
}

/* ── 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(26px, 4vw, 38px);
  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;
}
.swa-topbar.has-border {
  border-bottom: 1px solid #f1f5f9;
}
.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;
}
.swa-input-card.is-compact .swa-input {
  padding: 6px 4px;
}

/* ── 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; }

/* ── 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); } }
.swa-product-panel-close {
  position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 999px;
  border: none; background: rgba(15, 23, 42, .06); color: var(--swa-text, #1e293b);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.swa-product-panel-close:hover { background: rgba(15, 23, 42, .12); }
.swa-product-panel-body { flex: 1; overflow-y: auto; padding: 56px 28px 40px; }
.swa-product-panel-image { width: 100%; height: 200px; border-radius: var(--swa-radius, 12px); background-size: cover; background-position: center; margin-bottom: 20px; }
.swa-product-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.swa-product-panel-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--swa-text, #1e293b); line-height: 1.2; }
.swa-product-panel-price { font-size: 17px; font-weight: 700; white-space: nowrap; color: var(--swa-card-price-color, #7c3aed); }
.swa-product-panel-price.is-free { color: var(--swa-card-free-color, #16a34a); }
.swa-product-panel-excerpt { font-size: 15px; line-height: 1.7; color: var(--swa-text, #1e293b); }
.swa-product-panel-meta { font-size: 13px; color: var(--swa-text-muted, #64748b); margin-top: 14px; }
.swa-product-panel-permalink { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--swa-primary, #7c3aed); }

/* 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%; }