/* Materials: how surfaces render, independent of the palette. Each theme picks
   one in theme-catalog.js (data-material on <html>). glass lives in
   material-glass.css; frosted and paper still come from the theme files; solid
   is defined here.
   Solid is also forced for every theme when the system asks for less
   transparency or more contrast, or when the browser cannot blur. Those forced
   declarations are !important: an accessibility preference must win over the
   surfaces of any theme or material, whatever layer they live in. */
@layer materials {
  :root[data-material="solid"],
  :root[data-material="solid"] body {
    --sys-blur: 0px;
    --sys-refraction: none;
    --sys-refraction-subtle: none;
  }
  :root[data-material="solid"] :is(.surface, .chat-header, .sidebar, .conversation-heading, .input-bar, .login-card, .group-modal-card, .cloud-dialog,
    .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form,
    .message-bubble, .message-reply-reference, .reaction-pill, .voice-message, .poll-option) {
    background: var(--sys-bg-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--sys-on-surface-muted);
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root, :root body {
      --sys-blur: 0px !important;
      --sys-refraction: none !important;
      --sys-refraction-subtle: none !important;
    }
    :root :is(.surface, .chat-header, .sidebar, .conversation-heading, .input-bar, .login-card, .group-modal-card, .cloud-dialog,
      .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form,
      .message-bubble, .message-reply-reference, .reaction-pill, .voice-message, .poll-option, [data-glass-lens]) {
      background: var(--sys-bg-raised) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-color: var(--sys-on-surface-muted) !important;
    }
    :root[data-material="glass"] .bubble-own {
      background: var(--comp-glass-bubble-own-solid) !important;
    }
    :root[data-material="glass"] .bubble-other {
      background: var(--comp-glass-bubble-other-solid) !important;
    }
    :root[data-material="glass"] .message-bubble::before {
      background: none !important;
    }
  }

  /* Without backdrop blur, translucent panels would show the page through them. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root :is(.surface, .chat-header, .sidebar, .conversation-heading, .input-bar, .login-card, .group-modal-card, .cloud-dialog,
      .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form,
      .message-bubble, .message-reply-reference, .reaction-pill, .voice-message, .poll-option) {
      background: var(--sys-bg-raised) !important;
    }
    :root[data-material="glass"] .bubble-own {
      background: var(--comp-glass-bubble-own-solid) !important;
    }
    :root[data-material="glass"] .bubble-other {
      background: var(--comp-glass-bubble-other-solid) !important;
    }
    :root[data-material="glass"] .message-bubble::before {
      background: none !important;
    }
  }
}