/* =========================================================
   Figma UI3 components, as they look in the editor today.
   Used by the solution prototype and by the ideation cards,
   so both show the same Figma. Icons live in figma-icons.svg.
   ========================================================= */

/* Figma UI3 light theme. Every UI color comes from these tokens,
   so the whole editor can switch theme here. */
:root {
  --fig-panel: #ffffff;
  --fig-edge: #e6e6e6;        /* lines between panels */
  --fig-line: #e6e6e6;        /* lines inside panels, outlined cards */
  --fig-field: #f5f5f5;       /* inputs, active tab */
  --fig-text: rgba(0, 0, 0, 0.9);
  --fig-text-2: rgba(0, 0, 0, 0.5);
  --fig-text-3: rgba(0, 0, 0, 0.3);
  --fig-blue: #0d99ff;        /* Share, active tool */
  --fig-blue-soft: #e5f4ff;
  --fig-blue-text: #007be5;
  --fig-select: #0d99ff;      /* canvas selection */
  --fig-canvas: #f5f5f5;
  --fig-toolbar: #ffffff;
  --fig-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --fig-send-off: #e6e6e6;    /* Send before anything is typed */
  --fig-send-off-icon: #ffffff;
}

/* ---------- Shared bits ---------- */
.i { flex: none; width: 16px; height: 16px; color: inherit; }
.i--sm { width: 12px; height: 12px; }
.spacer { flex: 1; }
.icon-btn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; color: var(--fig-text); }

/* ---------- Navigation rail: the icon strip on the editor's far left ---------- */
.rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; background: var(--fig-panel); border-right: 1px solid var(--fig-edge); }
.rail__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--fig-text); }
.rail__sep { flex: none; width: 16px; height: 1px; margin: 2px 0; background: var(--fig-line); }
.rail__btn.is-on { background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.rail__btn--end { margin-top: auto; }

/* ---------- Agent chat panel ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--fig-panel); color: var(--fig-text); font-size: 11px; line-height: 16px; }
.chat__head { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px 0 16px; }
.chat__title { display: flex; flex: 1; flex-direction: column; }
.chat__title b { font-size: 12px; font-weight: 550; }
.chat__title span { color: var(--fig-text-2); }
/* Back to the chat list, before the title (the down chevron turned to point left) */
.chat__head:has(.chat__back) { padding-left: 4px; }
.chat__back .i { transform: rotate(90deg); }
/* Long chat titles cut off with "…" so the header icons always fit */
.chat__title { min-width: 0; }
.chat__title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ai { padding: 1px 4px; border: 1px solid var(--fig-line); border-radius: 4px; font-size: 9px; font-weight: 600; line-height: 12px; color: var(--fig-text-2); }

.chat__thread { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 64px 16px 16px; overflow: auto; }
.chat__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 15px; font-weight: 550; }
.chat__empty-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.chat__empty-mark .i { width: 20px; height: 20px; }

.suggestions { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.suggestion { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--fig-line); border-radius: 8px; font-size: 12px; }
.suggestion span { flex: 1; }
.suggestion__chevron { color: var(--fig-text-2); }

