:root{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;color:#263036;background:#f7f8fa;font-synthesis:none;--accent:#268778;--muted:#8b939a;--line:#e9edf0}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button,input{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}h1,h2,p{margin:0}.logo{width:34px;height:34px;border-radius:10px;background:#e5f1ee;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:24px;font-weight:700;letter-spacing:-5px;padding-right:5px}.logo span{color:#74b6c8;font-size:20px}.logo.large{width:64px;height:64px;font-size:42px;border-radius:20px;margin-bottom:24px}.logo.large span{font-size:32px}.login{min-height:100dvh;display:grid;place-items:center;padding:28px}.login form{width:min(100%,360px)}.login h1{font-size:30px;letter-spacing:-1px}.login h1 span,.brand h1 span{font-weight:400;color:var(--muted);font-size:.66em;letter-spacing:1px;margin-left:8px}.login p{color:#7f898e;margin:12px 0 42px}.login label{display:block;font-size:13px;margin-bottom:10px}.login input{width:100%;padding:16px;border:1px solid #dbe3e4;border-radius:12px;background:white;font-size:14px}.primary{width:100%;background:var(--accent);color:white;padding:16px;border-radius:12px;margin-top:14px;display:flex;justify-content:space-between}.login .error{color:#bd5555;margin:16px 0;min-height:20px;font-size:13px}.login small{color:var(--muted);font-size:12px;line-height:1.7}main{display:grid;grid-template-columns:350px minmax(0,1fr);height:100dvh;max-width:1600px;margin:auto;background:white;border-inline:1px solid var(--line)}.sidebar{display:flex;flex-direction:column;min-height:0;background:#fafbfc;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;padding:27px 24px 23px;gap:10px}.brand h1{font-size:21px;flex:1;white-space:nowrap}.icon{height:42px;min-width:42px;display:inline-grid;place-items:center;font-size:25px;color:#7b878c;border-radius:12px}.icon:hover{background:#e9efed;color:var(--accent)}.brand .icon{font-size:21px}.list-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 26px 18px}.list-heading h2{font-size:26px;font-weight:650}.list-heading span{font-size:12px;color:var(--muted)}.search{margin:0 22px;display:flex;align-items:center;background:#eef1f3;border-radius:10px;padding:0 12px;gap:8px;height:43px}.search span{font-size:24px;color:var(--muted)}input[type=search]{width:100%;min-width:0;background:transparent;border:0;outline:none;font-size:14px;color:inherit}.filters{display:flex;gap:6px;padding:18px 22px 13px}.filters button{font-size:13px;padding:7px 12px;border-radius:8px;color:#8b959a}.filters button.active{background:#e2efeb;color:#287c6c;font-weight:600}.session-list{overflow:auto;flex:1;overscroll-behavior:contain;padding:0 10px}.session{width:100%;display:flex;gap:13px;align-items:center;padding:17px 13px;text-align:left;border-radius:12px;transition:background .15s}.session:hover{background:#f0f3f3}.session.selected{background:#eaf2ef}.avatar{height:46px;width:46px;flex-shrink:0;border-radius:15px;display:grid;place-items:center;font-size:17px;font-weight:600;background:#e9efed;color:#608778;overflow:hidden}.avatar.tone1{background:#eaeef7;color:#7a87a8}.avatar.tone2{background:#f4ebe3;color:#a78a6c}.avatar.tone3{background:#edeaf5;color:#9484a7}.avatar.tone4{background:#e5f1f3;color:#6b939c}.session-info{min-width:0;flex:1}.session-line{display:flex;gap:9px;align-items:center;justify-content:space-between}.session-name{font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}.session time{font-size:10px;white-space:nowrap;color:#99a0a5}.session-sub{margin-top:7px;font-size:12px;color:#939da1;display:flex;justify-content:space-between}.badge{font-size:10px;min-width:18px;padding:1px 5px;border-radius:9px;background:#91aaa1;color:white;text-align:center}.connection{display:flex;align-items:center;gap:8px;padding:9px 23px;border-top:1px solid var(--line);font-size:11px;color:#8b979b}.connection i{width:6px;height:6px;background:#c1c7c9;border-radius:50%}.connection i.online{background:#54a28a}.connection .icon{margin-left:auto;font-size:21px}.chat{min-width:0;min-height:0;position:relative}.welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9aa3a7}.welcome h2{color:#56656b;font-size:23px;font-weight:500;margin:0 0 12px}.welcome p{font-size:14px}.welcome small{font-size:11px;margin-top:50px;color:#adb6ba}#conversation{height:100%;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:13px;padding:22px 30px;border-bottom:1px solid var(--line)}.chat-header .avatar{height:42px;width:42px;font-size:15px}.chat-title{flex:1;min-width:0}.chat-title h2{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-title span{font-size:11px;color:#95a0a5;display:block;margin-top:5px}.back{display:none}.messages{flex:1;overflow:auto;padding:20px 32px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d8e2df transparent}.load-more{display:block;font-size:12px;color:#7b9690;padding:10px 20px;margin:0 auto 24px;border-radius:18px;background:#f4f7f6}.day{font-size:11px;color:#a4adb1;text-align:center;margin:20px 0 24px}.message{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px;animation:appear .18s ease}.message .avatar{height:34px;width:34px;border-radius:11px;font-size:12px}.message-body{max-width:min(76%,680px);min-width:0}.sender{font-size:11px;color:#96a0a4;margin-bottom:6px}.bubble{display:table;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f3f5;padding:12px 16px;border-radius:3px 17px 17px 17px;font-size:15px;line-height:1.7}.message.self{flex-direction:row-reverse}.self .sender{text-align:right}.self .bubble{background:#e1eee8;border-radius:17px 3px 17px 17px}.message-time{font-size:10px;color:#b0b8bc;margin-top:6px}.self .message-time{text-align:right}.quote{padding:8px 12px;border-left:2px solid #a7bdb4;font-size:12px;color:#87958e;background:#f5f8f6;border-radius:4px;margin-top:7px;white-space:pre-wrap;overflow-wrap:anywhere}.attachment{display:block;color:#417e70;text-align:left;font-size:13px;background:#e7efec;padding:11px;border-radius:10px;margin-top:8px}.chat-image{display:block;max-width:100%;max-height:320px;border-radius:12px;cursor:zoom-in;margin-top:8px}.message video,.message audio{max-width:100%;margin-top:8px}.chat-footer{display:flex;justify-content:space-between;border-top:1px solid #f2f4f5;color:#a1aaae;padding:14px 30px;font-size:11px}.message-search{display:flex;padding:12px 24px;gap:10px;border-bottom:1px solid var(--line)}.message-search button{font-size:12px;white-space:nowrap;color:var(--accent)}.banner{font-size:12px;color:#ac7153;padding:12px 24px;background:#fff5ee}.empty{color:#9aa3a7;text-align:center;padding:50px 15px;font-size:13px}.latest{position:absolute;right:25px;bottom:60px;background:white;border:1px solid #d8e5df;box-shadow:0 4px 20px #183e2810;padding:10px 15px;border-radius:20px;font-size:12px;color:var(--accent)}dialog{border:0;background:#fff;border-radius:16px;padding:15px;max-width:94vw;max-height:94dvh}dialog::backdrop{background:#182321bb}dialog img{display:block;max-width:86vw;max-height:80dvh}dialog .icon{margin-left:auto}@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(min-width:1200px){.messages{padding-inline:54px}.chat-header{padding-inline:44px}}@media(max-width:700px){main{display:block;border:0}.sidebar{height:100dvh;border:0}.chat{display:none;height:100dvh}.in-chat .sidebar{display:none}.in-chat .chat{display:block}.brand{padding:20px 22px 15px}.list-heading{padding-top:4px}.session{padding-block:16px}.back{display:grid;font-size:35px;min-width:32px}.chat-header{padding:12px 10px;gap:8px;padding-top:max(12px,env(safe-area-inset-top))}.chat-header .avatar{height:37px;width:37px;border-radius:12px}.chat-title h2{font-size:15px}.chat-header .icon{min-width:34px}.messages{padding:15px 14px}.message{gap:9px;margin-bottom:20px}.message-body{max-width:calc(100% - 62px)}.bubble{font-size:15px;padding:10px 13px}.chat-footer{padding:12px 17px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.connection{padding-bottom:max(9px,env(safe-area-inset-bottom))}.message-search{padding:12px 17px}.session-list{padding-inline:9px}.login p{margin-bottom:36px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.avatar{position:relative}.avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.inline-emoji{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin:0 1px}.chat-image.sticker{width:160px;height:160px;object-fit:contain;border-radius:6px}

/* Tunnel control */
.tunnel-box {
  padding: 10px 14px;
  margin: 8px 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.tunnel-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tunnel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}
.tunnel-badge::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
}
.tunnel-badge.active {
  color: #059669;
}
.tunnel-badge.active::before {
  background: #10b981;
}
.tunnel-switch-btn {
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  background: #07c160;
  color: #fff;
  font-weight: 500;
  transition: opacity 0.2s, background 0.2s;
}
.tunnel-switch-btn:hover {
  opacity: 0.9;
}
.tunnel-switch-btn.active {
  background: #ef4444;
}
.tunnel-switch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tunnel-link-row {
  display: flex;
  align-items: center;
}
.tunnel-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  background: #ffffff;
  color: #2563eb;
  text-decoration: none;
  font-size: 12px;
  font-family: monospace;
  border: 1px dashed #cbd5e1;
}
.tunnel-link:hover {
  background: #f8fafc;
  text-decoration: underline;
}