/* AI guide widget. Pages theme it with --g-* variables. */
:root {
  --g-w: 380px;
  --g-bg: #12131a; --g-panel: #181a23; --g-line: #262938; --g-text: #e9eaf0; --g-dim: #8b8fa3;
  --g-accent: #7c6cff; --g-accent-2: #3dd6c6; --g-me: #2a2d3d; --g-ai: #1f2230;
}
.guide {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--g-w); z-index: 50;
  display: flex; flex-direction: column; color: var(--g-text);
  background: var(--g-bg);
  background-image: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--g-accent) 10%, transparent), transparent 60%), radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--g-accent-2) 9%, transparent), transparent 55%);
  border-left: 1px solid var(--g-line); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  font: 15px/1.45 var(--g-font, system-ui, sans-serif);
}
body.guide-open .guide { transform: none; }
@media (min-width: 861px) { body.guide-open { padding-right: var(--g-w); } body { transition: padding-right .35s cubic-bezier(.2,.8,.2,1); } }
/* Claude-style chat: assistant answers as clean text, your messages as a soft pill, a calm composer. */
.g-head { position: static; width: auto; inset: auto; margin: 0; display: flex; align-items: center; gap: 10px; padding: 15px 14px 13px; border-bottom: 1px solid var(--g-line); background: transparent; }
.g-ava { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex: none;
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)); color: #fff; }
.g-ava svg { width: 18px; height: 18px; }
.g-who { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.g-who b { font-size: 14.5px; letter-spacing: -.01em; }
.g-status { font-size: 11.5px; color: var(--g-dim); }
.g-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; margin-right: 6px; vertical-align: 1px; }
.g-icon { background: none; border: 1px solid transparent; color: var(--g-dim); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.g-icon:hover { border-color: var(--g-line); color: var(--g-text); }
.g-log { flex: 1; overflow-y: auto; padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }
.g-msg { white-space: normal; overflow-wrap: anywhere; animation: g-in .25s ease; }
/* assistant: text-forward, no bubble */
.g-msg.ai { align-self: stretch; max-width: 100%; color: var(--g-text); line-height: 1.6; font-size: 15px; }
.g-msg.ai b { font-weight: 650; }
.g-msg.ai.streaming::after { content: ''; display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px; margin-left: 2px;
  background: var(--g-accent); border-radius: 1px; animation: g-blink 1.1s steps(2, start) infinite; }
@keyframes g-blink { 50% { opacity: 0 } }
/* you: a soft pill on the right */
.g-msg.me { align-self: flex-end; max-width: 84%; background: var(--g-me); color: var(--g-text); padding: 9px 14px; border-radius: 16px 16px 5px 16px; font-size: 14.5px; }
.g-msg.err { align-self: stretch; color: #ff8095; }
.g-msg.typing { display: flex; gap: 5px; padding: 3px 0; align-self: flex-start; }
.g-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-dim); animation: g-dot 1s infinite; }
.g-msg.typing i:nth-child(2) { animation-delay: .15s } .g-msg.typing i:nth-child(3) { animation-delay: .3s }
@keyframes g-dot { 0%, 60%, 100% { opacity: .3; transform: none } 30% { opacity: 1; transform: translateY(-3px) } }
@keyframes g-in { from { opacity: 0; transform: translateY(6px) } }
.g-chips { display: none; }
.g-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 2px; animation: g-in .3s ease; }
.g-chip { border: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-accent) 7%, transparent);
  color: var(--g-text); border-radius: 10px; padding: 7px 13px; font: inherit; font-size: 13.5px; cursor: pointer; animation: g-in .3s ease; transition: .18s; }
