/* SP AI Concierge — widget styles. Tokens fall back to the Sitepro dark palette when the site
   does not define --sp-* variables, so the plugin can be reused; override via :root --spc-*. */
.spc {
  --spc-ink: var(--sp-ink, #0A0A0B);
  --spc-ink-2: var(--sp-ink-2, #101013);
  --spc-ink-3: var(--sp-ink-3, #16161A);
  --spc-paper: var(--sp-paper, #F5F5F2);
  --spc-paper-dim: var(--sp-paper-dim, rgba(245,245,242,.64));
  --spc-paper-mute: var(--sp-paper-mute, rgba(245,245,242,.40));
  --spc-line: var(--sp-line, rgba(245,245,242,.14));
  --spc-line-strong: var(--sp-line-strong, rgba(245,245,242,.32));
  --spc-accent: var(--sp-coral, #FF7A59);
  --spc-accent-soft: var(--sp-coral-soft, rgba(255,122,89,.18));
  --spc-accent-glow: var(--sp-coral-glow, rgba(255,122,89,.55));
  --spc-font: var(--ff-hebrew, 'Rubik', system-ui, sans-serif);
  --spc-mono: var(--ff-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  --spc-ease: var(--ease-cinema, cubic-bezier(.2,.8,.2,1));
  --spc-shadow: var(--sp-shadow-cinema, 0 30px 80px rgba(0,0,0,.45));
  --spc-offset: 20px;
  position: fixed;
  z-index: 99990;
  bottom: var(--spc-offset);
  font-family: var(--spc-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--spc-paper);
  direction: rtl;
  opacity: 0;
  pointer-events: none;
}
.spc.is-ready { opacity: 1; pointer-events: auto; }
/* Corner placement is physical (not logical): the site is RTL but the launcher side is a setting. */
.spc--right { right: var(--spc-offset); left: auto; }
.spc--left { left: var(--spc-offset); right: auto; }
.spc--right .spc-panel, .spc--right .spc-nudge { right: 0; }
.spc--left .spc-panel, .spc--left .spc-nudge { left: 0; }
.spc--right .spc-nudge[hidden] { display: none; }
.spc .spc-nudge::after { right: 24px; }
.spc--left .spc-nudge::after { left: 24px; }
.spc *, .spc *::before, .spc *::after { box-sizing: border-box; }
.spc button, .spc a { font: inherit; cursor: pointer; text-transform: none; text-decoration: none; }
.spc button { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; line-height: inherit; }
.spc textarea { margin: 0; }
.spc .spc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* Launcher */
.spc .spc-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 18px;
  background: var(--spc-ink); color: var(--spc-paper);
  border: 1px solid var(--spc-line-strong); border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: border-color .18s var(--spc-ease), transform .36s var(--spc-ease), box-shadow .36s var(--spc-ease);
}
.spc .spc-launcher:hover { border-color: var(--spc-paper); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 0 4px var(--spc-accent-soft); }
.spc .spc-launcher:focus-visible { outline: 2px solid var(--spc-accent); outline-offset: 3px; }
.spc .spc-launcher-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--spc-accent); box-shadow: 0 0 0 0 var(--spc-accent-glow); animation: spc-pulse 2.4s infinite; }
.spc .spc-launcher-mark { font-family: var(--spc-mono); font-size: 12px; letter-spacing: .18em; color: var(--spc-paper-dim); }
.spc .spc-launcher-text { font-weight: 500; letter-spacing: -.01em; }
.spc.is-open .spc-launcher { display: none; }

/* Nudge bubble */
.spc .spc-nudge {
  position: absolute; bottom: 68px;
  display: flex; align-items: center; gap: 6px;
  max-width: 280px; padding: 6px 6px 6px 10px;
  background: var(--spc-paper); color: var(--spc-ink);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
  animation: spc-rise .5s var(--spc-ease) both;
}
.spc .spc-nudge::after { content: ""; position: absolute; bottom: -6px; width: 12px; height: 12px; background: var(--spc-paper); transform: rotate(45deg); }
.spc .spc-nudge-text { background: none; border: 0; padding: 6px 4px; color: inherit; text-align: start; font-weight: 500; }
.spc .spc-nudge-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--spc-ink); opacity: .55; font-size: 20px; line-height: 1; }
.spc .spc-nudge-close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* Panel */
.spc .spc-panel {
  position: absolute; bottom: 0; min-height: 0; margin: 0; padding: 0;
  width: 400px; height: min(660px, calc(100dvh - 40px));
  display: flex; flex-direction: column;
  background: var(--spc-ink-2); color: var(--spc-paper);
  border: 1px solid var(--spc-line); border-radius: 12px;
  box-shadow: var(--spc-shadow);
  overflow: hidden;
  transform-origin: bottom var(--spc-origin, right);
  animation: spc-open .42s var(--spc-ease) both;
}
.spc--left .spc-panel { --spc-origin: left; }
.spc .spc-panel[hidden] { display: none; }

.spc .spc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--spc-line); background: var(--spc-ink); }
.spc .spc-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spc .spc-eyebrow { font-family: var(--spc-font); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--spc-paper-mute); }
.spc .spc-title { margin: 0; font: 600 17px/1.2 var(--spc-font); letter-spacing: -.01em; color: var(--spc-paper); display: flex; align-items: center; gap: 8px; }
.spc .spc-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spc-accent); box-shadow: 0 0 10px var(--spc-accent-glow); }
.spc .spc-head-actions { display: flex; gap: 4px; }
.spc .spc-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--spc-paper-dim); transition: color .18s, border-color .18s, background .18s; }
.spc .spc-icon-btn:hover { color: var(--spc-paper); border-color: var(--spc-line-strong); }
.spc .spc-icon-btn:focus-visible { outline: 2px solid var(--spc-accent); outline-offset: 2px; }

