/* ══════════════════════════════════════════════════════════════
   GLASS-MORPHISM THEME PATCH — v1.0.0
   Matches INPUT-QR v3.0.0 monochromatic design language
   Overrides right-column (chat-section) styles
   Supports [data-theme="light"] and [data-theme="dark"]
   ══════════════════════════════════════════════════════════════ */

/* ── Theme Variables ── */
:root,
[data-theme="light"] {
    --gm-bg:              rgba(255, 255, 255, 0.82);
    --gm-surface:         rgba(0, 0, 0, 0.02);
    --gm-surface-hover:   rgba(0, 0, 0, 0.04);
    --gm-surface-active:  rgba(0, 0, 0, 0.06);
    --gm-border:          rgba(0, 0, 0, 0.06);
    --gm-border-strong:   rgba(0, 0, 0, 0.10);
    --gm-text:            rgba(0, 0, 0, 0.88);
    --gm-text-secondary:  rgba(0, 0, 0, 0.52);
    --gm-text-dim:        rgba(0, 0, 0, 0.32);
    --gm-accent:          rgba(0, 0, 0, 0.85);
    --gm-accent-soft:     rgba(0, 0, 0, 0.06);
    --gm-blur:            blur(24px) saturate(1.2);
    --gm-shadow:          0 1px 3px rgba(0, 0, 0, 0.04),
                          0 4px 16px rgba(0, 0, 0, 0.03);
    --gm-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06),
                          0 12px 40px rgba(0, 0, 0, 0.04);
    --gm-radius:          12px;
    --gm-radius-sm:       8px;
    --gm-ease:            cubic-bezier(0.16, 1, 0.3, 1);
    --gm-input-bg:        rgba(0, 0, 0, 0.03);
    --gm-input-border:    rgba(0, 0, 0, 0.08);
    --gm-input-focus:     rgba(0, 0, 0, 0.14);
    --gm-badge-bg:        rgba(0, 0, 0, 0.85);
    --gm-badge-text:      rgba(255, 255, 255, 0.95);
    --gm-tab-active:      rgba(0, 0, 0, 0.88);
    --gm-tab-inactive:    rgba(0, 0, 0, 0.35);
    --gm-divider:         rgba(0, 0, 0, 0.05);
    --gm-scrollbar-track: rgba(0, 0, 0, 0.03);
    --gm-scrollbar-thumb: rgba(0, 0, 0, 0.12);
    --gm-msg-user-bg:     rgba(0, 0, 0, 0.06);
    --gm-msg-user-text:   rgba(0, 0, 0, 0.85);
    --gm-msg-bot-bg:      rgba(0, 0, 0, 0.02);
    --gm-msg-bot-text:    rgba(0, 0, 0, 0.78);
    --gm-header-bg:       rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] {
    --gm-bg:              rgba(10, 10, 14, 0.82);
    --gm-surface:         rgba(255, 255, 255, 0.04);
    --gm-surface-hover:   rgba(255, 255, 255, 0.07);
    --gm-surface-active:  rgba(255, 255, 255, 0.10);
    --gm-border:          rgba(255, 255, 255, 0.06);
    --gm-border-strong:   rgba(255, 255, 255, 0.10);
    --gm-text:            rgba(255, 255, 255, 0.92);
    --gm-text-secondary:  rgba(255, 255, 255, 0.52);
    --gm-text-dim:        rgba(255, 255, 255, 0.32);
    --gm-accent:          rgba(255, 255, 255, 0.90);
    --gm-accent-soft:     rgba(255, 255, 255, 0.06);
    --gm-blur:            blur(24px) saturate(1.1);
    --gm-shadow:          0 1px 3px rgba(0, 0, 0, 0.20),
                          0 4px 16px rgba(0, 0, 0, 0.15);
    --gm-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.25),
                          0 12px 40px rgba(0, 0, 0, 0.20);
    --gm-radius:          12px;
    --gm-radius-sm:       8px;
    --gm-ease:            cubic-bezier(0.16, 1, 0.3, 1);
    --gm-input-bg:        rgba(255, 255, 255, 0.05);
    --gm-input-border:    rgba(255, 255, 255, 0.08);
    --gm-input-focus:     rgba(255, 255, 255, 0.16);
    --gm-badge-bg:        rgba(255, 255, 255, 0.90);
    --gm-badge-text:      rgba(0, 0, 0, 0.90);
    --gm-tab-active:      rgba(255, 255, 255, 0.92);
    --gm-tab-inactive:    rgba(255, 255, 255, 0.35);
    --gm-divider:         rgba(255, 255, 255, 0.05);
    --gm-scrollbar-track: rgba(255, 255, 255, 0.03);
    --gm-scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --gm-msg-user-bg:     rgba(255, 255, 255, 0.08);
    --gm-msg-user-text:   rgba(255, 255, 255, 0.90);
    --gm-msg-bot-bg:      rgba(255, 255, 255, 0.03);
    --gm-msg-bot-text:    rgba(255, 255, 255, 0.78);
    --gm-header-bg:       rgba(10, 10, 14, 0.72);
}


