/* AutoSteward - AI & Market Data UI (settings page + on-vehicle panels).
   Token-driven so it adopts every design + light/dark automatically. */

/* ---- Settings page ---- */
.aim-status{display:flex;align-items:center;gap:12px;margin:2px 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--surface)}
.aim-status-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 22%,transparent)}
.aim-status.live .aim-status-dot{background:#1f9d55;box-shadow:0 0 0 4px color-mix(in srgb,#1f9d55 26%,transparent)}
.aim-status strong{display:block;color:var(--ink);font-size:var(--fs-body)}
.aim-status span{color:var(--muted);font-size:var(--fs-small)}
.aim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.aim-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--surface-strong);box-shadow:var(--shadow)}
.aim-card-head h2{margin:0;color:var(--ink);font-size:var(--fs-lead)}
.aim-card-head p{margin:4px 0 2px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-field{display:grid;gap:6px}
.aim-field>span{color:var(--ink);font-size:var(--fs-small);font-weight:700}
.aim-field input,.aim-field select{width:100%;min-height:38px;padding:8px 10px;color:var(--input-ink,var(--ink));background:var(--input-bg,var(--surface));border:1px solid var(--line);border-radius:var(--radius-sm,7px);outline:none}
.aim-field input:focus,.aim-field select:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
.aim-note{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.aim-inline-tools{display:flex;flex-wrap:wrap;gap:8px}
.aim-testresult{font-size:var(--fs-small);font-weight:700}
.aim-testresult.ok{color:#1f8a5b}
.aim-testresult.bad{color:#c0392b}
.aim-oauth{display:grid;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:var(--radius-sm,7px);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.aim-oauth-status{font-size:var(--fs-small);font-weight:700}
.aim-oauth-status.ok{color:#1f8a5b}
.aim-oauth-status.pending{color:var(--muted)}

/* ---- Market comparable listings (vehicle record) ---- */
/* ---- "Where do I get this key?" - the vendor's own article + our gotcha ---- */
.aim-guide{margin:12px 0 14px;padding:12px 14px;border:1px solid var(--line);
 border-left:3px solid var(--accent);border-radius:var(--radius-sm,8px);
 background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.aim-guide-link{display:flex;align-items:flex-start;gap:10px;text-decoration:none}
.aim-guide-link:hover .aim-guide-text strong{text-decoration:underline}
.aim-guide-icon{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
 display:grid;place-items:center;background:var(--accent);color:#fff;
 font-size:var(--fs-small);font-weight:700;line-height:1}
.aim-guide-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.aim-guide-text strong{color:var(--accent);font-size:var(--fs-small);font-weight:700}
.aim-guide-vendor{color:var(--muted);font-size:var(--fs-small)}
.aim-guide-alt{display:inline-block;margin-top:8px;margin-left:32px;
 color:var(--muted);font-size:var(--fs-small);font-weight:700;text-decoration:none}
.aim-guide-alt:hover{color:var(--accent);text-decoration:underline}
.aim-guide-cost{margin:10px 0 0;color:var(--ink);font-size:var(--fs-small)}
.aim-guide-gotcha{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-guide-gotcha strong{color:var(--ink)}

/* ---- "Use an API key instead" - findable, deliberately not the headline ---- */
.aim-more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.aim-more-summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
 color:var(--muted);font-size:var(--fs-small);font-weight:700;padding:4px 2px;border-radius:var(--radius-sm,6px)}
.aim-more-summary::-webkit-details-marker{display:none}
.aim-more-summary:hover{color:var(--accent)}
.aim-more-summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aim-more-chev{display:inline-block;transition:transform .15s ease;font-size:var(--fs-lead);line-height:1}
.aim-more[open] .aim-more-chev{transform:rotate(90deg)}
.aim-more[open] .aim-more-summary{color:var(--ink)}
.aim-tiles-sub{margin-top:12px}
.aim-more-note{margin-top:10px}

.ml-connect{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px}
.ml-connect p{margin:0;flex:1 1 240px;color:var(--muted);font-size:var(--fs-small)}
.ml-controls{display:flex;flex-wrap:wrap;gap:12px;padding:10px 14px 0}
.ml-ctl{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:var(--fs-small);font-weight:700}
.ml-ctl select,.ml-ctl input{min-height:32px;padding:4px 8px;color:var(--input-ink,var(--ink));background:var(--input-bg,var(--surface));border:1px solid var(--line);border-radius:var(--radius-sm,6px)}
.ml-ctl input{width:92px}
.ml-cap{align-self:center;color:var(--muted);font-size:var(--fs-small)}
.ml-results{padding:12px 14px}
.ml-note{padding:10px 0;color:var(--muted);font-size:var(--fs-small)}
.ml-note.ml-error{color:#c0392b}
.ml-summary{margin-bottom:10px;color:var(--muted);font-size:var(--fs-small)}
.ml-saved{color:var(--accent);font-weight:700}
.ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ml-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);background:var(--surface)}
.ml-thumb{width:64px;height:48px;border-radius:var(--r-control);overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent);display:grid;place-items:center}
.ml-photo{width:100%;height:100%;object-fit:cover}
.ml-info{min-width:0}
.ml-info strong{display:block;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-info strong a{color:var(--accent);text-decoration:none}
.ml-info strong a:hover{text-decoration:underline}
.ml-sub{color:var(--muted);font-size:var(--fs-small);margin-top:2px}
.ml-price{color:var(--ink);font-weight:700;font-size:var(--fs-body);white-space:nowrap}
.ml-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---- What the comps mean: band + advice derived from the listings above ---- */
.mp-advice{margin-bottom:14px;padding:14px 14px;border:1px solid var(--line);border-radius:var(--radius,10px);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.mp-figures{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end}
.mp-figure{display:flex;flex-direction:column;gap:2px}
.mp-label{color:var(--muted);font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mp-figure strong{color:var(--ink);font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.mp-lead strong{font-size:var(--fs-h2);font-weight:700;line-height:1;color:var(--accent)}
.mp-basis{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small)}
.mp-why{margin:8px 0 0;padding-left:16px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.mp-why li{margin-bottom:2px}
.mp-hint{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small)}
.mp-explain{margin-top:12px;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 var(--radius-sm,6px) var(--radius-sm,6px) 0;background:var(--surface);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.mp-explain.mp-pending{color:var(--muted);font-style:italic}
.mp-explain.mp-error{border-left-color:#c0392b;color:#c0392b}

/* ---- AI pricing + listing panel (vehicle record) & dashboard plan ---- */
.g-card{padding:16px;border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--surface)}
.g-advice-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.g-advice-price{color:var(--ink);font-size:var(--fs-h2);font-weight:700;line-height:1}
.g-sub{margin:2px 0 0;color:var(--muted);font-size:var(--fs-small)}
.g-advice-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.g-pill{display:inline-block;padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700;letter-spacing:.01em}
.g-pill-good{color:#1f8a5b;background:color-mix(in srgb,#1f8a5b 15%,transparent)}
.g-pill-warn{color:#9a6a12;background:color-mix(in srgb,#c88a1e 20%,transparent)}
.g-pill-muted{color:var(--muted);background:color-mix(in srgb,var(--muted) 16%,transparent)}
.g-pill-bad{color:#c0392b;background:color-mix(in srgb,#c0392b 15%,transparent)}
.g-advice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.g-advice-grid>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm,7px);background:var(--surface-strong)}
.g-k{color:var(--muted);font-size:var(--fs-micro);font-weight:700}
.g-v{color:var(--ink);font-size:var(--fs-body);font-weight:700}
.g-rationale{margin:8px 0;padding-left:18px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.g-fineprint{margin:6px 0 0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.g-card-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.g-card-title strong{color:var(--ink);font-size:var(--fs-body)}
.g-card-title>div{display:flex;flex-wrap:wrap;gap:8px}
.g-textarea{width:100%;margin-top:8px;padding:10px 12px;color:var(--input-ink,var(--ink));background:var(--input-bg,var(--surface));border:1px solid var(--line);border-radius:var(--radius-sm,7px);font:inherit;line-height:calc(var(--ui-copy) + 8px);resize:vertical}
.g-row-end{display:flex;justify-content:flex-end;margin-top:6px}
.ain-features{display:grid;gap:6px;margin-top:12px}
.g-brief-body{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.g-brief-body.md{white-space:normal}

/* g-btn: match the app button language, compact */
.g-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;border:1px solid var(--accent);border-radius:var(--radius-sm,7px);background:var(--accent);color:#fff;font-size:var(--fs-small);font-weight:700;cursor:pointer;transition:filter .15s}
.g-btn:hover{filter:brightness(1.06)}
.g-btn-sm{min-height:28px;padding:4px 10px;font-size:var(--fs-small)}
.g-btn-ghost{background:transparent;color:var(--accent)}
.g-btn-ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);filter:none}
.ai-link{color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline}

/* Post-to-marketplace field list */
.ain-post{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ain-post-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ain-post-panel{display:grid;gap:10px;margin-top:6px}
.ain-post-open{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink);font-size:var(--fs-small)}
.ain-field{display:grid;gap:4px}
.ain-field-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ain-field-label{color:var(--muted);font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ain-field-val{width:100%;padding:8px 10px;color:var(--input-ink,var(--ink));background:var(--input-bg,var(--surface));border:1px solid var(--line);border-radius:var(--radius-sm,6px);font:inherit}

/* ---- Visual provider picker (logos) ---- */
/* A REAL BRAND FILE IS A WORDMARK, and a wordmark crushed into a 28px square is a smudge.
   Measured on screen: eBay's mark came out an illegible blur and ChatGPT's a dark bar with
   unreadable text, which is what "it looks horrible" meant.
   The parts supplier cards already solved this — a white plate, the logo sized by HEIGHT with its
   aspect ratio kept, letterboxed rather than squashed. Same treatment here, so the assets we
   actually hold (eBay, ChatGPT, Amazon…) read as themselves.
   Only <img> gets the plate. The inline SVG glyphs we draw ourselves are square by construction and
   already sit on their own tinted rounded background; giving them a white plate too would put a
   card inside a card. */
.ai-logo-mark{display:block;border-radius:var(--r-surface)}
/* THE PLATE FLIPPED TO WHITE on 2026-08-13, exactly as the note that used to live here said it
   would have to. That note read: "If a black-on-transparent variant of a logo ever replaces one of
   these, this flips to #fff — the plate has to match the artwork, and one plate cannot serve both
   polarities." That is what happened.

   The near-black plate existed to serve chatgpt.webp, which was the WHITE-on-transparent variant.
   The vendor marks now in web/assets/ai/ (claude, openai, gemini, ollama, autodev, marketcheck)
   are the opposite polarity — dark or full-colour artwork drawn for a light ground, several with a
   white background baked in. On the dark plate they rendered as a row of white boxes with a couple
   of transparent ones between them, which reads as broken rather than as a set. openai.png also
   supersedes chatgpt.webp entirely, since the resolver now prefers .png, so the one asset the dark
   plate was for is no longer requested.

   White serves everything we currently hold: the white-ground favicons go seamless, the
   transparent coloured marks (Claude's terracotta, Gemini's spark, auto.dev's violet) keep their
   contrast, and eBay's full-colour wordmark is drawn for white in the first place. The rule is
   unchanged and still load-bearing — if a white-on-transparent asset ever arrives, this flips back
   and that asset gets its own plate rather than changing this one for everybody. */
img.ai-logo-mark{width:auto;max-width:76px;height:28px;object-fit:contain;
  padding:3px 6px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.14)}
.aim-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin:4px 0 6px}
.aim-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border:1.5px solid var(--line);border-radius:var(--r-surface);background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.aim-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.aim-tile.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.aim-tile-logo{display:grid;place-items:center}
.aim-tile-name{color:var(--ink);font-size:var(--fs-small);font-weight:700}
.aim-tile-sub{color:var(--muted);font-size:var(--fs-micro);text-align:center;line-height:var(--lh-micro)}
/* IN FLOW, NOT PINNED OUTSIDE THE TILE. This was position:absolute at top:-8px, so the badge hung
   five pixels above the card it labels and eight past its left edge — and because the tile clips,
   the label was being cut as well as escaping. Measured: 17px of the word did not fit inside the
   badge's own box. A badge that overhangs its card reads as a rendering fault rather than a
   flourish, and in normal flow it simply fits. */
.aim-tile-badge{align-self:flex-start;margin:0 0 6px;padding:2px 8px;/* 2.14:1 measured — white on the accent fails in every design. --accent-ink is the paired token. */
  border-radius:var(--r-stadium);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-micro);line-height:calc(var(--fs-micro) + 6px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere}
.aim-provider-panel{margin-top:12px;display:grid;gap:12px}
.aim-market-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;font-size:var(--fs-body)}
.aim-market-brand img{height:24px;width:auto;object-fit:contain}
.aim-brand-strip{display:flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:var(--r-surface);border:1px solid var(--line);margin-bottom:2px}
.aim-brand-strip img{height:26px;width:auto;max-width:100%;object-fit:contain}
.aim-brand-dark{background:#0d0d0d;border-color:#0d0d0d}
/* Claude subscription connect flow */
.aim-sub{padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.aim-sub-checking{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-small)}
.aim-sub-copy{display:grid;gap:4px;margin-bottom:10px}
.aim-sub-copy strong{color:var(--ink);font-size:var(--fs-body)}
.aim-sub-copy span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-sub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aim-sub-connected{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.aim-sub-ok{flex:0 0 auto;padding:6px 12px;border-radius:var(--r-stadium);background:color-mix(in srgb,#1f9d55 16%,transparent);color:#1f8a5b;font-weight:700;font-size:var(--fs-small)}
.aim-sub-code{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.aim-sub-code input{flex:1 1 200px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm,7px);background:var(--input-bg,var(--surface));color:var(--input-ink,var(--ink));font:inherit}
.aim-sub-code input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
.aim-spinner{display:inline-block;width:14px;height:14px;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-top-color:var(--accent);border-radius:50%;animation:aimspin .7s linear infinite;vertical-align:-2px}
@keyframes aimspin{to{transform:rotate(360deg)}}

/* ---- App-wide AI assistant (floating) ---- */
.sai-fab{position:fixed;right:20px;bottom:20px;z-index:120;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:0;border-radius:var(--r-stadium);background:var(--accent);color:#fff;font-size:var(--fs-body);font-weight:700;cursor:pointer;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .15s,box-shadow .15s}
.sai-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 55%,transparent)}
.sai-fab .sai-spark{font-size:var(--fs-lead);line-height:1}
.sai-overlay{position:fixed;inset:0;z-index:130;background:rgba(8,16,26,.34);opacity:0;pointer-events:none;transition:opacity .18s}
.sai-overlay.open{opacity:1;pointer-events:auto}
.sai-panel{position:fixed;top:0;right:0;bottom:0;z-index:131;width:min(430px,94vw);display:flex;flex-direction:column;background:var(--surface-strong,var(--surface));border-left:1px solid var(--line);box-shadow:-16px 0 44px rgba(6,20,38,.22);transform:translateX(102%);transition:transform .22s ease}
.sai-panel.open{transform:translateX(0)}
.sai-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sai-head .sai-logo{flex:0 0 auto}
.sai-head strong{flex:1;color:var(--ink);font-size:var(--fs-body)}
.sai-head small{display:block;color:var(--muted);font-size:var(--fs-micro);font-weight:600}
.sai-close{border:0;background:transparent;color:var(--muted);font-size:var(--fs-h2);cursor:pointer;line-height:1;padding:4px}
/* "New" ends the conversation. Quiet by default — it sits beside a close button and must not
   compete with it — but a real bordered control rather than a bare word, so it reads as
   something you can press. Colours come from tokens, so all ten designs restyle it. */
.sai-new{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-stadium);background:transparent;
  color:var(--muted);font-size:var(--fs-small);font-weight:600;line-height:var(--lh-small);cursor:pointer}
.sai-new:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sai-new:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sai-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sai-msg{max-width:88%;padding:10px 12px;border-radius:var(--r-surface);font-size:var(--fs-body);line-height:var(--lh-body);white-space:pre-wrap;word-wrap:break-word}
.sai-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.sai-msg.ai{align-self:flex-start;background:var(--surface-soft,color-mix(in srgb,var(--ink) 6%,transparent));color:var(--ink);border-bottom-left-radius:4px}
.sai-msg.sys{align-self:center;color:var(--muted);font-size:var(--fs-small);background:transparent;text-align:center}
.sai-empty{margin:auto;text-align:center;color:var(--muted);display:grid;gap:12px;padding:16px}
.sai-empty strong{color:var(--ink);font-size:var(--fs-body)}
.sai-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sai-chip{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface);color:var(--ink);font-size:var(--fs-small);cursor:pointer}
.sai-chip:hover{border-color:var(--accent);color:var(--accent)}
.sai-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:flex-end}
.sai-input{flex:1;max-height:120px;min-height:40px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--input-bg,var(--surface));color:var(--input-ink,var(--ink));font:inherit;resize:none;outline:none}
.sai-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.sai-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--r-surface);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-lead);cursor:pointer}
.sai-send:disabled{opacity:.5;cursor:default}
.sai-connect{margin:auto;text-align:center;display:grid;gap:10px;padding:20px}
/* Fancy chat polish: entrance, rendered markdown, typing indicator */
.sai-msg{animation:saiIn .2s ease}
@keyframes saiIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sai-msg.ai{max-width:94%;padding:12px 14px;white-space:normal;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:0 1px 2px rgba(6,20,38,.05)}
.sai-msg.ai>:first-child{margin-top:0}
.sai-msg.ai>:last-child{margin-bottom:0}
.sai-msg.ai p{margin:0 0 8px}
.sai-msg.ai h3,.sai-msg.ai h4,.sai-msg.ai h5{margin:12px 0 6px;line-height:var(--lh-lead);color:var(--ink);font-weight:700}
.sai-msg.ai h3{font-size:var(--fs-body)}
.sai-msg.ai h4{font-size:var(--fs-body)}
.sai-msg.ai h5{font-size:var(--fs-body)}
.sai-msg.ai ul,.sai-msg.ai ol{margin:6px 0 8px;padding-left:20px}
.sai-msg.ai li{margin:4px 0}
.sai-msg.ai li::marker{color:var(--accent)}
.sai-msg.ai strong{font-weight:700}
.sai-msg.ai a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.sai-msg.ai code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);background:color-mix(in srgb,var(--ink) 10%,transparent);padding:1px 6px;border-radius:var(--r-control)}
.sai-msg.ai pre.sai-code{margin:8px 0;padding:10px 12px;border-radius:var(--r-surface);background:#0f1b2d;color:#eaf0f8;overflow-x:auto}
.sai-msg.ai pre.sai-code code{background:none;padding:0;color:inherit;font-size:var(--fs-small);line-height:var(--lh-small)}
.sai-thinking{padding:12px 14px}
.sai-typing{display:inline-flex;gap:6px;align-items:center}
.sai-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:saiBlink 1.2s infinite}
.sai-typing i:nth-child(2){animation-delay:.18s}
.sai-typing i:nth-child(3){animation-delay:.36s}
@keyframes saiBlink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.95;transform:translateY(-3px)}}
@media(max-width:640px){.aim-grid{grid-template-columns:1fr}.ml-card{grid-template-columns:56px 1fr}.ml-price{grid-column:2;justify-self:start}.sai-fab{right:14px;bottom:14px}}

/* Photo slots: comp photos load through a throttle (see market-photos.js), so a card
   shows a calm shimmer rather than an empty hole, and a definite glyph if the selling
   dealer's host refuses outright. */
.ml-photo-wait{display:block;width:100%;height:100%;border-radius:var(--r-control);
 background:linear-gradient(100deg,color-mix(in srgb,var(--ink) 7%,transparent) 30%,
  color-mix(in srgb,var(--ink) 13%,transparent) 50%,
  color-mix(in srgb,var(--ink) 7%,transparent) 70%);
 background-size:220% 100%;animation:ml-shimmer 1.4s ease-in-out infinite}
@keyframes ml-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ml-photo-none{display:grid;place-items:center;width:100%;height:100%;border-radius:var(--r-control);
 background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);font-size:var(--fs-lead)}
