/* ==========================================================================
   ReplyFlow Chat Widget – Premium Styling
   ========================================================================== */

/* --------- Design tokens ------------------------------------------------- */
:root {
  --brand-primary: #1e293b;
  --brand-primary-hover: #0f172a;
  --brand-accent: #4f46e5;

  --bg: #eef2f8;
  --panel: #ffffff;
  --text: #1a2540;
  --subtle: #5c6f8a;
  --border: #dde5f0;

  --radius: 1.1rem;
  --radius-sm: 0.85rem;

  --shadow: 0 24px 56px -10px rgb(0 0 0 / 0.2), 0 8px 24px -6px rgb(0 0 0 / 0.1);
  --shadow-soft: 0 2px 8px -1px rgb(0 0 0 / 0.08), 0 1px 3px -1px rgb(0 0 0 / 0.05);
  --shadow-card: 0 4px 16px -3px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.05);

  --psc-widget-width: 520px;
  --psc-offset-right: 24px;
  --psc-offset-left: 24px;
  --psc-offset-bottom: 24px;
  --psc-launcher-size: 60px;
  --psc-gap: 14px;
}

/* --------- Container ----------------------------------------------------- */
.psc-widget-container {
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --------- Chat window position ------------------------------------------ */
.psc-chatbot {
  width: var(--psc-widget-width);
  max-width: var(--psc-widget-width);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(var(--psc-offset-right), env(safe-area-inset-right)) !important;
  bottom: calc(
    max(var(--psc-offset-bottom), env(safe-area-inset-bottom))
    + var(--psc-launcher-size) + var(--psc-gap)
  ) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483642 !important;
  animation: psc-slide-up .38s cubic-bezier(0.16, 1, 0.3, 1);
}

.psc-widget-container[data-pos="left"] .psc-chatbot {
  left: max(var(--psc-offset-left, 16px), env(safe-area-inset-left)) !important;
  right: auto !important;
}
.psc-widget-container[data-pos="left"] .psc-launcher-button {
  left: max(var(--psc-offset-left, 16px), env(safe-area-inset-left)) !important;
  right: auto !important;
}
.psc-widget-container[data-pos="left"] .psc-launcher-label {
  left: calc(max(var(--psc-offset-left, 16px), env(safe-area-inset-left)) + var(--psc-launcher-size) + 16px) !important;
  right: auto !important;
  transform: none;
}
.psc-widget-container[data-pos="left"] .psc-launcher-label .psc-label-arrow {
  left: -6px;
  right: auto;
  transform: rotate(180deg);
}

.psc-chat-window {
  position: relative; /* needed for lead overlay */
  background: var(--panel);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(640px, 72vh);
}

/* --------- Header -------------------------------------------------------- */
.psc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: var(--brand-primary);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Subtle gloss overlay */
.psc-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.psc-header-avatar { position: relative; flex-shrink: 0; }

.psc-avatar-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.2);
}

/* Header logo / bot avatar image — overrides PHP-injected background */
.psc-header-logo {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.psc-header-logo img { width: 100%; height: 100%; object-fit: cover; }

.psc-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  animation: psc-status-pulse 2.8s ease-in-out infinite;
}

@keyframes psc-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  60%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.psc-header-text { flex: 1; min-width: 0; }
.psc-header-text .psc-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.psc-header-text .psc-subtitle {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* --------- Header reset button ------------------------------------------- */
.psc-reset-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  padding: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}
.psc-reset-btn:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.15);
}

/* --------- Messages area ------------------------------------------------- */
.psc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.psc-messages::-webkit-scrollbar { width: 4px; }
.psc-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.psc-messages::-webkit-scrollbar-track { background: transparent; }

/* Individual message */
.psc-message {
  display: flex;
  margin-bottom: 14px;
  max-width: 88%;
  animation: psc-msg-in .22s ease-out;
}
.psc-message.bot  { gap: 10px; align-items: flex-end; margin-right: auto; }
.psc-message.user { margin-left: auto; justify-content: flex-end; }

@keyframes psc-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bot avatar circle */
.psc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.psc-avatar svg { width: 16px; height: 16px; }

/* Bubbles */
.psc-text-bubble {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.68;
}

.psc-message.bot .psc-text-bubble {
  background: var(--panel);
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-soft);
}

.psc-message.user .psc-text-bubble {
  background: var(--brand-primary);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 10px -1px rgba(0,0,0,0.22);
}

