/* ============================================================
   THAIVSCAN AI — css/ai-assistant.css
   "Guardian console" — a crystalline glass chat console floating on a
   living azure aurora field. Light, on-theme (Trust Blue), premium.
   Loaded ONLY on ai.html, so restyling shared elements here is safe.
   Palette: ground #EEF4FF · text #0F172A · accent #0062E6 · violet #7C5CFF
   ============================================================ */

.ai-page,
body {
  --ai-blue:   #0062E6;
  --ai-azure:  #2E86FF;
  --ai-violet: #7C5CFF;
  --ai-cyan:   #47C6E8;
  --ai-ink:    #0F172A;
  --ai-sub:    #46587A;
  --ai-glass:  rgba(255, 255, 255, 0.72);
  --ai-line:   rgba(15, 23, 42, 0.07);
  --ai-hair:   rgba(0, 98, 230, 0.14);
}

/* ── The aurora field ──────────────────────────────────── */
body {
  background:
    radial-gradient(1200px 680px at 50% -12%, #DCE9FF 0%, rgba(220, 233, 255, 0) 60%),
    radial-gradient(820px 560px at 88% 6%,  rgba(46, 134, 255, 0.16) 0%, transparent 56%),
    radial-gradient(760px 560px at 4% 34%,  rgba(124, 92, 255, 0.13) 0%, transparent 54%),
    linear-gradient(180deg, #EAF2FF 0%, #F2F7FF 46%, #FAFBFD 100%);
  background-attachment: fixed;
}

/* Keep the shared header/footer looking identical to every other page — the
   fixed aurora sits behind everything, so make them opaque enough not to be
   tinted blue by it. */
.site-header { background: rgba(249, 251, 254, 0.94); }
.site-footer { background: #FAFBFD; }

.bg-ambient { z-index: 0; }
.bg-orb { filter: blur(84px); opacity: 0.95; mix-blend-mode: multiply; }
.bg-orb--1 {
  width: clamp(440px, 60vw, 900px); height: clamp(320px, 52vh, 640px);
  top: 50%; left: 50%; right: auto; bottom: auto;
  background: radial-gradient(circle at 50% 50%, rgba(46, 134, 255, 0.34) 0%, transparent 68%);
  animation: aiOrbit1 9s linear infinite;
}
.bg-orb--2 {
  width: clamp(340px, 46vw, 640px); height: clamp(240px, 34vh, 460px);
  top: 50%; left: 50%; right: auto; bottom: auto;
  background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.30) 0%, transparent 68%);
  animation: aiOrbit2 12s linear infinite;
}
/* a third, cyan glow — the counter-weight that makes the field feel alive */
.bg-ambient::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: clamp(300px, 40vw, 560px); height: clamp(220px, 30vh, 420px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(71, 198, 232, 0.26) 0%, transparent 68%);
  filter: blur(84px); mix-blend-mode: multiply;
  animation: aiOrbit3 15s linear infinite;
  pointer-events: none;
}
@keyframes aiOrbit1 {
  from { transform: translate(-50%, -50%) rotate(0deg)   translate(40vmax) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translate(40vmax) rotate(-360deg); }
}
@keyframes aiOrbit2 {
  from { transform: translate(-50%, -50%) rotate(0deg)    translate(30vmax) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg) translate(30vmax) rotate(360deg); }
}
@keyframes aiOrbit3 {
  from { transform: translate(-50%, -50%) rotate(120deg) translate(24vmax) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translate(24vmax) rotate(-480deg); }
}

