/* ==========================================================================
   Cloud iNIT — site assistant
   A boot-terminal styled help panel. Uses the existing design tokens only, so
   it inherits the palette and type scale from style.css with nothing new.

   Layering: launcher 9997 · panel 9998 · #prog 9999 (untouched).
   #toasts also lives bottom-right at 9999, so it is nudged up to clear the
   launcher rather than overlapping it.
   ========================================================================== */

:root{
  --chat-w:392px;
  --chat-h:552px;
  --chat-r:16px;
  --chat-ease:cubic-bezier(.22,1,.36,1);
}

/* keep site toasts clear of the launcher */
#toasts{bottom:96px}

/* ============================= LAUNCHER ============================= */
.chat-fab{
  position:fixed;
  right:24px;bottom:24px;
  z-index:9997;
  display:inline-flex;align-items:center;gap:9px;
  padding:0 18px 0 15px;
  height:52px;
  border:1px solid var(--ok);
  border-radius:26px;
  background:var(--ok);
  color:var(--ok-ink);
  font-family:var(--mono);
  font-size:13px;font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .3s var(--chat-ease),box-shadow .3s var(--chat-ease),background .3s;
  will-change:transform;
}
.chat-fab:hover{background:var(--ok-bright);transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.22)}
.chat-fab:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.chat-fab__caret{font-weight:700}
/* blinking cursor block, the site's terminal signature */
.chat-fab__cursor{
  display:inline-block;width:7px;height:14px;
  background:var(--ok-ink);
  margin-left:-3px;
  animation:chat-blink 1.1s steps(1) infinite;
}
@keyframes chat-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.chat-fab[aria-expanded="true"]{opacity:0;pointer-events:none;transform:scale(.86)}

/* unread/attention dot for the first-visit nudge */
.chat-fab__dot{
  position:absolute;top:-3px;right:-3px;
  width:12px;height:12px;border-radius:50%;
  background:#c0392b;border:2px solid var(--bg);
  opacity:0;transform:scale(0);
  transition:opacity .3s,transform .3s var(--chat-ease);
}
.chat-fab.has-nudge .chat-fab__dot{opacity:1;transform:scale(1)}

/* ============================= PANEL ============================= */
.chat-panel{
  position:fixed;
  right:24px;bottom:24px;
  z-index:9998;
  width:var(--chat-w);
  height:var(--chat-h);
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--chat-r);
  box-shadow:0 30px 80px rgba(0,0,0,.26),inset 0 1px 0 var(--glass-highlight);
  overflow:hidden;
  /* closed state */
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.97);
  transform-origin:100% 100%;
  transition:opacity .3s var(--chat-ease),transform .34s var(--chat-ease),visibility .34s;
}
.chat-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* ---- title bar: mirrors the hero terminal chrome ---- */
.chat-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 13px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line-2);
  flex:none;
}
.chat-dot{width:11px;height:11px;border-radius:50%;flex:none}
.chat-dot--r{background:#e05c4b}
.chat-dot--y{background:#e0b64b}
.chat-dot--g{background:#5aa86d}
.chat-title{
  font-family:var(--mono);font-size:11.5px;color:var(--g2);
  margin-left:6px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-x{
  width:28px;height:28px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:7px;
  background:none;color:var(--g2);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.chat-x:hover{background:var(--glass-fill-2);color:var(--white);border-color:var(--line-2)}
.chat-x:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.chat-x svg{width:14px;height:14px}

/* ---- message log ---- */
.chat-log{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 14px 8px;
  display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-3) transparent;
}
.chat-log::-webkit-scrollbar{width:8px}
.chat-log::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.chat-log::-webkit-scrollbar-track{background:transparent}

.chat-msg{
  max-width:88%;
  padding:10px 13px;
  border-radius:12px;
  font-size:13.5px;
  line-height:1.62;
  animation:chat-in .3s var(--chat-ease) both;
}
@keyframes chat-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.chat-msg--bot{
  align-self:flex-start;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--g1);
  border-bottom-left-radius:4px;
}
.chat-msg--user{
  align-self:flex-end;
  background:var(--ok);
  color:var(--ok-ink);
  border-bottom-right-radius:4px;
  font-weight:500;
}
.chat-msg p{margin:0 0 8px}
.chat-msg p:last-child{margin:0}
.chat-msg strong{font-weight:700;color:var(--white)}
.chat-msg code{
  font-family:var(--mono);font-size:12px;
  background:rgba(0,0,0,.06);padding:1.5px 5px;border-radius:4px;
}
.chat-msg ul{margin:6px 0 8px;padding-left:17px}
.chat-msg li{margin-bottom:4px}
.chat-msg a{color:var(--ok-bright);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.chat-msg--user a{color:var(--ok-ink)}
.chat-msg a:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:2px}

/* ordered stage list rendered as a compact terminal table */
.chat-stages{
  list-style:none;margin:8px 0;padding:0;
  font-family:var(--mono);font-size:12px;
}
.chat-stages li{
  display:flex;gap:9px;
  padding:3px 0;
  border-bottom:1px dashed var(--line);
}
.chat-stages li:last-child{border-bottom:none}
.chat-stages b{color:var(--ok-bright);flex:none;font-weight:600}

/* source attribution under an answer */
.chat-src{
  margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--g3);
}
.chat-src a{color:var(--g2);font-weight:600}

/* ---- typing indicator ---- */
.chat-typing{
  align-self:flex-start;
  display:flex;gap:4px;align-items:center;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;border-bottom-left-radius:4px;
}
.chat-typing i{
  width:6px;height:6px;border-radius:50%;
  background:var(--g3);
  animation:chat-bounce 1.15s var(--chat-ease) infinite;
}
.chat-typing i:nth-child(2){animation-delay:.14s}
.chat-typing i:nth-child(3){animation-delay:.28s}
@keyframes chat-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* ---- suggestion chips ---- */
.chat-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 14px 10px;
  flex:none;
}
.chat-chip{
  font-family:var(--mono);font-size:11px;
  padding:6px 11px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:var(--bg);
  color:var(--g1);
  cursor:pointer;
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--chat-ease);
}
.chat-chip:hover{background:var(--ok);border-color:var(--ok);color:var(--ok-ink);transform:translateY(-1px)}
.chat-chip:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

