/**
 * Eco Disposal Chatbot Styles
 * Standalone CSS — no Tailwind dependency
 * Supports Dark Mode (default) and Light Mode via .eco-chatbot-light-mode class
 */

/* ============================================================
   CSS Variables — Dark Theme (default / brand theme)
   ============================================================ */
:root {
    /* Brand */
    --eco-chatbot-brand:        #16a34a;
    --eco-chatbot-accent:       #22c55e;

    /* Surface / backgrounds */
    --eco-chatbot-surface:      #000000;
    --eco-chatbot-surface-alt:  #021b0f;

    /* Text */
    --eco-chatbot-text-primary:   #e2ffe9;
    --eco-chatbot-text-secondary: #86efac;

    /* Borders */
    --eco-chatbot-border:       #065f46;
    --eco-chatbot-border-light: #047857;

    /* Bot message bubble */
    --eco-chatbot-bubble-bot-bg:   #0d2818;
    --eco-chatbot-bubble-bot-text: #e2ffe9;

    /* Input field text colour */
    --eco-chatbot-input-color: #e2ffe9;

    /* Footer bar */
    --eco-chatbot-footer-bg:    rgba(0, 0, 0, 0.75);
    --eco-chatbot-footer-color: #4ade80;

    /* Result / material cards */
    --eco-chatbot-card-bg:            #0d1f14;
    --eco-chatbot-card-success-bg:    #0d2818;
    --eco-chatbot-card-error-bg:      #2d1212;
    --eco-chatbot-card-success-title: #4ade80;
    --eco-chatbot-card-error-title:   #fca5a5;
    --eco-chatbot-card-text:          #86efac;
    --eco-chatbot-card-text-muted:    #a7f3d0;
    --eco-chatbot-card-funny-bg:      #1a2f0a;
    --eco-chatbot-card-funny-border:  #2d4a1a;
    --eco-chatbot-card-alt-bg:        #0d1f14;

    /* Address card */
    --eco-chatbot-addr-success-grad:   linear-gradient(135deg, #0d2818 0%, #1a3a26 100%);
    --eco-chatbot-addr-error-grad:     linear-gradient(135deg, #2d1212 0%, #3d1c1c 100%);
    --eco-chatbot-addr-success-border: #1a3a26;
    --eco-chatbot-addr-error-border:   #5a1a1a;
    --eco-chatbot-addr-text:           #86efac;
    --eco-chatbot-addr-msg-ok-bg:      rgba(22, 163, 74, 0.15);
    --eco-chatbot-addr-msg-ok-text:    #4ade80;
    --eco-chatbot-addr-msg-err-bg:     rgba(220, 38, 38, 0.15);
    --eco-chatbot-addr-msg-err-text:   #fca5a5;

    /* Order form inputs */
    --eco-chatbot-order-input-bg:     #0a2a18;
    --eco-chatbot-order-error-bg:     #2d1212;
    --eco-chatbot-order-error-border: #b91c1c;
    --eco-chatbot-order-error-text:   #fca5a5;

    /* Hint text (small info inside order form) */
    --eco-chatbot-hint-color: #86efac;

    /* Needs-review card (amber/orange) */
    --eco-chatbot-review-bg:        #1c1300;
    --eco-chatbot-review-border:    #78350f;
    --eco-chatbot-review-title:     #fbbf24;
    --eco-chatbot-review-text:      #fde68a;
    --eco-chatbot-review-icon:      #f59e0b;

    /* Address form panel */
    --eco-chatbot-addr-form-hint:   #86efac;

    /* Confirmation screen */
    --eco-chatbot-conf-bg:          #021b0f;
    --eco-chatbot-conf-step-bg:     #0d2818;
    --eco-chatbot-conf-step-border: #1a3a26;
    --eco-chatbot-conf-title:       #e2ffe9;
    --eco-chatbot-conf-msg:         #86efac;
    --eco-chatbot-conf-step-text:   #a7f3d0;
    --eco-chatbot-conf-call-bg:     #0d1f14;
    --eco-chatbot-conf-call-text:   #e2ffe9;
    --eco-chatbot-conf-call-border: #1a3a26;
}

/* ============================================================
   Light Theme Overrides  (.eco-chatbot-light-mode on the widget)
   ============================================================ */
.eco-chatbot-light-mode {
    --eco-chatbot-surface:      #ffffff;
    --eco-chatbot-surface-alt:  #f9fafb;
    --eco-chatbot-text-primary:   #111827;
    --eco-chatbot-text-secondary: #4b5563;
    --eco-chatbot-border:       #d1fae5;
    --eco-chatbot-border-light: #86efac;

    --eco-chatbot-bubble-bot-bg:   #f3f4f6;
    --eco-chatbot-bubble-bot-text: #111827;
    --eco-chatbot-input-color:     #111827;

    --eco-chatbot-footer-bg:    rgba(240, 253, 244, 0.97);
    --eco-chatbot-footer-color: #15803d;

    --eco-chatbot-card-bg:            #ffffff;
    --eco-chatbot-card-success-bg:    #f0fdf4;
    --eco-chatbot-card-error-bg:      #fef2f2;
    --eco-chatbot-card-success-title: #15803d;
    --eco-chatbot-card-error-title:   #b91c1c;
    --eco-chatbot-card-text:          #374151;
    --eco-chatbot-card-text-muted:    #6b7280;
    --eco-chatbot-card-funny-bg:      #fefce8;
    --eco-chatbot-card-funny-border:  #fef08a;
    --eco-chatbot-card-alt-bg:        #f9fafb;

    --eco-chatbot-addr-success-grad:   linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --eco-chatbot-addr-error-grad:     linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    --eco-chatbot-addr-success-border: #86efac;
    --eco-chatbot-addr-error-border:   #fca5a5;
    --eco-chatbot-addr-text:           #1f2937;
    --eco-chatbot-addr-msg-ok-bg:      rgba(22, 163, 74, 0.10);
    --eco-chatbot-addr-msg-ok-text:    #15803d;
    --eco-chatbot-addr-msg-err-bg:     rgba(220, 38, 38, 0.10);
    --eco-chatbot-addr-msg-err-text:   #b91c1c;

    --eco-chatbot-order-input-bg:     #f3f4f6;
    --eco-chatbot-order-error-bg:     #fef2f2;
    --eco-chatbot-order-error-border: #f87171;
    --eco-chatbot-order-error-text:   #b91c1c;

    --eco-chatbot-hint-color: #15803d;

    --eco-chatbot-review-bg:        #fffbeb;
    --eco-chatbot-review-border:    #fcd34d;
    --eco-chatbot-review-title:     #92400e;
    --eco-chatbot-review-text:      #78350f;
    --eco-chatbot-review-icon:      #d97706;

    --eco-chatbot-addr-form-hint:   #4b5563;

    --eco-chatbot-conf-bg:          #ffffff;
    --eco-chatbot-conf-step-bg:     #f9fafb;
    --eco-chatbot-conf-step-border: #e5e7eb;
    --eco-chatbot-conf-title:       #111827;
    --eco-chatbot-conf-msg:         #4b5563;
    --eco-chatbot-conf-step-text:   #374151;
    --eco-chatbot-conf-call-bg:     #ffffff;
    --eco-chatbot-conf-call-text:   #374151;
    --eco-chatbot-conf-call-border: #d1d5db;
}

/* ============================================================
   Container Reset
   ============================================================ */
#eco-chatbot-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    box-sizing: border-box;
}

#eco-chatbot-container *,
#eco-chatbot-container *::before,
#eco-chatbot-container *::after {
    box-sizing: border-box;
}

