/*
 * 手机 H5 交互（对照 Telegram Web K / WhatsApp Web / 微信 H5）：
 *  - 外壳高度跟随可见区域（viewport.js 写 --app-h / --app-top），键盘弹出时顶栏不动、只有消息区变矮；
 *  - 键盘打开时去掉底部安全区留白；表情 / 附件面板高度 = 上次键盘高度（--kb-h），切换不跳；
 *  - 整页不橡皮筋，只让内部列表滚动；去掉点击延迟和高亮；按下反馈；长按不误选界面文字（消息正文仍可选择复制）；
 *  - 聊天页跟手滑动返回（back-navigation.js）：下面垫会话列表快照（pointer-events: none，不挡点击）。
 * 排在 play-chat.css 之后。手机相关的规则都在手机断点或「触摸屏」媒体查询里，电脑宽屏不受影响。
 */

html, body { overscroll-behavior: none; }
html { touch-action: manipulation; }
:where(button, a, label, summary, [role="button"], input, select, textarea) { touch-action: manipulation; }

/* ───────────── 外壳 = 可见区域（手机断点，和 site.css 的手机布局同一个条件） ───────────── */
@media (max-width: 600px), (max-width: 920px) and (max-height: 600px) and (orientation: landscape) {
  #chat-app.app-shell { top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100dvh); }
  .modal-layer, .confirm-layer { top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100dvh); }
  .modal-card { max-height: calc(var(--app-h, 100dvh) * .91); }
  .modal-card.media-preview-modal { max-height: calc(var(--app-h, 100dvh) * .94); }
  .modal-card.details-modal { height: var(--app-h, 100dvh); max-height: var(--app-h, 100dvh); }

  /* 键盘打开：输入栏贴着键盘，不再留 iPhone 底部横条的安全区；列表页的悬浮底栏先藏起来（照 TG / 微信）。 */
  html.is-keyboard-open #chat-app .chat-screen .chat-compose { padding-block-end: 8px; }
  html.is-keyboard-open #chat-app .chat-screen .chat-compose:not(.is-editing) > .send-button { inset-block-end: 8px; }
  html.is-keyboard-open #chat-app .chat-screen .message-selection-toolbar { inset-block-end: 8px; }
  html.is-keyboard-open #chat-app .chat-screen .bot-reply-keyboard { margin-block-end: 8px; }
  html.is-keyboard-open[data-theme] #chat-app .main-view:not(.is-chat):not(.is-subpage) .bottom-nav { display: none; }
  html.is-keyboard-open .add-friend-results { padding-block-end: 16px; }
}

/* ───────────── 输入框：最多约 6 行，再多在框里滚动 ───────────── */
#chat-app .chat-screen .message-input,
#chat-app .chat-screen .chat-compose .message-input { max-height: 146px; overscroll-behavior: contain; }

/* ───────────── 消息区：只让列表滚动；水平手势留给滑动返回 ───────────── */
#chat-app .main-view.is-chat,
#chat-app .main-view.is-chat .messages-stream { touch-action: pan-y pinch-zoom; }
#chat-app .chat-screen .messages-stream { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ───────────── 触摸屏：面板高度 = 键盘高度、按下反馈、长按不误选 ───────────── */
@media (pointer: coarse) {
  html.has-kb-height #chat-app .chat-screen .composer-panel {
    height: max(220px, calc(var(--kb-h) - max(12px, env(safe-area-inset-bottom))));
    max-height: max(220px, calc(var(--kb-h) - max(12px, env(safe-area-inset-bottom))));
  }

  #chat-app :is(button, [role="button"], .app-header, .bottom-nav, .chat-folder-bar, .contact-letter-index, .message-line, .composer-pill, .settings-tile, .chat-top-stack) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  #chat-app :is(.message-selectable-text, .message-selectable-text *, input, textarea, [contenteditable="true"]) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

@media (hover: none) {
  html[data-theme] #chat-app :is(.conversation-row:not(.is-pin-card), .contact-row, .group-row, .chat-archive-row, .menu-item, .group-info-member-row, button.detail-row, .add-friend-result, .mention-picker-item):active {
    background-color: color-mix(in srgb, var(--pf-fg, #1b1f2e) 8%, transparent);
  }
  html[data-theme] #chat-app :is(.chat-pin-card .conversation-row, .settings-tile, .contact-tile, .profile-stat, .contact-online-item, .contact-search-pill, .chat-folder-tab, .nav-item, .attachment-grid button, .emoji-grid button, .sticker-grid > button):active {
    transform: scale(.96);
    transition: transform .08s ease;
  }
  html[data-theme] :is(#modal, #confirm-dialog) :is(.language-option, .forward-target, .member-option, button.detail-row, .menu-item):active {
    background-color: color-mix(in srgb, var(--pf-fg, #1b1f2e) 8%, transparent);
  }
}

/* ───────────── 跟手滑动返回 ───────────── */
/* 拖动时不选中文字由 back-navigation.js 拦 selectstart（不再给整页所有元素改 user-select：那会让整页重算样式，起手卡一下）。 */
html.is-swiping-back #chat-app > #main-view {
  z-index: 2;
  will-change: transform;
  box-shadow: -10px 0 28px rgba(10, 16, 40, .16);
}
#chat-app > .swipe-back-underlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--pf-bg, var(--canvas, #f3f5fa));
  pointer-events: none;
}
#chat-app > .swipe-back-underlay > .swipe-back-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translate3d(-28%, 0, 0);
}
#chat-app > .swipe-back-underlay > .swipe-back-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .18;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] #chat-app :is(.chat-pin-card .conversation-row, .settings-tile, .contact-tile, .profile-stat, .contact-online-item, .contact-search-pill, .chat-folder-tab, .nav-item):active { transform: none; }
}

/* ───────────── 运行性能 ───────────── */
/* 长列表：屏幕外的行跳过样式 / 排版 / 绘制（content-visibility），滚动和重画只算看得见的那几行。
   会话行高度固定（auto 记住真实高度）；置顶玻璃卡（可拖动排序）不加。 */
#chat-app .chat-list-card > .conversation-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}
/* 消息行：只在支持滚动锚定（overflow-anchor）的浏览器开（Chrome / 安卓 / Firefox）。没有滚动锚定的 Safari 往上翻时
   估算高度换成真实高度会跳，不开。气泡的投影 / 回应胶囊画出行外的部分用 overflow-clip-margin 留出来，不被裁掉。 */
@supports (overflow-anchor: auto) and (content-visibility: auto) {
  #chat-app .chat-screen .messages-stream > .message-line {
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
    overflow-clip-margin: 24px;
  }
}

/* 实时模糊（backdrop-filter）：系统「降低透明度」或低端设备（locale-bootstrap.js 判断，给 html 加 pf-lite）
   一律关掉，玻璃改成接近实色的静态半透明。 */
html.pf-lite:root { --pf-glass: rgba(255,255,255,.94); --pf-glass2: rgba(255,255,255,.97); }
html.pf-lite[data-theme="dark"] { --pf-glass: rgba(34,36,48,.95); --pf-glass2: rgba(44,46,60,.97); }
html.pf-lite *, html.pf-lite *::before, html.pf-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  html *, html *::before, html *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}