:root{
      --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937; --bubble:#0b1220; --accent:#60a5fa;
    }
    /* Basis-Dark-Mode für das Overlay */
    #avatar-overlay{
      position:fixed; right:20px; bottom:20px; z-index:9999;
      display:flex; align-items:flex-end; gap:12px;
      background:var(--panel); color:var(--text);
      border:1px solid var(--border); border-radius:14px; padding:12px 12px;
      box-shadow:0 12px 30px rgba(0,0,0,.6);
      max-width:min(92vw, 420px);
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
    }
    #avatar-overlay.hidden{ display:none; }

    #avatar-img{
      width:120px; height:auto; flex:0 0 auto;
      filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));
      animation:idle 3.2s ease-in-out infinite;
    }
    @keyframes idle{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

    #avatar-main{ display:flex; flex-direction:column; gap:8px; }

    #avatar-bubble{
      background:var(--bubble); border:1px solid var(--border);
      border-radius:10px; padding:10px 12px; line-height:1.35; font-size:.95rem;
      position:relative;
    }
    #avatar-bubble::after{
      content:""; position:absolute; left:-6px; bottom:10px; width:0; height:0;
      border-top:6px solid transparent; border-bottom:6px solid transparent;
      border-right:6px solid var(--bubble);
      filter:drop-shadow(-1px 0 var(--border));
    }
    /* Puls-Animation wenn gesprochen wird */
    #avatar-overlay.speaking #avatar-bubble{
      animation:pulse 1.1s ease-in-out infinite;
      border-color:var(--accent);
      box-shadow:0 0 0 2px rgba(96,165,250,.15);
    }
    @keyframes pulse { 0%,100% { transform:scale(1)} 50%{ transform:scale(1.01)} }

    #avatar-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .btn{
      appearance:none; border:1px solid var(--border); background:#0b1220; color:var(--text);
      padding:6px 10px; border-radius:10px; cursor:pointer; font-size:.9rem;
    }
    .btn:hover{ border-color:var(--accent); }
    .iconbtn{
      background:transparent; border:1px solid var(--border); color:var(--muted);
      width:34px; height:34px; border-radius:10px; cursor:pointer; display:grid; place-items:center; font-size:16px;
    }
    .iconbtn:hover{ color:var(--text); border-color:var(--accent); }
    .iconbtn[aria-pressed="true"]{ color:#ef4444; border-color:#ef4444; }

    /* Responsiv kleiner */
    @media (max-width:480px){
      #avatar-img{ width:96px; }
      #avatar-bubble{ font-size:.9rem; }
    }
	#avatar-log{
  max-height:180px; overflow:auto; padding:8px; margin:6px 0 8px;
  background:#0b1220; border:1px solid var(--border); border-radius:10px;
  font-size:.9rem;
}
#avatar-log .msg{ margin:4px 0; line-height:1.3; }
#avatar-log .user::before{ content:"Du: "; color:#9ca3af; }
#avatar-log .assistant::before{ content:"Avatar: "; color:#9ca3af; }
#avatar-inputbar{ display:flex; gap:8px; align-items:center; }
#avatar-input{
  flex:1 1 auto; padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:#0b1220; color:var(--text);
}

.avatar-reopen{
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 44px; height: 44px; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  cursor: pointer;
}
.avatar-reopen:hover{ border-color: var(--accent); }