/* 华人通网页版「消息」（chat.hrt365.com）。样子照 Design/华人通/网页消息界面.md（UI设计 11-10）、聊天规范、设计规范聊天那几条；
   颜色、顶栏、底栏照主站 app/static/index.html（网页对齐App-1110 第二节），跟着系统深浅色。
   CSP 是 style-src 'self'：不引用外面的样式和字体；页面上也不用内联样式属性 */
:root {
  color-scheme: light dark;
  --accent:#005C98; --accent-fill:#005C98; --accent-tint:rgba(0,92,152,.12);
  --bg:#FFFFFF; --bg-grouped:#F2F2F7; --card:#FFFFFF; --list-bg:#FFFFFF;
  --text:#000000; --text2:#6C6C70; --sep:#C6C6C8; --pressed:#E5E5EA;
  --err:#FF3B30; --warn-text:#C93400;
  --tab-bg:#F9F9F9; --tab-off:#999999;
  --gray2:#AEAEB2; --gray:#8E8E93;
  --chat-bg:#EDEDED; --bubble-other:#FFFFFF; --input-bar:#F7F7F7; --input:#FFFFFF; --quote:#DEDEDE;
  --fill2:rgba(118,118,128,.12); --hover:rgba(0,0,0,.04); --photo-ph:#E5E5EA;
  --offline-bg:#FCE4E4;
  --pop:#2C2C2E; --shadow:rgba(0,0,0,.12); --mask:rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent:#3A97E0; --accent-tint:rgba(58,151,224,.2);
    --bg:#000000; --bg-grouped:#000000; --card:#1C1C1E; --list-bg:#1C1C1E;
    --text:#FFFFFF; --text2:#98989F; --sep:#38383A; --pressed:#2C2C2E;
    --err:#FF453A; --warn-text:#FF9F0A;
    --tab-bg:#161616; --gray2:#636366;
    --chat-bg:#111111; --bubble-other:#2C2C2C; --input-bar:#1E1E1E; --input:#2C2C2C; --quote:#262626;
    --fill2:rgba(118,118,128,.24); --hover:rgba(255,255,255,.06); --photo-ph:#2C2C2E;
    --offline-bg:#3A1E1E;
    --pop:#3A3A3C; --shadow:rgba(0,0,0,.5); --mask:rgba(0,0,0,.6);
  }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:17px; }
html, body { margin:0; height:100%; }
body { background:var(--bg-grouped); color:var(--text);
       font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--accent); }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 外壳：手机铺满；电脑（≥900）放在中间一栏，最宽 600；登录后「消息」放宽到 1100（UI设计第二节） */
#app { width:100%; height:100dvh; margin:0 auto; display:flex; flex-direction:column; background:var(--bg); }
@media (min-width:900px) {
  #app { max-width:600px; border-left:.5px solid var(--sep); border-right:.5px solid var(--sep); }
  #app.wide { max-width:1100px; }
}
#screen { flex:1; min-height:0; position:relative; display:flex; flex-direction:column; }

/* 顶栏：44 高，标题居中 17 半粗；左右图标键 44×44（照主站） */
.nav { flex:none; background:var(--bg); padding-top:env(safe-area-inset-top); border-bottom:.5px solid var(--sep); }
.nav .nrow { height:44px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 8px; }
.nav .nl { justify-self:start; display:flex; align-items:center; }
.nav .nr { justify-self:end; display:flex; align-items:center; }
.nav .ntitle { font-size:17px; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; max-width:60vw; margin:0; color:var(--text); line-height:normal; }
.chat-pane .nav { background:var(--chat-bg); }
.nbtn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none;
        padding:0; margin:0; color:var(--accent); cursor:pointer; text-decoration:none; }
