/* Full-page chatbot responsive rules. Mobile first: 390 / 768 / 1440 QA targets. */

html,
body {
  height: 100%;
  overflow: hidden;
}

.ogen-app {
  width: 100%;
  border-inline: 0;
}

.ogen-chat-header,
.ogen-composer {
  padding-inline: var(--space-4);
}

.ogen-chat-conversation {
  padding: var(--space-4);
}

.ogen-welcome {
  padding-inline: 0;
}

.ogen-welcome .ogen-entity[data-size="lg"] {
  --ogen-entity-size: 112px;
}

.ogen-quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.ogen-quick-action {
  padding: var(--space-4);
  min-width: 0;
}

.ogen-quick-action__desc,
.ogen-source-card__meta {
  overflow-wrap: anywhere;
}

.ogen-msg-user,
.ogen-answer {
  max-width: 100%;
}

@media (min-width: 480px) {
  .ogen-chat-header,
  .ogen-chat-conversation,
  .ogen-composer {
    padding-inline: var(--space-5);
  }
}

@media (min-width: 768px) {
  .ogen-app {
    width: min(100%, 920px);
    border-inline: 1px solid var(--ogen-border);
  }

  .ogen-chat-header,
  .ogen-chat-conversation,
  .ogen-composer {
    padding-inline: var(--space-6);
  }

  .ogen-welcome .ogen-entity[data-size="lg"] {
    --ogen-entity-size: 140px;
  }

  .ogen-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .ogen-app {
    width: 980px;
  }

  .ogen-quick-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Final responsive composition for the product redesign. */
.ogen-app { width: 100%; }
.ogen-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ogen-quick-action,
.ogen-quick-action:first-child { grid-column: auto; grid-row: auto; min-height: 126px; }
.ogen-welcome__hero {
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 8px 0 20px;
}
.ogen-welcome__hero::after { inset: 9% 0 0; border-radius: 26px; }
.ogen-welcome__entity { min-height: 210px; }
.ogen-welcome__copy { padding: 4px 24px 30px; text-align: center; }
.ogen-welcome__copy .ogen-hero-title { margin-inline: auto; font-size: clamp(34px, 10vw, 48px); }
.ogen-welcome__lede { margin-inline: auto; font-size: 15px; }
.ogen-welcome__demos { align-items: flex-start; flex-direction: column; }
.ogen-answer__body { padding-inline-start: 0; padding-inline-end: 0; }

@media (max-width: 479px) {
  .ogen-chat-header__status { padding: 0 10px; font-size: 0; }
  .ogen-chat-header__status-dot { margin: 0; }
  .ogen-chat-conversation { padding-block: 18px; }
  .ogen-welcome { gap: 18px; }
  .ogen-welcome__entity { min-height: 190px; }
  .ogen-welcome .ogen-entity[data-size="hero"] { --ogen-entity-size: 190px; }
  .ogen-quick-actions { grid-template-columns: 1fr; }
  .ogen-quick-action,
  .ogen-quick-action:first-child { min-height: 104px; padding: 17px; }
  .ogen-quick-action__desc { max-width: 34ch; }
  .ogen-welcome__demos .ogen-chip-row { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .ogen-chip { flex: none; }
  .ogen-composer { padding-inline: 12px; }
  .ogen-composer__send { width: 50px; height: 50px; }
}

@media (min-width: 768px) {
  .ogen-app { width: min(calc(100% - 32px), 1180px); }
  .ogen-chat-header,
  .ogen-chat-conversation,
  .ogen-composer { padding-inline: clamp(30px, 4vw, 54px); }
  .ogen-welcome__hero { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); min-height: 320px; }
  .ogen-welcome__entity { min-height: 0; }
  .ogen-welcome__copy { padding: 42px 28px 42px 10px; text-align: right; }
  .ogen-welcome__copy .ogen-hero-title { margin-inline: 0; font-size: clamp(42px, 5.4vw, 60px); }
  .ogen-welcome__lede { margin-inline: 0; }
  .ogen-quick-actions { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ogen-quick-action { grid-column: span 4; min-height: 116px; }
  .ogen-quick-action:first-child { grid-column: span 4; grid-row: span 2; min-height: 244px; }
  .ogen-welcome__demos { align-items: center; flex-direction: row; }
  .ogen-answer__body { padding-inline-end: 44px; }
}

@media (min-width: 1200px) {
  .ogen-app { width: min(calc(100% - 64px), 1180px); }
}