: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: #0A4834;}
    .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:7px 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}
    
    .chatbot .pin-go {
    background: #0a4834 !important;
    color: #fff !important;
    border-radius: 9px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
    border: none;
}

.chatbot .pin-go:hover:not(:disabled),
.chatbot .pin-go:focus:not(:disabled) {
    background: #0a4834 !important;
    color: #fff !important;
}

.chatbot .pin-go:disabled {
    background: #D3D6DB !important;
    color: #777 !important;
    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);}
    
    .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);}
    .chatbot-icon {font-size: 28px;line-height: 1;display: flex;align-items: center;justify-content: center;}
    .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.chatbot-open { opacity: 1;visibility: visible;transform: translateY(0) scale(1); pointer-events: auto;}
    .chatbot-close1 {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-close1:hover { background: rgba(255, 255, 255, 0.15); }

    @media (max-width: 600px) {
        .chatbot-float-btn { right: 30px;bottom: 100px;width: 56px;height: 56px; }
        .chatbot { right: 10px; left: 10px; bottom: 168px; width: auto; max-width: none; height: calc(95vh - 210px); max-height: none;border-radius: 16px; }
    }