/* ═══════════════════════════════════════════════════════════════
   spa-chat.css — Opti360
   Conversational chatbot widget for spa.html
   All selectors scoped under .spc-wrap to avoid polluting other pages.
   Palette: cream #FAF7F2 | gold #C9A96E | rose #D4A0A0 | dark #3A2A1F
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────── */
.spc-wrap {
  max-width: 640px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

/* Phone shell */
.spc-shell {
  background: #081626;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(41,168,224,.15),
    0 8px 32px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  max-height: 640px;
  position: relative;
}

/* ── Header bar ─────────────────────────────────────────────── */
.spc-header {
  background: linear-gradient(135deg, #1A3A5C 0%, #29A8E0 100%);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.spc-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.spc-header__info {
  flex: 1;
}

.spc-header__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  letter-spacing: 0.01em;
}

.spc-header__status {
  font-size: 0.72rem;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1px;
}

.spc-header__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A8E6CF;
  display: inline-block;
}

/* ── Message feed ───────────────────────────────────────────── */
.spc-feed {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #040d1e;
  scroll-behavior: smooth;
}

.spc-feed::-webkit-scrollbar { width: 4px; }
.spc-feed::-webkit-scrollbar-track { background: transparent; }
.spc-feed::-webkit-scrollbar-thumb {
  background: rgba(41,168,224,.25);
  border-radius: 2px;
}

/* ── Message bubbles ────────────────────────────────────────── */
.spc-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 88%;
  opacity: 0;
  transform: translateY(8px);
  animation: spcMsgIn 0.28s ease forwards;
}

@keyframes spcMsgIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Bot message — left-aligned */
.spc-msg--bot {
  align-self: flex-start;
}

.spc-msg__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2470A9, #29A8E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.spc-bubble {
  padding: 0.65rem 0.9rem;
  border-radius: 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #eef4ff;
}

.spc-msg--bot .spc-bubble {
  background: #0d1f38;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(41,168,224,.12);
}

/* User message — right-aligned */
.spc-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.spc-msg--user .spc-bubble {
  background: linear-gradient(135deg, #2470A9 0%, #29A8E0 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(41,168,224,.3);
}

/* ── Typing indicator ───────────────────────────────────────── */
.spc-typing {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
  animation: spcMsgIn 0.22s ease forwards;
}

.spc-typing .spc-bubble {
  background: #0d1f38;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(41,168,224,.12);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.7rem 0.9rem;
}

.spc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4DC8F0;
  animation: spcDotBounce 1.1s ease-in-out infinite;
}
.spc-dot:nth-child(2) { animation-delay: 0.18s; }
.spc-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes spcDotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Input area ─────────────────────────────────────────────── */
.spc-input-area {
  padding: 0.75rem 1rem;
  background: #081626;
  border-top: 1px solid rgba(41,168,224,.12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Option buttons grid */
.spc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.spc-opt-btn {
  padding: 0.5rem 0.85rem;
  border-radius: 20px;
  border: 1.5px solid #29A8E0;
  background: transparent;
  color: #85DAFA;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  font-family: inherit;
}

.spc-opt-btn:hover,
.spc-opt-btn:focus {
  background: #29A8E0;
  color: #fff;
  outline: none;
}

.spc-opt-btn:active { transform: scale(0.96); }

/* Text input row */
.spc-text-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.spc-text-input {
  flex: 1;
  border: 1.5px solid rgba(41,168,224,.25);
  border-radius: 22px;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: #eef4ff;
  background: #0d1f38;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.spc-text-input::placeholder { color: #5a7090; }

.spc-text-input:focus {
  border-color: #29A8E0;
  box-shadow: 0 0 0 3px rgba(41,168,224,.12);
}

.spc-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2470A9, #29A8E0);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.18s, transform 0.12s;
  font-size: 1rem;
}

.spc-send-btn:hover { opacity: 0.88; }
.spc-send-btn:active { transform: scale(0.92); }
.spc-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Confirmation card ──────────────────────────────────────── */
.spc-confirm-card {
  background: rgba(13,31,56,.8);
  border: 1px solid rgba(41,168,224,.22);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin: 0.25rem 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #eef4ff;
  width: 100%;
}

.spc-confirm-card__title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #85DAFA;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.spc-confirm-card__row {
  display: flex;
  gap: 0.4rem;
}

.spc-confirm-card__label {
  color: #5a7090;
  min-width: 70px;
}

.spc-confirm-card__val {
  font-weight: 600;
  color: #eef4ff;
}

/* Restart button */
.spc-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border-radius: 20px;
  border: 1.5px solid rgba(41,168,224,.35);
  background: transparent;
  color: #4DC8F0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  font-family: inherit;
  margin-top: 0.25rem;
}

.spc-restart-btn:hover { background: rgba(41,168,224,.1); }

/* ── Trust bar ──────────────────────────────────────────────── */
.spc-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding: 0.75rem;
}

