:root {
  --bg: #f9f9f9; --card: #fff; --text: #1d1d1f; --muted: #6e6e73; --border: #e4e4e7;
  --brand: #e0185a; --brand-soft: #fdeef3; --brand-soft-2: #fbe3ec;
  --green-soft: #e9f7ef; --green: #1a7f4b;
}
/* The design was reviewed at ~90% browser zoom; bake that in so the page opens at the intended size. */
html { zoom: 0.9; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkle { fill: currentColor; stroke: none; width: 22px; height: 22px; flex: none; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.page { max-width: 1320px; margin: 0 auto; padding: 40px 48px 64px; }
.back { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; font-size: 18px; margin-bottom: 28px; }
.back svg { width: 18px; height: 18px; }
.layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 24px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
h1 { font-size: 22px; line-height: 1.3; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 18px; margin: 0 0 16px; font-weight: 600; }

.product { display: flex; gap: 16px; align-items: center; padding: 20px 24px; }
.thumb { width: 64px; height: 64px; flex: none; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
.meta { margin: 0; font-size: 13px; display: flex; gap: 14px; }

.about ul { list-style: none; margin: 0; padding: 0; }
.about li { position: relative; padding: 12px 12px 12px 22px; margin: 0 -12px; border-radius: 6px; line-height: 1.6; }
.about li::before { content: "•"; position: absolute; left: 6px; color: var(--muted); }
.page[data-state="results"] li.improvable { background: #f2f2f4; cursor: pointer; }
.page[data-state="results"] li.improvable:hover { background: #ebebee; }
.page[data-state="results"] li.improvable.selected { background: var(--brand-soft); }
.page[data-state="results"] li.applied { background: var(--green-soft); cursor: pointer; }

.attrs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; }
.attrs dt { font-weight: 600; font-size: 15px; }
.attrs dd { margin: 0; color: #3a3a3c; font-size: 15px; }

/* Skeleton shown while "scanning" */
.skeleton { display: none; }
.skeleton i { display: block; height: 20px; margin-bottom: 14px; border-radius: 3px;
  background: linear-gradient(90deg, #dcdcdf, #f6f6f7 60%, #f6f6f7);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i:nth-child(2n) { margin-bottom: 26px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.page[data-state="scanning"] .real { display: none; }
.page[data-state="scanning"] .skeleton { display: block; }

/* Right column */
.cta p { margin: 0 0 20px; color: #3a3a3c; line-height: 1.7; }
.cta-row { display: flex; justify-content: flex-end; min-height: 48px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 24px; font-size: 17px; border: 1.5px solid var(--brand); }
.pill.primary { background: var(--brand); color: #fff; }
.pill.outline { background: #fff; color: var(--brand); }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.scan-label { display: none; align-items: center; gap: 10px; color: #3a3a3c; font-size: 17px; }
.scan-label .sparkle { color: var(--brand); width: 34px; height: 34px; animation: spin 2.4s ease-in-out infinite; }
@keyframes spin { 50% { transform: scale(.75) rotate(45deg); } }
.page[data-state="scanning"] #improve { display: none; }
.page[data-state="scanning"] .scan-label { display: inline-flex; }
.page[data-state="results"] .cta, .page:not([data-state="results"]) .results { display: none; }
.results { display: flex; flex-direction: column; gap: 24px; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.insight { margin-bottom: 18px; }
.insight:last-child { margin-bottom: 0; }
.insight p { margin: 0 0 6px; }
.insight .row { display: flex; align-items: center; gap: 16px; }
.track { flex: 1; height: 10px; background: #e8e8ea; border-radius: 5px; overflow: hidden; }
.track b { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.insight .pct { font: 13px ui-monospace, Menlo, monospace; min-width: 48px; text-align: right; }

.imp-head { display: flex; justify-content: space-between; align-items: baseline; }
.imp-nav { display: flex; gap: 20px; }
.nav { background: none; border: 0; color: #9a9aa0; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; padding: 0; }
.nav.next { color: var(--brand); }
.nav:disabled { color: #c4c4c8; cursor: not-allowed; }
.nav svg { width: 18px; height: 18px; }
.imp-meta { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 4px; }
.imp-meta span { font: 13px ui-monospace, Menlo, monospace; color: var(--muted); }
.orig { margin: 0 0 14px; color: var(--muted); text-decoration: line-through; line-height: 1.6; }
.improved-box { position: relative; background: var(--brand-soft); border-radius: 10px; padding: 16px 44px 16px 16px; }
.improved-box p { margin: 0; line-height: 1.6; }
.improved-box p.loading { color: var(--muted); font-style: italic; animation: pulse 1.4s ease-in-out infinite; }
.improved-box p.flash { animation: flash .9s ease; }
@keyframes flash { from { background: #fff3b0; } to { background: transparent; } }
@keyframes pulse { 50% { opacity: .5; } }
.info-btn { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brand); display: grid; place-items: center; }
.info { width: 20px; height: 20px; }
.icons { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 10px 0 18px; }
.icon { background: none; border: 0; color: #555; padding: 2px; display: grid; place-items: center; }
.icon[aria-pressed="true"] { color: var(--brand); }
.icon svg { width: 22px; height: 22px; }
.link { background: none; border: 0; color: var(--brand); font-size: 14px; margin-right: auto; padding: 0; }
.actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: nowrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); }

.chat { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding: 16px 0 4px; }
.chat:empty { display: none; }
.msg { max-width: 88%; padding: 9px 14px; border-radius: 14px; white-space: pre-wrap; font-size: 15px; }
.msg.ai { background: #f1f1f3; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.thinking { color: var(--muted); font-style: italic; animation: pulse 1.4s ease-in-out infinite; }

.form { position: relative; margin-top: 16px; }
.form textarea { grid-area: 1 / 1; display: block; width: 100%; min-height: 0; padding: 16px 56px 16px 16px; border: 1px solid #cfcfd3; border-radius: 10px;
  font: inherit; line-height: 1.5; resize: none; overflow-y: auto; box-sizing: border-box; }
.form button { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px;
  border-radius: 50%; border: 0; background: #d8d8dc; color: #444; display: grid; place-items: center; }
.form:has(textarea:not(:placeholder-shown)) button { background: var(--brand); color: #fff; }
.form :disabled { opacity: .5; cursor: not-allowed; }

.model-panel { position: fixed; right: 20px; bottom: 20px; width: 300px; background: #1d1d1f; color: #fff;
  border-radius: 12px; padding: 14px 16px; font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 10; }
.model-panel[hidden] { display: none; }
.model-panel .bar { height: 5px; background: #444; border-radius: 3px; margin: 8px 0; overflow: hidden; }
#bar-fill { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.model-panel p { margin: 0 0 6px; color: #d0d0d4; word-break: break-word; }
.model-panel small { color: #8e8e93; }

@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } .page { padding: 24px 16px 48px; } }

/* Action buttons always sit side by side; they shrink to fit the card. */
.actions .pill { flex: 0 1 auto; min-width: min-content; justify-content: center; text-align: center; white-space: nowrap; padding: 12px clamp(14px, 2vw, 24px); font-size: clamp(14px, 1.3vw, 17px); }
.applied-status { display: inline-flex; align-items: center; gap: 6px; padding: 12px 8px; color: var(--green); font-size: clamp(14px, 1.3vw, 17px); font-weight: 600; white-space: nowrap; }
.applied-status svg { width: 20px; height: 20px; }
.applied-status[hidden] { display: none; }

.ext { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); text-decoration: none; }
.ext:hover { text-decoration: underline; }
.ext svg { width: 13px; height: 13px; }

.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px;
  background: var(--card); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { display: block; }
.user { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #3a3a3c; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #ececef; display: grid; place-items: center; }
.avatar svg { width: 20px; height: 20px; color: #3a3a3c; }

.chip { display: inline-flex; align-items: center; gap: 8px; background: #e8e8ea; border-radius: 999px; padding: 4px 14px 4px 4px; font-size: 16px; }
.chip svg { width: 28px; height: 28px; }
.chip[hidden] { display: none; }

/* Buttons split the card's content width equally, so they never touch the card padding. */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions .pill { width: 100%; min-width: 0; padding: 12px 10px; font-size: clamp(14px, 1.15vw, 16px); }
.actions .applied-status { justify-content: center; }

/* ---- Chat, per design: user bubble (pink, right), plain AI text, status line while working ---- */
.chat { gap: 16px; padding: 24px 0 8px; }
.msg.user { background: var(--brand-soft); color: var(--text); text-align: right; border-radius: 12px; padding: 14px 18px; max-width: 90%; }
.msg.ai { background: none; border-radius: 0; padding: 4px 4px; max-width: 100%; align-self: stretch; }
.msg.thinking { display: flex; align-items: center; gap: 12px; font-style: normal; color: #3a3a3c; animation: none; }
.msg.thinking .sparkle { color: var(--brand); width: 30px; height: 30px; animation: spin 2.4s ease-in-out infinite; }

.improved-skeleton { display: none; }
.improved-skeleton i { display: block; height: 28px; margin: 4px 0 14px; background: linear-gradient(90deg, #f291ac, #fbd3df 70%, #fdeef3);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.improved-skeleton i:last-child { margin-bottom: 4px; }
.improved-box.generating #improved, .improved-box.generating .info-btn, .improved-box.generating .tooltip { display: none; }
.improved-box.generating .improved-skeleton { display: block; }

.actions .pill:disabled { background: #d4d4d8; border-color: #d4d4d8; color: #6b6b70; opacity: 1; }
.form textarea:disabled { opacity: 1; background: #fff; }
.stop-ic { display: none; }
.form.busy .stop-ic { display: block; }
.form.busy .arrow-ic { display: none; }
.form.busy button { background: #8e8e93; color: #e5e5ea; }

/* Author display rules must not defeat the hidden attribute (e.g. "Use improvement" once applied). */
[hidden] { display: none !important; }

/* Balloon explaining where the suggestion comes from; opens on hover or keyboard focus. */
.tooltip { position: absolute; z-index: 20; top: 40px; right: 6px; width: min(340px, 90vw); padding: 14px 16px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: 14px; line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.tooltip::before { content: ""; position: absolute; top: -6px; right: 17px; width: 10px; height: 10px; background: #fff;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
.tooltip ul { margin: 0; padding-left: 18px; }
.tooltip li + li { margin-top: 6px; }
.info-btn:hover + .tooltip, .info-btn:focus-visible + .tooltip, .tooltip:hover { opacity: 1; visibility: visible; transform: none; }

/* Copy button: shows a check for a moment after a successful copy. */
.check-ic { display: none; }
.icon.copied { color: var(--green); }
.icon.copied .copy-ic { display: none; }
.icon.copied .check-ic { display: block; }

/* Icon buttons (copy, thumbs): brand colour on hover/focus, like the main button. */
.icon { transition: color .15s; }
.icon:hover, .icon:focus-visible { color: var(--brand); }

/* "Improvement copied" balloon above the check after a successful copy. */
.icon { position: relative; }
.icon.copied { color: var(--green); }
.icon.copied::after { content: "Improvement copied"; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #1d1d1f; color: #fff; font-size: 13px; line-height: 1.2;
  pointer-events: none; animation: tip-in .15s ease; }
.icon.copied::before { content: ""; position: absolute; bottom: calc(100% + 5px); left: 50%; width: 8px; height: 8px; margin-left: -4px;
  background: #1d1d1f; transform: rotate(45deg); pointer-events: none; animation: tip-in .15s ease; }
@keyframes tip-in { from { opacity: 0; } }

/* Logo: the wordmark box includes the descender of the "y", so its letters sit high; nudge down so the caps centre on the mark. */
.brand .wordmark { margin-top: 4px; }

/* Auto-growing text box: a hidden copy of the text (or the placeholder when empty) shares the grid cell, so the
   browser's own layout makes the box exactly as tall as its content. Nothing is measured in JavaScript, so it cannot clip. */
.grow { display: grid; }
.grow::after { content: attr(data-replicated) " "; grid-area: 1 / 1; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word;
  padding: 16px 56px 16px 16px; border: 1px solid transparent; font: inherit; line-height: 1.5; box-sizing: border-box; max-height: 220px; overflow: hidden; }

/* Narrow screens: stack the two action buttons so neither label is ever clipped. */
@media (max-width: 480px) {
  .actions { grid-template-columns: 1fr; }
  .actions .applied-status { justify-self: center; }
}

/* Safari safety margin: the hidden copy is a little narrower than the real text box and the placeholder uses the same
   line-height, so wherever Safari wraps its placeholder, the copy wraps at the same place or earlier. The box can
   then only ever be as tall as, or marginally taller than, what it shows, never shorter. */
.form textarea::placeholder { line-height: 1.5; opacity: 1; color: #9a9aa0; }
.grow::after { padding-right: 68px; padding-bottom: 17px; }
.form textarea { align-self: stretch; }

/* ---- Decision row: [Keep original] [Use improvement], then Try different version, "or", and the text box ---- */
.chat { padding: 4px 0 20px; }
.retry-row { margin-top: 20px; }
.retry-row .pill { width: 100%; justify-content: center; }
.or { margin: 14px 0; text-align: center; color: var(--muted); font-size: 15px; }
.form { margin-top: 0; }
.progress { margin: -8px 0 10px; font-size: 13px; color: var(--muted); }
.decided { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 48px; font-weight: 600; font-size: clamp(14px, 1.3vw, 17px); }
.decided::before { content: "✓"; }
.decided.applied { color: var(--green); }
.decided.original { color: var(--muted); }
.decided .link { margin: 0; font-weight: 400; text-decoration: underline; }
.about li.kept-original { background: none; }

/* ---- Final layout. Closed: suggestion, decision, "Try different version", "or", text box.
        Open (has messages): a divider and the conversation sit between "Try different version" and the text box; "or" hides. ---- */
.actions { border-bottom: 0; padding-bottom: 0; }
.icons { margin: 10px 0 44px; }
.retry-row { margin-top: 20px; }
.chat { padding: 0; margin: 0; gap: 24px; }
.chat:not(:empty) { margin-top: 32px; padding: 36px 0 8px; border-top: 1px solid var(--border); }
.chat:not(:empty) + .or { display: none; }
.chat:not(:empty) ~ .form { margin-top: 20px; }
.or { margin: 16px 0; }
.msg.ai { padding: 4px 24px; } /* aligns with the text inside the suggestion box */

/* ---- Card buttons: one label size and one (slightly lower) height for all three ---- */
.actions .pill, .retry-row .pill { font-size: 16px; line-height: 1.5; padding: 8px 16px; }
.decided { min-height: 43px; font-size: 16px; }

/* ---- Containing the chat ----
   Desktop: the right column can never be taller than the left one, so the AI Improvements card grows with its content
   only until the bottom of the Attributes card; after that the conversation scrolls inside its own area. */
.improvements { display: flex; flex-direction: column; }
.improvements > * { flex: none; }
.improvements > .chat { flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

@media (min-width: 961px) {
  .layout { align-items: stretch; }
  .col-side { contain: size; min-height: 0; }       /* ignore content height: the row height comes from the left column */
  .col-side > .results { flex: 0 1 auto; min-height: 0; }
  .results > .improvements { flex: 0 1 auto; min-height: 0; }
}
/* Stacked (narrow) layout: there is no neighbour to match, so cap the conversation height instead. */
@media (max-width: 960px) {
  .improvements > .chat { max-height: 420px; }
}

/* ---- Loading state: two shimmer lines (a typical result), same line pitch as the text, so the box barely changes height ---- */
.improved-skeleton i { height: 18px; margin: 4px 0 7.6px; }
.improved-skeleton i:last-child { margin-bottom: 4px; width: 62%; }

/* ---- While a request runs, every control in the card is disabled and looks it ---- */
.retry-row .pill:disabled { background: #d4d4d8; border-color: #d4d4d8; color: #6b6b70; opacity: 1; }
.retry-row .pill:disabled .sparkle { color: #6b6b70; }
.icon:disabled, .link:disabled, .nav:disabled { opacity: .45; cursor: not-allowed; }
.icon:disabled:hover { color: #555; }
.icon:disabled.copied { color: inherit; }

/* ---- Locked (bullet decided): "Try different version" and the text box stay visible but disabled until "Change" ---- */
.form.locked textarea { background: #f4f4f6; color: #9a9aa0; cursor: not-allowed; }
.form.locked textarea::placeholder { color: #b4b4ba; }
.form.locked button { background: #d4d4d8; color: #8e8e93; }

/* ---- Summary "page" of the AI Improvements card: shown once every bullet is decided, instead of any bullet's content ---- */
.improvements[data-view="bullets"] > .summary { display: none; }
.improvements[data-view="summary"] > :not(.imp-head):not(.summary) { display: none; }
.improvements[data-view="summary"] #next { visibility: hidden; }
.summary { padding: 36px 0 16px; text-align: center; }
.summary-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.summary-icon svg { width: 28px; height: 28px; stroke-width: 2.5; }
.summary h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.summary p { margin: 0 0 26px; color: #3a3a3c; font-size: 16px; }
.summary .pill { text-decoration: none; font-size: 16px; line-height: 1.5; padding: 10px 22px; }
.summary .pill svg { width: 16px; height: 16px; }