/* ============================================================
 * AI协会 · 新增模块统一配色与组件
 * 依赖顺序：main.css → theme-light.css → float-service.css → city-switch.css → modules.css
 * 本文件同时负责隔离技能模块与主站的 .msg 类名冲突。
 * ============================================================ */

/* ---------- 顶栏：城市切换 + 明暗切换 ---------- */
#cityTrigger{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--line);background:rgba(126,166,255,.06);color:var(--muted);
  font-size:13px;white-space:nowrap;cursor:pointer;transition:.2s;flex-shrink:0;
}
#cityTrigger:hover{color:var(--text);border-color:var(--line2);background:rgba(59,130,246,.12)}
#cityTrigger b{font-weight:700;color:var(--text)}
#cityTrigger svg{color:var(--cyan);flex-shrink:0}
[data-theme="light"] #cityTrigger{background:#fff;border-color:var(--line);color:#587095}
[data-theme="light"] #cityTrigger:hover{border-color:rgba(22,103,255,.4);background:#F2F7FF}
[data-theme="light"] #cityTrigger b{color:#0E4FCC}
[data-theme="light"] #cityTrigger svg{color:#0E8F8C}
#themeToggle{flex-shrink:0}
#themeToggle svg{display:block}
[data-theme="light"] #themeToggle{color:#0E4FCC}
@media (max-width:900px){
  #cityTrigger{font-size:12px;padding:6px 8px;gap:4px}
  #cityTrigger svg{width:13px;height:13px}
  .header-actions{gap:6px}
  .header-actions .icon-btn{width:32px;height:32px}
}