.ai-shell {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* ── Hero ──────────────────────────────────────────────── */
.ai-hero {
  text-align: center;
  padding: clamp(30px, 6vw, 60px) 0 var(--sp-6);
}
.ai-hero .hero-badge {
  margin: 0 auto var(--sp-5);
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ai-hair);
  color: var(--ai-sub);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px -8px rgba(20, 60, 140, 0.22);
}
.ai-hero .hero-badge .badge-dot {
  background: var(--ai-blue);
  box-shadow: 0 0 0 0 rgba(0, 98, 230, 0.5);
  animation: aiBadge 2.6s ease-in-out infinite;
}
@keyframes aiBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 98, 230, 0.5); }
  55%      { box-shadow: 0 0 0 7px rgba(0, 98, 230, 0); }
}
.ai-hero h1 {
  font-family: var(--sans);
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.18;            /* roomy enough for Thai upper tone marks/vowels */
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ai-ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-hero .title-accent {
  padding-bottom: 0.06em;       /* keep the gradient clip from cropping descenders */
}
.ai-hero .title-accent {
  background: linear-gradient(100deg, var(--ai-azure) 0%, var(--ai-blue) 42%, var(--ai-violet) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px rgba(0, 98, 230, 0.22));
  animation: aiShimmer 9s ease-in-out infinite;
}
@keyframes aiShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ai-hero p {
  color: var(--ai-sub);
  max-width: 600px;
  margin: var(--sp-4) auto 0;
  font-size: clamp(0.96rem, 0.9rem + 0.2vw, 1.08rem);
  line-height: 1.72;
}

/* ── Console (chat card) ───────────────────────────────── */
.ai-card {
  position: relative;
  background: var(--ai-glass);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  backdrop-filter: blur(30px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow:
    0 40px 90px -34px rgba(18, 52, 128, 0.42),
    0 2px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px rgba(0, 98, 230, 0.05);
  display: flex;
  flex-direction: column;
  height: min(70vh, 660px);
  overflow: visible;            /* let the running-neon glow bleed outside the card */
  margin-bottom: var(--sp-6);
}
/* a bright neon COMET that runs around the console edge —
   ONLY while the AI is answering (.ai-card.ai-thinking). Idle = hidden. */
@property --ai-run { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ai-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--ai-run),
    transparent 0deg,
    transparent 250deg,
    rgba(71, 198, 232, 0.35) 276deg,
    var(--ai-cyan) 300deg,
    #ffffff 320deg,            /* white-hot core of the comet */
    var(--ai-azure) 336deg,
    var(--ai-violet) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(46, 134, 255, 0.9)) drop-shadow(0 0 12px rgba(124, 92, 255, 0.55));
  opacity: 0;                  /* hidden until the AI is thinking */
  transition: opacity 0.35s ease;
  animation: none;
}
/* run + reveal only while answering */
.ai-card.ai-thinking::before {
  opacity: 1;
  animation: aiRun 1.5s linear infinite;
}
@keyframes aiRun { to { --ai-run: 360deg; } }

.ai-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ai-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2));
  border-radius: 28px 28px 0 0;   /* keep top corners clean now that the card isn't clipping */
}
.ai-head-avatar {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--ai-azure), var(--ai-violet));
  box-shadow: 0 8px 20px -6px rgba(0, 98, 230, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* living aura ring */
.ai-head-avatar::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ai-azure), var(--ai-violet), var(--ai-cyan), var(--ai-azure));
  filter: blur(7px);
  opacity: 0.5;
  z-index: -1;
  animation: aiSpin 7s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-head-avatar svg { width: 22px; height: 22px; }
.ai-head-title { font-weight: 700; font-size: 1rem; line-height: 1.1; color: var(--ai-ink); }
.ai-head-sub {
  font-size: 0.75rem;
  color: var(--safe);
  display: flex; align-items: center; gap: 5px;
}
.ai-head-sub::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--safe); box-shadow: 0 0 0 3px var(--safe-bg);
  animation: aiPulse 2s infinite;
}
@keyframes aiPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ai-head-spacer { flex: 1; }
.ai-clear {
  border: 1px solid var(--ai-hair);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ai-sub);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.ai-clear:hover { background: #fff; color: var(--ai-ink); border-color: rgba(0, 98, 230, 0.3); }

/* ── Thread ────────────────────────────────────────────── */
.ai-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scroll-behavior: smooth;
}
.ai-thread::-webkit-scrollbar { width: 8px; }
.ai-thread::-webkit-scrollbar-thumb { background: rgba(0, 98, 230, 0.18); border-radius: 8px; }
.ai-thread::-webkit-scrollbar-thumb:hover { background: rgba(0, 98, 230, 0.32); }

.ai-row { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: 100%; }
.ai-row-user { flex-direction: row-reverse; }
.ai-col { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 82%; }