#eco-chatbot-container button,
#eco-chatbot-container input {
    font-family: inherit;
}

/* ============================================================
   SVG Icon Protection
   Forces all inline SVG icons to render correctly.
   Prevents WordPress themes/plugins from hiding, collapsing,
   or overriding SVG elements (e.g. themes that use SVG sprite
   sheets with `svg { display:none; overflow:hidden }` globally).
   ============================================================ */
#eco-chatbot-container svg {
    display: inline-block !important;
    visibility: visible !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none;
    flex-shrink: 0;
}

/* ============================================================
   Toggle Button (closed state)
   ============================================================ */
.eco-chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
    color: white;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    z-index: 999999;
    gap: 6px;
    padding: 0 14px;
    width: auto;
    min-width: 56px;
}

.eco-chatbot-toggle:hover {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12), 0 20px 35px -5px rgba(0, 0, 0, 0.35), 0 8px 15px -6px rgba(0, 0, 0, 0.25);
}

.eco-chatbot-toggle:active {
    transform: scale(0.97);
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22), 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
}

.eco-chatbot-toggle svg {
    width: 26px;
    height: 26px;
}

.eco-chatbot-toggle-label {
    display: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   Chat Widget (open state)
   ============================================================ */
.eco-chatbot-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 100%;
    max-width: 390px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--eco-chatbot-border);
    overflow: hidden;
    background-color: var(--eco-chatbot-surface);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes eco-bounce-in {
    0%   { opacity: 0; transform: translateY(30px) scale(0.85); }
    40%  { opacity: 0.9; transform: translateY(-8px) scale(1.05); }
    60%  { transform: translateY(3px) scale(0.97); }
    80%  { transform: translateY(-2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes eco-bounce-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    20%  { opacity: 0.9; transform: translateY(-5px) scale(1.03); }
    100% { opacity: 0; transform: translateY(30px) scale(0.85); }
}

@keyframes eco-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes eco-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eco-chatbot-bounce-in  { animation: eco-bounce-in  0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
.eco-chatbot-bounce-out { animation: eco-bounce-out 0.45s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
.eco-chatbot-spin       { animation: eco-spin 1s linear infinite; }

/* ============================================================
   Header
   ============================================================ */
.eco-chatbot-header {
    padding: 14px 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.eco-chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eco-chatbot-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-color: white;
    padding: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.eco-chatbot-header-text { line-height: 1.3; }

.eco-chatbot-title   { font-weight: 600; font-size: 14px; }
.eco-chatbot-tagline { font-size: 12px; opacity: 0.9; }

.eco-chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Icon buttons in header (dark-mode toggle, close) */
.eco-chatbot-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.eco-chatbot-btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.eco-chatbot-btn-icon:active {
    background-color: rgba(255, 255, 255, 0.45);
    transform: scale(0.92);
}

/* SVG icon sizing inside header buttons (dark mode toggle & close) */
.eco-chatbot-btn-icon svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    stroke: currentColor;
    fill: none;
}

/* ============================================================
   Content Area
   ============================================================ */
.eco-chatbot-content {
    background-color: var(--eco-chatbot-surface);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    transition: background-color 0.3s;
}

/* ============================================================
   Messages
   ============================================================ */
.eco-chatbot-messages {
    flex: 1;
    min-height: 200px;
    max-height: 420px;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--eco-chatbot-surface);
    transition: background-color 0.3s;
}

/* Custom scrollbar */
.eco-chatbot-messages::-webkit-scrollbar       { width: 5px; }
.eco-chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.eco-chatbot-messages::-webkit-scrollbar-thumb {
    background-color: var(--eco-chatbot-border);
    border-radius: 3px;
}

/* ============================================================
   Message Bubbles
   ============================================================ */
.eco-chatbot-bubble-wrapper {
    width: 100%;
    display: flex;
}
.eco-chatbot-bubble-wrapper.eco-chatbot-user { justify-content: flex-end; }
.eco-chatbot-bubble-wrapper.eco-chatbot-bot  { justify-content: flex-start; }

.eco-chatbot-bubble {
    max-width: 85%;
    border-radius: 16px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    word-wrap: break-word;
}

.eco-chatbot-bubble-user {
    background-color: var(--eco-chatbot-brand);
    color: white;
    border-bottom-right-radius: 4px;
}

.eco-chatbot-bubble-bot {
    background-color: var(--eco-chatbot-bubble-bot-bg);
    color: var(--eco-chatbot-bubble-bot-text);
    border: 1px solid var(--eco-chatbot-border);
    border-bottom-left-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* Bubble with uploaded image */
.eco-chatbot-bubble-image {
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.eco-chatbot-bubble-image img {
    max-width: 100%;
    height: auto;
    max-height: 192px;
    object-fit: contain;
    display: block;
}

/* ============================================================
   Typing Indicator
   ============================================================ */
.eco-chatbot-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--eco-chatbot-text-secondary);
    font-size: 12px;
    padding-left: 4px;
}

/* ============================================================
   Quick Replies
   ============================================================ */
.eco-chatbot-quick-replies {
    padding: 10px 16px;
    border-top: 1px solid var(--eco-chatbot-border-light);
    background-color: var(--eco-chatbot-surface);
    overflow-x: hidden;
    overflow-y: visible;
    transition: background-color 0.3s;
}

.eco-chatbot-quick-replies-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    width: 100%;
}

.eco-chatbot-quick-reply {
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid var(--eco-chatbot-border);
    background-color: transparent;
    color: var(--eco-chatbot-text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: normal;
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.eco-chatbot-quick-reply:hover {
    background-color: rgba(22, 163, 74, 0.12);
    color: var(--eco-chatbot-text-primary);
    border-color: var(--eco-chatbot-border-light);
}

.eco-chatbot-quick-reply:active {
    transform: scale(0.96);
}

/* The merged Get Quote & Book button — inline style sets bg/color/border,
   so hover must use filter (not background-color) to be visible */
.eco-chatbot-order-btn {
    font-weight: 600 !important;
    border-color: var(--eco-chatbot-brand) !important;
}

.eco-chatbot-order-btn:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
}

.eco-chatbot-order-btn:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: scale(0.96);
}

/* Quick action visibility hardening (Get Quote & Book, Check Address, etc) */
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-quick-reply,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-quick-reply:hover,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-quick-reply:focus-visible,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-quick-reply:active {
    background-color: var(--eco-chatbot-surface-alt) !important;
    color: var(--eco-chatbot-text-primary) !important;
    border-color: var(--eco-chatbot-border-light) !important;
}

#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-order-btn,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-order-btn:hover,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-order-btn:focus-visible,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-order-btn:active {
    background-color: var(--eco-chatbot-brand) !important;
    color: #ffffff !important;
    border-color: var(--eco-chatbot-brand) !important;
}

#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-quick-reply,
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-quick-reply:hover,
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-quick-reply:focus-visible,
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-quick-reply:active {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Legacy CTA classes (kept for compatibility) */
.eco-chatbot-cta-primary {
    padding: 6px 16px;
    border-radius: 9999px;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.eco-chatbot-cta-primary:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12); }
.eco-chatbot-cta-primary:active { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22); transform: scale(0.96); }

