/* Chat — enamel layer. Loaded after every other chat stylesheet. */
.fam-tomato    { --f: var(--tomato);    --f-soft: var(--tomato-soft);    --f-deep: var(--tomato-deep); }
.fam-saffron   { --f: var(--saffron);   --f-soft: var(--saffron-soft);   --f-deep: var(--saffron-deep); }
.fam-leaf      { --f: var(--leaf);      --f-soft: var(--leaf-soft);      --f-deep: var(--leaf-deep); }
.fam-rose      { --f: var(--rose);      --f-soft: var(--rose-soft);      --f-deep: var(--rose-deep); }
:root { --edge: var(--ink-deep); --btn-tomato: #c93216; --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* chrome */
body.app-shell > header { border-bottom: 1px solid var(--line); background: var(--bg-primary); }
body.app-shell .logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-stretch: 90%; }
.chat-route-link { border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; color: var(--text-primary) !important; font-weight: 700 !important; box-shadow: var(--lift); }
.chat-route-link:hover { background: var(--saffron-soft) !important; }
.chat-main, .chat-main .chat-composer-dock { background: var(--bg-primary); }
.guest-banner { background: var(--saffron-soft); border-bottom: 1px solid var(--line); color: var(--ink-deep); }
.guest-banner a { color: var(--ink-deep); font-weight: 800; }

/* sidebar */
.chat-sidebar { background: var(--teal-soft); border-right: 1px solid var(--line); }
.chat-nav-btn { font-weight: 700; border-radius: 12px; }
.chat-sidebar .chat-nav-btn#newChatBtn { background: var(--btn-tomato); color: #fff; border: 1px solid var(--line); box-shadow: var(--lift); transition: transform .18s var(--ease-spring), box-shadow .18s; }
.chat-sidebar .chat-nav-btn#newChatBtn:hover { transform: translate(-1px,-1px); box-shadow: var(--lift-2); background: #b22a10; color: #fff; }
.chat-sidebar-label { font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text-primary); }

/* welcome */
.chat-welcome-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 14px; color: var(--text-secondary); font: 700 .88rem var(--font-body); letter-spacing: 0; }
.chat-welcome-kicker::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tomato); box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--tomato); }
.chat-main .empty-state-lead { font-weight: 800; font-stretch: 94%; letter-spacing: -.03em; color: var(--text-primary); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.02; margin-bottom: 10px; }
.chat-main .empty-state-sub { color: var(--text-secondary); font-size: .95rem; margin-bottom: 18px; }
.chat-main .empty-state { max-width: 720px; }
.chat-main #suggestionGrid { gap: 14px; }
.chat-main #suggestionGrid .suggestion-chip {
  position: relative; overflow: hidden; min-height: 92px; padding: 14px 118px 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--f-soft);
  box-shadow: var(--lift); transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.chat-main #suggestionGrid .suggestion-chip:hover { background: var(--f-soft); border-color: var(--edge); transform: translateY(-2px); box-shadow: var(--lift-2); }
