@import './task-layout.css';
/* Full-width customer pages. Spacing inside controls/panels belongs to each surface. */
:root {
  --site-page-top: 36px;
  --site-content-inset: 24px;
}

.app-header .topbar,
.public-header,
.public-footer,
.public-main,
.public-reading,
.public-article,
.page-footer,
#main > .character-page,
#main:is(.page-shell, .account-page, .gems-page, .pricing-page, .auth-page) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--site-content-inset);
}

/* Account groups already own their content inset. */
#main.account-settings:has(.account-panels) {
  padding-inline: 0;
}

/* Authentication is a focused form, not a full-width task workspace. */
#main.auth-flow {
  max-width: 36rem;
  margin-inline: auto;
}

#main > .character-page,
#main:is(.page-shell, .account-page, .gems-page, .pricing-page, .auth-page) {
  padding-top: var(--site-page-top);
  padding-bottom: 64px;
}

/* Workspaces use the viewport; do not add a second gutter around their panels. */
#main:is(.chat-workspace, .creation-workspace),
#main.video-feed:not(:is(:fullscreen, :-webkit-full-screen)) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.video-feed .feed-top,
.video-feed:not(:is(:fullscreen, :-webkit-full-screen)) .feed-controls {
  right: max(var(--site-content-inset), env(safe-area-inset-right));
}

.video-feed:is(:fullscreen, :-webkit-full-screen) {
  padding-left: max(var(--site-content-inset), env(safe-area-inset-left));
  padding-right: max(var(--site-content-inset), env(safe-area-inset-right));
}

/* In fullscreen the stage already inherits the page's safe inset. */
.video-feed:is(:fullscreen, :-webkit-full-screen) .feed-controls {
  right: 0;
}

.account-page > h1,
.char-heading h1,
.explore-page .feature-heading h1,
.gems-page h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.2;
  color: var(--ui-text);
}

.char-heading {
  align-items: flex-start;
}

.char-heading p,
.account-page > h1 + p {
  margin: 0;
}

.gems-page > .center {
  text-align: left;
}

.gems-page > .center > p {
  font-size: 16px;
}

.gems-page > .faq {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.explore-page .featured {
  background: transparent;
  padding: 0;
}

.explore-page .feature-heading {
  min-height: 0;
  padding: 0;
  margin-bottom: 24px;
  align-items: flex-start;
}

.explore-page .filters {
  margin-bottom: 24px;
}

.page-footer {
  margin-top: 32px;
}

.profile-tabs {
  flex-wrap: wrap;
}

.profile-heading > .split-row {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  :root {
    --site-content-inset: 16px;
  }
}

@media (max-width: 639px) {
  :root {
    --site-page-top: 24px;
  }

  #main > .character-page,
  #main:is(.page-shell, .account-page, .gems-page, .pricing-page, .auth-page) {
    padding-bottom: 40px;
  }

  .explore-page .feature-heading {
    flex-wrap: wrap;
    gap: 16px;
  }

  .char-card .char-actions > * {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  .char-card .char-actions > .primary {
    flex-basis: 100%;
  }
}