/* ==========================================================================
   Pixel Architecture — Chatbot widget styles
   Adapted to current design tokens (redesign-styles.css).
   ========================================================================== */

:root {
  --pa-r-md: 12px;
  --pa-r-lg: 18px;
  --pa-r-xl: 24px;
  --pa-r-pill: 999px;
  --pa-grad-teal: linear-gradient(135deg, var(--pa-teal-700), var(--pa-teal));
  --pa-dur-base: .22s;
  --pa-dur-glide: .55s;
  --pa-ease: cubic-bezier(.2,.7,.2,1);
  --pa-ease-in-out: cubic-bezier(.6,.05,.2,.95);
  --pa-font-display: var(--font-display);
}

.pa-chat-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--pa-grad-teal); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 14px 36px -10px rgba(45,163,156,0.5), 0 4px 12px rgba(15,23,42,0.18);
  transition: transform var(--pa-dur-base) var(--pa-ease), box-shadow var(--pa-dur-base) var(--pa-ease);
}
.pa-chat-launcher:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 50px -12px rgba(45,163,156,0.6); }
.pa-chat-launcher svg { width: 26px; height: 26px; }
.pa-chat-launcher__pulse { position:absolute; inset:0; border-radius:50%; border:2px solid var(--pa-teal); animation: pa-chat-pulse 2.4s var(--pa-ease) infinite; pointer-events:none; }
@keyframes pa-chat-pulse { 0%{transform:scale(1);opacity:.65;} 100%{transform:scale(1.6);opacity:0;} }
.pa-chat-launcher__dot { position:absolute; top:6px; right:6px; width:12px; height:12px; border-radius:50%; background:var(--pa-gold); border:2px solid #fff; }

@media (max-width: 640px) {
  .pa-chat-launcher { bottom: 16px; right: 16px; width: 54px; height: 54px; }
  .pa-chat-launcher svg { width: 22px; height: 22px; }
}

.pa-chat {
  position: fixed; bottom: 24px; right: 24px; z-index: 61;
  width: min(380px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 80px));
  background: #fff; border-radius: var(--pa-r-xl);
  box-shadow: 0 32px 80px -20px rgba(15,23,42,0.35), 0 8px 24px rgba(15,23,42,0.12);
  border: 1px solid var(--pa-border);
  display: none; flex-direction: column; overflow: hidden; isolation: isolate;
}
.pa-chat.is-open { display: flex; animation: pa-chat-in .3s var(--pa-ease); }
@keyframes pa-chat-in { from{opacity:0; transform:translateY(16px) scale(.96);} to{opacity:1; transform:none;} }

