/* ===== Daly arXiv – polished UI for Chirpy ===== */

#arxiv-app {
  --ax-radius: 12px;
  --ax-gap: 12px;
  --ax-card-bg: var(--card-bg, #fff);
  --ax-chip-bg: var(--search-tag-bg, #f8f9fa);
  --ax-chip-hover: var(--tag-hover, #e9ecef);
  --ax-muted: var(--text-muted-color, #767676);
  --ax-accent: var(--link-color, #0d6efd);
  --ax-underline: var(--link-underline-color, #dee2e6);
}

/* ===========================
 * Topbar 不被遮挡
 * =========================== */
#topbar, #topbar .btn, .mode-toggle.btn {
  position: relative;
  z-index: 10 !important;
}
#arxiv-app, .ax-wrap {
  position: relative;
  z-index: 0;
}

/* ===========================
 * Toolbar
 * =========================== */
#arxiv-app .ax-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: .35rem .4rem .4rem .4rem;
  background: var(--card-bg);
  border: 1px solid var(--btn-border-color, #e9ecef);
  border-radius: var(--ax-radius);
}

/* Inputs / select */
#arxiv-app .ax-input,
#arxiv-app .ax-select {
  -webkit-appearance: none;
  height: 36px;
  line-height: 36px;
  font: inherit;
  padding: 0 .75rem;
  border: 1px solid var(--btn-border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--button-bg, #fff);
  outline: none;
}
#arxiv-app .ax-input:focus,
#arxiv-app .ax-select:focus {
  border-color: var(--input-focus-border-color, #b8b8b8);
  box-shadow: 0 0 0 2px rgba(13,110,253,.15);
}

/* ===========================
 * Buttons
 * =========================== */
#arxiv-app .ax-btn {
  height: 34px;
  padding: 0 .7rem;
  border: 1px solid var(--btn-border-color, #e5e7eb);
  border-radius: 12px;
  background: var(--button-bg, #fff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease;
}
#arxiv-app .ax-btn:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
#arxiv-app .ax-btn:active {
  transform: translateY(1px);
}
#arxiv-app .ax-ghost {
  background: transparent;
}

/* 当前选中的 View 更明显 */
#arxiv-app .ax-view-toggle .ax-btn:not(.ax-ghost) {
  border-color: var(--input-focus-border-color, #b8b8b8);
  background: color-mix(in srgb, var(--button-bg, #fff) 85%, var(--link-color, #0d6efd));
}
html[data-mode=dark] #arxiv-app .ax-view-toggle .ax-btn:not(.ax-ghost) {
  background: color-mix(in srgb, #2a2a2a 75%, var(--link-color, #8ab4f8));
}

/* ===========================
 * Category Chips
 * =========================== */
#arxiv-app #ax-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
#arxiv-app .ax-chip {
  border: 1px solid var(--btn-border-color, #e5e7eb);
  background: var(--ax-chip-bg);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .9rem;
  opacity: .95;
  cursor: pointer;
}
#arxiv-app .ax-chip:hover {
  background: var(--ax-chip-hover);
}
#arxiv-app .ax-chip.active {
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--ax-accent) 30%, var(--btn-border-color,#e5e7eb));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-accent) 15%, transparent);
}


/* ===========================
 * Grid & Card Style (auto 1/2/3 cols, with min column width)
 * =========================== */

/* 控制最多 3 栏：3 * 最小列宽 + 2 * gap */

#arxiv-app {
  /* 调这个最小列宽：380px 越大 → 只有更宽时才变 3 栏 */
  --ax-min-col: 380px;
  max-width: calc(3 * var(--ax-min-col) + 2 * var(--ax-gap));
  margin: 0 auto; /* 居中 */
}

#arxiv-app .ax-grid {
  display: grid;
  gap: var(--ax-gap);
  /* 满足最小列宽才新增一列，太窄就自动掉回 2/1 栏 */
  grid-template-columns: repeat(auto-fit, minmax(var(--ax-min-col), 1fr));
}

/* List view 强制单列 */
#arxiv-app .ax-list .ax-grid {
  grid-template-columns: 1fr !important;
}

/* 卡片外观 */
#arxiv-app .ax-card {
  background: var(--ax-card-bg);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--ax-radius);
  padding: .9rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#arxiv-app .ax-card:hover {
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Dark mode */
html[data-mode=dark] #arxiv-app .ax-card {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
html[data-mode=dark] #arxiv-app .ax-card:hover {
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

/* List 左栏布局 */
#arxiv-app .ax-list .ax-card { display: flex; gap: 12px; align-items: flex-start; }
#arxiv-app .ax-leftbar { display: flex; flex-direction: column; gap: 8px; align-items: center; }


/* Dark mode */
html[data-mode=dark] #arxiv-app .ax-card {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
html[data-mode=dark] #arxiv-app .ax-card:hover {
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

/* List 左栏 */
#arxiv-app .ax-list .ax-card { display: flex; gap: 12px; align-items: flex-start; }
#arxiv-app .ax-leftbar { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* ===========================
 * Typography
 * =========================== */
#arxiv-app .ax-title { margin: .1rem 0 .35rem; line-height: 1.25; }
#arxiv-app .ax-meta { color: var(--ax-muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; }

/* ===========================
 * Abstract
 * =========================== */
#arxiv-app details { margin-top: .15rem; }
#arxiv-app summary { color: var(--ax-muted); cursor: pointer; }
#arxiv-app .ax-abs { white-space: pre-wrap; margin: .35rem 0 0; }

/* ===========================
 * Skeleton Loader
 * =========================== */
#arxiv-app .ax-skel {
  height: 110px;
  border-radius: 14px;
  background: linear-gradient(90deg, #00000008, #00000014, #00000008);
  background-size: 200% 100%;
  animation: ax-sh 1.1s linear infinite;
}
@keyframes ax-sh {
  0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

/* ===========================
 * Footer & Count
 * =========================== */
#arxiv-app .ax-count { margin-left: auto; opacity: .8; font-size: .92rem; }
#arxiv-app .ax-footer { display: flex; justify-content: center; margin-top: 10px; }
#arxiv-app .ax-download {
  font-size: .85rem;
  opacity: .8;
  border: 1px dashed var(--btn-border-color, #e5e7eb);
  padding: .4rem .7rem;
  border-radius: 10px;
  text-decoration: none;
}
#arxiv-app .ax-download:hover { opacity: 1; }

/* Favorites star */
#arxiv-app .ax-star {
  background: transparent;
  border-color: transparent;
  font-size: 1.05rem;
}

/* Highlight */
#arxiv-app .ax-hl {
  background: linear-gradient(transparent 60%, #ffe08a88 0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #arxiv-app * { transition: none !important; animation: none !important; }
}



/* ===========================
 * side bar
 * =========================== */
/* 避免 arxiv 页面内容盖住顶部/遮罩 */
#arxiv-app {
  position: static !important;
  z-index: auto !important;
}

/* 确保侧栏永远在遮罩之上，侧栏里的 tab 可点击 */
#sidebar {
  position: fixed !important;
  z-index: 10002 !important;
}

/* 遮罩在侧栏之下、内容之上；left 交给 JS 动态设置 */
#mask {
  position: fixed !important;
  z-index: 10001 !important;
  top: 0; right: 0; bottom: 0;
  pointer-events: auto;         /* 可接收点击来关闭 */
  background: transparent;      /* 需要暗层可用 rgba(0,0,0,.15) */
}

/* 侧栏关闭时，不拦截点击 */
html:not([sidebar-display]) #mask {
  pointer-events: none !important;
}