.ai-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(140deg, var(--ai-azure), var(--ai-violet));
  color: #fff; margin-top: 2px;
  box-shadow: 0 4px 13px -4px rgba(0, 98, 230, 0.55);
}
.ai-avatar svg { width: 18px; height: 18px; }

.ai-bubble {
  padding: 13px 16px;
  border-radius: 20px;
  font-size: 0.93rem;
  line-height: 1.62;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-bubble-bot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 255, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: var(--ai-ink);
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 12px -6px rgba(18, 52, 128, 0.16);
}
.ai-bubble-user {
  background: linear-gradient(135deg, var(--ai-azure) 0%, var(--ai-blue) 55%, #6D5CFF 115%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 12px 28px -12px rgba(0, 98, 230, 0.6);
}
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble strong { font-weight: 700; }
.ai-bubble-user strong { color: #fff; }
.ai-bubble-bot a { color: var(--ai-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 98, 230, 0.28); }
.ai-bubble-bot a:hover { border-bottom-color: var(--ai-blue); }

/* Lists — MUST stay block-level. style.css has a global
   `p, li { max-width:70ch; margin-left:auto; margin-right:auto }`; a flex list
   turned those auto-margins into cross-axis centering, which tilted the bullets.
   Block flow + explicit margins keeps one clean left edge per row. */
.ai-ul, .ai-ol {
  display: block;
  list-style: none;
  padding-left: 0;
  margin: 9px 0 11px;
}
.ai-ul li, .ai-ol li {
  position: relative;
  margin: 0 0 8px;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  line-height: 1.62;
}
.ai-ul li:last-child, .ai-ol li:last-child { margin-bottom: 0; }
.ai-ul li { padding-left: 1.55em; }
.ai-ul li::before {
  content: '';
  position: absolute;
  left: 3px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-azure), var(--ai-violet));
  box-shadow: 0 0 8px rgba(0, 98, 230, 0.35);
}
.ai-ol { counter-reset: ai-step; }
.ai-ol li { padding-left: 2.35em; counter-increment: ai-step; min-height: 1.5em; }
.ai-ol li::before {
  content: counter(ai-step);
  position: absolute;
  left: 0; top: 0.02em;
  width: 1.6em; height: 1.6em;
  display: grid; place-items: center;
  font-size: 0.72em; font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--ai-azure), var(--ai-blue));
  border-radius: 50%;
  box-shadow: 0 4px 10px -4px rgba(0, 98, 230, 0.5);
}

/* tap-to-call chip inside answers */
.ai-call {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--safe-bg); color: var(--safe) !important;
  border: 1px solid var(--safe-border);
  padding: 8px 14px; border-radius: 999px;
  font-weight: 700; text-decoration: none !important; border-bottom: 1px solid var(--safe-border) !important;
  margin: 4px 0;
}
.ai-call:hover { background: var(--safe); color: #fff !important; }
.ai-call-sm { padding: 3px 9px; font-size: 0.85em; margin: 0 2px; vertical-align: middle; gap: 5px; }

.ai-in { animation: aiIn 0.42s var(--ease-out); }
@keyframes aiIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ── Scan result card in chat ─────────────────────────── */
.ai-scan {
  margin-top: 10px;
  border: 1px solid var(--border-md);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ai-scan-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.ai-scan-badge {
  width: 37px; height: 37px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff;
}
.ai-scan.v-safe .ai-scan-badge { background: var(--safe); box-shadow: 0 6px 16px -6px var(--safe); }
.ai-scan.v-suspicious .ai-scan-badge { background: var(--warn); box-shadow: 0 6px 16px -6px var(--warn); }
.ai-scan.v-dangerous .ai-scan-badge { background: var(--danger); box-shadow: 0 6px 16px -6px var(--danger); }
.ai-scan.v-error .ai-scan-badge { background: var(--text-muted); }
.ai-scan.v-safe { border-color: var(--safe-border); }
.ai-scan.v-suspicious { border-color: var(--warn-border); }
.ai-scan.v-dangerous { border-color: var(--danger-border); }
.ai-scan-verdict { font-weight: 700; }
.ai-scan.v-safe .ai-scan-verdict { color: var(--safe); }
.ai-scan.v-suspicious .ai-scan-verdict { color: var(--warn); }
.ai-scan.v-dangerous .ai-scan-verdict { color: var(--danger); }
.ai-scan-url { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); word-break: break-all; }
.ai-scan-sum, .ai-scan-flags, .ai-scan-advice { padding: 0 15px 12px; font-size: 0.86rem; }
.ai-scan-sum { color: var(--ai-sub); }
.ai-scan-advice { color: var(--ai-ink); }
.ai-scan-flags b { display: block; margin-bottom: 4px; }
.ai-scan-full {
  display: block; text-align: center; padding: 12px;
  background: rgba(0, 98, 230, 0.06); color: var(--ai-blue) !important;
  font-weight: 700; text-decoration: none !important; border: none !important;
  border-top: 1px solid var(--ai-line) !important;
}
.ai-scan-full:hover { background: rgba(0, 98, 230, 0.12); }

/* ── Typing indicator ─────────────────────────────────── */
.ai-typing { display: flex; gap: 5px; align-items: center; }
.ai-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-azure), var(--ai-violet));
  animation: aiDot 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-5px); opacity:1 } }

