/* ===================================================
   RESET
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    font-family:'Poppins','Segoe UI',Arial,sans-serif;
    background:#f4f4f4;
    overflow:hidden;
}

button,
input{
    font:inherit;
}

button{
    border:none;
}

button:disabled{
    cursor:not-allowed;
    opacity:.55;
}

[hidden]{
    display:none !important;
}

img,
video{
    max-width:100%;
}

/* ===================================================
   DASHBOARD
=================================================== */

.dashboard{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns:220px minmax(0,1fr) 430px;
    background:#fff;
    overflow:hidden;
}

/* ===================================================
   SIDEBAR
=================================================== */

.sidebar{
    background:#fff;
    border-right:1px solid #e8e8e8;
    display:flex;
    flex-direction:column;
    height:100vh;
    min-height:0;
    overflow:hidden;
}

.logo{
    height:124px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #ececec;
    flex-shrink:0;
}

.logo img{
    width:110px;
}

.category-list{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px 0;
}

.category{
    width:200px;
    margin:8px auto;
    min-height:74px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 16px;
    border-radius:12px;
    cursor:pointer;
    transition:.2s;
    border:1px solid #efefef;
    background:#fff;
    color:#222;
    text-align:left;
}

.category:hover{
    border-color:#FFC72C;
    background:#fffdf4;
}

.category img{
    width:44px;
    height:44px;
    object-fit:contain;
    flex-shrink:0;
}

.category span{
    font-size:18px;
    font-weight:600;
    line-height:1.18;
    white-space:normal;
}

.category.active{
    border-left:4px solid #FFC72C;
    background:#fffdf4;
}

/* ===================================================
   CENTER PANEL
=================================================== */

.center-panel{
    padding:24px 36px 32px;
    overflow-y:auto;
    min-height:0;
    height:100vh;
    scroll-behavior:smooth;
    overscroll-behavior:contain;
}

.menu-header{
    margin-bottom:20px;
}

.menu-header h1{
    font-size:clamp(30px,2.7vw,40px);
    font-weight:700;
    color:#222;
    line-height:1.08;
}

.menu-header p{
    margin-top:6px;
    color:#666;
    font-size:clamp(15px,1.25vw,18px);
    line-height:1.4;
}

/* ===================================================
   CATEGORY GRID / CARDS
=================================================== */

.category-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.menu-card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:18px;
    height:clamp(104px,14vh,130px);
    position:relative;
    cursor:pointer;
    transition:.2s;
    color:#222;
    text-align:left;
    overflow:hidden;
}

.menu-card:hover{
    border-color:#FFC72C;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.menu-card img{
    position:absolute;
    right:20px;
    top:50%;
    width:clamp(82px,10.5vw,130px);
    height:clamp(72px,9.5vw,110px);
    object-fit:contain;
    transform:translateY(-50%);
}

.menu-card h3{
    position:absolute;
    left:26px;
    top:50%;
    bottom:auto;
    font-size:clamp(21px,2vw,28px);
    font-weight:700;
    line-height:1.12;
    transform:translateY(-50%);
    max-width:58%;
}

/* ===================================================
   BANNER
=================================================== */

.promo-banner{
    margin-top:18px;
}

.promo-content{
    width:100%;
    min-height:86px;
    border-radius:16px;
    background:#FFC72C;
    padding:16px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#222;
}

.promo-content h2{
    font-size:23px;
    line-height:1.15;
}

.promo-content p{
    margin-top:8px;
    font-size:15px;
    line-height:1.35;
}

/* ===================================================
   PRODUCTS
=================================================== */

.product-section{
    margin-top:24px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.section-header h2{
    font-size:26px;
    line-height:1.15;
}

.section-header span{
    color:#d32f2f;
    font-weight:600;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.category-title{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:6px;
}

.category-title h2{
    font-size:28px;
    color:#222;
}

#back-to-categories{
    border:none;
    background:#f2f2f2;
    border-radius:10px;
    padding:8px 12px;
    cursor:pointer;
    font-weight:600;
    color:#222;
}

#back-to-categories:hover{
    background:#e8e8e8;
}

.category-products{
    grid-column:1/-1;
    align-items:start;
}

