/*********************************************************************
 * 1 · Footer launchers
 *********************************************************************/

.el-orb-btn{
    position:fixed;bottom:20px;right:20px;width:64px;height:64px;padding:0;
    border:none;background:transparent;cursor:pointer;z-index:9998;
}
.el-orb-btn:hover canvas{filter:none;}
#el-chat-orb{width:100%;height:100%;display:block;pointer-events:none;}

.el-launcher-box{
    position:fixed;bottom:20px;right:20px;width:210px;height:60px;padding:8px;
    display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;
    box-shadow:var(--w-shadow-colored,0 2px 24px 1px rgba(0,0,0,.15));
    border:none;cursor:pointer;z-index:9998;
}
.el-launcher-box canvas{width:36px;height:36px;flex:0 0 36px;}
.el-launcher-label{
    flex:1;display:flex;justify-content:center;align-items:center;gap:6px;
    background:#000;color:#fff;border-radius:8px;font-size:14px;height:36px;
    user-select:none;pointer-events:none;
}
.el-launcher-box:hover{background:#fff;}
.el-launcher-box:hover .el-launcher-label{background:#000;}

#el-chat-widget-container>.el-orb-btn{width:64px!important;height:64px!important;border-radius:50%!important;transform:none!important;}
#el-chat-widget-container>.el-launcher-box{width:210px!important;height:60px!important;padding:8px!important;border-radius:12px!important;transform:none!important;}
#el-chat-widget-container>.el-launcher-box .el-launcher-label{display:flex!important;}

/*********************************************************************
 * 2 · Docked 64 px orb (.el-docked)
 *********************************************************************/
#el-agent-panel .el-orb-btn.el-docked,
#el-agent-panel .el-launcher-box.el-docked{
    position:absolute;top:14px;left:14px;width:64px;height:64px;padding:0;
    border-radius:50%!important;background:transparent!important;
}
#el-agent-panel .el-orb-btn.el-docked canvas,
#el-agent-panel .el-launcher-box.el-docked canvas{width:64px;height:64px;}
#el-agent-panel .el-launcher-box.el-docked .el-launcher-label{display:none!important;}

/*********************************************************************
 * 3 · Intro orb 192 px (.el-center)
 *********************************************************************/
#el-agent-panel .el-orb-btn.el-center,
#el-agent-panel .el-launcher-box.el-center{
    position:absolute;top:50%;left:50%;width:192px;height:192px;padding:0;
    border-radius:50%;transform:translate(-50%,-50%);background:transparent!important;box-shadow:none!important;
}
#el-agent-panel .el-orb-btn.el-center canvas,
#el-agent-panel .el-launcher-box.el-center canvas{width:192px;height:192px;}
#el-agent-panel .el-launcher-box.el-center .el-launcher-label{display:none!important;}

/*********************************************************************
 * 4 · Widget container / panel
 *********************************************************************/
#el-chat-widget-container{font-family:sans-serif;}
#el-agent-panel{
    position:fixed;bottom:120px;right:36px;width:400px;height:550px;max-height:calc(100vh - 40px);
    background:var(--el-panel-bg,#fff);border-radius:24px;box-shadow:0 5px 20px rgba(0,0,0,.25);
    display:flex;flex-direction:column;overflow:hidden;z-index:9999;
    transform-origin:bottom right;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease-out;
    transform:scale(0);opacity:0;pointer-events:none;
}
#el-agent-panel.is-open{transform:scale(1);opacity:1;pointer-events:auto;}
#el-agent-panel.is-open~#el-orb-btn canvas{opacity:.4;}

/*********************************************************************
 * 5 · Panel header
 *********************************************************************/