/* ══════════════════════════════════════════════
   CHAT SECTION — Main Container
   ══════════════════════════════════════════════ */

.chat-section {
    background: var(--gm-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border-left: 1px solid var(--gm-border) !important;
    box-shadow: var(--gm-shadow) !important;
    transition: background 0.3s var(--gm-ease),
                border-color 0.3s var(--gm-ease) !important;
}


/* ══════════════════════════════════════════════
   HEADER — Top Bar + Tabs
   ══════════════════════════════════════════════ */

.chat-header {
    background: var(--gm-header-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border-bottom: 1px solid var(--gm-border) !important;
    box-shadow: none !important;
    transition: all 0.3s var(--gm-ease) !important;
}

/* ── Header Top (3 buttons row) ── */
.header-top {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--gm-divider) !important;
}

.header-top #language-button,
.header-top #settings-button,
.header-top #toggle-button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px 8px !important;
    cursor: pointer !important;
    gap: 6px !important;
    min-width: unset !important;
    max-width: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: var(--gm-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    transition: all 0.2s ease !important;
}

.header-top #language-button:hover,
.header-top #settings-button:hover,
.header-top #toggle-button:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text) !important;
}

.header-top #language-button:active,
.header-top #settings-button:active,
.header-top #toggle-button:active {
    background: var(--gm-surface-active) !important;
}

.header-top #language-button svg,
.header-top #settings-button svg,
.header-top #toggle-button svg,
.header-top #toggle-button i {
    color: var(--gm-text-dim) !important;
    opacity: 0.7;
    transition: opacity 0.2s ease !important;
}

.header-top #language-button:hover svg,
.header-top #settings-button:hover svg,
.header-top #toggle-button:hover svg,
.header-top #toggle-button:hover i {
    opacity: 1;
    color: var(--gm-text-secondary) !important;
}

/* ── Order Summary ── */
.order-summary {
    background: var(--gm-surface) !important;
    border-bottom: 1px solid var(--gm-divider) !important;
    color: var(--gm-text) !important;
}

.order-summary .total-value span {
    color: var(--gm-text) !important;
}

