/* ================= 聊天区样式 + 表单输入胶囊 + 左侧选择按钮 + Typing 动画 ================= */
:root{ scrollbar-gutter: stable both-edges; }
html,body{ height:100%; }
body{ overflow-y: scroll; }

#chatBox{ padding: 8px 10px 12px !important; }
/* 固定高度与滚动条，确保 stickBottom 有效 */
#chatBox{ height:30rem !important; min-height:18rem !important; max-height:32rem !important; overflow-y:auto !important; }
#chatBox .msg{ width:100%; margin:10px 0 !important; }

#chatBox .bubble{
  white-space: normal !important;
  line-height: 1.6 !important;
  font-size: 1.02rem !important;
  padding: 12px 14px !important;
  max-width: 96vw !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
}
@media (min-width:768px){
  #chatBox .bubble{ max-width: min(95ch, 95vw) !important; }
}
@media (min-width:1100px){
  #chatBox .bubble{ max-width: min(100ch, 90vw) !important; }
}

.role-tag{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.88rem; font-weight:600; letter-spacing:.02em;
  padding:.18rem .55rem; border-radius:999px; margin-bottom:6px;
}
.role-user{
  background:#e9f3ff; color:#0b5cab; border:1px solid #cfe3ff;
  box-shadow: 0 0 0 2px #ffffff inset, 0 1px 4px rgba(91,141,233,.12);
}
.role-assistant{
  background:#fff1cf; color:#745012; border:1px solid #efdba7;
  box-shadow: 0 0 0 2px #fffdf6 inset, 0 1px 4px rgba(232,201,126,.12);
}

.bubble-user{
  color:#ffffff !important;
  font-weight: 520;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  background: linear-gradient(135deg, #69a7f2, #4b86e8) !important;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px rgba(77,132,232,.16), 0 2px 8px rgba(0,0,0,.04), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
.bubble-assistant{
  background: #fff8e8 !important;
  color: #704a12 !important;
  border: 1.5px solid #eadfb1 !important;
  box-shadow: 0 10px 24px rgba(232,201,126,.18), 0 2px 8px rgba(0,0,0,.03) !important;
}
.avatar{ width: 40px; height: 40px; border-radius: 14px; box-shadow: 0 0 8px #e8c97e77; border: 1px solid #e5b857; }

/* ====== 输入框为右侧胶囊预留空间 ====== */
#birthDate, input[type="date"],
#birthTime, input[type="time"]{
  height: 48px;
  line-height: 48px;
  padding-right: 9.5em !important;
}
@media (max-width: 420px){
  #birthDate, input[type="date"],
  #birthTime, input[type="time"]{
    padding-right: 8.2em !important;
    height: 46px; line-height: 46px;
  }
}

/* ——包裹容器（定位上下文）—— */
.nm-input-wrap{ position: relative; display: block; width: 100%; }
.nm-inline-hint{ z-index: 2; pointer-events:none; }
.nm-input-wrap > input{ position: relative; z-index: 1; }

/* ——被包裹后的 input 也预留右侧空间—— */
.nm-input-wrap > input[type="date"],
.nm-input-wrap > input[type="time"]{
  padding-right: 9.5em !important;
  height: 48px; line-height: 48px;
}
@media (max-width:420px){
  .nm-input-wrap > input[type="date"],
  .nm-input-wrap > input[type="time"]{
    padding-right: 8.2em !important;
    height: 46px; line-height: 46px;
  }
}

/* ——输入框内提示胶囊（米黄色）—— */
.nm-inline-hint{
  position:absolute; top:50%; transform:translateY(-50%);
  max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.9rem; line-height:1; color:#8f7a3b; opacity:.95;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,248,224,.92);
  box-shadow: inset 0 0 0 1px rgba(232,201,126,.22);
}

/* ——隐藏原生右侧日历/时钟图标，让出空间给胶囊—— */
.nm-input-wrap > input[type="date"]::-webkit-calendar-picker-indicator,
.nm-input-wrap > input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:0; pointer-events:none;
}

/* ——在输入框内"靠左"的自定义选择按钮—— */
.nm-picker-btn{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff7e2; color:#9a7b2a; font-size:14px; line-height:1;
  box-shadow: inset 0 0 0 1px rgba(232,201,126,.45);
  z-index:3; cursor:pointer; user-select:none;
}
.nm-picker-btn:active{ transform: translateY(-50%) scale(.96); }

/* ——聊天"正在思考"动画—— */
.typing-bubble{ position:relative; }
.typing-dots{
  display:inline-block; margin-left:.35em; vertical-align:baseline;
}
.typing-dots > i{
  display:inline-block; width:.38em; height:.38em; border-radius:50%;
  background:#caa64b; opacity:.6; margin:0 .18em;
  animation: nm-bounce 1.2s infinite ease-in-out;
}
.typing-dots > i:nth-child(2){ animation-delay:.15s; }
.typing-dots > i:nth-child(3){ animation-delay:.3s; }
@keyframes nm-bounce{
  0%, 80%, 100%{ transform:translateY(0); opacity:.55; }
  40%{ transform:translateY(-4px); opacity:.95; }
}

