:root{--bg:transparent;--card:rgba(0,0,0,.88);--text:#e6f5ec;--accent:#00d26a}
*{box-sizing:border-box}
html{
  background:transparent;
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  min-height:100vh;
}
body.compact{ background:transparent; }
/* En modo embed (landing), usamos un fondo oscuro para que el círculo no quede blanco */
body.embed{
  background:#05080b;
}
body.embed .panel{ display:none!important; }
body.embed #app{ background:transparent; }
body.compact.embed{ background:#05080b; }
/* En modo embed (solo círculo), ocultamos también el texto de estado para evitar cartel grande */
body.embed #status{ display:none!important; }
body.compact #app{display:block}
/* Botón X en modo compacto */
.close-mini{position:fixed;right:16px;bottom:16px;z-index:10000;display:none}
body.compact .close-mini{display:grid}
/* En modo embed ocultamos el botón mini de cierre para que no tape el orbe */
body.embed .close-mini{display:none!important}
body.mini-hidden .bot{display:none!important}
#app{
  position:relative;
  width:100%;
  height:100%;
}
.bot {
  width: 260px;
  /* Movible: lo posicionamos fijo y guardamos coords */
  position: fixed;
  right: 24px;
  bottom: 120px;
  z-index: 9999;
  cursor: grab;
  display: grid;
  touch-action: none; /* mejora arrastre en táctil y evita scroll durante drag */
  place-items: center;
}
/* En modo embed (widget dentro de un iframe redondo de 120x120),
   centramos el orbe dentro del iframe para que no quede fuera de vista */
.embed .bot,
body.embed .bot{
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.bot-inner { transform: scale(var(--bot-scale, 1)); transform-origin: bottom right; position: relative; display: grid; place-items: center; }
/* En modo embed, el orbe vive dentro de un iframe pequeño: centramos y aumentamos levemente escala */
body.embed .bot-inner{
  transform-origin: center center;
  transform: scale(0.96);
}
.bot-svg{position:relative;z-index:1;width:100%;height:auto;filter:none}
.glow{display:none}
.panel{
  position:fixed;
  right:24px;
  bottom:24px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:none;
  padding:24px 20px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  max-width:360px;
  width:320px;
  max-height:80vh;
  resize:both;
  overflow:auto;
}
.panel-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brand-logo{width:28px;height:28px;display:block}
.brand-text{font-size:14px;font-weight:500;letter-spacing:.01em;opacity:.9}
.panel-powered{margin-top:10px;display:flex;justify-content:flex-end}
.powered-logo{height:18px;opacity:.9}
h1{margin:0 0 8px;font-size:20px}
#status{opacity:.9;margin:0 0 16px;font-size:14px}
.controls{display:flex;gap:12px;margin-bottom:12px}
.chat-row{display:flex;gap:10px;align-items:center;margin-top:4px}
#chatInput{flex:1 1 auto;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(15,21,32,.85);color:#e6f5ec;padding:10px 14px;font-size:14px;outline:none;min-width:0}
#chatInput::placeholder{color:rgba(230,245,236,.6)}
.chat-send{flex:0 0 auto}
.round{appearance:none;border:0;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .15s ease,filter .15s ease,background .15s ease}
.round[aria-pressed="true"],.round:hover{background:rgba(0,210,106,.25);transform:translateY(-1px)}
.round:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.ico{font-size:18px;line-height:1}
/* Estados visuales del orbe: usamos el logo como base y modulamos escala/opacidad */
.bot.state-idle .bot-logo-svg{animation:float 3.2s ease-in-out infinite}
.bot.state-listening .bot-logo-svg{animation:orbListen 1.8s ease-in-out infinite}
.bot.state-speaking .bot-logo-svg{animation:orbSpeak .9s ease-in-out infinite}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:.9}}
@keyframes orbIdle{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes orbListen{0%,100%{opacity:.9;transform:scale(1.02)}50%{opacity:1;transform:scale(1.08)}}
@keyframes orbSpeak{0%,100%{opacity:.95;transform:scale(1.06)}50%{opacity:1;transform:scale(1.14)}}
@media (max-width:720px){
  .panel{right:12px;left:12px;width:auto;max-width:none}
}