/* ============================================================
   视频催更&内容建议 — 专属样式
   复用主站 style.css 设计令牌；电脑端左右两栏，手机端上下堆叠
   ============================================================ */

/* 自定义字体：zh-cn.ttf（日历日期、催更内容、投票数字） */
@font-face {
  font-family: "zh-cn";
  src: url("../../zh-cn.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.cal-day-num,
.cal-item-content,
.cal-vote-count,
.cal-vote-static,
.cal-vote-btn.voted {
  font-family: "zh-cn", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ----------------------------------------------------------
   1. 主容器 + 标题缩小
   ---------------------------------------------------------- */
.calendar-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: calc(var(--navbar-height) + 1.75rem) 1.5rem 3rem;
}

.calendar-main .title-area { margin-bottom: 1.25rem; }
.calendar-main .gensri-icon { width: 3rem; height: 3rem; }
.calendar-main .title-main { font-size: 1.6rem; }
.calendar-main .title-sub { font-size: 0.85rem; }

/* 催更指南板块 */
.guide-card {
  width: 100%;
  max-width: 1600px;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.guide-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.2em;
}

.guide-body p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}

.guide-body p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   2. 左右两栏容器（中间竖线分隔，不留间隙）
   ---------------------------------------------------------- */
.calendar-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1600px;
}

.calendar-left {
  flex: 1 1 52%;
  min-width: 0;
  padding: 1.25rem 1.5rem;
}

.calendar-divider {
  width: 1px;
  flex-shrink: 0;
  background: var(--glass-border);
}

.calendar-right {
  flex: 1 1 48%;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  max-height: 30rem;
  overflow-y: auto;
}

/* ----------------------------------------------------------
   3. 日历头部与日期网格
   ---------------------------------------------------------- */
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.cal-nav:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.cal-title {
  min-width: 7rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

.cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.cal-day.empty { background: transparent; cursor: default; pointer-events: none; }
.cal-day.future:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-hover); transform: translateY(-1px); }
.cal-day.past { color: var(--text-tertiary); opacity: 0.45; }
.cal-day.near { color: var(--text-tertiary); opacity: 0.7; border: 1px dashed rgba(250, 204, 21, 0.4); }
.cal-day.selected { border-color: var(--accent); background: rgba(110, 168, 254, 0.15); color: var(--accent); }

.cal-day-badge {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 0.95rem;
  text-align: center;
}

/* 角标颜色区分：过去灰 / 临近（生效中但不可改）黄 / 可操作绿 */
.cal-day.past .cal-day-badge { background: #9ca3af; }
.cal-day.near .cal-day-badge { background: #f59e0b; }
.cal-day.future .cal-day-badge { background: #22c55e; }

/* ----------------------------------------------------------
   4. 选中日期的内容列表
   ---------------------------------------------------------- */
.cal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.cal-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cal-detail-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cal-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.cal-submit-btn:hover { background: var(--accent-hover); }

/* 剩余可用票数 */
.cal-votes-left {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* 五日限制锁定提示 */
.cal-lock-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* 只读票数（不可操作时仅显示票数） */
.cal-vote-static {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--accent);
}

.cal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
  color: var(--text-secondary);
}

.cal-empty i { font-size: 1.6rem; }
.cal-empty p { font-size: 0.8rem; }

.cal-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cal-item {
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

/* 自己发布的内容：边框高亮 */
.cal-item-self {
  border-color: var(--accent);
  background: rgba(110, 168, 254, 0.08);
}

/* 管理员回复容器（淡蓝色背景） */
.cal-reply-box {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: rgba(110, 168, 254, 0.12);
  border-radius: var(--radius-sm);
}
.cal-reply-content {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: "zh-cn", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
}
.cal-reply-title {
  color: var(--accent);
  font-weight: 600;
}
.cal-reply-time {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.cal-item-content {
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0.5rem;
}

.cal-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.cal-item-name,
.cal-item-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.cal-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  font-size: 0.78rem;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.cal-vote-btn:hover { background: rgba(245, 158, 11, 0.2); }

/* 已投票：绿色 */
.cal-vote-btn.voted {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  cursor: default;
}

/* 票数用完（可操作但禁用）：黄色淡化 */
.cal-vote-btn:disabled {
  border-color: rgba(245, 158, 11, 0.4);
  background: transparent;
  color: rgba(245, 158, 11, 0.55);
  cursor: default;
  opacity: 0.7;
}

/* ----------------------------------------------------------
   5. 提交模态框（问答式，加宽 + 缩小字体）
   ---------------------------------------------------------- */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cal-modal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  width: 800px;
  max-width: 94vw;
  background: rgba(18, 18, 26, 0.96);
  position: relative;
}

.cal-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--text-tertiary);
  line-height: 1;
}

.cal-modal-close:hover { color: var(--text-primary); }

.cal-modal h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0.25rem;
}

