/* ExPrysma Chatbot widget — Task 13. Mobile-first (90% users).
   Body font Roboto, numeric Roboto Mono (project font system). */

:root {
  --xp-bg: #12131a; --xp-panel: #1b1d27; --xp-line: #2a2d3a;
  --xp-accent: #6C8CFF; --xp-accent2: #67E8F9; --xp-text: #e8eaf2; --xp-muted: #9aa0b4;
  --ring-green: #34D399; --ring-amber: #FACC15; --ring-red: #F87171;
}

/* ── Pulsing launcher (desktop floating) ── */
.xp-launch {
  position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px;
  border-radius: 50%; background: var(--xp-panel); border: 2px solid var(--xp-accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 9998; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.xp-launch img, .xp-launch .xp-logo { width: 34px; height: 34px; border-radius: 50%; }
.xp-pulse { animation: xpPulse 2s infinite; }
@keyframes xpPulse {
  0% { box-shadow: 0 0 0 0 rgba(108,140,255,.55); }
  70% { box-shadow: 0 0 0 14px rgba(108,140,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(108,140,255,0); }
}

/* ── Chat panel ── */
.xp-panel {
  position: fixed; right: 20px; bottom: 20px; width: 408px; height: 640px; max-height: 85vh;
  background: var(--xp-bg); border: 1px solid var(--xp-line); border-radius: 16px;
  display: none; flex-direction: column; overflow: hidden; z-index: 9999;
  box-shadow: 0 12px 48px rgba(0,0,0,.5); font-family: 'Roboto', system-ui, sans-serif;
  transition: width .22s ease, height .22s ease;
}
.xp-panel.xp-open { display: flex; }
/* expanded ≈ +30% proportional (diagonal), clamped to viewport */
.xp-panel.xp-expanded { width: min(530px, 92vw); height: min(832px, 92vh); }
.xp-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--xp-line); background: var(--xp-panel);
}
.xp-head .xp-logo { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--xp-accent); }
.xp-title { font-weight: 600; color: var(--xp-text); font-size: 15px; }
.xp-sub { font-size: 11px; color: var(--xp-muted); }
.xp-head-btns { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.xp-hbtn { background: none; border: none; color: var(--xp-muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.xp-hbtn:hover { background: rgba(255,255,255,.07); color: var(--xp-text); }
.xp-close { font-size: 22px; }

.xp-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.xp-turn { display: flex; flex-direction: column; max-width: 86%; }
.xp-turn.user { align-self: flex-end; align-items: flex-end; }
.xp-turn.bot { align-self: flex-start; align-items: flex-start; }
.xp-msg { padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--xp-text); white-space: pre-wrap; word-break: break-word; }
.xp-msg.user { background: var(--xp-accent); color: #0b0c12; }
.xp-msg.bot { background: var(--xp-panel); border: 1px solid var(--xp-line); }
.xp-msg a { color: var(--xp-accent2); }
.xp-time { font-size: 10px; color: var(--xp-muted); margin-top: 3px; padding: 0 4px;
  font-family: 'Roboto Mono', monospace; }

.xp-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; }
.xp-chip { background: var(--xp-panel); border: 1px solid var(--xp-line); color: var(--xp-text);
  border-radius: 16px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; }
.xp-chip:hover { border-color: var(--xp-accent); }

.xp-inwrap { border-top: 1px solid var(--xp-line); padding: 12px 14px; background: var(--xp-panel); }
.xp-inrow { display: flex; align-items: center; gap: 8px; }
.xp-input { flex: 1; background: var(--xp-bg); border: 1px solid var(--xp-line); border-radius: 14px;
  color: var(--xp-text); padding: 13px 14px; font-size: 15px; font-family: 'Roboto', sans-serif; resize: none;
  min-height: 30px; max-height: 120px; box-sizing: border-box; }
.xp-input:focus { outline: none; border-color: var(--xp-accent); }
.xp-input:disabled { opacity: .5; }
.xp-send { background: var(--xp-accent); border: none; border-radius: 14px; width: 44px; height: 44px; cursor: pointer; color: #0b0c12; font-size: 19px; flex: 0 0 44px; }
.xp-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.xp-cta { font-size: 12px; color: var(--xp-accent2); margin-top: 6px; display: none; }
.xp-cta.show { display: block; }

/* ── Usage ring ── */
.xp-ring { width: 22px; height: 22px; }
.xp-ring-bg { stroke: var(--xp-line); }
.xp-ring-arc { stroke: var(--ring-green); transition: stroke-dashoffset .4s, stroke .4s; }
.xp-ring-wrap { position: relative; cursor: pointer; display: none; }
.xp-ring-wrap.xp-has { display: inline-block; }
.xp-ring-tip { position: absolute; bottom: 30px; left: 0; transform: none;
  background: #000; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; display: none; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.xp-ring-wrap:hover .xp-ring-tip, .xp-ring-wrap.xp-tip-show .xp-ring-tip { display: block; }

/* ── Mobile: two-tab shell (v3 — pill tabs, persistent auth, platform bg cohesion) ── */
@media (max-width: 768px) {
  .xp-launch { right: 16px; bottom: 76px; }
  /* Freeze the page scroll ONLY while the chat tab is active (the chat overlay covers the
     platform). On the platform tab the document scrolls natively → window.scrollTo, native
     pull-to-refresh and the fixed bottom nav all work as the dashboard expects. */
  body.xp-mobile-shell.xp-chat-active { overflow: hidden; }

  .xp-tabbar { display: flex; align-items: stretch; gap: 8px; padding: 8px 10px; background: #0B1428;
    border-bottom: 1px solid var(--xp-line); }

  /* persistent top = lifted platform header + tabs (fixed) */
  .xp-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: #0B1428; }
  /* neutralize the platform header's own fixed/sticky so it flows inside .xp-top */
  body.xp-mobile-shell header.header, body.xp-mobile-shell nav.nav,
  body.xp-mobile-shell #nav { position: static !important; }

  /* full-width 50/50 segmented tabs */
  .xp-pill { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--xp-line);
    background: rgba(255,255,255,.03); color: var(--xp-muted); font-size: 14px; font-weight: 600;
    cursor: pointer; white-space: nowrap; }
  .xp-pill.active { color: var(--xp-text); border-color: var(--xp-accent);
    background: linear-gradient(180deg, rgba(108,140,255,.18), rgba(108,140,255,.06)); }
  .xp-pill-ic { width: 24px; height: 24px; border-radius: 50%; }
  .xp-pill-logo { height: 16px; width: auto; }
  .xp-pill.pulse { animation: xpPillPulse 1.8s infinite; border-color: var(--xp-accent2); }
  @keyframes xpPillPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(103,232,249,0); }
    50% { box-shadow: 0 0 0 3px rgba(103,232,249,.20), 0 0 14px rgba(103,232,249,.30); } }

  /* Platform = NORMAL document flow (the window is the scroller, exactly like the un-shelled
     dashboard) — so window.scrollTo on tab/sub-tab switch, native pull-to-refresh, the fixed
     bottom nav and every other window-scroll assumption keep working. Only pad the top to clear
     the fixed .xp-top bar; the bottom nav clearance comes from the dashboard's own body
     padding-bottom (the window is the scroller again). NO position/overflow/transform here. */
  #xp-platform-pane { padding-top: var(--xp-top, 110px); }
  /* Chat = opaque fixed OVERLAY below the tab bar, above the platform + its fixed nav (z=200),
     below the persistent tab bar (z=10000). Its own content scrolls inside. */
  #xp-chat-pane {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--xp-top, 110px); z-index: 500;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  #xp-chat-pane[hidden] { display: none !important; }

  /* slim action strip (New Chat / Chat Archive) between the tabs and the chat */
  #xp-chat-pane .xp-chat-bar { display: flex; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--xp-line); background: #0B1428; }
  .xp-cbtn { display: flex; align-items: center; gap: 7px; padding: 7px 12px;
    border: 1px solid var(--xp-line); border-radius: 10px; background: rgba(255,255,255,.04);
    color: var(--xp-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .xp-cbtn:active { border-color: var(--xp-accent); }
  .xp-cic { font-size: 14px; line-height: 1; }
  .xp-cic-new { color: var(--ring-green); }
  .xp-cic-arch { color: var(--xp-accent2); }

  /* the platform's own sub-tab bar (sticky) must stick right under our fixed top bar.
     With the platform back on the native window scroller, that's top = the .xp-top height. */
  body.xp-mobile-shell #xp-platform-pane .tabs-container { top: var(--xp-top, 110px) !important; }

  /* chat pane: no floating-panel chrome; background matches the platform for cohesion */
  #xp-chat-pane { --xp-bg: #0B1428; --xp-panel: #0B1428; background: #0B1428; }
  #xp-chat-pane .xp-panel { position: static; width: 100%; height: 100%; max-height: none;
    border: none; border-radius: 0; display: flex; background: #0B1428; }
  #xp-chat-pane .xp-head { display: none; }
  #xp-chat-pane .xp-history { top: 0; }
  #xp-chat-pane .xp-inwrap { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
  .xp-expand, #xp-chat-pane .xp-close { display: none; }
}



/* ── Mascot animation states (Kiro-style alive feel; MVP = CSS on PNG) ── */
.xp-mascot { animation: xpFloat 3s ease-in-out infinite, xpGlow 2.4s ease-in-out infinite;
  will-change: transform, filter; }
@keyframes xpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* clean circular cyan glow via drop-shadow (follows the ball's circular alpha) */
@keyframes xpGlow {
  0%,100% { filter: drop-shadow(0 0 4px var(--xp-accent2)); }
  50% { filter: drop-shadow(0 0 11px var(--xp-accent2)); }
}
/* thinking: faster float + brighter cyan glow while awaiting a reply */
.xp-mascot.xp-thinking { animation: xpFloat 1.1s ease-in-out infinite, xpGlowHi 0.9s ease-in-out infinite; }
@keyframes xpGlowHi {
  0%,100% { filter: drop-shadow(0 0 8px var(--xp-accent2)); }
  50% { filter: drop-shadow(0 0 16px var(--xp-accent2)); }
}
/* talking: gentle scale bob while streaming tokens */
.xp-mascot.xp-talking { animation: xpTalk .5s ease-in-out infinite; }
@keyframes xpTalk { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* open bounce */
.xp-panel.xp-open .xp-head .xp-mascot { animation: xpFloat 3s ease-in-out infinite, xpBounce .4s ease; }
@keyframes xpBounce { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── Independent scroll: keep wheel/touch inside the chat, never scroll the platform ── */
.xp-msgs { overscroll-behavior: contain; }
.xp-panel { overscroll-behavior: contain; }

/* ── Bot avatar beside bot turns ── */
.xp-turn.bot { flex-direction: row; align-items: flex-start; gap: 8px; }
.xp-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  border: 1px solid var(--xp-line); background: var(--xp-panel); object-fit: cover; margin-top: 2px; }
.xp-bubblecol { display: flex; flex-direction: column; min-width: 0; }

/* ── Typing indicator (animated dots) ── */
.xp-typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 2px; }
.xp-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--xp-muted);
  animation: xpBlink 1.2s infinite; }
.xp-typing span:nth-child(2) { animation-delay: .2s; }
.xp-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes xpBlink { 0%,80%,100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); } }

