/* @agent:file-start browser-shared-styles */
/* @agent:module browser-shell */
/* @agent:owns Original shared layout, typography, controls and responsive rules. */
/* @agent:why Keep the original look identical while giving shared styling a declared owner. */
/* @agent:contracts none */
/* @agent:related browser-composer, browser-cart */
/* @agent:invariants Preserve original CSS rules, fonts, icons and asset URLs. */
/* @agent:file-end-header */
/* Silpo Text — the one typeface of the app (brand face served via /fonts, hackathon submission only). */
@font-face { font-family: "Silpo Text"; font-weight: 400; font-display: block; src: url("/fonts/silpo-400.woff2") format("woff2"); }
@font-face { font-family: "Silpo Text"; font-weight: 500; font-display: block; src: url("/fonts/silpo-500.woff2") format("woff2"); }
@font-face { font-family: "Silpo Text"; font-weight: 600; font-display: block; src: url("/fonts/silpo-600.woff2") format("woff2"); }
@font-face { font-family: "Silpo Text"; font-weight: 700; font-display: block; src: url("/fonts/silpo-700.woff2") format("woff2"); }
/* Dodano — tokens from the ai-factory.silpo.ua design system (design.md,
   tokens.css): warm cream canvas, white cards with large radii and a warm
   shadow, orange pill CTAs at 56px, near-black text, Silpo Text everywhere. */
:root {
  --background: #fff7ec;
  --surface: #ffffff;
  --foreground: #231815;
  --muted-foreground: #6f625a;
  --neutral-200: #f8f1e7;
  --neutral-300: #eadfce;
  --neutral-400: #d6c6b0;
  --border: #e0e0e0;
  --primary: #fc8526;
  --primary-hover: #f07a1c;
  --secondary: #ffd23c;
  --tertiary: #fcc48c;
  --error-soft: #fdecec;
  --success: #1c8a3c;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-card: oklch(0.55 0.18 55 / 0.35) 0px 20px 50px -18px;
  --font-sans: "Silpo Text", system-ui, sans-serif;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  font-size: 16px;
  line-height: 24px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 32rem; margin: 0 auto; padding: 12px 14px 120px; }

/* header: Сільпо × Dodano. */
header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 6px 16px; }
.brands { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; }
.brands .silpo { color: var(--primary); }
.silpo-logo { height: 40px; width: auto; display: block; margin-right: 4px; }
.brands .x { color: var(--neutral-400); font-weight: 400; font-size: 15px; }
.brand { text-decoration: none; color: var(--foreground); }
.brand::after { content: "."; color: var(--primary); }
header small, .muted { color: var(--muted-foreground); }

/* type scale: headline-md 33/48/700 tight, body 16/24, small 14/20, labels 600 */
h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 6px; }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 12px; }
p { margin: 8px 0; }
small { font-size: 14px; line-height: 20px; }
a { color: var(--foreground); }

/* cards: white, xl radius, warm shadow, no visible border */
section { background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-lg); padding: 24px; margin: 0 0 14px; box-shadow: var(--shadow-card); }
section[hidden] { display: none; }
fieldset { border: 0; padding: 0; margin: 16px 0 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary small { font-weight: 500; }
details[open] summary small { visibility: hidden; }
ol { padding-left: 20px; }

/* form controls */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input, textarea, select, button { font: inherit; }
input, textarea, select {
  display: block; width: 100%; min-height: 48px; border: 2px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px; background: var(--surface); color: inherit;
}
input:focus, textarea:focus { border-color: var(--primary); outline: none; }
input::placeholder, textarea::placeholder { color: var(--neutral-400); }
textarea { min-height: 128px; resize: vertical; }
input[type="file"] { padding: 10px; background: var(--neutral-200); border-style: dashed; border-color: var(--neutral-300); }
input[type="checkbox"] { accent-color: var(--primary); width: 22px; height: 22px; min-height: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* buttons: primary orange pill 56px with warm glow; secondary white pill with neutral border */
button {
  border: 2px solid var(--primary); border-radius: 9999px; background: var(--primary); color: #fff;
  font-weight: 600; min-height: 56px; padding: 14px 28px; cursor: pointer; width: 100%; font-size: 16px;
  box-shadow: oklch(0.55 0.18 55 / 0.35) 0px 20px 50px -18px;
}
button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button:disabled { opacity: 0.55; cursor: wait; box-shadow: none; }
button.ghost { background: var(--surface); color: var(--foreground); border-color: var(--neutral-300); box-shadow: none; }
button.ghost:hover { background: var(--neutral-200); }
button.small { width: auto; min-height: 44px; padding: 8px 20px; font-size: 15px; }
a > button { width: 100%; }

/* servings stepper: secondary pill with orange controls */
.stepper { display: inline-flex; align-items: center; background: var(--surface); border: 2px solid var(--neutral-300); border-radius: 9999px; overflow: hidden; vertical-align: middle; }
.stepper button { width: 48px; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--primary); font-size: 22px; padding: 0; box-shadow: none; }
.stepper button:hover { background: var(--neutral-200); }
.stepper input { width: 56px; border: 0; border-radius: 0; text-align: center; font-weight: 700; padding: 0; min-height: 44px; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ingredient rows */
.inline { display: flex; align-items: center; gap: 12px; font-weight: 400; margin: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200); flex-wrap: wrap; }
.inline:first-child { border-top: 0; }
.inline small { flex-basis: 100%; padding-left: 34px; color: var(--muted-foreground); margin-top: -6px; }
.qty { color: var(--muted-foreground); margin-left: auto; white-space: nowrap; }

/* creator ingredient editor */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row.single { grid-template-columns: 1fr; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 8px; align-items: center; margin: 8px 0; }
.row3 input { min-height: 44px; padding: 8px 12px; }
.row3 .inline { border: 0; padding: 0; white-space: nowrap; }
.del { background: var(--surface); color: var(--muted-foreground); border-color: var(--neutral-300); width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-md); font-size: 18px; box-shadow: none; }

