/**
 * Eco-Cards Full AI Concierge & Voice Assistant Styling (v2.0.0)
 * All Front-End Designs: Interactive Text Chat, Voice Call Modal & 5 Widget Skins
 */

:root {
    --eco-primary: #10b981;
    --eco-primary-hover: #059669;
}

/*
 * Theme guard. Many themes style every button and input on the page
 * (uppercase text, letter-spacing, minimum heights, shadows). These rules have
 * the same weight as a theme's plain `button {}` rule, so they cancel it, but
 * they're lighter than the widget's own class rules, which still win.
 */
:where(#eco-concierge-root, .eco-voice-btn-wrap, .eco-voice-fab-wrap) button,
:where(#eco-concierge-root, .eco-voice-btn-wrap, .eco-voice-fab-wrap) input,
:where(#eco-concierge-root, .eco-voice-btn-wrap, .eco-voice-fab-wrap) textarea {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
    min-height: 0;
    min-width: 0;
    float: none;
    margin: 0;
    width: auto;
}
:where(#eco-concierge-root) *,
:where(#eco-concierge-root) *::before,
:where(#eco-concierge-root) *::after {
    box-sizing: border-box;
}



/* ==========================================================================
   1. AI CHAT WINDOW (Glassmorphic Dark Mode)
   ========================================================================== */
.eco-chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: calc(100vw - 32px);
    max-width: 380px;
    height: 580px;
    max-height: calc(100vh - 48px);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    z-index: 10000001 !important;
    overflow: hidden;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: ecoPanelIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ecoPanelIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Chat Header */
.eco-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

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

.eco-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eco-primary), var(--eco-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.eco-chat-header-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.eco-chat-header-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #94a3b8;
}

.eco-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.eco-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-chat-voice-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 20px;
    color: #34d399;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.eco-chat-voice-action-btn:hover {
    background: var(--eco-primary);
    color: #ffffff;
    transform: scale(1.03);
}

.eco-chat-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.eco-chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Chat Messages */
.eco-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eco-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
}

.eco-msg-user {
    align-self: flex-end;
}

.eco-msg-user .eco-msg-bubble {
    background: linear-gradient(135deg, var(--eco-primary), var(--eco-primary-hover));
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.eco-msg-bot {
    align-self: flex-start;
}

.eco-msg-bot .eco-msg-bubble {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-radius: 18px 18px 18px 4px;
    padding: 12px 15px;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Quick Suggestion Chips */
.eco-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.eco-chip-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #38bdf8;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.eco-chip-btn:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    transform: translateY(-1px);
}

/* Lead & Booking Badges */
.eco-lead-badge {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.eco-booking-card {
    margin-top: 10px;
}

.eco-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transition: all 0.2s;
}

.eco-booking-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Typing indicator */
.eco-msg-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px !important;
}

.eco-dot {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: ecoTyping 1.4s infinite ease-in-out;
}
.eco-dot:nth-child(1) { animation-delay: 0s; }
.eco-dot:nth-child(2) { animation-delay: 0.2s; }
.eco-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ecoTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Chat Footer Input */
.eco-chat-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.eco-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 25px;
    padding: 10px 16px;
    color: #ffffff;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
}

.eco-chat-input:focus {
    border-color: var(--eco-primary);
    background: rgba(255, 255, 255, 0.12);
}

.eco-chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--eco-primary);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.eco-chat-send-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ==========================================================================
   2. LIVE VOICE CALL MODAL (Glassmorphic)
   ========================================================================== */
.eco-voice-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.eco-voice-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 12, 22, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.eco-voice-modal-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 28px 24px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.65), 0 0 50px rgba(16, 185, 129, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: ecoModalPop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@keyframes ecoModalPop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.eco-voice-ambient-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 180px;
    border-radius: 50%;
    background: var(--eco-primary, #10b981);
    filter: blur(60px);
    opacity: 0.28;
    pointer-events: none;
}

.eco-voice-modal-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.eco-voice-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
}

.eco-voice-pill-dot {
    width: 7px;
    height: 7px;
    background: #06b6d4;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    transition: background 0.3s;
}

.eco-voice-persona-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.eco-voice-avatar-frame {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: #1e293b;
    color: #ffffff;
    transition: all 0.35s ease;
}