.spc .spc-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 8px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--spc-line-strong) transparent; }
.spc .spc-body::-webkit-scrollbar { width: 6px; }
.spc .spc-body::-webkit-scrollbar-thumb { background: var(--spc-line-strong); border-radius: 3px; }

.spc .spc-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; animation: spc-msg .32s var(--spc-ease) both; }
.spc .spc-msg { max-width: 86%; padding: 11px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; word-wrap: break-word; animation: spc-msg .32s var(--spc-ease) both; }
.no-anim, .no-anim .spc-msg, .no-anim.spc-msg { animation: none; }
.spc .spc-msg--bot { align-self: flex-start; background: var(--spc-ink-3); border: 1px solid var(--spc-line); border-start-end-radius: 3px; }
.spc .spc-msg--user { align-self: flex-end; margin: 0 0 14px auto; background: var(--spc-paper); color: var(--spc-ink); border-start-start-radius: 3px; }
.spc .spc-msg--error { align-self: center; margin-bottom: 14px; background: transparent; border: 1px dashed var(--spc-line-strong); color: var(--spc-paper-dim); font-size: 13px; }
.spc .spc-msg a { color: var(--spc-accent); }

.spc .spc-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.spc .spc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--spc-line-strong); background: transparent; color: var(--spc-paper);
  font-size: 13.5px; line-height: 1.2; text-decoration: none;
  transition: border-color .18s, color .18s, background .18s, transform .18s var(--spc-ease);
}
.spc .spc-chip:hover, .spc .spc-chip:focus-visible { border-color: var(--spc-accent); color: var(--spc-accent); background: var(--spc-accent-soft); transform: translateY(-1px); outline: none; }
.spc .spc-chip:focus-visible { box-shadow: 0 0 0 2px var(--spc-accent-soft); }
.spc .spc-chip--link::after { content: "←"; font-size: 12px; opacity: .8; }
.spc .spc-chips.is-used { opacity: .4; pointer-events: none; }

.spc .spc-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; margin-bottom: 14px; }
.spc .spc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--spc-accent); opacity: .5; animation: spc-dots 1.1s infinite; }
.spc .spc-typing span:nth-child(2) { animation-delay: .18s; }
.spc .spc-typing span:nth-child(3) { animation-delay: .36s; }