/* ---------- Messages in the chat thread ---------- */
/* What the designer sent: a grey bubble on the right */
.msg-user { align-self: flex-end; max-width: 88%; padding: 8px 10px; border-radius: 12px; background: var(--fig-field); font-size: 12px; line-height: 20px; }
/* The designer's message with their avatar beside it, as in Figma */
.msg-from-you { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.msg-from-you .msg-user { max-width: calc(100% - 26px); }
.avatar { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #9747ff; color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
/* Keeps a mention and the punctuation after it on the same line */
.msg-glue { white-space: nowrap; }
/* The agent's reply: plain text on the panel, no bubble */
.msg-agent { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 18px; }
.msg-agent p { margin: 0; }
/* A plan written as plain numbered text, the way the agent replies today */
.msg-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 16px; }
/* Still working: a dot and a status line */
.msg-status { display: flex; align-items: center; gap: 6px; color: var(--fig-text-2); }
.msg-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--agent); }
/* Live thinking: spinner + rotating status lines while the agent works */
.msg-status--live::before { display: none; }
.msg-spin {
  flex: none; width: 12px; height: 12px; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--agent) 35%, transparent);
  border-top-color: var(--agent); border-radius: 50%;
  animation: msg-spin 0.7s linear infinite;
}
@keyframes msg-spin { to { transform: rotate(360deg); } }
.msg-think { display: grid; }
.msg-think > .msg-status { grid-area: 1 / 1; opacity: 0; animation: msg-think 2.4s linear infinite; }
.msg-think > .msg-status:nth-child(1) { animation-delay: 0s; }
.msg-think > .msg-status:nth-child(2) { animation-delay: 0.8s; }
.msg-think > .msg-status:nth-child(3) { animation-delay: 1.6s; }
@keyframes msg-think {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-spin { animation: none; border-top-color: var(--agent); opacity: 0.7; }
  .msg-think > .msg-status { animation: none; opacity: 0; }
  .msg-think > .msg-status:first-child { opacity: 1; }
}
/* Something the agent guessed rather than read from the prompt. Dashed so it reads as
   "not certain"; in the agent colour because the agent made it up. Click to change. */
.assumed { border-bottom: 1px dashed var(--agent); color: var(--agent); font-weight: 550; }
/* Figma today, after Send: the selection chip sits above the designer's bubble */
.msg-sent { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Figma today, while the agent works: one status line that keeps changing
   (Analyzing, Thinking…), then a list of steps. None of it says what the agent understood.
   Status lines and the step list share one spot and take turns over a 10s loop. */
.agent-work { display: grid; }
.agent-work > * { grid-area: 1 / 1; align-self: start; }
.agent-step { display: flex; margin: 0; align-items: center; gap: 8px; color: var(--fig-text-2); font-size: 12px; line-height: 18px; }
.agent-step .i { flex: none; width: 14px; height: 14px; }
.agent-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Each status shows for 1.5s, one after another (--step sets its turn) */
.agent-work > .agent-step { opacity: 0; animation: agent-status 10s infinite; animation-delay: calc(var(--step) * 1.5s); }
/* After the four statuses (6s), the step list stays until the loop restarts */
.agent-work > .agent-steps { opacity: 0; animation: agent-steps 10s infinite; }
@keyframes agent-status { 0%, 14.9% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes agent-steps { 0%, 59.9% { opacity: 0; } 60%, 100% { opacity: 1; } }
/* Text still in progress: a light sweep across the words */
.agent-shimmer { background: linear-gradient(90deg, var(--fig-text-2) 35%, var(--fig-text) 50%, var(--fig-text-2) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: agent-shimmer 1.6s linear infinite; }
@keyframes agent-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* Without motion: no cycling or sweep, just the finished step list */
@media (prefers-reduced-motion: reduce) {
  .agent-work > .agent-step { display: none; }
  .agent-work > .agent-steps { opacity: 1; animation: none; }
  .agent-shimmer { animation: none; }
}

/* A question the agent needs answered before it carries on */
.msg-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--fig-line); border-radius: 8px; }
.msg-choices { display: flex; flex-wrap: wrap; gap: 6px; }
/* Several questions in one box: a little more room before each next question */
.msg-ask .msg-choices + p { margin-top: 4px; }
.msg-choice { padding: 3px 10px; border: 1px solid var(--fig-line); border-radius: 999px; font-size: 11px; font-weight: 550; line-height: 16px; white-space: nowrap; }
/* The picked answer turns blue */
.msg-choice[aria-pressed="true"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); color: var(--fig-blue-text); }

/* Clickable answers in the interactive demo */
button.msg-choice:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
/* Once a question is answered, the answers not picked step back */
:is(.msg-choices, .msg-options, .msg-previews):has([aria-pressed="true"]) [data-answer]:not([aria-pressed="true"]) { opacity: 0.45; }