/* ── Empty-state hero (branded "you've arrived at ExPrysma" feel) ── */
.xp-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin: auto; padding: 22px 14px; color: var(--xp-muted); max-width: 440px; width: 100%; }
.xp-empty-logo { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--xp-accent);
  box-shadow: 0 0 22px rgba(103,232,249,.25); animation: xpFloat 3s ease-in-out infinite; }
.xp-empty-title { color: var(--xp-text); font-weight: 700; font-size: 22px; letter-spacing: .3px; }
.xp-empty-tag { color: var(--xp-accent2); font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; margin-top: -4px; }
.xp-empty-sub { font-size: 14px; line-height: 1.5; max-width: 330px; }
.xp-empty-info { font-size: 13px; line-height: 1.5; max-width: 330px; color: var(--xp-text);
  opacity: .82; font-style: italic; }
.xp-empty-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.xp-empty-chips .xp-chip { width: 100%; text-align: center; padding: 12px; font-size: 13.5px; }
.xp-empty-disc { font-size: 10.5px; line-height: 1.45; max-width: 340px; margin-top: 14px; opacity: 0.55; }
/* Turnstile (bot-check) challenge shown inline in a bot bubble for anonymous visitors */
.xp-ts-msg { font-size: 13px; line-height: 1.4; margin-bottom: 10px; }
.xp-ts-holder { display: flex; justify-content: center; }
.xp-ts-box { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.xp-ts-hint { font-size: 11.5px; opacity: 0.7; }
.xp-ts-widget { min-height: 65px; }
/* empty mode: composer sits inside the centered hero; bottom bar collapses; soft glow (not pitch-black) */
.xp-panel.xp-empty-mode .xp-inwrap { border-top: none; padding: 0; min-height: 0; background: transparent; }
/* the empty intro screen is FIXED — it must NOT scroll. Only after a chat starts (xp-empty-mode
   removed) does .xp-msgs scroll, so users can read answers. */
.xp-panel.xp-empty-mode .xp-msgs {
  overflow-y: hidden; justify-content: center;
  background: radial-gradient(125% 80% at 50% 0%, rgba(108,140,255,.16), rgba(103,232,249,.06) 38%, transparent 72%); }
.xp-empty .xp-inrow { width: 100%; margin: 6px 0 2px; }

/* prominent, pulsing turquoise composer in the empty hero — the input bg equals the pane bg
   (#0B1428) on mobile, so it was invisible; give it a distinct fill + glowing cyan border so the
   "ask a question" box clearly stands out from the background. */
.xp-panel.xp-empty-mode .xp-input {
  background: rgba(255,255,255,.05); border: 1.5px solid var(--xp-accent2); color: var(--xp-text);
  animation: xpComposerPulse 2.2s ease-in-out infinite; }
.xp-panel.xp-empty-mode .xp-input::placeholder { color: rgba(232,234,242,.72); }
.xp-panel.xp-empty-mode .xp-input:focus { border-color: var(--xp-accent2); }
.xp-panel.xp-empty-mode .xp-send {
  background: var(--xp-accent2); color: #06131c; box-shadow: 0 0 12px rgba(103,232,249,.45); }
@keyframes xpComposerPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(103,232,249,.16), 0 0 8px rgba(103,232,249,.28); }
  50%     { box-shadow: 0 0 0 2px rgba(103,232,249,.42), 0 0 18px rgba(103,232,249,.55); } }

