/* ======================= 基础样式 ======================= */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f4f5f7;
}

header {
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 15px;
}

#homeIcon img {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.search-wrap{
  position: relative;
  display: inline-block;
  margin-left: auto; /* 把“靠右”从 input 转移到容器，更稳定 */
}

#searchInput {
  padding: 5px 28px 5px 10px;
  font-size: 0.95em;
  /* 圆角 + 边框 */
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.3);

  /* 背景玻璃感 */
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);

  /* 字体颜色 */
  color: #2c2c2c;

  /* 过渡动画 */
  transition: all 0.2s ease-in-out;
}

#searchInput:focus {
  outline: none; /* 去掉默认蓝色框 */
  background-color: rgba(250, 250, 250, 0.35); /* 聚焦时稍亮 */
  border-color: rgba(180, 180, 180, 0.6);
  box-shadow: 0 0 5px rgba(200,200,200,0.4);
}

.search-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: none;   /* 默认隐藏，有内容才显示 */
  opacity: 0.6;
}

.search-clear:hover{ opacity: 1; }

/* 排序按钮 & 夜间模式按钮通用样式 */
#sortToggle,
#darkToggle {
 padding: 5px 8px;
  font-size: 0.9em;
    /* 圆角 + 边框 */
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.3);

  /* 背景玻璃感 */
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);

  /* 字体颜色 */
  color: #575757;

  /* 过渡动画 */
  transition: all 0.2s ease-in-out;
}

/* 鼠标悬停或聚焦时 */
#sortToggle:hover,
#sortToggle:focus,
#darkToggle:hover,
#darkToggle:focus {
  background-color: rgba(255, 255, 255, 0.35);
  border-color: rgba(220, 220, 220, 0.6);
  box-shadow: 0 0 5px rgba(220,220,220,0.4);
  outline: none;
}


/* ======================= 左右侧固定栏 ======================= */
#monthSidebar, #memberSidebar {
  position: fixed;
  top: 70px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 10px;
  padding-bottom: 70px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 50;
}

#monthSidebar { left: 10px; width: 100px; }
#memberSidebar { right: 10px; width: 80px; }

.month-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 0.9em;
  border-radius: 6px;
  border: 1px solid rgba(200, 200, 200, 0.5);
  background: white;
  color: #333;
  cursor: pointer;
  margin-bottom: 10px;
}

.month-select:focus {
  outline: none;
  border-color: rgba(160, 160, 160, 0.8);
  box-shadow: 0 0 4px rgba(180, 180, 180, 0.35);
}

.month-btn, .member-btn {
  display: block;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: white;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.month-btn:hover, .member-btn:hover { background: #e6f0ff; }

.member-btn img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.close-btn {
  float: right;
  cursor: pointer;
  font-size: 1.2em;
}


/* ======================= 年份折叠 + 月份按钮 ======================= */
.year-item {
  margin-bottom: 6px;
}

.year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  background: #e0e5f0;
  border-radius: 6px;
  font-weight: bold;
}

.year-header:hover {
  background: #d0d8ec;
}

.toggle-arrow {
  transition: transform 0.2s;
}

.year-header.expanded .toggle-arrow {
  transform: rotate(180deg);
}

.months-container {
  display: none; /* 默认折叠 */
  margin-left: 6px;
  margin-top: 4px;
}

.month-btn {
  display: flex;
  justify-content: space-between; /* 显示月份 + 推文数 */
  padding: 4px 6px;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.month-btn:hover {
  background: #e6f0ff;
}

/* ======================= 主区域 ======================= */
main {
  position: relative;
  margin: 0 120px 0 140px;
  height: calc(100vh - 60px);
  overflow: hidden;
}

#tweetContainer {
  height: 100%;
  overflow-y: auto;
}

.tweet {
  width: 100%;
  max-width: 100%;   /* 不超过 tweetContainer */
  overflow: hidden;  /* 防止内容撑出 */
  box-sizing: border-box;
  word-break: break-word;
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 14px;
  object-fit: cover;
}

.tweet-body {
  flex: 1 ;  /* 可伸缩 */
  min-width: 0;     /* 关键：允许收缩 */
  display: flex;
  flex-direction: column;
}

.tweet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.original-toggle-btn {
  margin-left: auto;     /* 自动推到右边 */
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #f2f2f2;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 原文分割线 + 上下间距 */
.tweet-original {
  display: none;          /* 默认隐藏 */
  margin-top: 8px;
  margin-bottom: 12px;
  padding-top: 8px;
  line-height: 1.5;
  border-top: 1px solid #eee;
  color: #555;
  font-size: 0.9em;
  white-space: pre-wrap;
}


/* ===== 引用推文（更像 Twitter 的卡片） ===== */
.tweet-quoted {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 20, 25, 0.15); /* 细边框 */
  border-radius: 12px;                      /* Twitter 风圆角 */
  background: rgba(255, 255, 255, 0.6);     /* 轻微底色，避免太“框” */
  box-sizing: border-box;
  overflow: hidden;
}

/* 让引用内容整体更紧凑一些 */
.tweet-quoted .tweet-quoted-inner {
  margin: 0;
  padding: 0;            /* 外框已经有 padding */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 引用里的头像稍小一点（可选，更像引用卡片） */
.tweet-quoted .avatar {
  width: 36px;
  height: 36px;
  margin-top: 10px;
}

/* 引用里的文字略小一点（可选） */
.tweet-quoted .tweet-content {
  font-size: 0.95em;
}

/* ✅ 只管正文图片，不影响头像 */
img.tweet-image {
  display: block;
  max-width: 600px;
  height: auto;
  width: 100%; 
  object-fit: contain;
}

/* ===== 图片弹窗（Lightbox） ===== */
#imgModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;              /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  z-index: 3000;              /* 高于 header / bottom bar */
  padding: 20px;
  box-sizing: border-box;
}

#imgModal.show {
  display: flex;
}