/* ---- composer ---- */
.chat-form{
  display:flex;gap:8px;align-items:center;
  padding:11px 12px;
  border-top:1px solid var(--line-2);
  background:var(--panel-2);
  flex:none;
}
.chat-prompt{font-family:var(--mono);font-size:14px;color:var(--ok);font-weight:700;flex:none}
.chat-input{
  flex:1;min-width:0;
  padding:10px 12px;
  border:1px solid var(--line-2);
  border-radius:9px;
  background:var(--bg);
  color:var(--white);
  font-family:var(--mono);font-size:13px;
  transition:border-color .25s,box-shadow .25s;
}
.chat-input::placeholder{color:var(--g3)}
.chat-input:focus{outline:none;border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-dim)}
.chat-send{
  width:38px;height:38px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:9px;
  background:var(--ok);color:var(--ok-ink);
  cursor:pointer;
  transition:background .25s,transform .25s var(--chat-ease);
}
.chat-send:hover{background:var(--ok-bright);transform:translateY(-1px)}
.chat-send:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.chat-send:disabled{opacity:.45;pointer-events:none}
.chat-send svg{width:16px;height:16px}

/* screen-reader-only helper */
.chat-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================= RESPONSIVE ============================= */
@media (max-width:640px){
  /* full-height sheet on phones — a floating card is unusable at this width */
  .chat-panel{
    right:0;bottom:0;left:0;
    width:100%;height:100%;
    max-height:100%;
    border-radius:0;
    border-left:none;border-right:none;border-bottom:none;
  }
  .chat-fab{right:16px;bottom:16px;height:48px;font-size:12.5px}
  #toasts{bottom:80px;right:16px;left:16px}
  .chat-msg{max-width:92%}
}

/* iOS keyboards shrink the viewport; prefer dynamic units where supported */
@supports (height:100dvh){
  @media (max-width:640px){ .chat-panel{height:100dvh} }
}

/* ============================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  .chat-panel{transition:opacity .01ms,visibility .01ms;transform:none}
  .chat-panel.open{transform:none}
  .chat-fab{transition:background .01ms}
  .chat-fab:hover{transform:none}
  .chat-fab__cursor{animation:none}
  .chat-msg{animation:none}
  .chat-typing i{animation:none;opacity:.6}
  .chat-chip:hover,.chat-send:hover{transform:none}
}

/* ============================= NO-JS ============================= */
/* The assistant is injected by chat.js, so nothing renders without it and
   there is no empty shell to hide. This only guards the reverse case: markup
   present before the script has initialised it. */
.chat-panel:not(.ready){pointer-events:none}
.chat-panel.ready{pointer-events:auto}