/* Site AI Chat Widget v2.0 */
:root { --sai-color: #2c7be5; }

#saichat-btn {
    position:fixed; bottom:24px;
    width:56px; height:56px; border-radius:50%;
    background:var(--sai-color); color:#fff; border:none; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.28); font-size:26px;
    display:flex; align-items:center; justify-content:center;
    z-index:99998; transition:transform .2s, box-shadow .2s;
}
#saichat-btn:hover { transform:scale(1.08); box-shadow:0 6px 22px rgba(0,0,0,.35); }
#saichat-btn.sai-right { right:24px; }
#saichat-btn.sai-left  { left:24px; }

#saichat-badge {
    position:absolute; top:-3px; right:-3px;
    background:#e63946; color:#fff; border-radius:50%;
    width:18px; height:18px; font-size:11px; font-weight:bold;
    display:none; align-items:center; justify-content:center;
}

#saichat-window {
    position:fixed; bottom:90px; width:360px; max-height:560px;
    background:#fff; border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,.22);
    display:none; flex-direction:column; overflow:hidden;
    z-index:99997;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:14px; pointer-events:auto !important;
}
#saichat-window.sai-right { right:24px; }
#saichat-window.sai-left  { left:24px; }
#saichat-window.sai-open  { display:flex; }

#saichat-header {
    background:var(--sai-color); color:#fff;
    padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#saichat-avatar {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px;
}
#saichat-header-info { flex:1; }
#saichat-header-name { font-weight:700; font-size:15px; }
#saichat-header-status { font-size:11px; opacity:.85; }
.sai-status-human { color:#a3ffb0 !important; opacity:1 !important; }

#saichat-video, #saichat-clear, #saichat-close {
    background:none; border:none; color:#fff; cursor:pointer;
    font-size:16px; padding:0 4px; line-height:1; opacity:.8; transition:opacity .15s;
}
#saichat-video:hover, #saichat-clear:hover, #saichat-close:hover { opacity:1; }
#saichat-close { font-size:20px; }

/* ── Operator/mode banner ── */
#saichat-mode-bar {
    padding:6px 14px; font-size:12px; font-weight:600;
    text-align:center; flex-shrink:0;
}
.sai-mode-ai    { background:#e8f4fd; color:#1565c0; }
.sai-mode-human { background:#e6f9ee; color:#1b5e20; animation:saiPulse 2s infinite; }
@keyframes saiPulse { 0%,100%{opacity:1} 50%{opacity:.7} }

#saichat-messages {
    flex:1; overflow-y:auto; padding:14px 14px 6px;
    display:flex; flex-direction:column; gap:10px;
    background:#f7f9fc; pointer-events:auto !important;
    position:relative; z-index:1;
}
.sai-msg {
    max-width:82%; padding:9px 13px; border-radius:14px;
    line-height:1.5; word-break:break-word; pointer-events:auto !important;
}
.sai-msg.bot {
    background:#fff; color:#222; align-self:flex-start;
    box-shadow:0 1px 4px rgba(0,0,0,.08); border-bottom-left-radius:4px;
}
.sai-msg.user {
    background:var(--sai-color); color:#fff;
    align-self:flex-end; border-bottom-right-radius:4px;
}
/* Operator messages — green left bubble */
.sai-msg.operator {
    background:#e6f9ee; color:#1b5e20; align-self:flex-start;
    border-left:3px solid #2e7d32; border-bottom-left-radius:4px;
    font-style:normal;
}
.sai-msg.operator strong { color:#1b5e20; }

.sai-typing { display:flex; gap:4px; align-items:center; }
.sai-dot { width:8px;height:8px;border-radius:50%;background:#aaa;animation:saiBounce 1.2s infinite; }
.sai-dot:nth-child(2){animation-delay:.2s}
.sai-dot:nth-child(3){animation-delay:.4s}
@keyframes saiBounce { 0%,80%,100%{transform:scale(.7)} 40%{transform:scale(1)} }

#saichat-input-row {
    display:flex; gap:8px; padding:10px 12px;
    border-top:1px solid #e8ecf0; background:#fff; flex-shrink:0;
}
#saichat-input {
    flex:1; border:1px solid #dce2ea; border-radius:20px;
    padding:8px 14px; font-size:13px; outline:none; resize:none;
    max-height:80px; transition:border-color .2s;
}
#saichat-input:focus { border-color:var(--sai-color); }
#saichat-send {
    background:var(--sai-color); border:none; border-radius:50%;
    width:36px; height:36px; color:#fff; cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:opacity .2s;
}
#saichat-send:disabled { opacity:.5; cursor:default; }
#saichat-branding { text-align:center; font-size:10px; color:#bbb; padding:4px 0 8px; background:#fff; }

/* Links in bot messages */
#saichat-messages .sai-msg.bot a.sai-link,
#saichat-messages a.sai-link {
    color:var(--sai-color) !important; text-decoration:underline !important;
    pointer-events:auto !important; cursor:pointer !important;
    position:relative; z-index:2; display:inline;
}
#saichat-messages .sai-msg.bot a.sai-link:hover { opacity:.75; }

/* ── Video overlay ── */
#saichat-video-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    z-index:999999; display:flex; align-items:center; justify-content:center;
}
.sai-vid-box {
    background:#1a1a2e; border-radius:16px; padding:20px;
    width:min(520px,95vw); color:#fff;
}
.sai-vid-header {
    display:flex; justify-content:space-between; align-items:center;
    font-size:18px; font-weight:700; margin-bottom:14px;
}
.sai-vid-header button { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; }
.sai-vid-videos { display:flex; gap:10px; }
#sai-vid-remote { flex:1; border-radius:10px; background:#000; min-height:200px; }
#sai-vid-local  { width:120px; border-radius:10px; background:#111; }
.sai-vid-status { text-align:center; padding:10px 0 6px; font-size:13px; color:#a0c4ff; }
.sai-vid-controls { display:flex; justify-content:center; gap:10px; margin-top:8px; }
.sai-vid-btn { border:none; border-radius:10px; padding:10px 20px; font-size:14px; cursor:pointer; font-weight:600; }
.sai-vid-btn.red { background:#c62828; color:#fff; }
.sai-vid-btn.red:hover { background:#e53935; }
.sai-vid-btn:disabled { opacity:.4; cursor:default; }