/* Template base styles for MindX app */
:where( .mindx-web-root, .mindx-web-root :where(
      address,
      article,
      aside,
      blockquote,
      button,
      div,
      fieldset,
      figure,
      footer,
      form,
      header,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      label,
      li,
      main,
      nav,
      ol,
      option,
      p,
      pre,
      section,
      select,
      span,
      table,
      tbody,
      td,
      textarea,
      tfoot,
      th,
      thead,
      tr,
      ul
    )) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}
#root {
  width: 100%;
  height: 100%;
}
/* 全局细滚动条：4px、淡灰色常驻、hover 时加深
 * 覆盖系统默认粗滚动条，所有可滚动区域统一风格（含 SDK portal 弹窗）。
 * scrollbar-width: thin 是标准属性，优先级高于 webkit 私有属性。
 */
:where( .mindx-web-root, .mindx-web-root :where(
      address,
      article,
      aside,
      blockquote,
      button,
      div,
      fieldset,
      figure,
      footer,
      form,
      header,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      label,
      li,
      main,
      nav,
      ol,
      option,
      p,
      pre,
      section,
      select,
      span,
      table,
      tbody,
      td,
      textarea,
      tfoot,
      th,
      thead,
      tr,
      ul
    )) {
  scrollbar-width: thin;
  scrollbar-color: var(--fill-primary) transparent;
}
:where( .mindx-web-root, .mindx-web-root :where(
      address,
      article,
      aside,
      blockquote,
      button,
      div,
      fieldset,
      figure,
      footer,
      form,
      header,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      label,
      li,
      main,
      nav,
      ol,
      option,
      p,
      pre,
      section,
      select,
      span,
      table,
      tbody,
      td,
      textarea,
      tfoot,
      th,
      thead,
      tr,
      ul
    ))::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
:where( .mindx-web-root, .mindx-web-root :where(
      address,
      article,
      aside,
      blockquote,
      button,
      div,
      fieldset,
      figure,
      footer,
      form,
      header,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      label,
      li,
      main,
      nav,
      ol,
      option,
      p,
      pre,
      section,
      select,
      span,
      table,
      tbody,
      td,
      textarea,
      tfoot,
      th,
      thead,
      tr,
      ul
    ))::-webkit-scrollbar-thumb {
  background: var(--fill-primary);
  border-radius: var(--radius-sm-val);
}
:where( .mindx-web-root, .mindx-web-root :where(
        address,
        article,
        aside,
        blockquote,
        button,
        div,
        fieldset,
        figure,
        footer,
        form,
        header,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        label,
        li,
        main,
        nav,
        ol,
        option,
        p,
        pre,
        section,
        select,
        span,
        table,
        tbody,
        td,
        textarea,
        tfoot,
        th,
        thead,
        tr,
        ul
      ))::-webkit-scrollbar-thumb:hover {
  background: var(--fill-secondary);
}
:where( .mindx-web-root, .mindx-web-root :where(
      address,
      article,
      aside,
      blockquote,
      button,
      div,
      fieldset,
      figure,
      footer,
      form,
      header,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      label,
      li,
      main,
      nav,
      ol,
      option,
      p,
      pre,
      section,
      select,
      span,
      table,
      tbody,
      td,
      textarea,
      tfoot,
      th,
      thead,
      tr,
      ul
    ))::-webkit-scrollbar-track {
  background: transparent;
}