/* agent log */
#log { list-style: none; padding: 0; margin: 0; }
#log li { position: relative; padding: 8px 0 8px 20px; border-top: 1px solid var(--neutral-200); font-size: 15px; line-height: 21px; }
#log .note { display: block; }
#agent summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.6px; min-height: 0; list-style: none; }
#agent summary::-webkit-details-marker { display: none; }
#agent summary small { font-weight: 500; letter-spacing: 0; white-space: nowrap; }
#agent details[open] summary { margin-bottom: 12px; }
#agent details[open] summary small { visibility: hidden; }
#log li:first-child { border-top: 0; }
#log li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.tool { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* product lines: photo 64 · text block (name + price on one line, quantity, reason, stepper). */
.line { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--neutral-200); }
.line .body { min-width: 0; }
.line .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.line .top .price { white-space: nowrap; flex: none; padding-top: 1px; }
.line .body > .stepper.mini { margin-top: 8px; }
.line:first-child { border-top: 0; }
.line img, .noimg { width: 64px; height: 64px; object-fit: contain; background: var(--neutral-200); border-radius: var(--radius-md); }
.line .name { font-weight: 600; font-size: 16px; line-height: 22px; }
.line .qtyline { display: inline; color: var(--muted-foreground); }
.line .price { color: var(--foreground); font-weight: 700; }
.line .qtyline { display: block; }
.line .why { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.line .stepper.mini { border-width: 1.5px; }
.line .stepper.mini button { width: 32px; min-height: 34px; font-size: 18px; }
.line .stepper.mini .q { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; }
.line .stepper.mini button.remove { color: var(--muted-foreground); }
.price s { color: var(--muted-foreground); font-weight: 500; margin-right: 2px; }
.sale { display: inline-block; background: var(--primary); color: #fff; border-radius: 9999px; padding: 0 8px; font-size: 12px; line-height: 20px; font-weight: 700; vertical-align: middle; }
.why { color: var(--muted-foreground); display: block; }

/* catalogue hits (alternatives, manual finds): photo 48 · name over price · round + */
/* Everything hangs from one top line: photo top = name top = button top; the price ends where the photo ends (20 + 4 + 20 = 44, +2 top = 46 ≈ 48). */
.hit { display: grid; grid-template-columns: 48px 1fr 40px; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--neutral-200); }
.alt small + .hit, #found .hit:first-child { border-top: 0; }
.hit img, .hit .noimg { width: 48px; height: 48px; object-fit: contain; background: var(--surface); border-radius: var(--radius-sm); }
.hit > div { padding-top: 2px; min-height: 48px; }
.hit .name { display: block; font-weight: 600; font-size: 15px; line-height: 20px; }
.hit .price { display: block; margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 700; }
.hit .add { width: 40px; min-height: 40px; margin-top: 4px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; box-shadow: none; }
#found:not(:empty) { margin-top: 4px; }
.addrow { display: flex; gap: 8px; margin-top: 16px; }
.addrow input { flex: 1; min-width: 0; min-height: 44px; }
.addrow button { flex: none; }
.badge { display: inline-block; background: var(--secondary); color: var(--foreground); border-radius: 9999px; padding: 0 10px; font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; margin-left: 6px; }

/* proposal summary card */
.summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid var(--neutral-200); }
.summary small { display: block; }
.summary strong { font-size: 22px; line-height: 28px; letter-spacing: -0.6px; }
.summary .end { text-align: right; }
#sumNote { margin: 10px 0 0; }
#sumNote + #lines .line:first-child { border-top: 0; }

