/*
 * maTOmaru PC scrollbar treatment.
 *
 * The document scrollbar stays visible so the current page position remains
 * clear. Nested scroll regions reveal their thumb only while the user is
 * hovering, focusing, or operating that region. Mobile keeps its OS-native
 * scrollbar behavior because every rule is scoped to the PC breakpoint.
 */
@media (min-width: 981px) {
  :root {
    --scrollbar-page-size: 6px;
    --scrollbar-region-size: 6px;
    --scrollbar-thumb: #c7b7a8;
    --scrollbar-thumb-hover: #a9917d;
    --scrollbar-track: transparent;
    --textarea-auto-grow-max: min(320px, 45vh);
  }

  :root[data-theme="dark"] {
    --scrollbar-thumb: color-mix(
      in srgb,
      var(--color-border, #61584f) 72%,
      var(--color-text-muted, #b8aea4) 28%
    );
    --scrollbar-thumb-hover: color-mix(
      in srgb,
      var(--color-border, #61584f) 48%,
      var(--color-text-secondary, #d1c7bd) 52%
    );
  }

  html,
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: var(--scrollbar-page-size);
    height: var(--scrollbar-page-size);
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  /*
   * Applying the neutral state to descendants covers existing customer lists,
   * X DM columns, conversation history, detail panes, tables, dialogs, menus,
   * and textareas without adding page-specific classes or new scroll regions.
   */
  :where(body *) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  :where(body *)::-webkit-scrollbar {
    width: var(--scrollbar-region-size);
    height: var(--scrollbar-region-size);
  }

  :where(body *)::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  :where(body *)::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
  }

  :where(body *):hover,
  :where(body *):focus-within,
  :where(body *):active {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  :where(body *):hover::-webkit-scrollbar-thumb,
  :where(body *):focus-within::-webkit-scrollbar-thumb,
  :where(body *):active::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
  }

  :where(body *)::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  /*
   * Chromium progressively grows long-form fields from their existing minimum
   * height. Existing selector-specific max-heights still take precedence; once
   * the applicable maximum is reached, the same reveal-on-use scrollbar rules
   * above keep all content accessible.
   */
  @supports (field-sizing: content) {
    :where(
      .large-textarea,
      .post-session-memo-card textarea,
      .session-note-card textarea:not([readonly]),
      .reservation-paste-text,
      .settings-card-body textarea,
      .customer-next-plan-inset textarea,
      .customer-memo-field textarea,
      .post-session-prompt-field textarea,
      .floating-ai-chat-form textarea,
      .x-dm-reply-draft-composer textarea,
      .x-dm-post-reply-editor textarea,
      .x-post-dm-editor textarea,
      .today-reply-editor textarea,
      textarea[data-today-initial-dm-draft],
      textarea[data-today-reply-draft],
      textarea[data-xdm-relationship-draft],
      textarea[data-xdm-mobile-reply-draft],
      textarea[data-xdm-customer-profile-input],
      textarea[data-xdm-post-reply-draft],
      #reservationNotes,
      #detoxBadMoment
    ) {
      field-sizing: content;
      max-height: var(--textarea-auto-grow-max);
      overflow-y: auto;
    }
  }
}