/* Sousro — AI sous-chef recipe assistant */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* The site nav is sticky (~56px tall). The frame uses a fixed height so the
   chat composer / chip flow stay anchored, and inner panels (cooking mode
   ingredients + method) can scroll independently within their flex columns. */
.sousro-page {
    background: #1F1B16;
    height: calc(100vh - 56px);
    /* dvh accounts for mobile browser chrome (address bar) so the frame doesn't
       overflow the visible viewport and push the sign-in CTA below the fold. */
    height: calc(100dvh - 56px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

/* Kiosk mode hides the site navbar, so reclaim the full viewport */
body.kiosk-mode .sousro-page {
    height: 100vh;
    height: 100dvh;
}

.sousro-frame {
    width: 100%;
    max-width: 760px;
    background: #FBF7F1;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

#sousro-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Typing indicator dots, referenced by ChatView inline styles */
@keyframes sousro-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Recipe view change indicators */
@keyframes sousro-flash-new {
    0%   { background-color: rgba(184, 71, 43, 0.22); opacity: 0; transform: translateY(-3px); }
    25%  { opacity: 1; transform: translateY(0); }
    100% { background-color: transparent; }
}
@keyframes sousro-flash-changed {
    0%   { background-color: rgba(184, 71, 43, 0.22); }
    100% { background-color: transparent; }
}
@keyframes sousro-recipe-fade-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Header heart + count badge pulse on save/unsave so the user sees where the
   bookmarked recipe lands. */
@keyframes sousro-saved-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); }
    65%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
.sousro-saved-pulse {
    animation: sousro-saved-pulse 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: center;
}
.sousro-flash-new {
    animation: sousro-flash-new 1.6s ease-out;
    border-radius: 6px;
}
.sousro-flash-changed {
    animation: sousro-flash-changed 1.6s ease-out;
    border-radius: 6px;
}
.sousro-recipe-fade-in {
    animation: sousro-recipe-fade-in 0.4s ease-out;
}

/* Loading splash before React mounts */
.sousro-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8A7B66;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* On narrow viewports, drop the inset frame for an edge-to-edge mobile feel */
@media (max-width: 760px) {
    .sousro-page {
        padding: 0;
    }
    .sousro-frame {
        box-shadow: none;
    }
}

/* Landscape / wide viewports: widen the frame so chat + recipe fit side by side */
@media (orientation: landscape) and (min-width: 760px) {
    .sousro-frame {
        max-width: 1280px;
    }
}

/* Avoid horizontal scroll from translateX transitions during view switch */
html, body {
    overflow-x: hidden;
}