/* Load before other styles: important declarations in this first layer also
   override the download page's legacy important cascade layers. */
@layer dialog-surfaces {
  /* Fixed tracks keep oversized glyphs centered instead of expanding the
     implicit grid toward the bottom/right of a compact toolbar button. */
  .bean-chat-toolbar .bean-chat-tool,
  .contact-toolbar button {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  :root {
    --dialog-text-fill: rgba(0, 0, 0, .8);
    --dialog-control-fill: rgba(0, 0, 0, .6);
  }

  /* Text messages, introductions and conversation feedback. */
  #bean-chat-overlay :is(.bean-chat-intro-message, .bean-chat-message-card,
    .bean-chat-bubble, .bean-chat-result, .bean-platform-intro,
    .bean-platform-closing, .standalone-past-intro, .standalone-choice-message),
  #bean-chat-overlay .message-bubble:not(.detail-bubble):not(.catalog-bubble):not(.products-bubble),
  .contact-panel :is(.welcome, .message, #status),
  .photon-order :is(.ph-head, .ph-message, .ph-reply, .ph-footer, .ph-notice:not(:empty)),
  .cap-operation-data, .installer-panel {
    background: var(--dialog-text-fill) !important;
  }

  /* Statistics is a separate entry with its own conversation and dialogs. */
  .statistics-page :is(.dashboard-header, #dashboard-board, .query-results, .toast),
  .info-dialog {
    background: var(--dialog-text-fill) !important;
  }
  .statistics-page .filters,
  .info-dialog :is(button, input, select, textarea), #reopen-page {
    background: var(--dialog-control-fill) !important;
  }
  #dashboard-board :is(.metric-panel, .automation-group, .metric-panel h2,
    .carrier-table thead, tbody tr, tfoot) {
    background: transparent !important;
  }
  .statistics-page :is(.mode-switch button, .periods button, .query-form button),
  .info-dialog .primary {
    color: #eafcff !important;
  }

  /* Cards, image frames, controls and menus: only the background is faded. */
  #bean-chat-overlay :is(button, input, textarea, select, .icon-frame, .detail-image,
    .bean-chat-module-visual, .bean-chat-product-card, .bean-chat-match,
    .bean-chat-conversion, .bean-chat-product-access, .bean-platform-channel,
    .bean-platform-version, .bean-platform-version-icon, .platform-store-card,
    .platform-store-icon, .platform-store-download, .bean-download-combination,
    .bean-download-qr, .bean-download-qr-placeholder, .bean-chat-conversion-link,
    .bean-chat-product-link, .text-control, .standalone-home, .pure-choices),
  .contact-panel :is(button, input, textarea, select),
  #bean-language-menu, .bean-language-menu, #language-menu,
  .standalone-chat-page .universe-bean-chat-trigger, .standalone-reopen,
  #reopen, #announcement,
  .photon-order :is(button, input, textarea, select, .ph-progress, .ph-upload, .ph-image-square),
  .cap-card, .cap-icon, .cap-action,
  .cap-operation-panel, .cap-page-portal,
  .cap-operation-panel :is(button, input, select, textarea),
  .cap-page-portal button, .installer-primary {
    background: var(--dialog-control-fill) !important;
  }

  /* Keep wrappers and media clear so nested black backgrounds do not stack. */
  #bean-chat-overlay :is(.catalog-bubble, .products-bubble, .bean-platform-channels),
  #bean-chat-overlay :is(.bean-chat-module, .module, .child),
  #bean-chat-overlay .bean-chat-bubble .bean-chat-match,
  #bean-chat-overlay .platform-store-card .platform-store-icon,
  #bean-chat-overlay .bean-platform-version .bean-platform-version-icon,
  #bean-chat-overlay .bean-chat-product-card > .bean-chat-product-frame,
  #bean-chat-overlay :is(.bean-platform-intro, .bean-platform-channels) > .bean-platform-closing,
  .photon-order .ph-image-square img {
    background: transparent !important;
  }

  /* These previously used pale filled backgrounds and dark foreground text. */
  #bean-chat-overlay .bean-chat-send, #bean-chat-overlay .chat-form button, .contact-panel #send,
  .contact-panel .message.user, .photon-order .ph-primary, .installer-primary {
    color: #eafcff !important;
  }
}