.product-card{
    min-height:158px;
    border:1px solid #e3e3e3;
    background:#fff;
    border-radius:14px;
    padding:18px;
    cursor:default;
    text-align:center;
    transition:.2s;
    color:#222;
}

.product-card.is-highlighted{
    border-color:#FFC72C;
    box-shadow:0 0 0 4px rgba(255,199,44,.22),0 10px 25px rgba(0,0,0,.08);
}

.product-image{
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-image img{
    width:92px;
    height:78px;
    object-fit:contain;
}

.product-card h3{
    min-height:38px;
    font-size:15px;
    line-height:1.25;
    color:#222;
    margin-top:10px;
}

.product-card strong{
    display:block;
    margin-top:8px;
    color:#C62828;
    font-size:18px;
}

/* ===================================================
   RIGHT PANEL
=================================================== */

.right-panel{
    background:#FFF8E8;
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    height:100vh;
    min-height:0;
    overflow:hidden;
    position:sticky;
    top:0;
}

.maya-card{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.maya-video{
    width:100%;
    max-width:100%;
    height:245px;
    margin:10px auto 12px;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
}

.maya-avatar{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    display:block;
    opacity:1;
    background:#fff7e6;
}

.bottom-section{
    display:grid;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    flex:1;
    min-height:0;
    gap:12px;
}

/* ===================================================
   START / LISTENING STATUS
=================================================== */

.voice-status{
    width:100%;
    border:none;
    background:#fff;
    border-radius:18px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
    color:#222;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
    transition:.2s;
}

.voice-status:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.voice-status h3{
    font-size:24px;
    line-height:1.1;
}

.voice-status small{
    display:block;
    margin-top:5px;
    font-size:14px;
    color:#555;
    line-height:1.35;
}

.status-dot{
    width:15px;
    height:15px;
    border-radius:50%;
    background:#32CD32;
    flex-shrink:0;
}

.voice-status.start-mode .status-dot{
    background:#FFC72C;
}

.voice-status.listening .status-dot,
.voice-status.recording .status-dot{
    background:#C62828;
    animation:pulse-dot 1s infinite;
}

.voice-status.thinking .status-dot{
    background:#FF9800;
}

.voice-status.speaking .status-dot{
    background:#1976D2;
    animation:pulse-dot 1s infinite;
}

.voice-status.error .status-dot{
    background:#777;
}

@keyframes pulse-dot{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.45; transform:scale(.85); }
}

.assistant-caption{
    min-height:44px;
    max-height:74px;
    overflow-y:auto;
    border-radius:14px;
    padding:10px 14px;
    background:rgba(255,255,255,.72);
    color:#333;
    font-size:14px;
    line-height:1.35;
}

/* ===================================================
   QUICK REPLIES / SCREEN CHOICES
=================================================== */

.quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-height:86px;
    overflow-y:auto;
    padding-right:4px;
}

.quick-reply-chip{
    border:1.5px solid #C62828;
    background:#fff;
    color:#C62828;
    border-radius:999px;
    padding:7px 12px;
    font-size:12px;
    font-weight:600;
    line-height:1.2;
}

/* ===================================================
   ORDER
=================================================== */

.order-card{
    background:white;
    border-radius:20px;
    padding:18px 18px 16px;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.order-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
    flex-shrink:0;
}

.order-header h2{
    color:#c62828;
    font-size:22px;
    line-height:1.15;
}

.order-hint{
    color:#777;
    font-size:11px;
    line-height:1.25;
    max-width:150px;
    text-align:right;
}

#order-items{
    color:#666;
    flex:1;
    min-height:0;
    padding-right:4px;
    overflow-y:auto;
}

.empty-order{
    font-size:14px;
    color:#777;
}

.order-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid #f1f1f1;
}

.order-item strong{
    display:block;
    color:#222;
    font-size:14px;
}

.order-item small{
    display:block;
    margin-top:3px;
    color:#777;
    line-height:1.3;
    font-size:12px;
}

.order-item span{
    color:#C62828;
    font-weight:700;
    white-space:nowrap;
    font-size:14px;
}

/* ===================================================
   COMPACT CHECKOUT SUMMARY
=================================================== */

