/* =========================================================
   星灿情感馆 · H5 应用层（在 base.css 之后加载）
   设计系统全部位于 base.css；本文件只保留「线上适配」与「服务端反馈」两件事，
   页面级样式严格按设计原型逐页内联注入（对应 prototype/h5/*.html 各页 <style>）。
   ========================================================= */

/* ---------- 1. 线上适配：原型 .phone 是 375×812 设计画布，线上铺满视口 ---------- */
body { background: #EFECF5; }
.phone {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
}
@media (min-width: 481px) {
  .phone { box-shadow: 0 0 0 1px rgba(28, 16, 60, .06); }
}

/* ---------- 2. 服务端提示：居中 alert 风格卡片（紫调） ---------- */
.flash {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1000; min-width: 262px; max-width: 82%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 13px; padding: 26px 22px 22px; border-radius: 22px;
  font-size: 14px; font-weight: 600; line-height: 1.6; color: #2D1B54;
  background: #fff; border: 1px solid rgba(124,58,237,.1);
  box-shadow: 0 26px 64px rgba(17,12,46,.2), 0 4px 12px rgba(124,58,237,.12);
  animation: flashIn .3s cubic-bezier(.2,.8,.2,1);
}
.flash-ic {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
  background: linear-gradient(135deg, #F5F0FF, #EDE4FF); color: #7C3AED;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.08);
}
.flash-err .flash-ic { background: linear-gradient(135deg, #FFEFF2, #FCE4E9); color: #E11D48; }
.flash-ok  .flash-ic { background: linear-gradient(135deg, #E7FBF1, #D8F6E8); color: #059669; }
.flash-msg { flex: 0; }
.flash-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: #B9B3CC; font-size: 15px; cursor: pointer; padding: 3px 5px; border-radius: 8px; }
.flash-x:active { background: rgba(124,58,237,.08); }
.flash-out { opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: .26s; }
@keyframes flashIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------- 2.1 分页信息（base.css 仅定义 .pager .pg[.is-on]，此处补齐说明文字） ---------- */
.pager .pg-info { font-size: 11.5px; color: var(--ink-4); margin-left: 4px; }

/* ---------- 3. JS 动态生成元素（app.js） ---------- */
#toast {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: rgba(20, 12, 40, .86); color: #fff; padding: 10px 18px;
  border-radius: var(--r-m); font-size: 13px; z-index: 999;
  display: none; white-space: nowrap;
}

/* 二次确认弹层（app.js 动态生成，取消订单 / 确认完成 / 退款申请等所有 data-confirm 共用，不走原生 confirm）
   背景色分「白天 / 晚上」两套（由 app.js 按时间判定并挂 .is-night）：
   · 白天（06:00–18:00）：与「姓名记录删除」弹窗（name-match.php）一致 —— 浅粉紫底 + 深紫字
   · 晚上（18:00–06:00）：与「星座记录删除」弹窗（zodiac.php）一致 —— 深紫星空底 + 白字 + 星点
   · 深底沉浸页（星座 / 工作台等 body 或 .phone 为深色）始终走晚上那套，避免浅底压在深紫上 */
#xcConfirmMask {
  position: fixed; inset: 0; z-index: 998; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 5, 24, .62); backdrop-filter: blur(2px); padding: 24px;
}
#xcConfirmMask.show { display: flex; }
#xcConfirmMask .xc-dlg {
  width: 100%; max-width: 300px; border-radius: 18px; padding: 22px 20px 18px;
  position: relative; overflow: hidden; animation: xcPop .25s both;
  background:
    radial-gradient(130% 90% at 85% -15%, rgba(236, 72, 153, .38), transparent 58%),
    radial-gradient(130% 90% at 0% 0%, rgba(124, 58, 237, .42), transparent 55%),
    linear-gradient(160deg, #FDF2F8 0%, #EDE9FE 58%, #F5F3FF 100%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 60px rgba(124, 58, 237, .28);
}
#xcConfirmMask .xc-t { font-size: 15px; font-weight: 700; color: #3B1D6E; line-height: 1.5; margin-bottom: 8px; }
#xcConfirmMask .xc-dlg.is-tight .xc-t { margin-bottom: 0; }
#xcConfirmMask .xc-c { font-size: 12.5px; line-height: 1.5; color: #5B4B86; }
#xcConfirmMask .xc-c:empty { display: none; }
#xcConfirmMask .xc-b { display: flex; gap: 10px; margin-top: 18px; }
#xcConfirmMask .xc-btn {
  flex: 1; padding: 10px 0; border: none; border-radius: 12px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: .2s;
}
#xcConfirmMask .xc-btn.ghost { background: rgba(124, 58, 237, .1); color: #7C3AED; border: 1px solid rgba(124, 58, 237, .25); }
#xcConfirmMask .xc-btn.ghost:hover { background: rgba(124, 58, 237, .16); }
#xcConfirmMask .xc-btn.danger { background: linear-gradient(135deg, #FB7185, #E11D48); color: #fff; box-shadow: 0 8px 20px rgba(225, 29, 72, .34); }
#xcConfirmMask .xc-btn.danger:hover { filter: brightness(1.05); }
#xcConfirmMask .xc-btn:active { transform: scale(.96); }
#xcConfirmMask .xc-dlg .xc-t,
#xcConfirmMask .xc-dlg .xc-c,
#xcConfirmMask .xc-dlg .xc-b { position: relative; z-index: 2; }
#xcConfirmMask .xc-dlg .stars { display: none; }   /* 白天不铺星点 */
@keyframes xcPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes xcTw { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: .95; transform: scale(1.15); } }

/* 晚上 / 深底页面：回到原来的深紫星空底 */
#xcConfirmMask.is-night .xc-dlg {
  background: linear-gradient(158deg, #1E1B4B 0%, #4C1D95 55%, #7C3AED 100%);
  border: none; box-shadow: 0 24px 60px rgba(28, 16, 60, .5);
}
#xcConfirmMask.is-night .xc-dlg .stars { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#xcConfirmMask.is-night .xc-dlg .stars i { position: absolute; background: #fff; border-radius: 50%; opacity: .7; animation: xcTw 3s infinite ease-in-out; }
#xcConfirmMask.is-night .xc-t { color: #fff; }
#xcConfirmMask.is-night .xc-c { color: rgba(255, 255, 255, .72); }
#xcConfirmMask.is-night .xc-btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
#xcConfirmMask.is-night .xc-btn.ghost:hover { background: rgba(255, 255, 255, .16); }

/* ---------- 4. 服务商卡片「关注」按钮（列表页右上角） ---------- */
.follow-btn {
  flex-shrink: 0;
  align-self: flex-start;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px solid #6366F1;
  background: #fff;
  color: #4338CA;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .18);
  transition: all .15s ease;
}
.follow-btn:disabled { opacity: .6; cursor: default; }
.follow-btn.is-on {
  border-color: #E5E7EB;
  background: #F3F4F6;
  color: #9CA3AF;
  box-shadow: none;
}

/* ---------- 5. 全局新消息浮层（app-notify.js） ----------
   任何主页面收到新消息时，顶部滑下一条提示：谁发的 + 内容，点一下直接进会话 */
.xc-msg-tip {
  position: fixed;
  left: 50%;
  top: 10px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(30, 27, 75, .94);
  color: #fff;
  box-shadow: 0 10px 30px rgba(30, 27, 75, .35);
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
  transform: translate(-50%, -160%);
  transition: transform .28s ease;
}
.xc-msg-tip.on { transform: translate(-50%, 0); }
.xc-msg-tip .xc-msg-ic { flex-shrink: 0; font-size: 15px; }
.xc-msg-tip .xc-msg-tx { display: flex; flex-direction: column; min-width: 0; }
.xc-msg-tip .xc-msg-tx b { font-size: 12.5px; font-weight: 700; }
.xc-msg-tip .xc-msg-tx span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .75);
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 未读角标补位（app-notify.js）
   没有底部导航的页面（聊天页 / 详情页）用不上「消息」tab，改画在导航栏右侧；
   默认隐藏，只有真的有人找你时才出现，避免平时干扰界面 */
.xc-msg-pill {
  display: none;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #FEE2E2;
  color: #DC2626;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.xc-msg-pill.on { display: inline-flex; }
.xc-msg-pill b { font-size: 11px; font-weight: 700; }
.xc-msg-pill.is-float {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 9998;
  height: 26px;
  padding: 0 10px;
  gap: 4px;
  background: #fff;
  border: 1px solid #FECACA;
  box-shadow: 0 6px 18px rgba(220, 38, 38, .22);
  font-size: 12px;
}
.xc-msg-pill .xc-pill-ic { font-size: 12px; }