/* =========================
   Theme variables + apply
   (append to END of app.css)
   ========================= */

:root{
  --nav-bg: #0f172a;
  --border: #1f2937;
  --btn-bg: #111827;
  --btn-border: #334155;
  --input-bg: #0b1220;
  --badge-bg: #1f2937;
  --link: #93c5fd;
}

/* 让组件跟随变量 */
body{ background: var(--bg); color: var(--text); }
a{ color: var(--link); }
.nav{ background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.card{ background: var(--card); border: 1px solid var(--border); }
.btn{ background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text); }
.input,.textarea,.select{ background: var(--input-bg); border: 1px solid var(--btn-border); color: var(--text); }
.badge{ background: var(--badge-bg); color: var(--text); }
.table th,.table td{ border-bottom: 1px solid var(--border); }

/* =========================
   Theme packs (5 themes × light/dark)
   ========================= */

/* Ocean 深海蓝 - 深邃海洋渐变背景 */
html.theme-ocean.theme-dark{
  --bg:#0a0e17; --card:#111827; --text:#f3f4f6; --muted:#d1d5db;
  --pri:#3b82f6; --danger:#dc2626; --ok:#16a34a;
  --nav-bg:#0f172a; --border:#1e293b; --btn-bg:#1e293b; --btn-border:#334155;
  --input-bg:#0d1421; --badge-bg:#1e293b; --link:#60a5fa;
  background: linear-gradient(135deg, #0a0e17 0%, #0f1729 50%, #0a1628 100%);
  background-attachment: fixed;
}
html.theme-ocean.theme-light{
  --bg:#f0f7ff; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --pri:#2563eb; --danger:#dc2626; --ok:#16a34a;
  --nav-bg:#ffffff; --border:#dbeafe; --btn-bg:#ffffff; --btn-border:#bfdbfe;
  --input-bg:#ffffff; --badge-bg:#dbeafe; --link:#2563eb;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #f0f9ff 100%);
  background-attachment: fixed;
}

/* Minimal 极简 - 纯净渐变背景 */
html.theme-minimal.theme-dark{
  --bg:#0a0a0b; --card:#141416; --text:#f9fafb; --muted:#d1d5db;
  --pri:#a3a3a3; --danger:#ef4444; --ok:#22c55e;
  --nav-bg:#0e0e10; --border:#27272a; --btn-bg:#18181b; --btn-border:#3f3f46;
  --input-bg:#0f0f11; --badge-bg:#1c1c1f; --link:#f3f4f6;
  background: linear-gradient(135deg, #0a0a0b 0%, #0e0e0f 50%, #0a0a0b 100%);
  background-attachment: fixed;
}
html.theme-minimal.theme-light{
  --bg:#f8f8f8; --card:#ffffff; --text:#111827; --muted:#6b7280;
  --pri:#111827; --danger:#dc2626; --ok:#16a34a;
  --nav-bg:#ffffff; --border:#e5e7eb; --btn-bg:#ffffff; --btn-border:#d1d5db;
  --input-bg:#ffffff; --badge-bg:#f3f4f6; --link:#111827;
  background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 50%, #f8f8f8 100%);
  background-attachment: fixed;
}

/* Obsidian 黑金 - 奢华金色渐变背景 */
html.theme-obsidian.theme-dark{
  --bg:#060607; --card:#111014; --text:#fafaf9; --muted:#d4d4d8;
  --pri:#fbbf24; --danger:#ef4444; --ok:#22c55e;
  --nav-bg:#0a0a0d; --border:#27272a; --btn-bg:#18181b; --btn-border:#3f3f46;
  --input-bg:#0b0b0f; --badge-bg:#1a1a22; --link:#fcd34d;
  background: linear-gradient(135deg, #060607 0%, #0d0a08 30%, #0a0806 70%, #060607 100%);
  background-attachment: fixed;
}
html.theme-obsidian.theme-light{
  --bg:#fffbf0; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --pri:#d97706; --danger:#dc2626; --ok:#16a34a;
  --nav-bg:#ffffff; --border:#fde68a; --btn-bg:#ffffff; --btn-border:#fcd34d;
  --input-bg:#ffffff; --badge-bg:#fef3c7; --link:#d97706;
  background: linear-gradient(135deg, #fffbf0 0%, #fef3c7 50%, #fffbf0 100%);
  background-attachment: fixed;
}

/* Neon 霓虹 - 赛博朋克渐变背景 */
html.theme-neon.theme-dark{
  --bg:#040510; --card:#0b1024; --text:#f3f4f6; --muted:#d1d5db;
  --pri:#c026d3; --danger:#f43f5e; --ok:#22c55e;
  --nav-bg:#070a18; --border:#2d1b69; --btn-bg:#1e1b4b; --btn-border:#4c1d95;
  --input-bg:#050816; --badge-bg:#1e1b4b; --link:#e879f9;
  background: linear-gradient(135deg, #040510 0%, #0a0520 30%, #1a0a2e 70%, #0a0520 100%);
  background-attachment: fixed;
}
html.theme-neon.theme-light{
  --bg:#faf5ff; --card:#ffffff; --text:#111827; --muted:#6b7280;
  --pri:#9333ea; --danger:#e11d48; --ok:#16a34a;
  --nav-bg:#ffffff; --border:#e9d5ff; --btn-bg:#ffffff; --btn-border:#d8b4fe;
  --input-bg:#ffffff; --badge-bg:#f3e8ff; --link:#9333ea;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
  background-attachment: fixed;
}

/* Forest 森林 - 自然绿色渐变背景 */
html.theme-forest.theme-dark{
  --bg:#06100a; --card:#0e1a12; --text:#f0fdf4; --muted:#d1fae5;
  --pri:#22c55e; --danger:#ef4444; --ok:#22c55e;
  --nav-bg:#08140d; --border:#1f3a2a; --btn-bg:#14532d; --btn-border:#166534;
  --input-bg:#07130c; --badge-bg:#14532d; --link:#86efac;
  background: linear-gradient(135deg, #06100a 0%, #0a1810 30%, #08150e 70%, #06100a 100%);
  background-attachment: fixed;
}
html.theme-forest.theme-light{
  --bg:#f0fdf4; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --pri:#16a34a; --danger:#dc2626; --ok:#16a34a;
  --nav-bg:#ffffff; --border:#bbf7d0; --btn-bg:#ffffff; --btn-border:#86efac;
  --input-bg:#ffffff; --badge-bg:#dcfce7; --link:#16a34a;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);
  background-attachment: fixed;
}
/* ===== Stickers inline + never centered ===== */
.markdown img.sticker,
.parsedown img.sticker,
.small img.sticker {
  display: inline-block !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
  max-width: 160px !important;
  max-height: 160px !important;
}

/* 如果父级 p 被设置了 text-align:center，会导致 inline-block 也居中 */
.markdown p:has(img.sticker),
.parsedown p:has(img.sticker),
.small p:has(img.sticker) {
  text-align: left !important;
}

/* 万一某处用了 flex 居中 */
.markdown p:has(img.sticker),
.parsedown p:has(img.sticker),
.small p:has(img.sticker) {
  display: block !important;
}

/* ===== 头像永远不缩小，用户名太长会显示 ... ===== */
.nav-user{display:flex;align-items:center;gap:8px;min-width:0;max-width:240px;}
.nav-user .avatar-nav{flex:0 0 auto;}
.nav-user .pill{flex:0 0 auto;margin-left:0;}
.nav-user .nav-username{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

.sticker-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.sticker-tab{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;white-space:nowrap;font-size:13px}
.sticker-tab.active{background:rgba(255,255,255,.18)}
/* 仅表情包弹窗用 flex，避免影响其它 emoji 弹窗 */
.emoji-pop.sticker-pop{
  display:flex;
  flex-direction:column;
}

/* 表情包网格：不依赖 aspect-ratio（兼容 iOS/桌面），每格强制正方形 */
.emoji-pop.sticker-pop .sticker-grid{
  --cell: 96px;
  flex: 1 1 auto;
  min-height: 0;          /* 允许在 flex 容器内滚动 */
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  gap: 10px;
  padding: 10px;
  padding-right: 4px;
  align-content: start;
  height: auto;
}
@media (max-width: 520px){
  .emoji-pop.sticker-pop .sticker-grid{ --cell: 88px; gap: 8px; padding: 8px; }
}

.emoji-pop.sticker-pop .sticker-item{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 关键：用 padding-bottom 强制正方形，占位不乱 */
.emoji-pop.sticker-pop .sticker-item::before{
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}


.emoji-pop.sticker-pop .sticker-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* 不裁切；想铺满改 cover */
  display:block;
}

.emoji-img{
  display:inline-block;
  vertical-align:middle;
  width:64px;
  height:64px;
  object-fit:contain;
  margin:0 4px;
}

/* 只控制表情，不影响普通帖子图片 */
img.emoji-img{
  display:inline-block !important;
  vertical-align:middle !important;

  width:74px !important;
  height:74px !important;
  max-width:74px !important;
  max-height:74px !important;

  margin:0 4px !important;
  object-fit:contain !important;
}

/* 关键：让 hidden 真正隐藏弹窗（否则 X 关不掉） */
.emoji-pop[hidden]{display:none !important;}

/* 表情包方块网格（两端都稳） */
.emoji-pop.sticker-pop .sticker-grid{
--cell:96px;
  height:calc(100% - 42px - 52px);
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--cell), 1fr));
  grid-auto-rows:var(--cell);
  gap:10px;
  padding:12px;
  padding-right:4px;
  align-content:start;
}

@media (max-width:520px){
.emoji-pop.sticker-pop .sticker-grid{--cell:84px;gap:8px;padding:8px;}
}
.emoji-pop.sticker-pop .sticker-item{padding:0 !important;overflow:hidden;border-radius:12px;}
.emoji-pop.sticker-pop .sticker-item img{width:100%;height:100%;object-fit:contain;display:block;}

/* 回复正文里的标题也默认绿色（可选） */



/* Disable background scroll when image viewer is open */
html.no-scroll, body.no-scroll { overflow: hidden !important; }


/* Photo lightbox: use (nearly) full viewport for post images */
.sticker-viewer.is-photo .sticker-viewer__panel{max-width:96vw;max-height:96vh;width:auto;padding:10px;}
.sticker-viewer.is-photo .sticker-viewer__img{max-width:96vw;max-height:90vh;width:auto;height:auto;cursor:zoom-in;}
/* Toggle to show original size (scrollable) */
.sticker-viewer.is-photo.is-actual .sticker-viewer__panel{overflow:auto;}
.sticker-viewer.is-photo.is-actual .sticker-viewer__img{max-width:none;max-height:none;cursor:zoom-out;}

/* 修复移动端图片查看器居中问题 */
@media (max-width: 768px) {
  .sticker-viewer.is-photo.is-actual .sticker-viewer__panel {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 !important;
    margin: 0 auto;
  }
  .sticker-viewer.is-photo.is-actual .sticker-viewer__img {
    margin: 0 auto !important;
  }
}

/* 头像下拉：容器 */
.user-menu-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 菜单本体（默认样式：竖排、卡片） */
.user-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 3000;

  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);

  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}

/* 默认隐藏（兼容旧逻辑：hidden 属性） */
.user-menu[hidden]{
  display: none !important;
}

/* 兼容各种“打开菜单”的类名（防止你 JS 用的不是 hidden） */
.user-menu.is-open,
.user-menu.open,
.user-menu.show,
.user-menu.active,
.user-menu-wrap.open .user-menu,
.user-menu-wrap.show .user-menu,
.user-menu-wrap.active .user-menu{
  display: flex !important;
}


/* 打开状态（JS 只要加这个类即可） */
.user-menu.is-open{
  display: flex;
}

/* 每一项 */
.user-menu-item{
  display: block;
  width: 100%;
  text-decoration: none;
  color: #111;

  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.2;
}

.user-menu-item:hover{
  background: rgba(0,0,0,.04);
}

/* 分割线 */
.user-menu-sep{
  height: 1px;
  margin: 6px 6px;
  background: rgba(0,0,0,.10);
}

/* 退出按钮（你现在是 button） */
.user-menu-logout{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: #111;
}

.user-menu-logout:hover{
  background: rgba(0,0,0,.04);
}