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

/* 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; }
.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; }
.swa-lp-cols { display: flex; gap: 18px; padding: 0 22px; height: 100%; }
.swa-lp-col { flex: 1; position: relative; overflow: hidden; }
.swa-lp-track { display: flex; flex-direction: column; gap: 18px; position: absolute; left: 0; right: 0; top: 0; will-change: transform; --swa-lp-dist: 50%; }
/* Seamless loop: two identical copies stacked; translate by exactly the height
   of one copy (measured in JS into --swa-lp-dist) so the reset is invisible.
   transform is GPU-composited for smooth motion that never stops. */
.swa-lp-up  { animation: swaLpScroll 30s linear infinite; }
.swa-lp-down{ animation: swaLpScroll 34s linear infinite reverse; }
.swa-lp-up2 { animation: swaLpScroll 38s linear infinite; }
@keyframes swaLpScroll { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--swa-lp-dist))); } }
.swa-lp-pill { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--swa-card-border, #e6ddfb); border-radius: 16px; padding: 16px 20px; box-shadow: 0 6px 18px rgba(124, 58, 237, .08); }
.swa-lp-pill-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--swa-chip-bg, #ede9fe); display: flex; align-items: center; justify-content: center; flex: none; }
.swa-lp-pill-ic i { font-size: 21px; color: var(--swa-primary, #7c3aed); }
.swa-lp-pill-tx { display: block; font-size: 16px; font-weight: 600; color: var(--swa-text, #2b2350); white-space: nowrap; }
.swa-lp-pill-sub { display: block; font-size: 12px; color: var(--swa-text-muted, #9a8fc0); white-space: nowrap; }
.swa-lp-fade { position: absolute; left: 0; right: 0; height: 90px; z-index: 3; pointer-events: none; }
.swa-lp-fade-top { top: 0; background: linear-gradient(var(--swa-landing-right-bg, #f5f3ff), rgba(245, 243, 255, 0)); }
.swa-lp-fade-bottom { bottom: 0; background: linear-gradient(rgba(245, 243, 255, 0), var(--swa-landing-right-bg, #f5f3ff)); }

/* Single column on narrow screens: hide the marquee, center the onboarding. */
@media (max-width: 860px) {
  .swa-lp { grid-template-columns: 1fr; }
  .swa-lp-right { display: none; }
  .swa-lp-headline { font-size: 32px; }
}