/* ── Native kit theming ────────────────────────────────────────────
   The usernode-native kit routes every colour and radius through --un-*
   custom properties. Re-theme it here (warm-paper palette, paprika accent)
   — NEVER by out-specificity-ing kit selectors or copying its stylesheet.
   Physics, thresholds and gesture geometry are deliberately not themeable. */
:root {
  --un-accent: #b85a24;
  --un-accent-contrast: #ffffff;
  --un-surface: #FAF6EE;
  --un-group-bg: #FFFFFF;
  --un-sheet-bg: #FAF6EE;
  --un-navbar-bg: #FAF6EE;
  /* Popovers have no backdrop behind them — keep this fully opaque. */
  --un-popover-bg: #FFFFFF;
  --un-hairline: #E7DFCC;
  --un-muted: #5A6378;
  --un-switch-track-off: #D8CDB0;
  --un-switch-thumb: #FFFFFF;
  --un-action-danger: #C9563B;
  --un-action-neutral: #E7DFCC;
  --un-action-text: #1F2B47;
  --un-toast-bg: #1F2B47;
  --un-toast-text: #F3EDDF;
  --un-toast-action: #F0B48A;
  --un-radius: 0.5rem;
  --un-radius-card: 0.375rem;
}

.dark {
  --un-accent: #E07A3F;
  --un-accent-contrast: #141A2B;
  --un-surface: #141A2B;
  --un-group-bg: #1F2B47;
  --un-sheet-bg: #1F2B47;
  --un-navbar-bg: #141A2B;
  --un-popover-bg: #1F2B47;
  --un-hairline: #333B54;
  --un-muted: #8B90A2;
  --un-switch-track-off: #454D66;
  --un-switch-thumb: #FFFFFF;
  --un-action-neutral: #333B54;
  --un-action-text: #F3EDDF;
  --un-toast-bg: #F3EDDF;
  --un-toast-text: #1F2B47;
  --un-toast-action: #96461A;
}

/* Kit-presented dialog content is app-owned markup with no surface of its
   own — the sheet/modal supplies the background. These only bound its
   width inside the kit's card. */
[data-un-dialog] {
  max-width: 28rem;
  margin-inline: auto;
}

#shortcuts-modal[data-un-dialog],
#sign-in-modal[data-un-dialog] {
  max-width: 24rem;
}

/* ── Fallback chrome ───────────────────────────────────────────────
   Only ever used when native.js failed to load (offline dev, blocked CDN).
   Same semantics as the kit — a dialog must never be lost because a
   third-party script didn't arrive. */
.rb-fallback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 26, 43, 0.5);
  padding: 1rem;
}

.rb-fallback-backdrop.rb-fallback-sheet {
  align-items: flex-end;
  padding: 0;
}

.rb-fallback-card {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0.75rem;
  background: var(--un-sheet-bg);
  border: 1px solid var(--un-hairline);
  box-shadow: 0 12px 40px rgba(20, 26, 43, 0.25);
}

.rb-fallback-sheet .rb-fallback-card {
  max-width: none;
  border-radius: 0.75rem 0.75rem 0 0;
}

.rb-fallback-popover {
  position: fixed;
  z-index: 95;
  border-radius: 0.5rem;
  background: var(--un-popover-bg);
  border: 1px solid var(--un-hairline);
  box-shadow: 0 8px 24px rgba(20, 26, 43, 0.2);
}

.rb-fallback-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.625rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  background: var(--un-toast-bg);
  color: var(--un-toast-text);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.rb-fallback-toast.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Editorial type: Fraunces for display, Inter for body ─────────── */
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

h1, h2, h3, .font-display {
  font-family: Fraunces, Georgia, serif;
  letter-spacing: -0.01em;
}

/* Brass kicker — the small uppercase label above editorial cards. */
.kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A227;
}

/* Chat panel states */
@media (min-width: 1024px) {
  #chat-panel.chat-open {
    width: 420px;
  }
  /* No width transition: the chat panel is a high-frequency toggle, and
     animating it reads as lag rather than polish (platform fidelity rule). */
  #chat-panel.chat-closed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border: none;
  }
}

@media (min-width: 1280px) {
  #chat-panel.chat-open {
    width: 480px;
  }
}

