/* ============================================
   hont · Telegram 风格布局
   ============================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  background-image:var(--bg-image,none);
  background-attachment:fixed;
  color:var(--txt);
  overflow:hidden;
  transition:background .3s,color .3s;
}
.hidden{display:none!important}

/* ---------- 整体布局：左侧栏 + 主聊天区 ---------- */
.layout{display:flex;height:100vh;height:100dvh}

/* 左侧栏（联系人/会话列表） */
.sidebar{
  width:340px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--bg-side);border-right:1px solid var(--border);
  backdrop-filter:blur(16px);
}
.side-head{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border);min-height:56px;
}
.logo{
  font-weight:800;font-size:19px;letter-spacing:.3px;
  background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.side-head .spacer{flex:1}
.icon-btn{
  width:36px;height:36px;border-radius:9px;border:none;cursor:pointer;
  background:transparent;color:var(--dim);font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:.18s;
}
.icon-btn:hover{background:var(--bg-input);color:var(--accent)}
.search{padding:8px 12px}
.search input{
  width:100%;padding:9px 14px;border-radius:20px;border:none;
  background:var(--bg-input);color:var(--txt);font-size:14px;font-family:inherit;outline:none;
}
.search input:focus{box-shadow:0 0 0 2px var(--accent)}
.list{flex:1;overflow-y:auto;padding:4px 6px}
.list::-webkit-scrollbar{width:5px}
.list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}

.item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;
  cursor:pointer;transition:.15s;position:relative;
}
.item:hover{background:var(--bg-input)}
.item.active{background:var(--accent);color:#fff}
.item.active .it-sub,.item.active .it-time{color:rgba(255,255,255,.75)!important}
.avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;color:#fff;
  background:var(--logo-grad);
}
.it-main{flex:1;min-width:0}
.it-top{display:flex;align-items:center;gap:5px}
.it-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-sub{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.it-time{font-size:11px;color:var(--dim);margin-left:auto;flex-shrink:0}
.badge{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  border-radius:10px;padding:1px 7px;margin-left:6px;
}
.item.active .badge{background:#fff;color:var(--accent)}

/* 主聊天区 */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.chat-head{
  display:flex;align-items:center;gap:11px;padding:10px 16px;min-height:56px;
  border-bottom:1px solid var(--border);backdrop-filter:blur(12px);
  background:var(--bg-side);
}
.chat-head .avatar{width:40px;height:40px;font-size:15px}
.chat-title{font-weight:600;font-size:15px}
.chat-sub{font-size:12px;color:var(--dim)}
.chat-head .spacer{flex:1}

.msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:3px}
.msgs::-webkit-scrollbar{width:6px}
.msgs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}
.msg{
  max-width:72%;display:flex;flex-direction:column;margin-bottom:8px;
  animation:pop .2s ease;position:relative;
}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.other{align-self:flex-start}
.who{font-size:11px;color:var(--dim);margin-bottom:3px;padding:0 6px;display:flex;align-items:center;gap:4px}
.bubble{
  padding:8px 13px;border-radius:15px;font-size:14.5px;line-height:1.45;
  word-break:break-word;background:var(--oth-bubble);color:var(--oth-txt);
  transition:.2s;user-select:none;
}
.msg.me .bubble{background:var(--me-bubble);color:var(--me-txt);box-shadow:var(--glow)}
.msg .time{font-size:10px;color:var(--dim);margin-top:3px;padding:0 6px}
.msg.sel .bubble{outline:2px solid var(--accent)}

/* 消息操作菜单 */
.ctxmenu{
  position:fixed;z-index:500;background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:12px;padding:6px;min-width:150px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
}
[data-theme="tg"] .ctxmenu{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.ctxmenu button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:none;
  background:transparent;color:var(--txt);font-size:13.5px;cursor:pointer;
  border-radius:8px;font-family:inherit;text-align:left;
}
.ctxmenu button:hover{background:var(--bg-input)}
.ctxmenu button.danger{color:var(--danger)}