.checkout-card{
    background:#fff;
    border-radius:16px;
    padding:12px 16px;
    flex-shrink:0;
}

.total{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
        "label amount"
        "hint hint";
    align-items:center;
    column-gap:12px;
}

.total h3{
    grid-area:label;
    font-size:16px;
    color:#222;
}

.total h1{
    grid-area:amount;
    font-size:22px;
    color:#C62828;
    margin:0;
    white-space:nowrap;
}

#checkout-hint{
    grid-area:hint;
    margin-top:6px;
    color:#666;
    font-size:12px;
}

.cancel-order-btn{
    width:100%;
    height:34px;
    margin-top:10px;
    border:1.5px solid #ddd;
    border-radius:10px;
    background:#fff;
    color:#666;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.cancel-order-btn:hover{
    border-color:#C62828;
    color:#C62828;
}



/* ===================================================
   VOICE CHOICE MODAL
   - Shows size/topping/combo choices professionally.
   - Does not cover the full app.
   - Keeps the right order panel readable.
=================================================== */

.quick-replies{
    display:none !important;
}

.choice-modal{
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 460px 24px 250px;
    pointer-events:none;
}

.choice-modal[hidden]{
    display:none !important;
}

.choice-panel{
    width:min(560px,100%);
    max-height:min(78vh,720px);
    overflow:hidden;
    display:grid;
    grid-template-columns:148px minmax(0,1fr);
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:28px;
    box-shadow:0 28px 80px rgba(0,0,0,.22);
    position:relative;
    pointer-events:auto;
    color:#222;
}

.choice-panel.choice-panel-no-image{
    grid-template-columns:1fr;
    width:min(520px,100%);
}

.choice-close{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    color:#333;
    font-size:26px;
    line-height:1;
    box-shadow:0 8px 22px rgba(0,0,0,.16);
    cursor:pointer;
    z-index:2;
    transition:.2s;
}

.choice-close:hover{
    transform:scale(1.04);
    color:#C62828;
}

.choice-media{
    min-height:100%;
    background:linear-gradient(180deg,#fff8e1,#fff);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    border-right:1px solid #f0f0f0;
}

.choice-media img{
    width:116px;
    height:116px;
    object-fit:contain;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

.choice-content{
    padding:24px 26px 22px;
    min-width:0;
    max-height:min(78vh,720px);
    overflow-y:auto;
}

.choice-kicker{
    color:#C62828;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.choice-content h2{
    font-size:26px;
    line-height:1.12;
    color:#222;
    padding-right:42px;
}

.choice-content > p:not(.choice-kicker){
    margin-top:8px;
    color:#666;
    font-size:14px;
    line-height:1.35;
}

.choice-groups{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:18px;
}

.choice-group{
    background:#f8f8f8;
    border:1px solid #ececec;
    border-radius:18px;
    padding:14px;
}

.choice-group-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:10px;
}

.choice-group h3{
    font-size:17px;
    line-height:1.2;
    color:#222;
}

.choice-group small{
    color:#777;
    font-size:12px;
    line-height:1.25;
}

.choice-badge{
    flex-shrink:0;
    border-radius:999px;
    background:#fff;
    border:1px solid #e0e0e0;
    padding:4px 8px;
    color:#666;
    font-size:11px;
    font-weight:700;
}

.choice-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.choice-option{
    width:100%;
    min-height:48px;
    border-radius:14px;
    background:#fff;
    border:1.5px solid #e5e5e5;
    padding:10px 12px;
    display:grid;
    grid-template-columns:18px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    cursor:pointer;
    color:#222;
    text-align:left;
    transition:.18s;
}

.choice-option:hover,
.choice-option:focus-visible{
    border-color:#C62828;
    box-shadow:0 8px 20px rgba(198,40,40,.10);
    outline:none;
}

.choice-radio{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #C62828;
    background:#fff;
    display:block;
}

.choice-main{
    min-width:0;
}

.choice-label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#222;
    line-height:1.25;
}

.choice-desc{
    display:block;
    color:#777;
    font-size:12px;
    line-height:1.3;
    margin-top:2px;
}

.choice-price{
    color:#C62828;
    font-weight:800;
    font-size:13px;
    white-space:nowrap;
}