.order-summary .total-amount {
    color: var(--gm-text) !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════
   TABS — Chat / Cart / Receipt / Desk
   ══════════════════════════════════════════════ */

.chat-tabs {
    background: var(--gm-surface) !important;
    border-bottom: 1px solid var(--gm-divider) !important;
    padding: 2px 4px !important;
    gap: 2px !important;
}

.tab-btn {
    background: transparent !important;
    border: none !important;
    border-radius: var(--gm-radius-sm) !important;
    color: var(--gm-tab-inactive) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 8px 12px !important;
    transition: all 0.25s var(--gm-ease) !important;
    cursor: pointer !important;
}

.tab-btn:hover {
    color: var(--gm-text-secondary) !important;
    background: var(--gm-surface-hover) !important;
}

.btn-check:checked + .tab-btn {
    background: var(--gm-accent-soft) !important;
    color: var(--gm-tab-active) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* ── Tab Badge ── */
.tab-badge {
    background: var(--gm-badge-bg) !important;
    color: var(--gm-badge-text) !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}


/* ══════════════════════════════════════════════
   CHAT CONTENT — Messages Area
   ══════════════════════════════════════════════ */

.chat-content {
    background: transparent !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--gm-scrollbar-thumb) var(--gm-scrollbar-track) !important;
}

.chat-content::-webkit-scrollbar {
    width: 5px !important;
}

.chat-content::-webkit-scrollbar-track {
    background: var(--gm-scrollbar-track) !important;
}

.chat-content::-webkit-scrollbar-thumb {
    background: var(--gm-scrollbar-thumb) !important;
    border-radius: 10px !important;
}

.chat-content::-webkit-scrollbar-thumb:hover {
    background: var(--gm-text-dim) !important;
}

/* ── Message Bubbles ── */
.message-bubble.user-message {
    background: var(--gm-msg-user-bg) !important;
    color: var(--gm-msg-user-text) !important;
    border: 1px solid var(--gm-border) !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.message-bubble:not(.user-message) {
    background: var(--gm-msg-bot-bg) !important;
    color: var(--gm-msg-bot-text) !important;
    border: 1px solid var(--gm-border) !important;
    border-radius: 14px 14px 14px 4px !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Timestamp ── */
.message-time {
    color: var(--gm-text-dim) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    font-family: 'SF Mono', ui-monospace, monospace !important;
}


/* ══════════════════════════════════════════════
   CART + RECEIPT + DESK CONTENT
   ══════════════════════════════════════════════ */

.cart-content,
.receipt-content,
.desk-content {
    background: transparent !important;
    color: var(--gm-text) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--gm-scrollbar-thumb) var(--gm-scrollbar-track) !important;
}

.cart-content::-webkit-scrollbar,
.receipt-content::-webkit-scrollbar,
.desk-content::-webkit-scrollbar {
    width: 5px !important;
}

.cart-content::-webkit-scrollbar-thumb,
.receipt-content::-webkit-scrollbar-thumb,
.desk-content::-webkit-scrollbar-thumb {
    background: var(--gm-scrollbar-thumb) !important;
    border-radius: 10px !important;
}

/* ── Empty States ── */
.empty-receipt-message,
.empty-desk-message {
    color: var(--gm-text-dim) !important;
}

.empty-receipt-message i,
.empty-desk-message i {
    color: var(--gm-text-dim) !important;
    opacity: 0.5 !important;
}

.empty-receipt-message h5,
.empty-desk-message h5 {
    color: var(--gm-text-secondary) !important;
}

.empty-receipt-message p,
.empty-desk-message p {
    color: var(--gm-text-dim) !important;
}


/* ══════════════════════════════════════════════
   ALERT SECTION
   ══════════════════════════════════════════════ */

.alert-section {
    background: var(--gm-surface) !important;
    border-top: 1px solid var(--gm-divider) !important;
    border-bottom: 1px solid var(--gm-divider) !important;
}

.alert-content {
    color: var(--gm-text-secondary) !important;
    font-size: 12px !important;
}

.alert-content i {
    color: var(--gm-text-dim) !important;
}


/* ══════════════════════════════════════════════
   MESSAGE INPUT — Bottom Bar
   ══════════════════════════════════════════════ */

.message-input-area {
    background: var(--gm-header-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border-top: 1px solid var(--gm-border) !important;
    padding: 10px 12px !important;
}

.message-input-area .input-group {
    background: transparent !important;
    border-radius: var(--gm-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--gm-input-border) !important;
    transition: border-color 0.2s ease !important;
}

.message-input-area .input-group:focus-within {
    border-color: var(--gm-input-focus) !important;
}

.message-input-area .message-input {
    background: var(--gm-input-bg) !important;
    border: none !important;
    color: var(--gm-text) !important;
    font-size: 13.5px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    outline: none !important;
}

.message-input-area .message-input::placeholder {
    color: var(--gm-text-dim) !important;
    font-weight: 400 !important;
}

.message-input-area .keyboard-icon-btn {
    background: var(--gm-input-bg) !important;
    border: none !important;
    color: var(--gm-text-dim) !important;
    transition: all 0.2s ease !important;
    padding: 10px 12px !important;
}

.message-input-area .keyboard-icon-btn:hover {
    color: var(--gm-text-secondary) !important;
    background: var(--gm-surface-hover) !important;
}

.message-input-area .send-btn {
    background: var(--gm-accent) !important;
    color: var(--gm-badge-text) !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 10px 18px !important;
    transition: all 0.2s ease !important;
}

.message-input-area .send-btn:hover {
    opacity: 0.85 !important;
}


/* ══════════════════════════════════════════════
   SETTINGS DROPDOWN
   ══════════════════════════════════════════════ */

#settings-dropdown {
    background: var(--gm-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border: 1px solid var(--gm-border-strong) !important;
    border-radius: var(--gm-radius) !important;
    box-shadow: var(--gm-shadow-elevated) !important;
}

#settings-dropdown button {
    color: var(--gm-text-secondary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    transition: all 0.15s ease !important;
}

#settings-dropdown button:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text) !important;
}

#settings-dropdown button svg {
    color: var(--gm-text-dim) !important;
    opacity: 0.65;
}

#settings-dropdown button:hover svg {
    opacity: 1;
}