#imgModal img {
  max-width: min(96vw, 1100px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

/* 可选：让图片看起来可点 */
img.tweet-image {
  cursor: zoom-in;
}

.tweet-content,
.tweet-original,
.tweet-quoted {
  overflow-wrap: anywhere; /* 比 break-word 更“强硬” */
}

.tweet-name { font-weight: bold; }
.tweet-id { color: gray; font-size: 0.85em; }
.tweet-content { line-height: 1.5; margin-bottom: 4px; white-space: pre-wrap; margin-top: 8px}
.tweet-tag { display: inline-block; margin-right: 6px; color: #1a73e8; font-size: 0.85em; cursor: pointer; }
.tweet-tag:hover { text-decoration: underline; }
.tweet-date { font-size: 0.75em; color: #888; margin-top: 6px; margin-bottom: 12px; }

.tweet.deleted .tweet-content, 
.tweet.deleted .tweet-tag {
  text-decoration: line-through;
  text-decoration-color: #c8c8c8;
  text-decoration-thickness: 1px;
}

.deleted-note {
  margin-top: 4px;
  font-size: 0.85em;
  color: #999;
  font-style: italic;
}

/* ======================= 夜间模式 ======================= */
body.dark {
  background: #1e1e1e;
  color: #ccc;
}
body.dark main { color: #ccc; }
body.dark .tweet { background: #2c2c2c; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
body.dark .tweet-id, body.dark .tweet-date { color: #aaa; }

body.dark .tweet.deleted .tweet-content, 
body.dark .tweet.deleted .tweet-tag {
  text-decoration-color: #777;
}

body.dark .deleted-note {
  color: #aaa;
}

/* header 夜间模式 */
body.dark header {
  background-color: #1f1f1f;
  color: #ccc;
  border-bottom: 1px solid #333;
}

/* 夜间模式 */
body.dark .tweet-original {
  border-top: 1px solid #444;
  color: #bbb;
}

body.dark .original-toggle-btn {
  background: #333;
  border: 1px solid #555;
  color: #ccc;
}

/* 夜间模式：引用卡片 */
body.dark .tweet-quoted {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

/* 侧边栏夜间模式 */
body.dark #memberSidebar,
body.dark #monthSidebar {
  background-color: #1a1a1a;
  color: #ccc;
  border-right: 1px solid #333;
}

body.dark .month-select {
  background: #2a2a2a;
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 侧边栏按钮文字/hover */
body.dark .member-btn,
body.dark .month-btn,
body.dark button {
  background-color: #2a2a2a; /* 默认深色背景 */
  color: #ccc;
}

body.dark .member-btn:hover,
body.dark .month-btn:hover,
body.dark button:hover {
  background-color: #333;
  color: #fff;
}

/* ========== 指南按钮 ========== */
#guideBtn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 8px; /* 在成员头像下方 */
  margin-bottom: 10px;
  background-color: #9b9b9b;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

#guideBtn:hover {
  background-color: #191970;
}

/* ========== 弹窗遮罩 ========== */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* 半透明背景 */
  justify-content: center;
  align-items: center;
}

/* ========== 弹窗内容 ========== */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-out;
}

/* ========== 关闭按钮 ========== */
.close-btn {
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.close-btn:hover {
  color: #000;
}

/* ========== 弹窗标题 ========== */
#guideTitle {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

/* ========== 列表样式 ========== */
#guideList {
  padding-left: 20px;
}

#guideList li {
  margin-bottom: 6px;
  line-height: 1.4;
}

/* ========== 动画效果 ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px);}
  to { opacity: 1; transform: translateY(0);}
}

/* ========== 夜间模式兼容 ========== */
body.dark .modal-content {
  background-color: #222;
  color: #fff;
}

body.dark #guideBtn {
  background-color: #9b9b9b;
}

body.dark #guideBtn:hover {
  background-color: #191970;
}

/* ===================== 新增重要事件按钮和 hidden label 样式 ===================== */
#importantBtn {
  display: block;
  width: 90%;
  margin: 5px auto;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
 
  /* 背景 + 玻璃效果 */
  background-color: rgba(200, 200, 200, 0.2); /* 半透明背景 */
  backdrop-filter: blur(6px);                 /* 背景模糊 */
  
  /* 边框 & 圆角 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;

  /* 字体颜色和阴影 */
  color: #080808;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);

  /* 动画过渡 */
  transition: all 0.2s ease-in-out;
}

