/* Chef chat showcase layer (loaded last by chat-v2.php).
   Welcome screen: a parade of real dishes (plate art fading to a photo),
   dish photos on the starter cards, and "more ways in" buttons that open
   the real features (photo, voice, Portion/Swap/Fix, the planner).
   Conversation: a faint kitchen backdrop, softer message entrances, a
   livelier typing bubble and a composer that answers focus.
   Everything decorative is aria-hidden; all motion stops under
   prefers-reduced-motion. */

/* ---------------------------------------------------------- backdrop */
.chat-main { isolation: isolate; }
.chat-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%230f2327' stroke-opacity='.032' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='34' cy='34' r='16'/%3E%3Ccircle cx='34' cy='34' r='8'/%3E%3Cpath d='M112 18v28M106 18v10a6 6 0 0 0 12 0V18M112 46v14'/%3E%3Cpath d='M30 110c0-10 8-16 16-16s16 6 16 16H30zM28 110h36'/%3E%3Cpath d='M110 100c8 0 14 6 14 14 0 10-14 22-14 22s-14-12-14-22c0-8 6-14 14-14z'/%3E%3Cpath d='M110 96v-6'/%3E%3C/svg%3E");
  transition: opacity .6s ease;
}
.chat-bg-plate { position: absolute; border-radius: 50%; border: 1px solid rgba(15, 35, 39, .07); box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .55); }
.chat-bg-plate.p1 { width: 300px; height: 300px; top: -120px; right: -90px; background: var(--saffron-soft); }
.chat-bg-plate.p2 { width: 220px; height: 220px; bottom: 90px; left: -110px; background: var(--leaf-soft); }
.chat-bg-plate.p3 { width: 150px; height: 150px; top: 38%; right: -70px; background: var(--tomato-soft); }
/* once a conversation is running, the backdrop steps back */
.chat-main:has(.empty-state[hidden]) .chat-bg { opacity: .45; }
.chat-main .chat-messages, .chat-main .chat-workspace { background: transparent; }

/* ------------------------------------------------------- dish parade */
.chef-parade { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 0 0 10px; }
.chef-parade-plate {
  position: relative; display: block; flex: none; width: 54px; height: 54px; margin: 0 -6px; overflow: hidden;
  border: 3px solid #fff; border-radius: 50%; background: var(--saffron-soft); box-shadow: var(--lift);
}
.chef-parade-plate:nth-child(2), .chef-parade-plate:nth-child(4) { width: 64px; height: 64px; z-index: 1; }
.chef-parade-plate:nth-child(3) { width: 76px; height: 76px; z-index: 2; }
.chef-parade-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chef-parade-plate img.a { transform: scale(1.45); }
.chef-parade-plate img.b { opacity: 0; }

/* ------------------------------------------------ starter card photos */
.chat-main #suggestionGrid .sg-art { position: absolute; right: -14px; top: 50%; width: 122px; height: auto; translate: 0 -50%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--f); }
.chat-main #suggestionGrid .sg-art > img { display: block; width: 100%; height: auto; }
.chat-main #suggestionGrid .sg-art .dish-flip-tag { display: none; }
.chat-main #suggestionGrid .suggestion-chip:hover .sg-art.dish-flip,
.chat-main #suggestionGrid .suggestion-chip:focus-visible .sg-art.dish-flip { --hov: 1; }
@media (max-width: 600px) { .chat-main #suggestionGrid .sg-art { width: 112px; } }

/* ----------------------------------------------------- more ways in */
.chef-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 100%; margin: 0 0 18px; }
.chef-cap {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 13px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--text-primary); font: inherit; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out), background-color .15s;
}
.chef-cap:hover { transform: translateY(-2px); background: var(--f-soft); box-shadow: var(--lift); }
.chef-cap:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.chef-cap[hidden] { display: none; }
.chef-cap-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--f-soft); color: var(--f-deep, var(--ink-deep)); }
.chef-cap-icon svg { width: 22px; height: 22px; }
.chef-cap strong { font: 700 .86rem/1.1 var(--font-body); white-space: nowrap; }
.chef-cap small { padding: 1px 7px; border-radius: 999px; background: var(--f-soft); color: var(--f-deep); font: 800 .68rem/1.5 var(--font-body); white-space: nowrap; }
.chef-cap svg * { transform-box: fill-box; transform-origin: center; }

