/* ─── MYSEAK Chat Widget ─────────────────────────────────────────── */

:root {
    --seak-primary: #6366f1;
    --seak-bg: #ffffff;
    --seak-bg-msg: #f3f4f6;
    --seak-text: #1f2937;
    --seak-text-light: #6b7280;
    --seak-radius: 16px;
    --seak-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* ─── Toggle Button ───────────────────────────────────────── */
#seak-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--seak-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    box-shadow: var(--seak-shadow);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.2s ease;
}

#seak-toggle:hover,
#seak-toggle:focus,
#seak-toggle:active {
    transform: scale(1.1);
    background: var(--seak-primary) !important;
    opacity: 1 !important;
    filter: brightness(1.2);
}

/* Breathing animation — subtle organic pulse, smooth fade-out */
#seak-toggle.seak-breathing {
    animation: seak-breathe 4s ease-in-out infinite;
}
#seak-toggle.seak-glow-fading {
    animation: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}
#seak-toggle.seak-glow-fading .seak-glow-ring {
    opacity: 0 !important;
    transition: opacity 0.8s ease-out;
}

@keyframes seak-breathe {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.08) rotate(-2deg); }
    60%      { transform: scale(0.95) rotate(1deg); }
    80%      { transform: scale(1.03); }
}

/* Stop breathing on hover to not fight with hover transform */
#seak-toggle.seak-breathing:hover {
    animation: none;
    transform: scale(1.1);
}

#seak-toggle svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ─── Chat Container (Desktop) ────────────────────────────── */
#seak-chat {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 380px;
    max-height: 520px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: none;
    border-radius: var(--seak-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    z-index: 99999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: var(--seak-text);
}

#seak-chat.open {
    display: flex;
}


/* ─── Header ──────────────────────────────────────────────── */
.seak-header {
    background: color-mix(in srgb, var(--seak-primary) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ─── Online indicator (animated green dot) ─── */
.seak-header-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
/* Solid core */
.seak-header-dot::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: #4ade80;
    border-radius: 50%;
    z-index: 1;
    animation: seak-dot-glow 3s ease-in-out infinite;
}
/* Expanding ping ring */
.seak-header-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
    animation: seak-dot-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes seak-dot-ping {
    0%       { transform: scale(1);   opacity: 0.6; }
    50%, 100% { transform: scale(2.2); opacity: 0; }
}
@keyframes seak-dot-glow {
    0%, 100% { opacity: 0.85; filter: brightness(1); }
    50%      { opacity: 1;    filter: brightness(1.3); }
}

.seak-header-title {
    font-weight: 600;
    font-size: 15px;
    flex-grow: 1;
}

.seak-header-branding {
    display: flex;
    align-items: center;
    gap: 6px;
}

.seak-header-ai-label {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.seak-header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.seak-header-logo-link:hover {
    opacity: 0.85;
    text-decoration: none;
}
.seak-header-logo {
    height: 15px;
    width: auto;
    color: #fff;
    flex-shrink: 0;
}

.seak-header-new {
    background: none !important;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.seak-header-new:hover {
    opacity: 1;
    transform: scale(1.1);
}

.seak-header-close {
    background: none !important;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}

.seak-header-close:hover {
    opacity: 1;
}

/* ─── Messages Area ───────────────────────────────────────── */
.seak-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 350px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.3);
}

.seak-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.seak-msg-bot {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.seak-msg-user {
    background: color-mix(in srgb, var(--seak-primary) 75%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* Sources */
.seak-sources {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: var(--seak-text-light);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.seak-sources-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--seak-text-light);
    margin-right: 2px;
    flex-shrink: 0;
}

.seak-sources a {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--seak-primary) 10%, transparent);
    color: var(--seak-primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    word-break: break-word;
}

.seak-sources a:hover {
    background: color-mix(in srgb, var(--seak-primary) 20%, transparent);
    text-decoration: none;
}

.seak-source-text {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}

/* ── Cartes produit avec image ───────────────────── */
.seak-product-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.seak-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.2s;
}

.seak-product-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
}

.seak-product-card-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}
.seak-product-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    object-fit: unset;
}

