/* ── ZooTuristo AI Chat Widget ──────────────────────────────────────── */

:root {
    --cw-gold:       #d4af37;
    --cw-gold2:      #f3e5ab;
    --cw-nav-bg:     rgba(33, 37, 41, 0.95);
    --cw-chat-bg:    #f4f2fb;
    --cw-radius:     20px;
    --cw-shadow:     0 24px 64px rgba(0,0,0,.38), 0 4px 20px rgba(212,175,55,.12);
    --cw-text-dark:  #1a1028;
    --cw-muted:      rgba(100, 90, 130, .75);
}

/* ── Trigger button ─────────────────────────────────────────── */
#cw-trigger {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgb(33, 37, 41);
    box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 2px rgba(212,175,55,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
#cw-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 36px rgba(0,0,0,.5), 0 0 0 3px rgba(212,175,55,.5);
}
#cw-trigger:active { transform: scale(.95); }

#cw-trigger .cw-icon-open,
#cw-trigger .cw-icon-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, transform .25s;
}
#cw-trigger .cw-icon-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
#cw-trigger.is-open .cw-icon-open  { opacity: 0; transform: rotate(90deg) scale(.7); }
#cw-trigger.is-open .cw-icon-close { opacity: 1; transform: rotate(0) scale(1); }

/* ── Shimmering gold question mark ── */
.cw-q-mark {
    font-size: 34px;
    font-weight: 900;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    background: linear-gradient(90deg,
        #7a5800 0%, #d4af37 20%, #fff8dc 40%,
        #f3e5ab 50%, #fff8dc 60%, #d4af37 80%, #7a5800 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cw-shimmer 2.2s linear infinite;
    display: block;
}
@keyframes cw-shimmer {
    0%   { background-position: 0%   center; }
    100% { background-position: 250% center; }
}

/* Pulse ring when idle */
@keyframes cw-pulse {
    0%   { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0px  rgba(212,175,55,.6); }
    70%  { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 12px rgba(212,175,55,0);  }
    100% { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0px  rgba(212,175,55,0);  }
}
#cw-trigger:not(.is-open) { animation: cw-pulse 2.6s ease-out infinite; }

/* Unread badge */
#cw-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(0);
    transition: .2s cubic-bezier(.34,1.56,.64,1);
}
#cw-badge.visible { opacity: 1; transform: scale(1); }

/* ── Chat panel ─────────────────────────────────────────────── */
#cw-panel {
    position: fixed;
    bottom: 104px;
    right: 28px;
    z-index: 9999;
    width: 390px;
    max-width: calc(100vw - 24px);
    height: 580px;
    max-height: calc(100vh - 130px);
    background: var(--cw-chat-bg);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(.97);
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
    font-family: "Inter", "Urbanist", system-ui, sans-serif;
}
#cw-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Header — matches site nav bar ─────────────────────────── */
#cw-header {
    background: var(--cw-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#cw-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,.45);
    overflow: hidden;
    flex-shrink: 0;
    background: #2d0f5e;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
#cw-header-info { flex: 1; min-width: 0; }
#cw-header-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
}
#cw-header-status {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
#cw-header-status::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,.8);
    flex-shrink: 0;
}
#cw-close-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,.75);
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
#cw-close-btn:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* ── Messages area ──────────────────────────────────────────── */
#cw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: var(--cw-chat-bg);
}
#cw-messages::-webkit-scrollbar { width: 4px; }
#cw-messages::-webkit-scrollbar-thumb {
    background: rgba(100,80,160,.18);
    border-radius: 4px;
}

.cw-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
    animation: cw-msgIn .22s ease-out;
}
@keyframes cw-msgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cw-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.cw-msg.bot  { align-self: flex-start; }

.cw-msg-mini-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    overflow: hidden;
    background: #2d0f5e;
}
.cw-msg-mini-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.cw-msg.user .cw-msg-mini-avatar { display: none; }

/* ── Bubbles ─────────────────────────────────────────────────── */
.cw-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

