/* EasyBot UI system: loaded last to protect existing JS contracts while unifying every view. */
:root {
    --nav-gap: max(12px, env(safe-area-inset-bottom));
    --content-safe-bottom: calc(var(--bottom-nav-height) + var(--nav-gap) + 28px);
    --on-primary: #fff;
    --focus-ring: color-mix(in srgb, var(--primary) 28%, transparent);
    --success-soft: color-mix(in srgb, var(--success) 14%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--warning) 14%, var(--surface));
    --danger-soft: color-mix(in srgb, var(--danger) 14%, var(--surface));
}

html { background: var(--background); }
body { background: var(--page-bg); color: var(--text); }

/* Bootstrap utilities inherit their palette otherwise, which breaks dark mode. */
[data-theme="dark"] .text-muted, [data-theme="dark"] .text-dark { color: var(--text-secondary) !important; }
[data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] .badge.bg-warning.text-dark { color: var(--text-strong) !important; background: var(--warning-soft) !important; }

/* Leave space for the fixed mobile navigation on every kind of page/content. */
@media (max-width: 1023px) {
    .page, .content, .mobile-container, .chat-layout, .chat-page, .main-content, .page-content {
        padding-bottom: var(--content-safe-bottom);
    }
    .chat-page { min-height: 100dvh; height: auto; }
    .chat-body { padding-bottom: 26px; }
    .bottom-nav {
        bottom: var(--nav-gap);
        left: 12px;
        right: 12px;
        width: auto;
        height: var(--bottom-nav-height);
        border-radius: 26px;
        padding-bottom: env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
}

@media (min-width: 1024px) {
    .page, .content, .mobile-container, .chat-layout, .chat-page, .main-content { padding-bottom: 0; }
    .chat-page { min-height: calc(100vh - 156px); height: calc(100vh - 156px); }
}

/* A coherent, accessible interaction language. */
button, .btn, .btn-primary, .btn-secondary, .btn-start, .add-cart, .qty-btn, .family-chip, .question-btn {
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
button:hover:not(:disabled), .btn:hover:not(:disabled), .question-btn:hover:not(:disabled), .family-chip:hover:not(:disabled) { transform: translateY(-2px); }
button:active:not(:disabled), .btn:active:not(:disabled), .question-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
button:disabled, .btn:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary, .btn.btn-primary, .btn-start, .add-cart { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--on-primary); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 26%, transparent); }
.btn-primary:hover, .btn.btn-primary:hover, .btn-start:hover, .add-cart:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }

input, textarea, select, .form-control, .form-select, .input-ui {
    background: var(--surface-strong); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }

/* Cards, alerts, tables and legacy surfaces all receive the same token based finish. */
.card-ui, .option-card, .product-card, .info-card, .selection-card, .history-card, .last-order-card, .profile-card, .stat-box, .action-card, .recent-card, .seller-card, .dashboard-card, .ticket-family, .product-chat-card, .card-mobile, .glass-card {
    background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.card-ui:hover, .option-card:hover, .product-card:hover, .history-card:hover, .dashboard-card:hover, .stat-box:hover, .product-chat-card:hover { box-shadow: var(--shadow-md); }
.option-card a, .product-name, .home-header h2, .drawer-menu a, .selection-card label { color: var(--text); }
.ticket-family, .product-added, .product-image { background: var(--surface-strong); border-color: var(--border); }
.alert { background: var(--surface-strong); color: var(--text); border-color: var(--border); }
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-strong); --bs-table-striped-color: var(--text); }

/* CSS-only role avatars. */
.avatar, .profile-avatar, .avatar-badge { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; color: var(--on-primary); background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); border: 2px solid color-mix(in srgb, var(--on-primary) 42%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent); }
.avatar-admin, .profile-avatar.admin { background: linear-gradient(135deg, var(--admin-dark), var(--admin-light)); color: var(--on-primary); }
.avatar-vendedor { background: linear-gradient(135deg, var(--seller-dark), var(--seller-light)); }
.avatar-cliente { background: linear-gradient(135deg, var(--client-dark), var(--client-light)); }
.avatar-card.avatar { display: grid; place-items: center; font-size: 38px; border-color: color-mix(in srgb, var(--on-primary) 60%, transparent); }

/* Chat behaves like a dedicated assistant workspace without touching its markup/logic. */
.chat-page { background: transparent; gap: 14px; }
.chat-header { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--surface), var(--surface-strong)); box-shadow: var(--shadow-sm); color: var(--text); }
.chat-header small, .chat-status { color: var(--text-secondary); }
.robot { background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); color: var(--on-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent); }
.chat-status { background: var(--success-soft); border-radius: 999px; padding: 7px 10px; font-size: 12px; }
.status-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 20%, transparent); }
.chat-body { background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent); }
.bubble, .bot-message { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 18px 18px 18px 5px; box-shadow: var(--shadow-sm); }
.me-bubble, .user-message { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: var(--on-primary); border: 0; border-radius: 18px 18px 5px 18px; }
.ia-answer { color: var(--text); }
.typing { display: flex; gap: 5px; align-items: center; min-height: 16px; }
.typing span { animation: easybotTyping 1.1s infinite ease-in-out; background: var(--primary); }
.typing span:nth-child(2) { animation-delay: .15s; }.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes easybotTyping { 50% { transform: translateY(-4px); opacity: .45; } }
.ia-panel, .chat-input { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; }
.ia-panel small { color: var(--text-secondary) !important; font-weight: 600; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-top: 10px; }
.question-btn { background: var(--surface-strong); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; font: inherit; text-align: left; }
.question-btn:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.chat-input { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.chat-input .btn { margin: 0 !important; width: auto !important; min-height: 48px; padding-inline: 18px; }
@media (max-width: 520px) { .chat-header { padding: 15px; }.chat-status { font-size: 0; padding: 7px; }.chat-input { grid-template-columns: 1fr; }.chat-input .btn { width: 100% !important; }.quick-grid { grid-template-columns: 1fr 1fr; }.bubble { max-width: 92%; } }

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