#stm-ai-chatbot,
#stm-ai-chatbot * { box-sizing: border-box; }

#stm-ai-chatbot {
    --stm-orange: #f48402;
    --stm-dark: #151a2b;
    --stm-soft: #f7f8fb;
    --stm-border: #e6e8ee;
    font-family: Poppins, Arial, sans-serif;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
}

.stm-chat-launcher {
    border: 0;
    background: var(--stm-orange);
    color: #fff;
    min-height: 58px;
    padding: 8px 18px 8px 10px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    cursor: pointer;
    font-weight: 600;
}

.stm-chat-launcher-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.stm-chat-launcher-label { white-space: nowrap; }

.stm-chat-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: min(430px, calc(100vw - 28px));
    height: min(720px, calc(100vh - 100px));
    min-height: 520px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    border: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
}

.stm-chat-header {
    background: linear-gradient(135deg, #151a2b 0%, #262e49 100%);
    color: #fff;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stm-chat-brand { display: flex; align-items: center; gap: 10px; }
.stm-chat-brand strong { display:block; font-size:14px; line-height:1.2; }
.stm-chat-brand small { display:block; opacity:.75; font-size:10px; margin-top:3px; }

.stm-chat-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
}

.stm-chat-close {
    border:0;
    background:rgba(255,255,255,.1);
    color:#fff;
    width:34px;
    height:34px;
    border-radius:50%;
    cursor:pointer;
}

.stm-chat-body {
    flex:1;
    overflow-y:auto;
    padding:15px 13px;
    background:
        radial-gradient(circle at 10% 0%, rgba(244,132,2,.08), transparent 28%),
        var(--stm-soft);
}

.stm-msg-row { display:flex; margin:0 0 10px; }
.stm-msg-user { justify-content:flex-end; }

.stm-msg-bubble {
    max-width:88%;
    padding:10px 12px;
    border-radius:15px;
    font-size:12.5px;
    line-height:1.55;
    color:#263043;
    background:#fff;
    border:1px solid var(--stm-border);
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.stm-msg-user .stm-msg-bubble {
    color:#fff;
    background:var(--stm-orange);
    border-color:var(--stm-orange);
    border-bottom-right-radius:5px;
}

.stm-msg-assistant .stm-msg-bubble { border-bottom-left-radius:5px; }

.stm-typing { display:flex; align-items:center; gap:4px; min-width:54px; }
.stm-typing span {
    width:5px; height:5px; background:#8b91a0; border-radius:50%;
    animation:stmTyping 1.1s infinite ease-in-out;
}
.stm-typing span:nth-child(2){animation-delay:.15s}
.stm-typing span:nth-child(3){animation-delay:.3s}
@keyframes stmTyping {
    0%,60%,100%{transform:translateY(0);opacity:.45}
    30%{transform:translateY(-4px);opacity:1}
}

.stm-chat-suggestions {
    padding:8px 10px 4px;
    display:flex;
    gap:6px;
    overflow-x:auto;
    background:#fff;
    border-top:1px solid var(--stm-border);
}

.stm-chat-suggestions button {
    border:1px solid #f0c99e;
    background:#fff8ef;
    color:#9a5200;
    border-radius:20px;
    padding:6px 9px;
    font-size:10px;
    white-space:nowrap;
    cursor:pointer;
}

.stm-chat-input {
    display:flex;
    align-items:flex-end;
    gap:7px;
    padding:8px 10px;
    background:#fff;
    border-top:1px solid var(--stm-border);
}

.stm-chat-input textarea {
    flex:1;
    resize:none;
    border:1px solid #dfe2e9;
    border-radius:12px;
    padding:9px 10px;
    min-height:40px;
    max-height:120px;
    outline:none;
    font-size:12px;
    line-height:1.4;
}

.stm-chat-input textarea:focus { border-color:var(--stm-orange); }

.stm-chat-input > button {
    width:40px;
    height:40px;
    flex:0 0 40px;
    border:0;
    border-radius:12px;
    background:var(--stm-orange);
    color:#fff;
    cursor:pointer;
}

.stm-chat-input > button:disabled { opacity:.6; cursor:wait; }

.stm-chat-disclaimer {
    padding:5px 10px 9px;
    text-align:center;
    color:#7e8491;
    background:#fff;
    font-size:8.5px;
    line-height:1.35;
}

.stm-quote-card {
    padding:10px 11px;
    background:#fffaf3;
    border-top:1px solid #f4d8b6;
    max-height:390px;
    overflow-y:auto;
}

.stm-quote-title { color:#8c4b00; font-size:12px; font-weight:700; }

.stm-quote-card p {
    margin:4px 0 8px;
    color:#6e7077;
    font-size:10px;
}

.stm-quote-card input,
.stm-quote-card select,
.stm-quote-card textarea {
    display:block;
    width:100%;
    min-height:34px;
    margin-bottom:6px;
    padding:7px 9px;
    border:1px solid #dedfe4;
    border-radius:9px;
    outline:none;
    font-size:11px;
    background:#fff;
}

.stm-quote-card textarea { resize:vertical; min-height:52px; }
.stm-quote-card input:focus,
.stm-quote-card select:focus,
.stm-quote-card textarea:focus { border-color:var(--stm-orange); }

.stm-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.stm-quote-submit {
    width:100%;
    border:0;
    border-radius:9px;
    padding:10px;
    color:#fff;
    background:var(--stm-orange);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
}

.stm-quote-submit:disabled { opacity:.65; cursor:not-allowed; }

.stm-form-message {
    margin-top:6px;
    font-size:9.5px;
    line-height:1.35;
}

.stm-form-message.is-error { color:#b42318; }
.stm-form-message.is-success { color:#16794c; }

@media (max-width:575px) {
    #stm-ai-chatbot { right:12px; bottom:12px; }

    .stm-chat-launcher { min-height:52px; padding-right:12px; }
    .stm-chat-launcher-icon { width:38px; height:38px; }

    .stm-chat-panel {
        bottom:62px;
        width:calc(100vw - 24px);
        height:calc(100vh - 85px);
        min-height:460px;
        border-radius:16px;
    }

    .stm-form-grid { grid-template-columns:1fr 1fr; }
}
/* =========================================================
   Smiles To Miles - Chatbot Header Logo Alignment Fix
   ========================================================= */

.stm-chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

.stm-chat-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
    height: 100% !important;
}

.stm-chat-logo {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 50% !important;
    flex: 0 0 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.stm-chat-brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}

.stm-chat-brand-text strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.stm-chat-brand-text small {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.stm-chat-close {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
    .stm-chat-header {
        min-height: 68px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .stm-chat-logo {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px !important;
    }

    .stm-chat-brand {
        gap: 9px !important;
    }
}