.psc-text { min-height: 21px; }

/* --------- Typing indicator (3 dots) ------------------------------------ */
.psc-typing-dots {
  display: none;
  gap: 5px;
  align-items: center;
  padding: 2px 0 4px;
}
.psc-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  animation: psc-dot 1.3s infinite ease-in-out;
}
.psc-typing-dots span:nth-child(2) { animation-delay: .18s; }
.psc-typing-dots span:nth-child(3) { animation-delay: .36s; }
.psc-message.bot.typing .psc-typing-dots { display: flex; }
/* Hide timestamp while still typing */
.psc-message.bot.typing .psc-msg-time   { display: none; }

@keyframes psc-dot {
  0%, 80%, 100% { transform: scale(.55); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* --------- Message timestamps -------------------------------------------- */
.psc-msg-time {
  display: block;
  font-size: 10px;
  color: rgba(100, 116, 139, 0.65);
  margin-top: 5px;
  line-height: 1;
  user-select: none;
}
.psc-message.bot  .psc-msg-time { text-align: left; }
.psc-message.user .psc-msg-time { text-align: right; color: rgba(255,255,255,0.55); }

/* --------- Input bar ----------------------------------------------------- */
.psc-inputbar {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.psc-inputbar input {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.psc-inputbar input::placeholder { color: #94a3b8; }
.psc-inputbar input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
  background: var(--panel);
}

.psc-inputbar .psc-send {
  padding: 0;
  width: 42px;
  height: 42px;
  border: none;
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.psc-inputbar .psc-send:hover  { background: var(--brand-primary-hover); transform: scale(1.04); }
.psc-inputbar .psc-send:active { transform: scale(0.97); }

/* --------- Branding footer ----------------------------------------------- */
.psc-branding {
  text-align: center;
  font-size: 10px;
  color: #94a3b8;
  padding: 6px 12px;
  background: var(--panel);
  letter-spacing: 0.03em;
}
.psc-branding a { color: #94a3b8; text-decoration: none; }
.psc-branding a:hover { color: var(--subtle); text-decoration: underline; }

/* --------- CSAT ---------------------------------------------------------- */
.psc-message .psc-csat { display: flex; gap: 8px; margin-top: 10px; }
.psc-csat button {
  border: 1.5px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.psc-csat button:hover { border-color: var(--brand-primary); transform: scale(1.1); }

/* --------- Sources ------------------------------------------------------- */
.psc-message .psc-sources {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--subtle);
}
.psc-sources a { text-decoration: underline; color: var(--brand-accent); }

/* --------- Launcher button ----------------------------------------------- */
.psc-launcher-button {
  position: fixed !important;
  right: max(var(--psc-offset-right), env(safe-area-inset-right)) !important;
  bottom: max(var(--psc-offset-bottom), env(safe-area-inset-bottom)) !important;
  z-index: 2147483643 !important;
  width: var(--psc-launcher-size);
  height: var(--psc-launcher-size);
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .2s;
}

/* Subtle pulse glow when chat is closed */
.psc-launcher-button:not(.psc-launcher-open) {
  animation: psc-launcher-glow 3.5s ease-in-out infinite;
}

@keyframes psc-launcher-glow {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(255,255,255,0); }
  55%       { box-shadow: var(--shadow), 0 0 0 8px rgba(255,255,255,0.1); }
}

.psc-launcher-button:hover { transform: scale(1.1); }
.psc-launcher-button.psc-launcher-open {
  background: var(--panel);
  color: var(--text);
  border: 1.5px solid var(--border);
  animation: none;
}
.psc-launcher-button svg { width: 28px; height: 28px; }

/* --------- Animations & Accessibility ------------------------------------ */
@keyframes psc-slide-up {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.psc-chatbot *:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.2);
  border-radius: 8px;
}

/* --------- Dark Theme ---------------------------------------------------- */
/*
  Premium dark palette — warm charcoal (not cold navy):
  Three surface levels: bg < panel < bubble, all clearly distinguishable.
*/
.psc-widget-container[data-theme="dark"] {
  --bg: #12151e;
  --panel: #1b2036;
  --text: #dce8f8;
  --subtle: #8fa5c0;
  --border: rgba(255, 255, 255, 0.09);
  --brand-accent: #818cf8;
  --shadow: 0 28px 60px -10px rgb(0 0 0 / 0.55), 0 10px 28px -6px rgb(0 0 0 / 0.35);
  --shadow-soft: 0 2px 12px -2px rgb(0 0 0 / 0.45);
  --shadow-card: 0 6px 24px -4px rgb(0 0 0 / 0.4);
}
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] {
    --bg: #12151e;
    --panel: #1b2036;
    --text: #dce8f8;
    --subtle: #8fa5c0;
    --border: rgba(255, 255, 255, 0.09);
    --brand-accent: #818cf8;
    --shadow: 0 28px 60px -10px rgb(0 0 0 / 0.55), 0 10px 28px -6px rgb(0 0 0 / 0.35);
    --shadow-soft: 0 2px 12px -2px rgb(0 0 0 / 0.45);
    --shadow-card: 0 6px 24px -4px rgb(0 0 0 / 0.4);
  }
}

/* Bot bubble: elevated surface, clearly different from bg and panel */
.psc-widget-container[data-theme="dark"] .psc-message.bot .psc-text-bubble {
  background: #202d4a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-message.bot .psc-text-bubble {
    background: #202d4a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: var(--text);
  }
}

/* User bubble: keep brand-primary so custom colors work in dark mode too */
.psc-widget-container[data-theme="dark"] .psc-message.user .psc-text-bubble { color: #fff; }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-message.user .psc-text-bubble { color: #fff; }
}

/* Input */
.psc-widget-container[data-theme="dark"] .psc-inputbar { background: #1b2036; border-top-color: rgba(255,255,255,0.07); }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-inputbar { background: #1b2036; border-top-color: rgba(255,255,255,0.07); }
}

.psc-widget-container[data-theme="dark"] .psc-inputbar input,
.psc-widget-container[data-theme="dark"] .psc-inputbar textarea { background: #12151e; color: var(--text); border-color: rgba(255,255,255,0.14); }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-inputbar input,
  .psc-widget-container[data-theme="auto"] .psc-inputbar textarea { background: #12151e; color: var(--text); border-color: rgba(255,255,255,0.14); }
}

/* Chat window border */
.psc-widget-container[data-theme="dark"] .psc-chat-window { border-color: rgba(255,255,255,0.06); }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-chat-window { border-color: rgba(255,255,255,0.06); }
}

/* Scrollbar */
.psc-widget-container[data-theme="dark"] .psc-messages::-webkit-scrollbar-thumb { background: #2c3d5e; }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-messages::-webkit-scrollbar-thumb { background: #2c3d5e; }
}

/* List items: use text color (not subtle) for readability in dark mode */
.psc-widget-container[data-theme="dark"] .psc-text li { color: var(--text); opacity: 0.85; }
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-text li { color: var(--text); opacity: 0.85; }
}

