/* Let translucent surfaces define their own edges without a colored rim. */
:root .chat-shell.chat-shell.chat-shell :is(
  .reading-paper-frame,
  .chat-message.user .message-surface,
  .composer,
  .conversation-search
) {
  border-color: transparent;
  box-shadow: none;
}

/* One continuous wash behind messages, notices and the floating composer.
   Row 4 holds desktop notices / mobile messages; row 6 holds the composer. */
:root .chat-shell.chat-shell.chat-shell > .chat-main:has(> .composer-band)::before {
  content: '';
  position: absolute;
  grid-column: 1;
  grid-row: 4 / -1;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--depth-field);
}

:root .chat-shell.chat-shell.chat-shell > .chat-main:has(> .composer-band) > :is(.message-viewport, .composer-band) {
  background: transparent !important;
  border-left: 0;
  box-shadow: none;
}

:root .chat-shell.chat-shell.chat-shell .composer-band {
  border-top: 0;
}

/* Let the reading paper continue behind the composer instead of ending above it. */
:root .chat-shell.chat-shell.chat-shell > .chat-main:has(> .composer-band) > .message-viewport {
  grid-row: 5 / -1;
  padding-bottom: 0;
  scroll-padding-bottom: var(--floating-composer-clearance, 144px);
}

:root .chat-shell.chat-shell.chat-shell .reading-paper-frame {
  min-height: 100%;
  margin-bottom: 0;
  padding-bottom: var(--floating-composer-clearance, 144px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:root .chat-shell.chat-shell.chat-shell .composer-band {
  grid-column: 1;
  z-index: 2;
  pointer-events: none;
}

:root .chat-shell.chat-shell.chat-shell .composer-band > * {
  pointer-events: auto;
}

:root .chat-shell.chat-shell.chat-shell .composer {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:root .chat-shell.chat-shell.chat-shell > .chat-main > .notice-bar {
  z-index: 3;
}

@media (max-width: 860px) {
  :root .chat-shell.chat-shell.chat-shell > .chat-main:has(> .composer-band) > .message-viewport {
    grid-row: 4 / -1;
  }
}

@media (min-width: 861px) {
  :root .chat-shell.chat-shell.chat-shell .composer {
    max-width: 832px;
    margin-inline: auto;
  }

  /* The mobile pseudo-element is the drawer's scene, not a divider. */
  :root .chat-shell.chat-shell.chat-shell .conversation-sidebar::after {
    display: none;
  }

  :root .chat-shell.chat-shell.chat-shell .conversation-mode-tabs {
    border-right: 0;
  }
}