.spc-trust-item {
  font-size: 0.75rem;
  color: #5a7090;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   DEMO SECTION — Premium full-width showcase
   ══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────────────── */
.spc-demo-section {
  position: relative;
  overflow: hidden;
  background: #040d1e;
  padding: 7rem 0 6rem;
}

/* Background decorative blobs */
.spc-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.spc-deco--1 {
  top: -15%;
  right: -8%;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(41,168,224,.10) 0%, transparent 65%);
}

.spc-deco--2 {
  bottom: -20%;
  left: -10%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(36,112,169,.08) 0%, transparent 65%);
}

.spc-deco--3 {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(41,168,224,.04) 0%, transparent 60%);
}

/* ── Two-column grid ────────────────────────────────────────── */
.spc-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Left column: copy ──────────────────────────────────────── */
.spc-demo-copy { color: #eef4ff; }

/* Live badge */
.spc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #29A8E0;
  margin-bottom: 1.25rem;
}

.spc-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6EE7B7;
  flex-shrink: 0;
  animation: spcLivePulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(110,231,183,.5);
}

@keyframes spcLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(110,231,183,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(110,231,183,.0); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,183,.0); }
}

/* Heading */
.spc-demo-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  color: #eef4ff;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}

.spc-demo-sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(238,244,255,.65);
  margin-bottom: 2.25rem;
  max-width: 420px;
}

.spc-demo-sub strong { color: #85DAFA; font-weight: 600; }

/* Stats row */
.spc-demo-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.spc-demo-stat__val {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #29A8E0;
  line-height: 1;
}

.spc-demo-stat__lbl {
  display: block;
  font-size: 0.7rem;
  color: rgba(238,244,255,.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

/* Live activity notifications */
.spc-demo-notifs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.spc-demo-notif {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(41,168,224,.18);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: rgba(238,244,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s, border-color 0.25s;
}

.spc-demo-notif:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(41,168,224,.32);
}

.spc-demo-notif__icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.spc-demo-notif__text { line-height: 1.4; }

.spc-demo-notif__text strong {
  color: #85DAFA;
  font-weight: 600;
}

.spc-demo-notif__time {
  font-size: 0.7rem;
  color: rgba(238,244,255,.35);
  margin-top: 3px;
}

/* ── Right column: shell ────────────────────────────────────── */
.spc-demo-right {
  position: relative;
}

/* Blue halo behind the shell */
.spc-shell-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    ellipse at center,
    rgba(41,168,224,.20) 0%,
    rgba(36,112,169,.10) 38%,
    transparent 68%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: spcGlowPulse 5s ease-in-out infinite;
}

@keyframes spcGlowPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.65; transform: scale(1.04); }
}

/* Shell overrides for demo section */
.spc-demo-right .spc-wrap {
  position: relative;
  z-index: 1;
}

.spc-demo-right .spc-shell {
  min-height: 620px;
  max-height: 680px;
  box-shadow:
    0 0 0 1px rgba(201,169,110,.28),
    0 8px 24px rgba(58,42,31,.10),
    0 40px 80px rgba(58,42,31,.16),
    0 0 60px rgba(201,169,110,.12);
  animation: spcFloat 7s ease-in-out infinite;
}

@keyframes spcFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* Trust bar on dark bg */
.spc-demo-right .spc-trust { margin-top: 1rem; }
.spc-demo-right .spc-trust-item { color: rgba(238,244,255,.38); }

/* Powered by */
.spc-powered {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.7rem;
  color: rgba(238,244,255,.28);
  letter-spacing: 0.04em;
}

.spc-powered strong { color: #29A8E0; font-weight: 600; }

/* ── Status bar (phone chrome) ──────────────────────────────── */
.spc-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1rem 0;
  background: linear-gradient(135deg, #1A3A5C 0%, #29A8E0 100%);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.spc-status-icons {
  letter-spacing: 2px;
  font-size: 0.5rem;
  color: rgba(255,255,255,.6);
}

/* ── Header verified icon ───────────────────────────────────── */
.spc-header__verified {
  margin-left: auto;
  opacity: 0.75;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .spc-demo-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .spc-demo-copy { text-align: center; }
  .spc-demo-sub  { margin-left: auto; margin-right: auto; }
  .spc-demo-stats { justify-content: center; }
  .spc-demo-notifs { max-width: 460px; margin: 0 auto; }
  .spc-demo-heading { font-size: clamp(2rem, 7vw, 2.6rem); }
}

@media (max-width: 480px) {
  .spc-demo-section { padding: 4.5rem 0 4rem; }
  .spc-demo-right .spc-shell { min-height: 520px; max-height: 580px; border-radius: 16px; }
  .spc-shell-glow { inset: -30px; }
  .spc-bubble { font-size: 0.84rem; }
  .spc-opt-btn { font-size: 0.77rem; padding: 0.45rem 0.7rem; }
  .spc-demo-stats { gap: 1.25rem; }
  .spc-demo-stat__val { font-size: 1.4rem; }
}