/* ==========================================================================
   chat-widget.css — the "Dash" help chat button + panel.
   Self-contained: uses CSS variables where a page defines them, but every color
   has a hard fallback so it looks correct on ANY page (marketing, app, auth).
   Loaded together with chat-widget.js on every page.
   ========================================================================== */

.d8chat-fab{
  position:fixed;bottom:24px;right:24px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:var(--grad,linear-gradient(120deg,#6d5efc,#22d3ee));border:0;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(109,94,252,.8);transition:.2s}
.d8chat-fab:hover{transform:scale(1.08)}
.d8chat-fab svg{width:26px;height:26px}

.d8chat-panel{
  position:fixed;bottom:92px;right:24px;z-index:70;width:340px;max-width:calc(100vw - 48px);
  background:var(--bg2,#0b0e1a);border:1px solid var(--panel-brd,rgba(255,255,255,.09));
  border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);display:none;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.d8chat-panel.open{display:block;animation:d8chatpop .25s ease}
@keyframes d8chatpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

.d8chat-head{background:var(--grad,linear-gradient(120deg,#6d5efc,#22d3ee));color:#08111e;
  padding:16px 18px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:space-between}
.d8chat-head .x{cursor:pointer;font-weight:700;opacity:.75;background:none;border:0;color:#08111e;font-size:18px;line-height:1}
.d8chat-head .x:hover{opacity:1}

/* Taller reading area, but capped against the viewport so the panel can never
   run off a short screen (e.g. a laptop at 768px tall). */
/* height (not max-height) — max-height only caps the box, so with one or two
   messages the panel still collapsed to the text and looked unchanged. A real
   height keeps the window tall from the moment it opens. min() shrinks it on a
   short screen so the panel can never run off the top. */
.d8chat-body{padding:16px 18px;font-size:14px;color:var(--muted,#98a0c9);
  height:min(480px, calc(100vh - 250px));min-height:180px;overflow-y:auto}
.d8chat-msg{background:var(--panel,rgba(255,255,255,.06));border:1px solid var(--panel-brd,rgba(255,255,255,.09));
  border-radius:12px;padding:10px 13px;margin-bottom:10px;color:var(--txt,#e9ecff);line-height:1.5}
.d8chat-msg.mine{background:rgba(109,94,252,.16);border-color:rgba(109,94,252,.5)}
.d8chat-msg a{color:var(--brand2,#22d3ee)}

.d8chat-input{display:flex;border-top:1px solid var(--panel-brd,rgba(255,255,255,.09))}
.d8chat-input input{flex:1;border:0;border-radius:0;background:#fff;color:#08111e;
  -webkit-appearance:none;appearance:none;padding:12px 14px;font-size:14px;font-family:inherit}
.d8chat-input input::placeholder{color:#6b7280}
.d8chat-input input:focus{outline:none}
.d8chat-input button{background:none;border:0;color:var(--brand2,#22d3ee);font-weight:700;padding:0 16px;cursor:pointer;font-size:14px}