/* Web counterpart of ios/GroceryAI/Core/DesignSystem/{BarasuPalette,AppTheme,
   AppSpacing,AppRadius,AppControlSize}.swift. Loaded after the legacy styles. */
:root {
  color-scheme: light dark;
  --background-primary: #ffffff;
  --background-secondary: #f9fafb;
  --cell-background: #f9fafb;
  --brand: #0066ff;
  --brand-soft: #0066ff1a;
  --brand-border: #b8d0ff;
  --ink: #0b2220;
  --muted: #0b2220a3;
  --line: #e5e7eb;
  --surface: #ffffff;
  --surface-raised: #f9fafb;
  --success: #22c55e;
  --warning: #facc15;
  --error: #b81f21;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
  --space-small: 8px;
  --space-extra-small: 4px;
  --space-medium: 12px;
  --space-large: 16px;
  --space-extra-large: 24px;
  --space-section: 32px;
  /* Existing components use these names. */
  --green: var(--brand);
  --light: var(--brand-soft);
}

body {
  background: var(--surface-raised);
  color: var(--ink);
}
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button {
  min-height: 44px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand-border);
  outline-offset: 2px;
}
a,
.weekly a,
.week-buy-line a {
  color: var(--brand);
}

main {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
header {
  background: var(--surface);
}
.eyebrow,
.small-label,
.week-basket-head .eyebrow {
  color: var(--brand);
}
.status {
  color: var(--muted);
}
.status i,
.honest i {
  background: var(--success);
}
.icon,
#settings {
  color: var(--ink);
  background: var(--surface-raised);
}
.icon:hover,
#settings:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.spark,
.sample {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-border);
}
.spark,
.bubble.assistant::before,
.voice-orb {
  background: #000 url('./brand-dark.svg') center / 29px auto no-repeat;
  color: transparent;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  font-size: 0;
}
.welcome .spark {
  margin: 0 auto 24px;
  width: 44px;
  height: 44px;
  background: #000 url('./brand-dark.svg') center / 29px auto no-repeat;
  color: transparent;
}
.bubble.assistant::before {
  content: '';
  top: 12px;
  left: 0;
  width: 28px;
  height: 28px;
  background-size: 20px auto;
}
.voice-orb { flex: 0 0 44px; }
.sample small {
  color: var(--muted);
}
.tiny-star {
  color: var(--brand);
}
.step span,
.demo-pill {
  color: var(--muted);
  border-color: var(--line);
}
.honest {
  color: var(--muted);
  border-color: var(--line);
}

.nav {
  color: var(--muted);
  border-radius: var(--radius-medium);
}
.nav.active,
.bottom-nav .nav.active {
  background: var(--brand-soft);
  color: var(--brand);
}
.bottom-nav {
  background: var(--surface);
  border-color: var(--line);
}
.bottom-nav .nav {
  min-height: 44px;
}
.bottom-nav svg {
  stroke: currentColor;
}

form,
#chat {
  border-color: var(--line);
  box-shadow: none;
}
form:focus-within,
#chat:focus-within {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px #0066ff14;
}
form input,
#chat input {
  color: var(--ink);
}
.plus {
  color: var(--brand);
  background: var(--brand-soft);
}
#chat #add {
  color: var(--brand);
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
#voice-open {
  color: var(--brand);
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.send,
.primary,
#voice-start,
.voice-controls #voice-start {
  background: var(--brand);
  color: #fff;
}
.primary,
.secondary,
.outline {
  min-height: 44px;
  border-radius: var(--radius-medium);
}
.secondary,
.outline {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--line);
}
.secondary:hover,
.outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.history-card .secondary {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line);
}
.history-card [data-remove-saved] {
  color: var(--error);
  border-color: #f1c7c8;
}
.quick button,
.weekly-query button,
.weekly-offer button,
.weekly-suggestions button {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-border);
}
.weekly-query input,
.weekly-fields input,
.weekly-preferences input,
.weekly-preferences select,
.field input,
.edit-row input,
.edit-row select {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-small);
}