.choice-modal-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
}

.choice-secondary,
.choice-quiet{
    height:42px;
    border-radius:999px;
    padding:0 16px;
    cursor:pointer;
    font-weight:700;
    transition:.18s;
}

.choice-secondary{
    background:#FFC72C;
    color:#222;
}

.choice-secondary:hover{
    filter:brightness(.98);
    transform:translateY(-1px);
}

.choice-quiet{
    background:#fff;
    color:#555;
    border:1.5px solid #e2e2e2;
}

.choice-quiet:hover{
    border-color:#C62828;
    color:#C62828;
}

/* Keep the popup compact on laptops so Maya/order panel remains visible. */
@media (max-width:1280px){
    .choice-modal{
        padding:24px 410px 24px 220px;
    }

    .choice-panel{
        grid-template-columns:120px minmax(0,1fr);
    }

    .choice-media img{
        width:96px;
        height:96px;
    }

    .choice-content h2{
        font-size:23px;
    }
}

@media (max-width:1024px){
    .choice-modal{
        padding:20px;
        align-items:flex-start;
        padding-top:90px;
    }

    .choice-panel{
        width:min(620px,100%);
    }
}

@media (max-width:760px){
    .choice-modal{
        padding:14px;
        align-items:flex-end;
    }

    .choice-panel,
    .choice-panel.choice-panel-no-image{
        width:100%;
        max-height:82vh;
        grid-template-columns:1fr;
        border-radius:24px 24px 0 0;
    }

    .choice-media{
        min-height:112px;
        border-right:none;
        border-bottom:1px solid #f0f0f0;
        padding:14px;
    }

    .choice-media img{
        width:92px;
        height:92px;
    }

    .choice-content{
        padding:20px;
        max-height:70vh;
    }

    .choice-modal-actions{
        position:sticky;
        bottom:0;
        background:#fff;
        padding-top:10px;
    }
}

/* ===================================================
   SCROLLBARS
=================================================== */

.category-list::-webkit-scrollbar,
.center-panel::-webkit-scrollbar,
#order-items::-webkit-scrollbar,
.quick-replies::-webkit-scrollbar,
.assistant-caption::-webkit-scrollbar{
    width:6px;
}

.category-list::-webkit-scrollbar-thumb,
.center-panel::-webkit-scrollbar-thumb,
#order-items::-webkit-scrollbar-thumb,
.quick-replies::-webkit-scrollbar-thumb,
.assistant-caption::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:999px;
}

/* ===================================================
   RESPONSIVE SAFETY
=================================================== */

@media (max-width:1280px){
    .dashboard{
        grid-template-columns:200px minmax(0,1fr) 390px;
    }

    .category{
        width:180px;
    }

    .category span{
        font-size:16px;
    }

    .right-panel{
        padding:20px 18px;
    }

    .maya-video{
        height:220px;
    }

    .voice-status h3{
        font-size:21px;
    }

    .voice-status small{
        font-size:13px;
    }
}

