/* ─────────────────────────────────────────
   ROOT COLORS
───────────────────────────────────────── */
:root{
    --wc-gold: #7F6000;
    --wc-gold-light: #B78A00;
    --wc-gold-soft: #E8D6A3;
    --wc-bg: #FFFCF6;
    --wc-bg-soft: #FFF8EB;
    --wc-border: #F1E6C8;
    --wc-text: #2A2A2A;
    --wc-muted: #9B927F;
    --wc-shadow:
        0 18px 40px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.04);
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* ─────────────────────────────────────────
   LAUNCHER
───────────────────────────────────────── */
#wc-launcher{
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
    z-index: 9999;
}

#wc-launcher svg{
    width:50px;
    height:50px;
}

/* ─────────────────────────────────────────
   CHAT WINDOW
───────────────────────────────────────── */
#wc-window{
    position:fixed;
    right:28px;
    bottom:102px;

    width:370px;
    max-width:calc(100vw - 24px);

    border-radius:24px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    background:
        linear-gradient(
            to bottom,
            #FFFFFF 0%,
            #FFFDF8 100%
        );

    border:1px solid rgba(241,230,200,.9);

    backdrop-filter:blur(14px);

    box-shadow:var(--wc-shadow);

    transform-origin:bottom right;

    transition:
        opacity .22s ease,
        transform .22s ease;

    z-index:9998;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

#wc-window.wc-hidden{
    opacity:0;
    pointer-events:none;

    transform:
        translateY(10px)
        scale(.96);
}

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
/* Floating greeting bubble */
.wc-floating-greeting {
    position: absolute;
    bottom: 15px;         
    right: 67px;
    background-color: white;
    color: #333;
    font-size: 14px;
    font-family: system-ui, -apple-system, sans-serif;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    white-space: nowrap;
    animation: fadeInUp 0.3s ease-out;
    transition: opacity 0.3s ease;
    pointer-events: none;  /* so clicks pass through to the button */
    z-index: 9999;
}

/* Small triangle / tail */
.wc-floating-greeting::after {
    content: '';
    position: absolute;
    bottom: 12px;
    right: -6px;
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Fade out when hidden */
.wc-floating-greeting.wc-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Entrance animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wc-hdr{
    position:relative;

    padding:18px;

    display:flex;
    align-items:center;
    gap:12px;

    background:
        linear-gradient(
            145deg,
            #9D7700 0%,
            #7F6000 100%
        );

    color:#fff;
}

.wc-hdr::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            transparent
        );

    pointer-events:none;
}

.wc-avatar{
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background: transparent;
    border: none;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wc-hdr-name{
    font-size:14px;
    font-weight:600;

    letter-spacing:.2px;

    color:#fff;
}

.wc-hdr-status{
    margin-top:3px;

    display:flex;
    align-items:center;
    gap:5px;

    font-size:11.5px;

    color:rgba(255,255,255,.84);
}

.wc-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#4ADE80;

    box-shadow:
        0 0 8px rgba(74,222,128,.7);
}

/* ─────────────────────────────────────────
   CLOSE BUTTON
───────────────────────────────────────── */
.wc-close{
    margin-left:auto;
    width:34px;
    height:34px;
    border:none;
    border-radius:12px;
    background-color:transparent!important;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
        background .18s ease,
        transform .18s ease;
}

.wc-close:hover{
    background:rgba(255,255,255,.14);

    transform:scale(1.05);
}

.wc-close svg{
    width:18px;
    height:18px;

    stroke:#fff;
    fill:none;

    stroke-width:2;
    stroke-linecap:round;
}

/* ─────────────────────────────────────────
   MESSAGES AREA
───────────────────────────────────────── */
.wc-msgs{
    height:360px;

    overflow-y:auto;

    padding:18px 16px 12px;

    display:flex;
    flex-direction:column;
    gap:14px;

    background:
        linear-gradient(
            to bottom,
            #FFFDF9 0%,
            #FFF8ED 100%
        );

    scrollbar-width:thin;
    scrollbar-color:#D4BE7A transparent;
}

.wc-m{
    display:flex;
    flex-direction:column;

    max-width:84%;
}

.wc-m.wc-u{
    align-self:flex-end;
    align-items:flex-end;
}

.wc-m.wc-b{
    align-self:flex-start;
    align-items:flex-start;
}

.wc-bubble{
    padding:12px 15px;

    border-radius:18px;

    font-size:13.5px;
    line-height:1.65;

    word-break:break-word;
}

.wc-bubble strong{
    font-weight:600;
    color:inherit;
}