.g-chip:hover { border-color: color-mix(in srgb, var(--g-accent) 60%, transparent); background: color-mix(in srgb, var(--g-accent) 14%, transparent); }
.g-form { display: flex; padding: 10px 12px 12px; background: transparent; }
.g-inwrap { display: flex; align-items: flex-end; gap: 6px; width: 100%; border: 1px solid var(--g-line); background: var(--g-panel); border-radius: 18px; padding: 6px 6px 6px 14px; transition: border-color .2s, box-shadow .2s; }
.g-inwrap:focus-within { border-color: color-mix(in srgb, var(--g-accent) 55%, var(--g-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 14%, transparent); }
.g-form textarea { flex: 1; resize: none; border: 0; background: none; color: var(--g-text); padding: 7px 0; font: inherit; outline: none; max-height: 120px; line-height: 1.45; }
.g-form textarea::placeholder { color: var(--g-dim); }
.g-send { width: 34px; height: 34px; flex: none; border: 0; border-radius: 11px; background: var(--g-accent); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; transition: .18s; }
.g-send:hover { filter: brightness(1.08); }
.g-foot a { float: right; color: var(--g-dim); text-decoration: none; }
.g-foot a:hover { color: var(--g-text); }
.g-foot { font-size: 11px; color: var(--g-dim); padding: 0 16px 9px; background: transparent; min-height: 6px; }
.g-fab { position: fixed; right: 18px; bottom: 18px; z-index: 49; border: 0; border-radius: 999px; padding: 12px 18px 12px 12px;
  display: flex; align-items: center; gap: 10px; font: 600 15px var(--g-font, system-ui, sans-serif); color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--g-accent), color-mix(in srgb, var(--g-accent) 60%, var(--g-accent-2)));
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--g-accent) 70%, transparent); transition: transform .2s, opacity .2s; }
.g-fab span { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
body.guide-open .g-fab { opacity: 0; pointer-events: none; transform: translateY(10px); }
.g-teaser { position: fixed; right: 18px; bottom: 82px; z-index: 49; max-width: min(320px, calc(100vw - 36px)); text-align: left; cursor: pointer;
  background: var(--g-bg); color: var(--g-text); border: 1px solid var(--g-line); border-radius: 18px 18px 6px 18px; padding: 12px 14px;
  font: 14px/1.45 var(--g-font, system-ui, sans-serif); box-shadow: 0 18px 50px -12px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: .4s cubic-bezier(.2,.9,.2,1.2); pointer-events: none; }
.g-teaser.on { opacity: 1; transform: none; pointer-events: auto; }
.g-teaser b { display: block; font-size: 12px; color: var(--g-accent); margin-bottom: 3px; }
body.guide-open .g-teaser { display: none; }
.g-fab { animation: g-fab 2.8s ease-in-out 1.2s 3; }
@keyframes g-fab { 0%, 100% { transform: none } 10% { transform: scale(1.08) } 20% { transform: none } }
.g-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 80; transition: .35s;
  background: #1f2a24; color: #b8f5cf; border: 1px solid #2f5c42; padding: 12px 18px; border-radius: 12px; font: 14px system-ui, sans-serif; }
.g-toast.on { opacity: 1; transform: translate(-50%, 0); }
.g-flash { animation: g-flash 1.6s ease; }
@keyframes g-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent } 25% { box-shadow: 0 0 0 4px var(--g-accent), 0 0 40px color-mix(in srgb, var(--g-accent) 50%, transparent) } }
@media (min-width: 861px) and (max-width: 1180px) { :root { --g-w: 320px; } }
@media (min-width: 861px) { body.guide-open .modal { right: var(--g-w); } }
/* a page's fixed top bar does not slide under the panel */
@media (min-width: 861px) { body.guide-open :is(header, nav.top, .journey, .hdr, .top-bar) { right: var(--g-w) !important; } }
@media (max-width: 860px) {
  body.guide-peek .guide { height: 34vh; }
  body.guide-peek .g-head { cursor: pointer; }
  body.guide-peek .g-head::after { content: 'tap to expand'; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 10.5px; color: var(--g-dim); }
  .guide { transition: transform .35s cubic-bezier(.2,.8,.2,1), height .35s ease; top: auto; height: min(78vh, 640px); width: 100%; border-left: 0; border-top: 1px solid var(--g-line);
    border-radius: 18px 18px 0 0; transform: translateY(105%); box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
  .g-head { position: relative; }
}