/* ==========================================================================
   The Host — customer assistant
   Loads after app.css and reuses its tokens.
   ========================================================================== */

.asst, .asst *, .asst *::before, .asst *::after { box-sizing: border-box; }

.asst {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------- Launcher */

.asst__launcher {
    position: relative;
    width: 58px; height: 58px;
    border: 0; border-radius: 50%;
    background: var(--saffron); color: var(--espresso);
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(22, 19, 15, .28);
    transition: transform .18s ease, background .18s ease;
}
.asst__launcher:hover { background: var(--saffron-deep); transform: translateY(-2px); }
.asst__launcher:focus-visible { outline: 3px solid var(--espresso); outline-offset: 3px; }

.asst__launcher-icon,
.asst__launcher-close {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    transition: opacity .16s ease, transform .16s ease;
}
.asst__launcher-close { opacity: 0; transform: rotate(-45deg); }
.asst.is-open .asst__launcher-icon { opacity: 0; transform: rotate(45deg); }
.asst.is-open .asst__launcher-close { opacity: 1; transform: none; }

/* A single slow pulse, so the button reads as available without nagging. */
.asst__pulse {
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--saffron);
    opacity: 0;
    animation: asstPulse 3.4s ease-out 1.5s 3;
    pointer-events: none;
}
@keyframes asstPulse {
    0%   { transform: scale(.9); opacity: .7; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}
.asst.is-open .asst__pulse { display: none; }

@media (prefers-reduced-motion: reduce) {
    .asst__pulse { animation: none; }
    .asst__launcher { transition: none; }
}

/* ---------------------------------------------------------------- Panel */

/* A class with display:flex outranks the browser's [hidden] rule, so the
   hidden attribute needs restating here or the panel never closes. */
.asst__panel[hidden] { display: none !important; }

.asst__panel {
    position: absolute;
    right: 0; bottom: 72px;
    width: min(384px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 130px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 60px rgba(22, 19, 15, .26);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: asstIn .2s ease;
}
@keyframes asstIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .asst__panel { animation: none; }
}

.asst__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 14px 16px;
    background: var(--espresso); color: var(--ink-invert);
    flex-shrink: 0;
}
.asst__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--saffron); color: var(--espresso);
    display: grid; place-items: center; flex-shrink: 0;
}
.asst__title { flex: 1; min-width: 0; line-height: 1.25; }
.asst__title strong { display: block; font-size: .95rem; }
.asst__title small { font-size: .74rem; color: #b8ada0; }

.asst__reset, .asst__close {
    background: none; border: 0; cursor: pointer;
    color: #b8ada0; padding: 6px; border-radius: var(--r-sm);
    display: grid; place-items: center;
}
.asst__reset:hover, .asst__close:hover { color: var(--ink-invert); background: var(--espresso-soft); }
.asst__close { font-size: 1.5rem; line-height: 1; padding: 0 8px 3px; }

/* ------------------------------------------------------------------ Log */

.asst__log {
    flex: 1; overflow-y: auto;
    padding: 16px;
    background: var(--paper);
    display: flex; flex-direction: column; gap: 12px;
    overscroll-behavior: contain;
}

.asst__msg { display: flex; flex-direction: column; max-width: 100%; }
.asst__msg--user { align-items: flex-end; }
.asst__msg--assistant { align-items: flex-start; }

.asst__bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.asst__msg--assistant .asst__bubble {
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom-left-radius: 5px;
    color: var(--ink);
}
.asst__msg--user .asst__bubble {
    background: var(--espresso);
    color: var(--ink-invert);
    border-bottom-right-radius: 5px;
}
.asst__bubble a { color: var(--saffron-deep); text-decoration: underline; }
.asst__msg--user .asst__bubble a { color: var(--saffron); }

/* Typing indicator */
.asst__typing { display: flex; gap: 4px; padding: 14px; }
.asst__typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-faint);
    animation: asstDot 1.3s infinite ease-in-out;
}
.asst__typing span:nth-child(2) { animation-delay: .18s; }
.asst__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes asstDot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ------------------------------------------------------------ Dish cards */

