:root{
  --bg:#12100f;
  --panel:#1b1817;
  --panel-2:#232020;
  --line:rgba(255,255,255,.08);
  --text:#f2efec;
  --muted:rgba(255,255,255,.55);
  --bubble:#ffffff;
  --bubble-text:#1a1a1a;
  --accent:#ff6b9d;
  --nick:rgba(255,255,255,.72);
  --rail-w:272px;
  --chat-max:720px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none !important}

#app{display:flex;height:100dvh;overflow:hidden}

/* ---------- 侧栏目录 ---------- */
.sidebar{
  width:var(--rail-w);flex:0 0 var(--rail-w);height:100%;
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .25s ease;
}
.sb-head{padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.sb-title{font-size:17px;font-weight:600;letter-spacing:.5px}
.sb-sub{font-size:12px;color:var(--muted);margin-top:2px}
.search{
  width:100%;margin-top:12px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-size:13px;outline:none;
}
.search:focus{border-color:rgba(255,255,255,.25)}
.sb-actions{display:flex;gap:8px;margin-top:10px}
.btn{
  padding:6px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);font-size:13px;transition:.15s;
}
.btn:hover{background:#2e2a2a}
.btn.on{background:#f2efe9;color:#17140f;border-color:#f2efe9;font-weight:600}
.btn.on:hover{background:#fff}
.sb-stats{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6}
.btn.mini{padding:4px 9px;font-size:11.5px;border-radius:6px}
.toc-tools{display:flex;gap:6px;margin-top:8px}

.toc{flex:1;overflow-y:auto;padding:8px 6px 40px}
.toc::-webkit-scrollbar,.chat::-webkit-scrollbar,.gal-grid::-webkit-scrollbar{width:8px}
.toc::-webkit-scrollbar-thumb,.chat::-webkit-scrollbar-thumb,
.gal-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}

.toc-year,.toc-month,.toc-day{
  display:block;width:100%;text-align:left;border:0;background:none;
  padding:5px 10px;border-radius:6px;font-size:13px;color:var(--text);
}
.toc-year{font-weight:600;font-size:14px;color:#fff;margin-top:6px}
.toc-month{padding-left:22px;color:var(--muted)}
.toc-day{padding-left:38px;color:var(--muted);font-size:12.5px}
.toc-year::before,.toc-month::before{
  content:"▸";display:inline-block;width:12px;font-size:10px;
  opacity:.55;transition:transform .15s;transform-origin:30% 50%;
}
.toc-year.open::before,.toc-month.open::before{content:"▾"}
.toc-body[data-body-m]{margin-left:8px;border-left:1px solid rgba(255,255,255,.07)}
.toc-body[data-body-y]{margin-left:2px}
.toc-year:hover,.toc-month:hover,.toc-day:hover{background:var(--panel-2)}
.toc-day.active,.toc-month.active,.toc-year.active,
.toc-day.current{color:var(--accent)}
.toc-day .n{float:right;opacity:.45;font-size:11px}

/* ---------- 主区 ---------- */
.main{
  flex:1;min-width:0;display:flex;flex-direction:column;height:100%;
  position:relative;
}
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:rgba(18,16,15,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);z-index:5;
}
.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);display:grid;place-items:center;font-size:15px;
}
.topbar-title{flex:1;min-width:0;display:flex;flex-direction:column}
.room-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-sub{font-size:11px;color:var(--muted)}
.crown{font-size:10px}

.searchbar{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:#241d1d;font-size:12.5px;color:var(--muted);
}
.btn-mini{
  padding:3px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);font-size:12px;
}

/* ---------- 聊天流 ---------- */
.chat{
  flex:1;overflow-y:auto;overflow-x:hidden;
  scroll-behavior:auto;
  background-image:var(--chat-bg,none);
  background-size:cover;background-position:center top;background-attachment:local;
  padding:0 0 60px;
}
.chat-inner{max-width:var(--chat-max);margin:0;padding:0 12px}

.day-sep{
  display:flex;justify-content:center;margin:26px 0 14px;
}
.day-sep span{
  font-size:11.5px;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.35);padding:3px 12px;border-radius:20px;
  backdrop-filter:blur(4px);letter-spacing:.5px;
}
.time-sep{display:flex;justify-content:center;margin:14px 0 8px}
.time-sep span{
  font-size:11px;color:rgba(255,255,255,.5);
  background:rgba(0,0,0,.28);padding:2px 10px;border-radius:20px;
}