/* ── Accordion Headers ── */
.accordion-section > button {
    color: var(--gm-text-dim) !important;
}

.accordion-section > button:hover {
    color: var(--gm-text-secondary) !important;
}

/* ── Toggle Badges (ON/OFF) ── */
#settings-dropdown span[id$="-status"] {
    font-family: 'SF Mono', ui-monospace, monospace !important;
    letter-spacing: 0.04em !important;
}


/* ══════════════════════════════════════════════
   LANGUAGE DROPDOWN
   ══════════════════════════════════════════════ */

.language-dropdown-menu {
    background: var(--gm-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border: 1px solid var(--gm-border-strong) !important;
    border-radius: var(--gm-radius-sm) !important;
    box-shadow: var(--gm-shadow-elevated) !important;
}

.language-option {
    color: var(--gm-text-secondary) !important;
    transition: all 0.15s ease !important;
}

.language-option:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text) !important;
}

.language-option.selected {
    color: var(--gm-text) !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════
   FLOATING ELEMENTS
   ══════════════════════════════════════════════ */

.floating-toggle {
    background: var(--gm-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border: 1px solid var(--gm-border-strong) !important;
    color: var(--gm-text-secondary) !important;
    box-shadow: var(--gm-shadow) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s var(--gm-ease) !important;
}

.floating-toggle:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text) !important;
    box-shadow: var(--gm-shadow-elevated) !important;
}

#floating-keyboard-btn {
    background: var(--gm-bg) !important;
    backdrop-filter: var(--gm-blur) !important;
    -webkit-backdrop-filter: var(--gm-blur) !important;
    border: 1px solid var(--gm-border-strong) !important;
    color: var(--gm-text-secondary) !important;
    box-shadow: var(--gm-shadow) !important;
    transition: all 0.25s var(--gm-ease) !important;
}

#floating-keyboard-btn:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text) !important;
}


/* ══════════════════════════════════════════════
   SUBTLE ANIMATIONS
   ══════════════════════════════════════════════ */

@keyframes gm-fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-section {
    animation: gm-fadeIn 0.4s var(--gm-ease) !important;
}
/* ── Nuclear tab override — kill the green ── */
.chat-tabs .tab-btn,
.chat-tabs label.tab-btn,
input.btn-check:checked + label.tab-btn,
input#chatOption:checked + label.tab-btn,
input#cartOption:checked + label.tab-btn,
input#receiptOption:checked + label.tab-btn,
input#deskOption:checked + label.tab-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--gm-tab-inactive) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    border-radius: var(--gm-radius-sm) !important;
    padding: 8px 12px !important;
    transition: all 0.25s var(--gm-ease) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

input.btn-check:checked + label.tab-btn,
input#chatOption:checked + label.tab-btn,
input#cartOption:checked + label.tab-btn,
input#receiptOption:checked + label.tab-btn,
input#deskOption:checked + label.tab-btn {
    background: var(--gm-accent-soft) !important;
    color: var(--gm-tab-active) !important;
    font-weight: 600 !important;
}

.chat-tabs .tab-btn:hover,
.chat-tabs label.tab-btn:hover {
    background: var(--gm-surface-hover) !important;
    color: var(--gm-text-secondary) !important;
}

.chat-tabs .tab-btn i,
.chat-tabs label.tab-btn i {
    color: inherit !important;
}
/* ── Tab icons + text — stronger contrast ── */
.chat-tabs .tab-btn i,
.chat-tabs label.tab-btn i,
input.btn-check:checked + label.tab-btn i {
    color: inherit !important;
    font-size: 15px !important;
}

