/* Panel Layout */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--black-true);
}
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* Usa la altura dinámica del viewport para mejor manejo de áreas seguras */
  max-height: 100dvh; /* Coincide con la altura */
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(67, 72, 90, 0.98) 0%,
    rgba(58, 63, 80, 0.96) 70%,
    rgba(45, 50, 66, 0.94) 100%
  );
  /* Se elimina padding-bottom de .app, ya que input-tray maneja su propio padding inferior */
}

.chat-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
  padding-bottom: 160px;
  box-sizing: border-box;
}

.messages {
  flex: 1;
  /* Usamos calc() para sumar la altura de la status bar + un padding extra */
  --safe-area-top-gap: 18px;
  padding: calc(var(--status-bar-height, var(--safe-area-top-gap)) + var(--safe-area-top-gap)) 22px 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-padding-bottom: 160px;
}

.panel-toggle {
  --safe-area-top-gap: 10px;
  /* Posicionamos el botón usando la altura de la status bar + un margen */
  top: calc(var(--status-bar-height, var(--safe-area-top-gap)) + var(--safe-area-top-gap));
  display: none;
}