.msg{display:flex;gap:9px;margin:10px 0;align-items:flex-start}
.msg.hit .bubble{background:#fff6d8;color:#3a2b12;box-shadow:0 0 0 1px rgba(255,196,0,.55)}
.msg.hit .nick{color:#ffd54a}
.msg.newgroup{margin-top:14px}
.avatar{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  object-fit:cover;background:#3a3430;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* 早期版本头像是小圆角方形 */
.avatar.square{border-radius:5px}
.msg-body{min-width:0;max-width:76%;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.nick{
  font-size:11.5px;color:var(--nick);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:4px;
  padding-left:2px;
}
.nick .crown{font-size:9px;opacity:.9}
.bubble{
  background:var(--bubble);color:var(--bubble-text);
  border-radius:var(--bubble-radius,10px);
  padding:9px 13px;font-size:15px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  user-select:text;-webkit-user-select:text;
  max-width:100%;width:fit-content;
}
.msg.media .bubble{padding:0;overflow:hidden;background:transparent;box-shadow:none;
  width:fit-content;max-width:100%}
.msg-img{
  display:block;border-radius:12px;background:#2a2522;cursor:zoom-in;
  max-width:min(320px,100%);max-height:56vh;width:auto;height:auto;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.video-wrap{position:relative;display:inline-block;max-width:min(320px,100%)}
.msg.media video{
  display:block;max-width:100%;border-radius:12px;background:#2a2522;
  max-height:56vh;width:auto;height:auto;
}
.bubble.miss{background:rgba(255,255,255,.14);color:#fff;font-size:13px;padding:8px 12px}
.video-wrap{position:relative;display:inline-block;max-width:100%}
.video-wrap .play-badge{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.video-wrap .play-badge span{
  width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.45);
  display:grid;place-items:center;color:#fff;font-size:20px;backdrop-filter:blur(2px);
}
.msg .meta{font-size:10.5px;color:rgba(255,255,255,.35);padding-left:2px}

.msg.hl .bubble{box-shadow:0 0 0 3px var(--accent),0 1px 2px rgba(0,0,0,.3)}
.msg.hl{animation:hlpulse 1.6s ease}
@keyframes hlpulse{0%{transform:translateX(-4px)}100%{transform:none}}

.loading{padding:60px 0;text-align:center;color:var(--muted);font-size:13px}

/* 空结果 */
.empty{padding:80px 20px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- 遮罩 ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;
  backdrop-filter:blur(2px);
}

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:60;background:rgba(8,7,7,.96);
  display:flex;flex-direction:column;
}
.lb-top{
  display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lb-caption{flex:1;font-size:12.5px;color:var(--muted);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-tools{display:flex;gap:8px}
.lb-stage{
  flex:1;display:grid;place-items:center;overflow:auto;padding:12px;
}
.lb-stage img,.lb-stage video{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;
}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:72px;border:0;border-radius:8px;
  background:rgba(255,255,255,.07);font-size:26px;color:#fff;
  display:grid;place-items:center;
}
.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-prev{left:10px}
.lb-next{right:10px}

/* ---------- 媒体库 ---------- */
.gallery{
  position:fixed;inset:0;z-index:55;background:rgba(12,10,10,.97);
  display:flex;flex-direction:column;
}
.gal-top{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--line);
}
.gal-tabs{display:flex;gap:6px}
.tab{
  padding:5px 14px;border-radius:20px;border:1px solid var(--line);
  background:transparent;font-size:13px;color:var(--muted);
}
.tab.active{background:#fff;color:#111;border-color:#fff;font-weight:600}
.gal-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.gal-count{font-size:12px;color:var(--muted)}
.gal-grid{
  flex:1;overflow-y:auto;padding:12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;align-content:start;
}
.gal-item{
  position:relative;border-radius:10px;overflow:hidden;display:block;
  background:#221e1d;cursor:zoom-in;border:0;padding:0;padding-top:100%;
}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-item .gdate{
  position:absolute;left:6px;bottom:5px;font-size:10px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.gal-item .gplay{
  position:absolute;inset:0;display:grid;place-items:center;font-size:26px;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.gal-item:hover{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:45;
    transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open{transform:none}
  .msg-body{max-width:80%}
  .bubble{font-size:15.5px}
  .lb-nav{width:38px;height:56px;font-size:22px}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px;padding:8px}
  .lb-tools .btn{padding:5px 9px;font-size:12px}
  #btn-gallery{display:none}
}
@media (max-width:420px){
  .gal-grid{grid-template-columns:repeat(3,1fr)}
}

/* ================= v2：图片化消息 ================= */
.chat{background-attachment:fixed;background-size:cover;background-position:center}
.chat-inner{padding:0}
.msg{margin:0;padding:0;display:block}
.strip{position:relative;container-type:inline-size;line-height:0;display:block}
.strip>.simg{
  display:block;width:100%;height:auto;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  pointer-events:none;
}
.vt{position:absolute;inset:0;overflow:hidden;cursor:text}
.vt span{
  position:absolute;display:block;white-space:pre;
  left:calc(var(--x) * 0.133333cqw);
  top:calc(var(--y) * 0.133333cqw);
  font-size:calc(var(--f) * 0.133333cqw);
  line-height:1;
  color:transparent;
  font-family:'Microsoft YaHei','PingFang SC',system-ui,sans-serif;
}
.vt span::selection{color:transparent;background:rgba(70,150,255,.45)}
.vt ::selection{background:rgba(70,150,255,.45)}
.msg.hit .vt{background:rgba(255,196,0,.20);box-shadow:inset 0 0 0 2px rgba(255,196,0,.85)}
.msg.hl .strip{box-shadow:0 0 0 3px var(--accent)}
.mcard{margin:2px 0 10px 17%;max-width:78%}
.mcard audio{max-width:100%}
@media (max-width:820px){
  .mcard{margin-left:14%;max-width:84%}
}

/* 图片/视频就画在截图里：透明热区接管点击，右下角给一个不起眼的「查看」 */
.mhit{
  position:absolute;
  left:calc(var(--x)*0.133333cqw);top:calc(var(--y)*0.133333cqw);
  width:calc(var(--w)*0.133333cqw);height:calc(var(--h)*0.133333cqw);
  cursor:zoom-in;border-radius:10px;
}
.mhit:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.vbtn{
  position:absolute;
  left:calc(var(--x)*0.133333cqw);top:calc(var(--y)*0.133333cqw);
  width:calc((var(--w) - var(--x))*0.133333cqw);
  height:calc((var(--h) - var(--y))*0.133333cqw);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(24,20,16,.30);
  color:rgba(255,255,255,.85);
  font-size:calc(16px + 0.6cqw);
  line-height:1;
  cursor:zoom-in;
  opacity:.30;
  transition:opacity .16s ease, background .16s ease;
  backdrop-filter:blur(2px);
}
.strip:hover .vbtn{opacity:.95;background:rgba(24,20,16,.52)}
.vbtn:hover{opacity:1;background:rgba(24,20,16,.62)}
@media (hover:none){
  .vbtn{opacity:.55}
}

/* ---- PWA 离线缓存进度条 ---- */
#pwawarm{position:fixed;left:0;right:0;bottom:0;z-index:9999;pointer-events:none;
  display:flex;justify-content:center;padding:0 10px 10px;transition:opacity .35s,transform .35s}
#pwawarm.hid{opacity:0;transform:translateY(12px);pointer-events:none}
.pwawarm-in{pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:520px;width:100%;
  background:rgba(24,21,17,.92);color:#f2efe9;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:8px 10px;font-size:12.5px;backdrop-filter:blur(8px)}
.pwawarm-txt{white-space:nowrap;flex:0 0 auto;opacity:.92}
.pwawarm-bar{flex:1 1 auto;height:4px;background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden}
.pwawarm-bar i{display:block;height:100%;width:0%;background:#f0d9a8;transition:width .3s}
.pwawarm-x{flex:0 0 auto;background:none;border:0;color:#cfc8bd;font-size:13px;cursor:pointer;padding:0 2px}
@media (max-width:600px){.pwawarm-txt{font-size:11.5px}}