.bubble {
  color: var(--ink);
  border-radius: var(--radius-large);
}
.bubble.user {
  background: var(--brand-soft);
}
.bubble.assistant {
  background: var(--surface);
  border: 1px solid var(--line);
}
.draft-card,
.history-card,
.weekly-row,
.savings-entry,
.savings-method,
.weekly-offer,
.week-plan-card,
.week-option,
.week-scenarios article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  box-shadow: none;
}
.product,
.weekly-item-emoji,
.weekly-photo-fallback,
.menu-row {
  background: var(--cell-background);
  border-color: var(--line);
  border-radius: var(--radius-medium);
}
.result,
.week-basket,
.weekly-preferences,
.savings-metrics > div {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-large);
}
.store,
.week-store-list,
.week-buy-line,
.savings-entry-numbers,
.savings-section-head,
.weekly-edit,
.weekly-preferences {
  border-color: var(--line);
}
.saving,
.savings-badge.confirmed {
  color: #157a38;
  background: #e8f9ed;
}
.notice,
.weekly-warning {
  color: #72560a;
  background: #fff9dc;
  border-color: #f6e5a2;
}
.loading,
.week-loading {
  color: var(--brand);
}
.empty,
.disclaimer,
.weekly-source-note,
.week-handoff-note {
  color: var(--muted);
}

.weekly-offer.chosen,
.week-option.recommended,
.week-plan-card.recommended {
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: none;
}
.week-option:hover {
  border-color: var(--brand);
}
.week-option-name small,
.week-option-price span,
.week-basket-head .eyebrow,
.weekly-edit > summary span,
.weekly-carousel-count {
  color: var(--brand);
}
.weekly-carousel-tabs button {
  background: var(--surface-raised);
  color: var(--muted);
  border-color: var(--line);
}
.weekly-carousel-tabs button[aria-selected="true"] {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-border);
}
.weekly-carousel-nav button,
.draft-carousel-nav button {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--line);
}
.week-basket-head p,
.week-plan-card > p,
.week-plan-card > small,
.week-option-name span,
.week-option-name em {
  color: var(--muted);
}
.week-store-list h4 span,
.week-buy-line a {
  color: var(--brand);
}

.savings-heading .eyebrow {
  color: var(--brand);
}
.savings-hero {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-large);
}
.savings-hero.negative {
  background: #fff4f4;
  border-color: #f1c7c8;
}
.savings-kicker,
.savings-estimate strong {
  color: var(--brand);
}
.savings-entry-top > strong,
.savings-paid strong {
  color: var(--ink);
}
.savings-entry.prepared,
.savings-empty {
  background: var(--surface-raised);
  border-color: var(--line);
}
.savings-badge {
  color: var(--muted);
  background: var(--surface-raised);
}
.savings-entry details summary,
.savings-method summary {
  color: var(--brand);
}
.savings-remove {
  color: var(--error);
}
.savings-restore {
  color: var(--brand);
}

#voice-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
}
#voice-status,
#voice-panel p {
  color: var(--muted);
}
.voice-orb {
  background: #000 url('./brand-dark.svg') center / 29px auto no-repeat;
  box-shadow: none;
}
#voice-panel[data-state="muted"] .voice-orb {
  background: var(--muted);
}
.voice-controls button {
  min-height: 44px;
  border-color: var(--line);
  color: var(--brand);
}
.voice-controls #voice-start {
  border-color: var(--brand);
}
.voice-controls #voice-stop {
  color: var(--error);
  border-color: #f1c7c8;
}
@keyframes voice-breathe {
  to {
    box-shadow: 0 0 0 9px var(--brand-soft);
    transform: scale(1.04);
  }
}

dialog {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-large);
}
dialog::backdrop {
  background: #0b222066;
}
.handle {
  background: var(--line);
}