/* --------- Responsive ---------------------------------------------------- */
@media (min-width: 1280px) { :root { --psc-widget-width: 560px; } }

@media (max-width: 480px) {
  :root { --psc-widget-width: 100vw; }
  .psc-chatbot {
    right: max(8px, env(safe-area-inset-right)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: auto !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--psc-launcher-size) + var(--psc-gap)) !important;
  }
  .psc-messages { height: 65vh; }
}

/* --------- Product slider ------------------------------------------------ */
.psc-product-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 16px 4px;
  margin-top: 8px;
  width: 100%;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.psc-product-slider::-webkit-scrollbar { height: 4px; }
.psc-product-slider::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.psc-slider-card {
  flex: 0 0 auto;
  width: 175px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.psc-slider-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(0,0,0,0.15);
}

.psc-card-image {
  height: 120px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.psc-card-image img { width: 100%; height: 100%; object-fit: cover; }
.psc-card-image svg { stroke: #94a3b8; }

.psc-card-content {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
}

.psc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.psc-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-accent);
}

.psc-btn-select {
  margin-top: auto;
  display: block;
  text-align: center;
  background: var(--brand-primary);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  transition: background .2s, transform .15s;
}
.psc-btn-select:hover {
  background: var(--brand-primary-hover);
  transform: scale(1.01);
}

/* Wrapper tekst + slider */
.psc-msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

/* --------- Tabs (FAQ) ---------------------------------------------------- */
.psc-tabs {
  display: flex;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.psc-tab {
  flex: 1;
  text-align: center;
  padding: 11px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--subtle);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.psc-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* --------- FAQ view ------------------------------------------------------ */
#psc-view-faq {
  flex: 1;
  overflow-y: auto;
  background: var(--panel);
}

