:root {
  color-scheme: light;
  --green:#26a17b; --strong:#147b5b; --mint:#e6f5ef; --pale:#f4faf8; --surface:#fff;
  --page:#f2f7f5; --rail:#f8fbfa; --canvas:#f8faf9; --line:#e5ece8; --ink:#192d26;
  --muted:#667970; --quiet:#71847a; --bubble:#dcf3e9; --danger:#b63438; --focus:#178963;
  font-family:"Instrument Sans","Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:14px; background:var(--page); color:var(--ink);
}
:root.dark {
  color-scheme:dark;
  --green:#48c7a0; --strong:#75dfbd; --mint:#203e34; --pale:#1a3028; --surface:#15261f;
  --page:#102019; --rail:#172b23; --canvas:#13251e; --line:#284138; --ink:#e6f5ee;
  --muted:#adc3b9; --quiet:#9db4a9; --bubble:#224c3d; --danger:#ff9a9a; --focus:#75dfbd;
}
*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none!important }
body { margin:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden }
button,input,textarea { font:inherit }
button { color:inherit; border:0; padding:0; cursor:pointer; background:transparent }
button:disabled { opacity:.48; cursor:not-allowed }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:3px }
a { color:var(--strong) }
h1,h2,h3,p { margin:0 }
svg { flex:none; vertical-align:middle }
.topbar { height:75px; flex:none; padding:0 34px; display:grid; grid-template-columns:1fr minmax(220px,410px) 1fr; align-items:center; gap:18px }
.brand { display:flex; align-items:center; gap:11px; justify-self:start; font-size:25px; font-weight:800; letter-spacing:.02em }
.brand-mark { width:39px; height:39px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#3ac79a,#198c68); border-radius:12px; box-shadow:0 4px 10px #208a6430 }
.brand-dot { color:var(--green); margin-left:2px }
.global-search { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; color:var(--muted); text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:13px }
.global-search:hover { border-color:var(--green) }
kbd { margin-left:auto; font-family:inherit; font-size:11px; padding:2px 6px; border:1px solid var(--line); border-radius:5px; background:var(--canvas); color:var(--muted); white-space:nowrap }
.top-right { display:flex; justify-content:flex-end; align-items:center; gap:19px }
.connection { display:flex; align-items:center; white-space:nowrap; gap:7px; color:var(--muted); font-size:12px }
.connection i,.presence { width:7px; height:7px; border-radius:50%; background:#bd8b34 }
.connection.connected i,.presence.online { background:#27a67d }
.account { display:flex; align-items:center; gap:8px; font-weight:650; white-space:nowrap }
.account > svg { color:var(--muted) }
.workspace { flex:1; min-height:0; display:grid; grid-template-columns:72px 312px minmax(0,1fr) 280px; margin:0 28px 26px; background:var(--surface); border:1px solid var(--line); border-radius:19px; overflow:hidden; box-shadow:0 13px 39px #184a3510 }
.workspace.no-details { grid-template-columns:72px 312px minmax(0,1fr) }
.rail { background:var(--rail); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:12px; padding:19px 0 16px }
.rail-item { display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:54px; min-height:53px; color:var(--muted); border-radius:11px; font-size:10px; font-weight:600 }
.rail-item:hover,.icon-button:hover,.text-button:hover,.item-action:hover { background:var(--pale); color:var(--strong) }
.rail-item.active,.icon-button.selected { color:var(--strong); background:var(--mint) }
.rail-item b { position:absolute; top:3px; right:6px; width:8px; height:8px; background:var(--green); border:2px solid var(--rail); border-radius:50% }
.rail-bottom { margin-top:auto }
.sidebar,.chat,.details { min-width:0; min-height:0; display:flex; flex-direction:column }
.sidebar { border-right:1px solid var(--line); background:var(--surface) }
.sidebar-top { padding:23px 17px 13px }
.list-title,.chat-head,.details-head,.compose-toolbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px }
.list-title { margin:0 2px 18px }
.list-title h1 { font-size:24px; font-weight:790; letter-spacing:.01em }
.list-title h1 small { color:var(--strong); font-size:12px; font-weight:650; margin-left:8px }
.icon-button { width:35px; height:35px; display:inline-grid; place-items:center; color:var(--muted); border-radius:8px; flex:none }
.icon-button.add { width:33px; height:33px; color:#fff; background:#208967; box-shadow:0 3px 6px #208a6425 }
.icon-button.add:hover,.primary:hover { background:#147b5b }
.search-field { display:flex; align-items:center; gap:9px; padding:0 11px; min-height:39px; background:var(--canvas); border:1px solid var(--line); color:var(--muted); border-radius:8px }
.search-field:focus-within { border-color:var(--green); outline:1px solid var(--green) }
.search-field input { width:100%; border:0; outline:0!important; background:none; color:var(--ink); font-size:13px; padding:8px 0 }
::placeholder { color:var(--quiet) }
.filters { display:flex; gap:6px; margin-top:13px }
.filter { padding:6px 11px; border-radius:7px; color:var(--muted); font-size:12px; white-space:nowrap }
.filter:hover { background:var(--pale) }
.filter.active { background:var(--mint); color:var(--strong); font-weight:700 }
.sidebar-scroll { flex:1; min-height:0; overflow:auto; padding:0 10px 16px; scrollbar-width:thin }
.list-section { padding:9px 10px 6px; color:var(--muted); font-size:11px; font-weight:650 }
.conversation { width:100%; display:flex; align-items:center; gap:11px; position:relative; min-height:69px; padding:10px; border-radius:10px; text-align:left }
.conversation:hover { background:var(--pale) }
.conversation.active { background:var(--mint) }
.conversation.active::before { content:""; position:absolute; left:0; height:30px; width:3px; border-radius:4px; background:var(--green) }
.avatar { width:41px; height:41px; flex:none; display:inline-grid; place-items:center; border-radius:12px; font-size:15px; font-weight:750; line-height:1; position:relative; background:linear-gradient(145deg,var(--av1),var(--av2)); color:var(--avtext); box-shadow:inset 0 0 0 1px #00000007; vertical-align:middle }
.avatar svg { width:53%; height:53% }
.avatar.jade { --av1:#ccece0; --av2:#a6dac8; --avtext:#196c52 }
.avatar.peach { --av1:#f7dfd3; --av2:#edc3af; --avtext:#853e2b }
.avatar.blue { --av1:#dceafe; --av2:#b8d2f3; --avtext:#355a98 }
.avatar.purple { --av1:#e9dff9; --av2:#d9c9f1; --avtext:#64448b }
.avatar.gold { --av1:#f7ebd2; --av2:#ecd6a7; --avtext:#795819 }
.avatar.pink { --av1:#fae2e9; --av2:#f0c9d7; --avtext:#8a3b57 }
.avatar.slate { --av1:#e1e8ed; --av2:#c9d7e0; --avtext:#415966 }
.avatar.small { width:31px; height:31px; border-radius:9px; font-size:12px }
.avatar.large { width:62px; height:62px; border-radius:19px; font-size:22px }
.avatar .presence { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border:2px solid var(--surface) }
.conversation-copy,.conversation-name,.contact-copy,.detail-name { display:block; min-width:0; flex:1 }
.conversation-name,.conversation-preview,.contact-copy strong,.contact-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.conversation-name { font-weight:710; font-size:13px }
.conversation-preview { color:var(--muted); display:block; margin-top:5px; font-size:12px }
.conversation-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:38px; align-self:stretch; justify-content:center; color:var(--quiet); font-size:10px }
.meta-icons { display:flex; align-items:center; gap:5px; height:18px }
.unread { min-width:17px; height:17px; padding:1px 4px; border-radius:10px; background:#208967; color:#fff; display:inline-grid; place-items:center; font-size:10px }
.chat { background:var(--canvas); position:relative }
.chat-head { min-height:70px; padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line); flex:none }
.chat-person,.chat-actions { display:flex; align-items:center; gap:10px; min-width:0 }
.chat-actions { gap:4px }
.chat-person h2 { font-size:16px; font-weight:760; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chat-person p { color:var(--muted); font-size:11px; margin-top:4px }
.mobile-back { display:none }
.thread { flex:1; min-height:0; overflow:auto; padding:19px clamp(15px,2.2vw,35px); scrollbar-width:thin; background-image:radial-gradient(#26845c12 .7px,transparent .7px); background-size:19px 19px }
.date-divider { display:flex; justify-content:center; align-items:center; gap:10px; margin:5px 0 23px; color:var(--quiet); font-size:11px }
.date-divider::before,.date-divider::after { content:""; width:36px; height:1px; background:var(--line) }
.msg { display:flex; gap:9px; margin-bottom:15px; scroll-margin:18px; align-items:flex-start }
.msg.compact { margin-top:-7px }
.msg.mine { justify-content:flex-end }
.msg .avatar,.avatar-spacer { margin-top:2px; width:30px; height:30px; border-radius:9px; font-size:11px }
.avatar-spacer { flex:none }
.msg-body { min-width:0; max-width:min(81%,540px); display:flex; flex-direction:column; align-items:flex-start }
.msg.mine .msg-body { align-items:flex-end }
.sender { color:var(--muted); font-size:11px; font-weight:600; margin:0 0 5px 2px }
.bubble { max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:4px 13px 13px; padding:9px 12px; color:var(--ink); line-height:1.57; box-shadow:0 1px 2px #172d2010 }
.mine .bubble { background:var(--bubble); border-color:transparent; border-radius:13px 4px 13px 13px }
.bubble-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px }
.bubble.media { padding:4px }
.bubble.media .bubble-text { padding:4px 8px }
.bubble.recalled { color:var(--muted); font-style:italic }
.msg.flash .bubble { outline:2px solid var(--green); outline-offset:2px }
.media-button { display:block; border-radius:8px; overflow:hidden; max-width:100%; position:relative }
.media-button img { width:250px; aspect-ratio:1.88; object-fit:cover; max-width:100%; display:block; background:var(--mint) }
.media-button:hover img { filter:brightness(.94) }
.attachment { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; padding:3px 6px }
.attachment svg { color:var(--strong) }
.attachment span { overflow-wrap:anywhere; min-width:0 }
.bubble audio,.bubble video { max-width:100%; display:block }
.bubble video { width:280px }
.msg-meta { display:flex; gap:5px; align-items:center; font-size:10px; margin-top:4px; color:var(--quiet) }
.msg-meta .receipt { color:var(--strong) }
.message-actions { display:flex; align-items:center; opacity:0; gap:1px; flex:none; align-self:center; transition:opacity .12s }
.message-actions .icon-button { width:28px; height:28px }
.msg:hover .message-actions,.msg:focus-within .message-actions { opacity:1 }
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.reaction { padding:1px 6px; border-radius:10px; border:1px solid var(--line); color:var(--muted); font-size:11px; background:var(--surface) }
.reaction.selected { border-color:#71bda3; background:var(--mint); color:var(--strong) }
.quote { display:block; padding:4px 8px; border-left:2px solid var(--green); border-radius:3px; margin-bottom:5px; background:#26a17b14; font-size:11px; color:var(--muted); text-align:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.quote-label { color:var(--strong); font-weight:650 }
.compose-area { padding:0 19px 6px; background:var(--canvas); flex:none }
.composer { padding:8px 10px 8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 14px #2344350b }
.composer:focus-within { border-color:#76bda5 }
.composer textarea { display:block; width:100%; min-height:44px; max-height:95px; padding:8px 5px; resize:vertical; border:0; outline:none!important; color:var(--ink); background:none; font-size:13px }
.compose-toolbar { gap:6px }
.compose-toolbar .icon-button { width:32px; height:33px }
.compose-tools { display:flex; gap:2px }
.send-hint { color:var(--quiet); font-size:10px; margin-left:auto; white-space:nowrap }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#208967; color:white; padding:8px 13px; border-radius:8px; font-weight:690; font-size:13px }
.send { min-width:76px; min-height:34px }
.typing { height:19px; padding:4px 4px 0; color:var(--quiet); font-size:10px }
.compose-notice { display:flex; align-items:center; gap:8px; min-height:27px; margin:0 2px 3px; color:var(--muted); background:var(--pale); padding:2px 8px; border-radius:6px; font-size:11px }
.compose-notice span { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.compose-notice .icon-button { width:24px; height:24px }
.details { background:var(--surface); border-left:1px solid var(--line); overflow:auto; scrollbar-width:thin }
.details-head { min-height:59px; padding:0 16px 0 18px; flex:none; border-bottom:1px solid var(--line) }
.details-head h2 { font-size:14px; font-weight:750 }
.details-head .icon-button { width:29px; height:29px }
.detail-intro { display:grid; justify-items:center; gap:7px; padding:20px 14px 16px; text-align:center }
.detail-intro h3 { font-size:17px; font-weight:770; overflow-wrap:anywhere }
.detail-intro .avatar { margin-bottom:2px }
.detail-intro p { color:var(--muted); font-size:11px }
.detail-shortcuts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 15px 16px }
.detail-shortcuts button { display:grid; justify-items:center; gap:5px; padding:7px 1px; color:var(--muted); font-size:10px; border-radius:8px; white-space:nowrap }
.detail-shortcuts button:hover,.detail-shortcuts button.selected { color:var(--strong); background:var(--pale) }
.detail-shortcuts button span:first-child { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:var(--pale); color:var(--strong) }
.detail-section { border-top:1px solid var(--line); padding:13px 16px }
.section-heading { font-weight:730; font-size:12px; margin-bottom:9px }
.section-heading small { color:var(--muted); font-weight:500; margin-left:3px }
.text-button { display:inline-flex; align-items:center; gap:4px; padding:5px 6px; margin:-4px -5px -4px 0; color:var(--strong); font-size:11px; border-radius:5px }
.announcement { background:var(--pale); border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--muted); line-height:1.65; font-size:11px; overflow-wrap:anywhere }
.members { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px 4px }
.member { text-align:center; min-width:0; color:var(--muted); font-size:10px }
.member span:last-child { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px }
.shared-item { display:flex; text-align:left; align-items:center; gap:8px; width:100%; border-radius:7px; padding:3px }
.shared-item:hover { background:var(--pale) }
.shared-item img,.shared-item > i { width:40px; height:34px; flex:none; object-fit:cover; border-radius:6px; background:var(--mint); color:var(--strong); display:grid; place-items:center }
.shared-item span { font-size:11px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.shared-item > svg { margin-left:auto; color:var(--quiet) }
.empty { display:grid; justify-items:center; align-content:center; gap:8px; padding:25px 16px; text-align:center; color:var(--muted); font-size:12px; line-height:1.55 }
.empty.full { min-height:100% }
.empty h2 { color:var(--ink); font-size:17px }
.empty-mark { display:grid; place-items:center; width:53px; height:53px; background:var(--mint); border-radius:16px; color:var(--strong); margin-bottom:5px }
.contact-row { display:flex; align-items:center; gap:9px; min-height:51px; padding:6px 8px; border-radius:8px; width:100%; text-align:left }
button.contact-row:hover { background:var(--pale) }
.contact-copy strong { display:block; font-weight:670; font-size:13px }
.contact-copy small { display:block; font-size:11px; color:var(--muted); margin-top:3px }
.muted { color:var(--muted); font-size:12px; line-height:1.55 }
.secondary,.danger,.item-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 9px; border-radius:7px; background:var(--pale); color:var(--strong); font-size:12px; border:1px solid var(--line) }
.danger { color:var(--danger) }
.load-more { display:block; margin:0 auto 10px; padding:5px 9px; background:var(--surface); color:var(--strong); border:1px solid var(--line); border-radius:6px; font-size:11px }
dialog { color:var(--ink); width:min(450px,calc(100vw - 30px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:0 20px 65px #0d2c2540; overscroll-behavior:contain }
dialog::backdrop { background:#0e2b235c; backdrop-filter:blur(2px) }
dialog.wide { width:min(710px,calc(100vw - 30px)) }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:11px 16px }
.dialog-head h2 { font-size:16px; overflow-wrap:anywhere }
.dialog-body { padding:15px 17px 18px }
.dialog-body > * + * { margin-top:10px }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px }
.dialog-form { display:grid; gap:12px }
.dialog-form label { display:grid; gap:5px; font-size:12px; font-weight:650 }
.dialog-form input:not([type=checkbox]):not([type=radio]),.dialog-form textarea { width:100%; padding:9px 10px; color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:7px }
.dialog-form textarea { resize:vertical; min-height:65px }
.dialog-form fieldset { border:1px solid var(--line); border-radius:7px; margin:0; padding:6px 10px }
.dialog-form label.checkline { display:flex; align-items:center; gap:8px; padding:5px 0 }
input[type=checkbox],input[type=radio] { accent-color:#208967 }
.menu { display:grid; gap:4px }
.menu button { text-align:left; display:flex; gap:10px; align-items:center; padding:9px; border-radius:7px; color:var(--ink) }
.menu button:hover { background:var(--pale); color:var(--strong) }
.menu button svg { color:var(--strong) }
.emoji-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:6px }
.emoji-picker button { padding:7px; border-radius:8px; background:var(--pale); font-size:21px }
.emoji-picker button:hover { background:var(--mint) }
.search-results { max-height:45vh; overflow:auto }
.search-result { display:grid; gap:4px; text-align:left; width:100%; padding:9px 8px; border-bottom:1px solid var(--line) }
.search-result:hover { background:var(--pale) }
.search-result span { color:var(--muted); font-size:11px }
.search-result strong { font-weight:600; overflow-wrap:anywhere }
.lightbox { display:block; width:100%; max-height:68dvh; object-fit:contain; border-radius:8px; background:var(--canvas) }
.toasts { position:fixed; right:23px; bottom:20px; z-index:10; display:grid; gap:6px; pointer-events:none }
.toast { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); color:var(--ink); padding:10px 13px; border-radius:8px; box-shadow:0 5px 18px #0e2c2226; max-width:calc(100vw - 46px); overflow-wrap:anywhere }
.toast.fail { border-left-color:var(--danger) }
.call-body { text-align:center }
.call-media { position:relative; background:var(--canvas); border-radius:10px; overflow:hidden }
.call-media video { width:100%; aspect-ratio:16 / 9; object-fit:contain; display:block }
.call-media video.local { position:absolute; right:6px; bottom:6px; width:26%; border:1px solid var(--line); border-radius:6px; object-fit:cover }
.call-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px }
@media(max-width:1160px) {
  .workspace { margin:0 17px 17px; grid-template-columns:62px 268px minmax(0,1fr) 238px }
  .workspace.no-details { grid-template-columns:62px 268px minmax(0,1fr) }
  .rail-item { width:46px }
  .topbar { padding:0 21px; height:65px }
}
@media(max-width:935px) {
  .workspace,.workspace.no-details { grid-template-columns:57px 238px minmax(0,1fr); position:relative }
  .details { position:absolute; z-index:2; right:0; top:0; bottom:0; width:min(268px,100%); box-shadow:-8px 0 26px #183d2920 }
  .chat-head { padding:0 12px }
  .compose-area { padding-left:11px; padding-right:11px }
  .message-actions { opacity:1 }
}
@media(max-width:660px) {
  .topbar { grid-template-columns:1fr auto auto; gap:9px; height:54px; padding:0 11px }
  .brand { font-size:20px; gap:6px }
  .brand-mark { width:32px; height:32px; border-radius:9px }
  .global-search { padding:0 7px; height:32px }
  .global-search kbd,.global-search span:nth-child(2),.account > span:not(.avatar),.account > svg,.connection { display:none }
  .workspace,.workspace.no-details { margin:0; border:0; border-radius:0; grid-template-columns:54px minmax(0,1fr); border-top:1px solid var(--line) }
  .sidebar { border:0 }
  .workspace .chat { display:none }
  .workspace.mobile-chat { display:flex }
  .workspace.mobile-chat .rail,.workspace.mobile-chat .sidebar { display:none }
  .workspace.mobile-chat .chat { display:flex; flex:1 }
  .mobile-back { display:inline-grid; width:29px }
  .chat-head { min-height:56px; gap:3px; padding:0 6px }
  .chat-person { gap:5px }
  .chat-person .avatar { width:34px; height:34px }
  .chat-actions .icon-button { width:29px }
  .thread { padding:14px 10px }
  .msg-body { max-width:calc(100% - 69px) }
  .compose-area { padding-bottom:max(3px,env(safe-area-inset-bottom)) }
  .send-hint { display:none }
  .sidebar-top { padding:15px 13px 10px }
  .list-title { margin-bottom:12px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important }
}

.topbar { background:linear-gradient(112deg,#3ac79a 0%,#2fb188 55%,#bce9d9 100%); color:#103c2e; }
.brand-mark { background:#116747; box-shadow:0 4px 12px #145b4140 }
.brand-dot { color:#0c6043 }
.topbar .connection,.topbar .account > svg { color:#164b39 }
.topbar .connection i { background:#9d5f1c }
.topbar .connection.connected i { background:#137550 }
.topbar .global-search { background:#f7fcfa; border-color:#ffffff80; color:#345e50 }
.topbar kbd { background:#eff9f5; color:#345e50; border-color:#d7ebe2 }
.workspace { margin-top:16px }
.rail { background:linear-gradient(180deg,#f7fcfa 15%,#eaf7f1 100%) }
.conversation.active { background:linear-gradient(100deg,#d3ebe4,#eef8f3) }
.details { background:linear-gradient(180deg,var(--pale),var(--surface) 43%) }
.avatar > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit }
.avatar .presence { z-index:1 }
.chat-wallpaper { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.7; pointer-events:none }
.chat-wallpaper.photo-wallpaper { opacity:.24 }
.chat .thread,.chat .chat-head,.chat .compose-area { position:relative }
.chat .thread { padding-block:15px }
.chat .thread .date-divider { margin-bottom:17px }
.chat .thread .msg { margin-bottom:12px }
.chat .compose-area { background:linear-gradient(0deg,var(--canvas),transparent) }
.chat .date-divider { color:var(--muted) }
.chat .empty h2,.chat .empty p { background:var(--pale); border-radius:6px; padding:2px 6px }
.msg.mine .bubble { border-color:#b9e4d3 }
.appearance-fields { min-inline-size:0; padding:10px!important }
[data-avatar-preview] { object-fit:contain; margin-block:4px }
.avatar-choices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; padding:3px 0 9px }
.avatar-choices label { position:relative; display:grid; gap:0; cursor:pointer; aspect-ratio:1; min-width:0 }
.avatar-choices input,.wallpaper-choices input { position:absolute; width:1px; height:1px; opacity:0 }
.avatar-choices img,.avatar-text { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:2px solid transparent }
.avatar-text { display:grid; place-items:center; background:var(--mint); color:var(--strong); font-size:18px }
.avatar-choices input:checked + *, .wallpaper-choices input:checked + * { outline:2px solid var(--focus); outline-offset:1px }
.avatar-choices input:focus-visible + *, .wallpaper-choices input:focus-visible + * { outline:2px dashed var(--focus); outline-offset:3px }
.image-input { margin-top:8px }
.image-hint { color:var(--muted); font-size:11px; margin-top:5px }
.wallpaper-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:3px 0 9px }
.wallpaper-choices label { cursor:pointer; text-align:center; min-width:0 }
.wallpaper-swatch { display:block; aspect-ratio:1.7; background:var(--pale); overflow:hidden; border:1px solid var(--line); border-radius:7px }
.wallpaper-swatch img { width:100%; height:100%; object-fit:cover; display:block }
.portal-links { display:grid; gap:7px }
.portal-links a { text-decoration:none; background:var(--pale); padding:10px; border-radius:8px; font-weight:650 }
.dark .topbar { background:linear-gradient(112deg,#173c2e,#215744); color:#e4f5ed }
.dark .brand-dot,.dark .topbar .connection,.dark .topbar .account > svg { color:#9ee5cc }
.dark .topbar .global-search,.dark .topbar kbd { background:#1b342b; color:#bcdfd1; border-color:#376455 }
.dark .rail { background:linear-gradient(180deg,#1b3329,#162a22) }
.dark .conversation.active { background:linear-gradient(100deg,#244a3d,#20392f) }
.dark .chat-wallpaper { opacity:.16 }
.dark .msg.mine .bubble { border-color:#346351 }
@media(max-width:660px) {
  .workspace { margin-top:0 }
}

.workspace { margin:0; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none }
.language-select { min-height:32px; width:auto; max-width:105px; padding:4px 6px; color:#153e30; background:#f7fcfa; border:1px solid #ffffffa0; border-radius:7px; font:inherit; font-size:11px }
.dark .language-select { background:#1b342b; color:#c1e8d7; border-color:#376455 }
.dialog-feedback { margin:0 0 9px; padding:7px 10px; border-radius:7px; border:1px solid var(--line); color:var(--strong); background:var(--pale); overflow-wrap:anywhere }
.dialog-feedback.fail { color:var(--danger) }
.security-secret,.recovery-grid { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--pale); border:1px solid var(--line); border-radius:8px; padding:10px }
.security-secret code,.recovery-grid code { user-select:all; overflow-wrap:anywhere; font-size:12px }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); text-align:center; row-gap:11px }
.security-qr { display:block; width:min(225px,100%); height:auto; margin:9px auto; border:1px solid #d5e8df; border-radius:10px; background:white; image-rendering:pixelated }
.security-manual { padding:7px 0; color:var(--strong); font-size:12px }
.security-manual summary { cursor:pointer; padding-bottom:5px }
.security-manual p { margin:3px 0 7px }
.support-subject { margin-top:13px }
.batch-bar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 16px; min-height:55px; border-top:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:12px }
.chat.is-selecting .compose-area { display:none }
.batch-check { align-self:center; width:19px; height:19px; display:grid; place-items:center; border:1px solid #79aa97; border-radius:6px; flex:none; background:var(--surface) }
.batch-check.selected { background:#208967; color:#fff; border-color:#208967 }
.msg.mine .batch-check { margin-right:auto }
.batch-picked .bubble { outline:1px solid var(--green) }
.dialog-form select { min-width:0; width:100%; padding:8px; color:var(--ink); background:var(--pale); border:1px solid var(--line); border-radius:7px; font:inherit }
.translation-text { padding:9px 11px; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--pale); max-height:24vh; overflow:auto }
.translation-languages { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.translation-languages select { min-width:0; width:100%; padding:6px; color:var(--ink); background:var(--pale); border:1px solid var(--line); border-radius:7px; font:inherit }
.chat.drag-target .thread,.staff-chat.drag-target .staff-messages { outline:2px dashed var(--focus); outline-offset:-8px }
.favorite-row { display:flex; gap:8px; align-items:center }
.favorite-row .search-result { min-width:0 }
.favorite-row > button:last-child { flex:none }
@media(max-width:660px) {
  .top-right { gap:6px }
  .language-select { max-width:88px; font-size:10px; padding-inline:3px }
}
.support-avatar-image { object-fit:cover; border-radius:8px; flex:none; }