.wc-bubble br{
    line-height:1.8;
}

.wc-list{
    margin-top:10px;
    margin-bottom:6px;
    padding-left:18px;
}

.wc-list li{
    margin-bottom:8px;
    line-height:1.6;
}

.wc-m.wc-b .wc-list li::marker{
    color:#7F6000;
}

.wc-m.wc-u .wc-list li::marker{
    color:#fff;
}

/* BOT */
.wc-m.wc-b .wc-bubble{
    background:#fff;

    color:var(--wc-text);

    border:
        1px solid
        rgba(241,230,200,.9);

    border-bottom-left-radius:6px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.03);
}

/* USER */
.wc-m.wc-u .wc-bubble{
    background:
        linear-gradient(
            145deg,
            var(--wc-gold-light),
            var(--wc-gold)
        );

    color:#fff;

    border-bottom-right-radius:6px;

    box-shadow:
        0 6px 16px rgba(127,96,0,.22);
}

.wc-ts{
    margin-top:5px;
    padding:0 4px;

    font-size:11px;

    color:#B7AE9A;
}

/* ─────────────────────────────────────────
   QUICK REPLIES
───────────────────────────────────────── */
.wc-qr{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:8px;
}

.wc-qb{
    padding:8px 14px;
    border-radius:999px;
    border: 1px solid rgba(127,96,0,.14);
    background-color: var(--wc-gold)!important;
    backdrop-filter:blur(8px);
    color: #FFFFFF!important;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition: all .18s ease;
    font-family:inherit;
}

.wc-qb:hover{
    background:var(--wc-gold);
    color:#fff;
    border-color:var(--wc-gold);
    transform:translateY(-1px);
}

/* ─────────────────────────────────────────
   TYPING
───────────────────────────────────────── */
.wc-typing{
    display:flex;
    align-items:center;
    gap:4px;

    width:fit-content;

    padding:10px 13px;

    border-radius:16px;
    border-bottom-left-radius:6px;

    background:#fff;

    border:
        1px solid
        rgba(241,230,200,.9);
}

.wc-td{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#B38A00;

    animation:wcBlink 1.2s infinite;
}

.wc-td:nth-child(2){
    animation-delay:.18s;
}

.wc-td:nth-child(3){
    animation-delay:.36s;
}

@keyframes wcBlink{
    0%,80%,100%{
        opacity:.35;
        transform:translateY(0);
    }

    40%{
        opacity:1;
        transform:translateY(-2px);
    }
}

/* ─────────────────────────────────────────
   INPUT AREA
───────────────────────────────────────── */
.wc-inp-row{
    padding:14px;

    display:flex;
    align-items:flex-end;
    gap:10px;

    background:#FFFDF9;

    border-top:
        1px solid
        rgba(241,230,200,.8);
}

#wc-inp{
    flex:1;

    padding:11px 15px;

    border-radius:24px;

    border:
        1px solid
        rgba(232,214,163,.9);

    background:#fff;

    outline:none;

    resize:none;

    max-height:90px;

    font-size:13.5px;
    line-height:1.5;

    color:var(--wc-text);

    font-family:inherit;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

#wc-inp::placeholder{
    color:#B3AA98;
}

#wc-inp:focus{
    border-color:var(--wc-gold);

    box-shadow:
        0 0 0 4px rgba(127,96,0,.10);
}

/* ─────────────────────────────────────────
   SEND BUTTON
───────────────────────────────────────── */
#wc-send{
    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            var(--wc-gold-light),
            var(--wc-gold)
        );

    box-shadow:
        0 6px 16px rgba(127,96,0,.24);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

#wc-send:hover{
    transform:
        scale(1.06)
        translateY(-1px);

    box-shadow:
        0 10px 20px rgba(127,96,0,.34);
}

#wc-send:disabled{
    background:#DADADA;
    box-shadow:none;
    cursor:not-allowed;
}

#wc-send svg{
    width:16px;
    height:16px;

    stroke:#fff;
    fill:none;

    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.wc-pw{
    padding:6px 0 12px;

    text-align:center;

    font-size:11px;
    letter-spacing:.2px;

    color:#B4AA97;

    background:#FFFDF9;
}

/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */
@media (max-width:480px){

    #wc-window{
        right:12px;
        bottom:88px;

        width:calc(100vw - 24px);

        border-radius:22px;
    }

    #wc-launcher{
        right:16px;
        bottom:16px;

        width:60px;
        height:60px;
    }
	
	.wc-floating-greeting {
        font-size: 12px;
        padding: 6px 12px;
        bottom: 70px;
    }
}