/* ChatBabe Android / PWA 增量样式
* ------------------------------------------------------------------
* 用途：TWA / WebView / 移动浏览器下的安全区、触感、离线提示。
* 规则：**只做叠加覆盖**，绝不重写 style.css；必须挂在 /style.css 之后加载
* （apply-overlay.mjs 注入的 已在末尾）。
* 全部样式集中在 app-android.css，页面里没有任何内联 style（CSP style-src 'self'）。
* 所有 env(safe-area-inset-*) 用量都包在 @supports 里，老 WebView 直接跳过整块，
* 不会把原有 padding 覆盖成 0。
*/
/* ================================================================
* 1. 触感 / 滚动 —— 不依赖 env()，所有浏览器都生效
* ================================================================ */
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body,
#app,
#main,
#room,
#timeline,
#rooms,
#room-box {
overscroll-behavior: none;
}
/* 可滚动容器内部仍然允许滚动回弹，但不要把滚动链传到外层（防"整页跟着晃"/误触下拉刷新） */
#timeline,
#room-box,
#rooms,
#manage,
#member-list {
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
/* 消除双击缩放延迟，同时去掉安卓点击高亮 */
button,
a,
#room-title,
.clickable,
#room-list li,
#invite-list li,
#login-form input {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* 圆形按钮的点击热区在移动端略微放大，避免误触 */
@media (max-width: 700px) {
button.round {
min-width: 44px;
min-height: 44px;
}
/* 16px 起才能阻止 iOS 聚焦时自动放大；覆盖 style.css 里 13px/15px 的输入框字号 */
input,
#io-form input,
#send-form input#msg {
font-size: 16px;
}
}
/* ================================================================
* 2. 安全区（viewport-fit=cover）
* 外层 #app 保留 style.css 的 padding，这里只补 env() 增量：
* header 补顶部，.card 补顶部，#main 补左右，#send-form / #pagefoot 补底部。
* ================================================================ */
@supports (padding: env(safe-area-inset-top)) {
/* 顶：刘海/状态栏 */
header {
padding-top: env(safe-area-inset-top);
}
/* 顶：登录页的第一块内容（.card 的 margin 在 #app 之内） */
.card,
#login-view {
margin-top: calc(8vh + env(safe-area-inset-top));
}
/* 左右：横屏挖孔/圆角 */
#main {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* 底：输入区与手势条 */
#send-form {
padding-bottom: env(safe-area-inset-bottom);
}
/* 底：页脚 */
#pagefoot {
padding-bottom: calc(2px + env(safe-area-inset-bottom));
}
/* 装饰细线框内缩到可视安全区内 */
body::before {
inset: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}
}
/* 移动端侧栏是 position:fixed，逃出了 #app 的 padding，需要自己带全四边安全区 */
@media (max-width: 700px) {
@supports (padding: env(safe-area-inset-top)) {
#rooms {
padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
}
}
/* ================================================================
* 3. standalone（TWA / 已安装 PWA）—— 去掉"网页感"
* pwa.js 会在 上打 pwa-standalone / pwa-browser；这里同时用
* display-mode 媒体查询兜底（万一 pwa.js 未加载）
* ================================================================ */
html.pwa-standalone #pagefoot a[href^="http"],
html.pwa-standalone #pagefoot span {
display: none;
}
/* 隐藏外链后残留的 "·" 分隔符是文本节点，用 font-size:0 收掉，再给内部链接恢复字号 */
html.pwa-standalone #pagefoot {
font-size: 0;
letter-spacing: 0;
}
html.pwa-standalone #pagefoot a {
font-size: 10px;
letter-spacing: .1em;
margin: 0 6px;
}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
html,
body {
overscroll-behavior: none;
}
#pagefoot a[href^="http"],
#pagefoot span {
display: none;
}
#pagefoot {
font-size: 0;
letter-spacing: 0;
}
#pagefoot a {
font-size: 10px;
letter-spacing: .1em;
margin: 0 6px;
}
}
/* ================================================================
* 3.5 离线页（/offline.html）的链接式按钮
* style.css 只给了 button.action，这里把 对齐成同一观感，
* 这样 offline.html 里不需要任何内联 style
* ================================================================ */
a.action {
display: inline-block;
appearance: none;
border: 1px solid var(--fg);
background: var(--fg);
color: var(--bg);
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
letter-spacing: .06em;
text-decoration: none;
}
.retry-row {
margin: 16px 0 4px;
}
/* ================================================================
* 4. 状态提示（纯 CSS，不注入任何 DOM 节点）
* html.net-offline —— 离线胶囊（配色沿用 style.css 的 .notice 暗色）
* html.pwa-update-ready —— 新版本已就绪
* ================================================================ */
html.net-offline::after,
html.pwa-update-ready::before {
position: fixed;
left: 50%;
/* 前一行为不支持 env() 的老浏览器兜底 */
bottom: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 2147483000;
pointer-events: none;
padding: 7px 14px;
border-radius: 999px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
line-height: 1.2;
letter-spacing: .08em;
white-space: nowrap;
max-width: calc(100vw - 32px);
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
html.net-offline::after {
content: "离线 / offline — 消息将在恢复网络后同步";
color: #d8b84a;
background: #1a1608;
border: 1px solid #4a3f1a;
}
html.pwa-update-ready::before {
top: 12px;
top: calc(12px + env(safe-area-inset-top));
bottom: auto;
content: "新版本已就绪 — 控制台执行 ChatBabePWA.update() 生效";
color: #d8b84a;
background: #1a1608;
border: 1px solid #4a3f1a;
}
/* 浅色系统主题下换成站点 .notice 的浅色配色，保持同一套视觉语言 */
@media (prefers-color-scheme: light) {
html.net-offline::after,
html.pwa-update-ready::before {
color: #8a6d1a;
background: #fdf6e3;
border-color: #e8d9a8;
box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
}
/* 离线时输入区降调，避免用户以为消息发出去了 */
html.net-offline #send,
html.net-offline #attach {
opacity: .5;
}
html.net-offline #msg::placeholder {
color: #b9762f;
}