/* -------------------------------------------------- typing + messages */
.msg-bubble-typing { display: inline-flex; align-items: center; gap: 5px; }
.msg-bubble-typing .typing-dot { width: 8px; height: 8px; border-radius: 50%; }
.msg-bubble-typing .typing-dot:nth-child(1) { background: var(--tomato); }
.msg-bubble-typing .typing-dot:nth-child(2) { background: var(--saffron); }
.msg-bubble-typing .typing-dot:nth-child(3) { background: var(--leaf); }
.msg-bubble-typing .typing-label { margin-left: 6px; background: linear-gradient(90deg, var(--text-secondary) 0 40%, var(--ink-deep) 50%, var(--text-secondary) 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------ composer */
.chat-main .composer-card { transition: box-shadow .25s var(--ease-out), border-color .2s; }
.chat-main .composer-card:focus-within { box-shadow: 0 0 0 3px var(--saffron), var(--lift-2); }
.chat-main .send-btn:not(:disabled) { background: var(--btn-tomato, #c93216); color: #fff; }

/* -------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .chat-bg { animation: chat-bg-drift 90s linear infinite; }
  .chat-bg-plate { animation: chat-bg-float 24s ease-in-out infinite alternate; }
  .chat-bg-plate.p2 { animation-duration: 30s; animation-delay: -8s; }
  .chat-bg-plate.p3 { animation-duration: 20s; animation-delay: -4s; }
  .chat-main:has(.empty-state[hidden]) .chat-bg, .chat-main:has(.empty-state[hidden]) .chat-bg-plate { animation-play-state: paused; }

  .chef-parade-plate img.b { animation: chef-photo 10s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s - 10s); }
  .chef-parade.is-idle *, .chef-parade.is-idle { animation-play-state: paused !important; }
  .chef-parade-plate { opacity: 0; animation: chef-in .6s var(--ease-spring) both, chef-bob 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms), calc(.7s + var(--i) * -1.1s); }

  .chef-cap { animation: chef-in .5s var(--ease-out) both; animation-delay: calc(.25s + var(--ci, 0) * 60ms); }
  .chef-cap:nth-of-type(2) { --ci: 1; } .chef-cap:nth-of-type(3) { --ci: 2; } .chef-cap:nth-of-type(4) { --ci: 3; } .chef-cap:nth-of-type(5) { --ci: 4; } .chef-cap:nth-of-type(6) { --ci: 5; }
  .cap-tick { stroke-dasharray: 8; animation: cap-tick 3.2s var(--ease-out) infinite both; }
  .cap-wave { animation: cap-wave 1.6s ease-in-out infinite; }
  .cap-wave2 { animation-delay: .4s; }
  .cap-copy { animation: cap-copy 3.6s var(--ease-spring) infinite both; }
  .cap-copy-r { animation-delay: .25s; }
  .cap-swap-a { animation: cap-swap-a 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .cap-swap-b { animation: cap-swap-b 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .cap-steam { animation: cap-steam 2.6s ease-in-out infinite both; }
  .cap-steam2 { animation-delay: 1.1s; }
  .cap-day { animation: cap-day 4s var(--ease-spring) infinite both; }
  .cap-day2 { animation-delay: .3s; } .cap-day3 { animation-delay: .6s; } .cap-day4 { animation-delay: .9s; }

  .chat-thread > .msg:not(.msg-typing) { animation: chat-msg-in .38s var(--ease-out) both; }
  .msg-bubble-typing .typing-dot { animation: chat-bead 1s ease-in-out infinite; }
  .msg-bubble-typing .typing-dot:nth-child(2) { animation-delay: .14s; }
  .msg-bubble-typing .typing-dot:nth-child(3) { animation-delay: .28s; }
  .msg-bubble-typing .typing-label { animation: chat-shimmer 2.2s linear infinite; }
}
@keyframes chat-bg-drift { to { background-position: 160px 160px; } }
@keyframes chat-bg-float { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-3%, 4%) rotate(6deg); } }
@keyframes chef-in { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes chef-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes chef-photo { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cap-tick { 0%, 15% { stroke-dashoffset: 8; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 8; } }
@keyframes cap-wave { 0%, 100% { opacity: .2; transform: scaleY(.5); } 50% { opacity: 1; transform: scaleY(1.2); } }
@keyframes cap-copy { 0%, 15% { opacity: 0; transform: scale(.4); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.4); } }
@keyframes cap-swap-a { 0%, 20% { transform: none; } 45%, 70% { transform: translateX(14px); } 95%, 100% { transform: none; } }
@keyframes cap-swap-b { 0%, 20% { transform: none; } 45%, 70% { transform: translateX(-14px); } 95%, 100% { transform: none; } }
@keyframes cap-steam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes cap-day { 0%, 10% { transform: scale(0); } 22%, 85% { transform: none; } 100% { transform: scale(0); } }
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chat-bead { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes chat-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .chef-cap, .chat-main .composer-card { transition: none; }
  .msg-bubble-typing .typing-label { color: var(--text-secondary); background: none; }
}