/* Layouts adaptativos. El avatar Live2D es una capa flotante inferior derecha, no una columna. */
html, body { height: 100%; }
.app { display: grid; height: 100vh; height: 100dvh; overflow: hidden; background: transparent; }
.topbar {
  grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--spec); background: var(--glass);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
  z-index: 24;
}
.topbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.stage { grid-area: stage; }
.console { grid-area: console; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: transparent; position: relative; z-index: 2; }
.console .log { flex: 1; min-height: 0; }
.rail { grid-area: rail; display: flex; flex-direction: column; min-height: 0; background: var(--glass); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border-left: 1px solid var(--spec); box-shadow: -18px 0 50px rgb(0 0 0 / 0.28); }
.panels { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel[hidden] { display: none; }
.dock-panel, .dock-mic, .rail-toggle, .scrim { display: none; }

/* Avatar: plano medio, esquina inferior derecha, siempre por encima del fondo y debajo del composer. */
.stage {
  position: fixed; right: max(0px, env(safe-area-inset-right, 0px)); bottom: 78px;
  width: min(34vw, 430px); height: min(72dvh, 680px); z-index: 18;
  display: flex; flex-direction: column; pointer-events: auto;
  cursor: pointer; touch-action: manipulation;
  transition: width var(--t-sheet) var(--ease-out), height var(--t-sheet) var(--ease-out);
}
.stage::before {
  content: ""; position: absolute; inset: -8% -10% -2%; z-index: -1;
  background: radial-gradient(58% 55% at 68% 72%, var(--accent-soft), transparent 72%);
  filter: blur(26px); opacity: 0.9;
}
.pip-source { position: fixed; width: 1px; height: 1px; left: -10px; bottom: -10px; opacity: 0; pointer-events: none; }
.stage-canvas { position: relative; flex: 1; min-height: 0; pointer-events: none; }
.stage-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Fase 31: avatar movible y redimensionable; solo el asa y los botones capturan toques. */
.stage-tools { position: absolute; top: 2px; left: 2px; display: flex; gap: 4px; pointer-events: auto; z-index: 3; }
.stage-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(94, 234, 212, 0.4); background: rgba(7, 10, 18, 0.74); color: #f8fafc; font: 600 15px/1 var(--mono); display: inline-flex; align-items: center; justify-content: center; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; backdrop-filter: blur(10px); }
.stage-drag { cursor: grab; }
.stage-drag:active { cursor: grabbing; }
.stage-btn:active { transform: scale(0.94); }
.stage-fallback { position: absolute; left: 8px; right: 8px; bottom: 8px; background: var(--glass); border: 1px solid var(--spec); border-radius: var(--r-md); backdrop-filter: blur(16px); }

/* Barra de herramientas compacta dentro del composer: nunca una caja flotante sobre el avatar. */
.composer-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.composer-tools .seg { min-height: 34px; padding: 0 10px; }
.composer-tools .emotion-chip { padding: 5px 10px; font-size: 11px; }
.composer-row { display: flex; flex: 1 1 300px; min-width: 0; align-items: center; gap: 8px; }
.dock-mic { display: inline-flex; }

/* Escritorio */
@media (min-width: 1024px) {
  .app {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "console rail";
    transition: grid-template-columns var(--t-sheet) var(--ease-out);
  }
  .app.rail-collapsed { grid-template-columns: minmax(0, 1fr) 0; }
  .app.rail-collapsed .rail { visibility: hidden; border: 0; }
  .rail-toggle { display: inline-flex; }
  .stage { right: clamp(320px, 26vw, 380px); }  /* esquina inferior derecha del área de chat, sin tapar el rail */
  /* Fase 33: el aviso de ancho ya reserva 260 px; no se desperdicia medio panel. */
  .console .log { padding: 22px 26px; padding-right: 26px; }
  .rail { border-left: 1px solid var(--spec); overflow: hidden; }
}

/* Tablet vertical / ventana angosta: una sola columna; el panel es hoja inferior. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "console"; }
  .dock-panel { display: inline-flex; }
  .console .log { padding-bottom: min(30dvh, 280px); }
  .stage { width: min(42vw, 330px); height: min(56dvh, 480px); z-index: 1; }
  .console { z-index: 3; }
}

/* Celular nativo: avatar compacto arriba a la derecha, consola al centro, dock de pulgar abajo. */
@media (max-width: 1023.98px) {
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 78dvh;
    border-top: 1px solid var(--spec-strong); border-left: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -18px 60px rgb(0 0 0 / 0.55);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(105%); visibility: hidden;
    transition: transform var(--t-sheet) var(--ease-drawer), visibility 0s linear var(--t-sheet);
  }
  .rail.is-open { transform: translateY(0); visibility: visible; transition: transform var(--t-sheet) var(--ease-drawer); }
  .rail.is-dragging { transition: none; }
  .rail .sheet-handle { display: flex; }
  .scrim { position: fixed; inset: 0; z-index: 20; background: rgb(5 6 9 / 0.55); display: block; opacity: 0; pointer-events: none; transition: opacity var(--t-sheet) ease; backdrop-filter: blur(4px); }
  .scrim.is-on { opacity: 1; pointer-events: auto; }
  .scrim[hidden] { display: none; }
  .dock-panel { display: inline-flex; }
  .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767.98px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "console"; }
  .topbar { gap: 6px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); }
  .brand { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .brand-copy { min-width: 0; overflow: hidden; }
  .brand-copy h1 { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-copy small { display: none; }
  .topbar-right { gap: 3px; flex: 0 0 auto; }
  .topbar-right .btn { min-width: 36px; padding: 0 7px; }
  .topbar .icon-text span { display: none; }
  .pill { min-height: 34px; padding: 0 9px; font-size: 12px; }
  /* Aris queda como marca de agua arriba a la derecha, DEBAJO de la consola: nunca tapa
     mensajes, composer ni micrófono. */
  .stage { width: min(42vw, 170px); height: min(30dvh, 230px); top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: auto; right: 4px; z-index: 18; opacity: 0.96; }
  .console { z-index: 3; }
  .composer-tools { width: 100%; justify-content: space-between; order: 1; min-width: 0; }
  .composer-tools .seg { min-height: 30px; padding: 0 8px; font-size: 12px; }
  .composer-tools .emotion-chip { display: none; }
  .composer-tools .claude-toggle { min-height: 30px; padding: 0 8px; font-size: 11px; }
  .composer-row { order: 2; flex-basis: 100%; min-width: 0; }
  /* El estado vacío usa el alto real disponible; el avatar ya no reserva espacio. */
  .empty { justify-content: flex-start; padding-top: 8vh; padding-bottom: 16px; }
  .dock-mic { width: 56px; height: 56px; border-radius: 50%; margin-top: -14px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.45); }
  .dock-mic .ico { width: 24px; height: 24px; }
  .composer { gap: 6px; padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); }
  .console .log { padding: 12px; padding-bottom: 12px; }
  .msg { max-width: 94%; }
  dialog.session { margin: auto auto 0; width: 100%; max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.session .sheet-handle { display: flex; margin: -12px 0 -6px; }
  dialog.session[open] { animation: sheet-up var(--t-sheet) var(--ease-drawer); }
  @keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
}

