:root {
    --bg1: #1b2030; --bg2: #0d1018; --ink: #f4efe6; --muted: #9aa3b5;
    --panel: rgba(255,255,255,.06); --line: rgba(255,255,255,.12);
    --red: #d92b2b; --red-dk: #a81d1d; --yellow: #ffc21a; --orange: #f29a1f;
    --blue: #2f7de1; --cream: #fbe8c8; --screen: #121620; --eye: #fff4dc;
    --led: #6b7280;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background: radial-gradient(ellipse at 50% 35%, var(--bg1), var(--bg2) 70%);
    color: var(--ink); font-family: Nunito, system-ui, sans-serif;
    display: flex; flex-direction: column; overflow: hidden;
  }
  header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
  header h1 { font-size: 18px; margin: 0; font-weight: 800; letter-spacing: .3px; }
  header h1 span { color: var(--yellow); }
  #status { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  #mic { width: 60px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; }
  #mic b { display: block; height: 100%; width: 0; background: #22c55e; transition: width .08s; }
  #micName { font-size: 12px; opacity: .8; margin-right: 6px; }
  #status { max-width: 60vw; text-align: right; }
  #status i { width: 10px; height: 10px; border-radius: 50%; background: var(--led); display: inline-block; transition: background .3s; }

  main { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; }
  #birdy { height: min(68vh, 560px); width: auto; max-width: 92vw; cursor: pointer; overflow: visible; }

  #cam { position: absolute; right: 20px; top: 8px; width: 200px; border-radius: 16px; overflow: hidden;
         border: 2px solid var(--line); background: #000; aspect-ratio: 4/3; }
  #cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
  #cam.off { display: none; }
  #cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
  #cam small { position: absolute; left: 8px; bottom: 6px; font-size: 11px; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 8px; }

  #subs { min-height: 76px; max-width: 760px; margin: 0 auto; padding: 0 20px; text-align: center; }
  #you { color: var(--muted); font-size: 15px; min-height: 20px; }
  #said { font-size: 21px; font-weight: 700; line-height: 1.35; margin-top: 4px; }

  footer { padding: 14px 20px 20px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
  button, select, input {
    font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 10px 16px;
  }
  button { cursor: pointer; font-weight: 700; }
  button:hover { background: rgba(255,255,255,.12); }
  #talk { background: var(--red); border-color: var(--red); padding: 12px 22px; }
  #talk.on { background: #1f9d55; border-color: #1f9d55; }
  #text { width: min(340px, 90vw); }
  select { max-width: 200px; }
  form { display: flex; gap: 8px; }

  /* ---------- animaciones (mismas que el diseño del Mini) ---------- */
  .robot * { transition: transform .4s ease, opacity .3s ease; }
  .gaze { transition: transform .15s ease-out; }
  .eye { transform-box: fill-box; transform-origin: center; }
  .eye.blink { transform: scaleY(.1); }
  .eyes { transform-box: fill-box; transform-origin: center; }
  .happy, .mouth, .dots { opacity: 0; }
  [data-state=listen] .eyes { transform: scale(1.14); }
  [data-state=think] .gaze { transform: translate(9px,-8px) !important; }
  [data-state=think] .dots { opacity: 1; }
  [data-state=happy] .eyes { opacity: 0; }
  [data-state=happy] .happy { opacity: 1; }
  [data-state=talk] .mouth { opacity: 1; animation: talk .24s ease-in-out infinite alternate; }
  .mouth { transform-box: fill-box; transform-origin: center; }
  @keyframes talk { from { transform: scale(.6,.6); } to { transform: scale(1.15,2.2); } }
  .dots circle { animation: dot 1.2s infinite ease-in-out; transform-box: fill-box; }
  .dots circle:nth-child(2) { animation-delay: .2s; } .dots circle:nth-child(3) { animation-delay: .4s; }
  @keyframes dot { 50% { transform: translateY(-4px); } }
  .led { fill: #FDB94A; transition: fill .4s; }
  [data-state=listen] .led { fill: #6BA1E8; animation: pulse 1.4s infinite; }
  [data-state=think] .led { animation: pulse .7s infinite; }
  [data-state=talk] .led { fill: #7BE0A8; animation: pulse .5s infinite; }
  [data-state=happy] .led { fill: #FF7A93; }
  @keyframes pulse { 50% { opacity: .45; } }
  .vb { transform-box: view-box; }
  .bob { animation: bob 3s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-5px); } }
  [data-state=happy] .bob { animation: hop .45s ease-in-out infinite; }
  @keyframes hop { 50% { transform: translateY(-14px); } }
  [data-state=listen] .head { transform: rotate(-9deg) !important; }
  [data-state=think] .head { transform: rotate(6deg) !important; }
  [data-state=happy] .wingL, [data-state=talk] .wingL { animation: flapL .3s ease-in-out infinite alternate; }
  [data-state=happy] .wingR, [data-state=talk] .wingR { animation: flapR .3s ease-in-out infinite alternate; }
  @keyframes flapL { to { transform: rotate(28deg); } }
  @keyframes flapR { to { transform: rotate(-28deg); } }
  [data-state=think] .wingR { transform: rotate(-70deg); }
  .crest { transform-box: view-box; }
  [data-state=happy] .crest, [data-state=listen] .crest { transform: scale(1.12); }

/* ---------- app en la nube: encabezado, panel del equipo, celular ---------- */
header .right { display: flex; align-items: center; gap: 12px; }
header .iconBtn { padding: 8px 12px; }
#subs { max-height: 22vh; overflow-y: auto; }
#said a { color: var(--yellow); }
#toolStatus { color: var(--yellow); font-size: 14px; min-height: 18px; }

#panel { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); background: #141824f2;
         backdrop-filter: blur(8px); border-left: 1px solid var(--line); transform: translateX(100%);
         transition: transform .25s ease; z-index: 20; display: flex; flex-direction: column; }
#panel.open { transform: none; }
#panel .top { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
#panel .top .tab { background: none; border: 0; color: var(--muted); padding: 8px 12px; }
#panel .top .tab.on { color: var(--ink); background: var(--panel); }
#panel .top .close { margin-left: auto; }
#panel .body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }
#panel .row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
#panel .row .grow { flex: 1; min-width: 0; }
#panel .row small { color: var(--muted); display: block; margin-top: 2px; }
#panel .row a { color: var(--ink); text-decoration: none; word-break: break-word; }
#panel .row a:hover { text-decoration: underline; }
#panel .row input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: #1f9d55; }
#panel .empty { color: var(--muted); padding: 24px 0; text-align: center; }
#panel .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
#panel label.check { font-size: 14px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
#panel .del { padding: 4px 10px; font-size: 13px; }
.upload-status { font-size: 14px; color: var(--yellow); }

.gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.gate h1 { margin: 0; }
.gate p { color: var(--muted); max-width: 420px; }

@media (max-width: 640px) {
  header { padding: 10px 14px; }
  #status { max-width: 45vw; font-size: 12px; }
  #micName { display: none; }
  #birdy { height: min(44vh, 420px); }
  #cam { width: 110px; right: 10px; top: 4px; }
  #said { font-size: 18px; }
  footer { padding: 10px 12px 16px; gap: 8px; }
  footer select { display: none; }
  #text { width: 100%; }
  form { flex: 1 1 100%; }
}

/* ---------- emociones de Birdy: svg[data-mood=…] (las pone app.js según cómo se siente) ---------- */
.brows, .hearts, .tear, .blush, .ohmouth { opacity: 0; transition: opacity .4s ease; }
.brow, .eye { transform-box: fill-box; transform-origin: center; transition: transform .4s ease, opacity .3s ease; }
.blush { opacity: 0; }
[data-mood=feliz] .eyes, [data-mood=orgulloso] .eyes, [data-mood=enamorado] .eyes { opacity: 0; }
[data-mood=feliz] .happy, [data-mood=orgulloso] .happy { opacity: 1; }
[data-mood=feliz] .blush, [data-mood=orgulloso] .blush, [data-mood=enamorado] .blush, [data-mood=emocionado] .blush { opacity: .55; }
[data-mood=enamorado] .hearts { opacity: 1; animation: latido 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes latido { 50% { transform: scale(1.12); } }
[data-mood=emocionado] .eye { transform: scale(1.15); }
[data-mood=emocionado] .bob { animation-duration: 1.2s; }
[data-mood=curioso] .eye:nth-child(2) { transform: scale(1.22); }
[data-mood=curioso] .eye:nth-child(1) { transform: scaleY(.8); }
[data-mood=curioso] .brows, [data-mood=confundido] .brows { opacity: 1; }
[data-mood=curioso] .browL { transform: translateY(4px); }
[data-mood=curioso] .browR { transform: translateY(-5px) rotate(-8deg); }
[data-mood=sorprendido] .eye, [data-mood=asustado] .eye { transform: scale(1.12, 1.25); }
[data-mood=sorprendido] .ohmouth, [data-mood=asustado] .ohmouth { opacity: 1; }
[data-mood=sorprendido] .brows, [data-mood=asustado] .brows { opacity: 1; transform: translateY(-6px); }
[data-mood=triste] .eye { transform: scaleY(.7) translateY(5px); }
[data-mood=triste] .brows, [data-mood=preocupado] .brows { opacity: 1; }
[data-mood=triste] .browL, [data-mood=preocupado] .browL { transform: rotate(-16deg) translateY(2px); }
[data-mood=triste] .browR, [data-mood=preocupado] .browR { transform: rotate(16deg) translateY(2px); }
[data-mood=triste] .tear { opacity: 1; animation: lagrima 2.4s ease-in infinite; }
@keyframes lagrima { 0% { transform: translate(-40px, 20px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-40px, 44px); opacity: 0; } }
[data-mood=preocupado] .eye { transform: scaleY(.85); }
[data-mood=confundido] .eye:nth-child(1) { transform: scaleY(.55); }
[data-mood=confundido] .browR { transform: translateY(-6px) rotate(10deg); }
[data-mood=confundido] .browL { transform: rotate(-6deg); }
[data-mood=cansado] .eye { transform: scaleY(.35) translateY(10px); }
[data-mood=aburrido] .eye { transform: scaleY(.45) translateY(6px); }
[data-mood=aburrido] .brows { opacity: 1; transform: translateY(8px); }
[data-mood=enojado] .brows { opacity: 1; }
[data-mood=enojado] .browL { transform: rotate(18deg) translateY(4px); }
[data-mood=enojado] .browR { transform: rotate(-18deg) translateY(4px); }
[data-mood=enojado] .eye { transform: scaleY(.8); }
[data-mood=cansado] .bob, [data-mood=aburrido] .bob, [data-mood=triste] .bob { animation-duration: 5s; }
/* Hablando o escuchando, la boca y los ojos de estado mandan sobre la emoción */
[data-state=talk] .ohmouth { opacity: 0; }
[data-state=happy] .eyes { opacity: 0 !important; }