/* SecureChat 桌面端布局补充（架构文档 §3.8，D-1 – D-4）
   组件视觉全部复用 design.css v1.6 「Telegram Desktop 版式」.tg* 体系；
   本文件只写：全屏三栏自适应 / 真实 textarea 输入区 / 右键菜单 / 夜间模式覆盖 / 滚动条 / 登录页布局 */

/* ---------- 页面基座（覆盖 design.css 的展板 body 背景） ---------- */
html, body.dk-body { height: 100%; }
body.dk-body {
  margin: 0; padding: 0; overflow: hidden;
  background: #E7EBEF; background-image: none;
  font-family: var(--ui); font-size: 14px; color: var(--ink);
}
body.dk-body [hidden] { display: none !important; }
#login-root, #app-root { position: fixed; inset: 0; }
#login-root { z-index: 20; }

/* ---------- 全屏三栏自适应（.tg 原为 640px 展板高度） ---------- */
#app-root.tg { height: 100%; width: 100%; font-size: 14px; }
.tg .tgl { width: 320px; }
.tg .tgc { min-width: 0; }
.tg .tgwall { overflow-y: auto; }           /* 展板稿为 overflow:hidden，桌面端需真实滚动 */
.tg .tgbub { max-width: min(480px, 62%); }
.tg .tgp { display: none; }
.tg.dk-right .tgp { display: flex; }
.tgl-list { flex: 1; }
@media (max-width: 1180px) {
  .tg.dk-right .tgp { position: absolute; right: 0; top: 0; bottom: 0; z-index: 4; box-shadow: -12px 0 30px rgba(10, 15, 20, .18); }
}
@media (max-width: 980px) { .tg .tgl { width: 264px; } }
@media (max-width: 760px) { .tg .tgl { width: 220px; } .tg .tgbub { max-width: 82%; } }

