/*
 * 新爱算 · 超级博客 前台系统样式（所有主题共用）：快速搜索、灯箱、音频倍速与 PDF 预览、代码块工具、代码高亮配色、
 * 公式与图表容器、主题预览条、互动表情（图集、音频卡片、附件卡片等正文组件的基础样式在 /_assets/content/content.css）。全部放在级联层 xb 中：主题样式（未分层）与站长自定义 CSS 总能覆盖它。
 * 颜色取主题的 CSS 变量（--xb-*），主题未定义时使用括号中的默认值。
 */
@layer xb {
  .xb-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  html.xb-dialog-open {
    overflow: hidden;
  }

  /* ---------- 快速搜索 ---------- */
  .xb-qs {
    width: min(640px, calc(100vw - 24px));
    max-height: min(560px, calc(100dvh - 48px));
    margin: max(8vh, 24px) auto auto;
    padding: 0;
    border: 1px solid var(--xb-line, #e6e6e6);
    border-radius: 12px;
    background: var(--xb-paper, #fff);
    color: var(--xb-text, #333);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
    overflow: hidden;
  }

  .xb-qs[open] {
    display: flex;
    flex-direction: column;
  }

  .xb-qs::backdrop {
    background: rgba(0, 0, 0, .42);
  }

  .xb-qs-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--xb-line, #e6e6e6);
  }

  .xb-qs-icon {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--xb-muted, #6b6b6b);
    border-radius: 50%;
    position: relative;
    margin-right: 2px;
  }

  .xb-qs-icon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 7px;
    background: var(--xb-muted, #6b6b6b);
    right: -4px;
    bottom: -6px;
    transform: rotate(-45deg);
    border-radius: 1px;
  }

  .xb-qs-form:focus-within {
    box-shadow: inset 0 -2px 0 var(--xb-green, #19ab4a);
  }

  .xb-qs-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0 !important;
    background: transparent;
    color: var(--xb-ink, #1f1f1f);
    font: inherit;
    font-size: 17px;
  }

  .xb-qs-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .xb-qs-close {
    flex: none;
    min-width: 44px;
    height: 32px;
    border: 1px solid var(--xb-line, #e6e6e6);
    border-radius: 6px;
    background: var(--xb-sunk, #f6f6f6);
    color: var(--xb-muted, #6b6b6b);
    font: 12px/1 system-ui, sans-serif;
    cursor: pointer;
  }

  .xb-qs-status {
    margin: 0;
    padding: 0 16px;
    color: var(--xb-muted, #6b6b6b);
    font-size: 14px;
  }

  .xb-qs-status:not(:empty) {
    padding: 12px 16px;
  }

  .xb-qs-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .xb-qs-list:empty {
    display: none;
  }

  .xb-qs-option a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
  }

  .xb-qs-option.is-active a {
    background: var(--xb-green-wash, rgba(25, 171, 74, .1));
    box-shadow: inset 3px 0 0 var(--xb-green, #19ab4a);
  }

  .xb-qs-title {
    display: block;
    color: var(--xb-ink, #1f1f1f);
    font-weight: 600;
    line-height: 1.5;
  }

  .xb-qs-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    color: var(--xb-muted, #6b6b6b);
    font-size: 14px;
    line-height: 1.6;
  }

  .xb-qs mark {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--xb-green, #19ab4a);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .xb-qs-all {
    color: var(--xb-muted, #6b6b6b) !important;
    font-size: 14px;
  }

  .xb-qs-foot {
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--xb-line, #e6e6e6);
    color: var(--xb-muted, #6b6b6b);
    font-size: 12px;
  }

  @media (max-width: 639px) {
    .xb-qs {
      margin-top: 12px;
    }

    .xb-qs-foot {
      display: none;
    }
  }

  /* ---------- 灯箱：舞台（拖动、缩放区域）+ 底部说明 + 右上角缩放与关闭按钮 + 左右切换 ---------- */
  .xb-zoomable {
    cursor: zoom-in;
  }

  .xb-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .94);
    color: #fff;
    overflow: hidden;
  }

  .xb-lightbox[open] {
    display: flex;
    flex-direction: column;
  }

  .xb-lightbox::backdrop {
    background: rgba(0, 0, 0, .94);
  }

  .xb-lightbox-stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 64px 16px 8px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .xb-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: 50% 50%;
    touch-action: none;
    cursor: grab;
    -webkit-user-drag: none;
  }

  .xb-lightbox-stage.is-zoomed .xb-lightbox-img {
    cursor: move;
  }

  .xb-lightbox-stage.is-settling .xb-lightbox-img {
    transition: transform .22s ease-out, opacity .22s ease-out;
  }

  .xb-lightbox-stage.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: xb-spin .8s linear infinite;
  }

  @keyframes xb-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .xb-lightbox-bar {
    display: flex;
    flex: none;
    gap: 16px;
    align-items: baseline;
    justify-content: center;
    min-height: 24px;
    max-width: min(760px, 100%);
    margin: 0 auto;
    padding: 8px 16px max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.6;
    color: #e2e2e2;
  }

  .xb-lightbox-caption {
    margin: 0;
    max-height: 4.8em;
    overflow-y: auto;
    text-align: center;
  }

  .xb-lightbox-count {
    color: #b4b4b4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .xb-lightbox-tools {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .xb-lightbox button {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: 24px/1 system-ui, sans-serif;
    cursor: pointer;
  }

  .xb-lightbox .xb-lightbox-zoom-reset {
    min-width: 64px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .xb-lightbox-prev,
  .xb-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .xb-lightbox .xb-lightbox-prev,
  .xb-lightbox .xb-lightbox-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 30px;
  }

  .xb-lightbox-prev {
    left: 12px;
  }

  .xb-lightbox-next {
    right: 12px;
  }

  .xb-lightbox button[hidden] {
    display: none;
  }

  .xb-lightbox button:hover {
    background: rgba(255, 255, 255, .26);
  }

  .xb-lightbox button:focus-visible {
    outline: 3px solid var(--xb-green, #19ab4a);
    outline-offset: 2px;
  }

  @media (max-width: 639px) {
    .xb-lightbox .xb-lightbox-zoom-in,
    .xb-lightbox .xb-lightbox-zoom-out {
      display: none;
    }

    .xb-lightbox .xb-lightbox-prev,
    .xb-lightbox .xb-lightbox-next {
      top: auto;
      bottom: max(12px, env(safe-area-inset-bottom));
      transform: none;
      width: 40px;
      height: 40px;
      font-size: 26px;
    }

    .xb-lightbox-bar {
      padding-inline: 60px;
    }
  }

  /* ---------- 音频卡片的倍速、PDF 附件预览 ---------- */
  .xb-media-speed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
  }

  .xb-media-speed-label {
    opacity: .7;
  }

  .xb-media-speed-select {
    min-height: 30px;
    padding: 0 6px;
    border: 1px solid rgba(127, 127, 127, .45);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  .xb-media-speed-select option {
    color: #1f1f1f;
    background: #fff;
  }

  .xb-pdf-toggle {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(127, 127, 127, .45);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9em;
    cursor: pointer;
  }

  .xb-pdf-toggle:hover,
  .xb-pdf-toggle[aria-expanded="true"] {
    border-color: var(--xb-green, #19ab4a);
  }

  .xb-pdf-toggle:focus-visible,
  .xb-media-speed-select:focus-visible {
    outline: 3px solid var(--xb-green, #19ab4a);
    outline-offset: 2px;
  }

  .xb-pdf-frame {
    display: block;
    width: 100%;
    height: min(80vh, 960px);
    border: 1px solid rgba(127, 127, 127, .3);
    border-radius: 10px;
    background: #fff;
  }

  /* ---------- 代码块 ---------- */
  .xb-code {
    position: relative;
  }

  .xb-code-tools {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font: 12px/1 system-ui, sans-serif;
  }

  .xb-code-lang {
    color: var(--xb-muted, #6b6b6b);
    user-select: none;
  }

  .xb-code-copy {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--xb-line, #e6e6e6);
    border-radius: 6px;
    background: var(--xb-paper, #fff);
    color: var(--xb-text, #333);
    font: inherit;
    cursor: pointer;
    opacity: .85;
  }

  .xb-code-copy:hover,
  .xb-code-copy:focus-visible {
    opacity: 1;
    border-color: var(--xb-green, #19ab4a);
  }

  .xb-code-copy.is-done {
    border-color: var(--xb-green, #19ab4a);
    background: var(--xb-green, #19ab4a);
    color: #111;
  }

  /* 代码高亮：黑白灰为主，关键字与数字用品牌绿系（对比度 ≥ 4.5:1） */
  .hljs {
    color: var(--xb-code-text, #24292f);
    background: transparent;
  }

  .hljs-comment,
  .hljs-quote,
  .hljs-meta {
    color: var(--xb-code-comment, #5f6770);
    font-style: italic;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-built_in,
  .hljs-doctag,
  .hljs-section {
    color: var(--xb-code-keyword, #0f7a35);
    font-weight: 600;
  }

  .hljs-string,
  .hljs-regexp,
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta .hljs-string {
    color: var(--xb-code-string, #55595f);
  }

  .hljs-string {
    font-style: normal;
  }

  .hljs-number,
  .hljs-literal,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-variable,
  .hljs-template-variable {
    color: var(--xb-code-number, #0f7a35);
  }

  .hljs-title,
  .hljs-title.function_,
  .hljs-title.class_,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class {
    color: var(--xb-code-title, #1f1f1f);
    font-weight: 600;
  }

  .hljs-type,
  .hljs-params,
  .hljs-attr,
  .hljs-property {
    color: var(--xb-code-type, #44515c);
  }

  .hljs-deletion {
    color: #b42318;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 700;
  }

  .hljs-link {
    text-decoration: underline;
  }

  :root[data-theme="dark"] .hljs {
    --xb-code-text: #e3e3e3;
    --xb-code-comment: #9a9a9a;
    --xb-code-keyword: #4cd27a;
    --xb-code-string: #c4c4c4;
    --xb-code-number: #4cd27a;
    --xb-code-title: #ffffff;
    --xb-code-type: #b8c4ce;
  }

  :root[data-theme="dark"] .hljs-deletion {
    color: #ff8a80;
  }

  /* ---------- 宽表格滚动区 ---------- */
  .xb-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .xb-table-scroll:focus-visible {
    outline: 3px solid var(--xb-green, #19ab4a);
    outline-offset: 2px;
  }

  /* ---------- 公式与图表 ---------- */
  .katex-display,
  .xb-math {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 4px 0;
  }

  .xb-mermaid {
    overflow-x: auto;
    max-width: 100%;
    margin: 1.5em 0;
    text-align: center;
    white-space: pre;
    color: var(--xb-muted, #6b6b6b);
    font-size: 14px;
  }

  .xb-mermaid[data-processed="true"],
  .xb-mermaid:has(svg) {
    white-space: normal;
  }

  .xb-mermaid svg {
    max-width: 100%;
    height: auto;
  }

  /* ---------- 互动表情（系统输出的容器，表情模块的脚本负责交互） ---------- */
  .xb-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .xb-reaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--xb-line, #e6e6e6);
    border-radius: 999px;
    background: var(--xb-paper, #fff);
    color: var(--xb-text, #333);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }

  .xb-reaction[aria-pressed="true"] {
    border-color: var(--xb-green, #19ab4a);
    background: var(--xb-green-wash, rgba(25, 171, 74, .1));
  }

  .xb-reaction img {
    width: 20px;
    height: 20px;
  }

  .xb-reaction-count {
    font-variant-numeric: tabular-nums;
    color: var(--xb-muted, #6b6b6b);
  }

  /* ---------- 主题预览条 ---------- */
  .xb-preview-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 2147483000;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font: 14px/1.4 system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }

  .xb-preview-bar a {
    margin-left: 8px;
    color: #19ab4a;
    font-weight: 600;
  }

  @media (prefers-reduced-motion: reduce) {
    .xb-qs,
    .xb-lightbox,
    .xb-lightbox-img,
    .xb-lightbox-stage::after {
      animation: none !important;
      transition: none !important;
    }
  }

  @media print {
    .xb-code-tools,
    .xb-preview-bar,
    .xb-qs,
    .xb-lightbox,
    .xb-media-tools,
    .xb-pdf-toggle,
    .xb-pdf-preview {
      display: none !important;
    }
  }
}