.chat-main #suggestionGrid .suggestion-chip strong { color: var(--ink-deep); font: 760 1.12rem/1.1 var(--font-display); letter-spacing: -.02em; }
.chat-main #suggestionGrid .suggestion-chip span { color: var(--text-secondary); font-size: .85rem; font-weight: 500; }
.sg-art { position: absolute; right: -14px; top: 50%; width: 122px; height: auto; translate: 0 -50%;  border: 1px solid var(--line); border-radius: 14px; background: var(--f); transition: rotate .3s var(--ease-spring); }
.suggestion-chip:hover .sg-art {  }
@media (max-width: 600px) { .chat-main #suggestionGrid { grid-template-columns: 1fr; } .chat-main #suggestionGrid .suggestion-chip { min-height: 96px; padding-right: 120px; } .sg-art { width: 112px; } }

/* composer */
.chat-main .composer-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift-2); background: #fff; }
.chat-main .composer-card:focus-within { border-color: var(--edge); box-shadow: var(--lift-2); }
.mode-seg-btn { border: 1px solid var(--line) !important; font-weight: 700; }
.mode-seg-btn--active, .mode-seg-btn[aria-checked="true"] { background: var(--ink-deep) !important; color: #fff !important; border-color: var(--edge) !important; }
.send-btn:not(:disabled) { background: var(--btn-tomato); border: 1px solid var(--line); color: #fff; box-shadow: var(--lift); }
.send-btn:hover:not(:disabled) { background: #b22a10; }
.composer-icon-btn { border: 1px solid var(--line); background: #fff; }
.composer-icon-btn:hover { background: var(--saffron-soft); }

/* messages */
.chat-main .msg-bubble-user { background: var(--ink-deep); color: #fff; border: 1px solid var(--line); border-radius: 14px 18px 4px 18px; }
.chat-main .msg-bubble-user a { color: var(--saffron); }
.chat-main .msg-bubble-assistant { background: #fff; border: 1px solid var(--line); border-radius: 14px 18px 18px 4px; box-shadow: var(--lift); }
.chat-main .msg-bubble-rich .msg-heading { font-weight: 760; letter-spacing: -.02em; color: var(--text-primary); }
.chat-main .msg-bubble-rich table th { background: var(--saffron-soft); }
.msg-avatar { border: 1px solid var(--line); background: var(--saffron); }
.typing-dot { background: var(--tomato); }
.msg-retry, .msg-copy { border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text-primary); font-weight: 700; }
.msg-retry:hover, .msg-copy:hover { background: var(--saffron-soft); }
.msg-upgrade { border: 1px solid var(--line); border-radius: 16px; background: var(--saffron-soft); }

/* recipe cards the chat renders (JS) */
.recipe-card, .rc-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift); }

.logo img { width: 46px !important; height: 46px !important; filter: brightness(0) opacity(.88); }
.logo { font-size: 1.28rem !important; }
:root { --line: rgba(15,35,39,.16); --lift: 0 1px 2px rgba(11,27,30,.06), 0 10px 26px -14px rgba(11,27,30,.28); --lift-2: 0 2px 4px rgba(11,27,30,.08), 0 18px 34px -16px rgba(11,27,30,.34); }

/* ---- chef avatar: mustache mark in a rotating enamel ring ---- */
.msg-avatar {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; margin-top: 0;
  border: 0; border-radius: 50%; background: none; isolation: isolate;
}
.msg-avatar::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--tomato), var(--saffron), var(--leaf), var(--blueberry), var(--rose), var(--tomato));
  animation: chefRing 9s linear infinite;
}
.msg-avatar::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 3px rgba(11,27,30,.12); }
.msg-avatar img { width: 26px !important; height: auto !important; filter: brightness(0) opacity(.88); }
.msg-typing .msg-avatar::before { animation-duration: 1.1s; }
.msg-typing .msg-avatar img { animation: chefWiggle 1.1s ease-in-out infinite; }
@keyframes chefRing { to { transform: rotate(360deg); } }
@keyframes chefWiggle { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-6deg) scale(1.08); } 70% { transform: rotate(5deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .msg-avatar::before, .msg-typing .msg-avatar img { animation: none; } }

/* =====================================================================
   CHAT v2 — calm, editorial conversation surface
   ===================================================================== */
.chat-main { background: var(--bg-primary); }

/* slim guest banner */
.guest-banner { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .45rem 1rem; background: #fff; border-bottom: 1px solid var(--line); color: var(--text-secondary); font-size: .84rem; }
.guest-banner::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--saffron); flex: none; }
.guest-banner-text { margin: 0; }
.guest-banner a { color: var(--text-primary); font-weight: 700; text-decoration-color: var(--tomato); text-underline-offset: 3px; }

