/**
 * 私信长文本编辑器（主站 + 桌台共用）
 * 目标：
 * - 视觉更现代（bottom-sheet）
 * - 微信/iOS 安全区友好（safe-area）
 * - 主题色跟随后台（--ib-primary / --theme-primary）
 */

:root {
  --pm-lt-surface: rgba(18, 18, 18, 0.98);
  --pm-lt-border: rgba(255, 255, 255, 0.16);
  --pm-lt-mask: rgba(0, 0, 0, 0.55);
  --pm-lt-radius: 16px;
}

/* 遮罩层：bottom-sheet */
.pm-longtext-dialog {
  position: fixed;
  /* 优先使用 wechat-compat.js 同步的 visualViewport 变量（更贴键盘、更稳） */
  left: var(--vv-offset-left, 0px);
  top: var(--vv-offset-top, 0px);
  /* 避免 100vw 在 iOS/微信里引入横向溢出 */
  width: var(--vv-width, 100%);
  height: var(--vv-height, 100dvh);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: var(--pm-lt-mask);
  z-index: 10002;
  overflow-x: hidden;
}

.pm-longtext-dialog.show {
  display: flex;
}

.pm-longtext-form {
  width: min(720px, 100%);
  /* 不要直接满屏：保留顶部遮罩空间，视觉更像 bottom-sheet；同时仍受 vv-height 约束 */
  max-height: min(680px, calc(var(--vv-height, 100dvh) - 20px));
  background: var(--pm-lt-surface);
  border: 1px solid var(--pm-lt-border);
  border-radius: var(--pm-lt-radius) var(--pm-lt-radius) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-longtext-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pm-longtext-header h3 {
  margin: 0;
  font-size: var(--ui-fs-16, 16px);
  color: var(--ui-text, #e0e0e0);
  font-weight: 700;
}

.pm-longtext-close {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ui-text, #e0e0e0);
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pm-longtext-body {
  padding: 12px 14px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 让 banword-common.js 注入的 .banword-warning-pop 能相对该容器定位 */
  position: relative;
}

.pm-longtext-input {
  width: 100%;
  flex: 1;
  min-height: 160px;
  /* 键盘弹起时不要用 vh 限高（vh 在部分移动端不等于可视区），交给 flex 自动收缩 */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ui-text, #e0e0e0);
  padding: 12px 12px;
  font-size: 16px !important; /* iOS/微信：防自动放大 */
  line-height: 1.55;
  resize: none;
  outline: none;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-longtext-input:focus {
  border-color: var(--ib-primary, var(--theme-primary, #ff6699));
  box-shadow: 0 0 0 2px rgba(255, 102, 153, 0.18);
}

.pm-longtext-footer {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 复用现有 .btn/.btn-primary（有些页面内联定义），这里做主题化兜底 */
.pm-longtext-dialog .btn {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: var(--ui-fs-14, 14px);
  font-weight: 700;
  cursor: pointer;
}

.pm-longtext-dialog .btn-primary {
  background: var(--ib-primary, var(--theme-primary, #ff6699));
  color: var(--ib-text, #fff);
}

.pm-longtext-dialog .btn-primary:active {
  transform: scale(0.98);
}

/* 仅移动端：发送按钮上下居中 + 缩小上下留白（不改桌面端） */
@media (max-width: 768px) {
  .pm-longtext-footer {
    padding: 6px 16px calc(1px + env(safe-area-inset-bottom));
    align-items: center;
  }

  .pm-longtext-dialog .btn-primary {
    padding: 8px 16px;
    min-height: 10px;
  }
}