.nbtn svg { width:24px; height:24px; }
.me-entry { width:32px; height:32px; border-radius:5px; overflow:hidden; display:flex; align-items:center; justify-content:center;
            background:linear-gradient(var(--gray2), var(--gray)); color:#fff; font-size:15px; font-weight:600; }
.me-entry svg { width:18px; height:18px; color:#fff; }
.me-entry img { width:100%; height:100%; object-fit:cover; display:block; }

/* 底栏：照主站五格同顺序、同字；别的四格回 hrt365.com */
#tabbar { flex:none; display:flex; background:var(--tab-bg); border-top:.5px solid var(--sep); padding-bottom:env(safe-area-inset-bottom); }
#tabbar a { flex:1; height:49px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
            font-size:10px; line-height:12px; color:var(--tab-off); text-decoration:none; cursor:pointer; }
#tabbar a svg { width:26px; height:26px; }
#tabbar a.on { color:var(--accent); }
@media (max-width:899px) { #app.in-chat #tabbar { display:none; } }   /* 手机：聊天页里藏底栏（跟 App 一样） */

/* 转圈、空页 */
.spin { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--fill2); border-top-color:var(--text2);
        animation:spin .8s linear infinite; }
.spin.sm { width:13px; height:13px; border-width:2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.center { flex:1; display:flex; align-items:center; justify-content:center; }
.empty-page { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
              padding:24px 32px; color:var(--text2); }
.empty-page svg { width:48px; height:48px; margin-bottom:14px; }
.empty-page .et { font-size:1.2941rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.empty-page .em { font-size:.9412rem; line-height:1.5; }

/* 按键：主按钮（主色白字，圆角 16，60 高）、红色、文字键（照设计规范第五节、主站 .bigbtn） */
.btn { display:block; width:100%; min-height:60px; padding:12px 16px; border:none; border-radius:16px; cursor:pointer;
       font-size:1.2941rem; font-weight:700; color:#fff; background:var(--accent-fill); }
.btn.red { background:var(--err); }
.btn:active { opacity:.75; }
.btn:disabled { opacity:.35; cursor:default; }
.btn.small { display:inline-block; width:auto; min-height:44px; padding:8px 24px; font-size:1rem; border-radius:12px; }
.tbtn { background:none; border:none; color:var(--accent); font-size:1rem; min-height:44px; padding:0 12px; cursor:pointer; }
.tbtn.red { color:var(--err); }

/* ===== 扫码登录（UI设计第一节） ===== */
.qr-page { flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; padding:28px 16px 24px; background:var(--bg); }
.qr-title { font-size:1.2941rem; font-weight:600; text-align:center; margin:0 0 12px; }
.qr-reason { font-size:.9412rem; color:var(--text2); text-align:center; margin:0 0 12px; max-width:340px; }
.qr-cancelled { display:flex; align-items:center; gap:6px; color:var(--warn-text); font-size:.9412rem; margin:0 0 12px; }
.qr-cancelled svg { width:18px; height:18px; flex:none; }
.qr-card { background:var(--card); padding:8px; border-radius:16px; box-shadow:0 0 0 .5px var(--sep); }
/* 深色下码也是白底黑码（不然手机扫不出），外面一圈卡片色 */
.qr-white { position:relative; width:232px; height:232px; padding:16px; background:#FFFFFF; border-radius:8px; }
.qr-white svg.qr { display:block; width:200px; height:200px; color:#000; shape-rendering:crispEdges; }
.qr-white .qr-wait { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.qr-white .qr-wait .spin { border-color:rgba(0,0,0,.1); border-top-color:#8E8E93; }
.qr-over { position:absolute; inset:0; border-radius:8px; background:rgba(255,255,255,.92); display:flex; flex-direction:column;
           align-items:center; justify-content:center; gap:12px; color:#000; font-size:1rem; font-weight:600; }
.qr-scanned { width:300px; min-height:232px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
              text-align:center; }
.qr-scanned .who { font-size:1rem; font-weight:600; }
.qr-scanned .hint { font-size:.9412rem; color:var(--text2); }
.qr-steps { list-style:none; margin:20px 0 0; padding:0; font-size:1rem; line-height:1.7; max-width:340px; }
.qr-note { font-size:.7647rem; color:var(--text2); text-align:center; margin:16px 0 0; max-width:420px; line-height:1.5; }

/* ===== 登录后：会话列表 + 聊天（UI设计第二节） ===== */
.panes { flex:1; min-height:0; display:flex; }
.list-pane { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--list-bg); }
.chat-pane { flex:1; min-width:0; display:none; flex-direction:column; background:var(--chat-bg); }
@media (max-width:899px) {
  #app.in-chat .list-pane { display:none; }
  #app.in-chat .chat-pane { display:flex; }
}
@media (min-width:900px) {
  .list-pane { flex:none; width:320px; border-right:.5px solid var(--sep); }
  .chat-pane { display:flex; }
  .chat-pane .back { display:none; }
}

/* 同步横条：列表最上面一条细横条 */
.syncbar { flex:none; display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; padding:6px 16px;
           background:var(--fill2); color:var(--text2); font-size:.7647rem; text-align:center; }
.syncbar.offline { background:var(--offline-bg); color:var(--text); }

.conv-list { flex:1; overflow-y:auto; margin:0; padding:0; list-style:none; }
.conv { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:12px 16px;
        background:none; border:none; text-align:left; cursor:pointer; color:var(--text); }
.conv::after { content:""; position:absolute; left:76px; right:0; bottom:0; height:.5px; background:var(--sep); }
.conv:hover { background:var(--hover); }
.conv.on { background:var(--fill2); }
.conv .av { flex:none; }
.conv .cmain { flex:1; min-width:0; }
.conv .ctop { display:flex; align-items:baseline; gap:8px; }
.conv .cname { flex:1; min-width:0; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv .ctime { flex:none; font-size:.7647rem; color:var(--text2); }
.conv .cbottom { display:flex; align-items:center; gap:8px; margin-top:3px; }
.conv .cprev { flex:1; min-width:0; font-size:.8824rem; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#FF3B30; color:#fff;
         font-size:12px; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; }

/* 头像：圆角方（圆角是边长的 0.16），没照片的灰底名字第一个字 */
.av { display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-weight:600;
      background:linear-gradient(var(--gray2), var(--gray)); }
.av img { width:100%; height:100%; object-fit:cover; display:block; }
.av.s48 { width:48px; height:48px; border-radius:8px; font-size:20px; }
.av.s42 { width:42px; height:42px; border-radius:7px; font-size:18px; }
.av.s64 { width:64px; height:64px; border-radius:10px; font-size:26px; }

/* 聊天页 */
.msgs { flex:1; min-height:0; overflow-y:auto; padding:8px 12px 16px; }
.older { text-align:center; font-size:.7647rem; color:var(--text2); margin:10px 0; }
.trow { text-align:center; font-size:.7647rem; color:var(--text2); margin:14px 0 6px; }
.sysrow { text-align:center; font-size:.7647rem; color:var(--text2); margin:8px auto; max-width:80%; line-height:1.5; }
.mrow { display:flex; align-items:flex-start; gap:8px; margin:10px 0; }
.mrow.mine { flex-direction:row-reverse; }
.mcol { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; max-width:calc(100% - 102px); }
.mrow.mine .mcol { align-items:flex-end; }
.sender { font-size:.7647rem; color:var(--text2); margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bubble { position:relative; margin:0 6px; padding:9px 12px; border-radius:6px; background:var(--bubble-other); color:var(--text);
          font-size:1rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; min-height:42px;
          -webkit-user-select:text; user-select:text; }
/* 6 宽的尖角，尖在离顶 21（头像 42 的一半）；自己的主色白字，浅深都是 #005C98 */
.bubble::before { content:""; position:absolute; top:15px; left:-12px; border:6px solid transparent; border-right-color:var(--bubble-other); }
.mrow.mine .bubble { background:var(--accent-fill); color:#fff; }
.mrow.mine .bubble::before { left:auto; right:-12px; border-right-color:transparent; border-left-color:var(--accent-fill); }
.mrow.mine .bubble.file { background:var(--bubble-other); color:var(--text); }
.mrow.mine .bubble.file::before { border-left-color:var(--bubble-other); }
.bubble.media { padding:0; background:none; min-height:0; cursor:zoom-in; }
.bubble.media::before, .bubble.ph::before { display:none; }
.bubble.media img { display:block; max-width:200px; max-height:240px; border-radius:6px; }
.bubble.ph { padding:0; background:var(--photo-ph); color:var(--text2); width:160px; height:120px; display:flex; flex-direction:column;
             align-items:center; justify-content:center; gap:6px; font-size:.7647rem; min-height:0; cursor:default; }
.bubble.ph svg { width:28px; height:28px; }
/* 引擎给了宽高的图：格子由 app.js 照原图比例定好（imageBox），小图拉满格子，载完不跳 */
.bubble.media.sized img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.bubble.media.sized .bubble.ph { width:100%; height:100%; margin:0; }
.mrow.mine .bubble.ph { background:var(--photo-ph); color:var(--text2); }
.bubble.file { display:flex; align-items:center; gap:12px; width:240px; cursor:pointer; white-space:normal; }
.bubble.file .fname { font-size:1rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bubble.file .fsize { font-size:.7647rem; color:var(--text2); margin-top:4px; }
.bubble.file .fmain { flex:1; min-width:0; }
.bubble.file svg { flex:none; width:36px; height:36px; color:var(--accent); }
.bubble.file.away { cursor:default; }
.bubble.file.away svg { color:var(--text2); }
.bubble.gray, .mrow.mine .bubble.gray { background:var(--fill2); color:var(--text2); display:flex; align-items:center; gap:6px; cursor:default; }
.bubble.gray::before, .mrow.mine .bubble.gray::before { display:none; }
.bubble.gray svg { width:18px; height:18px; }
/* 收到的语音：话筒、多长、「语音请在手机上听」 */
.bubble.voice .vlen { color:var(--text); font-variant-numeric:tabular-nums; }
.bubble.voice .vhint { font-size:.7647rem; }
/* 转发、已编辑的小字（照 App：转发在文字上面，已编辑在文字下面） */
.bmark { font-size:.7647rem; line-height:1.4; opacity:.75; white-space:normal; }
.bmark.fwd { font-style:italic; margin-bottom:2px; }
.bubble > .bmark:last-child:not(.fwd) { margin-top:2px; }
.fwdline { font-size:.7647rem; font-style:italic; color:var(--text2); margin:0 6px; }
.quote { font-size:.7647rem; color:var(--text2); background:var(--quote); border-radius:6px; padding:4px 8px; margin:0 6px;
         max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mstatus { font-size:.7647rem; color:var(--text2); margin:0 6px; }
.mstatus.err { color:var(--err); }
/* 发送失败：红圆感叹号跟气泡同一行，竖着居中；图标边到气泡边 8（气泡自己有 6 外边距，这里再 2）。看着 24，点按范围 38×44 */
.bline { display:flex; align-items:center; max-width:100%; min-width:0; }
.bline > .bubble { min-width:0; }
.retry { flex:none; position:relative; width:24px; height:24px; margin-right:2px; display:flex; align-items:center; justify-content:center;
         background:none; border:none; color:var(--err); cursor:pointer; padding:0; }
.retry::after { content:""; position:absolute; inset:-10px -4px -10px -10px; }   /* 右边只伸 4，不压到气泡 */
.retry svg { width:24px; height:24px; }

/* 输入栏：照 App 的颜色；输入框自动长高到 5 行再滚 */
.composer { flex:none; display:flex; align-items:flex-end; gap:4px; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
            background:var(--input-bar); border-top:.5px solid var(--sep); }
.composer textarea { flex:1; min-width:0; resize:none; border:none; border-radius:6px; background:var(--input); color:var(--text);
                     font:inherit; font-size:1rem; line-height:1.45; padding:9px 10px; height:42px; max-height:142px; overflow-y:hidden; }
.composer textarea:focus { outline:none; }
.composer .ibtn { flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:none; background:none;
                  color:var(--text); cursor:pointer; padding:0; }
.composer .ibtn svg { width:26px; height:26px; }
.composer .send { flex:none; min-width:64px; height:42px; border:none; border-radius:6px; background:var(--accent-fill); color:#fff;
                  font-size:1rem; font-weight:600; cursor:pointer; padding:0 12px; }
.composer .send:disabled { opacity:.4; cursor:default; }

/* 长按、右键的菜单：深色浮层，圆角 12，白字图标，一行最多 5 格（聊天规范第四节） */
.pop { position:fixed; z-index:30; background:var(--pop); border-radius:12px; padding:8px 4px; display:grid;
       grid-template-columns:repeat(var(--cols, 5), 60px); box-shadow:0 6px 24px var(--shadow); }
.pop button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; background:none; border:none;
              color:#fff; font-size:12px; cursor:pointer; border-radius:8px; }
.pop button:hover { background:rgba(255,255,255,.12); }
.pop svg { width:22px; height:22px; }

/* 右上「⋯」的菜单 */
.menu { position:fixed; z-index:30; min-width:200px; background:var(--card); border-radius:12px; padding:6px 0;
        box-shadow:0 8px 28px var(--shadow), 0 0 0 .5px var(--sep); }
.menu button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 16px; border:none; background:none;
               font-size:1rem; color:var(--text); cursor:pointer; text-align:left; }
.menu button:hover { background:var(--hover); }
.menu button.red { color:var(--err); }
.menu svg { width:22px; height:22px; }

/* 整页、弹框：手机上整页，电脑上中间一块 */
.mask { position:fixed; inset:0; z-index:20; background:var(--mask); display:flex; align-items:center; justify-content:center; }
.sheet { position:fixed; inset:0; z-index:21; display:flex; flex-direction:column; background:var(--bg-grouped); }
@media (min-width:900px) {
  .sheet { inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:480px; max-height:86vh; border-radius:14px;
           overflow:hidden; box-shadow:0 12px 40px var(--shadow); }
}
.sheet .nav { background:var(--bg-grouped); border-bottom:none; }
.sheet-body { flex:1; min-height:0; overflow-y:auto; padding:8px 0 24px; }
.sheet-foot { flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--bg-grouped); border-top:.5px solid var(--sep); }
.grp-h { font-size:.7647rem; font-weight:400; color:var(--text2); margin:18px 32px 6px; }
.grp { background:var(--card); border-radius:12px; margin:0 16px; overflow:hidden; }
.grp .pad { padding:12px 16px; font-size:1rem; line-height:1.5; }
.grp .pad.muted { color:var(--text2); font-size:.9412rem; }
.grp .lead { font-size:1.1765rem; font-weight:700; }
.grp .row { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 16px; border:none;
            background:none; text-align:left; font-size:1rem; color:var(--text); cursor:pointer; text-decoration:none; }
.grp .row + .row::before { content:""; position:absolute; left:16px; right:0; top:0; height:.5px; background:var(--sep); }
.grp .row .grow { flex:1; min-width:0; }
.grp .row svg.ck { width:22px; height:22px; color:var(--accent); }
.grp .row.link { color:var(--accent); }
.grp .row.red-text { color:var(--err); }
.grp .rmsg .rtext { font-size:1rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.grp .rmsg .rtime { font-size:.7647rem; color:var(--text2); margin-top:4px; }
.grp textarea, .grp input { display:block; width:100%; border:none; background:none; color:var(--text); font:inherit; font-size:1rem;
                            padding:12px 16px; resize:none; }
.grp textarea:focus, .grp input:focus { outline:none; }
.done-line { display:flex; align-items:center; gap:10px; color:#248A3D; font-size:1rem; font-weight:600; }
.done-line svg { width:24px; height:24px; flex:none; }
.err-line { color:var(--err); font-size:.9412rem; margin:12px 32px 0; }
.search-row { display:flex; gap:8px; align-items:center; padding-right:8px; }
.search-row input { flex:1; }
.result { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.result .grow { flex:1; min-width:0; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { flex:none; min-height:36px; padding:0 16px; border-radius:18px; border:none; background:var(--accent-fill); color:#fff;
        font-size:.9412rem; font-weight:700; cursor:pointer; }
.pill.gray { background:none; color:var(--text2); font-weight:400; cursor:default; }
.info-head { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px 8px; text-align:center; }
.info-head .iname { font-size:1.1765rem; font-weight:600; overflow-wrap:anywhere; }
.iid { font-size:.9412rem; color:var(--text2); background:none; border:none; cursor:pointer; min-height:44px; padding:0 8px; }
.info-note { font-size:.7647rem; color:var(--text2); text-align:center; margin:12px 32px 0; }
.confirm { position:fixed; z-index:31; left:50%; top:50%; transform:translate(-50%,-50%); width:min(320px, calc(100vw - 32px));
           background:var(--card); border-radius:14px; overflow:hidden; text-align:center; box-shadow:0 12px 40px var(--shadow); }
.confirm .ct { font-size:1rem; font-weight:600; padding:20px 16px 6px; }
.confirm .cm { font-size:.8235rem; color:var(--text2); padding:0 16px 18px; line-height:1.5; }
.confirm .cbtns { display:flex; border-top:.5px solid var(--sep); }
.confirm .cbtns button { flex:1; min-height:44px; border:none; background:none; font-size:1rem; color:var(--accent); cursor:pointer; }
.confirm .cbtns button + button { border-left:.5px solid var(--sep); font-weight:600; }
.confirm .cbtns button.red { color:var(--err); }

/* 看大图 */
.viewer { position:fixed; inset:0; z-index:40; background:#000; display:flex; flex-direction:column; color:#fff; }
.viewer .vbar { flex:none; display:flex; justify-content:space-between; align-items:center; padding:calc(4px + env(safe-area-inset-top)) 8px 4px; }
.viewer .vbar .nbtn { color:#fff; }
.viewer .vimg { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:8px; }
.viewer .vimg img { max-width:100%; max-height:100%; object-fit:contain; }
.viewer .vnote { flex:none; text-align:center; font-size:.8235rem; color:#BBB; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); }

.toast { position:fixed; z-index:50; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%);
         max-width:calc(100vw - 48px); background:rgba(0,0,0,.78); color:#fff; font-size:.9412rem; padding:10px 16px; border-radius:10px;
         text-align:center; pointer-events:none; }