.cal-modal h3 i { color: var(--accent); margin-right: 0.3rem; }

.cal-modal-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

/* 问答式标签（说明输入框填写内容） */
.cal-modal-label {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.cal-modal-nickname,
.cal-modal textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
}

.cal-modal-nickname:focus,
.cal-modal textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.cal-modal textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.cal-modal-count {
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.cal-modal-error {
  font-size: 0.75rem;
  color: #ff6b6b;
  text-align: center;
  min-height: 1.2em;
}

.cal-modal-submit {
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.cal-modal-submit:hover { background: var(--accent-hover); }

/* ----------------------------------------------------------
   6. 响应式：手机端（留空隙 + 全面缩小字体 + 日期格正方形）
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .calendar-main { padding: 1rem 1rem 2rem; }
  .calendar-main .title-area { margin-bottom: 1rem; }
  .calendar-main .title-main { font-size: 20px; }
  .calendar-main .title-sub { font-size: 13px; }
  .calendar-main .gensri-icon { width: 36px; height: 36px; }

  .calendar-wrap { flex-direction: column; }
  .calendar-divider { width: 100%; height: 1px; }
  .calendar-left,
  .calendar-right { flex: none; padding: 0.8rem 0.7rem; max-height: none; overflow-y: visible; }

  .cal-nav { width: 1.7rem; height: 1.7rem; font-size: 0.7rem; }
  .cal-title { min-width: 6rem; font-size: 14px; }
  .calendar-weekdays span { font-size: 11px; }
  .calendar-weekdays,
  .calendar-grid { gap: 0.2rem; }

  /* 日期格正方形（宽高相等） */
  .cal-day { aspect-ratio: 1; min-height: 0; height: auto; font-size: 12px; }
  .cal-day-badge { top: 0.12rem; right: 0.12rem; bottom: auto; min-width: 0.55rem; height: 0.55rem; line-height: 0.55rem; font-size: 7px; padding: 0 0.1rem; }

  .cal-detail-date { font-size: 14px; }
  .cal-submit-btn { font-size: 12px; padding: 0.35rem 0.7rem; }

  .guide-card { padding: 0.9rem 0.8rem; }
  .guide-title { font-size: 14px; }
  .guide-body p { font-size: 12px; line-height: 1.7; }
  .cal-votes-left, .cal-lock-hint, .cal-vote-static { font-size: 11px; }
  .cal-empty i { font-size: 1.3rem; }
  .cal-empty p { font-size: 12px; }
  .cal-item { padding: 0.6rem 0.7rem; }
  .cal-item-content { font-size: 13px; }
  .cal-item-meta { font-size: 11px; gap: 0.5rem; }
  .cal-reply-content { font-size: 12px; }
  .cal-reply-time { font-size: 11px; }
  .cal-vote-btn { font-size: 11px; padding: 0.22rem 0.55rem; }

  .cal-modal { width: 100%; max-width: 94vw; padding: 1.1rem 1rem; gap: 0.4rem; }
  .cal-modal-close { top: 0.5rem; right: 0.75rem; font-size: 1.2rem; }
  .cal-modal h3 { font-size: 15px; }
  .cal-modal-date { font-size: 12px; }
  .cal-modal-label { font-size: 12px; margin-top: 0.25rem; }
  .cal-modal-nickname,
  .cal-modal textarea { font-size: 13px; padding: 0.5rem 0.65rem; }
  .cal-modal-count { font-size: 11px; }
  .cal-modal-error { font-size: 11px; }
  .cal-modal-submit { font-size: 13px; }
}

/* ----------------------------------------------------------
   7. 动效（点赞上升渐隐、内容淡入）
   ---------------------------------------------------------- */
.cal-like-float {
  position: fixed;
  z-index: 9999;
  color: var(--accent);
  font-size: 1.1rem;
  pointer-events: none;
  animation: likeFloat 1.2s ease-out forwards;
}

@keyframes likeFloat {
  0% { opacity: 1; transform: translateY(0) scale(0.9); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-48px) scale(1.25); }
}

.cal-fade-in {
  animation: calFadeIn 0.35s ease-out;
}

@keyframes calFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}