/* mobile chat pane: compact the empty hero so everything (logo → composer → 2 chips → disclaimer)
   fits within the fixed window without scrolling, keeping the disclaimer visible inside the pane. */
#xp-chat-pane .xp-empty { padding: 10px 14px; gap: 8px; }
#xp-chat-pane .xp-empty-logo { width: 54px; height: 54px; }
#xp-chat-pane .xp-empty-sub, #xp-chat-pane .xp-empty-info { line-height: 1.4; }
#xp-chat-pane .xp-empty-chips { margin-top: 4px; }
#xp-chat-pane .xp-empty-disc { margin-top: 8px; }

/* ── Chat history panel (overlay inside the chat panel) ── */
.xp-history { position: absolute; inset: 0; background: var(--xp-bg); z-index: 12;
  display: none; flex-direction: column; }
.xp-history.show { display: flex; }
.xp-history-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--xp-line); background: var(--xp-panel); color: var(--xp-text); font-weight: 600; }
.xp-history-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.xp-hrow { text-align: left; background: var(--xp-panel); border: 1px solid var(--xp-line);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--xp-text); }
.xp-hrow:hover { border-color: var(--xp-accent); }
.xp-hrow .t { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-hrow .d { font-size: 10.5px; color: var(--xp-muted); margin-top: 3px; font-family: 'Roboto Mono', monospace; }
.xp-hrow.active { border-color: var(--xp-accent2); }
.xp-history-empty { color: var(--xp-muted); text-align: center; font-size: 13px; margin: 20px; }