/* 分享卡片固定到屏幕外，避免遮挡布局 */
#shareCardBox{ position:fixed; left:-9999px; top:-9999px; z-index:-1; }

/* ——按钮配色差异化—— */
#followupSendBtn{
  background: linear-gradient(135deg,#4bc0f8,#34e4ae) !important;
  color:#0b3a40 !important; font-weight:700;
  box-shadow: 0 8px 20px rgba(52,228,174,.22);
  border:none;
}
#drawFortuneBtn{
  background: linear-gradient(135deg,#f6d365,#fda085) !important; /* 金橙系 */
  color:#7a3e00 !important; font-weight:800;
  box-shadow: 0 10px 24px rgba(253,160,133,.25);
  border:none;
}
#drawFortuneBtn .icon, #drawFortuneBtn svg{ filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }

#smartHint{
  display:block;
  margin: 8px 0 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 30%, #fdba74 100%);
  border: 3px solid #dc2626;
  border-radius: 14px;
  color: #dc2626;
  font-weight: 900;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3), 
              0 2px 8px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  position: relative;
  letter-spacing: 0.5px;
}

/* === ① 操作步骤提示条高亮（#smartHint） === */
#smartHint{
  display:block !important;
  margin:8px 0 14px !important;
  padding:12px 16px !important;
  background:linear-gradient(135deg,#fef3c7 0%, #fde68a 50%, #f59e0b 100%) !important;
  border:2px solid #d97706 !important;
  border-radius:12px !important;
  color:#92400e !important;
  font-weight:800 !important;
  font-size:1.05rem !important;
  box-shadow:0 4px 12px rgba(217,119,6,.25), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* === ② 只移除聊天区里的"玄知相术"图片 logo === */
/* 该图片通常位于消息内容内部，用 .chat-logo 或 img[alt*="玄知相术"] 之类标识。
   若你的 DOM 使用了明确类名，请改成更精确的选择器；这里只保守隐藏带有该 alt 的图片。 */
#chatBox img[alt*="玄知相术"] { display:none !important; }

/* 同时放宽助手回复气泡宽度（不改变其它视觉） */
#chatBox .bubble { max-width: 96vw !important; }
@media (min-width:768px){
  #chatBox .bubble { max-width: min(95ch, 94vw) !important; }
}
@media (min-width:1100px){
  #chatBox .bubble { max-width: min(100ch, 88vw) !important; }
}
/* 明确保证助手气泡不会被其它规则收窄 */
#chatBox .bubble-assistant { max-width: inherit !important; }

/* === ③ 仅移除"出生时间/出生地点"标题前的小图标（不影响其它图标） === */
/* 如果这两个小图标是单独标签（如 <span class="emoji"> 或 <img>）且套在 label/标题里： */
.form-label time > .emoji,
.form-label time > img.emoji,
.form-label[data-field="birth-time"] .emoji,
.form-label[data-field="birth-time"] img.emoji,
.form-label[data-field="birth-place"] .emoji,
.form-label[data-field="birth-place"] img.emoji { display:none !important; }

/* 兜底：若两个标题附近的图标带有明确 data-attrs，可复用如下（如无可忽略）： */
/* [data-role="birth-time-icon"], [data-role="birth-place-icon"] { display:none !important; } */

/* 已删除：原本隐藏出生时间图标的规则，现在时间也要保留图标 */

/* 如有浏览器原生图标残留，继续隐藏 time/date 的原生指示器（不影响其它字段） */
.nm-input-wrap > input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:0 !important; pointer-events:none !important;
}

/* 聊天气泡更宽（含用户与助手） */
#chatBox .bubble{
  max-width:96vw !important;
}
@media (min-width:768px){
  #chatBox .bubble{ max-width:min(100ch, 94vw) !important; }
}
@media (min-width:1100px){
  #chatBox .bubble{ max-width:min(105ch, 90vw) !important; }
}

/* 发送（青绿 → 不变，字色更深一点可读性更好） */
#followupSendBtn{
  background: linear-gradient(135deg,#3ac0ff 0%, #12c2a3 100%) !important;
  color:#003a3f !important; font-weight:800 !important; border:none !important;
  box-shadow:0 6px 20px rgba(18,194,163,.25);
}

/* 每日运势（改成暖橙 → 橙到红，明显区别） */
#drawFortuneBtn{
  background: linear-gradient(135deg,#ff9a3d 0%, #ff4d4d 100%) !important;
  color:#5f2200 !important; font-weight:900 !important; border:none !important;
  box-shadow:0 10px 26px rgba(255,77,77,.28), 0 1px 0 rgba(255,255,255,.45);
}
#drawFortuneBtn:hover{ transform:scale(1.035); }

/* 分享卡正文容器更大的底部留白（避免压到底栏） */
.poster-content,
#shareCardText{
  padding-bottom: 112px !important; /* 原来 ~96px，稍微再加一点 */
}