/* Active tab — bold black text + icon */
input.btn-check:checked + label.tab-btn,
input#chatOption:checked + label.tab-btn,
input#cartOption:checked + label.tab-btn,
input#receiptOption:checked + label.tab-btn,
input#deskOption:checked + label.tab-btn {
    background: var(--gm-accent-soft) !important;
    color: var(--gm-text) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--gm-accent) !important;
    border-radius: 0 !important;
    padding-bottom: 6px !important;
}

/* Inactive tabs — visible but subdued */
.chat-tabs .tab-btn,
.chat-tabs label.tab-btn {
    color: var(--gm-text-secondary) !important;
    font-weight: 500 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-bottom: 6px !important;
}

.chat-tabs .tab-btn:hover,
.chat-tabs label.tab-btn:hover {
    color: var(--gm-text) !important;
    background: var(--gm-surface-hover) !important;
}
/* Active tab — solid black pill with white text */
input.btn-check:checked + label.tab-btn,
input#chatOption:checked + label.tab-btn,
input#cartOption:checked + label.tab-btn,
input#receiptOption:checked + label.tab-btn,
input#deskOption:checked + label.tab-btn {
    background: var(--gm-accent) !important;
    color: var(--gm-badge-text) !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: var(--gm-radius-sm) !important;
    padding: 8px 12px !important;
}

input.btn-check:checked + label.tab-btn i {
    color: var(--gm-badge-text) !important;
}
/* ══════════════════════════════════════════════
   TABS — Proper tab-bar style
   ══════════════════════════════════════════════ */

.chat-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--gm-divider) !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

.chat-tabs .tab-btn,
.chat-tabs label.tab-btn,
input.btn-check + label.tab-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--gm-text-dim) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.chat-tabs .tab-btn i,
.chat-tabs label.tab-btn i {
    color: inherit !important;
    font-size: 14px !important;
}

.chat-tabs .tab-btn:hover,
.chat-tabs label.tab-btn:hover {
    color: var(--gm-text-secondary) !important;
    background: var(--gm-surface-hover) !important;
}

/* Active tab — underline accent */
input.btn-check:checked + label.tab-btn,
input#chatOption:checked + label.tab-btn,
input#cartOption:checked + label.tab-btn,
input#receiptOption:checked + label.tab-btn,
input#deskOption:checked + label.tab-btn {
    color: var(--gm-text) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--gm-accent) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

input.btn-check:checked + label.tab-btn i {
    color: var(--gm-text) !important;
}

/* Badge */
.tab-badge {
    background: var(--gm-badge-bg) !important;
    color: var(--gm-badge-text) !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* ── Order Summary — Clean, minimal ── */
.order-summary {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--gm-divider) !important;
}

