/* Glitch Chat V2 · responsive hero/thread guardrails */

/* Hidden still hides normal UI state, but the hero uses hidden as its compact-chat state. */
.gl-root [hidden]:not(.gl-empty) {
  display: none !important;
}

.gl-empty[hidden] {
  display: flex !important;
}

/* Never allow hero/thread surfaces to create horizontal page drift. */
.gl-empty,
.gl-thread {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.gl-cards,
.gl-card {
  min-width: 0;
}

.gl-card__title,
.gl-card__sub {
  overflow-wrap: anywhere;
}

/*
  NEW CHAT: keep the complete hero centered when space exists.
  Auto margins collapse when height gets tight, so the logo never clips above
  the scroll origin.
*/
@media (min-width: 641px) {
  .gl-empty:not([hidden]) {
    justify-content: flex-start;
    padding-block: clamp(20px, 4vh, 32px);
  }

  .gl-empty:not([hidden]) > .gl-mark {
    margin-top: auto;
  }

  .gl-empty:not([hidden]) > .gl-cards {
    margin-bottom: auto;
  }
}

/*
  ACTIVE CHAT: preserve the Glitch hero as a compact responsive strip.
  It no longer competes with the thread for flex height or owns a scrollbar.
*/
.gl-empty[hidden] {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  justify-content: flex-start;
  padding: 12px 20px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), transparent);
}

.gl-empty[hidden] > .gl-mark {
  --sz: 40px !important;
  margin: 0;
}

.gl-empty[hidden] .gl-empty__title {
  margin: 7px 0 0;
  font-size: 21px;
  line-height: 1;
}

.gl-empty[hidden] .gl-empty__sub {
  display: none;
}

.gl-empty[hidden] .gl-cards {
  width: min(100%, 760px);
  max-width: 760px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.gl-empty[hidden] .gl-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 10px;
}

.gl-empty[hidden] .gl-card__code {
  font-size: 7.5px;
}

.gl-empty[hidden] .gl-card__title {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.15;
}

.gl-empty[hidden] .gl-card__sub {
  display: none;
}

/* Compact the full New Chat hero before a short desktop viewport needs to scroll. */
@media (min-width: 641px) and (max-height: 760px) {
  .gl-empty:not([hidden]) {
    padding-block: 18px;
  }

  .gl-empty:not([hidden]) .gl-empty__title {
    margin-top: 14px;
    font-size: 32px;
  }

  .gl-empty:not([hidden]) .gl-empty__sub {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }

  .gl-empty:not([hidden]) .gl-cards {
    margin-top: 18px;
    gap: 10px;
  }

  .gl-empty:not([hidden]) .gl-card {
    padding: 13px 14px;
  }
}

/* Tablet: keep the compact active hero readable without horizontal overflow. */
@media (max-width: 900px) {
  .gl-empty[hidden] {
    padding-inline: 16px;
  }

  .gl-empty[hidden] .gl-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 600px;
  }
}

/* Mobile: full hero is top-anchored; active hero stays compact above the thread. */
@media (max-width: 640px) {
  .gl-empty:not([hidden]) {
    overflow-y: auto;
    padding-top: clamp(28px, 7vh, 48px);
  }

  .gl-empty:not([hidden]) .gl-cards {
    width: min(100%, 600px);
  }

  .gl-empty[hidden] {
    overflow: visible;
    padding: 8px 12px 7px;
  }

  .gl-empty[hidden] > .gl-mark {
    --sz: 32px !important;
  }

  .gl-empty[hidden] .gl-empty__title {
    margin-top: 5px;
    font-size: 18px;
  }

  .gl-empty[hidden] .gl-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
  }

  .gl-empty[hidden] .gl-card {
    padding: 7px 8px;
  }

  .gl-empty[hidden] .gl-card__code {
    font-size: 7px;
  }

  .gl-empty[hidden] .gl-card__title {
    font-size: 10.5px;
  }
}