/* --------- FAQ rows ------------------------------------------------------ */
.psc-faq-row {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  transition: background .15s;
}
.psc-faq-row:hover { background: var(--bg); }
.psc-faq-row:last-child { border-bottom: none; }
.psc-faq-arrow { color: var(--subtle); font-size: 16px; flex-shrink: 0; }
.psc-faq-empty { padding: 20px; text-align: center; color: var(--subtle); }

/* --------- Launcher label (CTA) ------------------------------------------ */
.psc-launcher-label {
  position: fixed !important;
  right: calc(max(var(--psc-offset-right), env(safe-area-inset-right)) + var(--psc-launcher-size) + 16px) !important;
  bottom: calc(max(var(--psc-offset-bottom), env(safe-area-inset-bottom)) + (var(--psc-launcher-size) / 2) - 20px) !important;
  z-index: 2147483643 !important;
  background: var(--panel);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: right center;
}
.psc-launcher-label .psc-label-arrow {
  position: absolute;
  top: 50%;
  right: -6px;
  margin-top: -6px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--panel);
}
.psc-launcher-label:hover { transform: translateX(-2px); }
.psc-launcher-button.psc-launcher-open + .psc-launcher-label {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px) scale(0.9);
  pointer-events: none;
}
@media (max-width: 400px) { .psc-launcher-label { display: none !important; } }

/* --------- Rich text formatting ------------------------------------------ */
.psc-text {
  line-height: 1.7;
  font-size: 14px;
  color: var(--text);
}
.psc-text p { margin: 0 0 10px; }
.psc-text p:last-child { margin: 0; }

.psc-text ul { margin: 12px 0; padding-left: 0; list-style: none; }
.psc-text li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--text);
  opacity: 0.82;
}
.psc-text li::before {
  content: "•";
  position: absolute;
  left: 6px;
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
.psc-text strong { font-weight: 700; color: var(--text); }

/* User message text overrides */
.psc-message.user .psc-text { color: #ffffff !important; }
.psc-message.user .psc-text li { color: rgba(255,255,255,0.88); }
.psc-message.user .psc-text li::before { color: rgba(255,255,255,0.65); }
.psc-message.user .psc-text strong { color: #ffffff; }

/* ---- GDPR notice --------------------------------------------------------- */
.psc-gdpr-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(79, 70, 229, 0.08);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--subtle);
  line-height: 1.4;
}
.psc-gdpr-notice span { flex: 1; }
.psc-gdpr-ok {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--subtle);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.psc-gdpr-ok:hover { background: var(--border); }

/* ---- Lead capture overlay ------------------------------------------------ */
.psc-lead-overlay {
  position: absolute;
  inset: 0;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
  padding: 24px;
}
.psc-lead-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.psc-lead-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.psc-lead-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.psc-lead-input {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s;
  outline: none;
}
.psc-lead-input:focus { border-color: var(--brand-primary); }
.psc-lead-submit {
  padding: 11px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.psc-lead-submit:hover { opacity: 0.88; }
.psc-lead-skip {
  background: none;
  border: none;
  color: var(--subtle);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ---- Human handover CTA -------------------------------------------------- */
.psc-handover-cta {
  margin-top: 10px;
}
.psc-handover-btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--brand-primary);
  color: #fff !important;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.psc-handover-btn:hover { opacity: 0.85; }

/* Dark mode overrides for new elements */
.psc-widget-container[data-theme="dark"] .psc-gdpr-notice {
  background: rgba(255,255,255,0.04);
  border-top-color: rgba(255,255,255,0.08);
}
.psc-widget-container[data-theme="dark"] .psc-lead-overlay { background: var(--panel); }
.psc-widget-container[data-theme="dark"] .psc-lead-input {
  background: var(--bg);
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-gdpr-notice {
    background: rgba(255,255,255,0.04);
    border-top-color: rgba(255,255,255,0.08);
  }
  .psc-widget-container[data-theme="auto"] .psc-lead-overlay { background: var(--panel); }
  .psc-widget-container[data-theme="auto"] .psc-lead-input {
    background: var(--bg);
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
  }
}

/* --------- Conversation Starters (Sprint 6) ------------------------------ */
.psc-starters {
  padding: 4px 14px 14px;
}

.psc-starters-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 8px;
  letter-spacing: .02em;
}

.psc-starters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.psc-starter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  border-radius: 100px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--brand-primary);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.3;
  white-space: nowrap;
}

