/* ==========================================================================
   Ask XZONE — the front desk, floating.

   It sits in the corner of every public page and has to do two contradictory
   things: be findable the moment somebody has a question, and be invisible the
   rest of the time. So it is a single small disc until it is wanted, it never
   opens itself, and it stays out of the thumb zone on a phone until it does.
   ========================================================================== */

.xzai{
  --ai-bg:#0E0E13;
  --ai-bg-2:#15151C;
  --ai-ink:#F4F4F7;
  --ai-ink-2:#9D9DA8;
  --ai-ink-3:#6B6B76;
  --ai-line:rgba(255,255,255,0.08);
  --ai-line-2:rgba(255,255,255,0.15);
  --ai-accent:#FF5A70;
  --ai-accent-deep:#BC1C34;
  --ai-ease:cubic-bezier(.32,.72,0,1);

  position:fixed;
  right:clamp(16px, 2.2vw, 28px);
  bottom:clamp(16px, 2.2vw, 28px);
  z-index:9000;
  font-family:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--ai-ink);
}

.xzai *{ box-sizing:border-box; }
.xzai button{ font:inherit; color:inherit; cursor:pointer; }

/* ---- the disc ---- */

.xzai__open{
  position:relative;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  border:0; padding:0;
  background:linear-gradient(150deg, var(--ai-accent), var(--ai-accent-deep));
  box-shadow:0 10px 30px rgba(188,28,52,.42), 0 2px 8px rgba(0,0,0,.4);
  color:#fff;
  transition:transform 320ms var(--ai-ease), box-shadow 320ms var(--ai-ease);
}
.xzai__open:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 16px 40px rgba(188,28,52,.5); }
.xzai__open:active{ transform:translateY(0) scale(.97); }
.xzai__open:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.xzai__open svg{ width:24px; height:24px; display:block; }
.xzai__open-i, .xzai__open-x{
  grid-area:1/1; display:grid; place-items:center;
  transition:opacity 220ms var(--ai-ease), transform 320ms var(--ai-ease);
}
.xzai__open-x{ opacity:0; transform:rotate(-45deg) scale(.7); }
.xzai[data-state="open"] .xzai__open-i{ opacity:0; transform:rotate(45deg) scale(.7); }
.xzai[data-state="open"] .xzai__open-x{ opacity:1; transform:none; }

/* A single quiet pulse the first time a visitor lands, and never again. */
@keyframes xzaiNote{
  0%,100%{ box-shadow:0 10px 30px rgba(188,28,52,.42), 0 0 0 0 rgba(255,90,112,.5); }
  55%    { box-shadow:0 10px 30px rgba(188,28,52,.42), 0 0 0 14px rgba(255,90,112,0); }
}
.xzai[data-hint="1"] .xzai__open{ animation:xzaiNote 2.6s var(--ai-ease) 1.8s 2; }

/* ---- the panel ---- */

.xzai__panel{
  position:absolute; right:0; bottom:70px;
  width:min(382px, calc(100vw - 32px));
  max-height:min(620px, calc(100svh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ai-bg);
  border:1px solid var(--ai-line);
  border-radius:20px;
  box-shadow:0 28px 70px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4);
  opacity:0; transform:translateY(12px) scale(.97); transform-origin:100% 100%;
  transition:opacity 220ms var(--ai-ease), transform 320ms var(--ai-ease);
}
.xzai[data-state="open"] .xzai__panel{ opacity:1; transform:none; }
.xzai__panel[hidden]{ display:none; }

.xzai__top{
  display:flex; align-items:center; gap:11px;
  padding:15px 14px 14px 16px;
  border-bottom:1px solid var(--ai-line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.xzai__mark{
  width:32px; height:32px; flex:0 0 32px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--ai-accent), var(--ai-accent-deep));
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:-.03em;
}
.xzai__who{ min-width:0; flex:1; }
.xzai__n{ display:block; font-size:14px; font-weight:600; letter-spacing:-.012em; line-height:1.25; }
.xzai__s{ display:block; font-size:11.5px; color:var(--ai-ink-3); line-height:1.3; margin-top:1px; }
.xzai__shut{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:grid; place-items:center; border:0; background:none; color:var(--ai-ink-3);
  transition:background 180ms var(--ai-ease), color 180ms var(--ai-ease);
}
.xzai__shut:hover{ background:var(--ai-bg-2); color:var(--ai-ink); }
.xzai__shut svg{ width:16px; height:16px; }

/* ---- the conversation ---- */