.order-summary .total-value {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.order-summary .total-value span:first-child {
    color: var(--gm-text-dim) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.order-summary .total-amount {
    color: var(--gm-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* ══════════════════════════════════════════════════════════════
   LAYOUT OVERRIDES — Header buttons + Tabs + Order Summary
   Must load AFTER style.css and glass-morphism-patch.css
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   HEADER TOP — 3 buttons full width
   ══════════════════════════════════════════════ */

.header-top {
    padding: 0 !important;
    margin: 0 !important;
}

.header-top #language-button,
.header-top #settings-button,
.header-top #toggle-button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px 8px !important;
    cursor: pointer !important;
    gap: 6px !important;
    min-width: unset !important;
    max-width: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: var(--gm-text-secondary, rgba(0,0,0,0.52)) !important;
    transition: all 0.2s ease !important;
}

.header-top #language-button:hover,
.header-top #settings-button:hover,
.header-top #toggle-button:hover {
    background: var(--gm-surface-hover, rgba(0,0,0,0.04)) !important;
    color: var(--gm-text, rgba(0,0,0,0.88)) !important;
}

.header-top #language-button svg,
.header-top #settings-button svg,
.header-top #toggle-button svg,
.header-top #toggle-button i {
    color: inherit !important;
}


/* ══════════════════════════════════════════════
   TABS — Full-width flat tab bar
   ══════════════════════════════════════════════ */

.chat-tabs {
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid var(--gm-divider, rgba(0,0,0,0.05)) !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* All tabs — base state */
.chat-tabs .tab-btn,
.chat-tabs label.tab-btn,
.chat-tabs input.btn-check + label.tab-btn,
.chat-tabs input#chatOption + label.tab-btn,
.chat-tabs input#cartOption + label.tab-btn,
.chat-tabs input#receiptOption + label.tab-btn,
.chat-tabs input#deskOption + label.tab-btn {
    flex: 1 1 0% !important;
    width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--gm-text-dim, rgba(0,0,0,0.32)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 11px 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: unset !important;
    max-height: unset !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Tab icons */
.chat-tabs .tab-btn i,
.chat-tabs label.tab-btn i {
    color: inherit !important;
    font-size: 14px !important;
}

/* Hover */
.chat-tabs .tab-btn:hover,
.chat-tabs label.tab-btn:hover {
    color: var(--gm-text-secondary, rgba(0,0,0,0.52)) !important;
    background: var(--gm-surface-hover, rgba(0,0,0,0.04)) !important;
}

/* Active tab — underline */
.chat-tabs input.btn-check:checked + label.tab-btn,
.chat-tabs input#chatOption:checked + label.tab-btn,
.chat-tabs input#cartOption:checked + label.tab-btn,
.chat-tabs input#receiptOption:checked + label.tab-btn,
.chat-tabs input#deskOption:checked + label.tab-btn {
    color: var(--gm-text, rgba(0,0,0,0.88)) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--gm-accent, rgba(0,0,0,0.85)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.chat-tabs input.btn-check:checked + label.tab-btn i {
    color: var(--gm-text, rgba(0,0,0,0.88)) !important;
}

/* Badge */
.chat-tabs .tab-badge {
    background: var(--gm-badge-bg, rgba(0,0,0,0.85)) !important;
    color: var(--gm-badge-text, rgba(255,255,255,0.95)) !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}


/* ══════════════════════════════════════════════
   ORDER SUMMARY — Clean, borderless
   ══════════════════════════════════════════════ */

.order-summary {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--gm-divider, rgba(0,0,0,0.05)) !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    margin: 0 !important;
}

.order-summary .total-value {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.order-summary .total-value span,
.order-summary .total-value span:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--gm-text-dim, rgba(0,0,0,0.32)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.order-summary .total-amount,
.order-summary span.total-amount,
.order-summary #cartTotalValue {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--gm-text, rgba(0,0,0,0.88)) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* ══════════════════════════════════════════════════════════════
   FIX PATCH — Tabs full-width + Cart total visibility
   Append to the VERY END of glass-morphism-patch.css
   or load as a separate stylesheet AFTER it.
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Tabs full-width ──────────────────────────────────
   The .chat-tabs div is a flex container with BOTH hidden
   <input> radios AND <label> buttons as direct children.
   We must ensure hidden inputs don't consume flex space
   and labels share the remaining width equally.
   ──────────────────────────────────────────────────────────── */

.chat-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

/* Kill radio inputs as flex participants */
.chat-tabs > input[type="radio"],
.chat-tabs > input.btn-check,
.chat-tabs > #chatOption,
.chat-tabs > #cartOption,
.chat-tabs > #receiptOption,
.chat-tabs > #deskOption {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0px !important;
    min-width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Labels = the visible tabs → equal width */
.chat-tabs > label.tab-btn,
.chat-tabs > .tab-btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--gm-text-dim, rgba(0, 0, 0, 0.32)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Hover */
.chat-tabs > label.tab-btn:hover {
    color: var(--gm-text-secondary, rgba(0, 0, 0, 0.52)) !important;
    background: var(--gm-surface-hover, rgba(0, 0, 0, 0.04)) !important;
}

/* Active tab — underline */
.chat-tabs > input[type="radio"]:checked + label.tab-btn,
#chatOption:checked + label.tab-btn,
#cartOption:checked + label.tab-btn,
#receiptOption:checked + label.tab-btn,
#deskOption:checked + label.tab-btn {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--gm-accent, rgba(0, 0, 0, 0.85)) !important;
    background: transparent !important;
}

/* Active tab icons */
.chat-tabs > input[type="radio"]:checked + label.tab-btn i {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
}

/* Tab icons inherit colour */
.chat-tabs > label.tab-btn i {
    color: inherit !important;
    font-size: 14px !important;
}

/* Badge inside tab */
.chat-tabs .tab-badge {
    background: var(--gm-badge-bg, rgba(0, 0, 0, 0.85)) !important;
    color: var(--gm-badge-text, rgba(255, 255, 255, 0.95)) !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}


/* ── FIX 2: Cart total value visibility ────────────────────── */

#cartTotalValue,
.total-amount,
span.total-amount,
.order-summary .total-amount,
.order-summary #cartTotalValue {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#headerCartTotal {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
/* ══════════════════════════════════════════════════════════════
   NUCLEAR FIX — Tabs full-width + Cart total visibility
   Load this AFTER ALL other stylesheets (style.css AND
   glass-morphism-patch.css), or paste at the very end of
   your HTML inside a <style> tag.
   ══════════════════════════════════════════════════════════════ */

/* ── The tab bar container ── */
.chat-section .chat-tabs,
.chat-section div.chat-tabs,
div.chat-tabs,
.chat-tabs.chat-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--gm-divider, rgba(0,0,0,0.05)) !important;
    background: transparent !important;
}