.seak-product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.seak-product-card-link:hover {
    text-decoration: none;
}

.seak-product-card-title {
    padding: 6px 8px 2px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.seak-product-card-footer {
    padding: 2px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.seak-product-card-price {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
}

.seak-product-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 5px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--seak-primary, #6366f1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    line-height: 1.2;
}
.seak-product-cart-btn:hover {
    opacity: 0.85;
}
.seak-product-cart-btn:disabled {
    cursor: default;
    opacity: 0.7;
}
.seak-product-cart-btn.seak-cart-btn-success {
    background: #16a34a;
    opacity: 1;
}

.seak-cart-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: seak-spin 0.6s linear infinite;
}
@keyframes seak-spin {
    to { transform: rotate(360deg); }
}

.seak-msg-bot a {
    color: var(--seak-primary);
    text-decoration: none;
    font-weight: 700;
    word-break: break-all;
}

.seak-msg-bot a:hover {
    text-decoration: underline;
}

/* Typing indicator */
.seak-typing {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 14px;
    align-self: flex-start;
}

.seak-typing span {
    width: 8px;
    height: 8px;
    background: #d1d5db;
    border-radius: 50%;
    animation: seak-bounce 1.2s infinite;
}

.seak-typing span:nth-child(2) { animation-delay: 0.2s; }
.seak-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes seak-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* ─── Input Area ──────────────────────────────────────────── */
.seak-input-area {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.seak-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 9px;
}

