/* Load before other styles: important declarations in this first layer also
   override the download page's legacy important cascade layers. */
@layer dialog-surfaces {
  /* Static spectrum edge replaces chat-only canvas borders. No new stacking
     context on the parent: toolbars and detached menus keep their geometry. */
  .chat-static-border > .chat-static-border-edge {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 1px !important;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 5 !important;
    background: linear-gradient(125deg, #62eaff, #ac86ff 32%, #ff76bc 60%, #ffd875 80%, #62eaff) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: none !important;
    transition: none !important;
  }
  #bean-chat-overlay :is(.flow-frame, .area-double-flow, .qr-effect-scan),
  #bean-chat-overlay .chat-static-border::before,
  #bean-chat-overlay .chat-static-border::after {
    animation: none !important;
  }
  #bean-chat-overlay .cap-action::before,
  .cap-operation-panel .cap-action::before,
  .cap-page-portal .cap-action::before,
  .contact-panel .cap-action::before {
    background: linear-gradient(125deg, #62eaff, #ac86ff 32%, #ff76bc 60%, #ffd875 80%, #62eaff) !important;
    animation: none !important;
  }
  .chat-new-content {
    position: absolute !important;
    right: 28px !important;
    bottom: 80px !important;
    z-index: 20 !important;
    padding: 7px 12px !important;
    border: 1px solid #78eaff !important;
    border-radius: 16px !important;
    background: #10151f !important;
    color: #eefcff !important;
    cursor: pointer;
  }
  .chat-new-content[hidden] { display: none !important; }
  #bean-chat-overlay .message-bubble[data-text-message],
  #bean-chat-overlay .bean-chat-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
    overflow-anchor: auto;
  }
  /* 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;
  }

  /* The primary send action keeps its visible fill above the shared control rule. */
  #bean-chat-overlay .chat-form #send {
    background: #78eaff !important;
    color: #00151b !important;
  }
  #bean-chat-overlay .chat-form #send:hover {
    background: #a5f2ff !important;
  }
  #bean-chat-overlay .chat-form #send:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* 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;
  }
}