/* Answers as a list, each one saying what it would change */
.msg-options { display: flex; flex-direction: column; gap: 4px; }
.msg-option { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 8px; width: 100%; padding: 7px 8px; border: 1px solid var(--fig-line); border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 12px; line-height: 18px; text-align: left; cursor: pointer; }
/* A radio dot, so it reads as "pick one" */
.msg-option::before { content: ""; grid-row: span 2; width: 12px; height: 12px; margin-top: 3px; box-sizing: border-box; border: 1px solid var(--fig-text-3); border-radius: 50%; }
.msg-option b { font-weight: 550; }
.msg-option span { grid-column: 2; color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
.msg-option:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
/* The picked answer (clicked in the ideation demo, or scripted in the prototype) */
.msg-option[aria-pressed="true"],
[data-state="answer"] .msg-option[data-choice="layout"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); }
.msg-option[aria-pressed="true"]::before,
[data-state="answer"] .msg-option[data-choice="layout"]::before { border: 4px solid var(--fig-blue); }
/* The way out: answer in your own words, or let the agent decide */
.msg-escape { display: flex; justify-content: space-between; gap: 8px; color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
.msg-escape span:last-child { color: var(--fig-blue-text); }

/* The vague words in the designer's message, marked so the question can point back to them */
.msg-vague { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--agent) 14%, transparent); box-shadow: inset 0 -1.5px 0 var(--agent); color: inherit; }
/* The agent quotes those words above its question */
.msg-quote { padding-left: 8px; border-left: 2px solid var(--agent); color: var(--fig-text-2); }

/* Answers as small previews of what each one would do to a card */
.msg-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.msg-preview { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--fig-line); border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 11px; line-height: 16px; text-align: left; cursor: pointer; }
.msg-preview b { font-weight: 550; }
.msg-preview:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
.msg-preview[aria-pressed="true"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); }
.msg-preview__thumb { display: grid; place-items: center; padding: 6px; border-radius: 4px; background: var(--fig-canvas); }

/* A question that takes over the top of the composer until it's answered */
.composer__ask { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--fig-line); font-size: 12px; line-height: 18px; }
.composer__ask p { margin: 0; }
.composer__ask-count { color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
/* Several questions: which one this is, with a bar per question that fills as they're reached */
.composer__ask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ask-steps { display: flex; gap: 3px; }
.ask-steps i { width: 14px; height: 3px; border-radius: 2px; background: var(--fig-line); }
.ask-steps i.is-done { background: var(--fig-blue); }
/* An earlier question, already answered, kept as one line */
.composer__ask .composer__ask-answered { color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
/* In the composer toolbar, next to the mic: let the agent decide instead of answering */
.composer__skip { flex: none; color: var(--fig-blue-text); font-size: 11px; line-height: 16px; white-space: nowrap; }

/* ---------- The agent's plan: one checklist, a row per step ---------- */
/* Which mode the agent is in, shown in the panel header (e.g. "Suggest mode") */
/* The whole plan sits in one box: a title bar, the numbered steps, then actions for the whole plan */
.plan { border: 1px solid var(--fig-line); border-radius: 8px; overflow: hidden; font-size: 11px; line-height: 16px; }
.plan p { margin: 0; }
.plan__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--fig-line); background: #f9f9f9; }
.plan__head b { font-weight: 550; }
.plan__head span { display: inline-flex; align-items: center; gap: 4px; color: var(--fig-text-2); }
.plan__head .i { width: 12px; height: 12px; }
.plan__steps { margin: 0; padding: 0; list-style: none; }

/* A step: number and title, with Accept / Reject or its status on the right.
   Below the title: which layers, old → new, and why. */
.plan-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.plan-step + .plan-step { border-top: 1px solid var(--fig-line); }
.plan-step > :not(.plan-step__head) { margin-left: 22px; }
.plan-step__head { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; }
.plan-step__num { position: relative; display: grid; flex: none; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--fig-field); font-size: 10px; font-style: normal; line-height: 1; }
/* Suggest mode: each step has its own colour, shared by its number here and its preview on the canvas,
   so the designer can tell which outline belongs to which step. Kept clear of Figma's selection blue
   and of the green and red used for accepted and rejected. */