.asst__cards {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px; width: 88%;
}
.asst__card {
    display: flex; gap: 10px; align-items: center;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none; color: inherit;
    transition: border-color .14s, transform .14s;
}
.asst__card:hover { border-color: var(--saffron); transform: translateX(2px); }
.asst__card img {
    width: 46px; height: 46px; border-radius: var(--r-sm);
    object-fit: cover; flex-shrink: 0; background: var(--surface-sunk);
}
.asst__card-body { min-width: 0; flex: 1; }
.asst__card-body strong { display: block; font-size: .87rem; line-height: 1.3; }
.asst__card-body small {
    display: block; font-size: .77rem; color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asst__card-foot {
    display: flex; align-items: center; gap: 6px;
    margin-top: 3px; font-size: .82rem; font-weight: 700;
}
.asst__card-foot del { font-weight: 400; color: var(--ink-faint); font-size: .76rem; }

.asst__flag {
    font-size: .64rem; font-weight: 700; letter-spacing: .03em;
    padding: 2px 6px; border-radius: var(--r-pill);
}
.asst__flag--veg { background: var(--herb-wash); color: var(--herb); }
.asst__flag--hot { background: var(--chili-wash); color: var(--chili); }
.asst__flag--off { background: var(--surface-sunk); color: var(--ink-faint); }

/* --------------------------------------------------------------- Chips */

.asst__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 14px 10px;
    background: var(--paper);
    flex-shrink: 0;
}
.asst__chips:empty { display: none; }

.asst__chip {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    padding: 7px 13px;
    font: inherit; font-size: .8rem; font-weight: 500;
    color: var(--ink); cursor: pointer;
    transition: border-color .14s, background .14s;
}
.asst__chip:hover { border-color: var(--saffron); background: var(--saffron-wash, #fdf3e0); }

/* ---------------------------------------------------------------- Form */

.asst__form {
    display: flex; gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
}
.asst__form input {
    flex: 1; min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font: inherit; font-size: .88rem;
    background: var(--paper);
}
.asst__form input:focus {
    outline: none;
    border-color: var(--saffron);
    box-shadow: 0 0 0 3px rgba(227, 154, 12, .18);
}
.asst__form button {
    width: 42px; height: 42px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--saffron); color: var(--espresso);
    display: grid; place-items: center; cursor: pointer;
    transition: background .14s;
}
.asst__form button:hover { background: var(--saffron-deep); }

.asst__foot {
    margin: 0;
    padding: 0 14px 12px;
    font-size: .71rem;
    color: var(--ink-faint);
    text-align: center;
    background: var(--surface);
    flex-shrink: 0;
}
.asst__foot a { color: var(--ink-muted); text-decoration: underline; }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 700px) {
    /* Clear the mobile tab bar, and any home-indicator inset. */
    .asst {
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .asst__launcher { width: 52px; height: 52px; }

    .asst__panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(138px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        height: min(68vh, 500px);
    }

    .asst__log { padding: 12px; }
    .asst__chips { padding: 0 12px 8px; }
    .asst__form { padding: 10px; gap: 6px; }

    /*
     * 16px is not a style choice. Safari on iOS zooms the page whenever an
     * input smaller than 16px receives focus, which shifts the viewport
     * sideways and pushes the send button off-screen.
     */
    .asst__form input {
        font-size: 16px;
        padding: 10px 13px;
    }

    .asst__form button { width: 40px; height: 40px; }

    /* Let bubbles and cards use the full width on a narrow screen. */
    .asst__bubble { max-width: 92%; }
    .asst__cards { width: 100%; }
    .asst__foot { padding: 0 12px 10px; font-size: .68rem; }
}

/* Landscape phones are short; give the panel less height and more room. */
@media (max-width: 900px) and (max-height: 480px) {
    .asst__panel {
        height: calc(100vh - 100px);
        bottom: 70px;
    }
}

@media print {
    .asst { display: none !important; }
}