/*
  文件: notifications.css
  功能: 通知组件样式（统一格式、移除冗余、补充缺失样式）
  说明: 与 `static/js/components/notifications.js` 配合使用，移动优先、可访问性优先
  作者: 自动助手
  修改: 2025-11-25
*/

:root {
  --notif-zroot: 100500;
  --notif-zpanel: 100501;
  --notif-bg: #ffffff;
  --notif-border: rgba(0,0,0,0.06);
  --notif-shadow: 0 16px 48px rgba(13,18,25,0.14);
  --notif-accent: #2b6cb0;
  --notif-danger: #e53e3e;
  --notif-width: 360px;
  --notif-top: 18px; /* root distance from top */
  --panel-top-offset: 76px; /* panel distance from top */
}

/* ---------- 顶层容器 ---------- */
#notif-root,
.notif-floating {
  position: fixed;
  top: var(--notif-top);
  right: 14px;
  z-index: var(--notif-zroot);
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.notif-floating-mobile {
  left: 12px;
  right: 12px;
  justify-content: flex-end;
}

/* 初始隐藏：未登录时使用 */
.notif-hidden {
  display: none !important;
  pointer-events: none !important;
}

/* ---------- 铃铛按钮 ---------- */
#notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--notif-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  cursor: pointer;
  padding: 6px;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

#notif-btn:hover {
  background: rgba(0,0,0,0.04);
}

#notif-btn:focus {
  outline: 2px solid rgba(59,130,246,0.18);
  outline-offset: 2px;
}

#notif-btn.nudge {
  transform: translateY(-3px);
  animation: bell-nudge 700ms cubic-bezier(.2,.9,.2,1);
}

#notif-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  font-size: 11px;
  border-radius: 999px;
  text-align: center;
  background: var(--notif-danger);
  color: #fff;
  display: none; /* 由 JS 控制显示 */
}

/* 增大按钮内的图标尺寸，使喇叭图标更明显 */
#notif-btn i,
#notif-btn .fa,
#notif-btn .fas {
  font-size: 20px;
  line-height: 1;
}

/* ---------- 面板 ---------- */
#notif-panel,
.notif-panel {
  position: fixed;
  top: var(--panel-top-offset);
  right: 14px;
  width: var(--notif-width);
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow: auto;
  background: var(--notif-bg);
  border-radius: 10px;
  border: 1px solid var(--notif-border);
  box-shadow: var(--notif-shadow);
  z-index: var(--notif-zpanel);
  box-sizing: border-box;
  transform-origin: top right;
  transition: transform 200ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
  opacity: 0;
  transform: translateY(-6px) scale(.992);
  pointer-events: auto;
}

#notif-panel.open,
.notif-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#notif-panel.hidden,
.notif-panel.hidden {
  display: none;
}

#notif-panel .panel-header,
.notif-panel .panel-body {
  padding: 8px 12px;
}

#notif-panel .panel-header {
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#notif-panel .panel-body {
  max-height: 60vh;
  overflow: auto;
  padding: 0px;
}

/* ---------- 条目 ---------- */
.notif-item {
  padding: 8px;
  border-bottom: 1px solid #f6f6f6;
  box-sizing: border-box;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.notif-item .title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.notif-item .notif-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.notif-item .content {
  font-size: 12px;
  color: #374151;
  white-space: pre-wrap;
  margin-top: 8px;
  padding: 8px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #0d6efd;
}

.notif-item .meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

#notif-panel .btn,
.notif-panel .btn.btn-sm {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.notif-panel .btn.btn-sm {
  padding: 4px 6px;
  font-size: 12px;
}

.notif-panel .btn.primary {
  background: var(--notif-accent);
  color: #fff;
  border-color: var(--notif-accent);
}

.notif-panel .editor {
  padding: 8px;
  border-top: 1px solid #f1f1f1;
  background: #fbfbfb;
}

/* ---------- 编辑器（管理员用） ---------- */
.notif-editor {
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  margin-top: 8px;
}

.notif-editor .editor-title,
.notif-editor .editor-content {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e6eef6;
  padding: 8px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}

.notif-editor .editor-title {
  height: 36px;
}

.notif-editor .editor-content {
  min-height: 80px;
  resize: vertical;
}

.notif-editor .editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 面板与条目操作区 */
.panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* 空状态 */
.spa-empty {
  color: #6b7280;
  padding: 12px;
  text-align: center;
  font-size: 12px;
}

/* 悬停与微动效
.notif-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(16,24,40,0.06);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}
 */
.notif-panel .btn {
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.notif-panel .btn:hover {
  transform: translateY(-2px);
}

.notif-panel .btn:active {
  transform: translateY(0);
}

/* 动画 */
@keyframes bell-nudge {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-6deg); }
  60% { transform: translateY(-2px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ---------- 响应与无障碍 ---------- */
@media (max-width: 600px) {
  /* 小屏幕：面板水平居中显示，保留上方偏移 */
  #notif-panel,
  .notif-panel {
    left: 50%;
    right: auto;
    transform-origin: top center;
    /* 在默认（未打开）状态保留原有的 Y 偏移与缩放，同时加上 X 轴居中 */
    transform: translateX(-50%) translateY(-6px) scale(.992);
    top: 90px;
    width: calc(100vw - 25px);
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
  }

  /* 打开时也保持 X 轴居中（与 .open 的 translateY/scale 保持一致） */
  #notif-panel.open,
  .notif-panel.open {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}



/* focus 可聚焦视觉增强 */
#notif-panel :focus,
.notif-panel :focus {
  outline: 2px solid rgba(59,130,246,0.14);
  outline-offset: 2px;
}