/* ═══════════════════════════════════════════════════════
   CIAE Neural Academy v17 — Chat-First UI
   Viewport completo · Sin scroll de página · Responsive
═══════════════════════════════════════════════════════ */
:root{
  --cna-bg:#07111f;--cna-panel:rgba(15,23,42,.90);--cna-panel2:rgba(30,41,59,.70);
  --cna-border:rgba(148,163,184,.18);--cna-border2:rgba(148,163,184,.10);
  --cna-text:#eef6ff;--cna-muted:#7c93b5;--cna-muted2:#4a637d;
  --cna-blue:#3b82f6;--cna-violet:#8b5cf6;--cna-cyan:#22d3ee;
  --cna-sb-w:260px;
  --cna-topbar-h:58px;
  --cna-strip-h:46px;
  --cna-input-h:auto;
  --cna-font:Inter,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --cna-radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
.cna-hidden{display:none!important}

/* ── LOGIN ── */
.cna-login{min-height:280px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(59,130,246,.12),transparent),#07111f;
  border-radius:24px;font-family:var(--cna-font);color:#dbeafe;text-align:center;padding:40px}
.cna-login-inner strong{display:block;font-size:20px;margin:10px 0}

/* ══════════════════════════════════════════════
   WRAP & APP — ocupa el viewport disponible
══════════════════════════════════════════════ */
.cna-wrap{
  width:100%;
  /* JS calcula el top offset y setea --cna-top */
  margin:0;padding:0;
  font-family:var(--cna-font);
  color:var(--cna-text);
}
.cna-app{
  display:grid;
  grid-template-columns:var(--cna-sb-w) 1fr;
  /* altura se calibra via JS con --cna-available-h */
  height:var(--cna-available-h,calc(100dvh - 80px));
  max-height:var(--cna-available-h,calc(100dvh - 80px));
  min-height:500px;
  background:
    radial-gradient(circle at 20% 0%,rgba(59,130,246,.28),transparent 30%),
    radial-gradient(circle at 90% 5%,rgba(139,92,246,.22),transparent 24%),
    linear-gradient(170deg,#07111f 0%,#0b1628 60%,#130f2f 100%);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  position:relative;
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.cna-sidebar{
  width:var(--cna-sb-w);
  background:rgba(2,6,23,.88);
  border-right:1px solid var(--cna-border2);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:30;
}

/* Brand */
.cna-sb-brand{
  display:flex;align-items:center;gap:10px;padding:14px 14px 10px;
  border-bottom:1px solid var(--cna-border2);flex-shrink:0;
}
.cna-logo{
  width:40px;height:40px;border-radius:12px;flex:0 0 40px;
  background:#fff;display:grid;place-items:center;overflow:hidden;padding:3px;
}
.cna-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block}
.cna-sb-brand-text strong{display:block;font-size:16px;color:#fff;line-height:1}
.cna-sb-brand-text small{display:block;font-size:10px;color:var(--cna-muted);margin-top:2px}
.cna-sb-close{display:none;background:none;border:none;color:var(--cna-muted);font-size:18px;cursor:pointer;margin-left:auto;padding:4px 8px;}

/* Score mini */
.cna-sb-score{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  padding:10px 12px 8px;flex-shrink:0;
}
.cna-sc-item{
  background:rgba(255,255,255,.07);border:1px solid var(--cna-border2);
  border-radius:10px;padding:6px 4px;text-align:center;
}
.cna-sc-ic{display:block;font-size:15px}
.cna-sc-v{
  display:block;font-size:18px;font-weight:900;color:#fff;line-height:1;
  transition:transform .15s;
}
.cna-sc-v.bump{animation:score-bump .3s ease}
@keyframes score-bump{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.cna-sc-l{display:block;font-size:9px;color:var(--cna-muted);text-transform:uppercase;margin-top:1px}

/* User */
.cna-sb-user{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--cna-border2);flex-shrink:0;
}
.cna-userav{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:14px;color:#111827;
  background:linear-gradient(135deg,#fbbf24,#fb7185,#a78bfa);
}
.cna-sb-user-info b{display:block;color:#fff;font-size:12px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.cna-sb-user-info small{color:var(--cna-muted);font-size:10px}

/* Guides header */
.cna-sb-guides-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px 6px;flex-shrink:0;
}
.cna-sb-guides-head span{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--cna-muted);text-transform:uppercase}
.cna-sb-count{
  background:rgba(59,130,246,.24);color:#93c5fd;border-radius:99px;
  padding:1px 8px;font-size:10px;font-weight:900;
}

/* Search */
.cna-sb-search{
  width:calc(100% - 24px);margin:0 12px 6px;height:34px;
  border-radius:10px;border:1px solid var(--cna-border);
  background:rgba(255,255,255,.93);color:#111827;padding:0 12px;
  font-size:13px;outline:none;flex-shrink:0;
}

/* Guide list */
.cna-guide-list{
  flex:1;overflow-y:auto;padding:2px 8px 8px;display:flex;flex-direction:column;gap:3px;
}
.cna-guide-list::-webkit-scrollbar{width:4px}
.cna-guide-list::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border-radius:99px}
.cna-no-guides-msg{color:var(--cna-muted);font-size:13px;padding:12px;text-align:center}

/* Guide button (Channel row) */
.cna-guide{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:8px 9px;border-radius:10px;border:none;
  background:transparent;color:var(--cna-text);cursor:pointer;
  text-align:left;transition:.14s ease;min-height:52px;
}
.cna-guide:hover{background:rgba(255,255,255,.07)}
.cna-guide.active{
  background:rgba(59,130,246,.18);
  box-shadow:inset 2px 0 0 #3b82f6;
}
.cna-guide-av{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff;
}
.cna-av-max{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.cna-av-lia{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.cna-guide-info{flex:1;min-width:0}
.cna-guide-info b{
  display:block;color:#fff;font-size:12.5px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cna-guide-info small{display:block;color:var(--cna-muted);font-size:10px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cna-guide-prog{flex:0 0 32px;text-align:right}
.cna-guide-pct-mini{font-size:10px;color:var(--cna-blue);font-weight:700}
.cna-guide-pct-bar{
  display:block;width:32px;height:3px;background:rgba(255,255,255,.12);
  border-radius:99px;margin-top:3px;overflow:hidden;
}
.cna-guide-pct-bar span{display:block;height:100%;background:var(--cna-blue);border-radius:99px}

/* Sidebar nav */
.cna-sb-nav{
  border-top:1px solid var(--cna-border2);padding:8px;flex-shrink:0;
  display:flex;flex-direction:column;gap:3px;
}
.cna-sb-nav button{
  width:100%;background:transparent;border:none;color:var(--cna-muted);
  text-align:left;padding:8px 10px;border-radius:9px;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:.12s;
}
.cna-sb-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.cna-badge{background:#ec4899;color:#fff;border-radius:99px;font-size:9px;font-weight:900;padding:1px 6px}

/* ══════════════════════════════════════════════
   MAIN — chat-first
══════════════════════════════════════════════ */
.cna-main{
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;min-width:0;
}

/* ── TOP BAR ── */
.cna-topbar{
  height:var(--cna-topbar-h);flex:0 0 var(--cna-topbar-h);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(2,6,23,.70);border-bottom:1px solid var(--cna-border2);
  backdrop-filter:blur(16px);z-index:10;
}
.cna-menu-btn{
  display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:6px;border-radius:8px;flex:0 0 auto;
}
.cna-menu-btn span{display:block;width:20px;height:2px;background:var(--cna-muted);border-radius:2px}
.cna-topbar-tutor-av{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  display:grid;place-items:center;position:relative;
}
.cna-pulse-dot{
  width:9px;height:9px;border-radius:50%;background:#38bdf8;
  box-shadow:0 0 12px #38bdf8;animation:cna-blink 1.3s infinite;
  position:absolute;bottom:0;right:0;border:2px solid #07111f;
}
@keyframes cna-blink{50%{opacity:.3}}
.cna-topbar-info{flex:1;min-width:0}
.cna-topbar-info strong{display:block;color:#fff;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cna-topbar-info small{color:var(--cna-muted);font-size:11px}
.cna-topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cna-topbar-status{
  font-size:11px;color:#38bdf8;font-weight:700;
  background:rgba(56,189,248,.12);border-radius:99px;padding:3px 10px;
  white-space:nowrap;
}
.cna-topbar-progress{display:flex;align-items:center;gap:7px}
.cna-progress-bar{width:80px;height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.cna-progress-bar div{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:99px;transition:width .5s}
.cna-topbar-progress span{font-size:11px;font-weight:900;color:var(--cna-blue)}

/* ── MODE CHIPS ── */
.cna-mode-strip{
  height:var(--cna-strip-h);flex:0 0 var(--cna-strip-h);
  overflow-x:auto;overflow-y:hidden;
  display:flex;align-items:center;padding:0 12px;
  background:rgba(2,6,23,.50);border-bottom:1px solid var(--cna-border2);
  scrollbar-width:none;gap:0;
}
.cna-mode-strip::-webkit-scrollbar{display:none}
.cna-mode-chips{display:flex;gap:6px;align-items:center;padding:2px 0;flex-shrink:0}
.cna-chip{
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  color:#e2e8f0;border-radius:99px;padding:5px 13px;font-size:12.5px;
  font-weight:800;cursor:pointer;transition:.15s;white-space:nowrap;
  font-family:inherit;flex:0 0 auto;
}
.cna-chip:hover{transform:translateY(-1px);opacity:.9}
.cna-chip.active-mode{color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cna-chip-y     {background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.40);color:#fbbf24}
.cna-chip-o     {background:rgba(249,115,22,.20);border-color:rgba(249,115,22,.38);color:#fb923c}
.cna-chip-r     {background:rgba(239,68,68,.20);border-color:rgba(239,68,68,.36);color:#f87171}
.cna-chip-b     {background:rgba(59,130,246,.20);border-color:rgba(59,130,246,.36);color:#60a5fa}
.cna-chip-g     {background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.34);color:#4ade80}
.cna-chip-fire  {background:rgba(239,68,68,.22);border-color:rgba(249,115,22,.44);color:#fb923c;animation:chip-fire 2s ease-in-out infinite}
@keyframes chip-fire{0%,100%{box-shadow:none}50%{box-shadow:0 0 10px rgba(249,115,22,.5)}}
.cna-chip-p     {background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.40);color:#c4b5fd}
.cna-chip-t     {background:rgba(20,184,166,.18);border-color:rgba(20,184,166,.34);color:#2dd4bf}
.cna-chip-gray  {background:rgba(100,116,139,.18);border-color:rgba(100,116,139,.30);color:#94a3b8}
.cna-chip-y.active-mode  {background:#d97706;border-color:#f59e0b}
.cna-chip-o.active-mode  {background:#ea580c;border-color:#f97316}
.cna-chip-r.active-mode  {background:#dc2626;border-color:#ef4444}
.cna-chip-b.active-mode  {background:#2563eb;border-color:#3b82f6}
.cna-chip-g.active-mode  {background:#16a34a;border-color:#22c55e}
.cna-chip-fire.active-mode{background:#c2410c;border-color:#f97316}
.cna-chip-p.active-mode  {background:#7c3aed;border-color:#8b5cf6}
.cna-chip-t.active-mode  {background:#0d9488;border-color:#14b8a6}
.cna-chip-gray.active-mode{background:#475569;border-color:#64748b}

/* ══════════════════════════════════════════════
   WELCOME / CHAT VACÍO
══════════════════════════════════════════════ */
.cna-welcome{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;text-align:center;
  animation:welcome-in .5s ease forwards;
}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cna-welcome-avatars{display:flex;gap:-10px;align-items:flex-end;margin-bottom:8px}
.cna-welcome-av{
  width:90px;height:90px;border-radius:50%;overflow:hidden;
  background:rgba(2,6,23,.6);border:3px solid rgba(255,255,255,.1);
  position:relative;flex:0 0 90px;
}
.cna-welcome-av-lia{margin-left:-16px;border-color:rgba(139,92,246,.4)}
.cna-welcome-av-max{border-color:rgba(59,130,246,.4)}
.cna-welcome-av .av-svg-mini{
  position:absolute;width:200%;height:200%;
  top:-18%;left:-50%;
}
.cna-welcome h2{margin:0;color:#fff;font-size:24px;letter-spacing:-.025em}
.cna-welcome p{margin:0;color:var(--cna-muted);font-size:15px}

/* ══════════════════════════════════════════════
   CHAT — protagonista total
══════════════════════════════════════════════ */
.cna-chat{
  flex:1;overflow-y:auto;
  padding:16px 20px 4px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.cna-chat::-webkit-scrollbar{width:6px}
.cna-chat::-webkit-scrollbar-track{background:transparent}
.cna-chat::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:99px}

/* ── MENSAJE ROW ── */
.cna-msg-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.cna-msg-row--user  {flex-direction:row-reverse;align-self:flex-end;max-width:82%}
.cna-msg-row--tutor {flex-direction:row;align-self:flex-start;max-width:88%}
.cna-msg-row--system{justify-content:center;align-self:center;max-width:100%}
.cna-msg-row--break {align-self:center;width:100%;max-width:600px}

/* Mini avatar en burbujas del tutor */
.cna-msg-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  overflow:hidden;position:relative;
  background:rgba(15,23,42,.8);
  border:2px solid rgba(255,255,255,.1);
}
.cna-msg-av .av-svg-mini{
  position:absolute;width:200%;height:200%;top:-18%;left:-50%;
}
.cna-msg-av--max{border-color:rgba(59,130,246,.4)}
.cna-msg-av--lia{border-color:rgba(139,92,246,.4)}

/* Cuando está hablando: pulso en el avatar del mensaje más reciente */
.cna-app.is-speaking .cna-msg-av--active{
  animation:av-speaking-ring .6s ease-in-out infinite;
  border-color:#38bdf8;
}
@keyframes av-speaking-ring{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.5)}50%{box-shadow:0 0 0 6px rgba(56,189,248,.0)}}

/* Burbuja de mensaje */
.cna-msg-bubble{
  border-radius:18px;padding:11px 15px;
  font-size:14px;line-height:1.58;
  word-break:break-word;
  position:relative;
}

/* Usuario */
.cna-msg-row--user .cna-msg-bubble{
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;
  border-bottom-right-radius:5px;
}

/* Tutor */
.cna-msg-row--tutor .cna-msg-bubble{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
  color:#dbeafe;
  border-bottom-left-radius:5px;
}
.cna-msg-row--tutor .cna-msg-bubble.from-cache{
  border-color:rgba(34,197,94,.25);
}

/* Header del tutor en la burbuja */
.cna-msg-header{
  display:flex;align-items:center;gap:7px;
  margin-bottom:7px;
}
.cna-msg-name{font-size:11px;font-weight:900;color:#93c5fd;text-transform:uppercase;letter-spacing:.06em}
.cna-source-cache{
  background:rgba(34,197,94,.2);color:#4ade80;border-radius:99px;
  padding:1px 7px;font-size:9px;font-weight:900;
}
.cna-msg-time{font-size:10px;color:rgba(255,255,255,.35);margin-top:6px;text-align:right}

/* Sistema */
.cna-msg-row--system .cna-msg-bubble{
  background:rgba(255,255,255,.06);border:1px solid var(--cna-border2);
  color:var(--cna-muted);font-size:12.5px;text-align:center;border-radius:12px;
  padding:8px 16px;
}

/* Error */
.cna-msg-row--error .cna-msg-bubble{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#fca5a5;
  border-radius:12px;font-size:13px;
}

/* Juego — tarjeta especial */
.cna-msg-row--tutor .cna-msg-bubble.cna-game-card{
  background:rgba(30,41,59,.80);
  border:1px solid rgba(148,163,184,.20);
}

/* ── SCROLL DOWN BUTTON ── */
.cna-scroll-down{
  position:absolute;bottom:160px;right:20px;z-index:15;
  width:38px;height:38px;border-radius:50%;
  background:rgba(59,130,246,.85);border:none;color:#fff;
  font-size:18px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:.2s;display:grid;place-items:center;
}
.cna-scroll-down:hover{background:#3b82f6;transform:scale(1.08)}

/* ── LOADING ── */
.cna-loading{
  display:none;align-items:center;gap:10px;padding:10px 20px;
  color:var(--cna-muted);font-size:13px;flex-shrink:0;
}
.cna-loading-av{
  width:34px;height:34px;border-radius:50%;
  background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.3);
  display:grid;place-items:center;font-size:18px;
  animation:cna-think-pulse 1s ease-in-out infinite;
}
@keyframes cna-think-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.cna-loading-dots{display:flex;gap:5px}
.cna-loading-dots span{
  width:7px;height:7px;border-radius:50%;background:#60a5fa;
  animation:cna-dot .85s infinite;
}
.cna-loading-dots span:nth-child(2){animation-delay:.14s}
.cna-loading-dots span:nth-child(3){animation-delay:.28s}
@keyframes cna-dot{50%{transform:translateY(-5px);opacity:.35}}

/* ── VOICE WAVE ── */
.cna-voice-strip{
  display:none;align-items:center;justify-content:center;gap:4px;
  height:24px;padding:0 20px;flex-shrink:0;
}
.cna-voice-strip.active{display:flex}
.cna-voice-strip span{
  width:4px;border-radius:99px;background:linear-gradient(to top,#38bdf8,#8b5cf6);
  height:4px;
}
.cna-voice-strip.active span{animation:cna-wave .5s infinite ease-in-out}
.cna-voice-strip span:nth-child(2){animation-delay:.07s}
.cna-voice-strip span:nth-child(3){animation-delay:.14s}
.cna-voice-strip span:nth-child(4){animation-delay:.21s}
.cna-voice-strip span:nth-child(5){animation-delay:.28s}
@keyframes cna-wave{45%{height:24px}75%{height:8px}}

/* ── INPUT ZONE ── */
.cna-input-zone{
  flex:0 0 auto;
  padding:10px 16px 12px;
  background:rgba(2,6,23,.70);
  border-top:1px solid var(--cna-border2);
  backdrop-filter:blur(16px);
}
.cna-input-hint{
  font-size:11.5px;color:var(--cna-muted);margin-bottom:8px;
  padding:0 2px;line-height:1.4;
}
.cna-input-row{
  display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;
}
.cna-input-row textarea{
  flex:1;min-height:42px;max-height:120px;resize:none;
  border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.96);
  color:#111827;border-radius:12px;padding:10px 14px;font-size:14px;
  font-family:inherit;outline:none;transition:border-color .2s;
  line-height:1.4;
}
.cna-input-row textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.cna-send-btn{
  width:42px;height:42px;border-radius:12px;border:none;flex:0 0 42px;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:.15s;
}
.cna-send-btn:hover{transform:scale(1.06);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.cna-input-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cna-act-btn{
  height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--cna-border);
  background:rgba(255,255,255,.07);color:var(--cna-muted);font-size:13px;
  cursor:pointer;transition:.13s;display:inline-flex;align-items:center;
  text-decoration:none;
}
.cna-act-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.cna-btn-stop.active{background:rgba(239,68,68,.22)!important;border-color:rgba(239,68,68,.4)!important}

/* ── REACTION ── */
.cna-reaction{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:50;font-size:60px;pointer-events:none;opacity:0;
}
.cna-reaction.show{animation:reaction-pop .85s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes reaction-pop{
  0%{opacity:0;transform:translate(-50%,-60%) scale(.4)}
  40%{opacity:1;transform:translate(-50%,-70%) scale(1.4)}
  70%{opacity:1;transform:translate(-50%,-80%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-100%) scale(.8)}
}

/* ── AVATAR SVG ANIMATIONS (heredadas) ── */
.av-breathe{animation:av-idle-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes av-idle-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.av-eyelid{transform-box:fill-box;transform-origin:center top;transform:scaleY(0);animation:av-blink-cycle 6s ease-in-out infinite}
.av-eyelid-r{animation-delay:.05s}
@keyframes av-blink-cycle{0%,87%,100%{transform:scaleY(0)}91%,94%{transform:scaleY(1)}}
.av-mouth-smile{opacity:1}.av-mouth-talk{opacity:0;transform-box:fill-box;transform-origin:top center}
.cna-app.is-speaking .av-mouth-smile{opacity:0}
.cna-app.is-speaking .av-mouth-talk{opacity:1;animation:av-talk-open .22s ease-in-out infinite alternate}
@keyframes av-talk-open{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.cna-app.is-thinking .av-breathe{animation:av-think-bob 1s ease-in-out infinite}
@keyframes av-think-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ── OVERLAY VIEW ── */
.cna-overlay-view{
  position:absolute;inset:0;z-index:40;
  background:rgba(7,17,31,.96);
  overflow-y:auto;padding:24px;
  backdrop-filter:blur(8px);
  animation:overlay-in .22s ease;
}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.cna-overlay-close{
  background:rgba(255,255,255,.1);border:1px solid var(--cna-border);
  color:#dbeafe;border-radius:10px;padding:7px 16px;cursor:pointer;
  font-size:13px;font-weight:700;margin-bottom:16px;display:inline-flex;align-items:center;gap:6px;
}

/* ── BREAK CARD ── */
.cna-break-card{
  background:linear-gradient(135deg,#0f172a,#1e1b4b 50%,#0f172a);
  border:1px solid rgba(139,92,246,.35);border-radius:20px;
  padding:20px 22px;overflow:hidden;position:relative;
  animation:break-appear .6s cubic-bezier(.34,1.56,.64,1) forwards;
  width:100%;
}
@keyframes break-appear{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.cna-break-card::after{content:'';position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 70%);pointer-events:none}
.cna-break-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cna-break-moon{font-size:38px;animation:moon-float 3s ease-in-out infinite;flex:0 0 auto}
@keyframes moon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cna-break-title{margin:0 0 3px;color:#e0e7ff;font-size:19px;font-weight:900}
.cna-break-sub{margin:0;color:#a5b4fc;font-size:13px}
.cna-break-fact{display:flex;align-items:flex-start;gap:10px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.20);border-radius:13px;padding:12px;margin-bottom:10px;color:#ddd6fe;font-size:13px;line-height:1.55}
.cna-break-fact-icon{font-size:20px;flex:0 0 auto}
.cna-break-challenge{display:flex;align-items:flex-start;gap:10px;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.18);border-radius:13px;padding:12px;margin-bottom:14px;color:#bbf7d0;font-size:13px;line-height:1.55}
.cna-break-challenge-icon{font-size:18px;flex:0 0 auto}
.cna-break-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);color:#94a3b8;font-size:12px}
.cna-break-footer strong{color:#fbbf24}
.cna-break-badge{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#e0e7ff;border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800}

/* ── MAILBOX ── */
.cna-mailbox{color:var(--cna-text);font-family:var(--cna-font)}
.cna-mailbox h2{color:#fff;margin:0 0 14px}
.cna-mail-item{border:1px solid var(--cna-border);background:rgba(255,255,255,.07);border-radius:14px;padding:12px;margin:8px 0}
.cna-mail-unread{border-color:rgba(96,165,250,.4);background:rgba(59,130,246,.12)}
.cna-mail-header{display:flex;justify-content:space-between;margin-bottom:7px}
.cna-mail-header strong{color:#fff;font-size:14px}
.cna-mail-header small{color:var(--cna-muted);font-size:11px}
.cna-mail-body{color:#c7d8f3;font-size:13px;line-height:1.6}

/* ── RESPONSIVE ══════════════════════════════ */
@media(max-width:1100px){:root{--cna-sb-w:220px}}

@media(max-width:860px){
  :root{--cna-sb-w:100%}
  .cna-app{grid-template-columns:1fr}
  .cna-sidebar{
    position:absolute;top:0;left:0;bottom:0;
    width:280px;max-width:85vw;
    transform:translateX(-100%);z-index:40;
    border-right:1px solid var(--cna-border);
    box-shadow:8px 0 40px rgba(0,0,0,.5);
  }
  .cna-sidebar.open{transform:translateX(0)}
  .cna-sb-close{display:block}
  .cna-menu-btn{display:flex}
  .cna-main{grid-column:1}
  .cna-topbar{padding:0 12px}
  .cna-topbar-progress{display:none}
  .cna-chat{padding:12px 12px 4px}
}

@media(max-width:520px){
  :root{--cna-topbar-h:50px;--cna-strip-h:40px}
  .cna-topbar-status{display:none}
  .cna-msg-row--user,.cna-msg-row--tutor{max-width:95%}
  .cna-chip{font-size:11.5px;padding:4px 10px}
  .cna-input-zone{padding:8px 10px 10px}
  .cna-input-row textarea{font-size:13px}
}

/* ── FLASH DE SCORE ── */
@keyframes flash-correct{0%,100%{background:transparent}50%{background:rgba(34,197,94,.06)}}
@keyframes flash-wrong{0%,100%{background:transparent}50%{background:rgba(239,68,68,.06)}}
.cna-flash-correct{animation:flash-correct .5s ease}
.cna-flash-wrong{animation:flash-wrong .45s ease}

/* ═══════════════════════════════════════════════════════
   v17.1 FIX — Sidebar height · Layout · Connection error
═══════════════════════════════════════════════════════ */

/* Fix crítico: min-height:0 para que flex:1 funcione en Firefox/Safari */
.cna-sidebar { min-height: 0; }
.cna-guide-list { min-height: 0; flex: 1 1 0; }
.cna-main { min-height: 0; }
.cna-chat { min-height: 0; flex: 1 1 0; }

/* El app necesita altura explícita en el grid para que los hijos flex funcionen */
.cna-app {
  min-height: 0;
  align-items: stretch;
}

/* Fix: sidebar items con flex-shrink correcto */
.cna-sb-brand,
.cna-sb-score,
.cna-sb-user,
.cna-sb-guides-head,
.cna-sb-search,
.cna-sb-nav { flex-shrink: 0; }

/* Error de conexión con botón reintentar */
.cna-msg-row--error .cna-msg-bubble {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.24);
  color: #fca5a5;
  border-radius: 14px;
  font-size: 13px;
  width: 100%;
}
.cna-retry-btn:hover {
  background: rgba(59,130,246,.5) !important;
  color: #fff !important;
}

/* Fix topbar en pantallas con WP admin bar */
.admin-bar .cna-app,
.wp-admin .cna-app {
  /* El admin bar mide 32px en desktop, 46px en mobile */
  /* --cna-available-h se recalcula via JS, este es fallback */
  height: calc(100dvh - 112px);
  max-height: calc(100dvh - 112px);
}

/* Fix scroll horizontal para el mode-strip en mobile */
.cna-mode-strip {
  -webkit-overflow-scrolling: touch;
}

/* Asegurar que el welcome ocupa el espacio correcto */
.cna-welcome {
  flex: 1 1 0;
  min-height: 0;
}