@media (max-width:1024px){
    body{
        overflow:auto;
    }

    .dashboard{
        width:100%;
        min-height:100vh;
        height:auto;
        grid-template-columns:180px minmax(0,1fr);
        grid-template-areas:
            "sidebar center"
            "right right";
        overflow:visible;
    }

    .sidebar{
        grid-area:sidebar;
        height:100vh;
        position:sticky;
        top:0;
    }

    .center-panel{
        grid-area:center;
        height:auto;
        min-height:100vh;
        overflow:visible;
    }

    .right-panel{
        grid-area:right;
        height:auto;
        min-height:0;
        position:relative;
        overflow:visible;
    }

    .bottom-section{
        min-height:540px;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:760px){
    .dashboard{
        display:block;
    }

    .sidebar{
        height:auto;
        position:relative;
        border-right:none;
        border-bottom:1px solid #e8e8e8;
    }

    .logo{
        height:90px;
    }

    .logo img{
        width:86px;
    }

    .category-list{
        display:flex;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:12px;
    }

    .category{
        width:150px;
        min-width:150px;
        min-height:64px;
        margin:0;
    }

    .category img{
        width:34px;
        height:34px;
    }

    .category span{
        font-size:14px;
    }

    .center-panel{
        padding:20px;
        min-height:0;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .menu-card{
        height:120px;
    }

    .right-panel{
        padding:20px;
    }

    .maya-video{
        height:210px;
    }
}
/* ─────────────────────────────────────────
   Fix Maya video/avatar crop
   ───────────────────────────────────────── */

.assistant-media,
.assistant-video,
.maya-video-box,
.video-box {
  width: 100%;
  height: 280px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff7e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assistant-media video,
.assistant-video video,
.maya-video-box video,
.video-box video,
#maya-video,
#assistant-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 26px;
  background: #fff7e6;
}

.assistant-media img,
.assistant-video img,
.maya-video-box img,
.video-box img,
#maya-image,
#assistant-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 26px;
  background: #fff7e6;
}
/* ===================================================
   PHASE 10F — GROUNDED MENU INSIGHTS
   Material UI additions only:
   - truthful dynamic favourites/featured section
   - recommendation bundle display
   - item descriptions and backend-derived badges
   - LLM response provenance indicator
=================================================== */

.section-header-copy{
    min-width:0;
}

.section-eyebrow{
    margin-bottom:5px;
    color:#C62828;
    font-size:11px;
    font-weight:800;
    letter-spacing:.09em;
    line-height:1.2;
    text-transform:uppercase;
}

.section-copy{
    margin-top:5px;
    color:#666;
    font-size:13px;
    line-height:1.35;
}

.section-count{
    flex-shrink:0;
    border:1px solid #ead28a;
    border-radius:999px;
    background:#fff9df;
    color:#6a5200;
    padding:7px 11px;
    font-size:12px;
    font-weight:800;
}

.featured-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.product-card{
    min-height:260px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:relative;
    padding:16px;
    text-align:left;
    overflow:hidden;
}

.product-card.is-highlighted{
    border-color:#FFC72C;
    box-shadow:0 0 0 3px rgba(255,199,44,.22),0 12px 28px rgba(0,0,0,.09);
}

.product-image{
    height:92px;
}

.product-image img{
    width:108px;
    height:88px;
}

.product-badges{
    min-height:24px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.product-badge{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    max-width:100%;
    border-radius:999px;
    padding:4px 8px;
    font-size:10px;
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
}

.product-badge.badge-popular{
    background:#fff0f0;
    color:#B71C1C;
}

.product-badge.badge-discount{
    background:#e8f5e9;
    color:#1B5E20;
}

.product-badge.badge-special{
    background:#fff3e0;
    color:#A34A00;
}

.product-badge.badge-featured,
.product-badge.badge-highlight{
    background:#fff8dc;
    color:#715500;
}

.product-badge.badge-role{
    background:#eef4ff;
    color:#174EA6;
}

.product-card h3{
    min-height:0;
    margin-top:10px;
    font-size:16px;
    line-height:1.25;
}

.product-description{
    min-height:36px;
    margin-top:6px;
    color:#666;
    font-size:12px;
    line-height:1.4;
}

.product-options{
    margin-top:7px;
    color:#555;
    font-size:11px;
    line-height:1.35;
}

.product-price-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-top:auto;
    padding-top:10px;
}

.product-price-row strong{
    display:inline;
    margin:0;
}

.product-original-price{
    color:#888;
    font-size:12px;
    text-decoration:line-through;
}

.recommendation-panel{
    margin-top:22px;
    border:1px solid #efd778;
    border-radius:24px;
    background:linear-gradient(135deg,#fffdf4,#fff7dc);
    padding:22px;
    box-shadow:0 14px 34px rgba(111,82,0,.08);
}

.recommendation-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.recommendation-head h2{
    color:#222;
    font-size:28px;
    line-height:1.15;
}

.recommendation-head p:not(.section-eyebrow){
    max-width:680px;
    margin-top:7px;
    color:#666;
    font-size:14px;
    line-height:1.45;
}

.recommendation-status{
    flex-shrink:0;
    border-radius:999px;
    background:#e8f5e9;
    color:#1B5E20;
    padding:7px 11px;
    font-size:11px;
    font-weight:800;
}

.recommendation-status.is-unavailable{
    background:#f4f4f4;
    color:#666;
}

.recommendation-items{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.recommendation-item{
    min-width:0;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    background:#fff;
    padding:14px;
}

.recommendation-item-head{
    display:flex;
    align-items:center;
    gap:12px;
}

.recommendation-item img{
    width:68px;
    height:62px;
    object-fit:contain;
    flex-shrink:0;
}

.recommendation-item h3{
    color:#222;
    font-size:15px;
    line-height:1.25;
}

.recommendation-item-role{
    display:block;
    margin-bottom:3px;
    color:#C62828;
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.recommendation-choice-list{
    margin-top:9px;
    color:#555;
    font-size:12px;
    line-height:1.4;
}

.recommendation-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.recommendation-action{
    min-height:42px;
    border-radius:999px;
    padding:0 18px;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    transition:.18s;
}

.recommendation-action.primary{
    background:#C62828;
    color:#fff;
}

.recommendation-action.secondary{
    border:1.5px solid #d9d9d9;
    background:#fff;
    color:#555;
}

.recommendation-action:hover{
    transform:translateY(-1px);
}

.assistant-caption-wrap{
    min-width:0;
}

.speech-origin{
    width:max-content;
    max-width:100%;
    margin-top:6px;
    border-radius:999px;
    background:#eef6ff;
    color:#174EA6;
    padding:4px 8px;
    font-size:10px;
    font-weight:700;
    line-height:1.2;
}

.speech-origin.is-fallback{
    background:#fff3e0;
    color:#9A4C00;
}

.speech-origin.is-invalid{
    background:#ffebee;
    color:#B71C1C;
}

@media (max-width:1280px){
    .featured-product-grid,
    .recommendation-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .featured-product-grid,
    .recommendation-items{
        grid-template-columns:1fr;
    }

    .recommendation-head{
        flex-direction:column;
    }

    .recommendation-panel{
        padding:18px;
    }

    .recommendation-actions{
        flex-direction:column;
    }

    .recommendation-action{
        width:100%;
    }
}

/* ===================================================
   PHASE 10G — VOICE / PLAYBACK / UI-CONTEXT HARDENING
=================================================== */

:root{
    color-scheme:light;
}

body[data-microphone-locked="true"] .voice-status{
    cursor:pointer;
}

body[data-microphone-locked="true"] .voice-status::after{
    margin-left:auto;
    border-radius:999px;
    background:#eef4ff;
    color:#174EA6;
    padding:5px 9px;
    font-size:10px;
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
}

body[data-microphone-locked="true"][data-voice-state="speaking"] .voice-status::after{
    content:"Mic paused while Maya speaks";
}

body[data-microphone-locked="true"][data-voice-state="thinking"] .voice-status::after{
    content:"Mic paused while Maya processes";
}

body[data-microphone-locked="true"][data-voice-state="finalizing"] .voice-status::after{
    content:"Mic paused while Maya checks your request";
}

body[data-microphone-locked="true"][data-voice-state="arming"] .voice-status::after{
    content:"Preparing microphone";
}

body[data-microphone-locked="true"][data-voice-state="idle"] .voice-status::after,
body[data-microphone-locked="true"][data-voice-state="listening"] .voice-status::after,
body[data-microphone-locked="true"][data-voice-state="recording"] .voice-status::after,
body[data-microphone-locked="true"][data-voice-state="rearming"] .voice-status::after{
    content:none;
    display:none;
}

/* Public kiosk UI never exposes model/provider/prompt provenance badges. */
.speech-origin{
    display:none !important;
}

body[data-voice-state="thinking"] .center-panel,
body[data-voice-state="finalizing"] .center-panel,
body[data-voice-state="speaking"] .center-panel{
    scroll-behavior:auto;
}

body[data-voice-state="speaking"] .quick-reply-chip,
body[data-voice-state="speaking"] .choice-option,
body[data-voice-state="thinking"] .quick-reply-chip,
body[data-voice-state="thinking"] .choice-option{
    pointer-events:none;
    filter:saturate(.65);
    opacity:.72;
}

.category-list{
    scrollbar-gutter:stable;
}

.category{
    position:relative;
    isolation:isolate;
}

.category.active::after{
    content:"";
    position:absolute;
    inset:7px 7px 7px auto;
    width:4px;
    border-radius:999px;
    background:#FFC72C;
}

.category:focus-visible,
.menu-card:focus-visible,
#back-to-categories:focus-visible,
.voice-status:focus-visible,
.cancel-order-btn:focus-visible,
.choice-option:focus-visible,
.quick-reply-chip:focus-visible,
.recommendation-action:focus-visible{
    outline:3px solid rgba(25,118,210,.42);
    outline-offset:3px;
}

.menu-card,
.category,
.voice-status,
.choice-option,
.recommendation-action,
.cancel-order-btn{
    -webkit-tap-highlight-color:transparent;
}

.maya-avatar{
    pointer-events:none;
    transform:translateZ(0);
    will-change:contents;
}

body[data-voice-state="speaking"] .maya-video{
    box-shadow:0 0 0 4px rgba(25,118,210,.12),0 18px 42px rgba(25,118,210,.12);
}

body[data-voice-state="listening"] .maya-video,
body[data-voice-state="recording"] .maya-video{
    box-shadow:0 0 0 4px rgba(198,40,40,.10),0 18px 42px rgba(198,40,40,.10);
}

#order-items{
    scrollbar-gutter:stable;
}

.order-item{
    min-width:0;
}

.order-item > div{
    min-width:0;
}

.order-item strong,
.order-item small{
    overflow-wrap:anywhere;
}

#grand-total[data-total-pending="true"]{
    color:#777;
    font-size:clamp(20px,2vw,28px);
}

.choice-modal{
    overscroll-behavior:contain;
}

.choice-panel{
    box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.sidebar,
.right-panel{
    contain:layout paint;
}

.center-panel{
    contain:layout;
}

@media (max-width:1440px) and (min-width:1025px){
    .dashboard{
        grid-template-columns:200px minmax(0,1fr) minmax(360px,410px);
    }

    .center-panel{
        padding:20px 26px 28px;
    }

    .right-panel{
        padding:18px;
    }

    .maya-video{
        height:clamp(190px,25vh,230px);
    }

    .bottom-section{
        gap:10px;
    }

    .order-card{
        padding:15px;
    }
}

@media (max-height:820px) and (min-width:1025px){
    .logo{
        height:96px;
    }

    .category{
        min-height:60px;
        margin:5px auto;
        padding:8px 13px;
    }

    .category img{
        width:38px;
        height:38px;
    }

    .maya-video{
        height:185px;
        margin:4px auto 8px;
    }

    .voice-status{
        padding:11px 13px;
    }

    .assistant-caption{
        max-height:62px;
    }

    .order-card{
        padding:14px;
    }
}

@media (max-width:1024px){
    .sidebar{
        z-index:5;
    }

    .right-panel{
        border-top:1px solid #eadfbf;
    }

    body[data-microphone-locked="true"] .voice-status::after{
        white-space:normal;
        text-align:right;
    }
}

@media (max-width:760px){
    body[data-microphone-locked="true"] .voice-status::after{
        display:none;
    }

    .category-list{
        position:sticky;
        top:0;
        z-index:12;
        background:#fff;
        box-shadow:0 7px 18px rgba(0,0,0,.06);
    }

    .center-panel{
        padding:20px 16px 26px;
    }

    .right-panel{
        padding:18px 16px 24px;
    }

    .menu-header h1{
        font-size:30px;
    }

    .category-grid,
    .product-grid{
        grid-template-columns:1fr;
    }

    .menu-card{
        height:112px;
    }

    .checkout-card{
        position:sticky;
        bottom:0;
        z-index:8;
        box-shadow:0 -10px 26px rgba(0,0,0,.10);
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}

@media (prefers-contrast:more){
    .category,
    .menu-card,
    .product-card,
    .voice-status,
    .order-card,
    .checkout-card{
        border-color:#666;
    }
}

/* ===================================================
   PHASE 10G — MANUAL BROWSER PLAYBACK + FIXED MAYA FRAME
   Final overrides intentionally stay at the end of the file.
=================================================== */

:root{
    --maya-frame-height:245px;
}

.maya-card{
    width:100%;
    min-width:0;
    flex:0 0 auto;
}

.maya-video{
    width:100%;
    height:var(--maya-frame-height);
    min-height:var(--maya-frame-height);
    max-height:var(--maya-frame-height);
    flex:0 0 var(--maya-frame-height);
    aspect-ratio:auto;
    margin:10px auto 12px;
    overflow:hidden;
    border-radius:24px;
    background:#fff7e6;
    contain:size layout paint;
}

.maya-avatar,
#maya-video{
    width:100%;
    min-width:100%;
    max-width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    display:block;
    object-fit:contain;
    object-position:center center;
    border-radius:24px;
    background:#fff7e6;
}

body[data-voice-state="idle"] .maya-video,
body[data-voice-state="arming"] .maya-video,
body[data-voice-state="listening"] .maya-video,
body[data-voice-state="recording"] .maya-video,
body[data-voice-state="finalizing"] .maya-video,
body[data-voice-state="thinking"] .maya-video,
body[data-voice-state="speaking"] .maya-video,
body[data-voice-state="rearming"] .maya-video,
body[data-voice-state="error"] .maya-video{
    height:var(--maya-frame-height);
    min-height:var(--maya-frame-height);
    max-height:var(--maya-frame-height);
    flex-basis:var(--maya-frame-height);
}

.voice-status{
    position:relative;
    min-height:56px;
    padding:8px 12px;
    gap:9px;
    border-radius:14px;
}

.voice-status h3{
    font-size:18px;
    line-height:1.08;
}

.voice-status small{
    margin-top:2px;
    font-size:11px;
    line-height:1.22;
}

.status-dot{
    width:11px;
    height:11px;
}

body[data-microphone-locked="true"] .voice-status{
    padding-right:112px;
}

body[data-microphone-locked="true"] .voice-status::after{
    position:absolute;
    right:12px;
    top:50%;
    max-width:96px;
    margin-left:0;
    padding:4px 7px;
    transform:translateY(-50%);
    white-space:normal;
    text-align:center;
    font-size:9px;
}

@media (max-width:1440px) and (min-width:1025px){
    :root{
        --maya-frame-height:clamp(190px,25vh,230px);
    }
}

@media (max-width:1280px) and (min-width:1025px){
    :root{
        --maya-frame-height:220px;
    }
}

@media (max-height:820px) and (min-width:1025px){
    :root{
        --maya-frame-height:185px;
    }
}

@media (max-width:1024px){
    :root{
        --maya-frame-height:220px;
    }
}

@media (max-width:760px){
    :root{
        --maya-frame-height:210px;
    }

    .voice-status{
        min-height:54px;
        padding:8px 11px;
    }

    .voice-status h3{
        font-size:17px;
    }

    body[data-microphone-locked="true"] .voice-status{
        padding-right:12px;
    }
}


/* ===================================================
   PHASE 10G — LONG CPU PROCESSING / PLAYBACK SAFETY
   Transport state only; normal response wording remains backend/model-owned.
=================================================== */

body[data-long-processing="true"] .voice-status{
    border:1px solid rgba(255,152,0,.55);
    box-shadow:0 0 0 4px rgba(255,152,0,.10),0 10px 28px rgba(0,0,0,.08);
}

body[data-long-processing="true"] .voice-status .status-dot{
    background:#FF9800;
    animation:pulse-dot 1.2s infinite;
}

body[data-long-processing="true"] .assistant-caption{
    max-height:110px;
}

body[data-microphone-locked="true"] .voice-status{
    cursor:default;
}

body[data-voice-state="thinking"] .assistant-caption,
body[data-voice-state="speaking"] .assistant-caption{
    scrollbar-gutter:stable;
}

@media (max-height:700px) and (min-width:1025px){
    .right-panel{
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .bottom-section{
        min-height:520px;
    }

    .maya-video{
        position:sticky;
        top:0;
        z-index:2;
    }
}

@media (max-width:760px){
    body[data-long-processing="true"] .assistant-caption{
        max-height:130px;
    }

    .right-panel{
        padding-bottom:max(24px, env(safe-area-inset-bottom));
    }

    .checkout-card{
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
    }
}