/**
 * 全站滚动条 = 工具导航浮卡同款（3px 细灰条、无上下箭头）。
 * 独立 CSS，不走 Tailwind @layer，Windows 下才能彻底去掉系统默认条。
 *
 * forced-color-adjust: none —— Windows「高对比度/强制配色」无障碍模式下，浏览器会无视
 * 所有自定义滚动条样式（含 ::-webkit-scrollbar），强制画回经典 Win32 样式（浅灰滑轨+
 * 上下三角箭头）。只写在明确要自定义条的滚动容器上，不写在 * 上，以免关掉整页高对比度。
 * -ms-high-contrast-adjust 是旧版 EdgeHTML 的等价写法，留着无副作用。
 *
 * 故意藏条的组件（截图轨道、日期 Tab、目录等）用更具体的 class + scrollbar-width:none，
 * 会盖过下面的 * 规则。
 */

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.22) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

html::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:vertical:start:decrement,
html::-webkit-scrollbar-button:vertical:end:increment,
html::-webkit-scrollbar-button:horizontal:start:decrement,
html::-webkit-scrollbar-button:horizontal:end:increment,
html::-webkit-scrollbar-button:start:decrement,
html::-webkit-scrollbar-button:end:increment,
body::-webkit-scrollbar-button,
body::-webkit-scrollbar-button:single-button,
body::-webkit-scrollbar-button:vertical:start:decrement,
body::-webkit-scrollbar-button:vertical:end:increment,
body::-webkit-scrollbar-button:horizontal:start:decrement,
body::-webkit-scrollbar-button:horizontal:end:increment,
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.22) !important;
  border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.4) !important;
}

.tool-panel-scroll,
.myquiz-pop__body,
.myquiz-flame-capture,
.myquiz-kmap,
.myquiz-kmap-list {
  forced-color-adjust: none;
  -ms-high-contrast-adjust: none;
}

.tool-panel-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-panel-scroll::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

.tool-panel-scroll::-webkit-scrollbar-button,
.tool-panel-scroll::-webkit-scrollbar-button:single-button,
.tool-panel-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.tool-panel-scroll::-webkit-scrollbar-button:vertical:end:increment,
.tool-panel-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.tool-panel-scroll::-webkit-scrollbar-button:horizontal:end:increment,
.tool-panel-scroll::-webkit-scrollbar-button:start:decrement,
.tool-panel-scroll::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

.tool-panel-scroll::-webkit-scrollbar-track,
.tool-panel-scroll::-webkit-scrollbar-track-piece,
.tool-panel-scroll::-webkit-scrollbar-corner {
  background: transparent !important;
}

.tool-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.22) !important;
  border-radius: 999px !important;
}

.tool-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.4) !important;
}

/**
 * 工具/资源详情身份区：桌面必须左 Logo、右评分。
 * WHY：AIcore 未加前缀的 `.flex-col` / `.w-full` / `.gap-5` 后插入会盖过
 * 主题 `sm:flex-row` / `sm:w-[8.5rem]` / `sm:gap-0`，评分整列（红圈+三维灰条）
 * 掉到 Logo 下面；刷新未开聊时又正常。独立 CSS + !important 防打穿。
 * Skill 头区是 `.flex.items-start`（无 flex-col），不会命中。
 */