#importantBtn:hover {
  background-color: #e0e0e0;
}

#hiddenLabelsList {
  list-style: none;
  padding-left: 10px;
  margin-top: 5px;
  border-left: 2px solid #ccc;
}

#hiddenLabelsList li {
  cursor: pointer;
  padding: 3px 0;
  color: #2f2f2f;   /* 日间：深灰偏黑 */
}

body.dark #hiddenLabelsList li {
  color: #d6d6d6;   /* 夜间：浅灰偏白 */
}

#hiddenLabelsList li:hover {
  text-decoration: underline;
}

#hiddenLabelsList {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* 展开状态 */
#hiddenLabelsList.show {
  max-height: 500px; /* 足够显示所有 label */
}

#mobileBottomBar {
 
}

/* 注释词样式 */
.annotated {
  border-bottom: 1px dashed #1a73e8;
  cursor: pointer;
  position: relative;
   /* 手机端也加轻微高亮，增强可点击性 */
  margin-top: 2px;
  margin-bottom: 2px;
  display: inline-block; /* 必须加 inline-block 才能应用上下 margin */
  transition: background-color 0.2s;
}

/* PC端 hover 效果 */
.annotated:hover {
  background-color: rgba(26, 115, 232, 0.1);
}

/* 悬浮窗 tooltip 样式 */
.annotation-tooltip {
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  white-space: normal;
  z-index: 1000;
  display: none; /* 点击显示 */
  max-width: 200px;
  font-size: 0.85em;
  word-break: break-word; /* 防止长词撑出 */
  line-height: 1.4;          /* 增加行高，让文字更易读 */
  margin-top: 4px;           /* 与文字本身保持距离 */
}

body.dark .annotation-tooltip {
  background-color: #222;
  color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* annotation 图片容器 */
.annotation-tooltip .anno-images {
  margin-top: 6px;       /* 文字和图片之间留点空间 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* annotation 图片 */
.annotation-tooltip .anno-images img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.annotation-tooltip img {
  max-height: 160px;
}

#monthOverlay {
  display: none;
}

.jump-text {
  cursor: pointer;
}

.jump-text:hover {
  text-decoration: underline;
}

.tweet-highlight {
  animation: tweetFlashBg 0.8s ease;
}

@keyframes tweetFlashBg {
  0% {
    background-color: rgba(255, 230, 120, 0.55);
  }
  100% {
    background-color: transparent;
    outline: 0 solid transparent;
  }
}


/* ========== 手机兼容 ========== */
@media (max-width: 768px) {

  /* 页面整体改单列 */
  body {
    display: block;
  }

  body.dark {
    background-color: #1e1e1e; /* 夜间模式深色 */
  }

  body.dark #tweetContainer {
    background-color: #545454; /* 夜间模式深色 */
}
  
body.dark, 
html.dark,
body.dark > #app {
  background-color: #333; 
}

  header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: white;
  box-sizing: border-box;
  overflow-x: hidden; /* 禁止横向拖动 */
}

/* logo 固定大小，不缩小 */
#homeIcon img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

/* 搜索框：占剩余空间，可缩小 */
#searchInput {
  flex: 1 1 auto;   /* 可以占剩余空间，也可以缩小 */
  min-width: 30px;   /* 最小宽度，防止看不见 */
  font-size: 14px;
  box-sizing: border-box;
  white-space: nowrap;  /* 保持单行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出显示省略号 */
}

