/* ============================================================
   风花国际 · 视觉升级皮肤 (v8)
   作用范围：彩票房间页 + 客服聊天页
   原则：只改背景/圆角/阴影/颜色/字重，不动布局尺寸，避免破坏功能
   ============================================================ */

:root {
  --zk-blue-1: #0ea5e9;
  --zk-blue-2: #0b6ff0;
  --zk-blue-3: #0a53c9;
  --zk-ink: #0f1b2d;
  --zk-mut: #7b8aa3;
  --zk-line: rgba(15, 27, 45, .08);
  --zk-red: #e11d48;
  --zk-shadow-1: 0 4px 14px rgba(11, 111, 240, .10);
  --zk-shadow-2: 0 6px 20px rgba(11, 111, 240, .16);
}

/* ==================== 一、彩票房间页 ==================== */

.game28RoomPage {
  background: linear-gradient(180deg, #eef4fd 0%, #e8eef9 100%) !important;
}

/* 顶部标题栏 */
.game28RoomHeader,
.game28RoomHeader.game28FullHeader {
  background: linear-gradient(135deg, var(--zk-blue-1) 0%, var(--zk-blue-2) 58%, var(--zk-blue-3) 100%) !important;
  box-shadow: 0 3px 16px rgba(11, 111, 240, .28) !important;
}
.game28TitleToggle {
  font-weight: 800 !important;
  letter-spacing: .3px !important;
}

/* 期号 / 余额信息条 */
.game28FullInfo,
.game28LotteryStatus {
  background: #fff !important;
}
.game28IssueBlock span,
.game28BalanceLabel {
  color: var(--zk-mut) !important;
}
.game28IssueBlock b {
  color: var(--zk-blue-2) !important;
  font-weight: 800 !important;
}
.game28IssueBlock strong {
  color: var(--zk-red) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.game28BalanceBlock strong {
  color: var(--zk-ink) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.game28FullDivider {
  background: #fff !important;
  border-top: 1px solid var(--zk-line) !important;
}

/* 开奖号码条 + 号码球 */
.game28OpenNumberBar {
  background: #fff !important;
  border-bottom: 1px solid var(--zk-line) !important;
  box-shadow: 0 2px 8px rgba(15, 27, 45, .04) !important;
}
.game28OpenNumberBar > span {
  color: var(--zk-mut) !important;
}
.game28OpenNumberBar > span b {
  color: var(--zk-blue-2) !important;
  font-weight: 800 !important;
}
.game28OpenBalls em {
  background: linear-gradient(135deg, #ffffff, #eaf3ff) !important;
  border: 1px solid rgba(11, 111, 240, .20) !important;
  border-radius: 9px !important;
  color: var(--zk-blue-2) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(11, 111, 240, .14) !important;
}
.game28OpenBalls i {
  color: var(--zk-mut) !important;
}
.game28OpenBalls b {
  color: var(--zk-red) !important;
  font-weight: 800 !important;
}
.game28OpenNumberBar > strong {
  font-weight: 800 !important;
}

/* 聊天区 */
.game28FullBody {
  background: transparent !important;
}
.wendingChatFeed {
  background: transparent !important;
}
/* 行容器不再画整块白卡片:白框只留给气泡本身,消息行透明 */
.wendingChatMsg {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.wendingChatMsg.self {
  background: transparent !important;
  box-shadow: none !important;
}
.wendingChatMsg.system {
  background: transparent !important;
  box-shadow: none !important;
}
/* 系统/机器人播报:靠气泡自身淡蓝底区分,不再拉整行 */
.wendingChatMsg.system .wendingChatBubble {
  background: rgba(11, 111, 240, .10) !important;
  color: #0b6ff0 !important;
  box-shadow: none !important;
}
.wendingChatBubble {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--zk-shadow-1) !important;
}
.wendingChatImage,
.wendingChatBubble img {
  border-radius: 12px !important;
}

/* 输入栏 + 发送按钮 */
.game28ChatCommandBox {
  background: #fff !important;
  border: 1.5px solid rgba(11, 111, 240, .14) !important;
  box-shadow: 0 3px 12px rgba(11, 111, 240, .10) !important;
}
.game28InputPill input::placeholder {
  color: #9aa9c0 !important;
}
.game28FullInput > button[aria-label="发送"] {
  background: linear-gradient(135deg, var(--zk-blue-1), var(--zk-blue-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 19px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(11, 111, 240, .30) !important;
}
.game28FullInput > button[aria-label="发送"]:disabled {
  background: linear-gradient(135deg, #bcd8ee, #a6bcd8) !important;
  box-shadow: none !important;
}

/* 底部模式导航 */
.game28FullModeNav,
.game28ModeNav {
  background: #fff !important;
  border-top: 1px solid var(--zk-line) !important;
  box-shadow: 0 -2px 10px rgba(15, 27, 45, .05) !important;
}

/* ==================== 二、客服聊天页 ==================== */

body.zk-page-chat .pc-bg-wallpaper {
  background: linear-gradient(180deg, #eef4ff 0%, #e9eefb 100%) !important;
}
body.zk-page-chat .pc-frame-float {
  background: transparent !important;
}

/* 客服中心卡片（由脚本打 class） */
.zk-kf-agent {
  background: linear-gradient(135deg, #ffffff, #f5f9ff) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(11, 111, 240, .10) !important;
  box-shadow: 0 6px 18px rgba(11, 111, 240, .10) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.zk-kf-agent:active {
  transform: scale(.985) !important;
  box-shadow: 0 3px 10px rgba(11, 111, 240, .16) !important;
}
.zk-kf-card {
  background: linear-gradient(135deg, #ffffff, #f7faff) !important;
  border: 1px solid rgba(11, 111, 240, .10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(11, 111, 240, .08) !important;
}

/* 聊天窗口 */
.zk-chat-shell {
  background: linear-gradient(180deg, #eff4fe 0%, #e9eef9 100%) !important;
}
body.zk-page-chat .zk-chat-shell > .zk-chat-head,
body .zk-chat-shell > .zk-chat-head {
  background: linear-gradient(135deg, #0ea5e9 0%, #0b6ff0 60%, #0a53c9 100%) !important;
  box-shadow: 0 3px 14px rgba(11, 111, 240, .28) !important;
}
body.zk-page-chat .zk-chat-head {
  background: linear-gradient(135deg, var(--zk-blue-1) 0%, var(--zk-blue-2) 60%, var(--zk-blue-3) 100%) !important;
  box-shadow: 0 3px 14px rgba(11, 111, 240, .28) !important;
}
.zk-chat-body {
  background: transparent !important;
}
body.zk-page-chat .zk-chat-foot > div:last-child {
  background: #fff !important;
  border-top: none !important;
  box-shadow: 0 -2px 12px rgba(11, 111, 240, .08) !important;
}
body.zk-page-chat .zk-chat-footrow {
  background: #fff !important;
  border-top: none !important;
  box-shadow: 0 -2px 12px rgba(11, 111, 240, .08) !important;
}

/* 消息气泡：按内联圆角特征精准命中（左侧客服 / 右侧用户） */
body.zk-page-chat [style*="border-radius: 4px 16px"] {
  background: #ffffff !important;
  border: 1px solid rgba(11, 111, 240, .10) !important;
  box-shadow: 0 2px 8px rgba(15, 27, 45, .07) !important;
  color: var(--zk-ink) !important;
}
body.zk-page-chat [style*="border-radius: 16px 4px"] {
  background: linear-gradient(135deg, #0ea5e9 0%, #0b6ff0 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 111, 240, .24) !important;
  border: none !important;
}
/* 兼容脚本打上的类 */
body.zk-page-chat .zk-bub-other {
  background: #ffffff !important;
  border: 1px solid rgba(11, 111, 240, .10) !important;
  box-shadow: 0 2px 8px rgba(15, 27, 45, .07) !important;
}
body.zk-page-chat .zk-bub-self {
  background: linear-gradient(135deg, #0ea5e9 0%, #0b6ff0 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 111, 240, .24) !important;
  border: none !important;
}
/* 头像统一品牌色描边 */
body.zk-page-chat [style*="width: 34px"][style*="border-radius: 50%"] {
  border-color: rgba(11, 111, 240, .22) !important;
  box-shadow: 0 2px 6px rgba(11, 111, 240, .14) !important;
}
body.zk-page-chat [style*="width: 42px"][style*="border-radius: 50%"] {
  border-color: rgba(11, 111, 240, .30) !important;
  box-shadow: 0 3px 8px rgba(11, 111, 240, .18) !important;
}

/* 聊天页头像微调 */
body.zk-page-chat img[alt="在线客服"] {
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(11, 111, 240, .18) !important;
}

/* ==================== 修复:自己发的消息「白字白底」看不见 ====================
   本皮肤把聊天气泡底色统一改成了白色
   (.wendingChatBubble { background: #fff !important }),
   但 App 原始规则给「自己发的消息」配的是白字:
   .wending-hall .wendingChatMsg.self .wendingChatBubble {
     background: linear-gradient(135deg, #8e30e8, #b15cf0); color: #fff; }
   底色被皮肤改成白色后 → 白字白底,自己发出去的消息看起来就是一个空泡。
   这里把自方气泡恢复成 App 原本的紫色渐变底 + 白字,保证文字永远可见。
   ============================================================================ */
.wending-hall .wendingChatMsg.self .wendingChatBubble,
.wending-hall .wendingChatMsg.self .wendingChatPlainBetCheckBubble,
.wendingChatMsg.self .wendingChatBubble,
.wendingChatMsg.self .wendingChatPlainBetCheckBubble {
  background: linear-gradient(135deg, #8e30e8 0%, #b15cf0 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(142, 48, 232, .22) !important;
}