/* =========================================================
   前台公共样式（全站组件）
   说明：夜间模式由布局 .night-area 整体反色实现，
        本文件内组件置于该区域内，白底会自动反为深色，
        无需单独写夜间适配。
   ========================================================= */

/* ---------- 分段式 TAB 头部（下划线式） ---------- */
.page-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
/* 非吸顶场景 */
.page-tabs.is-static {
  position: static;
}
.page-tabs__item {
  flex: 1;                 /* 标签平均分配 */
  min-width: 0;
  padding: 13px 6px 11px;
  text-align: center;
  font-size: 15px;
  color: #9ca3af;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.page-tabs__item:active {
  background: #fafafa;
}
.page-tabs__item::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: #f43f5e;
  transition: width 0.2s ease;
}
.page-tabs__item.active {
  color: #f43f5e;
  font-weight: 600;
}
.page-tabs__item.active::after {
  width: 44px;
}

/* 同城 TAB：定位城市名 + 下拉倒三角（点击倒三角弹出城市列表切换同城） */
.page-tabs__city {
  display: inline;
}
.page-tabs__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-tabs__caret:active {
  opacity: 1;
}

/* TAB 内数字徽标 */
.seg-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  margin-left: 4px;
}

/* ---------- 分段面板 ---------- */
.seg-panel {
  display: none;
}
.seg-panel.active {
  display: block;
}

/* ---------- 聊天气泡 ----------
   Tailwind 以 Play CDN（cdn.tailwindcss.com）运行时动态编译样式，
   任意值类（text-[15px]、max-w-[70%]）在页面首次渲染（刷新）时可能未被及时生成，
   导致气泡字号回退默认 16px、宽度失去 70% 限制而撑满整行（胶囊变大），
   与发送时 JS 渲染不一致。此处静态固定字号/行高/换行/内边距/圆角/最大宽度，
   保证 PHP 渲染与 JS 渲染完全一致。 */
.msg-col {
  max-width: 70%;            /* 等价于 Tailwind 任意值类 max-w-[70%] */
}
.msg-bubble {
  padding: 0.5rem 0.75rem;   /* 等价于 px-3 py-2 */
  border-radius: 1rem;       /* 等价于 rounded-2xl */
  font-size: 15px;
  line-height: 1.375;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}