/* ==========================================================
   Smart AI Chat CRM — Frontend Widget
   Design tokens
   ---------------------------------------------------------
   Primary gradient : #5B4FE9 -> #8B5CF6  (indigo -> violet)
   Ink              : #1F2333
   Muted text       : #6B7280
   Surface          : #FFFFFF
   Canvas           : #F6F7FB
   Online / success : #22C55E
   Border hairline  : #E7E8F0
========================================================== */

#sac-chat-widget,
#sac-chat-widget *{
    box-sizing:border-box;
}

#sac-chat-widget{
    position:fixed;
    bottom:22px;
    right:22px;
    z-index:999999;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

#sac-chat-widget.sac-position-bottom-left{
    right:auto;
    left:22px;
}

/* ---------- Toggle button ---------- */

#sac-chat-toggle{
    width:62px;
    height:62px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    box-shadow:0 12px 28px rgba(91,79,233,.35), 0 2px 6px rgba(0,0,0,.08);
    transition:transform .2s ease, box-shadow .2s ease;
    position:relative;
    padding:0;
}

#sac-chat-toggle:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 16px 34px rgba(91,79,233,.42), 0 2px 6px rgba(0,0,0,.08);
}

#sac-chat-toggle:active{
    transform:translateY(0) scale(.97);
}

#sac-chat-toggle span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:opacity .15s ease, transform .15s ease;
    font-size:24px;
    line-height:1;
    color:#ffffff !important;
    font-style:normal;
    -webkit-text-fill-color:#ffffff;
}

#sac-chat-toggle .sac-icon-close{
    opacity:0;
    font-size:22px;
    transform:translate(-50%,-50%) rotate(-45deg) scale(.6);
}

#sac-chat-widget.sac-open #sac-chat-toggle .sac-icon-chat{
    opacity:0;
    transform:translate(-50%,-50%) rotate(45deg) scale(.6);
}

#sac-chat-widget.sac-open #sac-chat-toggle .sac-icon-close{
    opacity:1;
    transform:translate(-50%,-50%) rotate(0) scale(1);
}

/* ---------- Chat window ---------- */

#sac-chat-box{
    width:380px;
    height:620px;
    max-height:calc(100vh - 120px);
    position:absolute;
    bottom:78px;
    right:0;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 24px 60px rgba(24,20,60,.18), 0 4px 16px rgba(24,20,60,.08);
    opacity:0;
    transform:translateY(16px) scale(.98);
    pointer-events:none;
    transition:opacity .22s cubic-bezier(.2,.8,.3,1), transform .22s cubic-bezier(.2,.8,.3,1);
    transform-origin:bottom right;
}

#sac-chat-widget.sac-open #sac-chat-box{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

#sac-chat-widget.sac-position-bottom-left #sac-chat-box{
    right:auto;
    left:0;
    transform-origin:bottom left;
}

/* ---------- Header ---------- */

.sac-header{
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    color:var(--sac-header-text,#fff);
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.sac-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
}

.sac-avatar svg{
    width:20px;
    height:20px;
    color:#fff;
}

.sac-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.sac-avatar::after{
    content:"";
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#22C55E;
    border:2px solid #6C5CE9;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);
    animation:sac-pulse 2.2s infinite;
}

@keyframes sac-pulse{
    0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55); }
    70%  { box-shadow:0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.sac-header-text{
    flex:1;
    min-width:0;
}

.sac-header-text h3{
    margin:0;
    font-size:15.5px;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sac-header-text p{
    margin:2px 0 0;
    opacity:.88;
    font-size:12.5px;
    display:flex;
    align-items:center;
    gap:5px;
}

.sac-header-text p::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#22C55E;
    display:inline-block;
}

.sac-header-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}

.sac-header-action-btn{
    background:rgba(255,255,255,.14);
    border:none;
    color:#fff;
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    text-decoration:none;
    transition:background .15s ease;
    flex-shrink:0;
}

.sac-header-action-btn:hover{
    background:rgba(255,255,255,.26);
}

#sac-chat-close{
    background:rgba(255,255,255,.14);
    border:none;
    color:#fff;
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .15s ease;
}

#sac-chat-close:hover{
    background:rgba(255,255,255,.26);
}

#sac-chat-close span{
    font-size:14px;
    line-height:1;
    color:#ffffff !important;
    font-style:normal;
    -webkit-text-fill-color:#ffffff;
}

/* ---------- Body ---------- */

.sac-body{
    flex:1;
    min-height:0;
    background:#F6F7FB;
    display:flex;
    flex-direction:column;
}

/* ---------- Lead form ---------- */

#sac-lead-form{
    padding:22px 20px;
    overflow-y:auto;
}

.sac-welcome{
    margin:0 0 18px;
    font-size:14px;
    line-height:1.55;
    color:#3A3F52;
}

.sac-field{
    position:relative;
    margin-bottom:12px;
}

.sac-field svg{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    color:#9298AC;
    pointer-events:none;
}

#sac-lead-form input{
    width:100%;
    padding:12px 14px 12px 40px;
    border:1.5px solid #E7E8F0;
    border-radius:12px;
    font-size:13.5px;
    background:#fff;
    color:#1F2333;
    transition:border-color .15s ease, box-shadow .15s ease;
}

#sac-lead-form input::placeholder,
#sac-lead-form textarea::placeholder{
    color:#9298AC;
}

#sac-lead-form input:focus,
#sac-lead-form textarea:focus{
    outline:none;
    border-color:var(--sac-primary-light,#8B5CF6);
    box-shadow:0 0 0 3px rgba(139,92,246,.14);
}

