/* =============================================================================
   澄光 · 主站专属样式
   -----------------------------------------------------------------------------
   只放「聊天页独有的东西」：五子棋棋盘、消息菜单、@提及、引用条、表情包面板、
   移动端单栏降级 + 少量入场动画。
   公共外观（玻璃、气泡、按钮、输入框、头像、滚动条）全部在 theme.css，这里不重复定义颜色，
   否则同一处改两遍，迟早不一致。
   ========================================================================== */

* { box-sizing: border-box; }

/* ---------- 通用交互反馈 ---------- */
.interactive {
  transition: transform var(--dur-2) var(--ease-standard),
              filter var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.interactive:hover { transform: translateY(-1px); filter: brightness(1.03); }
.interactive:active { transform: scale(0.965); transition-duration: 80ms; }

/* ---------- 微信式消息入场 ---------- */
.message-in { animation: cx-rise var(--dur-3) var(--ease-out) both; }
@keyframes cx-rise {
  from { opacity: 0; transform: translateY(9px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 弹窗：只保留动效，外观交给 theme.css */
.modal { animation: cx-modal-in var(--dur-3) var(--ease-out) both; }
@keyframes cx-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 气泡尺寸（颜色/圆角/阴影在 theme.css） ---------- */
.bubble {
  /* 不用百分比上限：气泡的父级是 shrink-to-fit，百分比 max-width 会和
     "父宽由内容决定" 形成循环，短消息（如 "6"）会被压到 80px、元信息折成三行。
     用固定上限 + 视口兜底，宽度只由内容决定。 */
  max-width: 620px;
  min-width: 0;
  overflow: hidden;
}

/* ---------- 五子棋 ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  aspect-ratio: 1;
  width: min(76vw, 480px);
  padding: 18px;
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(240, 222, 190, 0.92), rgba(214, 187, 150, 0.86)),
    #dfc49d;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cell { position: relative; }
.cell::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 1px;
  background: rgba(102, 80, 49, 0.45);
  transform: translate(-50%, -50%);
}
.cell::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 1px; height: 100%;
  background: rgba(102, 80, 49, 0.45);
  transform: translate(-50%, -50%);
}
.stone {
  position: absolute;
  z-index: 2;
  inset: 12%;
  border-radius: 50%;
  animation: cx-stone var(--dur-2) var(--ease-spring) both;
  box-shadow: 0 4px 8px rgba(73, 59, 50, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}
@keyframes cx-stone { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.black { background: radial-gradient(circle at 35% 28%, #78839a, #263246); }
.white { background: radial-gradient(circle at 35% 28%, #ffffff, #d8dfef); }

/* ---------- 会话头部菜单（外观在 theme.css 的浮层组） ---------- */
.headmenu {
  display: none;
  position: absolute;
  right: 0; top: 48px;
  z-index: var(--z-menu);
  width: 180px;
  padding: 6px;
}
.headmenu-item {
  padding: 9px 11px;
  font-size: var(--fs-sm);
  transition: background-color var(--dur-1), color var(--dur-1);
}

/* ---------- @ 提及 ---------- */
.mention { font-weight: var(--fw-semibold); }
.mention-me { border-radius: var(--r-xs); padding: 0 3px; }

/* ---------- 引用回复 ---------- */
.quotebar {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.quote-in {
  margin-bottom: 6px;
  max-width: 280px;
  padding: 6px 10px;
  border-left: 3px solid var(--brand-line);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- @ 候选弹层 ---------- */
.mention-pop {
  display: none;
  position: absolute;
  bottom: 100%; left: 12px;
  z-index: var(--z-menu);
  width: 220px;
  max-height: 200px;
  overflow: auto;
  padding: 6px;
}
.mention-item { font-size: var(--fs-sm); }

/* ---------- 消息上的「⋯」：悬停/触屏才出现 ---------- */
.msgmenu {
  position: absolute;
  top: -6px; right: -30px;
  z-index: 20;
  display: flex;
  width: 26px; height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard), color var(--dur-1), background-color var(--dur-1);
}
.msgwrap:hover .msgmenu { opacity: 1; }
@media (hover: none) { .msgmenu { opacity: 1; } }

/* ---------- 侧栏拖拽条 ---------- */
.grip {
  width: 4px; height: 56px;
  border-radius: var(--r-full);
  background: rgba(148, 163, 184, 0.40);
  transition: background-color var(--dur-2), height var(--dur-2);
}
#splitter:hover .grip { background: var(--brand); height: 76px; }

/* ---------- 移动端：单栏降级（≤720 的原始规则保留，≤820 的覆盖在 enhance.css） ---------- */
@media (max-width: 720px) {
  .sidebar { width: 240px !important; }
  .label, .copy, .search { display: none; }
  .sidebar button { justify-content: center; }
  .bubble { max-width: calc(100vw - 84px); }
}

/* ---------- 表情包气泡与面板 ---------- */
.sticker-bubble {
  max-width: 170px;
  background: transparent;
  border: 1px solid var(--border-line);
  box-shadow: none;
  padding: 4px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sticker-media {
  display: block;
  width: 126px; height: 126px;
  object-fit: contain;
  border-radius: var(--r-md);
}
.stk-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--divider);
}
.stk-tab {
  flex: 1;
  padding: 7px 0;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-3);
  background: transparent;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.stk-tab:hover { color: var(--text-1); background: var(--surface-2); }
.stk-tab.on {
  color: var(--brand-ink);
  background: var(--brand-soft);
  font-weight: var(--fw-semibold);
}
.stk-body { max-height: 288px; overflow-y: auto; padding: 10px 12px; }
.stk-sec-title { font-size: var(--fs-xs); color: var(--text-3); margin: 6px 0 8px; }
.stk-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.stk-emoji {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-1), transform var(--dur-1);
  padding: 0;
}
.stk-emoji:hover { background: var(--brand-soft); transform: scale(1.16); }
.stk-mygrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stk-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-line);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
}
.stk-cell:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.stk-cell img, .stk-cell video { width: 100%; height: 100%; object-fit: contain; }
.stk-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  line-height: 19px;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: var(--shadow-1);
}
.stk-empty { padding: 34px 16px; text-align: center; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.stk-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--divider);
  background: var(--surface-1);
}
.stk-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.stk-btn:hover { background: var(--surface-active); color: var(--text-1); transform: translateY(-1px); }
.stk-btn.warn { color: var(--danger); }
.stk-packbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 2px; max-height: 78px; overflow-y: auto; }
.stk-pack {
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-line);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.stk-pack:hover { color: var(--text-1); }
.stk-pack.on { background: var(--brand-grad); color: var(--brand-contrast); border-color: transparent; font-weight: var(--fw-medium); }

/* 加号菜单项悬停（内联事件迁到委托后由 CSS 接管） */
#plusMenu > button { transition: background-color var(--dur-1), color var(--dur-1); }