/* Vivian Demo – móvil primero */
:root{
  --bg:#ffffff; --panel:#f8fafc; --ink:#1e293b; --muted:#64748b;
  --brand:#3b82f6; --brand2:#8b5cf6; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --card:#ffffff; --border:#e2e8f0;
  --topbar:56px; /* altura aprox del header */
  --composerH:64px; /* altura aprox de la barra de input */
}
*{box-sizing:border-box}
html,body{height:100dvh; min-height:100dvh; overflow:hidden}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  background: radial-gradient(1200px 600px at 10% -10%, #f1f5f9 0%, transparent 60%) no-repeat, var(--bg);
  color:var(--ink);
}
.topbar{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(6px);
  background:linear-gradient(90deg,#ffffffcc,#ffffffcc); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(180deg,var(--brand),var(--brand2)); box-shadow:0 6px 24px #8b5cf644}
.title{font-weight:800; letter-spacing:.2px}
.title .muted{color:var(--muted); font-weight:600}
.status{display:flex; gap:8px}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#475569; border:1px solid var(--border)}

.container{display:grid; gap:16px; padding:16px; max-width:1100px; margin:0 auto}
@media (min-width: 960px){ .container{grid-template-columns:1fr 1fr} }

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 8px 24px #0000001a}
.card h2{margin:0 0 8px}
.hint{color:var(--muted); margin:6px 0 12px}
.row{display:flex; align-items:center}
.wrap{flex-wrap:wrap}
.gap{gap:8px}
.grow{flex:1}
.subtle{color:#c7d2fe; font-size:12px; margin-bottom:4px}
.small{font-size:12px}
.muted{color:var(--muted)}
.pill{border:1px dashed var(--border); padding:6px 10px; border-radius:999px}

.field{display:flex; flex-direction:column; gap:6px}
.field input,.field textarea{background:#ffffff; border:1px solid var(--border); border-radius:10px; color:var(--ink); padding:10px}
textarea{min-height:68px; resize:vertical}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

.btn{background:#3b82f6; color:#fff; border:1px solid var(--border); padding:10px 14px; border-radius:12px; cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#3b82f6,#5b21b6)}
.btn.ghost{background:transparent}

.switch{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:#ffffff}
.switch input{accent-color:#3b82f6}

.file input{display:none}
.file span{display:inline-block; background:#f8fafc; border:1px dashed var(--border); padding:10px 12px; border-radius:10px; cursor:pointer}

.micBtn{
  width:72px;height:72px;border-radius:50%;border:none;
  background: radial-gradient(circle at 30% 25%, #5b21b6, #3b82f6);
  box-shadow: 0 8px 28px #3b82f655; font-size:28px; cursor:pointer;
}
.micBtn[aria-pressed="true"]{filter:brightness(1.15) contrast(1.05); box-shadow:0 0 0 4px #3b82f633, 0 8px 28px #3b82f655}

.avatarWrap{position:relative; background:transparent; border:1px solid var(--border); border-radius:14px; overflow:hidden; height:320px}
.avatarWrap iframe{width:100%; height:100%; border:0; display:block; background:transparent}
.overlay{position:absolute; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(45deg,#0c133022,#0c133022 10px,#0c133007 10px,#0c133007 20px); color:#cfe0ff; text-align:center}

.log{background:#0c1330; border:1px solid var(--border); border-radius:12px; padding:10px; height:120px; overflow:auto; margin-top:10px}

.answer{margin-top:10px; background:#0c1330; border:1px solid var(--border); border-radius:12px; padding:12px}
.answer .cite{font-size:12px; color:#9fb1ff; margin-top:8px}

.footer{display:flex; justify-content:space-between; padding:16px; color:#cfe0ff88}
/* Clean layout like the mobile app */
.topbar{height:56px}
.brand .title{font-size:20px}
.mainCompact{max-width:760px; margin:0 auto; padding:16px; height:calc(100dvh - var(--topbar) - var(--composerH) - 16px - env(safe-area-inset-bottom)); display:grid; grid-template-rows:1fr}
.avatarCard{background:transparent; border-radius:24px; overflow:hidden; height:100%; position:relative}
.avatarCard iframe{width:100%; height:100%; display:block; border:0; background:transparent}
.composer{position:fixed; left:0; right:0; bottom:16px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));}
.languageSelector{position:relative; flex-shrink:0; align-self:flex-start;}
.languageToggle{display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:18px; border:1px solid var(--border); background:#ffffff; color:#1e293b; font-size:0.9rem; cursor:pointer; min-width:0; transition:border-color .2s ease, box-shadow .2s ease;}
.languageToggle:hover{border-color:rgba(59,130,246,0.4); box-shadow:0 0 0 2px rgba(59,130,246,0.12);}
.languageToggle:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(59,130,246,0.35);}
.languageToggle[aria-expanded="true"] .languageCaret{transform:rotate(180deg);}
.languageFlag{display:inline-block; width:20px; height:20px; border-radius:50%; background-size:cover; background-repeat:no-repeat; box-shadow:0 0 0 1px rgba(15,23,42,0.08);}
.languageName{font-size:0.85rem; font-weight:600; color:var(--muted);}
.languageCaret{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--muted); margin-left:4px; transition:transform .2s ease;}
.languageMenu{position:absolute; bottom:calc(100% + 6px); left:0; display:none; flex-direction:column; gap:4px; background:#ffffff; border:1px solid var(--border); border-radius:12px; box-shadow:0 -14px 32px rgba(15,23,42,0.18); padding:8px; min-width:160px; max-width:min(220px, calc(100vw - 48px)); z-index:1000;}
.languageMenu.open{display:flex;}
.languageMenuButton{display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent; padding:6px 10px; border-radius:8px; font-size:0.9rem; cursor:pointer; color:var(--ink); transition:background .2s ease;}
.languageMenuButton .languageFlag{width:20px; height:20px;}
.languageMenuButton:hover,.languageMenuButton:focus-visible{background:rgba(59,130,246,0.12); outline:none;}
.languageMenuButton[aria-selected="true"]{background:rgba(59,130,246,0.16); color:var(--brand); font-weight:600;}
.languageMenuButton:disabled{opacity:0.5; cursor:not-allowed;}
.languageMenuButton:disabled:hover{background:transparent;}
.flag-auto{background:linear-gradient(135deg,#3b82f6 0%,#0ea5e9 50%,#10b981 100%);}
.flag-es{background:linear-gradient(90deg,#006341 0%,#ffffff 50%,#ce1126 100%);}
.flag-en{background-image:linear-gradient(180deg,#b22234 0%,#b22234 20%,#ffffff 20%,#ffffff 40%,#b22234 40%,#b22234 60%,#ffffff 60%,#ffffff 80%,#b22234 80%,#b22234 100%),linear-gradient(90deg,#3c3b6e 0%,#3c3b6e 60%,transparent 60%,transparent 100%); background-size:100% 100%,50% 60%; background-position:0 0,0 0; background-repeat:no-repeat;}
.composerInner{flex:1; display:flex; align-items:center; gap:8px; max-width:100%; width:100%; background:#f8fafc; border:1px solid var(--border); border-radius:24px; padding:8px 12px;}
.composerInner input{flex:1; min-width:0; border:none; outline:none; background:transparent; color:#1e293b; font-size:16px; -webkit-appearance:none; border-radius:0;}
.actionBtn{width:40px; height:40px; border-radius:50%; background:linear-gradient(180deg,#3b82f6,#5b21b6); border:none; color:#fff; display:grid; place-items:center; box-shadow:0 4px 12px #3b82f655; cursor:pointer; transition:all 0.2s ease; flex-shrink:0;}
.actionBtn:hover{transform:translateY(-1px); box-shadow:0 6px 16px #3b82f677;}
.actionBtn:active{transform:translateY(0);}
.actionBtn[aria-pressed="true"]{background:linear-gradient(180deg,#ef4444,#dc2626); box-shadow:0 4px 12px #ef444455;}
@media (max-width:600px){
  .composer{padding:0 12px; gap:6px; bottom:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .composerInner{padding:6px 10px; gap:6px; border-radius:20px;}
  .languageToggle{height:32px; padding:0 8px;}
  .languageMenu{left:auto; right:0; min-width:140px; max-width:calc(100vw - 40px);}
  .languageMenuButton{padding:6px 8px; font-size:0.85rem;}
  .languageMenuButton .languageFlag{width:18px; height:18px;}
  .languageOptionName{font-size:0.8rem;}
  #textInput{font-size:15px;}
  .actionBtn{width:36px; height:36px;}
}
@media (max-width:380px){
  .composerInner{padding:5px 8px; gap:4px;}
  .languageToggle{height:34px; padding:0 6px;}
  .languageMenu{min-width:120px;}
}
@media(min-width:960px){ .avatarCard{height:72vh} .mainCompact{height:auto} }

/* Pipeline status */
.statusPanel{background:#ffffff; border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.overlayOnAvatar{position:absolute; left:10px; right:10px; top:10px; pointer-events:none; background:#ffffffaa; backdrop-filter:saturate(140%) blur(4px);}
.overlayOnAvatar .progressBar{box-shadow:0 2px 10px #00000033}
.statusHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.statusTitle{font-weight:700}
.statusText{color:#64748b; font-size:12px}
.progressBar{height:6px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; overflow:hidden; margin-bottom:6px}
.progressFill{height:100%; background:linear-gradient(90deg,#3b82f6,#5b21b6)}
/* Teleprompter compacto */
.teleprompt{display:grid; gap:2px}
.tpRow{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tpRow.raw{opacity:.35; font-size:13px}
.tpRow.lsm{font-size:14px}
.tpRow.lsm .token{opacity:.35; transition:opacity .2s ease, color .2s ease}
.tpRow.lsm .token.solid{opacity:1; color:#1e293b}