/* ---------- 悬浮客服：与主站 .msg 类名隔离 ---------- */
.chat-box .msg{max-width:86%;padding:12px 15px;border-radius:14px;font-size:14px;white-space:pre-wrap;line-height:1.75;margin-bottom:0}
.chat-box .msg-bot{align-self:flex-start;background:rgba(24,42,80,.9);border:1px solid var(--line);border-top-left-radius:4px;color:var(--text)}
.chat-box .msg-user{align-self:flex-end;background:var(--grad2);color:#fff;border-top-right-radius:4px}
[data-theme="light"] .chat-box .msg-bot{background:#F0F5FF;border-color:var(--line);color:var(--text)}

.sf-chatbox .msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word;margin-bottom:10px}
.sf-chatbox .msg.bot{background:#fff;color:#1A2B44;border:1px solid #E9EDF5;border-bottom-left-radius:4px}
.sf-chatbox .msg.user{margin-left:auto;background:var(--xsd-brand);color:#fff;border-bottom-right-radius:4px}
.sf-wrap .chip-q{font-size:12px;padding:5px 10px;border-radius:20px;cursor:pointer;
  background:#fff;color:var(--xsd-brand);border:1px solid var(--xsd-brand-border)}
.sf-wrap .chip-q:hover{background:var(--xsd-brand);color:#fff}

/* 白天：模块主色对齐站点蓝白 */
[data-theme="light"] .sf-wrap{
  --xsd-brand:#1667FF;--xsd-brand-deep:#0E3E9E;--xsd-brand-soft:#F2F7FF;
  --xsd-brand-border:#D6E2FF;--xsd-accent:#FFB020;
}
[data-theme="light"] .sf-panel{background:#fff;border-color:#E2EAF7;box-shadow:0 14px 38px rgba(24,62,124,.16)}
[data-theme="light"] .sf-item{color:#42597B;border-bottom-color:#EFF3FA}
[data-theme="light"] .sf-chatbox{background:#fff;border-color:#E2EAF7;box-shadow:0 20px 50px rgba(24,62,124,.2)}
[data-theme="light"] .sf-chat-body{background:#F5F8FF}
[data-theme="light"] .sf-chat-foot{background:#fff;border-top-color:#E9EDF5}
[data-theme="light"] .sf-chat-foot input{background:#fff;color:#102A4C;border-color:#DCE5F3;font-size:16px}
/* 深色：模块跟随深空蓝 */
[data-theme="dark"] .sf-wrap{
  --xsd-brand:#3B82F6;--xsd-brand-deep:#122A5C;--xsd-brand-soft:#142A50;
  --xsd-brand-border:#2A4A80;--xsd-accent:#22D3C5;
}
[data-theme="dark"] .sf-panel{background:#101C38;border-color:rgba(126,166,255,.2);box-shadow:0 14px 38px rgba(0,0,0,.45)}
[data-theme="dark"] .sf-item{color:#B9CBE8;border-bottom-color:rgba(126,166,255,.1)}
[data-theme="dark"] .sf-item:hover{background:rgba(59,130,246,.14);color:#9EC3FF}
[data-theme="dark"] .sf-chatbox{background:#101C38;border-color:rgba(126,166,255,.22);box-shadow:0 20px 50px rgba(0,0,0,.5)}
[data-theme="dark"] .sf-chat-head{background:linear-gradient(135deg,#122A5C,#3B82F6)}
[data-theme="dark"] .sf-chat-body{background:#0B1630}
[data-theme="dark"] .sf-chatbox .msg.bot{background:#16264A;color:#EAF1FF;border-color:rgba(126,166,255,.16)}
[data-theme="dark"] .sf-wrap .chip-q{background:#16264A;color:#9EC3FF;border-color:#2A4A80}
[data-theme="dark"] .sf-chat-foot{background:#101C38;border-top-color:rgba(126,166,255,.14)}
[data-theme="dark"] .sf-chat-foot input{background:#0B1630;color:#EAF1FF;border-color:#2A4A80;font-size:16px}
[data-theme="dark"] .sf-chat-foot input::placeholder{color:#64789F}
/* 悬浮球避开移动端底部 tabbar 与页面原有回顶部。
   关键：技能默认把聊天窗/面板放在 flex 流里，即使隐藏也会把容器撑到接近
   一屏高，向上溢出并盖住顶栏按钮。这里改为绝对定位在悬浮球上方，
   容器只剩悬浮球本身的高度；同时容器不吃指针事件，避免任何遮挡。 */
.sf-wrap{bottom:24px;z-index:65;pointer-events:none}
.sf-wrap .sf-fab{pointer-events:auto}
.sf-wrap .sf-panel,.sf-wrap .sf-chatbox{
  position:absolute;right:0;bottom:calc(100% + 10px);
}
.sf-wrap .sf-panel{z-index:1}
.sf-wrap .sf-chatbox{z-index:2;max-height:calc(100vh - 140px)}
.sf-wrap .sf-chatbox .sf-chat-body{max-height:calc(100vh - 300px)}
.sf-wrap .sf-panel.open,.sf-wrap .sf-chatbox.open{pointer-events:auto}
@media (max-width:900px){
  .sf-wrap{bottom:74px;right:12px}
  .sf-wrap .sf-chatbox .sf-chat-body{max-height:calc(100vh - 360px)}
}

/* ---------- 城市切换弹窗：白天蓝白化 ---------- */
[data-theme="light"] .city-mask{background:rgba(14,34,68,.38)}
[data-theme="light"] .city-modal{
  --xsd-brand:#1667FF;--xsd-brand-deep:#0E3E9E;--xsd-accent:#0E4FCC;
  background:linear-gradient(160deg,#FFFFFF 0%,#F4F8FF 100%);
  color:#102A4C;border:1px solid rgba(22,103,255,.16);box-shadow:0 30px 70px rgba(14,34,68,.2);
}
[data-theme="light"] .cm-head{border-bottom-color:rgba(22,103,255,.12)}
[data-theme="light"] .cm-sub b,[data-theme="light"] .cm-foot b{color:#0E4FCC}
[data-theme="light"] .cm-close{background:rgba(22,103,255,.09);color:#0E4FCC}
[data-theme="light"] .cm-close:hover{background:rgba(22,103,255,.18)}
[data-theme="light"] .cm-search{background:#F2F7FF;border-color:rgba(22,103,255,.18)}
[data-theme="light"] .cm-search input{color:#102A4C}
[data-theme="light"] .cm-search input::placeholder{color:#8A9BB5}
[data-theme="light"] .cm-nores{color:#587095}
[data-theme="light"] .cm-pill{background:rgba(22,103,255,.06);border-color:rgba(22,103,255,.16);color:#35527E}
[data-theme="light"] .cm-pill:hover{background:rgba(22,103,255,.14)}
[data-theme="light"] .cm-pill.on{background:var(--xsd-brand);border-color:var(--xsd-brand);color:#fff}
[data-theme="light"] .cm-pill.q-green{border-color:rgba(14,159,155,.35);color:#0A807C}
[data-theme="light"] .cm-pill.q-blue{border-color:rgba(22,103,255,.35);color:#0E4FCC}
[data-theme="light"] .cm-prov-cities{background:rgba(22,103,255,.05)}
[data-theme="light"] .cm-prov-name,[data-theme="light"] .cm-foot{color:#587095}
[data-theme="light"] .cm-foot{background:rgba(22,103,255,.05)}
/* 深色沿用技能自带的深蓝渐变，仅对齐主色 */
[data-theme="dark"] .city-modal{--xsd-brand:#3B82F6;--xsd-brand-deep:#0E2350;--xsd-accent:#22D3C5}

/* ---------- 新页面组件 ---------- */
.filter-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filter-line:last-child{margin-bottom:0}
.filter-label{width:42px;flex-shrink:0;font-size:12px;color:var(--dim);font-weight:600}
.dir-card{cursor:pointer}
.dir-card h3{font-size:16px;line-height:1.5}
.sol-card{cursor:pointer}
.sol-card .tag{white-space:normal;text-align:left}
.faq-item{padding:12px 0;border-bottom:1px dashed var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-q{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.6}
.faq-a{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.85}
.form-msg{display:none;padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:8px;line-height:1.6}
.form-msg.ok{background:rgba(14,159,155,.1);color:#0A807C}
.form-msg.err{background:rgba(216,64,105,.1);color:#C02B55}
[data-theme="dark"] .form-msg.ok{background:rgba(34,211,197,.12);color:#7DE9DC}
[data-theme="dark"] .form-msg.err{background:rgba(255,107,139,.12);color:#FFA8BC}
.auth-disabled{opacity:.5;pointer-events:none;filter:grayscale(.4)}
#solRoad .timeline{padding-left:26px}
@media (max-width:640px){
  .filter-label{width:100%}
  .dir-card .card-foot{flex-direction:column;align-items:flex-start;gap:6px}
}
/* 部分页面用内联 style 写死了两列栅格，会盖掉响应式媒体查询，
   导致手机上文字被挤成竖排。这里统一强制单列。 */
@media (max-width:900px){
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:18px!important}
}