/* Launcher Button Basis */
.el-orb-btn {
    position: fixed; bottom: 20px; right: 20px;
    background: transparent; border: none; cursor: pointer; z-index: 9999;
    padding: 0; outline: none;
}

.el-launcher-box {
    display: flex; 
    align-items: center; 
    gap: 12px; 
    background: #fff; 
    padding: 6px 16px 6px 6px; 
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    height: 56px;
    min-width: 170px;
    transition: transform 0.1s;
    box-sizing: border-box;
}
.el-launcher-box:active { transform: scale(0.97); }


/* --- LINKS: Avatar / Visualizer Container --- */
.el-avatar-container {
    width: 44px; /* Standardbreite für Avatar */
    height: 44px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* NEU: Weiche Animation für die Breitenänderung */
    transition: width 0.3s ease-out;
}

/* Avatar Bild */
.el-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* Visualizer (Balken) */
#el-voice-viz {
    width: 100%; 
    height: 100%;
    display: none; 
    align-items: center;
    justify-content: center;
    
    /* Deine gewünschten Abstände */
    gap: 8px; 
}

/* Die 5 Balken */
.el-voice-viz div {
    /* Deine gewünschte Breite */
    width: 12px; 
    
    /* FIX: Nur EINE Hintergrundfarbe! */
    background: #39ff14; /* Neon Grün */
    /* background: var(--el-brand); <--- DIESE ZEILE WURDE GELÖSCHT */
    
    /* Optional: Neon Glow Effekt */
    box-shadow: 0 0 10px #39ff14;
    
    border-radius: 4px;
    height: 6px; 
    transition: height 50ms linear; 
    min-height: 4px;
}


/* --- RECHTS: Text Label --- */
.el-launcher-label {
    flex-grow: 1; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px;
    padding-right: 2px;
    font-weight: 600; 
    font-family: sans-serif; 
    color: #333; 
    font-size: 15px; 
    white-space: nowrap; /* Text nicht umbrechen */
}

#el-mic-icon { 
    font-size: 20px; 
    color: var(--el-brand); 
    flex-shrink: 0;
}


/* --- ZUSTAND: AKTIV (Verbunden) --- */

/* 1. Text rutscht nach rechts */
.el-launcher-box.is-active-voice .el-launcher-label {
    justify-content: flex-end; 
}

/* 2. NEU: Container wächst automatisch mit */
.el-launcher-box.is-active-voice .el-avatar-container {
    /* Berechnet: (5 * 12px) + (4 * 8px) = 92px + Puffer */
    width: 95px; 
}


/* --- Panel Styles --- */
#el-agent-panel {
    position: fixed; bottom: 90px; right: 20px;
    width: 380px; height: 500px;
    background: var(--el-panel-bg);
    border-radius: 16px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    z-index: 99999;
}
.el-panel-header { padding: 15px 20px; border-bottom: 1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.el-panel-header h3 { margin:0; font-size:16px; }
#el-close-btn { background:none; border:none; font-size:24px; cursor:pointer; color: #888; }
#el-message-area { flex: 1; padding: 15px; overflow-y: auto; background: #f9f9f9; }
.el-input-area { padding: 15px; border-top: 1px solid #eee; background: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
#el-text-form { display: flex; gap: 10px; }
#el-text-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; outline: none; }
#el-text-send { background: var(--el-brand); color: #fff; border: none; padding: 0 15px; border-radius: 8px; cursor: pointer; }
.el-row { display: flex; gap: 10px; margin-bottom: 10px; }
.el-row.user { justify-content: flex-end; }
.el-message { padding: 10px 14px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.4; }
.el-message.assistant { background: #fff; color: #000; border: 1px solid #eee; }
.el-message.user { background: var(--el-brand); color: #fff; }
.el-orb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hidynamic-hidden-panel { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 480px) {
    #el-agent-panel { width: 90%; left: 5%; right: 5%; }
}