/* Panel resize divider */
#panel-divider:active {
  width: 6px;
}

/* Mobile panel visibility */
@media (max-width: 1023px) {
  #recipe-panel.panel-hidden,
  #chat-panel.panel-hidden {
    display: none;
  }
}

/* Auto-resize textarea */
#chat-input {
  max-height: 120px;
  overflow-y: auto;
}

/* Preference button states — !important needed to override Tailwind utilities */
.pref-btn.active {
  border-color: #E07A3F !important;
  background: rgba(224, 122, 63, 0.1) !important;
  color: #b85a24 !important;
}

/* Chat message styles */
.msg-user {
  background: #F7E3D0;
  color: #1F2B47;
  border-radius: 1rem 1rem 0.25rem 1rem;
  max-width: 85%;
  margin-left: auto;
}

:is(.dark .msg-user) {
  background: rgba(224, 122, 63, 0.14);
  color: #F3EDDF;
  border: 1px solid rgba(224, 122, 63, 0.28);
}

.msg-assistant {
  background: #F3EDDF;
  color: #1F2B47;
  border-radius: 1rem 1rem 1rem 0.25rem;
  max-width: 85%;
}

:is(.dark .msg-assistant) {
  background: #28304B;
  color: #F3EDDF;
  border: 1px solid #333B54;
}


.status-toggle {
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.status-toggle:hover {
  color: #5A6378;
}

:is(.dark .status-toggle:hover) {
  color: #8B90A2;
}

.status-detail {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: #5A6378;
  background: #F3EDDF;
  border: 1px solid #E7DFCC;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

:is(.dark .status-detail) {
  color: #8B90A2;
  background: #1A2138;
  border-color: #333B54;
}

.status-link {
  color: #b85a24;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.status-link:hover {
  color: #96461A;
}

:is(.dark .status-link) {
  color: #E8935B;
}

:is(.dark .status-link:hover) {
  color: #F0B48A;
}

/* Thinking / loading indicator */
.thinking-indicator {
  color: #8B90A2;
  font-size: 0.875rem;
}

.thinking-indicator .dots {
  display: inline-block;
  animation: dotPulse 1.4s infinite;
}

@keyframes dotPulse {
  0%, 20% { opacity: 0.2; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0.2; }
}

/* Streaming spinner — three bouncing dots */
.streaming-spinner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.25rem;
}

.streaming-spinner .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9BC9C;
  animation: dotBounce 1.2s ease-in-out infinite;
}

.streaming-spinner .dot:nth-child(2) { animation-delay: 0.15s; }
.streaming-spinner .dot:nth-child(3) { animation-delay: 0.3s; }

:is(.dark .streaming-spinner .dot) {
  background: #454D66;
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #8B90A2;
  line-height: 1.5;
}

.status-line .status-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #C9BC9C;
}

.status-line .status-icon.spinning {
  animation: spin 1s linear infinite;
}

.status-line .status-icon.status-icon-error,
:is(.dark .status-line .status-icon.status-icon-error) {
  color: #ef4444;
}

.status-line.status-line-error,
:is(.dark .status-line.status-line-error) {
  color: #ef4444;
}

.status-line .status-icon.status-icon-warning,
:is(.dark .status-line .status-icon.status-icon-warning) {
  color: #d97706;
}

.status-line.status-line-warning,
:is(.dark .status-line.status-line-warning) {
  color: #d97706;
}

/* Elapsed-time counter on the active step line — appears after ~15s so a long
   wait reads as progress rather than a hung app. */
.status-elapsed {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.status-still-working {
  font-style: italic;
}

/* "Try again" on a failed reply. Re-runs the existing message server-side, so
   the user never has to retype after a timeout. */
.chat-retry-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0.25rem 1rem 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid #E07A3F;
  background: rgba(224, 122, 63, 0.1);
  color: #b85a24;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chat-retry-btn:hover:not(:disabled) {
  background: rgba(224, 122, 63, 0.2);
}

.chat-retry-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

:is(.dark .chat-retry-btn) {
  color: #E8935B;
}

:is(.dark .status-line) {
  color: #7A82A0;
}