@media (max-width: 380px) {
  .stage { width: min(52vw, 205px); height: min(40dvh, 310px); }
  .brand h1 { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1023.98px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "console"; }
  .stage { width: min(26vw, 150px); height: 62dvh; top: calc(env(safe-area-inset-top, 0px) + 50px); bottom: auto; right: 4px; z-index: 18; }
  .console { z-index: 3; }
  .console .log { padding: 10px; padding-bottom: 10px; }
  .empty { padding-top: 4vh; padding-bottom: 10px; }
  .composer-tools { width: auto; order: 0; }
  .composer-row { order: 0; flex-basis: 240px; }
}

/* Fase 31 · dark glass móvil: menos blur para mantener 60 FPS y batería. */
@media (max-width: 1023.98px) {
  .topbar, .rail, .card, .composer, dialog.session {
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}

/* =========================================================================================
   FASE 32 · Avatar «estilo Alexa» y botones de control ocultos hasta tocar a Aris
   ========================================================================================= */
.stage {
  transition: opacity 340ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stage.is-away {
  opacity: 0; pointer-events: none;
  transform: translateY(18px) scale(0.92);
}
.stage.is-here { opacity: 1; transform: translateY(0) scale(1); }
/* La silueta del avatar recibe el toque (el resto del escenario no captura nada). */
.stage-canvas { pointer-events: auto; cursor: pointer; }
.stage-canvas canvas { pointer-events: auto; }
#stage-tools {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px) scale(0.80);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 240ms;
}
.stage.is-controls-open #stage-tools {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* =========================================================================================
   FASE 33 · mensajes +30 % de ancho en escritorio y móvil horizontal (sin tocar el vertical).
   ========================================================================================= */
@media (min-width: 1024px) {
  .msg { max-width: min(72ch, calc(100% - 260px)); width: fit-content; }
  .msg.bot .msg-body table,
  .msg.bot .msg-body pre { max-width: calc(100% - 250px); }
}
@media (orientation: landscape) and (max-width: 1023.98px) {
  .msg { max-width: min(72ch, calc(100% - 260px)); width: fit-content; }
  .msg.bot .msg-body table,
  .msg.bot .msg-body pre { max-width: calc(100% - 250px); }
}
/* El avatar (canvas y contenedor) recibe el toque en escritorio y móvil. */
#avatar, .stage-canvas { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.stage-btn { touch-action: manipulation; }
/* Fase 33: la burbuja del usuario termina antes de la silueta de Aris, nunca debajo. */
@media (min-width: 1024px) { .msg.me { margin-right: 300px; } }
@media (orientation: landscape) and (max-width: 1023.98px) { .msg.me { margin-right: 170px; } }