.psc-starter-btn::before {
  content: "↗";
  font-size: 11px;
  opacity: .7;
  flex-shrink: 0;
}

.psc-starter-btn:hover {
  background: var(--brand-primary);
  color: #fff;
}

.psc-widget-container[data-theme="dark"] .psc-starter-btn {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.psc-widget-container[data-theme="dark"] .psc-starter-btn:hover {
  background: var(--brand-accent);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-starter-btn {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
  }
  .psc-widget-container[data-theme="auto"] .psc-starter-btn:hover {
    background: var(--brand-accent);
    color: #fff;
  }
}

/* --------- Quick Replies (Sprint 5) -------------------------------------- */
.psc-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.psc-quick-reply {
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  color: var(--brand-primary);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.5;
}
.psc-quick-reply:hover {
  background: var(--brand-primary);
  color: #fff;
}

.psc-widget-container[data-theme="dark"] .psc-quick-reply {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.psc-widget-container[data-theme="dark"] .psc-quick-reply:hover {
  background: var(--brand-accent);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-quick-reply {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
  }
  .psc-widget-container[data-theme="auto"] .psc-quick-reply:hover {
    background: var(--brand-accent);
    color: #fff;
  }
}

/* --------- Proactive bounce animation (Sprint 5) ------------------------- */
@keyframes psc-bounce {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.18); }
  60%       { transform: scale(0.94); }
}
.psc-launcher-bounce {
  animation: psc-bounce .7s ease-in-out;
}

/* --------- Input wrap + textarea (C3) ------------------------------------ */
.psc-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.psc-inputbar textarea[name="msg"] {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;
  min-height: 42px;
  max-height: 120px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.psc-inputbar textarea[name="msg"]::placeholder { color: #94a3b8; }
.psc-inputbar textarea[name="msg"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
  background: var(--panel);
  overflow-y: auto;
}

/* --------- Char counter (C4) --------------------------------------------- */
.psc-char-count {
  font-size: 10px;
  color: var(--subtle);
  text-align: right;
  padding: 2px 4px 0;
  line-height: 1;
  user-select: none;
  min-height: 1em;
}
.psc-char-count.psc-char-warn { color: #ef4444; font-weight: 600; }

/* --------- Scroll-to-bottom button (C2) ---------------------------------- */
.psc-scroll-btn {
  display: none; /* shown via JS as display:flex */
  position: absolute;
  bottom: 76px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--subtle);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.psc-scroll-btn:hover { background: var(--bg); }

/* --------- Offline banner (C6) ------------------------------------------- */
.psc-offline-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  font-size: 12px;
  color: #b91c1c;
  flex-shrink: 0;
}
.psc-offline-banner.psc-offline-visible { display: flex; }

/* --------- Bubble footer: timestamp + copy (C7 + C8) --------------------- */
.psc-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}
.psc-bubble-footer .psc-msg-time { margin-top: 0; }

.psc-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(100, 116, 139, 0.5);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.psc-copy-btn:hover { color: var(--subtle); background: rgba(0, 0, 0, 0.05); }
.psc-copy-btn.psc-copied { color: #22c55e; }

/* --------- Sprint C dark mode overrides ---------------------------------- */
.psc-widget-container[data-theme="dark"] .psc-offline-banner {
  background: rgba(239, 68, 68, 0.12);
  border-bottom-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
.psc-widget-container[data-theme="dark"] .psc-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.psc-widget-container[data-theme="dark"] .psc-scroll-btn {
  background: #202d4a;
  border-color: rgba(255,255,255,0.1);
}
.psc-widget-container[data-theme="dark"] .psc-scroll-btn:hover { background: #263452; }

@media (prefers-color-scheme: dark) {
  .psc-widget-container[data-theme="auto"] .psc-offline-banner {
    background: rgba(239, 68, 68, 0.12);
    border-bottom-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
  }
  .psc-widget-container[data-theme="auto"] .psc-copy-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .psc-widget-container[data-theme="auto"] .psc-scroll-btn {
    background: #202d4a;
    border-color: rgba(255,255,255,0.1);
  }
  .psc-widget-container[data-theme="auto"] .psc-scroll-btn:hover { background: #263452; }
}