/* =========================================================
   modal.css —— 客服 / 公告 / 用户协议 / 隐私政策 弹窗
   风格沿用登录面板：蓝色描边 + 浅蓝白渐变底 + 金色按钮
   协议类长文本需要可读，字号设置下限（手机横屏不小于 13px）
   ========================================================= */

.modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}

.modal[hidden] { display: none; }

.modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(6, 26, 64, 0.55);
  opacity: 0;
  transition: opacity .2s ease;
}

.modal__dialog {
  --m-fs: max(13px, calc(20 * var(--u)));
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(calc(var(--app-w) * 0.92), max(560px, calc(980 * var(--u))));
  /* 高度按视口计算（不能用 %：网格行高会被内容撑开） */
  height: min(calc(var(--app-h) * 0.9), max(330px, calc(800 * var(--u))));
  border: max(3px, calc(5 * var(--u))) solid #1f7ae8;
  border-radius: max(14px, calc(28 * var(--u)));
  background: linear-gradient(180deg, #f4f8ff 0%, #dcebff 100%);
  box-shadow:
    inset 0 0 0 max(2px, calc(3 * var(--u))) rgba(255, 255, 255, 0.8),
    0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(5, 30, 80, 0.45);
  font-size: var(--m-fs);
  color: #24385c;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, 1.3, .4, 1);
}

.modal.is-open .modal__mask { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: scale(1); }

/* ---------- 标题栏 ---------- */
.modal__head {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.1em;
  border-radius: max(10px, calc(22 * var(--u))) max(10px, calc(22 * var(--u))) 0 0;
  background: linear-gradient(180deg, #45a2ff 0%, #1d6fe0 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 40, 120, 0.25);
}

.modal__title {
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 2px 0 #0b4fb0, 0 0 6px rgba(0, 40, 120, 0.5);
}

.modal__close {
  position: absolute;
  right: 0.7em;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(180deg, #ff8a6b, #e8452c);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform .15s;
}

.modal__close:hover { transform: scale(1.08); }
.modal__close:active { transform: scale(.9); }

/* ---------- 正文 ---------- */
.modal__body {
  flex: 1;
  min-height: 0;
  margin: 0.8em 0.8em 0;
  padding: 0.9em 1.3em 1.2em;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: max(8px, calc(16 * var(--u)));
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(40, 90, 170, 0.12);
  line-height: 1.75;
  user-select: text;
  -webkit-user-select: text;
}

.modal__body:focus { outline: none; }

.modal__body::-webkit-scrollbar { width: 8px; }
.modal__body::-webkit-scrollbar-thumb { border-radius: 4px; background: #9cc4f5; }

.modal__body h2.doc-title {
  margin-bottom: 0.2em;
  text-align: center;
  font-size: 1.25em;
  color: #134a9e;
}

.modal__body h3 {
  margin: 1.2em 0 0.4em;
  padding-left: 0.6em;
  border-left: 0.25em solid #ffae1a;
  font-size: 1.05em;
  line-height: 1.4;
  color: #134a9e;
}

.modal__body p { margin: 0.4em 0; }
.modal__body b { color: #0f2f63; }

.modal__body ol,
.modal__body ul { margin: 0.3em 0 0.3em 1.6em; }
.modal__body ol { list-style: decimal; }
.modal__body ul { list-style: disc; }
.modal__body li { margin: 0.25em 0; }

.modal__body a[data-doc] {
  color: #1f6fe0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.doc-meta {
  text-align: center;
  font-size: 0.85em;
  color: #6b7c99;
}

.doc-lead { text-indent: 2em; }

.doc-tip {
  padding: 0.6em 0.9em;
  border-radius: 0.6em;
  background: #fff6e0;
  font-size: 0.92em;
}

/* 未填写的公司信息：高亮提示 */
.doc-todo {
  padding: 0 0.2em;
  border-radius: 0.2em;
  background: #ffe36a;
  color: #8a4b00;
  font-weight: 600;
}

/* 客服：联系方式卡片 */
.modal__body ul.doc-cards {
  margin: 0.4em 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
  gap: 0.6em;
}

.doc-cards li {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 0.6em 0.9em;
  border: 2px solid #cfe0f7;
  border-radius: 0.8em;
  background: linear-gradient(180deg, #f7fbff, #ebf3ff);
}

.doc-cards__label { font-size: 0.85em; color: #6b7c99; }
.doc-cards__value { font-weight: 700; color: #134a9e; word-break: break-all; }

/* 客服：常见问题 */
.doc-faq dt {
  margin-top: 0.8em;
  font-weight: 700;
  color: #134a9e;
}

.doc-faq dt::before {
  content: "Q";
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: #ffae1a;
  color: #fff;
  font-size: 0.8em;
}

.doc-faq dd { margin: 0.2em 0 0 1.9em; color: #3d4f70; }

/* 联系我们 */
.modal__body ul.doc-contact {
  margin-left: 0;
  padding: 0.6em 1em;
  list-style: none;
  border-radius: 0.6em;
  background: #f1f6fe;
}

/* 公告 */
.doc-notice {
  padding: 0.2em 0 0.8em;
  border-bottom: 1px dashed #c5d6ee;
}

.doc-notice:last-child { border-bottom: 0; }
.doc-notice h3 { margin-top: 0.8em; }
.doc-sign { text-align: right; color: #6b7c99; }
.doc-notice--health p { text-align: center; font-weight: 600; color: #134a9e; }

/* ---------- 底部按钮 ---------- */
.modal__foot {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 0.7em 0 0.9em;
}

.modal__ok {
  min-width: 9em;
  padding: 0.45em 2em;
  border: 2px solid #fff3c4;
  border-radius: 2em;
  background: linear-gradient(180deg, #ffd54a 0%, #ffab12 100%);
  box-shadow: 0 0.2em 0 #d07a00, 0 0.3em 0.6em rgba(160, 90, 0, 0.35);
  color: #fff;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 #c46d00, 0 0 4px rgba(170, 80, 0, 0.6);
  transition: transform .15s, filter .15s;
}

.modal__ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
.modal__ok:active { transform: translateY(2px); box-shadow: 0 0.05em 0 #d07a00; }

/* 宽屏手机（2:1 及更宽，如 iPhone 19.5:9、安卓 20:9）：按设计稿比例算出的弹窗太窄、太矮（最小字号 13px 下内容会挤成竖排），
   按屏幕宽度放大一些、高度用足。竖持旋转横屏时视口是竖的，所以两种方向都要判断。
   普通 16:9 及更方的屏幕（含 iPad）不受影响。 */
@media (min-aspect-ratio: 2/1), (max-aspect-ratio: 1/2) {
  .modal__dialog {
    width: min(calc(var(--app-w) * 0.92), max(560px, calc(980 * var(--u)), calc(var(--app-w) * 0.66)));
    height: min(calc(var(--app-h) * 0.92), max(330px, calc(var(--app-h) * 0.88)));
  }
  /* .modal.modal：提高优先级，盖过后加载的 growth.css / achievements.css / profile.css 里的宽度 */
  .modal.modal[data-doc="board"] .modal__dialog,
  .modal.modal[data-doc="achieve"] .modal__dialog,
  .modal.modal[data-doc="profile"] .modal__dialog { width: min(calc(var(--app-w) * 0.94), max(640px, calc(var(--app-w) * 0.74))); }
  .modal.modal[data-doc="club"] .modal__dialog,
  .modal.modal[data-doc="chat"] .modal__dialog,
  .modal.modal[data-doc="codex"] .modal__dialog { width: min(calc(var(--app-w) * 0.96), max(680px, calc(var(--app-w) * 0.84))); }
}