/* Organic highlight ring (hidden until focus) — dual layer + breathing */
.seak-input-wrap::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 10px;
    background:
        conic-gradient(
            from var(--seak-glow-angle),
            transparent 0%,
            color-mix(in srgb, var(--seak-primary) 60%, #818cf8) 12%,
            var(--seak-primary) 20%,
            color-mix(in srgb, var(--seak-primary) 55%, #f59e0b) 28%,
            transparent 40%
        ),
        conic-gradient(
            from var(--seak-glow-angle2),
            transparent 0%,
            color-mix(in srgb, var(--seak-primary) 40%, #a78bfa) 10%,
            transparent 25%,
            color-mix(in srgb, var(--seak-primary) 35%, #f472b6) 50%,
            transparent 65%
        );
    opacity: 0;
    z-index: 0;
    transition: opacity 0.4s ease;
    animation:
        seak-glow-rotate 4s ease-in-out infinite,
        seak-glow-rotate2 7s linear infinite reverse;
}

.seak-input-wrap.seak-input-focused::before {
    opacity: 1;
    animation:
        seak-glow-rotate 4s ease-in-out infinite,
        seak-glow-rotate2 7s linear infinite reverse,
        seak-input-breathe 3s ease-in-out infinite;
}

/* Mask intérieur pour ne garder que le contour */
.seak-input-wrap::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.seak-input-wrap.seak-input-focused::after {
    opacity: 1;
}

.seak-input-area input {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    min-width: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s;
}

.seak-input-area input:focus {
    background: transparent;
}

.seak-input-area button {
    background: color-mix(in srgb, var(--seak-primary) 80%, transparent) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    opacity: 1 !important;
    transition: filter 0.15s, background 0.15s;
    flex-shrink: 0;
}

.seak-input-area button:hover,
.seak-input-area button:focus {
    background: var(--seak-primary) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: brightness(1.25);
}

.seak-input-area button:active {
    filter: brightness(0.9);
}

.seak-input-area button:disabled {
    background: color-mix(in srgb, var(--seak-primary) 50%, #fff) !important;
    cursor: not-allowed;
    filter: none;
}



/* ─── Status Text (under typing dots) ────────────────────── */
.seak-status-text {
    width: 100%;
    font-size: 11px;
    color: var(--seak-text-light);
    margin-top: 2px;
    font-style: italic;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes seak-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── Suggestion Bubbles — clean white pills ─────────────── */
#seak-suggestions-wrap {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 99997;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.seak-suggestion-pill {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--seak-text);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 10px 20px;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    /* Start: invisible, small, positioned low (near toggle) */
    opacity: 0;
    transform: translateY(20px) scale(0.3);
    transition: box-shadow 0.25s ease,
                border-color 0.25s ease;
}

/* Entry: pills pop in with a gentle bounce */
.seak-suggestion-pill.seak-pill-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: seak-pill-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes seak-pill-pop-in {
    0%   { opacity: 0; transform: translateY(12px) scale(0.6); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Exit: pills retract back toward toggle */
.seak-suggestion-pill.seak-pill-exit {
    animation: seak-pill-retract 0.35s ease-in forwards;
}

@keyframes seak-pill-retract {
    0%   { opacity: 1; transform: translateY(0)    scale(1); }
    100% { opacity: 0; transform: translateY(30px) scale(0.2); }
}

.seak-suggestion-pill:hover {
    border-color: color-mix(in srgb, var(--seak-primary) 50%, #e5e7eb);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--seak-primary) 15%, transparent);
    transform: translateY(0) scale(1.04);
}

/* ─── Mobile — shared styles ─────────────────────────────── */

@media (max-width: 600px) {
    /* Messages area scrollable */
    #seak-chat .seak-messages {
        flex: 1;
        max-height: none;
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #seak-chat .seak-msg {
        max-width: 90%;
    }

    /* 16px prevents iOS auto-zoom on focus */
    #seak-chat .seak-input-area input {
        font-size: 16px;
    }

    #seak-chat .seak-input-area {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    #seak-suggestions-wrap {
        right: 16px;
        bottom: 88px;
    }

    .seak-suggestion-pill {
        font-size: 12.5px;
        max-width: 240px;
        padding: 8px 14px;
    }
}

/* ─── Mobile mode: popup (superposé) ─────────────────────── */
@media (max-width: 600px) {
    #seak-chat.seak-mobile-popup {
        right: 12px;
        bottom: 92px;
        width: calc(100vw - 24px);
        max-width: 380px;
        max-height: 70vh;
        border-radius: var(--seak-radius);
        overscroll-behavior: none;
    }
}

/* ─── Mobile mode: fullscreen (with glassmorphism) ───────── */
@media (max-width: 600px) {
    #seak-chat.seak-mobile-fullscreen {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: none;
        border-radius: 0;
        z-index: 999999;
        overscroll-behavior: none;
        /* Glassmorphism preserved in fullscreen */
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(32px) saturate(1.6);
        -webkit-backdrop-filter: blur(32px) saturate(1.6);
    }
}

/* ─── Form Confirmation Buttons (hardened against WP themes) ─── */
#seak-chat .seak-form-confirm {
    align-self: flex-start !important;
    max-width: 90% !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

#seak-chat .seak-booking-recap {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
#seak-chat .seak-recap-line {
    font-size: 12px !important;
    color: var(--seak-text, #1f2937) !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#seak-chat .seak-recap-line:first-child {
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 2px !important;
}

#seak-chat .seak-form-confirm-actions {
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    border: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#seak-chat .seak-form-btn {
    flex: 1 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: filter 0.15s !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: auto !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#seak-chat .seak-form-btn-confirm {
    background: var(--seak-primary, #6366f1) !important;
    color: #ffffff !important;
}

#seak-chat .seak-form-btn-confirm:hover,
#seak-chat .seak-form-btn-confirm:focus {
    background: var(--seak-primary, #6366f1) !important;
    color: #ffffff !important;
    filter: brightness(1.15) !important;
}

#seak-chat .seak-form-btn-cancel {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

#seak-chat .seak-form-btn-cancel:hover,
#seak-chat .seak-form-btn-cancel:focus {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

/* ─── Booking Success Card ─────────────────────────────────── */
#seak-chat .seak-booking-success {
    align-self: flex-start !important;
    max-width: 90% !important;
    margin: 6px 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1px solid #6ee7b7 !important;
    border-radius: var(--seak-radius, 16px) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #065f46 !important;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#seak-chat .seak-booking-success.seak-booking-success-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#seak-chat .seak-booking-check {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
}

/* ─── Category Pick Buttons ────────────────────────────────── */
#seak-chat .seak-category-pick {
    align-self: flex-start !important;
    max-width: 90% !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-category-pick-btn {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-text, #1f2937) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
#seak-chat .seak-category-pick-btn:hover,
#seak-chat .seak-category-pick-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}
#seak-chat .seak-cp-name {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--seak-primary, #6366f1) !important;
    line-height: 1.3 !important;
}
#seak-chat .seak-cp-meta {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* ─── Service Pick Cards (rich: name + duration + price) ──── */
#seak-chat .seak-service-pick {
    align-self: flex-start !important;
    max-width: 90% !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-service-pick-btn {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-text, #1f2937) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
#seak-chat .seak-service-pick-btn:hover,
#seak-chat .seak-service-pick-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}
#seak-chat .seak-other-services-btn {
    border-style: dashed !important;
    border-color: color-mix(in srgb, var(--seak-primary, #6366f1) 50%, transparent) !important;
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 3%, #fff) !important;
    margin-top: 4px !important;
}
#seak-chat .seak-other-services-btn .seak-sp-name {
    font-weight: 500 !important;
    font-size: 12px !important;
    color: color-mix(in srgb, var(--seak-primary, #6366f1) 70%, #333) !important;
}
#seak-chat .seak-other-services-btn .seak-sp-meta {
    font-size: 11px !important;
    color: #9ca3af !important;
}
#seak-chat .seak-other-services-btn:hover,
#seak-chat .seak-other-services-btn:focus {
    border-color: var(--seak-primary, #6366f1) !important;
    border-style: solid !important;
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
}
#seak-chat .seak-sp-name {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--seak-primary, #6366f1) !important;
    line-height: 1.3 !important;
}
#seak-chat .seak-sp-meta {
    font-size: 11px !important;
    color: var(--seak-text-light, #6b7280) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* ─── Location Pick (reuses service pick pattern) ────────── */
#seak-chat .seak-location-pick {
    align-self: flex-start !important;
    max-width: 90% !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-location-pick-btn {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-text, #1f2937) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
#seak-chat .seak-location-pick-btn:hover,
#seak-chat .seak-location-pick-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}
#seak-chat .seak-lp-name {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--seak-primary, #6366f1) !important;
    line-height: 1.3 !important;
}
#seak-chat .seak-lp-meta {
    font-size: 11px !important;
    color: var(--seak-text-light, #6b7280) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* ─── Agent Pick (reuses service pick pattern) ───────────── */
#seak-chat .seak-agent-pick {
    align-self: flex-start !important;
    max-width: 90% !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-agent-pick-btn {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-text, #1f2937) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
#seak-chat .seak-agent-pick-btn:hover,
#seak-chat .seak-agent-pick-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}
#seak-chat .seak-ap-name {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--seak-primary, #6366f1) !important;
    line-height: 1.3 !important;
}
#seak-chat .seak-ap-meta {
    font-size: 11px !important;
    color: var(--seak-text-light, #6b7280) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* ─── Reschedule Suggestion Button ─────────────────────────── */
#seak-chat .seak-reschedule-suggest {
    align-self: flex-start !important;
    margin: 2px 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-reschedule-suggest-btn {
    padding: 5px 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-primary, #6366f1) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}
#seak-chat .seak-reschedule-suggest-btn:hover,
#seak-chat .seak-reschedule-suggest-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}

/* ─── Contact Suggestion Button ────────────────────────────── */
#seak-chat .seak-contact-suggest {
    align-self: flex-start !important;
    margin: 2px 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#seak-chat .seak-contact-suggest-btn {
    padding: 5px 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--seak-primary, #6366f1) !important;
    background: #fff !important;
    color: var(--seak-primary, #6366f1) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}
#seak-chat .seak-contact-suggest-btn:hover,
#seak-chat .seak-contact-suggest-btn:focus {
    background: color-mix(in srgb, var(--seak-primary, #6366f1) 8%, #fff) !important;
    border-color: var(--seak-primary, #6366f1) !important;
}

/* ─── Cart Confirmation Recap ─────────────────────────────── */
#seak-chat .seak-cart-recap {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#seak-chat .seak-cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#seak-chat .seak-cart-item-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}
#seak-chat .seak-cart-item-info {
    min-width: 0 !important;
    flex: 1 !important;
}
#seak-chat .seak-cart-item-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--seak-text, #1f2937) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#seak-chat .seak-cart-item-meta {
    font-size: 11px !important;
    color: var(--seak-text-light, #6b7280) !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
}
#seak-chat .seak-cart-link {
    display: inline-block !important;
    margin-top: 8px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background: #065f46 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: filter 0.15s !important;
}
#seak-chat .seak-cart-link:hover {
    filter: brightness(1.2) !important;
    text-decoration: none !important;
}

/* ─── Living Glow Orb on Toggle ──────────────────────────── */
#seak-toggle {
    overflow: visible !important;
}

#seak-toggle .seak-glow-ring {
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: conic-gradient(
        from var(--seak-glow-angle, 0deg),
        color-mix(in srgb, var(--seak-primary) 75%, #fb923c),
        color-mix(in srgb, var(--seak-primary) 40%, #f59e0b),
        var(--seak-primary),
        color-mix(in srgb, var(--seak-primary) 50%, #a78bfa),
        color-mix(in srgb, var(--seak-primary) 25%, #f472b6),
        color-mix(in srgb, var(--seak-primary) 45%, #818cf8),
        var(--seak-primary),
        color-mix(in srgb, var(--seak-primary) 40%, #f59e0b),
        color-mix(in srgb, var(--seak-primary) 75%, #fb923c)
    );
    opacity: 0;
    filter: blur(7px) brightness(1.1);
    transform: scale(0.95);
    transition: opacity 0.6s ease;
    animation: seak-glow-rotate 5s linear infinite;
}

/* Diffuse outer halo */
#seak-toggle .seak-glow-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: inherit;
    filter: blur(16px) brightness(1.05);
    opacity: 0.4;
    transform: scale(0.95);
}

/* Active state: glow visible with gentle organic breathing */
#seak-toggle.seak-glow-active .seak-glow-ring {
    opacity: 0.35;
    animation: seak-glow-rotate 5s linear infinite,
               seak-glow-breathe 6s ease-in-out infinite;
}

@keyframes seak-glow-breathe {
    0%, 100% { opacity: 0.28; transform: scale(0.96); filter: blur(7px)  brightness(1.08); }
    50%      { opacity: 0.38; transform: scale(1.02); filter: blur(8px)  brightness(1.15); }
}

@property --seak-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --seak-glow-angle2 {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes seak-glow-rotate {
    0%   { --seak-glow-angle: 0deg; }
    33%  { --seak-glow-angle: 140deg; }
    66%  { --seak-glow-angle: 240deg; }
    100% { --seak-glow-angle: 360deg; }
}
@keyframes seak-glow-rotate2 {
    from { --seak-glow-angle2: 0deg; }
    to   { --seak-glow-angle2: 360deg; }
}
@keyframes seak-input-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ─── Proactive Bubble / Pill (mobile only) ──────────────── */
.seak-proactive-bubble {
    position: fixed;
    bottom: 92px;
    right: 20px;
    left: 20px;
    max-width: 380px;
    margin-left: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 12px 20px;
    /* Start hidden – animated in via seak-pill-pop-in */
    opacity: 0;
    transform: translateY(12px) scale(0.6);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seak-proactive-bubble.seak-bubble-visible {
    pointer-events: auto;
    animation: seak-pill-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.seak-bubble-content {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--seak-text);
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
}

.seak-bubble-close {
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    color: var(--seak-text-light) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 0 0 4px !important;
    margin: 0 !important;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.seak-bubble-close:hover {
    opacity: 1;
}

/* ─── Hide widget in Elementor editor & maintenance mode ──── */
body.elementor-editor-active #seak-chat-root,
body.elementor-editor-preview #seak-chat-root,
body.elementor-maintenance-mode #seak-chat-root {
    display: none !important;
}
/* Also hide suggestion pills on maintenance/editor pages */
body.elementor-editor-active #seak-suggestions-wrap,
body.elementor-editor-preview #seak-suggestions-wrap,
body.elementor-maintenance-mode #seak-suggestions-wrap {
    display: none !important;
}