/* 输入区 */
.inputbar{
  display:flex;align-items:flex-end;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);background:var(--bg-side);backdrop-filter:blur(12px);
}
.inputbar textarea{
  flex:1;resize:none;background:var(--bg-input);color:var(--txt);
  border:none;border-radius:20px;padding:11px 16px;font-size:15px;
  max-height:120px;font-family:inherit;outline:none;
}
.inputbar textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.send{
  width:44px;height:44px;border:none;border-radius:50%;flex-shrink:0;cursor:pointer;color:#fff;
  background:var(--me-bubble);box-shadow:var(--glow);font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.send:active{transform:scale(.9)}

/* ---------- 登录/注册页 ---------- */
.authpage{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:100;padding:24px;background:var(--bg);background-image:var(--bg-image,none);
}
.authcard{
  width:100%;max-width:380px;padding:34px 30px;border-radius:22px;
  background:var(--bg-elev);border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.4);animation:pop .3s ease;
}
[data-theme="neon"] .authcard{background:rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.authcard h1{
  font-size:26px;text-align:center;margin-bottom:6px;font-weight:800;
  background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.authcard p.sub{text-align:center;color:var(--dim);font-size:12.5px;margin-bottom:24px}
.authcard input{
  width:100%;padding:13px 16px;margin-bottom:12px;border-radius:13px;font-size:15px;
  background:var(--bg-input);color:var(--txt);border:1px solid transparent;outline:none;font-family:inherit;
}
.authcard input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.btn{
  width:100%;padding:13px;border:none;border-radius:13px;font-size:15px;font-weight:700;
  cursor:pointer;color:#fff;background:var(--me-bubble);box-shadow:var(--glow);font-family:inherit;
  transition:.15s;
}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--border-strong);box-shadow:none;margin-top:10px;color:var(--dim)}
.btn.danger{background:linear-gradient(135deg,#ff3b5c,#c81e4a);box-shadow:none}
.tip{text-align:center;font-size:12.5px;margin-top:12px;min-height:16px;color:var(--danger)}
.tip.ok{color:var(--accent)}

/* 登录/注册页右上角主题小方块 */
.corner-theme{
  position:absolute;top:18px;right:18px;display:flex;gap:8px;z-index:110;
}
.ct-btn{
  width:22px;height:22px;border-radius:7px;border:2px solid transparent;
  cursor:pointer;padding:0;transition:.18s;opacity:.85;
}
.ct-btn:hover{transform:scale(1.12);opacity:1}
.ct-btn.on{border-color:var(--txt);opacity:1;box-shadow:0 0 0 2px var(--accent)}

/* 主题选择器（小方块） */
.theme-dots{display:flex;gap:10px;padding:2px 12px 12px}
.theme-dots button{
  width:30px;height:30px;border-radius:9px;cursor:pointer;padding:0;
  border:2px solid transparent;position:relative;transition:.18s;background:none;
}
.theme-dots button:hover{transform:scale(1.08)}
.theme-dots button.on{border-color:var(--txt);box-shadow:0 0 0 2px var(--accent)}

/* ---------- 封禁页 ---------- */
.banpage{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.bancard{
  width:100%;max-width:390px;padding:36px 30px;border-radius:22px;text-align:center;
  background:var(--bg-elev);border:1px solid rgba(255,59,92,.5);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 50px rgba(255,59,92,.3);
}
.banicon{font-size:52px;margin-bottom:14px}
.bancard h2{font-size:22px;color:var(--txt);margin-bottom:8px}
.bancard .reason{color:var(--danger);font-size:15px;font-weight:700;margin:14px 0 6px}
.bancard .meta{color:var(--dim);font-size:12.5px;margin-bottom:20px;line-height:1.7}
.bancard .who{color:var(--txt);font-size:13.5px;margin-bottom:10px}

/* ---------- 移动端 ---------- */
.mob-back{display:none}
@media(max-width:768px){
  .sidebar{width:100%;border-right:none}
  .layout.show-chat .sidebar{display:none}
  .layout:not(.show-chat) .main{display:none}
  .mob-back{display:flex}
}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{
  width:100%;max-width:420px;max-height:82vh;overflow-y:auto;border-radius:20px;
  background:var(--bg-elev);border:1px solid var(--border-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.5);animation:pop .25s ease;
}
[data-theme="neon"] .modal-card{background:rgba(24,14,36,.96);backdrop-filter:blur(20px)}
[data-theme="tg"] .modal-card{background:#fff}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px;font-weight:800;font-size:16px}
.pick-list{max-height:280px;overflow-y:auto;padding:0 10px 10px}
.pick-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;transition:.15s}
.pick-row:hover{background:var(--bg-input)}
.avatar.sm{width:38px;height:38px;font-size:14px}
.mini-btn{
  padding:6px 13px;border-radius:9px;border:1px solid var(--border-strong);cursor:pointer;
  background:transparent;color:var(--accent);font-size:12.5px;font-weight:700;font-family:inherit;transition:.18s;
}
.mini-btn:hover{border-color:var(--accent);background:var(--bg-input)}
.mini-btn.danger{color:var(--danger);border-color:rgba(255,59,92,.4)}
.mini-btn.danger:hover{background:rgba(255,59,92,.1)}
.empty{padding:24px;text-align:center;color:var(--dim);font-size:13px}
.picked{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;background:var(--bg-input);font-size:12.5px}
.chip b{cursor:pointer;color:var(--danger)}
.gp-head{padding:10px 16px;font-weight:700;font-size:14px;color:var(--dim);display:flex;gap:6px;align-items:center}
.gp-head span{background:var(--bg-input);padding:1px 9px;border-radius:10px;font-size:12px}
.gp-list{max-height:340px;overflow-y:auto}
.gp-rowm{display:flex;align-items:center;gap:10px;padding:9px 16px;transition:.15s}
.gp-rowm:hover{background:var(--bg-input)}
.gp-rowm .it-main{flex:1;min-width:0}
.gp-addbar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.gp-addbar input{flex:1;padding:10px 13px;border-radius:11px;background:var(--bg-input);color:var(--txt);border:none;outline:none;font-family:inherit;font-size:13.5px}