.pa-chat__head { background: linear-gradient(135deg,#1B2A3A 0%,#1B5E5A 100%); color:#fff; padding:1.1rem 1.2rem; display:flex; align-items:center; gap:.8rem; }
.pa-chat__avatar { width:40px; height:40px; border-radius:50%; background:var(--pa-grad-teal); display:grid; place-items:center; color:#fff; font-family:var(--pa-font-display); font-weight:700; font-size:.95rem; flex-shrink:0; position:relative; }
.pa-chat__avatar::after { content:''; position:absolute; bottom:0; right:0; width:12px; height:12px; background:#6FECDC; border:2px solid #1B2A3A; border-radius:50%; }
.pa-chat__title { flex:1; min-width:0; }
.pa-chat__title strong { display:block; font-family:var(--pa-font-display); font-size:.95rem; font-weight:600; }
.pa-chat__title span { display:block; font-size:.74rem; color:#B7C2CE; margin-top:1px; }
.pa-chat__close { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; border:none; cursor:pointer; display:grid; place-items:center; transition:background var(--pa-dur-base) var(--pa-ease); }
.pa-chat__close:hover { background: rgba(255,255,255,.16); }
.pa-chat__close svg { width:14px; height:14px; }

.pa-chat__body { flex:1; overflow-y:auto; padding:1.1rem; background:#F7F9F8; display:flex; flex-direction:column; gap:.7rem; }
.pa-chat__msg { max-width:86%; padding:.75rem .95rem; border-radius:var(--pa-r-md); font-size:.9rem; line-height:1.5; animation: pa-chat-msg .25s var(--pa-ease); }
@keyframes pa-chat-msg { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.pa-chat__msg--bot { align-self:flex-start; background:#fff; color:var(--pa-slate); border:1px solid var(--pa-border); border-bottom-left-radius:4px; }
.pa-chat__msg--user { align-self:flex-end; background:var(--pa-grad-teal); color:#fff; border-bottom-right-radius:4px; }
.pa-chat__quick { display:flex; flex-wrap:wrap; gap:.4rem; align-self:flex-start; max-width:100%; }
.pa-chat__quick button { background:#fff; border:1px solid var(--pa-teal); color:var(--pa-teal-700); padding:.5rem .85rem; border-radius:var(--pa-r-pill); font-family:var(--pa-font-display); font-size:.78rem; font-weight:500; cursor:pointer; transition:all var(--pa-dur-base) var(--pa-ease); }
.pa-chat__quick button:hover { background: var(--pa-teal); color:#fff; }

.pa-chat__typing { align-self:flex-start; background:#fff; border:1px solid var(--pa-border); padding:.65rem .95rem; border-radius:var(--pa-r-md); border-bottom-left-radius:4px; display:inline-flex; gap:4px; align-items:center; }
.pa-chat__typing span { width:6px; height:6px; border-radius:50%; background:var(--pa-text-soft); animation: pa-chat-bounce 1.4s var(--pa-ease) infinite; }
.pa-chat__typing span:nth-child(2) { animation-delay:.15s; }
.pa-chat__typing span:nth-child(3) { animation-delay:.3s; }
@keyframes pa-chat-bounce { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }

.pa-chat__form { display:flex; gap:.5rem; padding:.7rem .8rem; background:#fff; border-top:1px solid var(--pa-border); align-items:center; }
.pa-chat__form input { flex:1; padding:.7rem .95rem; border:1px solid var(--pa-border-strong); border-radius:var(--pa-r-pill); font-family:inherit; font-size:.88rem; background:var(--pa-bg); color:var(--pa-text); outline:none; transition:border-color var(--pa-dur-base) var(--pa-ease), box-shadow var(--pa-dur-base) var(--pa-ease); }
.pa-chat__form input:focus { border-color:var(--pa-teal); box-shadow:0 0 0 3px rgba(45,163,156,.16); }
.pa-chat__form button { width:40px; height:40px; background:var(--pa-grad-teal); color:#fff; border:none; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:transform var(--pa-dur-base) var(--pa-ease); }
.pa-chat__form button:hover { transform: scale(1.05); }
.pa-chat__form button svg { width:16px; height:16px; }

.pa-chat__foot { padding:.6rem 1rem; font-size:.7rem; color:var(--pa-text-soft); text-align:center; border-top:1px solid var(--pa-border); background:#fff; }
.pa-chat__foot strong { color:var(--pa-teal-700); }

@media (max-width: 480px) {
  .pa-chat { bottom:0; right:0; left:0; width:100%; height:86vh; border-radius: var(--pa-r-lg) var(--pa-r-lg) 0 0; }
}

/* ==========================================================================
   Reveal-on-scroll animations
   ========================================================================== */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .55s var(--pa-ease), transform .55s var(--pa-ease); will-change: opacity, transform; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-32px); transition: opacity .55s var(--pa-ease), transform .55s var(--pa-ease); }
.reveal-right { opacity:0; transform:translateX(32px); transition: opacity .55s var(--pa-ease), transform .55s var(--pa-ease); }
.reveal-scale { opacity:0; transform:scale(.94); transition: opacity .55s var(--pa-ease), transform .55s var(--pa-ease); }
.reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible { opacity:1; transform:none; }
.stagger > * { opacity:0; transform:translateY(22px); transition: opacity .7s var(--pa-ease), transform .7s var(--pa-ease); }
.stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:80ms; }
.stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:180ms; }
.stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:280ms; }
.stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:380ms; }
.stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:480ms; }
.stagger.is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:580ms; }
.stagger.is-visible > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:680ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger>* { animation:none !important; transform:none !important; transition:none !important; opacity:1 !important; }
}