.el-panel-header{padding:40px 20px;background:var(--el-header-bg,#fff);position:relative;}
.el-panel-header h3{display:none;}
#el-close-btn{
    position:absolute;top:3px;right:13px;padding:2px;border:none;background:none;
    color:rgba(0,0,0,.25);font-size:18px;cursor:pointer;
}
#el-status-container{display:none!important;}

/*********************************************************************
 * 6 · Messages
 *********************************************************************/
#el-message-area{flex-grow:1;padding:16px;overflow-y:auto;background:#fdfdfd;}
.el-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;clear:both;}
.el-row.user{justify-content:flex-end;}
.el-message{
    margin-bottom:12px;padding:8px 12px;border-radius:18px;max-width:80%;line-height:1.4;
    display:inline-block;clear:both;
}
.el-message.user{
    background:var(--el-msg-user-bg,#000);color:var(--el-msg-user-txt,#fff);
    border-bottom-right-radius:4px;
}
.el-message.assistant{
    background:var(--el-msg-ai-bg,#f3f4f6);color:var(--el-msg-ai-txt,#000);
    border-bottom-left-radius:4px;
}
.el-orb-avatar{width:20px;height:20px;flex:0 0 20px;object-fit:cover;border-radius:9999px;}
@keyframes bubblePop{0%{transform:scale(.7);opacity:0;}45%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
.pop{animation:bubblePop .25s cubic-bezier(.18,.84,.32,1) both;}

/*********************************************************************
 * 7 · Status bubble
 *********************************************************************/
#el-status-bubble{
    position:absolute;top:18px;left:90px;background:#f3f4f6;color:#000;
    font-size:12px;line-height:1;padding:4px 10px;border-radius:14px;
    white-space:nowrap;pointer-events:none;
}

/*********************************************************************
 * 8 · Input
 *********************************************************************/
.el-input-area{padding:16px;background:var(--el-footer-bg,#fff);}
#el-text-form{position:relative;display:flex;}

/* full-width voice button */
#el-start-voice-btn{
    width:100%;padding:10px;margin-bottom:10px;
    border:1px solid var(--el-voice-btn-border,#000);
    background:var(--el-voice-btn-bg,#fff);
    color:var(--el-voice-btn-txt,#000);
    border-radius:8px;font-weight:bold;cursor:pointer;
    display:flex;justify-content:center;align-items:center;gap:8px;
}
#el-start-voice-btn:hover{background:#d0e7ff;}
#el-start-voice-btn:disabled{
    background:#e9ecef;color:#6c757d;border-color:#ced4da;cursor:not-allowed;
}

#el-text-input{
    flex-grow:1;padding:10px 15px;padding-right:40px!important;font-size:14px;
    border:1px solid #e5e7eb!important;border-radius:10px!important;
    background:var(--text_input_bg,#fff)!important;
}
#el-text-input:focus{
    outline:none!important;border:2px solid var(--el-brand,#000)!important;
}
#el-text-send{
    position:absolute!important;top:50%;right:12px;transform:translateY(-50%);
    height:24px;width:24px;background:none!important;border:none!important;padding:0!important;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--el-brand,#000)!important;
}
#el-text-send:disabled{opacity:.5;cursor:not-allowed;}
#el-text-send svg *{stroke:currentColor!important;}

/*********************************************************************
 * 9 · Mobile tweaks
 *********************************************************************/
@media (max-width:600px){
    #el-agent-panel{
        position:fixed;bottom:80px;left:0;right:0;margin:auto;width:auto;
        max-width:296px;max-height:450px;height:calc(100% - 80px);
        border-radius:24px;box-shadow:0 2px 40px 1px rgba(0,0,0,.12);
        display:flex;flex-direction:column;
    }
}

/*********************************************************************
 * 10 · Intro voice-button overlay (orb-centred)
 *********************************************************************/
#el-agent-panel .el-orb-btn.el-center~.el-input-area #el-start-voice-btn{
    position:absolute;left:50%;top:calc(50% + 88px);transform:translate(-50%,-50%);
    width:64px;height:64px;padding:0;border-radius:50%;
    background:var(--el-intro-voice-bg,var(--el-voice-btn-bg,#fff));
    border:2px solid var(--el-intro-voice-txt,var(--el-voice-btn-border,#000));
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    font-size:0;z-index:10000;
    display:flex;justify-content:center;align-items:center;
}
#el-agent-panel .el-orb-btn.el-center~.el-input-area #el-start-voice-btn span{display:none;}
#el-agent-panel .el-orb-btn.el-center~.el-input-area #el-start-voice-btn i{
    font-size:26px;color:var(--el-intro-voice-txt,var(--el-voice-btn-txt,#000));
}