.eco-voice-avatar-frame.is-speaking {
    border-color: var(--eco-primary, #10b981);
    box-shadow: 0 0 35px var(--eco-primary, #10b981);
    transform: scale(1.05);
}

.eco-voice-speaking-badge {
    position: absolute;
    bottom: -6px;
    background: #10b981;
    color: #000000;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s ease;
}

.eco-voice-avatar-frame.is-speaking .eco-voice-speaking-badge {
    opacity: 1;
    transform: translateY(0);
}

.eco-voice-name {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 3px;
    color: #ffffff;
}

.eco-voice-title-role {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.eco-voice-visualizer-container {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    position: relative;
    z-index: 2;
}

.eco-voice-call-status {
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.eco-voice-timer {
    font-size: 17px;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.eco-voice-desc {
    font-size: 13px;
    color: #94a3b8;
}

.eco-voice-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.eco-voice-ctrl-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.eco-voice-ctrl-btn:hover { background: rgba(255, 255, 255, 0.16); }

.eco-voice-ctrl-btn.is-active-btn {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.eco-voice-end-btn {
    flex: 1;
    max-width: 150px;
    height: 48px;
    border-radius: 50px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
    transition: all 0.2s;
}

.eco-voice-end-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   3. ELEMENTOR WIDGET SKINS (5 Options)
   ========================================================================== */

/* Skin 1: Modern Pill Button */
.eco-voice-btn-wrap {
    display: inline-block;
    width: 100%;
    margin: 8px 0;
}

.eco-voice-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--eco-primary), var(--eco-primary-hover));
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.eco-voice-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.42);
    filter: brightness(1.06);
}

.eco-voice-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    flex-shrink: 0;
}

.eco-voice-btn-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.eco-voice-btn-text { line-height: 1.25; font-weight: 600; }
.eco-voice-btn-subtext { font-size: 11px; font-weight: 400; opacity: 0.85; margin-top: 2px; }

/* Skin 2: Floating Action Button (FAB) styles defined in 2026 section below */

/* Pulse Radar Animation */
.eco-pulse-glow .eco-voice-trigger-btn,
.eco-pulse-glow .eco-voice-fab-btn,
.eco-pulse-glow .eco-voice-card-btn {
    animation: ecoRadarPulse 2.4s infinite;
}

@keyframes ecoRadarPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
    70% { box-shadow: 0 0 0 16px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Skin 3: Profile Audio Hero Card */
.eco-voice-hero-card {
    background: rgba(18, 24, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 12px 0;
}

.eco-voice-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.eco-voice-hero-badge-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.eco-voice-hero-avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #34d399, var(--eco-primary));
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
}

.eco-voice-hero-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: #ffffff; }
.eco-voice-hero-desc { font-size: 13px; color: #94a3b8; margin: 0 0 18px; line-height: 1.4; }

.eco-voice-hero-actions {
    display: flex;
    gap: 10px;
}

.eco-voice-card-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--eco-primary), var(--eco-primary-hover));
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.eco-voice-card-btn-chat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.eco-voice-card-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Skin 4: Digital Card Contact Row Item */
.eco-voice-row-wrap {
    width: 100%;
    margin: 6px 0;
}

.eco-voice-row-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.eco-voice-row-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.eco-voice-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eco-voice-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eco-voice-row-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.eco-voice-row-title { font-size: 14px; font-weight: 600; color: #ffffff; }
.eco-voice-row-sub { font-size: 12px; color: #94a3b8; }

.eco-voice-row-arrow {
    color: #64748b;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.eco-voice-row-trigger:hover .eco-voice-row-arrow {
    color: #34d399;
    transform: translateX(3px);
}

/* ============================================================================
   Premium redesign — aligned with the ConciergeChat component used on the
   hosted card pages, so the WordPress widget and the card pages read as one
   product rather than two.

   Palette lifted from that component:
     #1b1e2e  panel body        #23273c  header / footer bars
     #24283d  assistant bubble  #161826  inset controls
     #9da3b8  muted text        #f8fafc  primary text
     rgba(255,255,255,.10 / .05)  hairlines

   Appended deliberately: same specificity as the rules above, so later wins,
   and the original file stays intact and diffable underneath.
   ========================================================================= */

.eco-chat-panel {
    background: #1b1e2e;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #f8fafc;
}

/* --- Header ------------------------------------------------------------- */

.eco-chat-header {
    background: #23273c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 13px 16px;
}

.eco-chat-header-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.eco-chat-header-status {
    color: #9da3b8;
    font-size: 12px;
    font-weight: 500;
}

.eco-status-dot,
.eco-dot {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}

.eco-chat-header-avatar,
.eco-chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Header buttons sit in an inset pill, matching the card-page control group. */
.eco-chat-icon-btn,
.eco-chat-btn-voice-call,
.eco-chat-btn-close {
    background: #161826;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: #cbd5e1;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.eco-chat-icon-btn:hover,
.eco-chat-btn-voice-call:hover,
.eco-chat-btn-close:hover {
    background: #2d324d;
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* --- Messages ----------------------------------------------------------- */

.eco-chat-messages {
    background: #1b1e2e;
    padding: 16px;
    gap: 14px;
}

.eco-msg-bot .eco-msg-bubble {
    background: #24283d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px 16px 16px 16px;
    color: #e8ecf6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.55;
}

.eco-msg-user .eco-msg-bubble {
    background: var(--eco-primary, #10b981);
    border-radius: 16px 4px 16px 16px;
    color: #ffffff;
    border: none;
    font-size: 14px;
    line-height: 1.55;
}

.eco-msg-typing span,
.eco-msg-typing i {
    background: #9da3b8;
}

/* --- Quick replies ------------------------------------------------------ */

.eco-chip-btn {
    background: transparent;
    border: 1px solid var(--eco-primary, #10b981);
    color: var(--eco-primary, #10b981);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
}

.eco-chip-btn:hover {
    background: var(--eco-primary, #10b981);
    color: #ffffff;
}

/* --- Composer ----------------------------------------------------------- */

.eco-chat-footer,
.eco-chat-form {
    background: #23273c;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 12px;
}

.eco-chat-input {
    background: #161826;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: #f8fafc;
    font-size: 14px;
    padding: 11px 16px;
}

.eco-chat-input::placeholder { color: #6f7691; }

.eco-chat-input:focus {
    outline: none;
    border-color: var(--eco-primary, #10b981);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eco-primary, #10b981) 18%, transparent);
}

.eco-chat-send-btn,
.eco-chat-submit {
    background: var(--eco-primary, #10b981);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--eco-primary, #10b981) 35%, transparent);
}

/* --- Voice call --------------------------------------------------------- */

.eco-voice-name {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.eco-voice-title-role,
.eco-voice-desc {
    color: #9da3b8;
    font-size: 13px;
}

.eco-voice-timer {
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.eco-voice-ctrl-btn {
    background: #161826;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
    border-radius: 50%;
}

.eco-voice-ctrl-btn:hover {
    background: #2d324d;
    color: #ffffff;
}

.eco-voice-end-btn {
    background: #e11d48;
    border: none;
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.35);
}

.eco-voice-end-btn:hover { background: #be123c; }

/* --- Live transcript ---------------------------------------------------- */

.eco-voice-transcript {
    flex: 1 1 auto;
    min-height: 96px;
    max-height: 210px;
    overflow-y: auto;
    margin: 12px 16px 4px;
    padding: 12px;
    background: #161826;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #373d5d transparent;
}

.eco-voice-transcript::-webkit-scrollbar { width: 5px; }
.eco-voice-transcript::-webkit-scrollbar-thumb {
    background: #373d5d;
    border-radius: 999px;
}

.eco-voice-transcript-empty {
    color: #6f7691;
    font-size: 12px;
    text-align: center;
    padding: 14px 0;
}

.eco-voice-tline {
    display: flex;
    margin-bottom: 9px;
    animation: ecoTLineIn .18s ease-out;
}

.eco-voice-tline:last-child { margin-bottom: 0; }

/* Voice input on the right, AI answers on the left — like a normal chat thread. */
.eco-voice-tline.is-user { justify-content: flex-end; }
.eco-voice-tline.is-ai   { justify-content: flex-start; }

.eco-voice-ttext {
    display: inline-block;
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #e8ecf6;
}

.eco-voice-tline.is-user .eco-voice-ttext {
    background: linear-gradient(135deg, #4f6df5, #7c5cf7);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.eco-voice-tline.is-ai .eco-voice-ttext {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
}

/* Interim speech is still being revised — shown dimmed with a caret so it
   reads as in-progress rather than as something the visitor actually said. */
.eco-voice-tline.is-interim .eco-voice-ttext {
    color: #9da3b8;
    font-style: italic;
}

.eco-voice-tline.is-interim .eco-voice-ttext::after {
    content: '▍';
    margin-left: 2px;
    animation: ecoCaret 1s steps(2) infinite;
}

@keyframes ecoCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@keyframes ecoTLineIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .eco-voice-tline { animation: none; }
    .eco-voice-tline.is-interim .eco-voice-ttext::after { animation: none; }
}

/* --- Header fit --------------------------------------------------------- */
/* On a phone the name and status wrapped onto two lines each, because the
   Voice Call button and close button took the width first. Give the identity
   block the remaining space and let it truncate instead of wrapping. */

.eco-chat-header-info {
    min-width: 0;
    flex: 1 1 auto;
}

.eco-chat-header-name,
.eco-chat-header-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.eco-chat-header-actions {
    flex: 0 0 auto;
    gap: 8px;
}

@media (max-width: 420px) {
    /* Collapse the call button to its icon so the name keeps its line. */
    .eco-chat-btn-voice-call span,
    .eco-chat-btn-voice-call .eco-chat-btn-label {
        display: none;
    }

    .eco-chat-btn-voice-call {
        width: 38px;
        height: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .eco-chat-header { padding: 11px 12px; }
    .eco-chat-header-name { font-size: 14px; }
}

/* ============================================================================
   Floating launcher and popup — matched to the card-page concierge.

   That launcher is a gradient ring around a dark inner disc (#191b2b), lifted
   on a dark drop shadow with an accent glow, wearing a small emerald "online"
   dot. The pill variant adds the assistant's name and status beside the mark.
   ========================================================================= */

.eco-voice-fab-wrap {
    position: fixed !important;
    bottom: max(22px, env(safe-area-inset-bottom, 22px)) !important;
    right: max(20px, env(safe-area-inset-right, 20px)) !important;
    z-index: 999990 !important;
    pointer-events: auto;
    animation: fabFloatBreath 4.5s ease-in-out infinite;
}

/* Ambient Holographic Radar Halo */
.eco-fab-halo {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.15) 50%, transparent 75%) !important;
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    animation: haloPulse 3s ease-in-out infinite;
}

/* 2026 Floating Action Button (Circle by default, expands to pill) */
.eco-voice-fab-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 6px !important;
    min-height: 52px !important;
    width: 52px !important;
    max-width: 52px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 30, 0.94) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-shadow:
        0 12px 35px -6px rgba(16, 185, 129, 0.45),
        0 20px 45px -10px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
    transition: width 0.42s cubic-bezier(.16, 1, .3, 1), max-width 0.42s cubic-bezier(.16, 1, .3, 1), padding 0.42s cubic-bezier(.16, 1, .3, 1), gap 0.35s ease, border-radius 0.42s cubic-bezier(.16, 1, .3, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* Expanded State: Smoothly morphs into high-end pill button */
.eco-voice-fab-wrap.is-expanded .eco-voice-fab-btn,
.eco-voice-fab-wrap:hover .eco-voice-fab-btn {
    width: auto !important;
    max-width: 320px !important;
    padding: 7px 18px 7px 8px !important;
    gap: 12px !important;
    border-radius: 9999px !important;
    justify-content: flex-start !important;
}

.eco-voice-fab-btn:hover {
    transform: translateY(-3px) scale(1.035) !important;
    box-shadow:
        0 16px 42px -4px rgba(16, 185, 129, 0.6),
        0 25px 55px -8px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.eco-voice-fab-btn:active {
    transform: translateY(1px) scale(0.97) !important;
}

/* Shimmer Light Sweep across button surface */
.eco-fab-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    animation: shimmerSweep 4.8s infinite;
}

/* Icon Pod with Obsidian Core & Neon Emerald Ring */
.eco-voice-fab-icon {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, #1e293b, #090d16) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #34D399 !important;
    box-shadow:
        0 0 14px rgba(16, 185, 129, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
    overflow: visible !important;
}

.eco-voice-fab-icon img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.eco-voice-fab-btn:hover .eco-voice-fab-icon {
    transform: scale(1.08) rotate(4deg);
    border-color: #6EE7B7 !important;
    color: #6EE7B7 !important;
}

/* Pulsing Live Beacon Dot & Double Concentric Radar Ripples */
.eco-fab-live-beacon {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #10B981 !important;
    border: 2px solid #090D16 !important;
    box-shadow: 0 0 10px #10B981 !important;
    z-index: 5;
}

.eco-fab-live-beacon::before,
.eco-fab-live-beacon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid #34D399;
    pointer-events: none;
    box-sizing: border-box;
}

.eco-fab-live-beacon::before {
    animation: beaconRipple 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.eco-fab-live-beacon::after {
    animation: beaconRipple 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite 1.1s;
}

/* Typography & Content Block (Slides open smoothly) */
.eco-fab-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
    user-select: none;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: max-width 0.42s cubic-bezier(.16, 1, .3, 1), opacity 0.28s ease !important;
}

.eco-voice-fab-wrap.is-expanded .eco-fab-content-wrap,
.eco-voice-fab-wrap:hover .eco-fab-content-wrap {
    max-width: 260px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.eco-fab-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.eco-fab-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Mini LIVE Pill Badge */
.eco-fab-pill-badge {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 1.5px 5.5px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.eco-fab-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.eco-fab-subtext {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    transition: color 0.2s ease !important;
}

.eco-voice-fab-btn:hover .eco-fab-subtext {
    color: #A7F3D0 !important;
}

/* 4-Bar Animated Sound Equalizer */
.eco-fab-soundwaves {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 12px !important;
}

.eco-eq-bar {
    width: 2.5px !important;
    border-radius: 2px !important;
    background: #34D399 !important;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.8) !important;
    animation: eqWave 1.4s ease-in-out infinite;
}

.eco-eq-bar.bar-1 { height: 4px; animation-delay: 0.0s; }
.eco-eq-bar.bar-2 { height: 9px; animation-delay: 0.25s; }
.eco-eq-bar.bar-3 { height: 12px; animation-delay: 0.45s; }
.eco-eq-bar.bar-4 { height: 6px; animation-delay: 0.15s; }

/* When Chat Panel is Open, smoothly tuck away the FAB button */
body.eco-chat-open .eco-voice-fab-wrap,
.eco-voice-fab-wrap.is-chat-open {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.85) translateY(12px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* Legacy label support */
.eco-voice-fab-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width .42s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}

.eco-voice-fab-wrap.is-expanded .eco-voice-fab-label,
.eco-voice-fab-wrap:hover .eco-voice-fab-label {
    max-width: 260px;
    opacity: 1;
    pointer-events: auto;
}

/* Keyframe Animations */
@keyframes fabFloatBreath {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes haloPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 0.95; }
}

@keyframes beaconRipple {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.8); opacity: 0; }
}

@keyframes eqWave {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1.15); }
}

@keyframes shimmerSweep {
    0% { left: -120%; }
    30%, 100% { left: 140%; }
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .eco-voice-fab-wrap {
        bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
    }
    .eco-voice-fab-wrap.is-expanded .eco-voice-fab-btn,
    .eco-voice-fab-wrap:hover .eco-voice-fab-btn {
        padding: 6px 16px 6px 7px !important;
        min-height: 50px !important;
    }
    .eco-voice-fab-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }
    .eco-fab-title { font-size: 13px !important; }
    .eco-fab-subtext { font-size: 10.5px !important; }
}

/* --- Popup ---------------------------------------------------------------
   Edge to edge on a phone, as the card-page widget does with
   fullScreenMobile, so the conversation gets the whole screen instead of a
   letterboxed card. */

@media (max-width: 640px) {
    .eco-chat-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .eco-chat-header { padding-top: max(13px, env(safe-area-inset-top, 0px)); }
}

@media (min-width: 641px) {
    .eco-chat-panel {
        bottom: max(24px, env(safe-area-inset-bottom, 0px));
        right: max(24px, env(safe-area-inset-right, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .eco-voice-fab-btn::before { animation: none; }
    .eco-voice-fab-btn:hover { transform: none; }
}

/* ============================================================================
   Reference-design pass: segmented Chat/Voice toggle, ring-avatar initials,
   uniform message bubbles, neutral quick-reply chips, two-button composer.
   ========================================================================= */

/* --- Header avatar: colored ring, initials fallback -------------------- */

.eco-chat-header-avatar,
.eco-chat-avatar {
    padding: 2px;
    background: linear-gradient(135deg, var(--eco-primary, #10b981), color-mix(in srgb, var(--eco-primary, #10b981) 45%, #a855f7));
}

.eco-chat-header-avatar > *,
.eco-chat-avatar > * {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191b2b;
}

.eco-chat-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #191b2b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --- Segmented Chat / Voice toggle -------------------------------------- */

.eco-chat-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: #161826;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.eco-chat-mode-seg {
    appearance: none;
    border: none;
    background: transparent;
    color: #9da3b8;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    line-height: 1;
    white-space: nowrap;
}

.eco-chat-mode-seg.is-active {
    background: linear-gradient(135deg, var(--eco-primary, #10b981), color-mix(in srgb, var(--eco-primary, #10b981) 55%, #6366f1));
    color: #ffffff;
    cursor: default;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--eco-primary, #10b981) 40%, transparent);
}

button.eco-chat-mode-seg:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

/* --- Message bubbles: uniform corners, no speaker tail ------------------ */

.eco-msg-bot .eco-msg-bubble {
    border-radius: 16px;
}

.eco-msg-user .eco-msg-bubble {
    border-radius: 16px;
}

/* --- Quick-reply chips: neutral, filled — not accent-outlined ----------- */

.eco-chip-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e6f0;
    font-weight: 500;
}

.eco-chip-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* --- Composer: input, send, and a dedicated voice shortcut -------------- */

.eco-chat-footer {
    gap: 8px;
}

.eco-chat-send-btn,
.eco-chat-voice-shortcut-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.eco-chat-send-btn:hover,
.eco-chat-voice-shortcut-btn:hover { transform: scale(1.06); }
.eco-chat-send-btn:active,
.eco-chat-voice-shortcut-btn:active { transform: scale(0.94); }

.eco-chat-send-btn {
    background: linear-gradient(135deg, var(--eco-primary, #10b981), color-mix(in srgb, var(--eco-primary, #10b981) 55%, #6366f1));
    color: #ffffff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--eco-primary, #10b981) 35%, transparent);
}

/* Distinct accent from the primary send action — reads as "a different kind
   of input" (voice) rather than a second send button. */
.eco-chat-voice-shortcut-btn {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(34, 211, 238, 0.35);
}

/* ============================================================================
   Voice merged into the chat panel: a landing screen and an in-call view,
   switched by the header's Chat/Voice tabs instead of a separate overlay.
   ========================================================================= */

.eco-chat-body-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.eco-chat-body-voice {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Landing (pre-call) -------------------------------------------------- */

.eco-voice-landing {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 6px;
}

.eco-voice-landing-icon {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--eco-primary, #a855f7), #ec4899);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--eco-primary, #a855f7) 35%, transparent);
    margin-bottom: 14px;
}

.eco-voice-landing-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.eco-voice-landing-desc {
    color: #9da3b8;
    font-size: 13px;
    line-height: 1.5;
    max-width: 260px;
    margin: 0 0 18px;
}

.eco-voice-start-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 13px 28px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--eco-primary, #a855f7), #ec4899);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--eco-primary, #a855f7) 40%, transparent);
    transition: transform .15s ease;
}

.eco-voice-start-btn:hover { transform: scale(1.03); }
.eco-voice-start-btn:active { transform: scale(0.97); }

/* --- In-call -------------------------------------------------------------- */

.eco-voice-incall {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 16px;
}

.eco-voice-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
}

.eco-voice-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eco-primary, #a855f7), #ec4899);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--eco-primary, #a855f7) 18%, transparent);
    transition: transform .1s ease-out;
    flex-shrink: 0;
}

.eco-voice-status-dot.is-speaking {
    animation: ecoDotBreathe 1.1s ease-in-out infinite;
}

@keyframes ecoDotBreathe {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--eco-primary, #a855f7) 18%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--eco-primary, #a855f7) 28%, transparent); }
}

.eco-voice-incall .eco-voice-desc {
    text-align: center;
    margin: 0;
}

.eco-voice-incall .eco-voice-timer {
    text-align: center;
    margin: 2px 0 14px;
    font-size: 12px;
}

.eco-voice-transcript-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 6px;
}

.eco-voice-transcript-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f472b6;
}

.eco-voice-copy-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #6f7691;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    transition: color .15s ease, background .15s ease;
}

.eco-voice-copy-btn:hover { color: #cbd5e1; background: rgba(255, 255, 255, 0.06); }
.eco-voice-copy-btn.is-copied { color: #34d399; }

.eco-voice-incall .eco-voice-transcript {
    flex: 1;
    min-height: 60px;
    max-height: none;
    margin: 0 0 14px;
}

.eco-voice-incall .eco-voice-controls { gap: 10px; }

.eco-voice-incall .eco-voice-ctrl-btn {
    width: 44px;
    height: 44px;
}

.eco-voice-incall .eco-voice-end-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    height: 44px;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .eco-voice-landing-icon { width: 84px; height: 84px; }
}

/* --- Theme guard: icon buttons ------------------------------------------
   Themes pad every <button> (eco-cards.com: enough to leave 0 px for the
   close icon and 6 px for the send arrow, so both looked empty). Icon
   buttons carry no text, so they get no padding and their icon never
   shrinks. */
#eco-chat-panel .eco-chat-icon-btn,
#eco-chat-panel .eco-chat-send-btn,
#eco-chat-panel .eco-chat-voice-shortcut-btn {
    padding: 0 !important;
    min-width: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#eco-chat-panel .eco-chat-icon-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

#eco-chat-panel button > svg {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    display: block;
}

#eco-chat-panel .eco-chat-icon-btn > svg { width: 18px !important; height: 18px !important; }
#eco-chat-panel .eco-chat-send-btn > svg,
#eco-chat-panel .eco-chat-voice-shortcut-btn > svg { width: 16px !important; height: 16px !important; }

/* --- Hero card buttons: default hover ----------------------------------
   Scoped under .eco-voice-hero-actions so a theme's generic button:hover
   colours can't replace them. The widget's Style → Hero Buttons settings
   (more specific, {{WRAPPER}}-scoped) still override these. */
.eco-voice-hero-actions .eco-voice-card-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.eco-voice-hero-actions .eco-voice-card-btn-chat:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--eco-primary, #10b981);
    filter: none;
}

/* The lead collector's next question: set apart from the answer above it. */
.eco-chat-question {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    border-left: 3px solid var(--eco-primary, #10b981);
    border-radius: 6px;
    background: color-mix(in srgb, var(--eco-primary, #10b981) 12%, transparent);
    font-weight: 600;
}

/* Hero card: the avatar opens the assistant too. */
.eco-voice-hero-avatar-btn,
.eco-voice-hero-avatar-btn:hover,
.eco-voice-hero-avatar-btn:focus {
    all: unset;
    /* Its own row, centred under the badge, exactly where the icon sat before. */
    display: flex;
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%;
    background: transparent;
}
.eco-voice-hero-avatar-btn:focus-visible { outline: 2px solid var(--eco-primary, #10b981); outline-offset: 4px; }
.eco-voice-hero-avatar-btn .eco-voice-hero-avatar-wrap { transition: transform .15s ease; }
.eco-voice-hero-avatar-btn:hover .eco-voice-hero-avatar-wrap { transform: scale(1.06); }

.eco-voice-hero-clickable { cursor: pointer; }

/* --- Typing reveal (ChatGPT-style) --------------------------------------
   While a reply types out: a blinking cursor after the text, and the chips,
   saved badge and booking button wait until it finishes, then fade in. */
.eco-msg-typing-live .eco-msg-text::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    border-radius: 2px;
    background: currentColor;
    opacity: .75;
    animation: eco-caret 0.9s steps(1) infinite;
}
@keyframes eco-caret { 50% { opacity: 0; } }

.eco-msg-typing-live .eco-quick-chips,
.eco-msg-typing-live .eco-lead-badge,
.eco-msg-typing-live .eco-booking-card { display: none; }

.eco-msg-bot .eco-quick-chips,
.eco-msg-bot .eco-lead-badge,
.eco-msg-bot .eco-booking-card { animation: eco-fade-in .25s ease; }
@keyframes eco-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .eco-msg-typing-live .eco-msg-text::after { animation: none; }
    .eco-msg-bot .eco-quick-chips, .eco-msg-bot .eco-lead-badge, .eco-msg-bot .eco-booking-card { animation: none; }
}