/* composer: one box for text, a pasted link, or a photo */
.composer { background: var(--surface); border: 2px solid var(--neutral-300); border-radius: 28px; padding: 8px; margin: 18px 0 0; transition: border-color 0.15s; }
.composer:focus-within { border-color: var(--primary); }
.composer-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: end; }
.composer textarea { min-height: 44px; max-height: 220px; border: 0; border-radius: 0; padding: 10px 4px; resize: none; background: transparent; line-height: 24px; overflow-y: hidden; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer textarea:focus { outline: none; }
.composer .plus, .composer .send { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.composer .plus { background: var(--neutral-200); border-color: var(--neutral-200); color: var(--foreground); }
.composer .plus:hover, .composer .plus[aria-expanded="true"] { background: var(--tertiary); border-color: var(--tertiary); }
.attach-menu { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 4px 2px; }
.attached { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; }
.attached img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); }
.attached .del { width: 36px; min-height: 36px; margin-left: auto; }
.hint { margin: 10px 4px 0; }
/* the camera button only makes sense on a phone or tablet */
@media (hover: hover) and (pointer: fine) { .camera-only { display: none; } }

/* "є вдома" toggle chip in the ingredient editor */
.toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin: 0; border: 2px solid var(--neutral-300); border-radius: 9999px; font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none; background: var(--surface); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.toggle:has(input:checked) { background: var(--tertiary); border-color: var(--tertiary); color: var(--foreground); }
.toggle:has(input:focus-visible) { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* primary + secondary action side by side */
.actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 18px; }
.actions .ghost { width: auto; padding-left: 22px; padding-right: 22px; }

/* connect card */
#silpo .silpo-logo { height: 32px; margin: 0 0 12px; }
.trust { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; margin: 0 0 16px; }
.trust svg { flex: none; margin-top: 2px; }

/* done card: same white card as the rest, one orange check */
#result .check { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
#result .big { margin: 4px 0 6px; }
#result .big strong { font-size: 30px; line-height: 36px; letter-spacing: -0.8px; }
#result #copyLink { margin-top: 10px; }
.notes { list-style: none; padding: 0; margin: 12px 0 18px; }
.notes li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--neutral-200); font-size: 15px; line-height: 21px; }
.notes li:first-child { border-top: 0; }
.notes svg { flex: none; margin-top: 2px; color: var(--primary); }
.notes:empty { display: none; }

/* sticky cart bar */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--background) 70%, transparent); }
.cartbar > div { max-width: 32rem; margin: 0 auto; display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: 9999px; padding: 6px 6px 6px 22px; box-shadow: var(--shadow-card); }
.cartbar strong { font-size: 18px; line-height: 22px; white-space: nowrap; }
.cartbar small { line-height: 16px; }
.cartbar button { flex: 1; min-height: 52px; box-shadow: none; }

[role="alert"], .warn { background: var(--error-soft); padding: 6px 16px; margin: 14px 0 0; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 28rem) {
  section { padding: 18px; border-radius: var(--radius-lg); }
  .row { grid-template-columns: 1fr; gap: 0; }
  /* ingredient: name on its own line, then quantity · unit · at home · remove */
  .row3 { grid-template-columns: 1fr 1fr auto 44px; gap: 6px; }
  .toggle { padding: 0 10px; font-size: 13px; }
  .actions { grid-template-columns: 1fr; }
  .actions .ghost { width: 100%; }
  .row3 .name { grid-column: 1 / -1; }
  .row3 .inline { font-size: 14px; }
}

/* folded step 1 on the review screen */
.sourcebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.sourcebar strong { font-weight: 600; display: block; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sourcebar .small { margin: 0; }


/* agent is thinking */
.thinking { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--neutral-200); color: var(--foreground); font-weight: 500; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }

/* step indicator, same on every page */
.steps { display: flex; gap: 6px; margin: 0 0 14px; padding: 0 2px; }
.steps span { flex: 1; text-align: center; cursor: pointer; user-select: none; font-size: 13px; line-height: 16px; font-weight: 600; padding: 8px 6px; border-radius: 9999px; background: var(--neutral-200); color: var(--muted-foreground); }
.steps span.active { background: var(--primary); color: #fff; }
.steps span.done { background: var(--tertiary); color: var(--foreground); }

/* tablet and up: one wider column, roomier cards */
@media (min-width: 700px) {
  main, .cartbar > div { max-width: 40rem; }
  main { padding: 20px 20px 120px; }
  section { padding: 32px; }
  header { padding: 12px 6px 20px; }
  .silpo-logo { height: 44px; }
  .brands { font-size: 19px; }
  h1 { font-size: 30px; line-height: 36px; }
}

.steps span[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.steps span:not([aria-disabled]):hover { filter: brightness(0.96); }

/* unmatched ingredients with alternatives */
.alt { padding: 12px 0; border-top: 1px solid var(--neutral-300); }
.alt:first-child { border-top: 0; }
.alt > div:first-child { font-size: 15px; line-height: 22px; }
.alt > small { display: block; margin: 6px 0 0; }
.altrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.chip { min-height: 36px; padding: 6px 12px; font-size: 14px; }
#unmatched { background: var(--neutral-200); }