/* 排序下拉和夜间模式按钮：可缩小，不换行 */
#sortToggle, #darkToggle {
  flex: 0 1 auto;      /* 不占剩余空间，但可以缩小 */
  min-width: 30px;     /* 最小宽度 */
  max-width: 60px;     /* 最大宽度，防止撑出屏幕 */
  font-size: 12px;
  padding: 4px 6px;    /* 可调小，越小越容易缩 */
  box-sizing: border-box;
  white-space: nowrap;  /* 保持单行 */

  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

  #sortToggle:active,
  #darkToggle:active {
        transform: scale(0.94);
  }
  
  body.dark #sortToggle,
  body.dark #darkToggle {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #f5f5f5;
        box-shadow: none;
   }

    /* 成员栏改为顶部横向滚动 */
  #memberSidebar {
    position: fixed;
    left: 0;          /* ✅ 重置 */
    right: 0;         /* ✅ 重置 */
    width: auto;      /* ✅ 用 left+right 控宽，比 width:100% 更稳 */
    height: 60px;
    top: 60px;        /* header 高度 */
    display: inline-flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 10px;          /* 留空间 */
    gap: 10px;                /* 元素之间间距 */
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;  /* 必须加这个 */
    scroll-padding-left: 10px;
  }

#guideBtn {
  padding: 0;
  margin-top: 8px; 
  margin-bottom: 10px;
 
}


    
  #memberSidebar .member-btn {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  body.dark #memberSidebar {
    background: #111;
    border-color: #333;
  }

  /* 月份栏可折叠 */
#monthSidebar {
    display: none !important;
  }

#mobileBottomBar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background: white;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
  }

  body.dark #mobileBottomBar {
    background: #111;
    border-color: #333;
  }

  body.dark header {
    background-color: #1a1a1a;
    color: #ccc;
    border-bottom: 1px solid #333;
  }

  body.dark .member-btn {
    background-color: #2a2a2a;
    color: #ccc;
  }

  body.dark .member-btn:hover {
    background-color: #333;
    color: #fff;
  }

  /* 给页面底部留空间 */
  main {
    margin: 100px 0 70px 0;
    padding: 0 10px; 
    width: auto;
    box-sizing: border-box;
  }

#mobileMonthBtn, #mobileImportantBtn {
  display: block;
  z-index: 1000;
}

  #monthOverlay {
    display: none;
    position: fixed;
    top: 60px;       /* header 高度 */
    left: 0;
    right: 0;
    bottom: 55px;    /* 底部栏高度 */
    background: rgba(0, 0, 0, 0.2);
    z-index: 998;    /* 比 monthSidebar 低一点 */
  }

  #monthOverlay.show {
    display: block;
  }

  #monthSidebar.mobile-open {
    display: block !important;
    position: fixed;
    top: 60px;
    left: 0;
    width: 200px;
    height: calc(100% - 115px); /* 60(header) + 55(bottom bar) */
    background: #f9f9f9;
    z-index: 999;
    overflow-y: auto;
    padding: 10px;
  }

#monthSidebar.mobile-open .month-select {
  width: 100%;
  font-size: 0.95em;
  padding: 8px 10px;
  margin-bottom: 10px;
}

  body.dark #monthOverlay {
    background: rgba(0, 0, 0, 0.35);
  }

 /* 推文区域全宽 */
 #tweetContainer {
    position: fixed;      /* 固定在视口 */
    top: 130px;           /* 留出 header + 成员栏高度 */
    bottom: 70px;         /* 留出底部操作栏 */
    overflow-y: auto;     /* 内部可滚动 */
    overflow-x: hidden;
    left: 10px;
    right: 10px; 
    box-sizing: border-box;
    background: white;    /* 可选，防止内容透到底色 */
    z-index: 500;         /* 确保在底部栏下方 */
    padding: 10px 0 80px 0;      /* 上下间距，如果需要 */
  }
  

  .tweet {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 15px;
    box-sizing: border-box;
    word-break: break-word;
  }

  /* 最后一条推文后自动空出底部栏 */
#tweetContainer::after {
  content: "";
  display: block;
  height: 100px; /* 底部栏高度 + 安全间距 */
}




.annotation-tooltip {
    max-width: 90%;
    font-size: 0.9em;
    padding: 10px;
  }

/* 手机端图片自适应 */
.annotation-tooltip .anno-images img {
  max-width: 100%;
  height: auto;
}

/* 防止图片过高占满屏 */
.annotation-tooltip img {
  max-height: 40vh;
}

/* 保证不贴屏幕边缘 */
.annotation-tooltip {
  box-sizing: border-box;
}

}


@media (min-width: 769px) {
  #mobileImportantBtn, #mobileMonthBtn {
    display: none;
  }
}