:root{
  --pri:#4361ee;          /* azul corporativo del portal */
  --pri-dark:#3a0ca3;     /* morado */
  --pri-light:#eef1ff;
  --ink:#1a1a2e;
  --grey:#6b7280;
  --bg:#f0f2f5;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.hidden{display:none !important}

/* ---------- Cabecera y menú (idénticos al portal) ---------- */
.header{background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff;padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.header-left{flex:1;text-align:left}
.dept-name{font-size:.72rem;line-height:1.5;font-weight:500;opacity:.92;text-transform:uppercase;letter-spacing:.3px}
.header-center{flex:2;text-align:center}
.header h1{font-size:1.4rem;font-weight:600}
.header p{font-size:.83rem;opacity:.85;margin-top:3px}
.header-right{flex:1;text-align:right}
.header-logo{height:55px;max-width:120px;object-fit:contain}
.top-menu{background:#1f2937;color:#fff;padding:8px 20px;display:flex;gap:6px;align-items:center;
  flex-wrap:wrap;font-size:.83rem;border-bottom:3px solid #4361ee;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.15)}
.top-menu .menu-item{color:rgba(255,255,255,.85);text-decoration:none;padding:5px 12px;border-radius:6px;
  font-weight:500;transition:.2s}
.top-menu .menu-item:hover{background:rgba(255,255,255,.15);color:#fff}
.top-menu .menu-item.active{background:#4361ee;color:#fff}
.top-menu .sep{color:rgba(255,255,255,.4);margin:0 4px}

/* ---------- Bienvenida ---------- */
.welcome{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:30px 20px}
.welcome-card{background:#fff;border-radius:20px;box-shadow:var(--shadow);max-width:480px;width:100%;
  padding:32px;text-align:center}
.welcome-bot{font-size:3rem;line-height:1;margin-bottom:6px}
.welcome-card h1{font-size:1.4rem;line-height:1.25;margin:.2em 0 .4em;color:var(--pri-dark)}
.subtitle{color:var(--grey);font-size:.93rem;margin:0 0 22px}
.field-label{text-align:left;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.field-label span{font-weight:400;color:var(--grey)}
#studentName{width:100%;padding:11px 14px;border:1.5px solid #d7ddf5;border-radius:12px;font-size:1rem;
  outline:none;transition:border-color .2s}
#studentName:focus{border-color:var(--pri)}
.avatar-picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:4px 0 10px}
.avatar-opt{width:52px;height:52px;border-radius:50%;border:3px solid transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--pri-light);
  transition:transform .12s,border-color .12s;overflow:hidden}
.avatar-opt img{width:100%;height:100%;object-fit:cover}
.avatar-opt:hover{transform:scale(1.08)}
.avatar-opt.selected{border-color:var(--pri);transform:scale(1.08)}
.upload-own{margin:6px 0 18px}
.upload-own-btn{display:inline-block;font-size:.85rem;color:var(--pri-dark);cursor:pointer;
  border:1.5px dashed #b9c3ef;border-radius:10px;padding:7px 14px}
.upload-own-btn:hover{background:var(--pri-light)}
.primary-btn{width:100%;background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff;border:none;
  border-radius:12px;padding:13px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:filter .2s}
.primary-btn:hover{filter:brightness(1.08)}
.legal{font-size:.72rem;color:var(--grey);margin:16px 0 0;line-height:1.4}

/* ---------- Chat ---------- */
.app{flex:1;display:flex;flex-direction:column;max-width:1100px;width:100%;margin:0 auto;background:#fff;
  min-height:0}
/* Espacio de trabajo: dos columnas (chat | avatar) */
.workspace{flex:1;display:flex;min-height:0}
.chat-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid #e3e8f7}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
  background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-bot{font-size:1.7rem;background:rgba(255,255,255,.18);width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.topbar-left strong{display:block;font-size:1rem}
.status{font-size:.75rem;color:#c9f7e3}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-badge{display:flex;align-items:center;gap:7px;font-size:.85rem;background:rgba(255,255,255,.15);
  padding:4px 10px 4px 4px;border-radius:20px}
.user-badge .ava{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1rem;background:#fff;overflow:hidden}
.user-badge .ava img{width:100%;height:100%;object-fit:cover}
.ghost-btn{background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:50%;
  font-size:1.1rem;cursor:pointer}
.ghost-btn:hover{background:rgba(255,255,255,.32)}

.messages{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 16px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.msg{display:flex;gap:10px;max-width:88%;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .bubble{padding:12px 15px;border-radius:var(--radius);line-height:1.5;font-size:.96rem;
  white-space:pre-wrap;word-wrap:break-word}
.msg .ava{flex:0 0 36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;overflow:hidden}
.msg .ava img{width:100%;height:100%;object-fit:cover}
.msg.bot{align-self:flex-start}
.msg.bot .ava{background:var(--pri-light)}
.msg.bot .bubble{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06);border-top-left-radius:4px}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg.user .ava{background:#dfe5fb}
.msg.user .bubble{background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff;border-top-right-radius:4px}
.bubble strong{font-weight:700}
.bubble code{background:rgba(0,0,0,.07);padding:1px 5px;border-radius:5px;font-size:.9em}
.msg.user .bubble code{background:rgba(255,255,255,.22)}
.sources{font-size:.72rem;color:var(--grey);margin-top:6px}
.typing span{display:inline-block;width:7px;height:7px;margin-right:3px;background:var(--grey);
  border-radius:50%;animation:blink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

.file-pill{display:flex;align-items:center;gap:8px;margin:0 16px;padding:7px 12px;background:var(--pri-light);
  border-radius:10px;font-size:.85rem;color:var(--pri-dark)}
.file-pill button{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--grey);font-size:.9rem}

.composer{display:flex;align-items:flex-end;gap:8px;padding:12px 16px 4px;flex-shrink:0}
.file-pill,.disclaimer{flex-shrink:0}
.attach-btn{cursor:pointer;font-size:1.3rem;padding:8px;color:var(--pri);border-radius:10px}
.attach-btn:hover{background:var(--pri-light)}
#input{flex:1;resize:none;max-height:140px;padding:11px 14px;border:1.5px solid #d7ddf5;border-radius:14px;
  font-size:1rem;font-family:inherit;outline:none}
#input:focus{border-color:var(--pri)}
.send-btn{background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff;border:none;width:44px;height:44px;
  border-radius:50%;font-size:1.1rem;cursor:pointer;flex:0 0 44px}
.send-btn:hover{filter:brightness(1.08)}
.send-btn:disabled{background:#a9b4e6;cursor:not-allowed}
.disclaimer{text-align:center;font-size:.72rem;color:var(--grey);margin:4px 0 8px}

/* ---------- Selector de personaje (bienvenida) ---------- */
.char-picker{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:4px 0 14px}
.char-opt{display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;padding:12px 8px;
  border:2px solid #e1e6f7;border-radius:14px;cursor:pointer;background:#fafbff;transition:.15s}
.char-opt:hover{transform:translateY(-2px);border-color:#b9c3ef}
.char-opt.selected{border-color:var(--pri);background:var(--pri-light);box-shadow:0 4px 12px rgba(67,97,238,.18)}
.char-ico{font-size:2.1rem;line-height:1}
.char-lbl{font-size:.82rem;font-weight:600;color:var(--pri-dark);text-align:center}
.voice-pref{display:flex;align-items:center;gap:8px;justify-content:center;font-size:.88rem;
  color:var(--grey);margin:2px 0 16px;cursor:pointer}
.voice-pref input{width:16px;height:16px;accent-color:var(--pri)}

/* ---------- Escenario del avatar 3D (columna derecha) ---------- */
.stage{position:relative;flex:0 0 350px;align-self:stretch;min-height:0;
  background:radial-gradient(120% 80% at 50% 12%,#eef2ff 0%,#dfe6fb 55%,#cdd8f5 100%);overflow:hidden}
.avatar-canvas{width:100%;height:100%}
.avatar-canvas canvas{display:block;width:100%!important;height:100%!important}
.avatar-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--pri-dark);font-size:.9rem;font-weight:500;background:rgba(238,242,255,.6)}

/* En pantallas estrechas (móvil/tablet) ocultamos el avatar: solo el chat */
@media(max-width:820px){
  .stage{display:none}
  .chat-col{border-right:none}
  /* Menú en una sola línea deslizable horizontalmente (ahorra alto vertical) */
  .top-menu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .top-menu .menu-item{flex:0 0 auto}
}
@media(max-width:700px){
  .header{padding:10px 16px}
  .header h1{font-size:1.05rem}
  .header p{font-size:.72rem}
  .header-logo{height:42px}
  .welcome-card{padding:24px 18px}
  .msg{max-width:96%}
}
@media(max-width:480px){
  .header-left{display:none}        /* ocultamos el nombre del departamento en pantallas muy pequeñas */
  .header-center{flex:1}
  .messages{padding:14px 12px}
  .composer{padding:10px 12px 4px}
}