:is(.dark .status-line .status-icon) {
  color: #5A6378;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Send button streaming state */
#send-btn.btn-streaming {
  background: #C9BC9C;
  cursor: not-allowed;
}

#send-btn.btn-streaming:hover {
  background: #C9BC9C;
}

:is(.dark #send-btn.btn-streaming) {
  background: #454D66;
}

:is(.dark #send-btn.btn-streaming:hover) {
  background: #454D66;
}

#send-btn .send-spinner {
  animation: spin 0.8s linear infinite;
}

/* Step highlight on click */
.step-card {
  transition: background-color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}

.step-card.step-active {
  background: #EDF2DC !important;
  border-color: #C6D39A;
}

:is(.dark .step-card.step-active) {
  background: rgba(148, 173, 82, 0.16) !important;
  border-color: rgba(148, 173, 82, 0.35);
}

/* Macro pills */
.macro-pill {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

/* Ingredient grid — name + amount aligned in two columns, compact */
.ing-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  align-items: baseline;
}

/* Ingredient summary grid — aligns all amounts across all steps */
.summary-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  justify-content: start;
  column-gap: 1.25rem;
  row-gap: 0;
  align-items: center;
}

.ing-macro {
  visibility: hidden;
  margin-left: -0.75rem;
}

.ing-macro:first-of-type {
  margin-left: 0.5rem;
}

.summary-grid.show-macros .ing-macro {
  visibility: visible;
}

/* The "Macros per serving" toggle lives on the <summary> line; only show
   it while the ingredient summary is expanded. */
details:not([open]) .ing-macros-summary-toggle {
  display: none;
}

/* Flex on <summary> drops the native disclosure marker — this chevron
   replaces it. */
.summary-chevron {
  transition: transform 0.15s;
}

details[open] .summary-chevron {
  transform: rotate(90deg);
}

.ing-actions {
  column-gap: 0;
  margin-left: -0.5rem;
}

.summary-grid-header {
  grid-column: 1 / -1;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}

.summary-grid-row {
  display: contents;
}

/* Checked state for summary grid rows */
.summary-grid-row:has(.ingredient-check:checked) .ing-name {
  text-decoration: line-through;
  opacity: 0.5;
}

.summary-grid-row:has(.ingredient-check:checked) .ing-amt,
.summary-grid-row:has(.ingredient-check:checked) .ing-macro {
  opacity: 0.5;
}

/* Ingredient checkboxes */
.ingredient-check {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #B9AE8F;
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s;
}

.ingredient-check:checked {
  background: #b85a24;
  border-color: #b85a24;
}

.ingredient-check:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

:is(.dark .ingredient-check) {
  border-color: #454D66;
  background: #1F2B47;
}

:is(.dark .ingredient-check:checked) {
  background: #E07A3F;
  border-color: #E07A3F;
}

.ingredient-check:focus-visible {
  outline: 2px solid #E07A3F;
  outline-offset: 2px;
}

.ingredient-label:has(.ingredient-check:checked) .ing-name {
  text-decoration: line-through;
  opacity: 0.5;
}

.ingredient-label:has(.ingredient-check:checked) .ing-amt,
.ingredient-label:has(.ingredient-check:checked) .ing-vol {
  opacity: 0.5;
}

/* Recipe diff styles */
.diff-removed {
  text-decoration: line-through;
  color: #B0422A;
  background: rgba(176, 66, 42, 0.09);
  padding: 0 2px;
  border-radius: 2px;
}

:is(.dark .diff-removed) {
  color: #E8795B;
  background: rgba(232, 121, 91, 0.12);
}

.diff-added {
  color: #5F7A34;
  background: rgba(95, 122, 52, 0.1);
  padding: 0 2px;
  border-radius: 2px;
}

:is(.dark .diff-added) {
  color: #A3BE60;
  background: rgba(163, 190, 96, 0.12);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #D8CDB0;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #C4B790;
}

:is(.dark) ::-webkit-scrollbar-thumb {
  background: #333B54;
}

:is(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #454D66;
}

/* Subtle background glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(201, 162, 39, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 20%, rgba(224, 122, 63, 0.04) 0%, transparent 60%);
}

:is(.dark) body::before {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(201, 162, 39, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 20%, rgba(224, 122, 63, 0.03) 0%, transparent 60%);
}