/* Chef mode: cook board, door card, resume bar, recipe chip, recipe box. */
[data-chef-only][hidden] { display: none !important; }

.cb { --cb-cream:#f7f3ec; --cb-white:#fdfaf5; --cb-sage:#7a9e7e; --cb-sage-dark:#5c7d60; --cb-sage-light:#e8f0e9; --cb-hero:#5b3a8c; --cb-hero-mid:#7c52b8; --cb-hero-light:#ede6f7; --cb-warm:#8b5e3c; --cb-warm-light:#f5ede6; --cb-clay:#c4785a; --cb-clay-light:#f5e8e2; --cb-gold:#c9a84c; --cb-gold-light:#fdf6e3; --cb-ink:#2c2c2c; --cb-soft:#5a5a5a; --cb-muted:#9a9a9a; --cb-border:#e2dbd1; --cb-shadow:rgba(44,44,44,.08);
  position: fixed; inset: 0; z-index: 300; background: var(--cb-cream); color: var(--cb-ink); font-family: 'DM Sans', sans-serif; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
html.cb-open, html.cb-open body { overflow: hidden; }
.cb button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cb-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 0; flex-shrink: 0; }
.cb-back { font-size: .88rem; color: var(--cb-warm) !important; padding: 8px 6px !important; }
.cb-more { font-size: 1.15rem; color: var(--cb-muted) !important; padding: 6px 10px !important; letter-spacing: 1px; }
.cb-menu { position: absolute; right: 12px; top: 42px; background: var(--cb-white); border: 1px solid var(--cb-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(44,44,44,.15); z-index: 5; }
.cb-menu[hidden] { display: none; }
.cb-menu button { display: block; padding: 13px 18px !important; font-size: .9rem; color: var(--cb-clay) !important; }
.cb-strip { margin: 4px 12px 6px; background: var(--cb-white); border: 1px solid var(--cb-border); border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 2px 8px var(--cb-shadow); flex-shrink: 0; transition: border-color .4s, box-shadow .4s; }
.cb-strip.fresh { border-color: var(--cb-gold); box-shadow: 0 0 0 3px rgba(201,168,76,.22); }
.cb-av { width: 30px; height: 30px; border-radius: 50%; background: var(--cb-warm-light); color: var(--cb-warm); font-family: 'Lora', serif; font-style: italic; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.cb-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--cb-sage); border: 2px solid var(--cb-white); }
.cb-line { font-size: .92rem; line-height: 1.42; }
.cb-meta { font-size: .68rem; color: var(--cb-muted); margin-top: 2px; }
.cb-dot { margin-left: 6px; }
.cb-undo { color: var(--cb-hero) !important; font-weight: 600; font-size: .7rem; margin-left: 6px; text-decoration: underline; padding: 0 !important; }
.cb-head { padding: 2px 16px 0; flex-shrink: 0; }
.cb-dish { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cb-name { font-family: 'Lora', serif; font-style: italic; color: var(--cb-warm); font-size: 1.1rem; }
.cb-prog { font-size: .72rem; color: var(--cb-muted); white-space: nowrap; }
.cb-was { font-size: .7rem; color: var(--cb-muted); }
.cb-was s { text-decoration-color: var(--cb-gold); }
.cb-rail { display: flex; gap: 4px; padding: 6px 16px 6px; flex-shrink: 0; }
.cb-seg { flex: 1; text-align: left; padding: 4px 0 !important; }
.cb-seg i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--cb-hero-mid) var(--p, 0%), #e6dfd3 var(--p, 0%)); }
.cb-seg.full i { background: var(--cb-sage); }
.cb-seg b { display: block; font-size: .6rem; color: var(--cb-muted); margin-top: 4px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cb-seg.part b { color: var(--cb-hero); }
.cb-timers { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; flex-shrink: 0; }
.cb-timers:empty { display: none; }
.cb-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.cb-sec { background: var(--cb-white); border: 1px solid var(--cb-border); border-radius: 14px; padding: 0 12px; scroll-margin-top: 8px; flex-shrink: 0; }
.cb-sec.done { background: var(--cb-sage-light); border-color: #cfdfd1; }
.cb-sec.dim { opacity: .62; }
.cb-sec-h { width: 100%; display: flex; align-items: center; gap: 4px; padding: 12px 0 !important; font-size: .72rem !important; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--cb-soft) !important; }
.cb-sec.done .cb-sec-h { color: var(--cb-sage-dark) !important; }
.cb-chev { width: 14px; color: var(--cb-muted); font-size: .72rem; }
.cb-count { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cb-items { padding-bottom: 6px; }
.cb-item { display: flex; align-items: center; gap: 6px; border-top: 1px solid #efe9df; }
.cb-hit { flex: 1; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 0 !important; min-height: 44px; }
.cb-box { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid #cfc6b8; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; }
.cb-txt { font-size: .92rem; line-height: 1.38; }
.cb-why { display: block; font-size: .78rem; color: var(--cb-warm); font-style: italic; margin-top: 3px; }
.cb-item.ok .cb-box { background: var(--cb-sage); border-color: var(--cb-sage); }
.cb-item.ok .cb-text { color: var(--cb-muted); text-decoration: line-through; text-decoration-color: #c9c1b4; }
.cb-item.miss .cb-box { background: var(--cb-clay); border-color: var(--cb-clay); }
.cb-item.miss .cb-text { color: var(--cb-clay); }
.cb-item.next { border: 2px solid var(--cb-hero); border-radius: 12px; background: var(--cb-hero-light); margin: 4px -6px; padding: 0 6px; }
.cb-item.next + .cb-item { border-top-color: transparent; }
.cb-item.next .cb-txt { font-size: 1.02rem; font-weight: 500; }
.cb-item.next .cb-box { border-color: var(--cb-hero); }
.cb-next { display: block; font-size: .6rem; font-weight: 700; color: var(--cb-hero); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.cb-item.chg { box-shadow: inset 3px 0 0 var(--cb-gold); padding-left: 8px; margin-left: -4px; }
.cb-item.next.chg { margin-left: -6px; }
.cb-tag { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a7a22; background: var(--cb-gold-light); border: 1px solid #ecdca3; border-radius: 8px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.cb-item.gone { padding: 10px 0; gap: 10px; align-items: flex-start; }
.cb-item.gone .cb-box { border-style: dashed; border-color: var(--cb-gold); color: var(--cb-gold); }
.cb-item.gone .cb-text { color: var(--cb-muted); text-decoration: line-through; text-decoration-color: var(--cb-gold); opacity: .8; }
.cb-out { font-size: .68rem !important; font-weight: 600; color: var(--cb-muted) !important; border: 1px solid var(--cb-border) !important; border-radius: 10px; padding: 7px 10px !important; white-space: nowrap; min-height: 34px; }
.cb-out.on { background: var(--cb-clay) !important; border-color: var(--cb-clay) !important; color: #fff !important; }
.cb-chip { display: inline-flex; align-items: center; font-size: .7rem; padding: 2px 8px; border-radius: 10px; background: var(--cb-clay-light); color: var(--cb-clay); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.cb-timer { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem !important; font-weight: 600; border-radius: 12px; padding: 7px 11px !important; color: #fff !important; background: var(--cb-clay) !important; font-variant-numeric: tabular-nums; }
.cb-timer.up { background: #b4402a !important; animation: cbPulse 1s ease-in-out infinite; }
@keyframes cbPulse { 50% { transform: scale(1.06); } }
.cb-finish { background: var(--cb-white); border: 2px solid var(--cb-hero); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.cb-finish-h { font-family: 'Lora', serif; font-size: 1.08rem; }
.cb-note { border: 1.5px solid var(--cb-border); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; background: var(--cb-cream); }
.cb-finish-b { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-btn { background: var(--cb-hero) !important; color: #fff !important; border-radius: 12px; padding: 11px 16px !important; font-weight: 600; font-size: .9rem; }
.cb-keyoffer { margin: 0; font-size: .86rem; color: var(--cb-soft); line-height: 1.5; }
.cb-btn.ghost { background: transparent !important; color: var(--cb-soft) !important; border: 1px solid var(--cb-border) !important; }
/* the lava lamp while Pila writes a new plan */
.cb-lamp { width: min(200px, 54vw); aspect-ratio: 1; margin: auto; border-radius: 50%; box-shadow: 0 10px 30px rgba(139,94,60,.28), inset 0 0 0 1px rgba(255,255,255,.08); flex-shrink: 0; }
.cb-lamp-svg { width: 100%; height: 100%; display: block; }
.cb-lamp-glass { fill: var(--cb-warm); }
/* Pila's avatar while she's thinking */
.cb-av.busy { gap: 2px; }
.cb-av.busy::after { display: none; }
.cb-av.busy i { width: 4px; height: 4px; border-radius: 50%; background: var(--cb-warm); animation: cbDot 1.1s infinite; }
.cb-av.busy i:nth-child(2) { animation-delay: .14s; }
.cb-av.busy i:nth-child(3) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .cb-av.busy i { animation: none; opacity: .7; } }
.cb-skel { height: 64px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(90deg, #efe9df 25%, #f7f3ec 50%, #efe9df 75%); background-size: 200% 100%; animation: cbShimmer 1.4s linear infinite; }
.cb-skel.short { height: 40px; width: 70%; }
@keyframes cbShimmer { to { background-position: -200% 0; } }
.cb-ask { flex-shrink: 0; margin: 6px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; background: var(--cb-white); border: 1.5px solid var(--cb-border); border-radius: 24px; padding: 5px 5px 5px 14px; position: relative; z-index: 3; }
.kb-open .cb-ask { margin-bottom: 8px; }   /* keyboard up: no pad for the home bar it covers (keyboard.js) */
html.kb-open.cb-open { background: #f7f3ec; }   /* the gap around iOS's ⌃⌄✓ bar matches the board */
.cb-ask input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16px; outline: none; color: var(--cb-ink); min-width: 0; }
.cb-mic { width: 38px; height: 38px; border-radius: 50%; background: var(--cb-warm) !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cb-mic span { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.cb-listening .cb-mic { box-shadow: 0 0 0 4px rgba(139,94,60,.2), 0 0 0 9px rgba(139,94,60,.08); }
/* the ask bar's mic as the ball (ball/ball.js); until it loads, the plain mic dot stays.
   56 px, poking past the bar like the chat's, and its listening pills replace the halo. */
.cb-mic.ball { width: 56px; height: 56px; padding: 0; margin: -9px -10px -9px 0; position: relative; z-index: 1; box-shadow: 0 3px 10px rgba(139,94,60,.22); }
.cb-mic.ball > span { display: none; }
.cb-listening .cb-mic.ball { box-shadow: 0 3px 10px rgba(139,94,60,.22); }
.cb-sheet { position: absolute; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); height: 58%; background: var(--cb-white); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(44,44,44,.18); display: flex; flex-direction: column; z-index: 2; transition: transform .2s ease; }
.cb-sheet[hidden] { display: none; }
.cb-grab, .cb-sheet-h { touch-action: none; }   /* the sidechat's top bar is for swiping it closed */
.cb-grab { width: 44px; height: 5px; border-radius: 3px; background: #d8cfc2; margin: 9px auto 4px; }
.cb-sheet-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 16px 8px; border-bottom: 1px solid var(--cb-border); }
.cb-sheet-h span { font-family: 'Lora', serif; font-style: italic; color: var(--cb-warm); }
.cb-sheet-h button { font-size: .72rem; color: var(--cb-hero) !important; font-weight: 600; }
.cb-convo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.cb-b { max-width: 86%; padding: 8px 12px; font-size: .9rem; line-height: 1.45; border-radius: 16px; }
.cb-b.u { align-self: flex-end; background: var(--cb-sage-dark); color: #fff; border-bottom-right-radius: 4px; }
.cb-b.p { align-self: flex-start; background: var(--cb-cream); border: 1px solid var(--cb-border); border-bottom-left-radius: 4px; }
.cb-b .hw { color: var(--cb-hero); font-weight: 600; }
.cb-typing { display: flex; gap: 4px; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cb-muted); animation: cbDot 1.1s infinite; }
.cb-typing i:nth-child(2) { animation-delay: .14s; }
.cb-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes cbDot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cb-skel, .cb-timer.up, .cb-typing i { animation: none; } }
@media (min-width: 769px) { .cb { max-width: 520px; margin: 0 auto; border-left: 1px solid var(--cb-border); border-right: 1px solid var(--cb-border); } }

/* the doors stay in the chat as data; the pill above the input shows the newest */
.chef-door-slot { display: none; }

/* the pill: "Let's cook" riding above the chat input */
#chef-pill { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; background: #fdfaf5; border: 1.5px solid #5b3a8c; border-radius: 16px; padding: 7px 7px 7px 12px; font: inherit; color: #2c2c2c; cursor: pointer; text-align: left; box-shadow: 0 4px 14px rgba(91,58,140,.12); }
#chef-pill .cp-t { display: flex; flex-direction: column; min-width: 0; }
#chef-pill .cp-t b { font-family: 'Lora', serif; font-weight: 500; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chef-pill .cp-t small { color: #5a5a5a; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chef-pill .cp-t small.cp-hint { color: #5b3a8c; white-space: normal; }
#chef-pill .cp-go { margin-left: auto; flex-shrink: 0; background: #5b3a8c; color: #fff; border-radius: 11px; padding: 8px 12px; font-weight: 600; font-size: .82rem; }
#chef-pill.fresh { animation: cp-in .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cp-in { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #chef-pill.fresh { animation: none; } }

/* "Back to your cook" above the chat input */
#chef-resume { width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; background: #ede6f7; border: 1.5px solid #5b3a8c; border-radius: 14px; padding: 9px 12px; font: inherit; color: #2c2c2c; cursor: pointer; text-align: left; }
#chef-resume span { font-weight: 600; font-size: .86rem; }
#chef-resume small { color: #5b3a8c; font-size: .72rem; }
#chef-resume b { margin-left: auto; color: #5b3a8c; }

/* a recipe attached to the next chat message */
.recipe-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; background: #f5ede6; color: #8b5e3c; border-radius: 12px; padding: 5px 6px 5px 11px; font-size: .76rem; }
.recipe-chip button { border: 0; background: transparent; color: #8b5e3c; cursor: pointer; font-size: .8rem; }

/* recipe box */
.rb { position: fixed; inset: 0; z-index: 310; background: rgba(44,44,44,.45); display: flex; align-items: flex-end; justify-content: center; font-family: 'DM Sans', sans-serif; }
.rb button { font: inherit; cursor: pointer; border: 0; background: none; }
.rb-sheet { width: 100%; max-width: 560px; max-height: 86%; background: #fdfaf5; border-radius: 22px 22px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.rb-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e2dbd1; }
.rb-h span { font-family: 'Lora', serif; font-style: italic; color: #8b5e3c; font-size: 1.3rem; }
.rb-list { overflow-y: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rb-items { display: flex; flex-direction: column; gap: 10px; }
.rb-list .kk { margin-top: 0; }
.rb-list .kk:empty { display: none; }
.rb-card { background: #fff; border: 1px solid #e2dbd1; border-radius: 14px; padding: 12px 14px; }
.rb-name { font-family: 'Lora', serif; font-size: 1.05rem; color: #2c2c2c; }
.rb-meta { font-size: .72rem; color: #9a9a9a; margin-top: 2px; }
.rb-note { font-size: .84rem; color: #8b5e3c; font-style: italic; margin-top: 6px; }
.rb-b { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.rb-b button { border-radius: 11px; padding: 9px 12px; font-size: .84rem; font-weight: 600; }
.rb-again { background: #5b3a8c !important; color: #fff; }
.rb-change { background: #ede6f7 !important; color: #5b3a8c; }
.rb-change:disabled { cursor: default; opacity: .75; }
.rb-del { margin-left: auto; color: #9a9a9a; }
.rb-share { color: #5b3a8c; text-decoration: underline; text-underline-offset: 3px; font-weight: 500 !important; padding-left: 4px !important; padding-right: 4px !important; }
.rb-shared { font-size: .78rem; color: #5b3a8c; margin-top: 8px; }

/* a recipe someone shared, and the * on what clashes with what Pila knows */
.sr-name { font-family: 'Lora', serif; font-size: 1.25rem; color: #2c2c2c; }
.sr-items { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: #2c2c2c; }
.sr-items li { padding: 7px 10px; background: #fff; border: 1px solid #e2dbd1; border-radius: 10px; }
.sr-star { color: #5b3a8c; font-weight: 700; font-size: .8em; margin-left: 2px; }
.sr-notes { margin: 6px 0 2px; font-size: .8rem; color: #5b3a8c; }
.sr-notes p { margin: 2px 0; }
.sr-fix { color: #5a5a5a; }
.sr-hint { font-size: .78rem; color: #9a9a9a; margin: 12px 0 0; text-align: center; }
.sr-hint b { color: #5b3a8c; letter-spacing: .03em; }
.rb-empty { color: #5a5a5a; font-size: .92rem; line-height: 1.6; padding: 24px 4px; }