/* Chef chat replay: CSS only. 10 s loop = about 6 s of sequence, then a 4 s hold.
   Always on the night panel; bubbles are paper in both themes (fixed colours on purpose). */
.chef-replay {
  --cr-paper: #fcfaf6;
  --cr-ink: #18191a;
  --cr-muted: #5c6163;
  --cr-border: #dcdcd7;
  --cr-graphite: #1b1d1e;
  --cr-soon-wash: #f5e8d0;
  --cr-soon: #8f5300;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 12px;
  background: #121618;
  border-radius: var(--radius-lg, 20px);
  font-family: 'Gabarito', system-ui, sans-serif;
  font-weight: 400;
  color: var(--cr-ink);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .chef-replay { background: #0c0f11; }
}
:root[data-theme="dark"] .chef-replay { background: #0c0f11; }
:root[data-theme="light"] .chef-replay { background: #121618; }

.chef-replay *, .chef-replay *::before, .chef-replay *::after { box-sizing: border-box; }
.chef-replay p { margin: 0; }

.chef-replay__chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cr-loop 10s linear infinite;
}
.chef-replay__row { display: flex; align-items: flex-start; gap: 8px; }
.chef-replay__row--user { justify-content: flex-end; }

.chef-replay__bubble {
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--cr-paper);
  color: var(--cr-ink);
}
.chef-replay__bubble--user {
  background: var(--cr-graphite);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-right-radius: 6px;
  max-width: 85%;
}
.chef-replay__user { animation: cr-user 10s ease-out infinite both; }

/* Avatar: three faces stacked, cross-faded */
.chef-replay__avatar {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cr-paper);
  overflow: hidden;
}
.chef-replay__face { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.chef-replay__face--neutral { animation: cr-neutral 10s linear infinite both; }
.chef-replay__face--thinking { animation: cr-thinking 10s linear infinite both; }
.chef-replay__face--happy { animation: cr-happy 10s linear infinite both; }

/* Typing bubble and reply share one cell */
.chef-replay__stack { display: grid; flex: 1 1 auto; min-width: 0; max-width: 88%; }
.chef-replay__stack > * { grid-area: 1 / 1; align-self: start; }
.chef-replay__bubble.chef-replay__typing,
.chef-replay__bubble.chef-replay__reply { border-top-left-radius: 6px; }
.chef-replay__typing {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-self: start;
  height: 40px;
  padding: 0 16px;
  opacity: 0;
  animation: cr-typing 10s linear infinite both;
}
.chef-replay__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cr-muted);
  animation: cr-dot 0.9s ease-in-out infinite;
}
.chef-replay__typing i:nth-child(2) { animation-delay: 0.15s; }
.chef-replay__typing i:nth-child(3) { animation-delay: 0.3s; }
.chef-replay__reply { opacity: 0; animation: cr-reply 10s ease-out infinite both; }

/* Recipe cards, indented to line up with the bubble */
.chef-replay__cards { display: flex; flex-direction: column; gap: 8px; margin-left: 44px; }
.chef-replay__card {
  background: var(--cr-paper);
  color: var(--cr-ink);
  border-radius: 16px;
  padding: 12px 14px;
  opacity: 0;
}
.chef-replay__card--one { animation: cr-card1 10s ease-out infinite both; }
.chef-replay__card--two { animation: cr-card2 10s ease-out infinite both; }
.chef-replay__title { font-weight: 700; font-size: 16px; line-height: 1.25; }
.chef-replay__meta { margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--cr-muted); }
.chef-replay__tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cr-soon-wash);
  color: var(--cr-soon);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

@media (min-width: 420px) {
  .chef-replay { padding: 20px 16px; }
  .chef-replay__bubble { font-size: 16px; }
  .chef-replay__title { font-size: 17px; }
  .chef-replay__cards { margin-left: 44px; }
}

/* Timeline (10 s): user 0.3 s, typing 1.0 to 2.6 s, reply 2.6 s, card 1 3.6 s,
   card 2 4.4 s, happy 5.2 s, hold until 9.5 s, fade out and loop. */
@keyframes cr-loop { 0% { opacity: 0; } 1% { opacity: 1; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cr-user {
  0%, 3% { opacity: 0; transform: translateY(10px); }
  7%, 100% { opacity: 1; transform: none; }
}
@keyframes cr-neutral { 0% { opacity: 1; } 9%, 26% { opacity: 0; } 27%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes cr-thinking { 0%, 9% { opacity: 0; } 11%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes cr-happy { 0%, 52% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes cr-typing { 0%, 9% { opacity: 0; } 11%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes cr-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cr-reply {
  0%, 26% { opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: left top; }
  31%, 100% { opacity: 1; transform: none; }
}
@keyframes cr-card1 {
  0%, 36% { opacity: 0; transform: translateX(-16px); }
  42%, 100% { opacity: 1; transform: none; }
}
@keyframes cr-card2 {
  0%, 44% { opacity: 0; transform: translateX(-16px); }
  50%, 100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chef-replay__chat, .chef-replay__user, .chef-replay__reply, .chef-replay__card,
  .chef-replay__face, .chef-replay__typing, .chef-replay__typing i { animation: none; }
  .chef-replay__chat, .chef-replay__user, .chef-replay__reply, .chef-replay__card { opacity: 1; transform: none; }
  .chef-replay__face--happy { opacity: 1; }
  .chef-replay__typing { display: none; }
}