/* Pointing at things for the person (uiguide.js, docs/agent-bridge/UI-CONTEXT.md section 3.5): the callout, the rings round
   what the agent names and the numbered badges in the viewport. Everything lives under .ug-, so nothing here reaches the rest of
   the page and nothing of the page's bare-tag rules (section, h2, .row, .part, .model, .mat) reaches in; the markdown renderer
   never makes an h1..h6. The tokens are the page's (--panel, --panel-2, --line, --text, --dim, --accent, --agent, --warn) with the
   same values as fallbacks (the values app.css and agentui.css define on :root), which is what lets tests/ui_guide_preview.html show
   it without the page. The page has one theme, the dark one of app.css, so the guide has no theme of its own and does not follow the
   browser's prefers-color-scheme: a light set here would only mix light halos and shadows into the dark page. A page that ever gains a
   light theme gives the guide that theme by redefining those tokens. The violet is the agent's alone (as in agentui.css): the page's blue means "yours", so the answer
   buttons are blue and everything the agent draws is violet. Layers: the sheet dock is 30, the agent window 40, the log 50,
   this 60 (the callout is the only part that takes the pointer), the "session is gone" banner 80. */

.ug-root {
  --ug-agent: var(--agent, #b59cff);
  --ug-agent-ink: #17131f;                              /* the text on a violet disc */
  --ug-panel: var(--panel, #232428);
  --ug-panel2: var(--panel-2, #2b2d32);
  --ug-line: var(--line, #35373d);
  --ug-text: var(--text, #d8dae0);
  --ug-dim: var(--dim, #8c9099);
  --ug-accent: var(--accent, #4ea1ff);
  --ug-accent-ink: #10151c;
  --ug-warn: var(--warn, #e0a33e);
  --ug-halo: rgba(14, 15, 18, .85);                      /* the thin outer line that keeps a violet ring readable on a violet or a white surface */
  --ug-glow: rgba(181, 156, 255, .55);
  --ug-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  --ug-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ug-root *, .ug-root *::before, .ug-root *::after { box-sizing: border-box; }
.ug-root [hidden] { display: none !important; }
.ug-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------------------------------------------------------------- rings and badges */

/* A ring is a box on the page's own box, a pixel or three outside it. The thin halo outside the violet line is what keeps it
   visible on a surface of its own colour. It never takes the pointer: the control under it still works. */
.ug-ring {
  position: absolute; border: 2px solid var(--ug-agent); border-radius: 7px;
  box-shadow: 0 0 0 1px var(--ug-halo), 0 0 12px 2px var(--ug-glow);
  animation: ug-pulse 1.5s ease-in-out infinite;
}
.ug-ring.hot { border-width: 3px; animation-duration: .9s; }
.ug-ring-n {
  position: absolute; left: -11px; top: -11px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--ug-agent); color: var(--ug-agent-ink); font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 1.5px var(--ug-halo);
}

/* A badge is centred on its point. In the middle of the view it is a numbered disc; on the edge it also has an arrow that
   points at the thing, turned by --ug-angle (0 = right, 90 = down). */
.ug-badge { position: absolute; width: 0; height: 0; }
.ug-badge-disc {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ug-agent); color: var(--ug-agent-ink); font-size: 13px; font-weight: 700; line-height: 1;
  border: 2px solid var(--ug-halo); box-shadow: 0 0 0 2px var(--ug-agent), 0 3px 10px rgba(0, 0, 0, .45);
  animation: ug-pop 1.5s ease-in-out infinite;
}
.ug-badge.hot .ug-badge-disc { width: 32px; height: 32px; left: -16px; top: -16px; font-size: 15px; }
.ug-badge-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--ug-angle, 0deg)); display: none; }
.ug-badge.edge .ug-badge-arrow { display: block; }
.ug-badge-arrow::after {
  content: ""; position: absolute; left: 14px; top: -7px;
  border: 7px solid transparent; border-left: 11px solid var(--ug-agent); border-right: 0;
  filter: drop-shadow(0 0 1px var(--ug-halo));
}

/* ---------------------------------------------------------------- the callout */

.ug-callout {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: auto;
  width: min(360px, calc(100vw - 20px)); max-width: calc(100vw - 20px);
  background: var(--ug-panel); color: var(--ug-text);
  border: 1px solid var(--ug-agent); border-radius: 10px;
  box-shadow: var(--ug-shadow), 0 0 0 3px color-mix(in srgb, var(--ug-agent) 25%, transparent);
  animation: ug-in .16s ease-out;
}
.ug-callout[data-asking="1"] { border-width: 2px; }

.ug-head { display: flex; align-items: center; gap: 7px; padding: 7px 6px 4px 12px; min-width: 0; }
.ug-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ug-agent); }
.ug-agent { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ug-agent); }
.ug-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ug-x {
  flex: none; margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 5px; padding: 0;
  background: none; color: var(--ug-dim); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.ug-x:hover, .ug-x:focus-visible { color: var(--ug-text); background: var(--ug-panel2); outline: none; }

.ug-body { margin-right: 6px; padding: 2px 6px 8px 12px; max-height: min(38vh, 280px); overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
.ug-question { margin-top: 6px; font-weight: 600; }
.ug-question .md strong { color: inherit; }

/* The markdown the renderer makes, scoped here so it looks right without agentchat.css. */
.ug-body .md > :first-child { margin-top: 0; }
.ug-body .md > :last-child { margin-bottom: 0; }
.ug-body .md p { margin: 0 0 .5em; }
.ug-body .md ul, .ug-body .md ol { margin: 0 0 .5em; padding-left: 1.3em; }
.ug-body .md li { margin: .1em 0; }
.ug-body .md strong { font-weight: 700; color: var(--ug-text); }
.ug-body .md a { color: var(--ug-accent); text-decoration: underline; text-underline-offset: 2px; }
.ug-body .md .md-host { color: var(--ug-warn); font-size: .92em; font-family: var(--ug-mono); }
.ug-body .md code.md-ic { padding: 0 4px; border-radius: 4px; background: var(--ug-panel2); font-family: var(--ug-mono); font-size: .92em; }
.ug-body .md pre.md-code { margin: 0 0 .5em; padding: 6px 8px; border-radius: 6px; background: var(--ug-panel2); font-family: var(--ug-mono); font-size: 12px; overflow-x: auto; }
.ug-body .md pre.md-code code { font: inherit; background: none; padding: 0; }
.ug-body .md .md-h { margin: .5em 0 .25em; font-weight: 700; }
.ug-body .md blockquote { margin: 0 0 .5em; padding-left: 10px; border-left: 3px solid var(--ug-line); color: var(--ug-dim); }
.ug-body .md .md-note { color: var(--ug-dim); font-style: italic; }
.ug-body .md table { border-collapse: collapse; font-size: 12px; }
.ug-body .md th, .ug-body .md td { padding: 2px 7px; border: 1px solid var(--ug-line); text-align: left; }

/* Which number is which: one chip per target. Pressing one scrolls to it again; resting on one makes its ring stand out. */
.ug-legend { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; }
.ug-leg {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 3px;
  border: 1px solid var(--ug-line); border-radius: 12px; background: var(--ug-panel2); color: var(--ug-text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.ug-leg:hover, .ug-leg:focus-visible { border-color: var(--ug-agent); outline: none; }
.ug-leg.off { opacity: .55; }
.ug-n {
  flex: none; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 9px;
  background: var(--ug-agent); color: var(--ug-agent-ink); font-size: 11px; font-weight: 700; line-height: 1;
}
.ug-leg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ug-note { padding: 0 12px 8px; color: var(--ug-warn); font-size: 12px; overflow-wrap: anywhere; }

.ug-text-row { display: flex; gap: 6px; padding: 0 12px 8px; }
.ug-text {
  flex: 1 1 auto; min-width: 0; padding: 4px 8px; border: 1px solid var(--ug-line); border-radius: 5px;
  background: var(--ug-panel2); color: var(--ug-text); font: inherit;
}
.ug-text:focus-visible { outline: 2px solid var(--ug-accent); outline-offset: 1px; }

.ug-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0 12px 10px; }
.ug-btn {
  min-height: 30px; padding: 4px 14px; border: 1px solid var(--ug-line); border-radius: 6px;
  background: var(--ug-panel2); color: var(--ug-text); font: inherit; cursor: pointer;
}
.ug-btn:hover { border-color: var(--ug-accent); }
.ug-btn:focus-visible { outline: 2px solid var(--ug-accent); outline-offset: 2px; }
.ug-primary { background: var(--ug-accent); border-color: var(--ug-accent); color: var(--ug-accent-ink); font-weight: 600; }
.ug-send { min-height: 28px; padding: 3px 11px; }
.ug-btn:disabled, .ug-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ug-btn:disabled:hover { border-color: var(--ug-line); }

/* A form: several questions in one callout, round buttons for "one", checkboxes for "any number", a text box when the question takes one. */
.ug-form { display: flex; flex-direction: column; gap: 10px; margin: 0 6px 8px 0; padding: 0 6px 0 12px; max-height: min(44vh, 340px); overflow-y: auto; scrollbar-width: thin; }
.ug-q { display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--ug-line); }
.ug-q:last-child { border-bottom: 0; padding-bottom: 0; }
.ug-q-head { display: flex; gap: 7px; align-items: baseline; font-weight: 600; }
.ug-q-head .md > :last-child { margin-bottom: 0; }
.ug-q-text { min-width: 0; overflow-wrap: anywhere; }
.ug-qn {
  flex: none; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ug-panel2); border: 1px solid var(--ug-line);
  font-size: 11px; line-height: 16px; text-align: center; color: var(--ug-dim);
}
.ug-opts { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.ug-hint { font-size: 11px; color: var(--ug-dim); }
.ug-opt { display: flex; gap: 8px; align-items: flex-start; padding: 3px 6px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.ug-opt:hover { background: var(--ug-panel2); }
.ug-opt-input { flex: none; margin: 3px 0 0; accent-color: var(--ug-accent); cursor: pointer; }
.ug-opt-input:focus-visible { outline: 2px solid var(--ug-accent); outline-offset: 2px; }
.ug-form .ug-text { flex: none; width: 100%; box-sizing: border-box; }

/* The time left, as a line that runs out. It is only a drawing: the timer is the script's. */
.ug-timer { height: 2px; margin: 0 1px; border-radius: 0 0 9px 9px; overflow: hidden; background: transparent; }
.ug-timer > i { display: block; height: 100%; background: var(--ug-agent); opacity: .7; transform-origin: left center; animation: ug-run var(--ug-timeout, 20s) linear forwards; }

/* The pointer on the card's edge that faces the target: a square turned 45 degrees, half of it hidden under the card. */
.ug-arrow {
  position: absolute; width: 11px; height: 11px; background: var(--ug-panel);
  border: 1px solid var(--ug-agent); border-right: 0; border-bottom: 0; display: none;
}
.ug-callout[data-asking="1"] .ug-arrow { border-width: 2px 0 0 2px; }
.ug-callout[data-side="right"]  .ug-arrow { display: block; left: -7px;  top: var(--ug-arrow, 20px);  margin-top: -5px;  transform: rotate(-45deg); }
.ug-callout[data-side="left"]   .ug-arrow { display: block; right: -7px; top: var(--ug-arrow, 20px);  margin-top: -5px;  transform: rotate(135deg); }
.ug-callout[data-side="bottom"] .ug-arrow { display: block; top: -7px;   left: var(--ug-arrow, 20px); margin-left: -5px; transform: rotate(45deg); }
.ug-callout[data-side="top"]    .ug-arrow { display: block; bottom: -7px; left: var(--ug-arrow, 20px); margin-left: -5px; transform: rotate(225deg); }

@keyframes ug-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--ug-halo), 0 0 6px 0 var(--ug-glow); }
  50%      { box-shadow: 0 0 0 1px var(--ug-halo), 0 0 16px 4px var(--ug-glow); }
}
@keyframes ug-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ug-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ug-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* A phone: a little more room to press, a card as wide as the window. */
@media (max-width: 520px) {
  .ug-callout { width: calc(100vw - 20px); font-size: 14px; }
  .ug-btn { min-height: 38px; padding: 6px 16px; }
  .ug-x { width: 34px; height: 34px; }
  .ug-leg { padding: 4px 11px 4px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ug-ring, .ug-badge-disc, .ug-callout { animation: none; }
  .ug-timer { display: none; }
}