@media (prefers-reduced-motion:reduce){.ml-photo-wait{animation:none}}

/* ---- Agent: showing the work (web/ai-agent.js renders these) ---- */
.sag-timeline{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.sag-step{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);
 border-radius:var(--radius-sm,7px);background:var(--surface);font-size:var(--fs-small)}
.sag-step-icon{flex:0 0 auto;width:18px;height:18px;border-radius:var(--r-control);display:grid;place-items:center;
 background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:var(--fs-small)}
.sag-step-label{color:var(--ink);font-weight:700}
.sag-step-meta{margin-left:auto;color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
.sag-step.running{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sag-step.failed .sag-step-meta{color:#c0392b}
.sag-step-spin{flex:0 0 auto;width:11px;height:11px;border-radius:50%;
 border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);
 animation:sag-spin .7s linear infinite}
@keyframes sag-spin{to{transform:rotate(360deg)}}
.sag-card{margin:-2px 0 4px 26px}
.sag-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm,7px)}
.sag-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.sag-table th{text-align:left;padding:6px 8px;color:var(--muted);font-weight:700;
 background:color-mix(in srgb,var(--ink) 4%,transparent);border-bottom:1px solid var(--line)}
.sag-table td{padding:6px 8px;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.sag-table tr:last-child td{border-bottom:none}
.sag-stock{font-weight:700;white-space:nowrap}
.sag-num{text-align:right;white-space:nowrap}
.sag-flag{color:#b26a00;font-size:var(--fs-micro);font-weight:700;white-space:nowrap}
.sag-more,.sag-empty{margin:6px 0 0;color:var(--muted);font-size:var(--fs-small)}
.sag-figures{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;border:1px solid var(--line);
 border-radius:var(--radius-sm,7px);background:var(--surface)}
.sag-figure{display:flex;flex-direction:column;gap:1px}
.sag-figure span{color:var(--muted);font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sag-figure strong{color:var(--ink);font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.sag-answer{margin-top:4px}
/* Confirm cards for proposed changes (writes land in a later round) */
.sag-props{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sag-props-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
 color:var(--ink);font-size:var(--fs-small);font-weight:700}
.sag-prop{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);
 border-left:3px solid var(--muted);border-radius:var(--radius-sm,7px);background:var(--surface)}
.sag-prop.risk-green{border-left-color:#1f9d55}
.sag-prop.risk-yellow{border-left-color:#c08a00}
.sag-prop.risk-red{border-left-color:#c0392b}
.sag-prop-warn{background:color-mix(in srgb,#c0392b 5%,var(--surface))}
.sag-prop-head{display:flex;align-items:flex-start;gap:8px}
.sag-prop-icon{flex:0 0 auto;color:var(--muted)}
.sag-prop-text{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.sag-prop-actions{display:flex;gap:8px}
@media (prefers-reduced-motion:reduce){.sag-step-spin{animation:none}}

/* Export-from-your-old-DMS links on the Import screen */
/* THE SPREADSHEET ROUTE IS THE ALTERNATIVE, and the screen has to look like it means that. It sits
   under the Frazer backup reader, so it is set back a step: a hairline above it and quieter
   headings, so an eye scanning the page lands on the backup first. Not hidden and not collapsed —
   a dealer coming from DealerCenter needs it to be the obvious next thing after "not Frazer". */
.migrate-csv-section{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.migrate-csv-section .section-title h2{color:var(--muted)}
.migrate-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0}
.migrate-sources .aim-guide{margin:0}
.sag-applied{margin-top:6px;padding:6px 10px;border-radius:var(--radius-sm,6px);
 background:color-mix(in srgb,#1f9d55 8%,transparent);color:var(--ink);font-size:var(--fs-small)}

/* Attach an auction listing link (or a report PDF) to a car after the fact */
.hx-attach{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.hx-attach summary{cursor:pointer;color:var(--accent);font-size:var(--fs-small);font-weight:700;list-style:none;padding:4px 0}
.hx-attach summary::-webkit-details-marker{display:none}
.hx-attach summary:hover{text-decoration:underline}
.hx-attach summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hx-attach-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.hx-attach-row input[type=text]{flex:1 1 320px;min-height:36px;padding:8px 10px;
 color:var(--input-ink,var(--ink));background:var(--input-bg,var(--surface));
 border:1px solid var(--line);border-radius:var(--radius-sm,7px)}
.hx-attach-row input[type=text]:focus{border-color:var(--accent);outline:none;
 box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}

/* Role preview: a lens on what staff see. Must never look like a normal state. */
.role-preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:9px 16px;background:#7a4b00;color:#fff;
 box-shadow:0 -2px 12px rgba(0,0,0,.28);font-size:var(--fs-small)}
.role-preview-bar strong{font-size:var(--fs-small);white-space:nowrap}
.role-preview-bar span{flex:1 1 320px;opacity:.92;line-height:calc(var(--ui-copy) + 8px)}
.role-preview-bar button{flex:0 0 auto;padding:6px 12px;border-radius:var(--r-control);cursor:pointer;
 background:#fff;color:#7a4b00;border:none;font-size:var(--fs-small);font-weight:700}
.role-preview-bar button:hover{background:#ffe9c7}

/* ---------------------------------------------------------------------------
 * "Use the AI you already pay for" connect cards (web/ai-engines.js)
 *
 * One card shape for Claude, ChatGPT and Gemini. The numbered rail is the point:
 * a dealer connecting an AI subscription for the first time should always be able
 * to see how many steps there are and which one they are on, because the two
 * flows differ (Claude asks for a pasted code, ChatGPT does not) and an unlabeled
 * wait reads as a hang.
 *
 * Everything below consumes existing design tokens, so all twelve design presets
 * and both light/dark appearances restyle these for free.
 * ------------------------------------------------------------------------- */
.aie-card{display:flex;flex-direction:column;gap:12px;padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.aie-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aie-name{font-weight:600;font-size:var(--fs-lead);color:var(--ink)}
.aie-version{font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}
.aie-pill{margin-left:auto;padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:600;letter-spacing:.02em;border:1px solid var(--line);color:var(--muted);background:var(--surface-strong)}
.aie-pill.connected{color:#0d7a4a;border-color:color-mix(in srgb,#0d7a4a 35%,var(--line));background:color-mix(in srgb,#0d7a4a 10%,var(--surface))}
.aie-pill.installed{color:#8a5a00;border-color:color-mix(in srgb,#8a5a00 32%,var(--line));background:color-mix(in srgb,#8a5a00 9%,var(--surface))}
.aie-pill.unavailable{color:var(--muted)}

/* Numbered step rail. Horizontal on a real screen, stacked when narrow - a wrapped
 * rail that reflowed mid-step would misread as progress the dealer has not made. */
.aie-steps{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.aie-step{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--muted)}
.aie-step-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--r-stadium);border:1px solid var(--line);background:var(--surface-strong);font-size:var(--fs-small);font-weight:700;line-height:1}
.aie-step.done{color:var(--ink)}
.aie-step.done .aie-step-dot{border-color:color-mix(in srgb,#0d7a4a 45%,var(--line));background:color-mix(in srgb,#0d7a4a 14%,var(--surface));color:#0d7a4a}
.aie-step.current{color:var(--ink);font-weight:600}
.aie-step.current .aie-step-dot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

.aie-copy{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.aie-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aie-keyrow{display:flex;gap:8px;flex-wrap:wrap}
.aie-key{flex:1 1 220px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body)}
.aie-key:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.aie-doc{font-size:var(--fs-small);color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.aie-doc:hover{border-bottom-color:var(--accent)}

.aie-ok{display:flex;align-items:flex-start;gap:12px}
.aie-ok-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-stadium);background:color-mix(in srgb,#0d7a4a 16%,var(--surface));color:#0d7a4a;font-weight:700}
.aie-ok strong{display:block;font-size:var(--fs-body);color:var(--ink)}
.aie-ok span{display:block;font-size:var(--fs-small);color:var(--muted);margin-top:2px}

.aie-error{margin:0;padding:10px 12px;border-radius:var(--r-surface);font-size:var(--fs-body);color:#9a2617;border:1px solid color-mix(in srgb,#9a2617 30%,var(--line));background:color-mix(in srgb,#9a2617 8%,var(--surface))}
/* The account-suspension warning for Gemini lands here, so it has to be readable
 * rather than fine print a dealer scrolls past. */
.aie-caveat{margin:0;padding:10px 12px;border-radius:var(--r-surface);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink);border:1px solid var(--line);background:var(--surface-strong)}
.aie-cred{margin:0;font-size:var(--fs-small);color:var(--muted)}

@media(max-width:640px){
  .aie-steps{gap:10px}
  .aie-step{font-size:var(--fs-small)}
  .aie-pill{margin-left:0}
}

/* ---------------------------------------------------------------------------
 * Agent proposal actions.
 *
 * These three were emitted by web/ai-agent.js with no styling at all, so an
 * agent proposal rendered its Apply / Apply all / Skip controls as bare
 * unstyled buttons - the one moment in the whole feature where the dealer is
 * being asked to approve a change to their data.
 * ------------------------------------------------------------------------- */
.sag-apply,.sag-apply-all,.sag-skip{padding:6px 12px;border-radius:var(--r-surface);font-size:var(--fs-small);font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface-strong);color:var(--ink);transition:border-color .15s ease,transform .1s ease}
.sag-apply,.sag-apply-all{border-color:var(--accent);background:var(--accent);color:var(--accent-ink,#fff)}
.sag-apply:hover,.sag-apply-all:hover{filter:brightness(1.06)}
.sag-skip:hover{background:var(--surface);border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.sag-apply:active,.sag-apply-all:active,.sag-skip:active{transform:translateY(1px)}
.sag-apply:disabled,.sag-apply-all:disabled,.sag-skip:disabled{opacity:.55;cursor:default;transform:none;filter:none}
.sag-apply:focus-visible,.sag-apply-all:focus-visible,.sag-skip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A red-tier proposal must not have a button that looks as routine as a green one. */
.sag-prop.risk-red .sag-apply{border-color:#9a2617;background:#9a2617;color:#fff}

/* The optional "did it show you a code?" fallback inside a waiting sign-in. Folded away by
 * default because most sign-ins never show one - the old build presented it as a required
 * step and dealers waited for a code that was never coming. */
.aie-fallback{border-top:1px solid var(--line);padding-top:10px}
.aie-fallback>summary{cursor:pointer;font-size:var(--fs-small);color:var(--muted);list-style:none}
.aie-fallback>summary::-webkit-details-marker{display:none}
.aie-fallback>summary::before{content:'› ';display:inline-block;transition:transform .15s ease}
.aie-fallback[open]>summary::before{transform:rotate(90deg)}
.aie-fallback>summary:hover{color:var(--ink)}
.aie-fallback .aie-keyrow{margin-top:10px}

/* The provider mark carries the tile. At 30px the ChatGPT logo read as an afterthought next
 * to its own label; the tile has the room, so give the thing a dealer recognises the space. */
.aim-tile-logo{min-height:44px}
.aim-tile-logo img,.aim-tile-logo svg{width:40px;height:40px;object-fit:contain}

/* Bring-your-own vendor account (vAuto, Black Book). Deliberately plain: this one is asking the
 * dealer for details their vendor gave them, and the warning that we have not tested it has to read
 * as a caution rather than as a feature badge. */
.aim-vendor-panel{display:grid;gap:10px}
.aim-key-state.warn{padding:10px 12px;border:1px solid var(--amber);border-radius:var(--r-surface);color:var(--amber);background:var(--ambersoft);font-size:var(--fs-body)}
.aim-vendor-panel code{padding:1px 6px;border-radius:var(--r-control);background:var(--soft);font-size:var(--fs-small)}
.aim-testresult.good{color:var(--green)}
.aim-testresult.bad{color:var(--red)}

/* Manual install steps, shown only for an engine AutoSteward cannot install itself. Numbered and
 * plain, because this is the one moment a dealer has to leave AutoSteward and use PowerShell. */
.aie-manual{margin:12px 0 0;padding-left:22px;display:grid;gap:10px}
.aie-manual li{line-height:calc(var(--ui-copy) + 8px)}
/* The "then paste your key" line on a key-only engine whose CLI is still missing. It separates
   the two halves of a two-step setup, so the key box reads as step two rather than the only step. */
.aie-keythen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.aie-cmdrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.aie-cmd{flex:1 1 320px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft);font-size:var(--fs-body);overflow-wrap:anywhere;user-select:all}

/* ROOM FOR THE ASSISTANT BUTTON, so it stops sitting on top of real controls.
 *
 * .sai-fab is position:fixed at right:20px/bottom:20px, which means it floats over whatever
 * happens to occupy the bottom-right of the VIEWPORT — it is not part of the page flow and the
 * page had no idea it existed. Measured on the running app 2026-08-13, vehicle record DMS-1003:
 * the FAB's box [1501,338,94,46] overlapped the "Manage Photos" button [1459,368,122,32]. A
 * right-aligned action row is exactly where a panel puts its buttons, so this is not a one-off.
 *
 * Reserving the FAB's own height plus its offset at the end of the page keeps content clear of it
 * when scrolled to the bottom, which is where those action rows come to rest. :has() scopes it to
 * pages that actually render the assistant, so every other screen keeps its original spacing. */
body:has(.sai-fab) .page-shell{padding-bottom:84px}

/* ---- Partner (FIX158+) rules for his integration screens, appended after ours by the merge. ---- */
/* AutoSteward - AI & Market Data UI (settings page + on-vehicle panels).
   Token-driven so it adopts every design + light/dark automatically. */

/* ---- Settings page ---- */
.aim-setup{width:min(1180px,100%);margin:0 auto;padding-bottom:20px}
.aim-page-head{padding:4px 0 10px}
.aim-page-head h2{margin:2px 0 4px;color:var(--ink);font-size:var(--fs-h2)}
.aim-page-head p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-tabs{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.aim-tabs button{min-height:36px;padding:7px 16px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer}
.aim-tabs button.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 24%,transparent)}
.aim-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aim-workspace{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:16px;align-items:start}
.aim-choice-panel,.aim-config-panel{border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--surface);box-shadow:var(--shadow)}
.aim-choice-panel{padding:14px;display:grid;gap:10px}
.aim-kicker{color:var(--muted);font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.aim-choice-list{display:grid;gap:7px}
.aim-choice{width:100%;display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.aim-choice:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.aim-choice.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent)}
.aim-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aim-choice:disabled{opacity:.65;cursor:not-allowed}
.aim-choice-dot{flex:0 0 auto;width:13px;height:13px;margin-top:3px;border:2px solid var(--muted);border-radius:50%;background:transparent}
.aim-choice.on .aim-choice-dot{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 8px var(--accent)}
.aim-choice-copy{min-width:0;display:grid;gap:2px;flex:1}
.aim-choice-copy strong{color:var(--ink);font-size:var(--fs-small)}
.aim-choice-copy small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.aim-choice-badge{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted);font-size:var(--fs-micro);font-weight:700;white-space:nowrap}
.aim-config-panel{overflow:hidden}
.aim-config-head{padding:15px 16px 12px;border-bottom:1px solid var(--line);display:grid;gap:12px}
.aim-config-head h3{margin:2px 0 0;color:var(--ink);font-size:var(--fs-lead)}
.aim-compact-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.aim-compact-fact{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);display:grid;gap:2px}
.aim-compact-fact span{color:var(--muted);font-size:var(--fs-micro);font-weight:700}
.aim-compact-fact strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:var(--fs-small)}
.aim-inline-error{padding:8px 10px;border-radius:7px;background:color-mix(in srgb,#c0392b 9%,var(--surface));color:#c0392b;font-size:var(--fs-small);font-weight:700}
.aim-config-body{padding:16px;display:grid;gap:14px}
.aim-section{display:grid;gap:7px}
.aim-label{color:var(--ink);font-size:var(--fs-small);font-weight:700}
.aim-segments{display:flex;flex-wrap:wrap;gap:6px}
.aim-segment{min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);color:var(--muted);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer}
.aim-segment.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.aim-segment:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aim-field>span small{color:var(--muted);font-weight:500}
.aim-field small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.aim-field-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:12px;max-width:680px}
.aim-action-result{max-width:680px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);font-size:var(--fs-small);font-weight:700}
.aim-action-result.success{border-color:color-mix(in srgb,#1f9d55 45%,var(--line));color:#1f8a5b;background:color-mix(in srgb,#1f9d55 8%,var(--surface))}
.aim-action-result.warning{border-color:color-mix(in srgb,#c88a1e 45%,var(--line));color:#9a6a12;background:color-mix(in srgb,#c88a1e 8%,var(--surface))}
.aim-action-result.error{border-color:color-mix(in srgb,#c0392b 45%,var(--line));color:#c0392b;background:color-mix(in srgb,#c0392b 8%,var(--surface))}
.aim-empty-state{max-width:680px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong)}
.aim-empty-state h3{margin:0 0 5px;color:var(--ink);font-size:var(--fs-body)}
.aim-empty-state p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-safety,.aim-footnote{margin:0;padding:11px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--accent) 4%,var(--surface));color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-safety strong{color:var(--ink)}
.aim-subpanel{max-width:680px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong)}
.aim-subpanel p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
@media(max-width:900px){.aim-workspace{grid-template-columns:1fr}.aim-choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}.aim-compact-status{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-theme="dark"] .aie-cmd{background:var(--input-bg);color:var(--input-ink);border-color:var(--line)}
/* FIX158 — compact integration setup embedded under Dealer Information. */
.aim-setup{display:grid;gap:14px}
.aim-setup>.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);background:var(--surface-soft)}
.aim-setup>.panel-head h2,.aim-setup>.panel-head p{margin:0}
.aim-setup>.panel-head .eyebrow{margin-bottom:4px}
.aim-tabs{margin:0}
.aim-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.aim-fact{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);background:var(--surface-strong)}
.aim-fact span{font-size:var(--fs-small);color:var(--muted)}
.aim-fact strong{font-size:var(--fs-body);color:var(--ink);overflow-wrap:anywhere}
.aim-subpanel{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);background:var(--surface-strong)}
.aim-subpanel h3,.aim-subpanel p{margin:0}
.aim-field small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.aim-grid .span-2{grid-column:1/-1}
@media(max-width:900px){.aim-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.aim-facts{grid-template-columns:1fr}}
/* FIX158 R6 — subscription recovery, guided Local AI, and sold-history clarity. */
.aie-test-result{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);font-size:var(--fs-small);font-weight:700}
.aie-test-result.success{border-color:color-mix(in srgb,#1f9d55 45%,var(--line));color:#1f8a5b;background:color-mix(in srgb,#1f9d55 8%,var(--surface))}
.aie-test-result.error{border-color:color-mix(in srgb,#c0392b 45%,var(--line));color:#c0392b;background:color-mix(in srgb,#c0392b 8%,var(--surface))}
.aie-test-result.info{color:var(--muted)}
.aim-local-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.aim-local-steps li{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong);color:var(--muted)}
.aim-local-steps li>span{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-micro);font-weight:800}
.aim-local-steps li>div{display:grid;gap:2px;min-width:0}
.aim-local-steps strong{color:var(--ink);font-size:var(--fs-small)}
.aim-local-steps small{font-size:var(--fs-micro);line-height:var(--lh-micro)}
.aim-local-steps li.done>span{color:#0d7a4a;border-color:color-mix(in srgb,#0d7a4a 45%,var(--line));background:color-mix(in srgb,#0d7a4a 12%,var(--surface))}
.aim-local-steps li.done>span::after{content:'✓';font-size:var(--fs-small)}
.aim-local-steps li.done>span{font-size:0}
.aim-local-steps li.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.aim-local-steps li.current>span{border-color:var(--accent);background:var(--accent);color:var(--accent-ink,#fff)}
.aim-local-ready{display:grid;gap:12px}
.aim-local-hardware{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);align-self:end}
.aim-local-hardware span,.aim-local-hardware small{color:var(--muted);font-size:var(--fs-micro)}
.aim-local-hardware strong{color:var(--ink);font-size:var(--fs-small)}
.aim-download-status{display:grid;gap:6px;margin-top:10px}
.aim-download-status>div{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:var(--fs-small)}
.aim-download-status progress{width:100%;height:10px}
.aim-advanced{border-top:1px solid var(--line);padding-top:10px}
.aim-advanced>summary{cursor:pointer;color:var(--muted);font-size:var(--fs-small);font-weight:700}
.aim-advanced-body{display:grid;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong)}
.aim-advanced-body .aim-footnote{padding:8px 0 0;border-top:1px solid var(--line);background:transparent}
.aim-history-state{display:grid;gap:12px}
.aim-history-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.aim-history-state .aim-compact-fact{background:var(--surface)}
@media(max-width:900px){.aim-local-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* FIX158 R6 — Local AI wizard ownership/storage/layout refinements. */
.aim-ownership-note{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong);display:grid;gap:4px}
.aim-ownership-note strong{color:var(--ink);font-size:var(--fs-small)}
.aim-ownership-note p{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.aim-local-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.aim-local-card{min-height:132px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:9px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong)}
.aim-local-card>.aim-label{margin:0;color:var(--muted)}
.aim-local-card>strong{font-size:var(--fs-body);color:var(--ink)}
.aim-local-card>small{color:var(--muted);font-size:var(--fs-micro)}
.aim-local-card .aim-actions{margin-top:auto}
.aim-storage-note{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft)}
.aim-storage-note strong{color:var(--ink);font-size:var(--fs-small)}
.aim-storage-note small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
@media(max-width:700px){.aim-local-pair{grid-template-columns:1fr}}
/* FIX158 R6 — truthful staged Local AI setup progress. */
.aim-setup-progress{display:grid;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong)}
.aim-setup-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.aim-setup-progress-head strong{color:var(--ink);font-size:var(--fs-small)}
.aim-setup-progress-head span,.aim-setup-progress small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.aim-setup-progress progress{width:100%;height:10px}