/* One readable column throughout the user cabinet below the desktop breakpoint.
   Scroll containers and full-bleed backgrounds keep their viewport width. */
:root {
  --rovno-user-content-width: 678px;
  --rovno-user-column-width: calc(var(--rovno-user-content-width) + 2rem);
}
@media (max-width: 1023px) {
  .rovno-app[data-layout="user"] .rovno-mobile-column,
  .rovno-app[data-layout="user"] > .rovno-glass-backdrop > main {
    width: 100%;
    max-width: var(--rovno-user-column-width);
    margin-inline: auto;
  }
  /* Home paints its own edge-to-edge surfaces inside the content column. */
  .rovno-app[data-layout="user"][data-page="home"] > .rovno-glass-backdrop > main {
    max-width: var(--rovno-user-content-width);
  }
  .rovno-app[data-layout="user"] .rovno-support-chat :is(
    .support-chat-header, .support-messages, .support-composer-area, .support-search-results
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--rovno-user-column-width);
    margin-inline: auto;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
  /* The header divider spans the viewport; only its controls form a column. */
  .rovno-app[data-layout="user"] .rovno-support-chat .support-chat-header {
    max-width: none;
    padding-left: max(1rem, env(safe-area-inset-left, 0px), calc((100% - var(--rovno-user-column-width)) / 2 + 1rem));
    padding-right: max(1rem, env(safe-area-inset-right, 0px), calc((100% - var(--rovno-user-column-width)) / 2 + 1rem));
  }
  /* Center the absolute composer without narrowing the scrolling viewport. */
  .rovno-app[data-layout="user"] .rovno-support-chat .support-to-latest {
    right: max(16px, calc((100% - var(--rovno-user-column-width)) / 2 + 16px));
  }
}

/* Desktop support uses the cabinet sidebar and the profile content column. */
@media (min-width: 1024px) {
  .support-route-underlay {
    display: none;
  }
  .support-route-overlay {
    position: static;
    inset: auto;
    z-index: auto;
  }
  .rovno-app .rovno-support-shell {
    margin-left: 232px;
    padding: 0;
  }
  .rovno-app .rovno-support-chat {
    position: relative;
    inset: auto;
    max-width: none;
    height: 100dvh;
    margin-inline: auto;
    padding-top: 0;
    box-shadow: none;
  }
  .rovno-support-chat :is(.support-messages, .support-composer-area, .support-search-results) {
    width: 100%;
    max-width: var(--rovno-user-content-width);
    margin-inline: auto;
  }
  .rovno-support-chat .support-chat-header > a {
    display: none;
  }
  .rovno-support-chat .support-chat-header {
    padding-inline: max(18px, calc((100% - var(--rovno-user-content-width)) / 2 + 18px));
  }
  .rovno-support-chat .support-composer-area {
    padding-bottom: 16px;
  }
  .rovno-support-chat .support-to-latest {
    right: max(16px, calc((100% - var(--rovno-user-content-width)) / 2 + 16px));
  }
}