/* Lucy en el celular. La caja de la computadora vive en lucy pc. */
#apertura { display: none; }
@media (max-width: 820px) {
  #inicio.inicio { padding: 8px 14px; }
  .inicio-cards {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .inicio-card { min-height: 0; }
}


@media (max-width: 820px) {
  #apertura {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #000;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  #apertura img {
    width: 168px;
    height: 168px;
  }
  #apertura p {
    margin: 0;
    color: #fff;
    font-size: 64px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }
  html, body { height: var(--alto, 100dvh); min-height: 0; }
  .solo-pc { display: none; }
  .solo-movil { display: grid; }
  aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw) !important;
    padding: 14px 12px 12px;
    transform: translateX(-110%);
    transition: transform 0.25s ease;
    z-index: 6;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  }
  body.menu aside,
  body.panel-abierto aside {
    transform: none;
  }
  .panel-nombre {
    opacity: 1;
    width: auto;
  }
  .panel-cuerpo {
    display: flex;
  }
  body.menu #velo,
  body.panel-abierto #velo {
    display: block;
  }
  .barra {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 0;
    padding: calc(6px + env(safe-area-inset-top)) 8px 4px;
    min-height: 56px;
    border-bottom: 0;
    background: transparent;
  }
  .marca-movil {
    display: block;
    position: static;
    grid-column: 2;
    text-align: center;
    pointer-events: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
  }
  #menu-movil {
    grid-column: 1;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #e8eaed;
    box-shadow: none;
  }
  .barra-der {
    display: flex !important;
    grid-column: 3;
    align-items: center;
    gap: 2px;
  }
  #nueva-movil {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #e8eaed;
    box-shadow: none;
    font-size: 28px;
    font-weight: 300;
  }
  .avatar-movil {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #0b5fe6;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  .rm-idioma, #tema, #modo-pill-wrap, #dormir, .ident, .chips,
  #caja #cerebro-pill-wrap, .inicio-pills { display: none !important; }
  .ident { flex: 1; justify-content: center; }
  #estado { text-align: center; }
  .orbe-caja-btn { width: 40px; height: 40px; }
  #inicio.inicio { gap: 6px; padding-bottom: 12px; }
  .aura-saludo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 6px;
  }
  #inicio-saludo { font-size: 1.7rem; font-weight: 500; color: #fff; }
  #inicio-sub { font-size: 1.35rem; color: #fff; max-width: 24ch; }
  #mensajes {
    position: relative;
    z-index: 1;
    padding: 12px 16px 8px;
    gap: 18px;
    -webkit-overflow-scrolling: touch;
  }
  .msg { max-width: 100%; }
  .msg.user { max-width: 84%; }
  .msg.user .cuerpo {
    font-size: 16px;
    line-height: 1.4;
    padding: 10px 14px;
  }
  .msg.assistant { max-width: 100%; }
  .msg.assistant .cuerpo {
    font-size: 16.5px;
    line-height: 1.6;
    padding: 0;
  }
  #caja {
    position: relative;
    z-index: 2;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .caja-iris {
    padding: 0;
    border-radius: 32px;
    background: transparent;
    box-shadow: none;
  }
  .caja-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 56px;
    padding: 6px 6px 6px 2px;
    border-radius: 32px;
    background: #071428;
    border: 1px solid rgba(59, 130, 255, 0.35);
    box-shadow: 0 0 22px rgba(11, 95, 230, 0.28);
  }
  html.tema-dia .caja-inner { background: #fff; border-color: rgba(15, 23, 42, 0.08); }
  .adj-bandeja { flex: 1 0 100%; order: 0; }
  #adjuntar { order: 1; position: static; }
  #caja textarea { order: 2; }
  .caja-acciones { order: 3; display: flex; flex: 0 0 auto; justify-content: flex-end; }
  #dictar { order: 1; position: static; }
  #orbe-caja-btn, #enviar { order: 2; position: static; }
  #caja textarea {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 24px;
    max-height: 120px;
    padding: 10px 4px;
    font-size: 16px;
    overflow: hidden;
    scrollbar-width: none;
  }
  #caja textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
  #adjuntar, #dictar, #enviar, #orbe-caja-btn { flex: 0 0 40px; }
  #caja textarea::placeholder { color: #8a93a6; }
  .caja-espacio { display: none; }
  #adjuntar, #dictar {
    width: 40px; height: 40px;
    border: 0; background: transparent; box-shadow: none;
    color: #d5e2f5;
  }
  #dictar.activo, body.escuchando #dictar {
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    color: #8ab4f8;
  }
  #enviar, #orbe-caja-btn {
    width: 40px; min-width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 50%;
    background: #0b5fe6;
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 95, 230, 0.35);
  }
  #orbe-caja-btn .rm-caja-aura { display: none; }
  #orbe-caja-btn .ic-vivo { display: block; }
  #orbe-caja-btn::before { display: none; }
  body.caja-vacia:not(.generando) #enviar { display: none; }
  body:not(.caja-vacia) #orbe-caja-btn,
  body.generando #orbe-caja-btn { display: none; }
  .escenario { min-height: 0; }
  body.voz .orbe-wrap {
    display: none !important;
  }
  .voz-linea.lucy { font-size: 1.08rem; }
  .voz-dock { gap: 14px; }
  .voz-dock-btn { width: 48px; height: 48px; }
  .voz-dock-centro { width: 148px; height: 58px; }
  body.escuchando .voz-dock-centro { width: 190px; height: 66px; }
  body.pensando:not(.lucy-sonando):not(.escuchando) .voz-dock-centro { width: 168px; height: 60px; }
  body.lucy-sonando:not(.escuchando) .voz-dock-centro { width: 190px; height: 66px; }
  .chips {
    padding: 4px 12px 8px;
    gap: 6px;
  }
  .chip { padding: 8px 12px; font-size: 12px; }
  #mic-status {
    flex: 1;
    min-width: 0;
  }
  #mic-status .texto { font-size: 11px; }
}