.spc .spc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--spc-line); background: var(--spc-ink); }
.spc .spc-input {
  flex: 1 1 auto; min-height: 42px; max-height: 120px; padding: 10px 12px; resize: none;
  background: var(--spc-ink-3); color: var(--spc-paper);
  border: 1px solid var(--spc-line); border-radius: 10px;
  font: inherit; font-size: 15px; line-height: 1.4; direction: rtl;
  transition: border-color .18s;
}
.spc .spc-input::placeholder { color: var(--spc-paper-mute); }
.spc .spc-input:focus { outline: none; border-color: var(--spc-line-strong); box-shadow: 0 0 0 3px var(--spc-accent-soft); }
.spc .spc-send { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--spc-paper); color: var(--spc-ink); transition: background .18s, transform .18s var(--spc-ease); }
.spc .spc-send:hover { background: var(--spc-accent); color: var(--spc-ink); }
.spc .spc-send:disabled { opacity: .45; cursor: default; }
.spc .spc-send:focus-visible { outline: 2px solid var(--spc-accent); outline-offset: 2px; }
.spc .spc-foot { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0 16px 10px; font-size: 11px; color: var(--spc-paper-mute); background: var(--spc-ink); }
.spc .spc-foot a { color: var(--spc-paper-dim); text-decoration: underline; }

/* Mobile: full-height sheet */
@media (max-width: 640px) {
  .spc { --spc-offset: 16px; }
  .spc .spc-launcher { height: 54px; padding: 0 18px 0 16px; }
  .spc .spc-nudge { max-width: min(280px, calc(100vw - 32px)); }
  .spc.is-open { inset: 0; bottom: 0; right: 0; left: 0; z-index: 1000001; } /* above the accessibility/consent buttons while the sheet is open */
  .spc .spc-panel { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; animation: spc-sheet .36s var(--spc-ease) both; }
  .spc .spc-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .spc .spc-form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .spc .spc-msg { max-width: 90%; }
}

@keyframes spc-open { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spc-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes spc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spc-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spc-dots { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes spc-pulse { 0% { box-shadow: 0 0 0 0 var(--spc-accent-glow); } 70% { box-shadow: 0 0 0 8px rgba(255,122,89,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } }

@media (prefers-reduced-motion: reduce) {
  .spc .spc-panel, .spc .spc-nudge, .spc .spc-msg, .spc .spc-group, .spc .spc-typing span { animation: none !important; }
  .spc .spc-launcher-dot { animation: none; }
  .spc .spc-launcher, .spc .spc-chip, .spc .spc-send { transition: none; }
  .spc .spc-body { scroll-behavior: auto; }
}

@media print { .spc { display: none !important; } }

/* Inline lead form + "sent" note (1.1.0) */
.spc .spc-msg--ok { align-self: center; margin: -4px 0 14px; padding: 6px 12px; background: var(--spc-accent-soft); border: 1px solid var(--spc-accent); color: var(--spc-paper); font-size: 13px; border-radius: 999px; }
.spc .spc-msg--ok::before { content: "✓ "; color: var(--spc-accent); }
.spc .spc-chip--form { border-color: var(--spc-accent); color: var(--spc-accent); }
.spc .spc-leadform { display: flex; flex-direction: column; gap: 8px; max-width: 86%; margin: -6px 0 14px; padding: 14px; background: var(--spc-ink-3); border: 1px solid var(--spc-line-strong); border-radius: 12px; animation: spc-msg .32s var(--spc-ease) both; }
.spc .spc-leadform-title { font-size: 13px; color: var(--spc-paper-dim); }
.spc .spc-leadform-input { width: 100%; min-height: 40px; padding: 8px 12px; background: var(--spc-ink); color: var(--spc-paper); border: 1px solid var(--spc-line); border-radius: 8px; font: inherit; font-size: 15px; }
.spc .spc-leadform-input::placeholder { color: var(--spc-paper-mute); }
.spc .spc-leadform-input:focus { outline: none; border-color: var(--spc-line-strong); box-shadow: 0 0 0 3px var(--spc-accent-soft); }
.spc .spc-leadform-error { font-size: 12.5px; color: var(--spc-accent); }
.spc .spc-leadform-error[hidden] { display: none; }
.spc .spc-leadform-send { min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--spc-paper); color: var(--spc-ink); font-weight: 500; transition: background .18s; }
.spc .spc-leadform-send:hover { background: var(--spc-accent); }
.spc .spc-leadform-send:disabled { opacity: .5; cursor: default; }