.xzai__log{
  flex:1; min-height:132px; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 16px 6px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:var(--ai-line-2) transparent;
}
.xzai__log::-webkit-scrollbar{ width:8px; }
.xzai__log::-webkit-scrollbar-thumb{ background:var(--ai-line-2); border-radius:99px; }

.xzai__msg{ max-width:88%; }
.xzai__msg--me{ align-self:flex-end; }
.xzai__msg--it{ align-self:flex-start; }

.xzai__bub{
  padding:10px 13px; border-radius:15px;
  font-size:13.8px; line-height:1.52; letter-spacing:-.004em;
}
.xzai__msg--me .xzai__bub{
  background:var(--ai-accent); color:#fff;
  border-bottom-right-radius:6px;
}
.xzai__msg--it .xzai__bub{
  background:var(--ai-bg-2); color:var(--ai-ink);
  border:1px solid var(--ai-line); border-bottom-left-radius:6px;
}
.xzai__topic{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ai-ink-3); margin-bottom:5px;
}

/* ---- the links an answer carries ---- */

.xzai__links{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.xzai__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,90,112,.13); border:1px solid rgba(255,90,112,.32);
  color:#ffd9df; font-size:12.5px; font-weight:550; text-decoration:none;
  transition:background 180ms var(--ai-ease), border-color 180ms var(--ai-ease), color 180ms var(--ai-ease);
}
.xzai__link:hover{ background:rgba(255,90,112,.22); border-color:rgba(255,90,112,.55); color:#fff; }
.xzai__link::after{ content:'\2192'; opacity:.75; }

/* ---- what to ask next ---- */

.xzai__chips{ display:flex; flex-wrap:wrap; gap:7px; padding:4px 16px 14px; }
.xzai__chip{
  padding:7px 13px; border-radius:999px;
  background:var(--ai-bg-2); border:1px solid var(--ai-line);
  color:var(--ai-ink-2); font-size:12.5px; text-align:left;
  transition:background 180ms var(--ai-ease), border-color 180ms var(--ai-ease), color 180ms var(--ai-ease);
}
.xzai__chip:hover{ background:#1C1C25; border-color:var(--ai-line-2); color:var(--ai-ink); }

/* ---- thinking ---- */

.xzai__dots{ display:inline-flex; gap:4px; padding:3px 1px; }
.xzai__dots span{
  width:6px; height:6px; border-radius:50%; background:var(--ai-ink-3);
  animation:xzaiDot 1.3s var(--ai-ease) infinite;
}
.xzai__dots span:nth-child(2){ animation-delay:.16s; }
.xzai__dots span:nth-child(3){ animation-delay:.32s; }
@keyframes xzaiDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* ---- asking ---- */

.xzai__ask{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px; border-top:1px solid var(--ai-line);
  background:rgba(255,255,255,.015);
}
.xzai__in{
  flex:1; min-width:0;
  padding:11px 14px; border-radius:999px;
  background:var(--ai-bg-2); border:1px solid var(--ai-line);
  color:var(--ai-ink); font-size:14px; font-family:inherit;
  transition:border-color 180ms var(--ai-ease), background 180ms var(--ai-ease);
}
.xzai__in::placeholder{ color:var(--ai-ink-3); }
.xzai__in:focus{ outline:none; border-color:rgba(255,90,112,.45); background:#1A1A22; }

.xzai__send{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:grid; place-items:center; border:0;
  background:var(--ai-accent); color:#fff;
  transition:background 180ms var(--ai-ease), transform 180ms var(--ai-ease);
}
.xzai__send:hover{ background:#ff7085; }
.xzai__send:active{ transform:scale(.94); }
.xzai__send svg{ width:16px; height:16px; }

.xzai__foot{
  margin:0; padding:0 16px 13px;
  font-size:11px; line-height:1.45; color:var(--ai-ink-3);
}
.xzai__foot a{ color:var(--ai-ink-2); text-decoration:underline; text-underline-offset:2px; }
.xzai__foot a:hover{ color:var(--ai-accent); }

/* ---- phones ---- */

@media (max-width:560px){
  .xzai{ right:14px; bottom:14px; }
  .xzai__open{ width:52px; height:52px; }
  .xzai__panel{
    position:fixed; right:12px; left:12px; bottom:76px;
    width:auto; max-height:min(72svh, 560px);
  }
}

/* Anything that pins itself to the bottom of a phone screen is in the way of
   the assistant, and the assistant is the less important of the two. */
@media (max-width:760px){
  body.xz-has-bottombar .xzai{ bottom:calc(14px + 68px); }
}

@media (prefers-reduced-motion:reduce){
  .xzai *, .xzai *::before, .xzai *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* The label that exists for screen readers and nobody else. */
.xzai .screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}