@media (max-width: 680px) {
  body {
    background: var(--surface);
  }
  main {
    box-shadow: none;
  }
}

/* Match SwiftUI's semantic surfaces and floating controls in both appearances. */
.workspace { background: var(--background-secondary); }
.welcome p, .disclaimer, .search-hint { color: var(--muted); }
.draft-card, .history-card, .weekly-row, .savings-entry, .week-plan-card,
.week-option, .result, .savings-hero, #voice-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.draft-card, .history-card, .result, .savings-hero { border-radius: var(--radius-large); }
.draft-card { padding: var(--space-large); }
.product { padding: var(--space-medium); }
.product img, .weekly-offer img, .week-buy-line img {
  background: var(--cell-background);
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  object-fit: cover;
}
.bubble.user { background: var(--brand-soft); }
.bubble.assistant { background: var(--surface); border: 1px solid var(--line); }
.bottom-nav { background: var(--surface); }
.bottom-nav .nav.active { color: var(--brand); background: var(--brand-soft); }
#chat { min-height: 52px; background: var(--surface); }
#chat #add, #voice-open, .send { min-width: 44px; min-height: 44px; }
.send { background: var(--brand); color: #fff; }
.weekly-option.recommended, .week-plan-card.recommended,
.weekly-offer.chosen { border-color: var(--brand); background: var(--brand-soft); }
.weekly-suggestions button, .weekly-carousel-tabs button[aria-selected="true"] {
  color: var(--brand); border-color: var(--brand-border); background: var(--brand-soft);
}
.savings-hero:not(.negative) { background: var(--brand-soft); border-color: var(--brand-border); }
.week-basket { background: transparent; border: 0; }
.notice, .weekly-warning { background: #facc1524; border-color: #facc1570; color: #72560a; }

@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: #000;
    --background-secondary: #1c1c1e;
    --cell-background: #1c1c1e;
    --surface: #000;
    --surface-raised: #2c2c2e;
    --brand-soft: #0066ff2e;
    --brand-border: #0066ff80;
    --ink: #f5f5f7;
    --muted: #ebebf599;
    --line: #54545899;
    --error: #ff7a7a;
  }
  body, .workspace { background: var(--background-primary); color: var(--ink); }
  main, header, footer, dialog, .bottom-nav { background: var(--surface); color: var(--ink); }
  footer { background: linear-gradient(transparent, #000 18%); }
  .welcome .spark, .bubble.assistant::before, .voice-orb {
    background-color: #fff;
    background-image: url('./brand-light.svg');
  }
  .bubble.user { background: var(--brand-soft); }
  .bubble.assistant, .draft-card, .history-card, .weekly-row, .savings-entry,
  .week-plan-card, .week-option, .result, .savings-hero, #voice-panel,
  .weekly-preferences, .menu-row, .product, .week-store-list,
  .savings-metrics > div, .savings-method, .savings-empty {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }
  .product, .menu-row, .weekly-item-emoji, .weekly-photo-fallback,
  .savings-entry.prepared { background: var(--cell-background); }
  .primary, .send, #voice-start { background: var(--brand); color: #fff; }
  .secondary, .outline, .field input, .edit-row input, .edit-row select,
  .weekly-query input, .weekly-fields input, .weekly-preferences input,
  .weekly-preferences select { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
  #chat, #chat input, form input { background: var(--surface); color: var(--ink); }
  .week-option.recommended, .week-plan-card.recommended,
  .weekly-offer.chosen, .savings-hero:not(.negative) { background: var(--brand-soft); }
  .notice, .weekly-warning { background: #facc1524; color: #facc15; }
  .savings-hero.negative { background: #b81f2124; }
  dialog::backdrop { background: #000a; }
}
@media (max-width: 680px) {
  .workspace { min-height: 100dvh; margin: 0; }
  main { height: 100dvh; border: 0; border-radius: 0; }
  #agent-view, #history-view { padding-bottom: 24px; }
  #composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; }
}

/* Basket handoff: one clear choice, product links, then optional follow-up. */
.week-option[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* Composer: one calm focus state, with clear hover targets for each action. */
#chat {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
#chat:hover { border-color: var(--brand-border); }
#chat:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
#chat input:focus-visible { outline: none; }
#chat #add,
#chat #voice-open,
#chat .send {
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
#chat #add,
#chat #voice-open { background: var(--surface-raised); border-color: transparent; }
#chat #add:hover,
#chat #voice-open:hover {
  background: var(--brand-soft);
  color: var(--brand);
  transform: translateY(-1px);
}
#chat .send:hover {
  background: #0054d6;
  transform: translateY(-1px);
}
#chat #add:active,
#chat #voice-open:active,
#chat .send:active { transform: scale(.96); }
#chat button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Secondary comparison controls read as one compact set of disclosures. */
.week-notes,
.weekly-guidance,
.weekly-edit,
.weekly-preferences {
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: var(--surface);
  overflow: hidden;
}
.week-notes,
.weekly-guidance,
.weekly-preferences { margin: var(--space-small) 0; }
.weekly-edit { margin-top: var(--space-small); }
.week-notes > summary,
.weekly-guidance > summary,
.weekly-edit > summary,
.weekly-preferences > summary {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  list-style: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.week-notes > summary::-webkit-details-marker,
.weekly-guidance > summary::-webkit-details-marker,
.weekly-edit > summary::-webkit-details-marker,
.weekly-preferences > summary::-webkit-details-marker { display: none; }
.week-notes > summary:hover,
.weekly-guidance > summary:hover,
.weekly-edit > summary:hover,
.weekly-preferences > summary:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.week-notes > summary::after,
.weekly-guidance > summary::after,
.weekly-edit > summary::after,
.weekly-preferences > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.week-notes[open] > summary::after,
.weekly-guidance[open] > summary::after,
.weekly-edit[open] > summary::after,
.weekly-preferences[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.week-notes[open] > summary,
.weekly-guidance[open] > summary,
.weekly-edit[open] > summary,
.weekly-preferences[open] > summary { border-bottom: 1px solid var(--line); }
.week-notes > :not(summary),
.weekly-guidance > :not(summary),
.weekly-preferences > :not(summary) { margin-left: 14px; margin-right: 14px; }
.weekly-edit > summary span { margin-left: auto; color: var(--brand); }
.weekly-edit > summary::after { margin-left: 3px; }
.week-handoff-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-medium);
  margin: var(--space-extra-large) 0 var(--space-medium);
}
.week-handoff-head .eyebrow {
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.week-handoff-head h3 {
  margin: 4px 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}
.week-handoff-head p {
  margin: 0;
  max-width: 32ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.week-handoff-head > strong {
  flex: none;
  color: var(--brand);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.week-store-list {
  margin: 0 0 var(--space-medium);
  padding: var(--space-medium) var(--space-large);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
}
.week-store-list h4 {
  margin: 0;
  padding-bottom: var(--space-medium);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-medium);
  font-size: 14px;
}
.week-store-list h4 small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.week-buy-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-medium);
  padding: var(--space-medium) 0;
  border-top: 1px solid var(--line);
}
.week-buy-line:last-child { padding-bottom: 0; }
.week-buy-line img,
.week-buy-line > .weekly-photo-fallback {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-medium);
}
.week-buy-info { min-width: 0; flex: 1; }
.week-buy-info strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}
.week-buy-info small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.week-buy-info a {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}
.week-buy-info a:hover { text-decoration: underline; }
.week-buy-price {
  flex: none;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.week-handoff-actions {
  display: grid;
  gap: var(--space-small);
  margin-top: var(--space-large);
}
.week-handoff-actions button { margin: 0; }
.week-handoff-actions .secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
}
.week-handoff-note {
  margin: var(--space-medium) 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}