/* Voice assistant widget (js/assistant.js). Scoped to .assistant-* so it fits on every page.
   Colours come from base.css; the fallbacks keep it usable on a page that forgets to load it.
   Assistant surfaces use the UI font (Inter), page content the display font (see DESIGN.md). */
.assistant-bubble,
.assistant-panel {
  --assistant-ink: var(--ink, #425664);
  --assistant-muted: var(--muted, #66767f);
  --assistant-teal: var(--teal-strong, #0f7d77);
  --assistant-teal-dark: var(--teal-hover, #0b6a65);
  --assistant-border: var(--border, #d8dce1);
  --assistant-error: var(--error, #b3261e);
  font-family: var(--font-ui, Inter, Arial, sans-serif);
  color: var(--assistant-ink);
  box-sizing: border-box;
}

.assistant-panel *,
.assistant-panel *::before,
.assistant-panel *::after { box-sizing: border-box; }

.assistant-bubble {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--assistant-teal);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  cursor: pointer;
  /* Kept out of the page cross-fade (base.css) so it never disappears behind the content. */
  view-transition-name: assistant-bubble;
}
.assistant-bubble {
  transition: background-color var(--duration-fast, 160ms), transform var(--duration-fast, 160ms) var(--ease-out, ease-out), box-shadow var(--duration-fast, 160ms);
}
.assistant-bubble:hover { background: var(--assistant-teal-dark); transform: scale(1.06); box-shadow: 0 8px 22px rgb(15 125 119 / 32%); }
.assistant-bubble:active { transform: scale(0.95); }
.guide-active .assistant-bubble { view-transition-name: none; }

.assistant-panel {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  max-height: min(580px, calc(100dvh - 120px - env(safe-area-inset-bottom)));
  border: 1px solid var(--assistant-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-float, 0 8px 24px rgb(0 0 0 / 18%));
  overflow: hidden;
}
.assistant-panel[hidden] { display: none; }

.assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--assistant-border);
}
.assistant-header h2 { margin: 0; font: 600 16px/1.3 Inter, Arial, sans-serif; color: var(--assistant-ink); }
.assistant-sound {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--assistant-ink);
  cursor: pointer;
}
.assistant-sound[hidden] { display: none; }
.assistant-sound:hover { background: var(--neutral-soft, #f1f4f5); }
.assistant-sound[aria-pressed="true"] { color: var(--subtle, #9aa6af); }
.assistant-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--assistant-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.assistant-close:hover { background: var(--neutral-soft, #f1f4f5); }

.assistant-log {
  flex: 1;
  min-height: 120px;
  padding: 12px 16px;
  overflow-y: auto;
}

.assistant-message {
  max-width: 85%;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-message.assistant { background: var(--neutral-soft, #f1f4f5); }
.assistant-message.user { margin-left: auto; color: #fff; background: var(--assistant-teal); }
.assistant-message.error { color: var(--assistant-error); background: var(--error-soft, #fdecea); }

.assistant-card {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--assistant-border);
  border-radius: 12px;
  background: var(--surface-muted, #fbfcfc);
  font-size: 14px;
}
.assistant-card-title { margin: 0 0 8px; font-weight: 600; }

.assistant-entries { width: 100%; border-collapse: collapse; }
.assistant-entries th { padding: 0 4px 6px; font-size: 12px; font-weight: 500; text-align: left; color: var(--assistant-muted); }
.assistant-entries td { padding: 4px; vertical-align: top; border-top: 1px solid var(--divider, #e6e8eb); }
.assistant-closures { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.assistant-closures li { padding: 6px 4px; border-top: 1px solid var(--divider, #e6e8eb); }
.assistant-entries input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--assistant-border);
  border-radius: 6px;
  font: 14px Inter, Arial, sans-serif;
  color: var(--assistant-ink);
  background: #fff;
}
.assistant-entries td:first-child { width: 128px; }
.assistant-entries td:nth-child(3) { width: 72px; }
.assistant-entries td:last-child { width: 28px; }
.assistant-prices td { vertical-align: middle; }
.assistant-prices td:first-child { width: 64px; }
.assistant-prices td:nth-child(2) { width: auto; color: var(--assistant-muted); }
.assistant-prices td:last-child { width: 96px; }
.assistant-dish { overflow-wrap: anywhere; }
.assistant-heard,
.assistant-previous { display: block; margin-top: 2px; font-size: 12px; color: var(--assistant-muted); }
/* "Sold out at" or "Left over" with its field, under the dish name. */
.assistant-outcome { display: grid; gap: 2px; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--assistant-muted); }
.assistant-outcome input { max-width: 120px; }
.assistant-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--warning, #7a4b00);
  background: var(--warning-soft, #fff1d6);
}
.assistant-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--assistant-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.assistant-remove:hover { background: var(--neutral-soft, #f1f4f5); }

.assistant-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.assistant-primary,
.assistant-secondary {
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 14px Inter, Arial, sans-serif;
  cursor: pointer;
}
.assistant-primary { border: 0; color: #fff; background: var(--assistant-teal); }
.assistant-primary:hover { background: var(--assistant-teal-dark); }
.assistant-secondary { border: 1px solid var(--assistant-border); color: var(--assistant-ink); background: #fff; }
.assistant-card-note { margin: 8px 0 0; font-size: 13px; color: var(--assistant-muted); }

.assistant-status { min-height: 18px; margin: 0; padding: 0 16px; font-size: 12px; color: var(--assistant-muted); }
/* Today's allowance (issue #65): quiet until it runs low. */
.assistant-usage { margin: 0; padding: 4px 16px 0; font-size: 12px; color: var(--assistant-muted); }
.assistant-usage.is-low { color: var(--assistant-error); }

.assistant-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--assistant-border);
}
.assistant-input textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 10px;
  border: 1px solid var(--assistant-border);
  border-radius: 10px;
  resize: vertical;
  font: 14px/1.4 Inter, Arial, sans-serif;
  color: var(--assistant-ink);
}
.assistant-mic,
.assistant-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.assistant-mic { color: var(--assistant-teal); background: var(--teal-soft, #d9efec); }
.assistant-mic.listening { color: #fff; background: var(--assistant-error); animation: assistant-pulse 1.2s ease-in-out infinite; }
.assistant-send { color: #fff; background: var(--assistant-teal); }
.assistant-panel button:disabled { opacity: 0.45; cursor: not-allowed; animation: none; }

@keyframes assistant-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(179 38 30 / 45%); }
  50% { box-shadow: 0 0 0 8px rgb(179 38 30 / 0%); }
}

.assistant-bubble:focus-visible,
.assistant-panel :is(button, input, textarea):focus-visible { outline: 2px solid var(--assistant-teal); outline-offset: 2px; }

@media (max-width: 600px) {
  .assistant-bubble { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .assistant-panel { right: calc(16px + env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Too narrow for four columns: each entry puts the dish on its own line, with the date, portions
     and remove button below it. The inputs keep their own labels ("Date for Chicken rice"). */
  .assistant-entries thead { display: none; }
  .assistant-entries tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px auto;
    grid-template-areas: "dish dish dish" "date portions remove";
    gap: 6px 8px;
    padding: 10px 0;
    border-top: 1px solid var(--divider, #e6e8eb);
  }
  .assistant-entries td,
  .assistant-entries td:first-child,
  .assistant-entries td:nth-child(3),
  .assistant-entries td:last-child { width: auto; padding: 0; border-top: 0; }
  .assistant-entries td:nth-child(1) { grid-area: date; }
  .assistant-entries td:nth-child(2) { grid-area: dish; font-weight: 600; }
  .assistant-entries td:nth-child(2) :is(.assistant-heard, .assistant-tag) { font-weight: 400; }
  .assistant-entries td:nth-child(3) { grid-area: portions; }
  .assistant-entries td:nth-child(4) { grid-area: remove; }
}

/* Touch screens: 44px tap targets, and 16px text in fields so iOS doesn't zoom in (see base.css). */
@media (pointer: coarse) {
  .assistant-sound, .assistant-close, .assistant-remove { width: 44px; height: 44px; }
  .assistant-entries td:last-child { width: 44px; }
  .assistant-primary, .assistant-secondary { min-height: 44px; }
  .assistant-mic, .assistant-send { width: 44px; height: 44px; }
  .assistant-entries input { min-height: 44px; font-size: 16px; }
  .assistant-input textarea { min-height: 44px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-mic.listening { animation: none; }
}