:root { --step-1: #e07a00; --step-2: #8b3dff; --step-3: #e5368f; }
.plan--previewed .plan-step:nth-child(1) .plan-step__num { background: var(--step-1); color: #fff; }
.plan--previewed .plan-step:nth-child(2) .plan-step__num { background: var(--step-2); color: #fff; }
.plan--previewed .plan-step:nth-child(3) .plan-step__num { background: var(--step-3); color: #fff; }
.plan-step__title { flex: 1; min-width: 0; font-weight: 550; }
.plan-step__path, .plan-step__why { color: var(--fig-text-2); }
/* Old value struck out in red, new value in green, like tracked changes in a doc */
.plan-step__change s { color: #dc3412; }
.plan-step__change ins { color: #009951; font-weight: 550; text-decoration: none; }

/* Small Accept (✓) and Reject (✕) buttons beside the title */
.plan-step__actions { display: flex; flex: none; gap: 4px; }
.plan-icon-btn { display: grid; place-items: center; width: 20px; height: 18px; padding: 0; border: 1px solid var(--fig-line); border-radius: 5px; font-size: 11px; line-height: 1; }
.plan-icon-btn .i { width: 12px; height: 12px; }
/* The pencil: edit the step's new value */
.plan-icon-btn--edit { color: var(--fig-text-2); }
.plan-icon-btn--accept { color: #009951; }
.plan-icon-btn--reject { color: #dc3412; }
/* Once decided, the buttons give way to the step's status */
.plan-step__status { flex: none; font-size: 11px; font-weight: 550; white-space: nowrap; }
.plan-step__status--accepted, .plan-step__status--applied { color: #009951; }
.plan-step__status--rejected { color: #dc3412; }
/* Not done yet: "Applying…" or "Queued" while the agent works through the plan */
.plan-step__status--pending { color: var(--fig-text-2); font-weight: 400; }
.plan-step__undo { flex: none; color: var(--fig-blue-text); font-size: 11px; font-weight: 550; }
/* Accepted or applied: the step number turns into a green tick */
.plan-step:has(:is(.plan-step__status--accepted, .plan-step__status--applied):not([hidden])) .plan-step__num { background: #14ae5c; color: transparent; }
.plan-step:has(:is(.plan-step__status--accepted, .plan-step__status--applied):not([hidden])) .plan-step__num::after { content: "✓"; position: absolute; color: #fff; font-size: 10px; }
/* Rejected: the step is crossed out and fades back, so the steps that will run stand out */
.plan-step:has(.plan-step__status--rejected:not([hidden])) .plan-step__title { text-decoration: line-through; }
.plan-step:has(.plan-step__status--rejected:not([hidden])) :is(.plan-step__num, .plan-step__title, .plan-step__path, .plan-step__change, .plan-step__why) { opacity: 0.45; }

/* Buttons for the whole plan, in its footer */
.plan-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--fig-line); border-radius: 5px; background: var(--fig-panel); font-size: 11px; font-weight: 550; line-height: 16px; white-space: nowrap; }
.plan-btn--primary { border-color: var(--fig-blue); background: var(--fig-blue); color: #fff; }
/* Nothing accepted yet, so there's nothing to run */
.plan-btn--primary.plan-btn--off { border-color: var(--fig-field); background: var(--fig-field); color: var(--fig-text-3); }

/* The plan's footer: a running count, then the actions for the whole plan */
.plan-foot { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: #f9f9f9; }
.plan-foot p { color: var(--fig-text-2); }
.plan-foot__actions { display: flex; align-items: center; gap: 6px; }
.plan-foot__actions .plan-btn--primary { margin-left: auto; }

/* ---------- The plan while it runs ----------
   A progress bar in the header, a spinner on the running step with its change ticking off layer by layer,
   queued steps faded, and Stop in the footer. A step runs when it has .plan-step--running
   or shows a visible .plan-step__status--running. */
.plan__head .plan__bar { display: grid; flex: 1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0 10px; }
.plan__bar i { height: 3px; border-radius: 2px; background: var(--fig-line); }
.plan__bar i.is-done { background: #14ae5c; }
.plan__bar i.is-on { background: linear-gradient(90deg, var(--agent) 66%, color-mix(in srgb, var(--agent) 25%, white) 66%); }
.plan--running .plan-step__head { font-size: 11px; line-height: 16px; }
.plan--running .plan-step__num { margin-top: 0; }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) { background: color-mix(in srgb, var(--agent) 5%, white); box-shadow: inset 2px 0 0 var(--agent); }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__num { box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); background: none; color: transparent; animation: plan-spin 0.9s linear infinite; }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__title { color: var(--agent); }
.plan-step__status--running { color: var(--agent); font-variant-numeric: tabular-nums; }
.plan-step__change s, .plan-step__change ins { display: inline-flex; align-items: center; gap: 3px; vertical-align: bottom; }
.plan-step__change i { flex: none; width: 11px; height: 11px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 3px; }
/* A miniature of the value, the way a fill shows its color */
.change-preview { flex: none; box-sizing: border-box; }
.change-preview--pad {
  display: inline-block;
  width: 14px; height: 14px;
  padding: var(--pad, 2px);
  border: 1px solid currentColor;
  border-radius: 2px;
}
.change-preview--pad::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: currentColor;
  border-radius: 1px;
}
.change-preview--fixed,
.change-preview--hug,
.change-preview--fill {
  display: inline-flex;
  align-items: center;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.change-preview--fixed { width: 18px; justify-content: center; }
.change-preview--hug { width: auto; }
.change-preview--fill { width: 18px; }
.change-preview--fixed::after,
.change-preview--hug::after,
.change-preview--fill::after {
  content: "";
  height: 4px;
  background: currentColor;
  border-radius: 1px;
}
.change-preview--fixed::after { width: 6px; }
.change-preview--hug::after { width: 8px; margin: 0 2px; }
.change-preview--fill::after { flex: 1; margin: 0 2px; }
.plan-step__layers { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; color: var(--fig-text-2); font-size: 10px; line-height: 15px; }
.plan-step__layers span { white-space: nowrap; }
.plan-step__layers span::before { content: "○ "; color: var(--fig-text-3); }
.plan-step__layers .is-done::before { content: "✓ "; color: #14ae5c; }
.plan-step__layers .is-on { color: var(--agent); font-weight: 550; }
.plan-step__layers .is-on::before { content: "◌ "; color: var(--agent); }
:is(.plan-step--queued, .plan-step:has(.plan-step__status--pending:not([hidden]))) .plan-step__title { font-weight: 500; }
:is(.plan-step--queued, .plan-step:has(.plan-step__status--pending:not([hidden]))) .plan-step__change { opacity: 0.55; }
.plan-foot--running { flex-direction: row; align-items: center; justify-content: space-between; }
.plan-foot--running p { font-variant-numeric: tabular-nums; }
.plan-btn--stop i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; }
@keyframes plan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__num { animation: none; }
}

/* ---------- Evidence marks: what the plan is based on ----------
   Green means the words come from somewhere real: the prompt, a layer, a variable or another frame.
   Purple (the agent's colour) means the agent made it up, so the designer should check it. */
:root {
  --evidence-backed: #3aa776;
  --evidence-guess-soft: color-mix(in srgb, var(--agent) 12%, white);
}
/* Guessed words highlighted inside a step's sentence */
.mark { padding: 0 2px; border-radius: 3px; color: inherit; }
.mark--guess { background: var(--evidence-guess-soft); box-shadow: inset 0 -1.5px 0 var(--agent); }
/* A step's own sentence in the plan, in the same size as its change line */
.plan-step__text { color: var(--fig-text); }
/* Guess rail: a purple bar down each step that holds a guess, like a change bar in a document */
.plan-step--guess { box-shadow: inset 2px 0 0 var(--agent); }
.plan-step--guess .plan-step__num { background: var(--evidence-guess-soft); color: var(--agent); }
/* Plan header summary: "8 backed · 2 guesses", each count in its own colour */
.evidence-summary { display: inline-flex; gap: 4px; color: var(--fig-text-2); }
.evidence-summary b { font-weight: 550; }
.evidence-summary .is-backed { color: var(--evidence-backed); }
.evidence-summary .is-guess { color: var(--agent); }
/* The agent's reason under a guess step, opened by a small "Guess" tag */
.evidence-reason { color: var(--fig-text-2); }
.evidence-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px; background: var(--evidence-guess-soft); color: var(--agent); font-size: 10px; font-weight: 550; line-height: 15px; vertical-align: 1px; }

/* Ways of drawing guesses that lost to the rail, kept for moment 06's Also tried */
/* Quiet guesses: only the step number turns purple, and the guessed words get a dotted underline */
.plan-step--guess-number .plan-step__num { background: var(--evidence-guess-soft); color: var(--agent); }
.mark--dotted { padding: 0; background: none; box-shadow: none; text-decoration: underline dotted var(--agent) 1.5px; text-underline-offset: 3px; }
.evidence-reason b { color: var(--agent); font-weight: 550; }
/* Guesses first: the guesses pulled out above the plan, to check before anything else */
.guesses-first { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--fig-line); background: var(--evidence-guess-soft); list-style: none; }
.guesses-first li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 6px; }
.guesses-first li .plan-step__num { background: #fff; color: var(--agent); }
.guesses-first li span { grid-column: 2; color: var(--fig-text-2); }
.guesses-first .guesses-first__head { display: block; color: var(--agent); font-weight: 550; }
/* Split by evidence: the plan in two groups, each under its own heading */
.plan-group { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--fig-line); background: #fcfcfc; color: var(--fig-text-2); font-weight: 550; }
.plan__steps + .plan-group { border-top: 1px solid var(--fig-line); }
.plan-group--guess { background: var(--evidence-guess-soft); color: var(--agent); }
.plan-group__action { color: var(--fig-blue-text); }

/* ---------- How far a step reaches: friction sized to the stakes ---------- */
/* Amber means "this goes further than your selection" in every option below */
/* Local by default: a quiet line on what the step touches, and a link-style way to go wider */
.scope-note { color: var(--fig-text-2); }
.scope-widen { display: flex; align-items: flex-start; gap: 4px; color: var(--fig-text-2); }
.scope-widen .i { width: 12px; height: 12px; margin-top: 2px; color: var(--fig-blue-text); }
.scope-widen b { color: var(--fig-blue-text); font-weight: 550; }

/* Component changes run on their own: a second, amber-edged plan card holding only the component change */
.plan--component { border-color: #f0c38a; }
.plan--component .plan__head { border-bottom-color: #f0c38a; background: #fff8ef; }
.plan--component .plan__head b { display: inline-flex; align-items: center; gap: 6px; color: #a65c00; }
.plan--component .plan__head .i { width: 12px; height: 12px; }

/* ---------- Composer (libraries tip optional, stacked on the input) ---------- */
.composer { margin: 0 16px 16px; border: 1px solid var(--fig-line); border-radius: 12px; }
.composer__libraries { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-bottom: 1px solid var(--fig-line); }
.composer__libraries div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.composer__libraries a { color: var(--fig-blue-text); }
.composer__dismiss { color: var(--fig-text-2); }
.composer__input { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.composer__text { align-self: stretch; min-height: 60px; margin: 0; font-size: 12px; line-height: 20px; }
.composer__placeholder { color: var(--fig-text-3); }
.composer__foot { display: flex; align-self: stretch; align-items: center; gap: 4px; }
.composer__mic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.composer__mic .i { width: 14px; height: 14px; }
.composer__send {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; margin: 0; padding: 0; border: 0;
  border-radius: 50%;
  background: var(--fig-send-off); color: var(--fig-send-off-icon);
  cursor: default;
  transition: background 0.12s ease, color 0.12s ease, filter 0.12s ease, transform 0.1s ease;
}
.composer__send .i { width: 14px; height: 14px; display: block; }
.composer__send:focus { outline: none; }
.composer__send:focus-visible { outline: 2px solid var(--fig-blue); outline-offset: 2px; }
/* While the agent works, Send becomes Stop: a dark circle with a square */
.composer__stop { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-text); }
.composer__stop::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: #fff; }
/* How much the agent may do on its own: Plan only, Suggest or Apply directly */
.mode-pick { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: var(--fig-field); font-weight: 550; }
.mode-pick .i { width: 12px; height: 12px; }
.mode-pick .i:last-child { color: var(--fig-text-2); }

/* Focused composer with something typed: blue outline, Send turns on.
   The prototype turns it on while its prompt is being typed, and off once it's sent. */
.composer.is-focused,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) { border-color: var(--fig-blue); box-shadow: 0 0 0 1px var(--fig-blue); }
/* Focused but still empty: Send stays off until something is typed */
.composer.is-focused .composer__placeholder ~ .composer__foot .composer__send { background: var(--fig-send-off); color: var(--fig-send-off-icon); cursor: default; }
.composer.is-focused .composer__send,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) .composer__send,
.composer.is-ready .composer__send {
  background: var(--fig-blue); color: #fff; cursor: pointer;
}
.composer.is-focused .composer__send:hover,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) .composer__send:hover,
.composer.is-ready .composer__send:hover { filter: brightness(1.08); }
.composer.is-focused .composer__send:active,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) .composer__send:active,
.composer.is-ready .composer__send:active { transform: scale(0.92); filter: brightness(0.96); }

/* Figma today: the selection attaches above the prompt as one chip */
.context-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 4px; background: var(--fig-blue-soft); color: var(--fig-blue-text); font-weight: 550; line-height: 20px; white-space: nowrap; }
.context-chip .i { width: 12px; height: 12px; }

/* Proposed: a layer mentioned inside the prompt, in Figma selection
   blue because it points at a layer on the canvas */
.mention { display: inline-flex; align-items: center; gap: 3px; padding: 0 2px 0 5px; border-radius: 4px; background: var(--fig-blue-soft); color: var(--fig-blue-text); font-weight: 550; line-height: 18px; white-space: nowrap; }
.mention__icon { width: 10px; height: 10px; opacity: 0.8; flex: none; }
.mention__label { min-width: 0; }
.mention__remove {
  display: grid; place-items: center;
  width: 14px; height: 14px; margin: 0; padding: 0;
  border: 0; border-radius: 2px;
  background: transparent; color: inherit;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; opacity: 0.7;
}
.mention__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
/* Components are purple everywhere in Figma, so a component mention is too */
.mention--component { background: #f1e5ff; color: #8638e5; }

/* ---------- Canvas: frames and Figma's selection ---------- */
.frame { position: relative; }
.frame__label { position: absolute; bottom: 100%; left: 0; padding-bottom: 4px; color: rgba(0, 0, 0, 0.6); }

/* Selection overlays sit above the layers, as in Figma: bounds, corner handles, size badge */
.sel-box { position: absolute; inset: -1px; z-index: 1; border: 1px solid var(--fig-select); pointer-events: none; }
.sel-box i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--fig-select); }
.sel-box i:nth-child(1) { top: -4px; left: -4px; }
.sel-box i:nth-child(2) { top: -4px; right: -4px; }
.sel-box i:nth-child(3) { bottom: -4px; left: -4px; }
.sel-box i:nth-child(4) { bottom: -4px; right: -4px; }
/* Smaller handles on small layers like a text line or a button */
.trip__title > .sel-box i, .btn-primary > .sel-box i { width: 5px; height: 5px; }
.trip__title > .sel-box i:nth-child(odd), .btn-primary > .sel-box i:nth-child(odd) { left: -3px; }
.trip__title > .sel-box i:nth-child(even), .btn-primary > .sel-box i:nth-child(even) { right: -3px; }
.trip__title > .sel-box i:nth-child(-n + 2), .btn-primary > .sel-box i:nth-child(-n + 2) { top: -3px; }
.trip__title > .sel-box i:nth-child(n + 3), .btn-primary > .sel-box i:nth-child(n + 3) { bottom: -3px; }
.sel-box__size { position: absolute; top: calc(100% + 8px); left: 50%; padding: 1px 4px; transform: translateX(-50%); border-radius: 2px; background: var(--fig-select); color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; }

/* ---------- Earthling: the travel app being designed on the canvas ---------- */
.phone { display: flex; flex-direction: column; gap: 12px; width: 280px; height: 600px; padding: 12px 16px 16px; overflow: hidden; background: #2d3120; color: #f1f3e6; }
/* A scrolling feed drawn at full length, as designers often do in Figma */
.phone--feed { height: auto; }
.phone__status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
.phone__search { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: rgba(241, 243, 230, 0.6); }
.phone__mic { width: 22px; height: 22px; border-radius: 50%; background: #e4ff97; }
.phone__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #e4ff97; }

.trips { position: relative; display: flex; flex-direction: column; gap: 10px; }
.trip {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 132px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.55)), var(--photo);
}
.trip--rome { --photo: linear-gradient(150deg, #c9b893, #6f6248); }
.trip--kyoto { --photo: linear-gradient(150deg, #e0a17f, #6b3a33); }
.trip--lisbon { --photo: linear-gradient(150deg, #9fc3d1, #2f5566); }
.trip--paris { --photo: linear-gradient(150deg, #b9a7c9, #4b3f5c); }
.trip__info { display: flex; flex-direction: column; gap: 2px; }
/* Hugs its text so selecting the title layer outlines just the word */
.trip__title { position: relative; align-self: flex-start; font-size: 18px; font-weight: 700; color: #fff; }
.trip__meta { font-size: 11px; opacity: 0.85; }

/* Instance of the library component "Button / Primary" */
.btn-primary { position: relative; padding: 6px 12px; border-radius: 999px; background: #fff; color: #1e1e1e; font-size: 11px; font-weight: 600; white-space: nowrap; }
.btn-primary--block { margin-top: auto; padding: 12px; font-size: 13px; text-align: center; }

.itin__head { display: flex; flex-direction: column; gap: 4px; }
.itin__title { font-size: 20px; font-weight: 700; color: #fff; }
.itin { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itin li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.itin span { font-size: 10px; font-weight: 600; color: #e4ff97; }

/* Proposed: one outline around every layer the unsent prompt covers.
   Drawn in the agent colour so it never reads as Figma's blue selection,
   and it stays put while the designer selects other layers.
   Place it inside a positioned wrapper around the layers. */
.prompt-scope { position: absolute; inset: -6px; border: 1.5px solid var(--agent); border-radius: 18px; pointer-events: none; }
/* Explored alternative: an outline hugging a single layer instead of the whole group */
.prompt-scope--layer { inset: -3px; border-radius: 16px; }
/* Hovering a mention tints the layer it points to, and the mention fills to match */
.prompt-scope.is-hover { background: color-mix(in srgb, var(--agent) 22%, transparent); }
.mention.is-hover { background: var(--agent); color: #fff; }
/* A change the agent suggests but hasn't made: dashed, because it's only a preview */
.prompt-scope--preview { border-style: dashed; }
/* An outline around a text layer, like Lisbon's title: tight to the word, with its tag beside it so it doesn't cover the text */
.prompt-scope--text { inset: -3px -5px; border-radius: 4px; }
.prompt-scope--text .prompt-scope__tag { top: 50%; left: calc(100% + 4px); transform: translateY(-50%); }
/* A step's preview takes its step's colour (outline and tag both follow --agent) */
.step-preview--2 { --agent: var(--step-2); }
.step-preview--3 { --agent: var(--step-3); }
/* Step 1 renames layers, so each card shows its new name in a tag, like Figma's layer name labels */
.step-tag { position: absolute; top: 8px; right: 8px; padding: 0 5px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 550; line-height: 16px; white-space: nowrap; }
.step-tag--1 { background: var(--step-1); }
.prompt-scope__tag { position: absolute; top: -9px; left: 10px; padding: 0 5px; border-radius: 4px; background: var(--agent); color: #fff; font-size: 10px; line-height: 16px; font-weight: 550; white-space: nowrap; }