@media (min-width: 640px) {
  /* 桌面浮层收藏在右上角，标题行那颗不显示 */
  [data-tool-detail-card] .mytb-identity-fav {
    display: none !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .flex-1 {
    padding-right: 1rem !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .w-full,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .mytb-rating-col {
    width: 8.5rem !important;
    max-width: 8.5rem !important;
    flex-shrink: 0 !important;
    padding-left: 1rem !important;
    border-left-width: 1px !important;
  }
  /* 评分下挂「相关产品」胶囊时略放宽，避免挤成两行 */
  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .mytb-rating-col--related {
    width: auto !important;
    min-width: 8.5rem !important;
    max-width: 14rem !important;
  }

  /* 头区 class 与旧折叠条同名。桌面竖排收进右列；横排灰底只留给 ≤639px。 */
  [data-tool-detail-card] .mytb-rating-summary {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    cursor: default !important;
  }

  [data-tool-detail-card] .mytb-rating-summary:hover {
    background: transparent !important;
  }
}

/**
 * 手机端工具/资源详情头区（≤639px）。
 * 桌面仍是左 Logo 128 + 右评分列。窄屏改成稿面：76 Logo、简介换行、
 * 标签落到整行，分数圈在左、三维红条在右并带 10 分制数字。
 * 字号只用设计档：标题 24（text-page）、简介 14（text-caption）、条旁 13（text-footnote）。
 * !important：防 AIcore 晚到的裸 .flex / .w-full / .flex-col 打穿。
 */
.mytb-rating-dim-value {
  display: none;
}

@media (max-width: 639px) {
  [data-tool-detail-card] .tool-panel-scroll {
    padding-top: 3.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* 手机浮层：收藏跟关闭钮并排，不要贴在标题右边 */
  [data-tool-detail-card] .mytb-identity-fav {
    display: none !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .flex-1,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .mytb-identity-main {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col .flex.items-start.gap-4,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col .mytb-identity-top {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 16px;
    align-items: center !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col .w-32,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col .mytb-identity-logo {
    width: 76px !important;
    height: 76px !important;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col .flex.items-start.gap-4 > .flex.flex-col,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col .mytb-identity-copy {
    display: contents !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col .text-largetitle,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col h1,
  [data-tool-detail-card] .mytb-identity-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col p.truncate,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col .truncate.text-body,
  [data-tool-detail-card] .mytb-identity-tagline {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col .mytb-tool-specs,
  [data-tool-detail-card] .mytb-identity-specs {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0 !important;
    width: 100%;
    min-width: 0;
  }

  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .mytb-rating-col,
  [data-tool-detail-card] header.mb-4 > .flex.flex-col > .w-full.mytb-rating-col {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    border-left-width: 0 !important;
    align-items: stretch !important;
  }

  [data-tool-detail-card] .mytb-rating-col .min-h-32,
  [data-tool-detail-card] .mytb-rating-slot {
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  [data-tool-detail-card] .mytb-rating-col .min-h-32 > .w-full,
  [data-tool-detail-card] .mytb-rating-summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    margin: 0 !important;
  }

  [data-tool-detail-card] .mytb-rating-col .flex.flex-col.items-center.relative,
  [data-tool-detail-card] .mytb-rating-score {
    width: auto !important;
    min-width: 74px;
    flex-shrink: 0 !important;
    align-items: center !important;
  }

  [data-tool-detail-card] .mytb-rating-col .w-14,
  [data-tool-detail-card] .mytb-rating-ring {
    width: 54px !important;
    height: 54px !important;
  }

  [data-tool-detail-card] .mytb-rating-col .max-w-\[9rem\],
  [data-tool-detail-card] .mytb-rating-bars {
    max-width: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  [data-tool-detail-card] .mytb-rating-col .max-w-\[9rem\] > .flex,
  [data-tool-detail-card] .mytb-rating-bars > .mytb-rating-dim {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  [data-tool-detail-card] .mytb-rating-col .max-w-\[9rem\] .w-11,
  [data-tool-detail-card] .mytb-rating-dim-label {
    width: auto !important;
    min-width: 4em;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 16px !important;
    color: #666666 !important;
  }

  [data-tool-detail-card] .mytb-rating-col .max-w-\[9rem\] .w-12,
  [data-tool-detail-card] .mytb-rating-dim-track {
    width: auto !important;
    flex: 1 1 auto !important;
    height: 4px !important;
    min-width: 0;
  }

  [data-tool-detail-card] .mytb-rating-col .max-w-\[9rem\] .bg-gray-900,
  [data-tool-detail-card] .mytb-rating-dim-fill {
    background-color: #e03030 !important;
  }

  [data-tool-detail-card] .mytb-rating-dim-value {
    display: inline-block !important;
    flex-shrink: 0;
    min-width: 2.25rem;
    text-align: right;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 16px;
    color: #666666;
    font-variant-numeric: tabular-nums;
  }
}