/* sidebar: porcelain, quiet */
.chat-sidebar { background: #fff; border-right: 1px solid var(--line); }
.chat-sidebar-nav { padding: 14px 14px 10px; gap: 6px; }
.chat-sidebar .chat-nav-btn { border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--text-primary); background: none; border: 0; box-shadow: none; text-align: left; padding: .6rem .8rem; }
.chat-sidebar .chat-nav-btn:hover { background: var(--bg-tertiary); }
.chat-sidebar .chat-nav-btn#newChatBtn { background: var(--ink-deep); color: #fff; text-align: center; font-weight: 700; box-shadow: none; border: 0; }
.chat-sidebar .chat-nav-btn#newChatBtn:hover { background: #17313a; transform: none; box-shadow: none; color: #fff; }
.chat-sidebar-label { margin: 0 0 .5rem; padding: 0 .8rem; font: 700 .78rem var(--font-body); color: var(--text-muted); letter-spacing: .02em; }
.chat-sidebar-list { padding: 8px 14px; }
.chat-sidebar-list p, .chat-sidebar-list .chat-guest-note { font-size: .86rem; color: var(--text-secondary); line-height: 1.55; padding: 0 .8rem; }
.chat-sidebar-list button { margin: .5rem .8rem 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; }
.chat-sidebar-footer { border-top: 1px solid var(--line); padding: 10px 14px 14px; }
.chat-sidebar .chat-nav-btn--danger { color: #b3261e; font-weight: 600; }
.chat-item.is-active .chat-item-open { background: var(--bg-tertiary); font-weight: 700; }

/* conversation column */
.chat-main .chat-thread { max-width: 780px; width: 100%; margin-inline: auto; padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 22px; }
.chat-main .chat-messages { padding-bottom: 8px; scroll-padding-bottom: 160px; }
.msg { display: flex; gap: 14px; align-items: flex-start; }
.msg-assistant .msg-bubble { flex: 1 1 auto; min-width: 0; }

/* assistant: a clean reading card */
.chat-main .msg-bubble-assistant {
  background: #fff; border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; box-shadow: var(--lift);
  padding: 1.05rem 1.3rem 1.1rem; max-width: 100%; font-size: 1rem; line-height: 1.7; color: var(--text-primary);
}
.chat-main .msg-bubble-rich > :first-child { margin-top: 0; }
.chat-main .msg-bubble-rich p { margin: .55rem 0; }
.chat-main .msg-bubble-rich ul, .chat-main .msg-bubble-rich ol { padding-left: 1.25rem; margin: .6rem 0; }
.chat-main .msg-bubble-rich li { margin: .3rem 0; padding-left: .15rem; }
.chat-main .msg-bubble-rich li::marker { color: var(--tomato); }
.chat-main .msg-bubble-rich strong { font-weight: 700; }
.chat-main .msg-bubble-rich .msg-heading { font: 750 1.2rem/1.2 var(--font-display); letter-spacing: -.02em; margin: 1.1rem 0 .4rem; }
/* the "local quick answer" footnote becomes a quiet label, not italic body copy */
.chat-main .msg-bubble-rich p > em:only-child { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .65rem; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf-deep); font: 600 .78rem/1.4 var(--font-body); font-style: normal; }
.chat-main .msg-bubble-rich p > em:only-child::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--leaf); }
.msg-copy, .msg-retry { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text-secondary); font: 600 .8rem var(--font-body); min-height: 34px; padding: .3rem .8rem; }
.msg-copy:hover, .msg-retry:hover { background: var(--bg-tertiary); color: var(--text-primary); }

