/* ================================================
   CHEF CHARACTER WIDGET
   ================================================ */

#chef-widget {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    touch-action: none;
}

/* ── Close button ── */
#chef-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid rgba(201,151,58,0.35);
    color: rgba(245,240,232,0.6);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}
#chef-widget:hover #chef-close { opacity: 1; }
#chef-close:hover { background: rgba(201,151,58,0.25); color: #C9973A; }

/* ── Speech bubble ── */
#chef-bubble {
    background: #1c1a14;
    border: 1px solid rgba(201,151,58,0.45);
    border-radius: 16px 16px 16px 4px;
    padding: 10px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #F5F0E8;
    max-width: 190px;
    text-align: center;
    line-height: 1.45;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,151,58,0.08);
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(6px) scale(0.95);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
#chef-bubble.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── SVG chef body ── */
#chef-svg-wrap {
    cursor: grab;
    position: relative;
    width: 115px;
    transition: transform 0.15s ease;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55));
    /* Allow hat puff and tools to render outside bounding box */
    overflow: visible;
}
#chef-svg-wrap svg { overflow: visible; }
#chef-svg-wrap:active { cursor: grabbing; }

/* ── Idle bob animation ── */
@keyframes chefBob {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25%       { transform: translateY(-6px) rotate(1.5deg); }
    75%       { transform: translateY(-3px) rotate(-1deg); }
}
#chef-svg-wrap.idle { animation: chefBob 2.8s ease-in-out infinite; }

/* ── Reaction animations ── */
@keyframes chefJump {
    0%   { transform: translateY(0) scale(1) rotate(0deg); }
    30%  { transform: translateY(-20px) scale(1.08) rotate(-4deg); }
    60%  { transform: translateY(-10px) scale(1.05) rotate(3deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes chefWiggle {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-8deg) scale(1.06); }
    40%  { transform: rotate(8deg) scale(1.06); }
    60%  { transform: rotate(-5deg); }
    80%  { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
}
@keyframes chefNod {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-8px); }
    60%       { transform: translateY(-4px); }
}
@keyframes chefSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

#chef-svg-wrap.react-jump   { animation: chefJump   0.55s ease forwards; }
#chef-svg-wrap.react-wiggle { animation: chefWiggle 0.50s ease forwards; }
#chef-svg-wrap.react-nod    { animation: chefNod    0.45s ease forwards; }
#chef-svg-wrap.react-spin   { animation: chefSpin   0.60s ease forwards; }

/* ── Dragging state ── */
#chef-widget.dragging #chef-svg-wrap {
    animation: none !important;
    filter: drop-shadow(0 12px 28px rgba(201,151,58,0.35));
}
#chef-widget.dragging { opacity: 0.92; }

/* ── Mobile adjustments ── */
@media (max-width: 640px) {
    #chef-widget  { bottom: 20px; right: 16px; }
    #chef-svg-wrap { width: 88px; }
    #chef-bubble  { font-size: 0.72rem; max-width: 160px; padding: 8px 12px; }
    #chef-close   { opacity: 1; }
}