/* ---------- 滚动条 ---------- */
.dk-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(110, 120, 130, .45) transparent; }
.dk-scroll::-webkit-scrollbar { width: 8px; }
.dk-scroll::-webkit-scrollbar-thumb { background: rgba(110, 120, 130, .38); border-radius: 8px; }
.dk-scroll::-webkit-scrollbar-thumb:hover { background: rgba(110, 120, 130, .6); }
.dk-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 交互态（悬停 / 指针） ---------- */
.tgr, .fi2, .tgacc .acc, .tgdr, .tgar, .tgtabs span, .sw, .tgreact { cursor: pointer; user-select: none; }
.tgr:hover:not(.act) { background: #F2F5F7; }
.fi2:hover:not(.on) { background: #ECEFF1; }
.tgdr:hover, .tgar:hover:not(.on) { background: #F5F6F7; }
.dk-hbtn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #8E9398; cursor: pointer; flex: none; }
.dk-hbtn:hover { background: #F1F3F5; }
.dk-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-empty { padding: 42px 20px; text-align: center; font-size: 13px; color: #8E9398; }
.dk-pin { font-size: 12px; color: #8E9398; }

/* 头像补充尺寸（.tg 内自动圆形） */
.av.dk-a40 { width: 40px; height: 40px; font-size: 14px; }
.av.dk-a32 { width: 32px; height: 32px; font-size: 12px; }

/* 搜索框（真实 input 嵌入 .sinput） */
.dk-search { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); }
.dk-search::placeholder { color: #9AA0A6; }

/* ---------- 消息区补充 ---------- */
.dk-recall { color: #8E9398; font-style: italic; font-size: 13px; }
.dk-pending { color: #8E9398; margin-left: 2px; }
.dk-fail { width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; align-self: center; }
.dk-voice { display: flex; align-items: center; gap: 8px; min-width: 120px; padding: 2px 0; }
.dk-voice .wave i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: .55; }
.dk-voice span { font-size: 12px; color: #8E9398; }
.tgbub.dk-bare { background: transparent; box-shadow: none; }
.tgm.me .tgbub.dk-bare { background: transparent; }
.dk-rxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tgreact.mine { background: var(--tgb); color: #fff; }
.dk-readn { margin-left: 2px; }
.dk-more { text-align: center; font-size: 12px; color: var(--tglink); padding: 8px 0 2px; cursor: pointer; }
.dk-pintxt { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.35; }
.dk-pintxt b { display: block; color: var(--tglink); font-weight: 600; font-size: 12px; }
.dk-pintxt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7278; }

/* ---------- 消息分组与气泡尖角（Telegram Desktop 同版） ---------- */
/* 头像要和气泡底边对齐。之前是和整行底边对齐，一有表情回应头像就被挤到气泡下面去了。 */
.tgm { align-items: flex-end; }
/* 这一列要占满头像以外的整行宽度：气泡的 max-width 是百分比，
   列如果按内容收缩，百分比就变成对着一个小盒子算，气泡会被挤窄、文字提前换行。 */
.dk-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tgm.me .dk-col { align-items: flex-end; }
/* 组内非最后一条不挂头像，用等宽占位撑住，否则气泡会左右跳 */
.dk-avsp { width: 32px; flex: none; }

/* 组内消息贴紧，组间留白 */
.tgm { margin-top: 1px; }
.tgm.gfirst { margin-top: 10px; }

/* 圆角：朝向头像那一侧，组内是小圆角，只有组内最后一条切成尖角 */
.tgbub { border-radius: 6px 14px 14px 6px; }
.tgm.gfirst .tgbub { border-radius: 14px 14px 14px 6px; }
.tgm.glast .tgbub { border-radius: 6px 14px 14px 2px; }
.tgm.gfirst.glast .tgbub { border-radius: 14px 14px 14px 2px; }
.tgm.me .tgbub { border-radius: 14px 6px 6px 14px; }
.tgm.me.gfirst .tgbub { border-radius: 14px 14px 6px 14px; }
.tgm.me.glast .tgbub { border-radius: 14px 6px 2px 14px; }
.tgm.me.gfirst.glast .tgbub { border-radius: 14px 14px 2px 14px; }

/* 尖角：只画在组内最后一条上，用两个三角拼出「气泡尾巴」的形状 */
.tgm.glast .tgbub:not(.dk-bare) { position: relative; }
.tgm.glast .tgbub:not(.dk-bare)::before {
  content: ''; position: absolute; bottom: 0; left: -6px; width: 10px; height: 14px;
  background: inherit; clip-path: path('M10,14 L10,0 C10,8 6,13 0,14 Z');
}
.tgm.me.glast .tgbub:not(.dk-bare)::before { left: auto; right: -6px; transform: scaleX(-1); }

/* 表情回应挪进气泡里（Telegram 就是贴在气泡内底部），
   顺带解决了「回应把头像顶下去」的对齐问题 */
.rx-slot:empty { display: none; }
.tgbub .rx-slot { clear: both; }
.dk-rxs { margin-top: 5px; }

/* ---------- 左侧栏底部导航（Telegram 桌面端同款位置） ---------- */
/* 左栏是一列固定宽度的 flex，账号头像那块用 margin-top:auto 顶在下面。
   底部导航要排在账号更下面，所以它自己也得 flex:none，且账号区不能再吃掉剩余空间，
   否则四个图标会被挤出可视区（只露出半排）。栏宽只有 66px，四个图标一行放不下，排成 2×2。 */
.tgf { overflow: hidden; }
.tgf .tgacc { margin-top: auto; }
/* 账号头像必须严丝合缝地填满那颗 40px 的圆，选中环才会和它同心。
   .av 默认是 12px 圆角的方形，不改成圆的话，方角会从圆环里露出来。 */
.tgacc .acc > .av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.tgacc .acc > .av img { border-radius: 50%; }
.dk-btmnav { flex: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px); border-top: 1px solid #E7E7E7; margin-top: 6px;
  justify-items: center; }
.dk-btmnav .bn { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #8E9398; cursor: pointer; }
.dk-btmnav .bn:hover { background: #ECEFF1; color: var(--ink2); }
.dk-btmnav .bn.on { color: var(--tglink); background: #E7F3FB; }
.dk-btmnav .bn svg { width: 17px; height: 17px; }
body.night .dk-btmnav { border-color: #0A121A; }
body.night .dk-btmnav .bn:hover { background: #17212B; }
body.night .dk-btmnav .bn.on { background: #1C2A38; }

/* 设置页顶部的换头像入口：悬停时右下角浮出相机角标 */
.dk-avedit { position: relative; cursor: pointer; flex: none; }
.dk-avedit i { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tgb); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; opacity: 0; transition: opacity .14s; }
.dk-avedit:hover i { opacity: 1; }
.dk-avedit:hover > .av { filter: brightness(.9); }
body.night .dk-avedit i { border-color: #17212B; }

/* ---------- 自己的输入弹窗（替代被 Electron 禁掉的 window.prompt）---------- */
.dk-pbody { padding: 16px 18px 4px; display: flex; flex-direction: column; gap: 13px; }
.dk-pf { display: flex; flex-direction: column; gap: 6px; }
.dk-pf span { font-size: 12.5px; color: var(--ink2); }
.dk-pf input { height: 38px; box-sizing: border-box; border: 1px solid var(--line, #E2E5E7); border-radius: 9px;
  padding: 0 12px; font: inherit; font-size: 14px; outline: 0; background: #FBFCFC; color: var(--ink); }
.dk-pf input:focus { border-color: var(--tgb); background: #fff; }
.dk-pfoot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px 16px; }
.abtn2.pri { background: var(--tgb); border-color: var(--tgb); color: #fff; }
.abtn2.pri:hover { filter: brightness(1.06); }
body.night .dk-pf input { background: #242F3D; border-color: #0A121A; color: #F5F5F5; }
body.night .dk-pf input:focus { background: #2B3947; }

/* ---------- 设置弹窗的分区导航 ---------- */
.dk-setwrap { display: flex; flex: 1; min-height: 0; }
.dk-setnav { width: 176px; flex: none; border-right: 1px solid #E7E7E7; overflow-y: auto; padding: 6px 0; }
.dk-setnav .sn { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13.5px; color: var(--ink2); cursor: pointer; }
.dk-setnav .sn:hover { background: #F5F6F7; }
.dk-setnav .sn.on { background: #E7F3FB; color: var(--tglink); font-weight: 600; }
.dk-setnav .sn svg { width: 17px; height: 17px; flex: none; }
.dk-setbody { flex: 1; min-width: 0; overflow-y: auto; }
.dk-sechead { padding: 14px 18px 6px; font-size: 12px; font-weight: 700; color: #9AA0A6; }
body.night .dk-setnav { border-color: #0A121A; }
body.night .dk-setnav .sn:hover { background: #17212B; }
body.night .dk-setnav .sn.on { background: #1C2A38; }

/* ---------- 联系人 / 建群 / 加好友弹窗 ---------- */
.dk-cbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #E7E7E7; }
.dk-search2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 9px; background: #F1F3F5; color: #8E9398; }
.dk-search2 input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); }
.dk-search2 input::placeholder { color: #9AA0A6; }
.abtn2 { height: 32px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--line, #E2E5E7); background: #fff; color: var(--ink2); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.abtn2:hover { background: #F5F6F7; }
.abtn2.p { background: var(--tgb); border-color: var(--tgb); color: #fff; }
.abtn2:disabled { opacity: .55; cursor: default; }
.dk-cletter { padding: 9px 18px 3px; font-size: 11.5px; font-weight: 700; color: #9AA0A6; background: #FAFBFC; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid #E7E7E7; min-height: 44px; align-items: center; }
.dk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; background: #E7F3FB; color: var(--tglink); font-size: 12.5px; cursor: pointer; }
.dk-chiphint { font-size: 12px; color: #9AA0A6; }
.dk-ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C6CBCE; flex: none; position: relative; }
.dk-ck.on { background: var(--tgb); border-color: var(--tgb); }
.dk-ck.on::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dk-cfoot { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid #E7E7E7; }
.dk-cfoot input { flex: 1; min-width: 0; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line, #E2E5E7); outline: 0; font: inherit; font-size: 13.5px; }
body.night .dk-cbar, body.night .dk-chips, body.night .dk-cfoot { border-color: #0A121A; }
body.night .dk-search2, body.night .dk-cfoot input { background: #17212B; border-color: #0A121A; color: #F5F5F5; }
body.night .dk-cletter { background: #17212B; }
body.night .abtn2 { background: #17212B; border-color: #0A121A; color: #C9CDD1; }
body.night .abtn2.p { background: var(--tgb); border-color: var(--tgb); color: #fff; }

/* ---------- 右侧资料栏：媒体 / 文件 / 链接 / 语音 ---------- */
.dk-plabel { padding: 12px 18px 4px; font-size: 12px; color: #8E9398; font-weight: 600; }
.dk-panehint { padding: 12px 18px 20px; font-size: 11.5px; color: #9AA0A6; line-height: 1.7; }
.dk-mcell { position: relative; aspect-ratio: 1; overflow: hidden; background: #E9EDF0; cursor: pointer; }
.dk-mcell img, .dk-mcell svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-mcell:hover img { filter: brightness(1.06); }
.dk-mplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.dk-srow .fi2 { width: 34px; height: 40px; border-radius: 5px; background: #EDF0F3; flex: none;
  display: flex; align-items: center; justify-content: center; color: #5E7A9E;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 0; }
/* 从资料栏点进聊天流时闪一下，否则跳过去了也不知道是哪条 */
.dk-hl .tgbub { animation: dkhl 1.5s ease-out; }
@keyframes dkhl { 0%, 40% { background: #FFF3C4; } 100% { background: ''; } }
body.night .dk-hl .tgbub { animation: dkhlN 1.5s ease-out; }
@keyframes dkhlN { 0%, 40% { background: #3A4A2E; } 100% { background: ''; } }

/* ---------- 输入区（真实 textarea，Enter 发送 / Shift+Enter 换行） ---------- */
.tg .tgi { align-items: flex-end; }
.dk-ta { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); max-height: 132px; padding: 6px 0; }
.dk-ta::placeholder { color: #9AA0A6; }
.dk-reply { display: flex; align-items: center; gap: 10px; padding: 7px 15px; background: #fff; border-top: 1px solid #E7E7E7; font-size: 12.5px; }
.dk-reply > i { width: 2.5px; height: 30px; background: var(--tgb); border-radius: 2px; flex: none; }
.dk-reply b { display: block; color: var(--tglink); font-weight: 600; }
.dk-reply span { display: block; color: #6B7278; }
.dk-emoji { position: absolute; left: 10px; bottom: 56px; z-index: 5; background: #fff; border-radius: 12px; box-shadow: 0 10px 34px rgba(10, 15, 20, .25); padding: 10px; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.dk-emoji span { font-size: 20px; text-align: center; padding: 4px 0; border-radius: 7px; cursor: pointer; }
.dk-emoji span:hover { background: #F1F3F5; }

/* ---------- 右键菜单（会话行 / 消息气泡） ---------- */
.dk-ctx { position: fixed; z-index: 60; background: #fff; border-radius: 11px; box-shadow: 0 8px 32px rgba(16, 21, 26, .28); padding: 5px; min-width: 176px; }
.dk-ctx .mi { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 7px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.dk-ctx .mi:hover { background: #F2F4F6; }
.dk-ctx .mi.warn { color: var(--red); }
.dk-ctx .mi svg { color: #8E9398; }
.dk-ctx .mi.warn svg { color: var(--red); }
.dk-rxrow { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.dk-rxrow span { font-size: 19px; padding: 3px 5px; border-radius: 7px; cursor: pointer; }
.dk-rxrow span:hover { background: #F2F4F6; transform: scale(1.12); }

/* ---------- 右栏 / 抽屉 / 设置弹窗行 ---------- */
.dk-pcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 14px; text-align: center; }
.dk-pname { font-size: 16.5px; font-weight: 650; }
.dk-pst { font-size: 12.5px; color: var(--tglink); }
.dk-srow { display: flex; align-items: center; gap: 13px; padding: 11px 18px; font-size: 14px; cursor: pointer; }
.dk-srow:hover { background: #F5F6F7; }
.dk-srow svg { color: #8E9398; flex: none; }
.dk-srow .m { flex: 1; min-width: 0; }
.dk-srow .s { font-size: 12px; color: #8E9398; margin-top: 2px; line-height: 1.4; }
.dk-sect { font-size: 12.5px; color: var(--tglink); font-weight: 600; padding: 14px 18px 4px; }
.dk-dot { width: 9px; height: 9px; border-radius: 99px; background: #33C15C; flex: none; }
.dk-drhead { display: flex; align-items: center; gap: 13px; padding: 18px 18px 14px; cursor: pointer; }
.dk-drhead b { display: block; font-size: 15px; font-weight: 650; }
.dk-drhead span { display: block; font-size: 12.5px; color: #8E9398; margin-top: 2px; }
.dk-drsep { height: 1px; background: var(--line2); margin: 6px 0; }
.dk-shead { display: flex; align-items: center; gap: 14px; padding: 18px; }
.dk-shead b { font-size: 16px; font-weight: 650; }
.dk-shead .s { font-size: 12.5px; color: #8E9398; margin-top: 3px; }
.dk-lang { display: flex; gap: 6px; }
.dk-lang span { font-size: 12px; padding: 4px 11px; border-radius: 99px; background: #EFF1F3; color: var(--ink2); cursor: pointer; }
.dk-lang span.on { background: var(--tgb); color: #fff; font-weight: 600; }

/* ---------- 按钮 / 提示 ---------- */
.dk-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 9px; background: var(--tgb, #40A7E3); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; letter-spacing: .3px; }
.dk-btn.ghost { background: #EFF1F3; color: var(--ink2); }
.dk-btn.danger { background: var(--red); }
.dk-btn.wide { display: flex; width: 100%; }
.dk-toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(16, 21, 26, .88); color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 9px; z-index: 99; max-width: 70vw; text-align: center; }

/* ---------- D-1 扫码登录页 ---------- */
.dk-login { height: 100%; display: flex; align-items: center; justify-content: center; background: #F5F6F7; overflow-y: auto; --tgb: #40A7E3; --tglink: #168ACD; }
.dk-login-card { position: relative; width: 400px; max-width: 92vw; background: #fff; border-radius: 16px; padding: 34px 34px 26px; text-align: center; box-shadow: 0 24px 60px -22px rgba(10, 15, 20, .28); }
.dk-login-card h1 { font-size: 19px; font-weight: 680; margin: 14px 0 6px; letter-spacing: .2px; }
.dk-sub { font-size: 12.5px; color: #8E9398; margin-bottom: 20px; }
.dk-login .qrbox { position: relative; }
.dk-qrmask { position: absolute; inset: 0; border-radius: 14px; background: rgba(255, 255, 255, .95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--ink2); }
.dk-code { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: 7px; margin: 16px 0 4px; color: var(--ink); }
.dk-hint { font-size: 12.5px; color: #8E9398; }
.dk-status { font-size: 13px; color: var(--tglink); min-height: 20px; margin: 12px 0 4px; }
.dk-link { display: inline-block; font-size: 13px; color: var(--tglink); cursor: pointer; margin-top: 10px; }
.dk-link:hover { text-decoration: underline; }
.dk-input { display: block; width: 100%; box-sizing: border-box; height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 13px; font: inherit; font-size: 14px; margin-top: 10px; outline: 0; background: #FBFCFC; color: var(--ink); }
.dk-input:focus { border-color: var(--tgb); background: #fff; }
#pwd-form { margin-top: 6px; }
#pwd-form .dk-btn { margin-top: 12px; }
.dk-foot { font-family: var(--mono); font-size: 10.5px; color: var(--ink4); margin-top: 20px; }
.dk-back { position: absolute; left: 20px; top: 18px; font-size: 13px; color: var(--tglink); cursor: pointer; }

/* ---------- 主题色单 token 切换（D-4：Telegram 蓝 ↔ SecureChat 绿） ---------- */
.tg.sc-green { --tgb: #0EA47A; --tglink: #0B8666; --tgout: #DDF5EB; --tgtick: #0EA47A; --tggreen: #0EA47A; }

/* ---------- 夜间模式（D-3 开关；.tgwall 深色渐变 / .tgbub 深色） ---------- */
body.night { background: #0E1621; color: #F5F5F5; }
body.night .tg { background: #17212B; color: #F5F5F5; }
body.night .tgf { background: #0E1621; border-color: #0A121A; }
body.night .fi2 { color: #7D8B99; }
body.night .fi2:hover:not(.on) { background: #17212B; }
body.night .fi2.on { background: #202B36; color: #64B5EF; }
body.night .tgacc { border-color: #1B2733; }
body.night .tgacc .abd { border-color: #0E1621; }
body.night .tgl, body.night .tgc, body.night .tgp { background: #17212B; }
body.night .tgl, body.night .tgp, body.night .tgh, body.night .tgpin, body.night .tgi, body.night .tgtabs, body.night .tgp-h { border-color: #0A121A; }
body.night .tgh, body.night .tgpin, body.night .tgi { background: #17212B; }
body.night .tgl-top .sinput { background: #242F3D; color: #7D8B99; }
body.night .dk-search, body.night .dk-ta { color: #F5F5F5; }
body.night .tgr:hover:not(.act) { background: #202B36; }
body.night .tgr .tname { color: #F5F5F5; }
body.night .tgr .odot { border-color: #17212B; }
body.night .tgwall { background: linear-gradient(165deg, #0E1621, #16222F); background-image: radial-gradient(rgba(255, 255, 255, .05) 1.3px, transparent 0), linear-gradient(165deg, #0E1621, #16222F); background-size: 24px 24px, auto; }
body.night .tgdate span { background: rgba(0, 0, 0, .38); }
body.night .tgbub { background: #182533; color: #F5F5F5; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .35); }
body.night .tgm.me .tgbub { background: #2B5278; }
body.night .tgbub.dk-bare { background: transparent; box-shadow: none; }
body.night .tgmeta { color: #7D8B99; }
body.night .tgtk { color: #71BBE7; }
body.night .tgquo { background: rgba(100, 181, 239, .09); }
body.night .tgquo span { color: #A8B4BF; }
body.night .tgreact { background: rgba(100, 181, 239, .16); color: #71BBE7; }
body.night .tgreact.mine { background: var(--tgb); color: #fff; }
body.night .fcard .fi { background: #243242; color: #8FB4D9; }
body.night .dk-reply { background: #17212B; border-color: #0A121A; }
body.night .dk-reply span { color: #7D8B99; }
body.night .dk-hbtn:hover { background: #242F3D; }
body.night .tgdraw, body.night .tgbox, body.night .dk-ctx, body.night .dk-emoji { background: #1E2A36; color: #F5F5F5; }
body.night .tgdr { color: #F5F5F5; }
body.night .tgdr:hover, body.night .tgar:hover:not(.on), body.night .dk-srow:hover { background: #24303C; }
body.night .tgar.on { background: #202B36; }
body.night .dk-ctx .mi:hover, body.night .dk-emoji span:hover { background: #2B3844; }
body.night .dk-rxrow { border-color: #2B3844; }
body.night .dk-drsep { background: #2B3844; }
body.night .dk-pintxt span, body.night .dk-recall { color: #7D8B99; }
body.night .dk-empty { color: #7D8B99; }
body.night .dk-code { color: #F5F5F5; }
body.night .sw { background: #33404D; }
body.night .dk-btn.ghost { background: #2B3844; color: #C6CCD2; }
body.night .dk-lang span { background: #2B3844; color: #C6CCD2; }
body.night .dk-lang span.on { background: var(--tgb); color: #fff; }
body.night .dk-login { background: #0E1621; }
body.night .dk-login-card { background: #17212B; }
body.night .dk-login-card h1, body.night .dk-login .dk-code { color: #F5F5F5; }
body.night .dk-input { background: #242F3D; border-color: #33404D; color: #F5F5F5; }
body.night .dk-qrmask { background: rgba(23, 33, 43, .95); color: #C6CCD2; }

/* ══════════════════════════════════════════════════════════════
   v1.2 桌面尺寸校准：design.css 的 .tg* 源自 UI 稿「展板缩略图」比例，
   直接铺满真实窗口会显得又小又挤。此段按 Telegram Desktop 真实版式重新标定：
   放大字号/头像/行高、聊天流限宽居中、大屏响应式列宽、空态与滚动优化。
   ══════════════════════════════════════════════════════════════ */
#app-root.tg { font-size: 15px; }
body.dk-body { font-size: 15px; }

/* —— 文件夹栏 —— */
.tg .tgf { width: 76px; padding: 10px 0; }
.tg .tgf .fi2 { width: 66px; padding: 9px 0 7px; gap: 4px; }
.tg .tgf .fi2 span { font-size: 11px; }
.tg .tgf .fi2 svg.ic { width: 24px; height: 24px; }

/* —— 会话列表：大屏加宽 + 行密度放松 —— */
.tg .tgl { width: 336px; }
@media (min-width: 1500px) { .tg .tgl { width: 372px; } }
@media (max-width: 1100px) { .tg .tgl { width: 300px; } }
.tg .tgl-top { padding: 11px 12px; gap: 11px; }
.tg .tgl-top .sinput { height: 38px; border-radius: 19px; font-size: 14px; }
.tg .tgr { padding: 10px 12px; gap: 12px; }
.tg .tgr .tname { font-size: 15px; }
.tg .tgr .tprev { font-size: 13.5px; margin-top: 3px; }
.tg .tgr .ttime { font-size: 12px; }
.tg .tgr .odot { left: 48px; width: 12px; height: 12px; }
/* 只放大会话列表和联系人里的头像。
   原来这两条没限定作用域，把左栏账号那颗 40px 的头像也撑到了 46px ——
   它外面那圈选中环是按 40px 画的，于是头像鼓出来 3px，看着就是「图和边框没对齐」。 */
.tg .tgr .av.dk-a40, .tg .tgar .av.dk-a40 { width: 46px; height: 46px; font-size: 16px; }
.tg .tgr .av.dk-a32, .tg .tgar .av.dk-a32 { width: 34px; height: 34px; font-size: 12.5px; }
.tg .gav { width: 46px; height: 46px; }
.tg .tgbd { min-width: 22px; height: 22px; font-size: 12.5px; }

/* —— 聊天头部 —— */
.tg .tgh { height: 62px; padding: 0 18px; gap: 13px; }
.tg .tgpin { height: 46px; }

/* —— 聊天流：限宽居中（大屏不空旷，Telegram Desktop 同款做法）—— */
.tg .tgwall { padding: 14px 0 18px; }
.tg .tgwall > .tgm, .tg .tgwall > .tgdate, .tg .tgwall > .dk-more, .tg .tgwall > .dk-empty { max-width: 880px; margin-left: auto; margin-right: auto; }
.tg .tgwall > #dk-msgs { max-width: 880px; margin: 0 auto; }
.tg .tgm { padding: 3px 18px; gap: 9px; }
.tg .tgbub { max-width: min(560px, 66%); font-size: 14.6px; line-height: 1.5; padding: 8px 13px 7px; }
.tg .tgm { padding-top: 0; padding-bottom: 0; }
.tg .tgmeta { font-size: 11.5px; }
.tg .tgwho { font-size: 13.5px; margin-bottom: 3px; }
.tg .tgquo b, .tg .tgquo span { font-size: 13px; }
.tg .tgdate span { font-size: 12.5px; padding: 4px 13px; }
.tg .tgimg { width: 300px; height: 180px; }
.tg .tgreact { font-size: 13px; padding: 3px 10px; }

/* —— 输入区 —— */
.tg .tgi { padding: 12px 18px; gap: 14px; }
.dk-ta { font-size: 15px; }
.dk-hbtn { width: 38px; height: 38px; }
.dk-hbtn svg.ic { width: 23px; height: 23px; }

/* —— 右侧资料栏 —— */
.tg .tgp { width: 320px; }
@media (min-width: 1500px) { .tg .tgp { width: 344px; } }
.tg .tgp-h { height: 62px; font-size: 15.5px; }
.dk-srow { padding: 12px 18px; font-size: 14.5px; }
.dk-pname { font-size: 17.5px; }

/* —— 空态：大屏别只剩一行小字 —— */
.dk-blank { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #8E9398; }
.dk-blank .ico { width: 84px; height: 84px; border-radius: 26px; background: rgba(255,255,255,.62); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -14px rgba(16,21,26,.35); }
.dk-blank .ico svg { width: 40px; height: 40px; color: var(--tgb); }
.dk-blank b { font-size: 16px; font-weight: 640; color: #55606A; }
.dk-blank span { font-size: 13px; }
body.night .dk-blank .ico { background: rgba(255,255,255,.06); }
body.night .dk-blank b { color: #C6CCD2; }

/* —— Windows 字体兜底（无 PingFang 时用雅黑/等宽用 Consolas）—— */
body.dk-body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.mono, .dk-code { font-family: ui-monospace, "SF Mono", Consolas, "JetBrains Mono", Menlo, monospace; }

/* 拖拽发送遮罩 */
.dk-drop { position: absolute; inset: 0; z-index: 70; background: rgba(64,167,227,.12); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; border: 3px dashed var(--tgb); border-radius: 10px; }
.dk-drop .box { background: #fff; border-radius: 16px; padding: 26px 34px; text-align: center; box-shadow: 0 18px 50px -18px rgba(10,15,20,.4); }
.dk-drop .box svg { width: 40px; height: 40px; color: var(--tgb); }
.dk-drop .box b { display: block; font-size: 16px; margin: 10px 0 4px; }
.dk-drop .box span { font-size: 12.5px; color: #8E9398; }
body.night .dk-drop .box { background: #1E2A36; color: #F5F5F5; }

/* ---------- 气泡宽度修正 ----------
   .tgmeta 用的是 float:right。气泡窄到装不下这个浮动块时，时间会掉到气泡外面，
   同时气泡被压得比发送者名字还窄，"周凯"就被折成两行竖排。
   对策：给气泡一个能容纳「时间 + 回执」的最小宽度，并禁止名字换行。 */
.tg .tgbub { min-width: 92px; }
/* 文字正好占满一行时，float 的时间块会掉到下一行并溢出气泡（父元素不含浮动子元素高度）。
   flow-root 建立块级格式化上下文把浮动包住；::after 清除浮动兼容老 WebView。 */
.tg .tgbub { display: flow-root; }
.tg .tgbub::after { content: ''; display: block; clear: both; }
.tg .tgm.me .tgbub { min-width: 104px; }        /* 我方多一个已读双勾 */
.tg .tgbub.dk-bare { min-width: 0; }            /* 图片/视频/大表情不套底，不受此限 */
.tg .tgwho {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; box-sizing: border-box;
}
.tg .tgmeta { white-space: nowrap; }

/* ---------- 图片 / 视频大图查看 ---------- */
.dk-lb { position: fixed; inset: 0; z-index: 400; background: rgba(8,10,13,.93); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.dk-lb img, .dk-lb video { max-width: 88vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.dk-lb .dk-lb-bar { display: flex; gap: 12px; }
.dk-lb .dk-lb-bar span {
  color: #fff; font-size: 13px; padding: 8px 20px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.3); cursor: pointer; user-select: none;
}
.dk-lb .dk-lb-bar span:hover { background: rgba(255,255,255,.14); }
.tg .tgimg { cursor: zoom-in; }

/* 登录页：与移动端一致的验证码 / 密码双通道 */
.dk-tabs { display: flex; background: #F1F3F5; border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.dk-tabs span { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; color: #6B7278; border-radius: 8px; cursor: pointer; user-select: none; }
.dk-tabs span.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16,21,26,.1); }
.dk-capimg { flex: none; width: 108px; height: 40px; border-radius: 8px; overflow: hidden; background: #F1F3F5; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; color: #8E9398; }
.dk-capimg svg { width: 100%; height: 100%; display: block; }
body.night .dk-tabs { background: #1B222B; }
body.night .dk-tabs span.on { background: #2B3440; color: #F5F5F5; }
body.night .dk-capimg { background: #1B222B; }

/* 国际区号选择 */
.dk-cc-btn {
  display: flex; align-items: center; gap: 5px; flex: none; cursor: pointer; user-select: none;
  height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.dk-cc-btn:hover { border-color: var(--brand); }
.dk-cc-btn .f { font-size: 17px; line-height: 1; }
.dk-cc-btn .c { font-size: 13.5px; font-weight: 600; }
.dk-cc-btn i { font-style: normal; font-size: 10px; color: #8E9398; }
.dk-cc-mask { position: fixed; inset: 0; z-index: 500; background: rgba(16,21,26,.42); display: flex; align-items: center; justify-content: center; }
.dk-cc { width: 400px; max-height: 72vh; background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.dk-cc-h { padding: 15px 18px 10px; font-size: 15px; font-weight: 650; display: flex; align-items: center; }
.dk-cc-x { margin-left: auto; font-size: 22px; line-height: 1; color: #8E9398; cursor: pointer; }
.dk-cc-q { margin: 0 18px 10px; width: auto; }
.dk-cc-list { overflow-y: auto; padding-bottom: 8px; }
.dk-cc-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; font-size: 14px; }
.dk-cc-row:hover { background: #F5F6F7; }
.dk-cc-row.on { background: var(--brand-l); }
.dk-cc-row span { font-size: 19px; line-height: 1; }
.dk-cc-row b { flex: 1; font-weight: 400; }
.dk-cc-row i { font-style: normal; color: #8E9398; font-family: var(--mono); font-size: 12.5px; }
.dk-cc-empty { padding: 30px; text-align: center; color: #8E9398; font-size: 13px; }
body.night .dk-cc { background: #17212B; }
body.night .dk-cc-row:hover { background: #202B36; }
body.night .dk-cc-btn { background: #17212B; border-color: #2B3440; }

/* ---------- 对话分组：新建按钮与编辑弹窗 ---------- */
.fi2.fadd { color: #8E9398; opacity: .75; }
.fi2.fadd:hover { opacity: 1; background: #ECEFF1; }

.dk-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.dk-modal .dk-mask { position: absolute; inset: 0; background: rgba(16, 21, 26, .42); }
.dk-modal .dk-box { position: relative; width: 460px; max-width: calc(100vw - 40px); background: #fff;
  border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(16, 21, 26, .28); }
.dk-modal .dk-box h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; color: var(--ink); }
.dk-fhint { font-size: 12px; color: #8E9398; margin: 12px 0 8px; }
/* 会话多的时候列表要能滚，弹窗本身不跟着长高 */
.dk-flist { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.dk-frow { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.dk-frow:hover { background: #F2F5F7; }
.dk-frow input { width: 16px; height: 16px; accent-color: var(--tgb, #40A7E3); flex: none; cursor: pointer; }
.dk-frow .n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-frow .t { font-size: 11.5px; color: #8E9398; flex: none; }
.dk-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.dk-btn.g { background: #EFF1F3; color: var(--ink2); }
.dk-btn.p { background: var(--tgb, #40A7E3); }

body.night .dk-modal .dk-box { background: #1E2C3A; }
body.night .dk-modal .dk-box h3 { color: #E7ECF0; }
body.night .dk-flist { border-color: #2B3844; }
body.night .dk-frow:hover { background: #24313F; }
body.night .dk-frow .n { color: #E7ECF0; }
body.night .dk-btn.g { background: #2B3844; color: #C6CCD2; }
body.night .fi2.fadd:hover { background: #24313F; }

/* 登录页「忘记密码」入口 */
.dk-forgot { margin-top: 10px; font-size: 12.5px; color: var(--tgb, #40A7E3); cursor: pointer; text-align: center; }
.dk-forgot:hover { text-decoration: underline; }