/* user: compact ink bubble */
.chat-main .msg-bubble-user { background: var(--ink-deep); color: #fff; border: 0; border-radius: 18px 18px 4px 18px; padding: .7rem 1.05rem; max-width: min(78%, 520px); line-height: 1.55; box-shadow: none; text-align: left; font-size: 1rem; }
.msg-user { justify-content: flex-end; }

/* typing */
.chat-main .msg-bubble-typing { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .7rem 1rem; }
.typing-label { font-size: .84rem; color: var(--text-muted); margin-left: .4rem; }

/* composer: one calm card, focus ring on the card, not the textarea */
.chat-main .chat-composer-dock { background: linear-gradient(to bottom, rgba(246,248,247,0), var(--bg-primary) 34%); padding: 18px 20px 14px; }
.chat-main .chat-composer { max-width: 780px; margin-inline: auto; }
.chat-main .composer-card { background: #fff; border: 1px solid var(--line-strong, rgba(15,35,39,.28)); border-radius: 18px; box-shadow: var(--lift-2); padding: 12px 14px 10px; transition: border-color .15s, box-shadow .15s; }
.chat-main .composer-card:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent), var(--lift-2); }
.chat-main #chatInput, .chat-main #chatInput:focus, .chat-main #chatInput:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; padding: .5rem .25rem; min-height: 56px; font-size: 1rem; }
.chat-main #chatInput::placeholder { color: var(--text-muted); }
.mode-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-tertiary); border-radius: 12px; }
.mode-seg-btn { border: 0 !important; border-radius: 9px; background: transparent !important; color: var(--text-secondary) !important; font: 650 .86rem var(--font-body); min-height: 36px; padding: .3rem .8rem; transition: background-color .15s, color .15s; }
.mode-seg-btn:hover { color: var(--text-primary) !important; }
.mode-seg-btn--active, .mode-seg-btn[aria-checked="true"] { background: #fff !important; color: var(--text-primary) !important; box-shadow: 0 1px 2px rgba(11,27,30,.14); }
.mode-seg-btn--active svg, .mode-seg-btn[aria-checked="true"] svg { color: var(--tomato); }
.composer-hint { font-size: .78rem; color: var(--text-muted); }
.composer-icon-btn { width: 38px; height: 38px; border: 0; background: transparent; border-radius: 10px; color: var(--text-secondary); }
.composer-icon-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.send-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; box-shadow: none; }
.send-btn:not(:disabled) { background: var(--btn-tomato); color: #fff; box-shadow: 0 6px 14px -6px rgba(201,50,22,.6); }
.send-btn:disabled { background: var(--bg-tertiary); color: var(--text-muted); }

/* sources / recipe cards inside chat */
.chat-main .msg-sources { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .6rem; font-size: .84rem; }
.chat-main table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.chat-main th, .chat-main td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; }
.chat-main th { background: var(--bg-tertiary); font-weight: 700; }

@media (max-width: 720px) {
  .chat-main .chat-thread { padding: 18px 12px 28px; gap: 16px; }
  .msg { gap: 10px; }
  .msg-avatar { width: 34px; height: 34px; }
  .msg-avatar img { width: 21px !important; }
  .chat-main .msg-bubble-assistant { padding: .9rem 1rem; }
  .chat-main .chat-composer-dock { padding: 10px 10px 10px; }
}
.chat-main .mode-seg { width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; }

/* header on phones: language · Chats · Login/Dashboard · ⋯ (chat-route-more) */
.chat-route-link { white-space: nowrap; }
.chat-route-more { display: none; position: relative; }
.chat-route-more > summary { list-style: none; cursor: pointer; min-width: 44px; padding-inline: .6rem; font-size: 1.15rem; line-height: 1; }
.chat-route-more > summary::-webkit-details-marker { display: none; }
.chat-route-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; display: grid; padding: .35rem;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--lift-2);
}
.chat-route-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 .75rem; border-radius: 10px;
  color: var(--text-primary); font-weight: 700; text-decoration: none; }
.chat-route-menu a:hover, .chat-route-menu a:focus-visible { background: var(--saffron-soft); }
@media (max-width: 640px) {
  .chat-route-actions .chat-route-wide { display: none !important; }
  .chat-route-more { display: block; }
  body.route-user-chat .chat-route-actions { min-width: 0; }
  body.route-user-chat header .container { gap: .4rem; }
}

/* mode chips on phones: four equal columns that always fit, whatever the language */
@media (max-width: 520px) {
  .chat-main .mode-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .chat-main .mode-seg-btn { min-width: 0; padding: .3rem .25rem; gap: 4px; justify-content: center; font-size: .8rem; }
  .chat-main .mode-seg-hint { grid-column: 1 / -1; margin: 2px 0 0; }
  .chat-main .mode-seg-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
  .chat-main .mode-seg-btn svg { display: none; }
}
.chat-route-link { gap: .4rem; }
.chat-route-icon { flex: none; }
@media (min-width: 641px) { .chat-route-link .chat-route-icon { display: none; } }
@media (max-width: 640px) {
  /* icon buttons; the label stays for screen readers (and is translated like any text) */
  .chat-route-actions .chat-route-link { min-width: 44px; padding-inline: .55rem; }
  .chat-route-actions .chat-route-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}