/* Celular: negro limpio, como una app. El brillo azul solo abajo, detrás de la caja. */
@media (max-width: 820px) {
  html.rm-azul:not(.tema-dia) main {
    background:
      radial-gradient(520px 380px at 0% 0%, rgba(1, 24, 64, 0.9), transparent 70%),
      #000;
  }
  html.rm-azul:not(.tema-dia) main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(90% 100% at 50% 115%, rgba(10, 42, 120, 0.9), transparent 70%);
  }
  html.rm-azul:not(.tema-dia) .caja-iris,
  html.rm-azul:not(.tema-dia) .caja-iris:focus-within {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  html.rm-azul:not(.tema-dia) .caja-inner {
    background: #071428;
    border: 1px solid rgba(59, 130, 255, 0.35);
    box-shadow: 0 0 22px rgba(11, 95, 230, 0.28);
  }
  html.rm-azul:not(.tema-dia) #enviar,
  html.rm-azul:not(.tema-dia) #orbe-caja-btn,
  html.rm-azul:not(.tema-dia) body.generando #enviar {
    background: #0b5fe6;
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 95, 230, 0.35);
  }
  html.rm-azul:not(.tema-dia) #inicio-saludo,
  html.rm-azul:not(.tema-dia) #inicio-saludo strong,
  html.rm-azul:not(.tema-dia) #inicio-sub {
    color: #fff;
    font-weight: 450;
    letter-spacing: -0.02em;
  }
  html.rm-azul:not(.tema-dia) #inicio-saludo,
  html.rm-azul:not(.tema-dia) #inicio-saludo strong {
    font-size: 1.7rem;
  }
  html.rm-azul:not(.tema-dia) #inicio-sub {
    font-size: 1.45rem;
  }
  html.rm-azul:not(.tema-dia) .msg.user .cuerpo {
    background: #0c1a33;
    border: 1px solid rgba(59, 130, 255, 0.35);
    color: #e8eefc;
  }
}