/* ── HIDE radio inputs — sr-only technique ── */
.chat-tabs input,
.chat-tabs input[type="radio"],
.chat-tabs input.btn-check,
.chat-tabs .btn-check {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex: none !important;
}

/* ── ALL tab labels — EQUAL width ──
   This must beat style.css's:
     .chat-tabs .tab-btn { flex: 0 1 auto; min-width: fit-content; }
   We double the class + use !important to guarantee the win.
   ─────────────────────────────────────────── */
.chat-tabs.chat-tabs label.tab-btn,
.chat-tabs.chat-tabs .tab-btn,
.chat-section .chat-tabs label.tab-btn,
.chat-section .chat-tabs .tab-btn,
div.chat-tabs label.tab-btn,
div.chat-tabs .tab-btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--gm-text-dim, rgba(0, 0, 0, 0.32)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    cursor: pointer !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
    float: none !important;
    position: static !important;
}

/* ── Hover ── */
.chat-tabs.chat-tabs label.tab-btn:hover,
.chat-section .chat-tabs label.tab-btn:hover {
    color: var(--gm-text-secondary, rgba(0, 0, 0, 0.52)) !important;
    background: var(--gm-surface-hover, rgba(0, 0, 0, 0.04)) !important;
}

/* ── Active / checked tab ── */
.chat-tabs input:checked + label.tab-btn,
.chat-tabs input[type="radio"]:checked + label.tab-btn,
.chat-tabs .btn-check:checked + .tab-btn,
#chatOption:checked + label,
#cartOption:checked + label,
#receiptOption:checked + label,
#deskOption:checked + label {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--gm-accent, rgba(0, 0, 0, 0.85)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Active tab icons ── */
.chat-tabs input:checked + label.tab-btn i {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
}

/* ── Tab icons ── */
.chat-tabs label.tab-btn i {
    color: inherit !important;
    font-size: 14px !important;
}

/* ── Badge ── */
.chat-tabs.chat-tabs .tab-badge,
.chat-section .chat-tabs .tab-badge {
    background: var(--gm-badge-bg, rgba(0, 0, 0, 0.85)) !important;
    color: var(--gm-badge-text, rgba(255, 255, 255, 0.95)) !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1.5 !important;
    flex: none !important;
}


/* ── Cart total value visibility ── */
#cartTotalValue,
.total-amount,
span.total-amount,
.order-summary .total-amount,
.order-summary #cartTotalValue {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#headerCartTotal {
    color: var(--gm-text, rgba(0, 0, 0, 0.88)) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
#page-loading-screen {
    background: #f5f5f5 !important;
}

#page-loading-screen * {
    color: #333 !important;
}

#page-loading-screen .spinner-border,
#page-loading-screen .spinner,
#page-loading-screen [class*="spinner"],
#page-loading-screen [class*="loader"],
#page-loading-screen div[style*="border"] {
    border-color: rgba(0,0,0,0.15) !important;
    border-top-color: #333 !important;
}