/* MMxBB AI 访客助手样式 */
/* 关键：组件内 .mmxbb-panel 设了 display:flex，会盖过浏览器默认的
   [hidden]{display:none}，导致弹窗一直显示且关闭按钮无效。
   这里强制恢复 hidden 语义，保证默认收起、可正常关闭。 */
[hidden] { display: none !important; }
#mmxbb-chat { position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
#mmxbb-chat[dir="rtl"] { right: auto; left: 22px; }

.mmxbb-fab {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2f9e8f, #16a085); color: #fff; font-size: 26px;
  box-shadow: 0 10px 28px rgba(22,160,133,.42); position: relative; transition: transform .15s;
}
.mmxbb-fab:hover { transform: scale(1.06); }
.mmxbb-fab-dot { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: #ff5a7a; border: 2px solid #fff; }

.mmxbb-panel {
  position: absolute; right: 0; bottom: 76px; width: 360px; max-width: calc(100vw - 28px);
  height: 540px; max-height: calc(100vh - 110px); background: #fff; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20,30,45,.22); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #eef1f4;
}
#mmxbb-chat[dir="rtl"] .mmxbb-panel { right: auto; left: 0; }

.mmxbb-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; background: linear-gradient(135deg, #2f9e8f, #16a085); color: #fff; }
.mmxbb-ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 800; }
.mmxbb-htxt { flex: 1; line-height: 1.25; }
.mmxbb-htxt b { font-size: 15px; display: block; }
.mmxbb-htxt small { font-size: 11.5px; opacity: .85; }
.mmxbb-x { background: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }

.mmxbb-log { flex: 1; overflow-y: auto; padding: 14px; background: #f6f8f9; display: flex; flex-direction: column; gap: 10px; }
.mmxbb-msg { display: flex; }
.mmxbb-bot { justify-content: flex-start; }
.mmxbb-user { justify-content: flex-end; }
.mmxbb-bubble { max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mmxbb-bot .mmxbb-bubble { background: #fff; color: #1f2430; border: 1px solid #e7eaee; border-bottom-left-radius: 4px; }
.mmxbb-user .mmxbb-bubble { background: linear-gradient(135deg, #2f9e8f, #16a085); color: #fff; border-bottom-right-radius: 4px; }
.mmxbb-typing::after { content: ''; }
.mmxbb-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mmxbb-chip { border: 1px solid #16a085; background: #fff; color: #128a73; padding: 8px 12px; border-radius: 12px; font-size: 13px; cursor: pointer; transition: .12s; }
.mmxbb-chip:hover { background: #16a085; color: #fff; }

.mmxbb-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef1f4; background: #fff; }
.mmxbb-input input { flex: 1; border: 1px solid #dde2e7; border-radius: 12px; padding: 10px 12px; font-size: 14px; outline: none; }
.mmxbb-input input:focus { border-color: #16a085; }
.mmxbb-input button { width: 42px; border: none; border-radius: 12px; background: #16a085; color: #fff; cursor: pointer; font-size: 16px; }
.mmxbb-input button:hover { background: #128a73; }

#mmxbb-chat[dir="rtl"] .mmxbb-bot { justify-content: flex-end; }
#mmxbb-chat[dir="rtl"] .mmxbb-user { justify-content: flex-start; }
#mmxbb-chat[dir="rtl"] .mmxbb-bot .mmxbb-bubble { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
#mmxbb-chat[dir="rtl"] .mmxbb-user .mmxbb-bubble { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }

@media (max-width: 480px) {
  #mmxbb-chat { right: 12px; bottom: 12px; }
  #mmxbb-chat[dir="rtl"] { right: auto; left: 12px; }
  .mmxbb-panel { right: -6px; left: -6px; bottom: 70px; width: auto; max-width: none; height: 78vh; border-radius: 16px 16px 0 0; }
  #mmxbb-chat[dir="rtl"] .mmxbb-panel { right: -6px; left: -6px; }
}