/* ── Quick-reply chips ────────────────────────────────── */
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding-left: 2px; }
.ai-chips-label { font-size: 0.74rem; color: var(--text-muted); width: 100%; }
.ai-chip, .ai-suggest-chip {
  border: 1px solid var(--ai-hair);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ai-blue);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px -5px rgba(18, 52, 128, 0.2);
  transition: var(--transition);
  text-align: left;
}
.ai-chip:hover, .ai-suggest-chip:hover {
  background: linear-gradient(135deg, var(--ai-azure), var(--ai-blue));
  color: #fff; border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 98, 230, 0.55);
}

/* ── Starter suggestions ──────────────────────────────── */
.ai-suggest { margin-top: auto; padding-top: var(--sp-2); }
.ai-suggest-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.ai-suggest-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Composer ─────────────────────────────────────────── */
.ai-composer {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ai-line);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35));
  border-radius: 0 0 28px 28px;   /* clean bottom corners */
}
.ai-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--ai-hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ai-ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 12px 15px;
  max-height: 140px;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(18, 52, 128, 0.05);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ai-input::placeholder { color: var(--text-muted); }
.ai-input:focus {
  outline: none;
  border-color: var(--ai-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 98, 230, 0.13);
}
.ai-send {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--ai-azure) 0%, var(--ai-blue) 58%, #5B6DFF 115%);
  color: #fff;
  border: none; border-radius: 16px;
  font-family: var(--sans); font-weight: 700; font-size: 0.9rem;
  padding: 0 20px; height: 48px;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 10px 24px -10px rgba(0, 98, 230, 0.6);
  transition: var(--transition);
}
.ai-send::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.ai-send:hover::before { left: 150%; }
.ai-send:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(0, 98, 230, 0.75); filter: brightness(1.05); }
.ai-send:active { transform: none; }
.ai-send svg { width: 16px; height: 16px; position: relative; }

.ai-disclaimer {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 0 var(--sp-4) var(--sp-8);
  max-width: 640px; margin: 0 auto;
}

/* ── Focus states ─────────────────────────────────────── */
.ai-chip:focus-visible, .ai-suggest-chip:focus-visible,
.ai-send:focus-visible, .ai-clear:focus-visible, .ai-scan-full:focus-visible {
  outline: 2px solid var(--ai-blue);
  outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .ai-card { margin-bottom: var(--sp-4); }
}
@media (max-width: 640px) {
  .ai-card { height: calc(100vh - 250px); min-height: 440px; border-radius: 22px; }
  .ai-card-head { border-radius: 22px 22px 0 0; }
  .ai-composer { border-radius: 0 0 22px 22px; }
  .ai-col { max-width: 88%; }
  .ai-hero { padding: var(--sp-4) 0 var(--sp-3); }
  .ai-send span { display: none; }
  .ai-send { padding: 0 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-in, .ai-typing span, .ai-head-sub::before, .ai-head-avatar::after,
  .ai-hero .hero-badge .badge-dot, .ai-hero .title-accent,
  .ai-card::before, .ai-card.ai-thinking::before,
  .bg-orb--1, .bg-orb--2, .bg-ambient::after { animation: none; }
  .ai-send::before { transition: none; }
}