:root{
        --bg:#14161A; --panel:#1B1F25; --line:#272C34; --ink:#E8EBEF; --muted:#828B98; --dim:#525C6A;
        --gold:#8C7326; --gold-d:#6E5A1D; --gold-l:#F8F4E9; --gold-line:#DCCF9E;
        --w-bg:#FFFFFF; --w-bubble:#F2F3F5; --w-ink:#1B1B1E; --w-mut:#6B6F76; --w-line:#E4E6EA;
        --wa:#25D366; --wa-d:#128C7E; --err:#C0392B;
        --sans:'Plus Jakarta Sans',sans-serif; --serif:'Fraunces',serif; --mono:'IBM Plex Mono',monospace;
    }
      
    .chatbot {
        /* right: 20px; z-index: 9999;
        position:fixed; width: 100%;max-width: 350px;height: 80vh;max-height: 750px;margin: 10px auto;background: #fff;border-radius: 15px;
        overflow: hidden;box-shadow: 0 5px 25px rgba(0,0,0,0.15);display: flex;flex-direction: column;bottom:55px;
         */
        position: fixed;right: 25px;bottom: 100px;width: 370px;max-width: calc(100vw - 30px);height: 600px;
        max-height: calc(100vh - 130px);background: #fff;border-radius: 18px;overflow: hidden;
        box-shadow: 0 12px 45px rgba(0, 0, 0, 0.25);z-index: 99999;opacity: 0;visibility: hidden;
        transform: translateY(20px) scale(0.95); pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        display: flex;flex-direction: column;
    }
    .chat-header {background: #927722;color: #fff;padding: 14px 18px;display: flex;align-items: center;gap: 12px;}
    .bot-avatar {width: 42px;height: 42px;background: rgba(255,255,255,0.2);border-radius: 50%;display: flex;
        align-items: center;justify-content: center;font-size: 17px;font-weight: bold;
    }
    .bot-info { flex: 1; }
    .bot-name { font-size: 16px; font-weight: 600; }
    .online { font-size: 12px; margin-top: 3px; display: flex;align-items: center; gap: 5px; }
    .online-dot {width: 7px;height: 7px;background: #72d572;border-radius: 50%;display: inline-block;}
    .chat-body {flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:8px;}
    .msg{max-width:93%;padding:9px 13px;font-size:13.5px;line-height:1.5;animation:in .28s ease both;word-wrap:break-word}
    .msg.bot{background:var(--w-bubble);border-radius:14px 14px 14px 4px;align-self:flex-start}
    .msg.user{background:#0a4834;color:#fff;border-radius:14px 14px 4px 14px;align-self:flex-end;font-weight:500}
    .quick-actions {margin-top: auto;padding-top: 15px;}
    .quick-btn {border: 1px solid #a17d16;background: #fff;color: #946f0d;border-radius: 22px;padding: 4px 10px;font-size: 14px;
        cursor: pointer;transition: 0.2s;white-space: nowrap;margin-bottom:8px;
    }
    .quick-btn:hover { background: #946f0d; color: #fff; }
    .chat-input-area { padding: 10px 12px 12px;background: #fff;display: flex; gap: 7px;align-items: center;}
    input[type="text"]{ margin:0;border-radius:8px; }
    .input[type="text"] { flex: 1;height: 42px;border: 1px solid #ddd;border-radius: 10px;padding: 0 15px;
        outline: none;font-size: 13px;margin:0;}
    input[type="text"]:focus {border-color: #a17d16;}
    button:hover, button:focus, .button[disabled]:hover, .button[disabled]:focus {background-color: #927722;}
    .send-btn {
      width: 35px;height: 35px;min-width: 35px;min-height: 35px;flex: 0 0 35px;border: none;border-radius: 50%;
      background: #a17d16;color: #fff;display: flex;align-items: center;justify-content: center;padding: 0;
      font-size: 16px;line-height: 1;cursor: pointer;
    }
    .act{flex:none;padding:0 14px 14px;display:flex;flex-direction:column;gap:7px}
    .chips{display:flex;flex-wrap:wrap;gap:6px}
    .chip{border:1px solid#0a4834;color:#0a4834;background:#fff;border-radius:100px;padding:8px 13px; font-size:12.5px;font-weight:600;transition:.13s;animation:in .24s ease both}
    .chip:hover{background:#0a4834;color:#fff}
    .chip.quiet{border-color:var(--w-line);color:var(--w-mut);font-weight:500}
    .chip.quiet:hover{background:#EFF0F2;color:var(--w-ink);border-color:#D6D9DE}
    .wa-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--wa);color:#fff;border-radius:10px;padding:12px;font-size:13.5px;font-weight:700;animation:in .3s ease both;transition:.14s}
    .wa-cta:hover{background:var(--wa-d)}
    .wa-cta svg{width:17px;height:17px;fill:currentColor;flex:none}

    .pin{display:flex;flex-direction:column;gap:6px;animation:in .24s ease both}
    .pin-row{display:flex;gap:7px;align-items:stretch}
    .cc{position:relative;flex:none}
    .cc select{appearance:none;-webkit-appearance:none;border:1px solid var(--w-line);border-radius:9px;
      background:#fff;padding:10px 26px 10px 11px;font-size:13.5px;font-weight:600;color:var(--w-ink);height:100%;cursor:pointer}
    .cc select:focus{outline:none;border-color:#0a4834}
    .cc:after{content:"";position:absolute;right:10px;top:50%;width:0;height:0;pointer-events:none;
      border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #8B9098;transform:translateY(-2px)}
    .pin input{margin:0;line-height: 0;flex:1;min-width:0;border:1px solid var(--w-line);border-radius:9px;padding:10px 12px;font-size:14px;
      letter-spacing:.02em;color:var(--w-ink);background:#fff}
    .pin input:focus{outline:none;border-color:#0a4834}
    .pin input.bad{border-color:var(--err)}
    .pin-go{background:#0a4834;color:#fff;border-radius:9px;padding:0 15px;font-size:13px;font-weight:700;flex:none;transition:.14s}
    .pin-go:hover:not(:disabled){background:var(--gold-d)}
    .pin-go:disabled{background:#D3D6DB;cursor:default}
    .pin-hint{font-size:11.5px;color:var(--w-mut);padding-left:2px}
    .pin-hint.bad{color:var(--err);font-weight:600}
    .pin-ok{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#1E8E4E;font-weight:600;padding-left:2px}
    .pin-ok i{width:6px;height:6px;border-radius:50%;background:#1E8E4E;display:inline-block}

    .tin{display:flex;gap:7px;animation:in .24s ease both}
    .tin input{flex:1;min-width:0;border:1px solid var(--w-line);border-radius:9px;padding:10px 12px;font-size:14px;background:#fff;color:var(--w-ink)}
    .tin input:focus{outline:none;border-color:#0a4834}
    /* Mobile */
    @media (max-width: 500px) {
        .chatbot { width: 100%; height: 100vh; max-height: none; margin: 0; border-radius: 0;}
        .quick-btn { font-size: 11px; padding: 9px 5px;}
    }
    .typing{ align-self:flex-start; display:flex; align-items:center; gap:4px;background:var(--w-bubble);
        border-radius:14px 14px 14px 4px;padding:10px 12px;min-width:42px;animation:in .24s ease both;
    }
    .typing i{display:block;width:6px;height:6px;border-radius:50%;background:#9A9EA5;animation:chatTyping 1s infinite ease-in-out;}
    .typing i:nth-child(2){animation-delay:.15s}
    .typing i:nth-child(3){animation-delay:.30s}
    @keyframes chatTyping{
        0%,60%,100%{transform:translateY(0);opacity:.45}
        30%{transform:translateY(-4px);opacity:1}
    }
    @keyframes in{
        from{opacity:0;transform:translateY(4px)}
        to{opacity:1;transform:translateY(0)}
    }
    .reveal{align-self:flex-start;width:82%;padding:12px 13px;background:#FAF7EF;border:1px solid #3b6d5d;
        border-radius:12px;animation:in .28s ease both;
    }
    .r-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#0a4834;margin-bottom:4px;}
    .r-big{font-size:14px;line-height:1.4;font-weight:700;color:#0a4834;}
    .r-sub{font-size:11.5px;color:#6B6F76;margin-top:3px;}
    .plan{align-self:flex-start;width:82%;padding:10px;background:#fff;border:1px solid var(--w-line);border-radius:12px;animation:in .28s ease both;}
    .plan svg{display:block;width:100%;height:auto;border-radius:8px;}
    .plan-cap{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:12px;}
    .plan-cap b{color:var(--w-ink)}
    .plan-cap span{color:var(--w-mut);text-align:right}
    .plan-note{margin-top:3px;font-size:10.5px;color:var(--w-mut);}

    /* =========================================================
   FLOATING CHATBOT BUTTON
   ========================================================= */

.chatbot-float-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;

    background: #0a4834;

    color: #fff;

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

    cursor: pointer;

    z-index: 99998;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.chatbot-float-btn:hover {

    transform: scale(1.08);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35);
}


/* Chat icon */

.chatbot-icon {

    font-size: 28px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Pulse */

.chatbot-pulse {

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    border: 2px solid #0a4834;

    animation:
        chatbotPulse 2s infinite;

    pointer-events: none;
}


@keyframes chatbotPulse {

    0% {

        transform: scale(1);

        opacity: 0.8;
    }

    70% {

        transform: scale(1.35);

        opacity: 0;
    }

    100% {

        transform: scale(1.35);

        opacity: 0;
    }
}


/* =========================================================
   CHATBOT WINDOW
   ========================================================= */

/* Open state */

.chatbot.chatbot-open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.chatbot-close {

    margin-left: auto;

    width: 34px;
    height: 34px;
    padding:0;
    border: none;

    background: transparent;

    color: #fff;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;
}


.chatbot-close:hover {

    background:
        rgba(255, 255, 255, 0.15);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .chatbot-float-btn {

        right: 30px;

        bottom: 100px;

        width: 56px;

        height: 56px;
    }


    .chatbot {

        right: 10px;

        left: 10px;

        bottom: 85px;

        width: auto;

        max-width: none;

        height: calc(100vh - 105px);

        max-height: none;

        border-radius: 16px;
    }

}