/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The guide in the corner.
   Its own file because it is injected into pages that share nothing else
   -- the marketplace and the door -- and because a floating panel with a
   z-index belongs somewhere findable when it one day sits on top of
   something it should not. */

.guide{position:fixed;right:18px;bottom:18px;z-index:1200;
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* The launcher. Wide enough to say what it does: a bare chat icon in a
   corner is furniture people have learned to ignore. */
.gbubble{display:flex;align-items:center;gap:9px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;font:inherit;font-weight:600;
  padding:11px 16px;border-radius:24px;
  box-shadow:0 2px 6px rgba(16,42,66,.18),0 10px 26px rgba(16,42,66,.22)}
.gbubble:hover{filter:brightness(1.07)}
.gdot{width:8px;height:8px;border-radius:50%;background:#8fd6b4;flex:none}
/* A steady dot, not a pulsing one. A blinking badge in the corner of a
   page reads as an unread notification, which is a claim that something
   happened -- and nothing has. */
.guide.on .gbubble{display:none}

/* `display:flex` BEATS the hidden attribute, and that is not a detail.
   The browser's own `[hidden]{display:none}` is a plain element rule, so
   any display declared here wins it -- the closed panel stayed laid out,
   invisible only because nothing had been drawn in it, and sat on top of
   the page swallowing every click. The first symptom was that the sign-in
   door's "Browse as a guest" button stopped working, which is nowhere
   near this file. State it explicitly and it cannot come back. */
.gpanel[hidden]{display:none}
.gpanel{width:min(370px,calc(100vw - 32px));height:min(560px,calc(100vh - 40px));
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 2px 8px rgba(16,42,66,.14),0 18px 48px rgba(16,42,66,.26)}
.ghead{display:flex;align-items:center;gap:9px;padding:10px 12px 10px 12px;
  background:var(--accent);color:#fff}
.gname{font-weight:600;letter-spacing:.01em}
/* Who she works for, under her name. Small on purpose: it is provenance,
   not a second title, and a stranger wants to know they are still talking
   to Datum rather than to some widget that wandered onto the page. */
.grole{font-size:11px;opacity:.82;margin-left:-5px;align-self:flex-end;
  padding-bottom:2px}
.gclose{margin-left:auto;background:transparent;border:0;color:#fff;
  font-size:21px;line-height:1;cursor:pointer;padding:0 4px}

.glog{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;
  flex-direction:column;gap:9px;background:var(--bg)}
.gmsg{max-width:88%;padding:9px 12px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:4px}
/* Her mark. `currentColor` in the panel head (white on accent) and the
   accent itself in the transcript, so one SVG serves both without a
   second copy in a different color. */
/* The portrait carries its own colors -- every fill and gradient is in
   the SVG, none of them inherited. A face cannot take the color of what
   it sits on the way the monochrome mark before it could: skin tinted to
   the panel head's white made her a ghost, and tinted to the accent made
   her blue. She is the same person on every background, which is rather
   the point of her.

   Bigger than the old mark, too. A rendered face at 26px is a smudge; at
   32-38 the shading, the eyes and the jaw all survive, and those three
   are most of what separates a portrait from a sticker. */
.gav{width:32px;height:32px;flex:none;border-radius:50%;
  box-shadow:0 1px 2px rgba(16,42,66,.18)}
.ghead .gav{width:34px;height:34px;
  box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.gmsg.intro .gav{width:38px;height:38px;margin-top:1px}
.gbubble .gav{width:26px;height:26px;margin:-2px 0 -2px -6px;
  box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* The one message that introduces her sits beside the mark. Only the
   first: an avatar on every line turns a conversation into a list. */
.gmsg.intro{display:flex;gap:9px;align-items:flex-start;max-width:100%;
  color:var(--accent)}
.gmsg.intro > span{color:var(--ink)}

/* The visitor's own answers, mirrored to the other side. Without this the
   transcript reads as one voice and the choices already made vanish. */
.gmsg.me{align-self:flex-end;background:var(--accent);color:#fff;border-color:transparent;
  border-bottom-left-radius:13px;border-bottom-right-radius:4px}

.gfoot{padding:10px 12px 12px;border-top:1px solid var(--line);
  background:var(--card);display:flex;flex-wrap:wrap;gap:7px}
.gchip{border:1px solid var(--accent);background:var(--card);color:var(--accent);
  font:inherit;font-weight:600;font-size:13px;padding:7px 12px;border-radius:16px;
  cursor:pointer}
.gchip:hover{background:var(--accent2)}

/* A listing, inside the conversation. A link, so it behaves like one --
   middle-click and open-in-new-tab both work, which they would not if
   this were a div with an onclick. */
.gcard{display:grid;gap:2px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  margin:0 0 7px;background:var(--card)}
.gcard:last-child{margin-bottom:0}
.gcard:hover{border-color:var(--accent)}
.gcref{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--mut);
  text-transform:uppercase}
.gcprice{font-size:17px;font-weight:700;letter-spacing:-.01em}
.gcmeta{font-size:12.5px;color:var(--ink2)}
.gcwhy{font-size:12.5px;color:var(--accent);margin-top:3px}

.gform{display:grid;gap:7px;width:100%}
.gform input{font:inherit;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink);width:100%}
.gsend{border:0;background:var(--accent);color:#fff;font:inherit;font-weight:600;
  padding:9px 14px;border-radius:8px;cursor:pointer}

/* Off-screen rather than display:none -- a bot that skips hidden inputs
   is a bot this would not catch. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* On a phone the panel is the screen. A 370px card floating over a 390px
   viewport is a modal pretending not to be one. */
@media (max-width:520px){
  .guide{right:10px;bottom:10px;left:10px}
  .gpanel{width:100%;height:min(72vh,560px)}
}

/* Out of the way while a listing is open -- app.js sets `reading` on the
   body. Hidden rather than moved: there is nowhere on a full-height side
   panel for her to go that is not over something. */
body.reading .guide{display:none}