.croute-ai {
    --ai-orange: #ff7a1a;
    --ai-orange-dark: #e95f00;
    --ai-ink: #172033;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1080;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.croute-ai-launcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 19px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--ai-orange), var(--ai-orange-dark));
    box-shadow: 0 14px 34px rgba(184, 69, 0, .32);
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease;
}

.croute-ai-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 38px rgba(184, 69, 0, .4);
}

.croute-ai-launcher i { font-size: 1.25rem; }

.croute-ai-offer {
    position: absolute;
    right: 0;
    bottom: 66px;
    z-index: 1079;
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: min(330px, calc(100vw - 28px));
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(255, 122, 26, .26);
    border-radius: 15px;
    color: var(--ai-ink);
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 27, 45, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.croute-ai-offer.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.croute-ai-offer span { font-size: .78rem; font-weight: 750; line-height: 1.35; }
.croute-ai-offer button { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 9px; color: #647084; background: #f1f3f6; }
.croute-ai-offer button:hover { color: #fff; background: var(--ai-orange); }

.croute-ai-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 28px));
    height: min(610px, calc(100vh - 110px));
    overflow: hidden;
    border: 1px solid rgba(23, 32, 51, .1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 27, 45, .24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.croute-ai.is-open .croute-ai-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.croute-ai-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 17px;
    color: #fff;
    background: linear-gradient(135deg, #202a3e, #121827);
}

.croute-ai-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff9b4e, var(--ai-orange));
}

.croute-ai-header strong,
.croute-ai-header span { display: block; }
.croute-ai-header strong { font-size: .98rem; }
.croute-ai-header span { margin-top: 2px; color: rgba(255,255,255,.7); font-size: .75rem; }

.croute-ai-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.croute-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 15px 12px;
    background: #f6f7fa;
}

.croute-ai-message {
    display: flex;
    margin-bottom: 12px;
}

.croute-ai-message.user { justify-content: flex-end; }

.croute-ai-bubble {
    max-width: 84%;
    padding: 11px 13px;
    border-radius: 15px 15px 15px 5px;
    color: var(--ai-ink);
    background: #fff;
    box-shadow: 0 4px 14px rgba(24, 34, 53, .07);
    font-size: .88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.croute-ai-message.user .croute-ai-bubble {
    border-radius: 15px 15px 5px 15px;
    color: #fff;
    background: var(--ai-orange);
    box-shadow: none;
}

.croute-ai-typing .croute-ai-bubble { color: #7b8493; }

.croute-ai-language-choice { max-width: 100%; }
.croute-ai-language-choice strong { display: block; font-size: .82rem; line-height: 1.5; }
.croute-ai-language-actions { display: flex; gap: 8px; margin-top: 12px; }
.croute-ai-language-actions button { min-width: 58px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255, 122, 26, .35); border-radius: 10px; color: #b64900; background: #fff8f2; font-weight: 850; }
.croute-ai-language-actions button:hover { color: #fff; background: var(--ai-orange); }

.croute-ai-message-link {
    display: inline-flex;
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    background: var(--ai-orange);
    font-weight: 800;
    text-decoration: none;
}

.croute-ai-message-link:hover { color: #fff; background: var(--ai-orange-dark); }

.croute-ai-payment { padding: 13px; border-top: 1px solid #e7eaf0; background: #fff; }
.croute-ai-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.croute-ai-payment-heading strong { color: var(--ai-ink); font-size: .9rem; }
.croute-ai-payment-heading span { color: #376b52; font-size: .72rem; font-weight: 800; }
.croute-ai-payment-summary { margin-bottom: 10px; padding: 9px 10px; border-radius: 11px; color: #4e5968; background: #f6f7f9; font-size: .75rem; line-height: 1.55; white-space: pre-line; }
.croute-ai-card-element { min-height: 44px; padding: 13px 11px; border: 1px solid #dce1e8; border-radius: 12px; background: #fff; }
.croute-ai-card-element.StripeElement--focus { border-color: rgba(255,122,26,.7); box-shadow: 0 0 0 3px rgba(255,122,26,.1); }
.croute-ai-payment-error { min-height: 16px; margin: 7px 1px 0; color: #c62828; font-size: .7rem; }
.croute-ai-payment-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 8px 1px; color: #111827 !important; font-size: .7rem; font-weight: 650; line-height: 1.35; }
.croute-ai-payment-confirm span { color: #111827 !important; }
.croute-ai-payment-confirm input { margin-top: 2px; }
.croute-ai-pay-button { width: 100%; min-height: 44px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg,var(--ai-orange),var(--ai-orange-dark)); font-size: .82rem; font-weight: 850; }
.croute-ai-pay-button:disabled { opacity: .55; cursor: wait; }
.croute-ai-payment small { display: block; margin-top: 7px; color: #8a929d; text-align: center; font-size: .61rem; line-height: 1.35; }

.croute-ai-suggestions {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 12px;
    border-top: 1px solid #edf0f4;
    background: #fff;
}

.croute-ai-suggestions button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255, 122, 26, .3);
    border-radius: 999px;
    color: #b64900;
    background: #fff8f2;
    font-size: .74rem;
    font-weight: 700;
}

.croute-ai-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 11px 12px;
    border-top: 1px solid #edf0f4;
    background: #fff;
}

.croute-ai-form textarea {
    width: 100%;
    max-height: 96px;
    resize: none;
    padding: 10px 12px;
    border: 1px solid #dce1e8;
    border-radius: 13px;
    outline: none;
    color: var(--ai-ink);
    background: #f8f9fb;
    font-size: .88rem;
}

.croute-ai-form textarea:focus {
    border-color: rgba(255, 122, 26, .65);
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .1);
}

.croute-ai-form button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: var(--ai-orange);
}

.croute-ai-form button:disabled { opacity: .55; cursor: wait; }

.croute-ai-form .croute-ai-mic {
    color: var(--ai-orange);
    border: 1px solid rgba(255, 122, 26, .28);
    background: #fff7f1;
}

.croute-ai-form .croute-ai-mic.is-recording {
    color: #fff;
    border-color: #ef4444;
    background: #ef4444;
    animation: croute-ai-mic-pulse 1.2s infinite;
}

@keyframes croute-ai-mic-pulse {
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .16); }
}

.croute-ai-disclaimer {
    margin: 0;
    padding: 0 14px 10px;
    color: #89909c;
    background: #fff;
    text-align: center;
    font-size: .65rem;
}

@media (max-width: 575.98px) {
    .croute-ai {
        right: 14px;
        bottom: calc(86px + env(safe-area-inset-bottom));
    }
    .croute-ai-panel {
        position: fixed;
        inset: 12px;
        width: auto;
        height: auto;
        border-radius: 20px;
    }
    .croute-ai-launcher span { display: none; }
    .croute-ai-launcher {
        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
        padding: 0;
        justify-content: center;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        box-shadow: 0 10px 25px rgba(184, 69, 0, .34);
    }
    .croute-ai-launcher:active { cursor: grabbing; }
    .croute-ai-launcher i { font-size: 1.18rem; pointer-events: none; }
    .croute-ai.is-dragging .croute-ai-launcher { transform: none; box-shadow: 0 14px 30px rgba(184,69,0,.42); }
    .croute-ai-offer { right: 0; bottom: 62px; max-width: min(285px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
    .croute-ai-panel,
    .croute-ai-launcher { transition: none; }
}