.eco-chatbot-cta-secondary {
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid var(--eco-chatbot-brand);
    background-color: transparent;
    color: var(--eco-chatbot-accent);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.eco-chatbot-cta-secondary:hover {
    background-color: rgba(22, 163, 74, 0.15);
    border-color: var(--eco-chatbot-accent);
}
.eco-chatbot-cta-secondary:active { transform: scale(0.96); }

/* ============================================================
   Input Area
   ============================================================ */
.eco-chatbot-input-area {
    padding: 10px 12px;
    border-top: 1px solid var(--eco-chatbot-border);
    background-color: var(--eco-chatbot-surface);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}

/* Image upload button */
.eco-chatbot-image-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--eco-chatbot-border);
    background-color: transparent;
    color: var(--eco-chatbot-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.eco-chatbot-image-btn:hover {
    background-color: rgba(22, 163, 74, 0.12);
    border-color: var(--eco-chatbot-brand);
    color: var(--eco-chatbot-accent);
}
.eco-chatbot-image-btn:active {
    background-color: rgba(22, 163, 74, 0.2);
    transform: scale(0.93);
}
.eco-chatbot-image-btn svg { width: 16px; height: 16px; }

/* Text input */
.eco-chatbot-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--eco-chatbot-border);
    background-color: var(--eco-chatbot-surface);
    color: var(--eco-chatbot-input-color);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background-color 0.3s, color 0.3s;
}
.eco-chatbot-input::placeholder { color: #4b5563; opacity: 1; }
.eco-chatbot-input:focus        { border-color: var(--eco-chatbot-brand); }

/* Send button — bg set by inline style, so use inset shadow for hover */
.eco-chatbot-send-btn {
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.eco-chatbot-send-btn:hover:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.eco-chatbot-send-btn:active:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: translateY(0) scale(0.97);
}
.eco-chatbot-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Keep Send visible in all themes (defeats aggressive WP/theme button:hover styles) */
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-send-btn,
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-send-btn:hover:not(:disabled),
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-send-btn:focus-visible:not(:disabled),
#eco-chatbot-container .eco-chatbot-widget .eco-chatbot-send-btn:active:not(:disabled),
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-send-btn,
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-send-btn:hover:not(:disabled),
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-send-btn:focus-visible:not(:disabled),
#eco-chatbot-container .eco-chatbot-widget.eco-chatbot-light-mode .eco-chatbot-send-btn:active:not(:disabled) {
    background-color: var(--eco-chatbot-brand) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ============================================================
   Footer
   ============================================================ */
.eco-chatbot-footer {
    padding: 7px 12px;
    background-color: var(--eco-chatbot-footer-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    transition: background-color 0.3s;
}

.eco-chatbot-disclaimer {
    font-size: 10px;
    color: var(--eco-chatbot-footer-color);
}

.eco-chatbot-reset-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--eco-chatbot-footer-color);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.eco-chatbot-reset-btn:hover {
    color: var(--eco-chatbot-text-primary);
    background-color: rgba(148, 163, 184, 0.1);
}
.eco-chatbot-reset-btn:active {
    background-color: rgba(148, 163, 184, 0.18);
}

.eco-chatbot-footer-note {
    padding: 0 12px 10px;
    font-size: 10px;
    color: var(--eco-chatbot-text-secondary);
    background-color: var(--eco-chatbot-surface);
    transition: background-color 0.3s;
}

/* ============================================================
   Responsive — small height screens
   ============================================================ */
@media (max-height: 700px) {
    .eco-chatbot-widget {
        bottom: 12px;
        right: 12px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .eco-chatbot-messages {
        min-height: 150px;
        max-height: 260px;
    }
}

/* ============================================================
   Responsive — mobile width
   ============================================================ */
@media (max-width: 480px) {
    .eco-chatbot-widget {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }
    .eco-chatbot-toggle {
        bottom: 16px;
        right: 16px;
    }
    .eco-chatbot-messages {
        flex: 1;
        min-height: 150px;
        max-height: none;
    }
}

/* ============================================================
   Material Result Cards
   ============================================================ */
.eco-chatbot-result-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid;
    background-color: var(--eco-chatbot-card-bg);
    position: relative;
    margin: 8px 0;
    transition: background-color 0.3s;
}

.eco-chatbot-result-success {
    border-color: #16a34a;
    background-color: var(--eco-chatbot-card-success-bg);
}
.eco-chatbot-result-error {
    border-color: #dc2626;
    background-color: var(--eco-chatbot-card-error-bg);
}

.eco-chatbot-result-icon { flex-shrink: 0; margin-top: 2px; }

.eco-chatbot-result-success .eco-chatbot-result-icon svg { color: #16a34a; }
.eco-chatbot-result-error   .eco-chatbot-result-icon svg { color: #dc2626; }

.eco-chatbot-result-content { flex: 1; min-width: 0; }

.eco-chatbot-result-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.eco-chatbot-result-success .eco-chatbot-result-title { color: var(--eco-chatbot-card-success-title); }
.eco-chatbot-result-error   .eco-chatbot-result-title { color: var(--eco-chatbot-card-error-title);   }

.eco-chatbot-result-material,
.eco-chatbot-result-reason {
    font-size: 13px;
    color: var(--eco-chatbot-card-text);
    margin-bottom: 8px;
    word-wrap: break-word;
}

.eco-chatbot-result-funny {
    font-size: 13px;
    color: var(--eco-chatbot-card-text);
    padding: 8px;
    background-color: var(--eco-chatbot-card-funny-bg);
    border: 1px solid var(--eco-chatbot-card-funny-border);
    border-radius: 6px;
    font-style: italic;
    margin-bottom: 8px;
    transition: background-color 0.3s;
}

.eco-chatbot-result-alternative {
    font-size: 12px;
    color: var(--eco-chatbot-card-text-muted);
    padding: 8px;
    background-color: var(--eco-chatbot-card-alt-bg);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background-color 0.3s;
}

.eco-chatbot-result-message {
    font-size: 13px;
    color: var(--eco-chatbot-card-text);
    margin-bottom: 8px;
}

.eco-chatbot-result-contact {
    font-size: 12px;
    color: var(--eco-chatbot-card-text-muted);
}
.eco-chatbot-result-contact strong { color: var(--eco-chatbot-card-text); }

/* Result card action buttons */
.eco-chatbot-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.eco-chatbot-result-btn {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: box-shadow 0.15s ease, transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
    border: none;
}

/* Primary — bg set by inline style, so use inset shadow for hover */
.eco-chatbot-result-btn-primary { color: #fff !important; }
.eco-chatbot-result-btn-primary:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.eco-chatbot-result-btn-primary:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: translateY(0) scale(0.97);
}

.eco-chatbot-result-btn-secondary {
    background-color: transparent;
    border: 1px solid var(--eco-chatbot-brand);
    color: var(--eco-chatbot-card-success-title);
}
.eco-chatbot-result-btn-secondary:hover {
    background-color: rgba(22, 163, 74, 0.12);
    border-color: var(--eco-chatbot-accent);
}
.eco-chatbot-result-btn-secondary:active {
    background-color: rgba(22, 163, 74, 0.2);
    transform: scale(0.97);
}

.eco-chatbot-result-btn svg { width: 14px; height: 14px; }

/* Dismiss (×) button on result cards — uses currentColor-based alpha for dark/light compat */
.eco-chatbot-result-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--eco-chatbot-card-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.eco-chatbot-result-dismiss:hover {
    background-color: rgba(148, 163, 184, 0.25);
}
.eco-chatbot-result-dismiss:active {
    background-color: rgba(148, 163, 184, 0.35);
    transform: scale(0.9);
}
.eco-chatbot-result-dismiss svg { width: 12px; height: 12px; }

.eco-chatbot-light-mode .eco-chatbot-result-dismiss {
    background-color: rgba(0, 0, 0, 0.06);
}
.eco-chatbot-light-mode .eco-chatbot-result-dismiss:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.eco-chatbot-light-mode .eco-chatbot-result-dismiss:active {
    background-color: rgba(0, 0, 0, 0.18);
}

/* Mobile — result cards */
@media (max-width: 480px) {
    .eco-chatbot-result-card       { padding: 12px; gap: 10px; }
    .eco-chatbot-result-actions    { flex-direction: column; }
    .eco-chatbot-result-btn        { width: 100%; justify-content: center; }
}

/* ============================================================
   Address Check Result Card  (modern card style)
   ============================================================ */
.eco-address-card {
    margin: 10px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    animation: eco-slide-in 0.3s ease-out;
    border: 1px solid;
}

.eco-address-success {
    background: var(--eco-chatbot-addr-success-grad);
    border-color: var(--eco-chatbot-addr-success-border);
}
.eco-address-error {
    background: var(--eco-chatbot-addr-error-grad);
    border-color: var(--eco-chatbot-addr-error-border);
}

.eco-address-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
}

.eco-address-pin {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eco-address-success .eco-address-pin { background: #16a34a; color: white; }
.eco-address-error   .eco-address-pin { background: #dc2626; color: white; }
.eco-address-pin svg { width: 20px; height: 20px; }

.eco-address-status { flex: 1; }

.eco-address-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.eco-address-success .eco-address-badge { background: #16a34a; color: white; }
.eco-address-error   .eco-address-badge { background: #dc2626; color: white; }
.eco-address-badge svg { width: 14px; height: 14px; }

.eco-address-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(148, 163, 184, 0.12);
    color: var(--eco-chatbot-card-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.eco-address-dismiss:hover {
    background: rgba(148, 163, 184, 0.25);
}
.eco-address-dismiss:active {
    background: rgba(148, 163, 184, 0.35);
    transform: scale(0.9);
}
.eco-address-dismiss svg { width: 14px; height: 14px; }

.eco-chatbot-light-mode .eco-address-dismiss {
    background: rgba(0, 0, 0, 0.06);
}
.eco-chatbot-light-mode .eco-address-dismiss:hover {
    background: rgba(0, 0, 0, 0.12);
}
.eco-chatbot-light-mode .eco-address-dismiss:active {
    background: rgba(0, 0, 0, 0.18);
}

.eco-address-body     { padding: 0 16px 16px; }

.eco-address-location {
    font-size: 14px;
    font-weight: 500;
    color: var(--eco-chatbot-addr-text);
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.3s;
}

.eco-address-message {
    font-size: 13px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.eco-address-message-success {
    background: var(--eco-chatbot-addr-msg-ok-bg);
    color: var(--eco-chatbot-addr-msg-ok-text);
}
.eco-address-message-error {
    background: var(--eco-chatbot-addr-msg-err-bg);
    color: var(--eco-chatbot-addr-msg-err-text);
    border: 1px solid rgba(220, 38, 38, 0.24);
}

.eco-address-message-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.eco-address-message-detail + .eco-address-message-detail {
    margin-top: 6px;
}

.eco-address-contact {
    font-size: 12px;
    color: var(--eco-chatbot-card-text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.eco-address-contact a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.eco-address-contact a:hover {
    color: #3b82f6;
    text-decoration: underline;
}
.eco-address-contact a:active {
    color: #1d4ed8;
}

.eco-address-cta { display: flex; gap: 8px; }

.eco-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eco-address-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.eco-address-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* Primary — bg set by inline style, so use inset shadow for hover */
.eco-address-btn-primary { color: #fff !important; }
.eco-address-btn-primary:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.eco-address-btn-primary:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
}
.eco-address-btn-primary svg { width: 16px; height: 16px; }

/* Mobile — address card */
@media (max-width: 480px) {
    .eco-address-card   { margin: 8px 0; border-radius: 12px; }
    .eco-address-header { padding: 10px 12px; }
    .eco-address-body   { padding: 0 12px 12px; }
    .eco-address-pin    { width: 32px; height: 32px; }
    .eco-address-badge  { font-size: 12px; padding: 5px 10px; }
}

/* ============================================================
   Order Form Panel
   ============================================================ */
.eco-chatbot-order-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--eco-chatbot-surface);
    overflow: hidden;
    transition: background-color 0.3s;
}

.eco-chatbot-order-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

/* Cancel (✕) button inside order form header */
.eco-chatbot-cancel-order {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.1s ease !important;
}
.eco-chatbot-cancel-order:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.35) !important;
}
.eco-chatbot-cancel-order:active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.45) !important;
    transform: scale(0.9);
}

.eco-chatbot-order-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eco-chatbot-order-error {
    background: var(--eco-chatbot-order-error-bg);
    border: 1px solid var(--eco-chatbot-order-error-border);
    color: var(--eco-chatbot-order-error-text);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    transition: background-color 0.3s;
}

/* Form rows */
.eco-chatbot-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eco-chatbot-form-row-2col {
    flex-direction: row;
    gap: 10px;
}
.eco-chatbot-form-row-2col > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eco-chatbot-form-row label {
    font-size: 11px;
    color: var(--eco-chatbot-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form inputs / selects */
.eco-order-input {
    background: var(--eco-chatbot-order-input-bg);
    border: 1px solid var(--eco-chatbot-border);
    border-radius: 6px;
    color: var(--eco-chatbot-text-primary);
    font-size: 13px;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.3s, color 0.3s;
}
.eco-order-input:focus {
    outline: none;
    border-color: var(--eco-chatbot-brand);
}
.eco-order-input option {
    background: var(--eco-chatbot-order-input-bg);
    color: var(--eco-chatbot-text-primary);
}

/* Hint text (e.g. "+$15/extra day") */
.eco-chatbot-hint-text {
    font-size: 10px;
    color: var(--eco-chatbot-hint-color);
    line-height: 1.3;
    margin-top: 2px;
    transition: color 0.3s;
}

/* Estimated total */
.eco-chatbot-order-total {
    background: var(--eco-chatbot-order-input-bg);
    border: 1px solid var(--eco-chatbot-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--eco-chatbot-text-secondary);
    text-align: center;
    transition: background-color 0.3s;
}
.eco-chatbot-order-total strong {
    color: var(--eco-chatbot-accent);
    font-size: 18px;
    margin-left: 4px;
}
.eco-chatbot-order-total small {
    display: block;
    font-size: 10px;
    color: var(--eco-chatbot-hint-color);
    margin-top: 2px;
}

/* Submit button — bg set by inline style, so use inset shadow for hover */
.eco-chatbot-submit-order {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 8px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    margin-top: 4px;
}
.eco-chatbot-submit-order:hover:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.eco-chatbot-submit-order:active:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: translateY(0) scale(0.98);
}
.eco-chatbot-submit-order:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stripe note below submit button */
.eco-chatbot-stripe-note {
    font-size: 10px;
    color: var(--eco-chatbot-hint-color);
    text-align: center;
    margin-top: 6px;
    margin-bottom: 0;
    transition: color 0.3s;
}

/* ============================================================
   Order Confirmation Screen
   ============================================================ */
.eco-conf-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px 24px;
    overflow-y: auto;
    flex: 1;
    background: var(--eco-chatbot-conf-bg);
    transition: background-color 0.3s;
}

.eco-conf-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.eco-conf-icon-success   { background: #dcfce7; color: #16a34a; }
.eco-conf-icon-cancelled { background: #fee2e2; color: #dc2626; }

.eco-conf-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--eco-chatbot-conf-title);
    margin: 0 0 10px;
    transition: color 0.3s;
}

.eco-conf-order-badge {
    display: inline-block;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.eco-conf-order-badge-cancelled {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.eco-conf-msg {
    font-size: 13px;
    color: var(--eco-chatbot-conf-msg);
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 280px;
    transition: color 0.3s;
}

.eco-conf-steps {
    background: var(--eco-chatbot-conf-step-bg);
    border: 1px solid var(--eco-chatbot-conf-step-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
    transition: background-color 0.3s;
}

.eco-conf-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--eco-chatbot-conf-step-text);
    padding: 5px 0;
    border-bottom: 1px solid var(--eco-chatbot-conf-step-border);
    transition: color 0.3s;
}
.eco-conf-step:last-child  { border-bottom: none; }
.eco-conf-step-icon        { font-size: 16px; flex-shrink: 0; }

/* Primary action button */
.eco-conf-btn-primary {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: var(--eco-chatbot-brand);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.eco-conf-btn-primary:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.eco-conf-btn-primary:active {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: translateY(0) scale(0.98);
}

/* Call us button */
.eco-conf-btn-call {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--eco-chatbot-conf-call-border);
    border-radius: 8px;
    background: var(--eco-chatbot-conf-call-bg);
    color: var(--eco-chatbot-conf-call-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.3s, transform 0.1s ease;
}
.eco-conf-btn-call:hover {
    background: var(--eco-chatbot-surface-alt);
    border-color: var(--eco-chatbot-border-light);
}
.eco-conf-btn-call:active {
    transform: scale(0.98);
}

/* Secondary / close button */
.eco-conf-btn-secondary {
    background: none;
    border: none;
    color: var(--eco-chatbot-card-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    margin-top: 2px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.eco-conf-btn-secondary:hover {
    color: var(--eco-chatbot-text-primary);
    background-color: rgba(148, 163, 184, 0.1);
}
.eco-conf-btn-secondary:active {
    background-color: rgba(148, 163, 184, 0.18);
}

/* ============================================================
   Address Form Panel  (Feature 4 — dedicated Check My Area form)
   ============================================================ */
.eco-address-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--eco-chatbot-surface);
}

.eco-address-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.eco-address-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.eco-address-form-hint {
    font-size: 13px;
    color: var(--eco-chatbot-addr-form-hint);
    margin: 0 0 14px;
    line-height: 1.5;
}

.eco-address-form-submit {
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    transition: box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.eco-address-form-submit:hover:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.eco-address-form-submit:active:not(:disabled) {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
    transform: translateY(0) scale(0.98);
}
.eco-address-form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Address Map Preview  (OpenStreetMap embed iframe)
   ============================================================ */
.eco-address-map {
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--eco-chatbot-border);
}

.eco-address-map iframe {
    display: block;
    width: 100%;
    height: 140px;
    border: 0;
}

/* ============================================================
   Address Autocomplete Dropdown
   ============================================================ */
.eco-chatbot-form-row-suggest {
    position: relative;
}

.eco-address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--eco-chatbot-surface-alt);
    border: 1px solid var(--eco-chatbot-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.eco-address-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    color: var(--eco-chatbot-text-primary);
    border-bottom: 1px solid var(--eco-chatbot-border);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.eco-address-suggestion-item:last-child {
    border-bottom: none;
}

.eco-address-suggestion-item:hover {
    background-color: rgba(22, 163, 74, 0.08);
    color: var(--eco-chatbot-text-primary);
}

.eco-address-suggestion-item:active {
    background-color: rgba(22, 163, 74, 0.15);
}

/* ============================================================
   Needs-Review Result Card  (Feature 3 — unknown / amber variant)
   ============================================================ */
.eco-chatbot-result-needs-review {
    background: var(--eco-chatbot-review-bg);
    border: 1px solid var(--eco-chatbot-review-border);
    border-left: 4px solid var(--eco-chatbot-review-icon);
}

.eco-chatbot-result-needs-review .eco-chatbot-result-icon {
    font-size: 22px;
    color: var(--eco-chatbot-review-icon);
}

.eco-chatbot-result-needs-review .eco-chatbot-result-title {
    color: var(--eco-chatbot-review-title);
}

.eco-chatbot-result-needs-review .eco-chatbot-result-material {
    color: var(--eco-chatbot-review-title);
    font-weight: 600;
}

.eco-chatbot-result-needs-review .eco-chatbot-result-reason {
    color: var(--eco-chatbot-review-text);
    font-size: 13px;
    line-height: 1.5;
}

.eco-chatbot-result-needs-review .eco-chatbot-result-alternative {
    color: var(--eco-chatbot-review-text);
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.85;
}

@media (min-width: 992px) {
    .eco-chatbot-toggle {
        border-radius: 999px;
    }

    .eco-chatbot-toggle-label {
        display: inline-block;
    }
}

/* ----------------------------------------------------------------
   Order Receipt Card  (inline chat card for order lookup results)
   ---------------------------------------------------------------- */
.eco-order-receipt-card {
    background: var(--eco-chatbot-surface, #0d2818);
    border: 1px solid var(--eco-chatbot-border, #065f46);
    border-radius: 12px;
    overflow: hidden;
    margin: 4px 0 8px;
    max-width: 340px;
    font-size: 13px;
}

.eco-receipt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--eco-chatbot-border, #065f46);
}

.eco-receipt-number {
    font-weight: 700;
    font-size: 14px;
    color: var(--eco-chatbot-text, #e2ffe9);
    letter-spacing: 0.02em;
}

.eco-receipt-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
}

.eco-receipt-rows {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eco-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.eco-receipt-label {
    color: var(--eco-chatbot-muted, #86efac);
    flex-shrink: 0;
    min-width: 90px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eco-receipt-value {
    color: var(--eco-chatbot-text, #e2ffe9);
    text-align: right;
    word-break: break-word;
}

.eco-receipt-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--eco-chatbot-border, #065f46);
}

.eco-chatbot-light-mode .eco-order-receipt-card {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.eco-chatbot-light-mode .eco-receipt-number {
    color: #14532d;
}

.eco-chatbot-light-mode .eco-receipt-label {
    color: #166534;
}

.eco-chatbot-light-mode .eco-receipt-value {
    color: #14532d;
}

.eco-chatbot-light-mode .eco-receipt-header,
.eco-chatbot-light-mode .eco-receipt-footer {
    border-color: #bbf7d0;
}

.eco-chatbot-light-mode .eco-receipt-rows {
    border-color: #bbf7d0;
}

/* ── Customer-check card (new vs. returning) ── */
.eco-customer-check-card {
    background: var(--eco-chatbot-surface, #0a1628);
    border: 1px solid var(--eco-chatbot-accent, #22c55e);
}

.eco-chatbot-light-mode .eco-customer-check-card {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* Receipt-card secondary button — light-mode color overrides */
.eco-chatbot-light-mode .eco-chatbot-result-btn-secondary {
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.eco-chatbot-light-mode .eco-chatbot-result-btn-secondary:hover {
    background: #dcfce7 !important;
}