/* User bubble: white with border + 3D shadow */
.cw-msg.user .cw-bubble {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.09);
    box-shadow:
        0 2px 6px rgba(0,0,0,.10),
        0 6px 18px rgba(0,0,0,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
    color: var(--cw-text-dark);
    font-weight: 500;
    border-bottom-right-radius: 4px;
}

/* Bot bubble: white with gold glow shadow */
.cw-msg.bot .cw-bubble {
    background: #ffffff;
    border: 1px solid rgba(212,175,55,.2);
    box-shadow:
        0 2px 8px rgba(212,175,55,.18),
        0 6px 20px rgba(212,175,55,.10);
    color: var(--cw-text-dark);
    border-bottom-left-radius: 4px;
}

/* ── Typing indicator ───────────────────────────────────────── */
#cw-typing {
    display: none;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
}
#cw-typing .cw-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
}
#cw-typing .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cw-gold);
    animation: cw-dotBounce 1.2s ease-in-out infinite;
}
#cw-typing .dot:nth-child(2) { animation-delay: .2s; }
#cw-typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes cw-dotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .5; }
    40%           { transform: translateY(-7px); opacity: 1; }
}

/* ── Input area — grid layout for perfect alignment ─────────── */
#cw-footer {
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.07);
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}

#cw-input {
    flex: 1;
    min-width: 0;
    display: block;
    background: #f8f6ff;
    border: 1px solid rgba(100,80,160,.2);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 22px;
    color: var(--cw-text-dark);
    outline: none;
    resize: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    height: 44px;
    min-height: 44px;
    max-height: 110px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
}
#cw-input::placeholder { color: var(--cw-muted); }
#cw-input:focus {
    border-color: rgba(212,175,55,.55);
    box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}

/* ── Send button: Telegram-style with gold shimmer ─────────── */
#cw-send {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s;
    background: transparent;
    box-shadow: 0 4px 14px rgba(212,175,55,.35);
    padding: 0;
    box-sizing: border-box;
}
#cw-send::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        #7a5800 0%, #c9a42f 20%, #f3e5ab 40%,
        #ffd700 50%, #f3e5ab 60%, #c9a42f 80%, #7a5800 100%
    );
    background-size: 250% 100%;
    animation: cw-btn-shimmer 2.4s linear infinite;
    border-radius: 12px;
}
@keyframes cw-btn-shimmer {
    0%   { background-position: 0%   center; }
    100% { background-position: 250% center; }
}
#cw-send svg {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    color: #1a0a00;
}
#cw-send:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(212,175,55,.5);
}
#cw-send:active:not(:disabled) { transform: scale(.97); }
#cw-send:disabled { opacity: .4; cursor: not-allowed; }

/* ── Lead submitted banner ──────────────────────────────────── */
#cw-lead-banner {
    display: none;
    background: linear-gradient(90deg,rgba(74,222,128,.1),rgba(74,222,128,.05));
    border-top: 1px solid rgba(74,222,128,.3);
    padding: 10px 14px;
    font-size: 12px;
    color: #166534;
    text-align: center;
    font-weight: 600;
    flex-shrink: 0;
}
#cw-lead-banner.show { display: block; }

/* ── Consent notice ─────────────────────────────────────────── */
#cw-consent-bar {
    padding: 7px 14px;
    font-size: 11px;
    color: var(--cw-muted);
    text-align: center;
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
    flex-shrink: 0;
    line-height: 1.5;
}
#cw-consent-bar a { color: rgba(180,130,0,.8); text-decoration: none; }
#cw-consent-bar a:hover { color: var(--cw-gold); text-decoration: underline; }

/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 480px) {
    #cw-panel {
        bottom: 0; right: 0; left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: var(--cw-radius) var(--cw-radius) 0 0;
        height: 82vh;
        max-height: 82vh;
    }
    /* Hide floating trigger on mobile when panel is open — close via header × */
    #cw-trigger.is-open { display: none; }
    #cw-trigger { bottom: 20px; right: 20px; }
}