#sac-lead-form textarea{
    width:100%;
    padding:12px 14px 12px 40px;
    border:1.5px solid #E7E8F0;
    border-radius:12px;
    font-size:13.5px;
    background:#fff;
    color:#1F2333;
    transition:border-color .15s ease, box-shadow .15s ease;
    resize:vertical;
    font-family:inherit;
    min-height:56px;
}

.sac-field-textarea svg{
    top:18px;
    transform:none;
}

#sac-start-chat{
    width:100%;
    border:none;
    border-radius:12px;
    padding:13px;
    cursor:pointer;
    font-size:14.5px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    box-shadow:0 8px 18px rgba(91,79,233,.28);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.sac-consent{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:4px 0 14px;
    font-size:12.5px;
    line-height:1.45;
    color:#6B7280;
    cursor:pointer;
}

.sac-consent input{
    margin-top:2px;
    flex-shrink:0;
    width:15px;
    height:15px;
    accent-color:var(--sac-primary,#5B4FE9);
    cursor:pointer;
}

#sac-start-chat:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(91,79,233,.34);
}

#sac-start-chat:disabled{
    opacity:.7;
    cursor:default;
    transform:none;
}

/* ---------- Chat window ---------- */

.sac-chat-window{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
}

.sac-chat-messages{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
}

.sac-message{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:14px;
    animation:sac-msg-in .22s ease;
}

@keyframes sac-msg-in{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

.sac-message .sac-mini-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.sac-message .sac-mini-avatar svg{
    width:13px;
    height:13px;
    color:#fff;
}

.sac-message .sac-mini-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.sac-ai{
    justify-content:flex-start;
}

.sac-user{
    justify-content:flex-end;
}

.sac-bubble-wrap{
    display:flex;
    flex-direction:column;
    max-width:76%;
}

.sac-user .sac-bubble-wrap{
    align-items:flex-end;
}

.sac-bubble{
    padding:11px 15px;
    border-radius:16px;
    line-height:1.5;
    font-size:13.8px;
    word-break:break-word;
}

.sac-ai .sac-bubble{
    background:var(--sac-ai-bubble-bg,#ffffff);
    color:var(--sac-ai-bubble-text,#262A3A);
    border:1px solid #ECEDF4;
    border-bottom-left-radius:5px;
}

.sac-user .sac-bubble{
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    color:#fff;
    border-bottom-right-radius:5px;
}

.sac-timestamp{
    font-size:10.5px;
    color:#A6ABBD;
    margin:4px 4px 0;
}

/* Typing indicator */

.sac-typing-bubble{
    display:flex;
    align-items:center;
    gap:4px;
    padding:14px 16px;
}

.sac-typing-bubble span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#B7BBCB;
    animation:sac-typing 1.1s infinite ease-in-out;
}

.sac-typing-bubble span:nth-child(2){ animation-delay:.15s; }
.sac-typing-bubble span:nth-child(3){ animation-delay:.3s; }

@keyframes sac-typing{
    0%, 60%, 100% { transform:translateY(0); opacity:.5; }
    30%           { transform:translateY(-4px); opacity:1; }
}

/* ---------- Footer / input ---------- */

.sac-chat-footer{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:#fff;
    border-top:1px solid #ECEDF4;
    flex-shrink:0;
}

#sac-message{
    flex:1;
    padding:11px 16px;
    border:1.5px solid #E7E8F0;
    border-radius:999px;
    outline:none;
    font-size:13.8px;
    color:#1F2333;
    background:#F6F7FB;
    transition:border-color .15s ease, background .15s ease;
}

#sac-message::placeholder{
    color:#9298AC;
}

#sac-message:focus{
    border-color:var(--sac-primary-light,#8B5CF6);
    background:#fff;
}

#sac-send-message{
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--sac-primary,#5B4FE9),var(--sac-primary-light,#8B5CF6));
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 14px rgba(91,79,233,.3);
}

#sac-send-message:hover{
    transform:translateY(-1px) scale(1.04);
}

#sac-send-message:active{
    transform:translateY(0) scale(.95);
}

#sac-send-message span{
    font-size:18px;
    line-height:1;
    color:#ffffff !important;
    font-style:normal;
    -webkit-text-fill-color:#ffffff;
    margin-left:1px;
}

/* ---------- Scrollbar ---------- */

.sac-chat-messages::-webkit-scrollbar,
#sac-lead-form::-webkit-scrollbar{
    width:5px;
}

.sac-chat-messages::-webkit-scrollbar-thumb,
#sac-lead-form::-webkit-scrollbar-thumb{
    background:#D7D9E4;
    border-radius:20px;
}

/* ---------- Mobile ---------- */

@media(max-width:480px){

    #sac-chat-widget{
        right:14px;
        bottom:14px;
    }

    #sac-chat-box{
        width:calc(100vw - 24px);
        height:calc(100vh - 100px);
        right:0;
    }

    #sac-chat-widget.sac-position-bottom-left{
        left:14px;
        right:auto;
    }

    #sac-chat-widget.sac-position-bottom-left #sac-chat-box{
        left:0;
        right:auto;
    }
}

/* ---------- Quick Reply Chips ---------- */

.sac-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.sac-quick-reply-chip {
    border: 1.5px solid var(--sac-primary, #5B4FE9);
    background: #fff;
    color: var(--sac-primary, #5B4FE9);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
}

.sac-quick-reply-chip:hover {
    background: var(--sac-primary, #5B4FE9);
    color: #fff;
}

.sac-quick-reply-chip:active {
    transform: scale(.97);
}

/* ---------- Toast Notification ---------- */

.sac-toast {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    margin-bottom: 12px;
    background: #1F2937;
    color: #fff;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 260px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
    pointer-events: none;
}

.sac-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}