/* ============================================================
   XODE — MOTION, MEDIA AND THE CODE STUDIO

   Three features that arrived together and share a look: the Motion
   panel in the inspector, the video dialog, and the code studio
   behind "Add code".

   ── ABOUT THE :where() BLOCK AT THE TOP ──────────────────────────
   The Interaction panel is injected into all three editors, but the
   rules that dress it (.interaction-panel, .ip-select, .ip-hint …)
   live in website-editor.css, which only the website builder loads.
   In the portfolio editor that panel has therefore always come out
   half-dressed, and the Motion panel below it would have come out the
   same way.

   Those rules are repeated here inside :where(), which has ZERO
   specificity. The website editor loads website-editor.css and its
   0,1,0 selectors win every one of these outright, so nothing there
   changes by a pixel; the portfolio editor loads neither and gets
   them. One file, no duplication of the real styles, and no load
   order to keep in your head.
   ============================================================ */

:where(.interaction-panel) {
  border-top: 1px solid var(--border-1, #2B2E37);
  padding: 12px;
}

:where(.ip-what) {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2, #8B8D98);
}
:where(.ip-what b) { color: var(--text-0, #F5F5F7); font-weight: 600; }

:where(.ip-select) {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 7px;
  background: var(--bg-4, #2A2D36);
  color: var(--text-0, #F5F5F7);
  font-size: 12.5px;
  font-family: inherit;
}
:where(.ip-select:focus) { outline: none; border-color: var(--violet, #7C5CFF); }

:where(.ip-num) { max-width: 90px; }
:where(.ip-unit) { font-size: 11px; color: var(--text-3, #5C5F6B); }
:where(.ip-stack) { flex-direction: column; align-items: stretch; gap: 5px; }
:where(.ip-sep) {
  height: 1px;
  margin: 14px 0 12px;
  background: var(--border-1, #2B2E37);
}
:where(.ip-hint) {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2, #8B8D98);
}
:where(.ip-hint code) {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}

/* ── The Motion panel ─────────────────────────────────────────── */

.motion-panel optgroup {
  background: var(--bg-2, #1A1C22);
  color: var(--text-2, #8B8D98);
  font-size: 11px;
}

.mo-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.mo-play {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(124, 92, 255, 0.45);
  border-radius: 8px;
  background: rgba(124, 92, 255, 0.16);
  color: #C9BCFF;
  font: 600 12px/1 var(--font-body, Inter, sans-serif);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mo-play:hover {
  background: rgba(124, 92, 255, 0.28);
  border-color: var(--violet, #7C5CFF);
}

.mo-ghost {
  background: transparent;
  border-color: var(--border-1, #2B2E37);
  color: var(--text-2, #8B8D98);
}
.mo-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-2, #383B46);
  color: var(--text-0, #F5F5F7);
}

/* ── Sheets: the video dialog, review, import, play ───────────────
   One shell, four uses. Fixed and centred rather than anchored to
   anything, because all four can be opened from more than one place
   and none of them has a natural home on screen. */

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(6, 6, 9, 0.66);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.media-sheet {
  width: 100%;
  max-width: 500px;
  max-height: 92vh;
  overflow: auto;
  padding: 18px 20px 16px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 15px;
  background: var(--bg-2, #1A1C22);
  box-shadow: var(--shadow-float, 0 12px 40px rgba(0, 0, 0, 0.55));
  color: var(--text-1, #C7C9D1);
  font-size: 13px;
  line-height: 1.6;
}

.media-sheet.wide { max-width: 640px; }

/* The preview is the one that wants the room: it is showing a page. */
.media-sheet.play {
  max-width: 1100px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.media-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.media-head strong {
  font-size: 14.5px;
  color: var(--text-0, #F5F5F7);
  font-weight: 700;
}

.media-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2, #8B8D98);
}

.media-read {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-2, #8B8D98);
}
.media-read.ok  { color: #7BE0A6; }
.media-read.bad { color: #FF9AA8; }

.media-opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 16px 0 4px;
}
.media-opts.tight { gap: 6px; margin: 10px 0 12px; font-size: 12px; }

.media-opts label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-1, #C7C9D1);
  cursor: pointer;
}
.media-opts label span { color: var(--text-3, #5C5F6B); font-size: 11px; }
.media-opts input[type="checkbox"] { accent-color: var(--violet, #7C5CFF); }

.media-note {
  margin: 14px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-2, #8B8D98);
}

.media-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ── The code studio ──────────────────────────────────────────── */

.btn-add-code { margin-top: 7px; }

.cs-bar { gap: 8px; }

.cs-name {
  width: 190px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-0, #F5F5F7);
  font: 600 12.5px/1.3 var(--font-mono, monospace);
}
.cs-name:focus { outline: none; border-color: var(--violet, #7C5CFF); }

.cs-attach {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-2, #8B8D98);
  white-space: nowrap;
}
.cs-attach .ip-select { width: auto; padding: 5px 7px; font-size: 11.5px; }

/* wrap="off" plus a scrolling box: a long line in code means
   something, and soft-wrapping it hides where it ends. */
.cs-code {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  resize: none;
  background: #0C0D12;
  color: #C9CBD4;
  font: 400 12.5px/1.65 var(--font-mono, 'JetBrains Mono', monospace);
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.cs-code:focus { outline: none; }

.cs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  border-top: 1px solid var(--border-1, #2B2E37);
  font-size: 11px;
  color: var(--text-3, #5C5F6B);
}
.cs-saved { color: #6FCF97; }
.cs-saved.un { color: var(--amber, #FFB454); }

.cs-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 10px;
  background: #fff;
}

.cs-play-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-3, #5C5F6B);
}

.cs-sheet-body { max-height: 58vh; overflow: auto; }

/* One finding, one line, with what kind it is set in the margin. */
.cs-find {
  margin: 0 0 9px;
  padding: 10px 12px;
  border-radius: 9px;
  border-left: 3px solid var(--border-2, #383B46);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12.5px;
  line-height: 1.6;
}
.cs-find b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3, #5C5F6B);
}
.cs-find.warn { border-left-color: var(--amber, #FFB454); }
.cs-find.warn b { color: var(--amber, #FFB454); }
.cs-find.ok   { border-left-color: var(--success, #4ADE80); }
.cs-find.ok b { color: var(--success, #4ADE80); }
.cs-find.note { border-left-color: var(--violet, #7C5CFF); }
.cs-find.note b { color: #B7A6FF; }

.cs-lead { margin: 14px 0 8px; color: var(--text-0, #F5F5F7); font-size: 13px; }

.cs-caveats {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-2, #8B8D98);
}
.cs-caveats li { margin-bottom: 5px; }

.cs-dim { color: var(--text-2, #8B8D98); }
.cs-dim.small { font-size: 11.5px; line-height: 1.55; margin-top: 14px; }

.cs-busy {
  margin: 26px 0;
  text-align: center;
  color: var(--text-2, #8B8D98);
  font-size: 13px;
}

.cs-drop {
  padding: 26px 16px;
  border: 2px dashed var(--border-2, #383B46);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.cs-drop.over {
  border-color: var(--violet, #7C5CFF);
  background: rgba(124, 92, 255, 0.09);
}
.cs-drop p { margin: 0; }
.cs-drop p + p { margin-top: 5px; font-size: 11.5px; }

.cs-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 13px;
}

.cs-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 11px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-1, #C7C9D1);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cs-pick:hover {
  border-color: var(--violet, #7C5CFF);
  background: rgba(124, 92, 255, 0.1);
}
.cs-pick b { font-size: 12.5px; color: var(--text-0, #F5F5F7); }
.cs-pick span { font-size: 11px; line-height: 1.45; color: var(--text-3, #5C5F6B); }

@media (max-width: 620px) {
  .cs-picks { grid-template-columns: 1fr; }
  .media-sheet.play { height: 92vh; }
  .cs-attach { display: none; }
  .cs-name { width: 120px; }
}

/* Somebody who has asked for less movement has asked this editor too:
   the Preview button then shows the end state without the travel. */
@media (prefers-reduced-motion: reduce) {
  .artboard .canvas-el { animation: none !important; }
}

/* ── BRING YOUR OWN AI ─────────────────────────────────────────
   The bar above the code editor, the provider panel, and the diff. */

.ai-wrap { border-bottom: 1px solid var(--border-1, #2B2E37); padding: 10px 14px 8px; }

.ai-bar { display: flex; align-items: center; gap: 8px; }

.ai-ask {
  flex: 1; min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 8px;
  background: var(--bg-4, #2A2D36);
  color: var(--text-0, #F5F5F7);
  font: 400 12.5px/1.4 var(--font-body, Inter, sans-serif);
}
.ai-ask:focus { outline: none; border-color: var(--violet, #7C5CFF); }

.ai-who { flex-shrink: 0; font-size: 11px; }

.ai-link {
  border: 0; background: none; cursor: pointer; padding: 3px 6px; border-radius: 5px;
  color: var(--text-2, #8B8D98); font: 600 11px/1 var(--font-body, Inter, sans-serif);
}
.ai-link:hover { color: var(--text-0, #F5F5F7); background: rgba(var(--fg-rgb), .06); }
.ai-link.warn { color: var(--amber, #FFB454); }

.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.ai-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 100px;
  background: transparent;
  color: var(--text-2, #8B8D98);
  font: 600 11px/1.5 var(--font-body, Inter, sans-serif);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ai-chip:hover {
  border-color: var(--violet, #7C5CFF);
  color: var(--text-0, #F5F5F7);
  background: rgba(124, 92, 255, .1);
}

.ai-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-2, #8B8D98); min-height: 1em; }
.ai-note.ok  { color: var(--success, #4ADE80); }
.ai-note.bad { color: var(--danger, #FF6B6B); }
.ai-note.warn { color: var(--amber, #FFB454); }

/* ── The provider panel ──────────────────────────────────────── */

.ai-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.ai-tab {
  padding: 6px 12px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 100px;
  background: transparent;
  color: var(--text-2, #8B8D98);
  font: 600 12px/1.4 var(--font-body, Inter, sans-serif);
  cursor: pointer;
}
.ai-tab.on {
  border-color: var(--violet, #7C5CFF);
  background: rgba(124, 92, 255, .14);
  color: var(--text-0, #F5F5F7);
}

.ai-status { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2, #8B8D98); }
.ai-status.ok  { color: var(--success, #4ADE80); }
.ai-status.bad { color: var(--danger, #FF6B6B); }
.ai-status.warn { color: var(--amber, #FFB454); }

.ai-prose { max-height: 56vh; overflow: auto; font-size: 13.5px; line-height: 1.7; }
.ai-prose p { margin: 0 0 12px; }

/* ── The diff ────────────────────────────────────────────────── */

.ai-count { margin: 0 0 10px; font-size: 12px; }
.ai-count .add { color: var(--success, #4ADE80); }
.ai-count .del { color: var(--danger, #FF6B6B); }

.ai-diff {
  max-height: 56vh; overflow: auto;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 10px;
  background: #0C0D12;
  padding: 8px 0;
}

.dl {
  display: flex; gap: 8px;
  padding: 0 12px;
  font: 400 12px/1.65 var(--font-mono, 'JetBrains Mono', monospace);
  color: #9BA0B4;
  white-space: pre-wrap;
  word-break: break-word;
}
.dl i { flex: 0 0 10px; font-style: normal; opacity: .8; }
.dl.add { background: rgba(74, 222, 128, .10); color: #B6F0CD; }
.dl.del { background: rgba(255, 107, 107, .10); color: #FFC0C0; }
.dl.add i { color: var(--success, #4ADE80); }
.dl.del i { color: var(--danger, #FF6B6B); }
.dl.skip {
  justify-content: center;
  color: var(--text-3, #5C5F6B);
  font-size: 10.5px;
  padding: 5px 12px;
  background: rgba(var(--fg-rgb), .03);
}
.dl.warn { color: var(--amber, #FFB454); padding: 10px 12px; }

@media (max-width: 620px) {
  .ai-bar { flex-wrap: wrap; }
  .ai-who { width: 100%; }
}

/* ── AI ON THE CANVAS ──────────────────────────────────────────
   A tab on the right edge that opens a panel. Docked rather than
   floating: it is used while looking at the canvas, so it must not
   sit on top of the thing it is changing. */

.aic {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3200;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.aic > * { pointer-events: auto; }

.aic-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 10px 9px 10px 11px;
  border: 1px solid rgba(124, 92, 255, .45);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgba(124, 92, 255, .16);
  color: #C9BCFF;
  font: 700 11.5px/1 var(--font-body, Inter, sans-serif);
  cursor: pointer;
  writing-mode: vertical-rl;
  transition: background .15s, color .15s;
}
.aic-tab svg { writing-mode: horizontal-tb; }
.aic-tab:hover { background: rgba(124, 92, 255, .28); color: #fff; }

.aic-panel {
  width: 340px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-1, #2B2E37);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: var(--bg-2, #1A1C22);
  box-shadow: var(--shadow-float, 0 12px 40px rgba(0, 0, 0, .55));
  overflow: hidden;
}

/* Collapsed hides the panel and leaves the tab. display:none rather
   than a width transition: a 340px panel sliding shut drags the
   canvas's own layout with it on a narrow screen. */
.aic.collapsed .aic-panel { display: none; }

.aic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px 15px;
  border-bottom: 1px solid var(--border-1, #2B2E37);
}
.aic-head strong { font-size: 13.5px; color: var(--text-0, #F5F5F7); }

.aic-log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aic-msg {
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 92%;
}
/* What you said sits right and violet; what came back sits left. */
.aic-msg.me {
  align-self: flex-end;
  background: rgba(124, 92, 255, .18);
  color: var(--text-0, #F5F5F7);
}
.aic-msg.bot { background: rgba(var(--fg-rgb), .05); color: var(--text-1, #C7C9D1); }
.aic-msg.ok {
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .3);
  color: #C6F0D6;
}
.aic-msg.error {
  background: rgba(255, 107, 107, .12);
  border: 1px solid rgba(255, 107, 107, .3);
  color: #FFC6C6;
}

.aic-undo {
  margin-left: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: 700 12px/1 var(--font-body, Inter, sans-serif);
  text-decoration: underline;
  cursor: pointer;
  opacity: .85;
}
.aic-undo:hover { opacity: 1; }

.aic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 15px 10px;
}

.aic-form {
  display: flex;
  gap: 8px;
  padding: 11px 15px 14px;
  border-top: 1px solid var(--border-1, #2B2E37);
}

.aic-in {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 9px;
  background: var(--bg-4, #2A2D36);
  color: var(--text-0, #F5F5F7);
  font: 400 12.5px/1.4 var(--font-body, Inter, sans-serif);
}
.aic-in:focus { outline: none; border-color: var(--violet, #7C5CFF); }

#aic-go.is-busy { background: var(--danger, #FF6B6B); }

@media (max-width: 900px) {
  .aic-panel { width: min(340px, 84vw); }
  .aic { top: auto; bottom: 96px; transform: none; }
}

/* ── EDIT CODE WITH AI ────────────────────────────────────────────
   The third button in the dock. It inherits .btn-code, so it is the
   same size and shape as the two above it — a different-looking
   button would read as a different KIND of thing, and it is not, it
   is the same panel through another door.

   What separates it is the fill: the two violet buttons are outlines
   on a tint, this one is solid. It is the only button in the dock
   that spends somebody's API credit, and a solid fill is the ordinary
   way of saying which action is the consequential one. */
/* The ramp is the brand violet taken down until it can CARRY white
   rather than be read as violet against it. The label is 12.5px bold,
   which is not large text, so it needs 4.5:1 — and the obvious ramp,
   the one the rest of the site uses as an accent, measured
   4.35 / 3.53 / 3.36 with white on it. Every stop failed. Measured
   again after: */
.btn-edit-ai {
  margin-top: 7px;
  border-color: transparent;
  /* white on each stop:  4.67  ·  4.61  ·  4.65      (needs 4.5) */
  background: linear-gradient(135deg, #7758F5 0%, #855CDB 55%, #9459C7 100%);
  color: #FFFFFF;
}
/* Hover goes DARKER, which is the opposite of the reflex and the only
   thing that works here. The resting ramp already sits at 4.61–4.67,
   inches above the 4.5 it has to clear — lifting it any further put
   white at 4.00 and failed. Deepening it reads just as clearly as a
   state change and buys contrast instead of spending it. */
.btn-edit-ai:hover {
  border-color: transparent;
  /* white on each stop:  5.93  ·  5.90  ·  5.91 */
  background: linear-gradient(135deg, #664CD3 0%, #724FBC 55%, #7F4DAB 100%);
}
.btn-edit-ai svg { flex-shrink: 0; }

/* The dock is a column of three now, and three buttons plus the hint
   want a little more room than two did. */
.inspector-code-dock .dock-hint { margin-top: 9px; }

/* ── THE LIVE TOGGLE ──────────────────────────────────────────────
   In the preview header, on by default. It reads as filled rather
   than outlined because it is a state, not an action — the dot is the
   same grammar a recording light uses. */
#cs-live { display: inline-flex; align-items: center; gap: 6px; }
#cs-live.is-on {
  background: rgba(43, 181, 160, 0.16);
  border-color: rgba(43, 181, 160, 0.5);
  color: #7BDDCD;
}
#cs-live.is-on::before {
  content: '';
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 50%;
  background: #2BB5A0;
}

/* ── SIGN IN TO YOUR AI ───────────────────────────────────────────
   Four cards, and the order is the point: the two that cost nothing
   come first, because "you need a credit card" is where most people
   stop. A card that is already signed in says so and offers to change
   rather than pretending it is a fresh choice. */
.ai-signin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.ai-si {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 15px;
  border: 1px solid var(--border-1, #2B2E37);
  border-radius: 13px;
  background: var(--bg-2, #1A1C22);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.ai-si:hover, .ai-si:focus-visible {
  border-color: var(--violet, #7C5CFF);
  background: var(--bg-3, #22242C);
  transform: translateY(-2px);
  outline: none;
}
.ai-si.is-on { border-color: rgba(43, 181, 160, .55); }

.ai-si-badge {
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(var(--fg-rgb), .06);
  color: var(--text-2, #8B8D98);
  font: 700 10px/1.5 var(--font-body, Inter, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ai-si.is-on .ai-si-badge { background: rgba(43, 181, 160, .16); color: #7BDDCD; }

.ai-si strong { font-size: 14px; color: var(--text-0, #F5F5F7); }
.ai-si em {
  font-style: normal; font-size: 12px; line-height: 1.55;
  color: var(--text-2, #8B8D98);
}
.ai-si-cta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font: 700 12px/1 var(--font-body, Inter, sans-serif);
  color: var(--violet-soft, #C9BCFF);
}
.ai-si.is-on .ai-si-cta { color: #7BDDCD; }

/* The old form, kept whole and folded away — somebody who knows what
   a base URL is should not have to go through the cards. */
.ai-more { margin: 6px 0 4px; }
.ai-more > summary {
  cursor: pointer;
  padding: 7px 0;
  font: 600 12px/1 var(--font-body, Inter, sans-serif);
  color: var(--text-2, #8B8D98);
}
.ai-more > summary:hover { color: var(--text-0, #F5F5F7); }
.ai-more[open] > summary { margin-bottom: 8px; }

/* ── THE CHAT ROUTE ───────────────────────────────────────────────
   Full width and first, because it applies to most people and costs
   nothing. The key cards below it are the faster way, not the only
   way, and the layout should say which is which before the words do. */
.ai-route {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 16px 17px;
  margin: 14px 0 4px;
  border: 1px solid rgba(43, 181, 160, .4);
  border-radius: 14px;
  background: rgba(43, 181, 160, .07);
}
.ai-route .ai-si-badge { background: rgba(43, 181, 160, .18); color: #7BDDCD; }
.ai-route strong { font-size: 15px; color: var(--text-0, #F5F5F7); }
.ai-route em {
  font-style: normal; font-size: 12.5px; line-height: 1.6;
  color: var(--text-1, #C7C9D1);
}
.ai-route-note {
  margin: 2px 0 0;
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-2, #8B8D98);
}
.ai-route-h {
  margin: 20px 0 4px;
  font: 700 13px/1.4 var(--font-body, Inter, sans-serif);
  color: var(--text-0, #F5F5F7);
}

.ai-hand-apps { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 6px; }
.ai-chip.on {
  border-color: #2BB5A0;
  background: rgba(43, 181, 160, .14);
  color: #7BDDCD;
}

/* ── THE ROUND TRIP SHEET ─────────────────────────────────────── */
.ai-hand-step {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 12px;
  font-size: 13px; line-height: 1.6;
  color: var(--text-1, #C7C9D1);
}
.ai-hand-step > b {
  flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), .08);
  color: var(--text-0, #F5F5F7);
  font: 700 11px/20px var(--font-body, Inter, sans-serif);
  text-align: center;
}
.ai-hand-in {
  width: 100%; min-height: 130px;
  margin: 4px 0 10px;
  resize: vertical;
}
.ai-ok   { color: #4ADE80; }
.ai-warn { color: var(--amber, #FFB454); }

/* ── AI IN THE TOP BAR ────────────────────────────────────────────
   Beside the XODE account button, because "who am I signed in to" is
   one question, not two. Dim until something is connected — it is an
   invitation then, and a status afterwards. */
.ai-chip-btn {
  width: auto !important;
  gap: 6px;
  padding: 0 10px !important;
  display: inline-flex; align-items: center;
  font: 700 11.5px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .01em;
}
.ai-chip-btn .ai-chip-t { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip-btn.is-on {
  background: rgba(43, 181, 160, .14);
  border-color: rgba(43, 181, 160, .45);
  color: #7BDDCD;
}