/* 提升底栏位置，避免贴着卡片圆角 */
#shareCardBox .bottom-bar-up { bottom: 14px !important; }

/* 展示自定义左侧按钮（日期+时间都保留） */
.nm-input-wrap .nm-picker-btn{
  display:inline-flex !important; align-items:center; justify-content:center;
}

/* 仍隐藏原生右侧指示器，为左侧自定义按钮让位（保持你原有的视觉） */
.nm-input-wrap > input[type="date"]::-webkit-calendar-picker-indicator,
.nm-input-wrap > input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:0 !important; pointer-events:none !important;
}

/* === 输入框：左右同时预留 === */
.nm-input-wrap > input[type="date"],
.nm-input-wrap > input[type="time"]{
  padding-left: 42px !important;   /* 左侧为 📅/🕰️ 按钮让出空间 */
  padding-right: 9.5em !important; /* 右侧为胶囊 */
  height: 48px; line-height: 48px;
}
@media (max-width:420px){
  .nm-input-wrap > input[type="date"],
  .nm-input-wrap > input[type="time"]{
    padding-left: 40px !important;
    padding-right: 8.2em !important;
    height: 46px; line-height: 46px;
  }
}

/* 左侧小图标按钮的基准定位（已存在时可保持，确保和上面的左 padding 配合） */
.nm-picker-btn{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
}

/* 兼容旧样式，确保头像移除后不留空位 */
#chatBox .avatar{ display:none !important; }

/* ——安全网：若之前误操作导致"气泡背景不见了"，用下面两段确保样式存在 —— */
#chatBox .bubble {
  white-space: normal !important;
  line-height: 1.6 !important;
  font-size: 1.02rem !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
}
#chatBox .bubble-assistant {
  background:#fff8e8 !important;
  color:#704a12 !important;
  border:1.5px solid #eadfb1 !important;
  box-shadow:0 10px 24px rgba(232,201,126,.18), 0 2px 8px rgba(0,0,0,.03) !important;
}

/* 发送按钮：蓝绿渐变 */
#followupSendBtn {
  background: linear-gradient(90deg, #3ac0ff, #12c2a3) !important;
  color:#0b2b33 !important;
  font-weight:800;
}

/* 每日运势按钮：橙红渐变 */
#drawFortuneBtn {
  background: linear-gradient(90deg, #ff9a3d, #ff4d4d) !important;
  color:#411900 !important;
  font-weight:900;
  letter-spacing: .5px;
}

/* 让底栏整体再上移一些 */
#shareCardBox .bottom-bar-up { bottom: 14px !important; }

/* 海报正文强制加大底部内边距，保证二维码+"扫码体验测算"不压到正文 */
#shareCardText { padding-bottom: 88px !important; }

/* NEW: 防被外部样式覆盖 */
#followupSendBtn, #drawFortuneBtn{ background-clip: padding-box !important; }

/* ===== 分享海报美化 ===== */
#shareCardBox{
  position:fixed; left:-9999px; top:-9999px; z-index:-1;
  width: 680px; max-width: 92vw;
  padding: 22px 24px 28px;
  background:#ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.06);
  font-family: "Noto Serif SC", "PingFang SC", serif;
}
#shareCardBox .title{ font-weight:800; font-size:22px; color:#1b2942; margin-bottom:6px; }
#shareCardBox .subtitle{ font-weight:600; font-size:14px; color:#5b6b80; margin-bottom:14px; }
#shareCardText{
  white-space:pre-wrap;
  line-height:1.9; font-size:16px; color:#2b2b2b;
  letter-spacing:.2px;
}
#shareCardFooter{ margin-top:14px; color:#8a8a8a; font-size:13px; }
#shareCardDate{ color:#7a7a7a; font-size:12px; }

/* 左上角 logo 强制隐藏（只保留下角二维码/小 logo） */
#shareCardBox .top-logo, 
#shareCardBox img[alt*="logo i"], 
#shareCardBox img[alt*="Logo"]{
  display:none !important;
}

/* === 每日运势：签位红色大标题（恢复首版视觉） === */
.fortune-title { margin: 6px 0 10px; }
.fortune-badge{
  display:inline-block;
  font-size: 1.35rem;
  line-height: 1.35rem;
  color: #b91c1c;           /* 深红 */
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffe4e4,#ffd2d2);
  border: 1px solid #f2b3b3;
  box-shadow: 0 2px 6px rgba(185,28,28,.12), inset 0 0 0 1px #fff6;
}

/* （可选）不同签位微调色调，如需保留一套也可不分级 */
.fortune-badge.level-ss { color:#b91c1c; } /* 上上签 */
.fortune-badge.level-s  { color:#b45309; } /* 上签 */
.fortune-badge.level-m  { color:#92400e; } /* 中签 */
.fortune-badge.level-l  { color:#6b7280; } /* 下签 */

/* === 海报：正文底部留白更大，底栏整体上移，防遮挡 === */
#shareCardText, .poster-content { padding-bottom: 120px !important; }
.bottom-bar-up { bottom: 14px !important; }  /* 底栏上移，避免贴圆角 */