.message-sender{display:flex;align-items:center;gap:7px;margin:0 0 5px;padding:0 3px;max-width:100%}.message-sender .sender-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--site-accent,#518fce);color:#fff;padding:0;flex:0 0 26px}.sender-avatar img{width:100%;height:100%;object-fit:cover}.message-sender .sender-name{font-size:12px;font-weight:600;color:var(--site-muted,#7991ac)}.bubble-wrap{display:flex;flex-direction:column;position:relative;align-items:flex-start}.bubble-wrap.own{align-items:flex-end}.bubble-wrap .bubble{max-width:100%;min-width:45px}.message-footer{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;padding:3px 2px;background:none}.message-footer time{font-size:10px;color:var(--site-muted,#8c9fb5)}.message-footer .bubble-actions{width:100%;margin:0}.message-footer .reaction-badge{position:static}.reaction-chip,.reaction-picker,.gift-count-detail{border:1px solid var(--site-border,#314358);border-radius:14px;background:var(--site-pane,#172333);color:var(--site-text,#dce8f7);font-size:12px;padding:3px 7px;cursor:pointer}.reaction-list{display:flex;gap:4px}.reaction-chip.red-reaction,.hearted,.reaction-badge.visible{color:#ed3d5e!important}.vip-sender .sender-name,.vip-channel-name{color:var(--vip-color,#d88918)}.vip-name-badge{font-size:9px;border:1px solid var(--vip-color,#d88918);color:var(--vip-color,#d88918);border-radius:5px;padding:2px 4px}.bubble[data-frame=gold]{border:2px solid #c59733}.bubble[data-frame=violet]{border:2px solid #af7de9}.bubble[data-frame=cyan]{border:2px solid #40b7c7}[data-effect=blink] .sender-name,.vip-channel-name[data-effect=blink]{animation:vip-pulse 2.5s ease-in-out infinite}[data-effect=rainbow] .sender-name,.vip-channel-name[data-effect=rainbow]{animation:vip-colors 7s linear infinite}@keyframes vip-pulse{50%{opacity:.6}}@keyframes vip-colors{0%,100%{color:#da566c}33%{color:#539de5}66%{color:#50b89b}}@media(prefers-reduced-motion:reduce){[data-effect] .sender-name,.vip-channel-name{animation:none!important}}.chat-utilities{display:flex;gap:6px;overflow-x:auto;padding:4px 8px;max-width:100%;flex:0 0 auto}.chat-utilities .secondary{font-size:11px;padding:4px 8px;white-space:nowrap}.chat-sticker{display:block;max-width:170px;max-height:170px;object-fit:contain}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:10px}.sticker-grid article{display:flex;flex-direction:column;gap:5px;border:1px solid var(--site-border,#314358);padding:8px;border-radius:10px}.sticker-grid img{width:90px;height:90px;max-width:100%;object-fit:contain}.sticker-grid small{font-size:10px;overflow-wrap:anywhere}#stickerCanvas{display:block;width:min(100%,320px);height:auto;background:#fff;border:1px solid #aaa;border-radius:8px;touch-action:none}.emoji-choices{display:flex;flex-wrap:wrap;gap:10px}.emoji-choices button{font-size:25px;padding:12px;border:1px solid var(--site-border,#314358);border-radius:12px;background:var(--site-pane,#172333);color:var(--site-text,#dce8f7)}.qr-image{background:#fff;padding:16px;border-radius:12px;width:min(100%,300px);margin:0 auto}.qr-image svg{display:block;width:100%;height:auto}.qr-value{overflow-wrap:anywhere;font-size:12px}.bank-qr{display:block;max-width:290px;width:100%;margin:12px auto}.google-login{display:block;text-align:center;margin-top:12px}.unread-notification{border-left:3px solid var(--site-accent,#518fce)}.slow-hint{font-size:10px;color:var(--site-muted,#8199b4)}.offline-banner{padding:10px;text-align:center;font-size:12px}.payment-receipt{margin:4px}.deposit-events p{font-size:12px;padding:8px;border:1px solid var(--site-border,#314358);border-radius:8px}.community-line{overflow-wrap:anywhere}.community-line textarea{max-width:100%}
@media(max-width:720px){html,body{height:100%;overflow:hidden}.app{height:var(--viewport-height,100dvh)!important;min-height:0!important;max-height:var(--viewport-height,100dvh)!important}.chat{min-height:0;overflow:hidden}.chat-head{flex:0 0 auto}.message-scroll{min-height:0;flex:1 1 0!important;overscroll-behavior:contain}.composer-wrap{flex:0 0 auto;position:relative!important;bottom:auto!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important}.composer textarea{font-size:16px;min-width:0;max-height:110px}.modal-overlay{height:var(--viewport-height,100dvh)!important;max-height:var(--viewport-height,100dvh)!important;align-items:center!important}.modal-box{max-height:calc(var(--viewport-height,100dvh) - 20px)}.rail{max-height:var(--viewport-height,100dvh)}.bubble-wrap{max-width:91%}.message-footer .bubble-actions{display:none}.chat-utilities{padding:4px}.chat-utilities .secondary{font-size:10px}.message-sender .sender-name{font-size:11px}.message-sender .sender-avatar{width:23px;height:23px;flex-basis:23px}}
.viewer-watermark{position:absolute;z-index:3;pointer-events:none;max-width:25%;font-size:clamp(12px,2vw,28px);color:white;text-shadow:1px 1px 2px #000;display:flex;flex-direction:column;align-items:center}.viewer-watermark img{max-width:100%;max-height:100px;object-fit:contain}.viewer-watermark[data-position=top-left]{top:24px;left:24px}.viewer-watermark[data-position=top-right]{top:24px;right:24px}.viewer-watermark[data-position=bottom-left]{bottom:80px;left:24px}.viewer-watermark[data-position=bottom-right]{bottom:80px;right:24px}.viewer-watermark[data-position=center]{top:50%;left:50%;transform:translate(-50%,-50%)}
/* Shared surfaces and controls follow the selected palette in both themes. */
:root{--ui-text:#e7eef6;--ui-muted:#aabbd0;--ui-line:#526379;--ui-input:#192838;--ui-button-text:#12283b;--ui-danger:#ffadb4}
:root[data-theme="light"]{--ui-text:#203448;--ui-muted:#52677d;--ui-line:#a6b7c8;--ui-input:#fff;--ui-button-text:#fff;--ui-danger:#a92339;--site-accent:#17699a}
:root[data-theme="light"][data-palette="ocean"]{--site-accent:#17699a}
:root[data-theme="light"][data-palette="violet"]{--site-accent:#7040ac}
:root[data-theme="light"][data-palette="forest"]{--site-accent:#1d704c}
:root[data-theme="light"][data-palette="sunset"]{--site-accent:#994821}
:root[data-theme="light"][data-palette="mono"]{--site-accent:#425966}
#modal .modal-box{width:min(600px,100%);padding:0;background:var(--site-head,#23374b);color:var(--ui-text);border-color:var(--ui-line);border-radius:16px;scrollbar-gutter:stable;overscroll-behavior:contain}
#modal .modal-box>header{position:sticky;top:0;z-index:2;gap:12px;margin:0;padding:16px 20px;background:var(--site-head,#23374b);border-bottom:1px solid var(--ui-line)}
#modalTitle{flex:1;min-width:0;overflow-wrap:anywhere;font-size:19px;line-height:1.35}
#modalBack[hidden]{display:none!important}
#modalBack,#closeModal{width:36px;height:36px;flex-shrink:0;border-radius:9px;color:var(--ui-text);background:transparent;border:1px solid transparent;font-size:25px}
#modalBack:hover,#closeModal:hover{background:var(--site-selected,#315675);border-color:var(--ui-line)}
#modalBody{padding:20px;overflow-wrap:anywhere}
#modalBody h3{font-size:15px;line-height:1.4;margin:24px 0 12px;color:var(--ui-text)}
#modalBody h3:first-child{margin-top:0}
#modalBody p,#modalBody label,#modalBody small{color:var(--ui-muted)}
#modalBody input,#modalBody select,#modalBody textarea{background:var(--ui-input);color:var(--ui-text);border-color:var(--ui-line);min-height:42px;line-height:1.4}
#modalBody input[type=color]{padding:4px;width:64px}
#modalBody input[type=checkbox],#modalBody input[type=radio]{width:18px;min-height:18px;accent-color:var(--site-accent,#68b8f4)}
#modalBody input[type=file]{padding:8px;font-size:13px}
.primary,.welcome button,.composer button,.add{color:var(--ui-button-text)!important}
#modalBody .secondary,.chat-utilities .secondary{background:var(--site-pane,#1d2b3b);color:var(--ui-text);border-color:var(--ui-line);line-height:1.4}
#modalBody .secondary:hover,.chat-utilities .secondary:hover{background:var(--site-selected,#315675)}
#modalBody .modal-actions,#modalBody .account-tools{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:16px 0}
#modalBody .modal-actions>*{max-width:100%}
#modalBody .community-line{gap:10px;flex-wrap:wrap;border-color:var(--ui-line);align-items:center}
#modalBody .community-line>span{flex:1 1 170px}
#modalBody .community-line button{flex:0 1 auto;max-width:100%;white-space:normal}
#modalBody .community-line small{opacity:1;margin-top:4px;line-height:1.5}
#modalBody .wallet-summary,#modalBody .service-card,#modalBody .ticket-reply{background:var(--site-pane,#1d2b3b);border-color:var(--ui-line)}
#modalBody .service-card{padding:14px;min-height:86px;gap:6px;color:var(--ui-text)}
#modalBody .service-card:hover{background:var(--site-selected,#315675)}
#modalBody .service-card small{opacity:1}
#modalBody .wallet-summary h2{font-size:26px;color:var(--ui-text);overflow-wrap:anywhere}
#modalBody form+.modal-actions,#modalBody form+h3{margin-top:24px}
#modalBody .qr-value{background:var(--site-pane,#1d2b3b);border:1px solid var(--ui-line);padding:12px;border-radius:8px;user-select:text}
#modalBody .qr-image{margin:4px auto 20px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--site-accent,#68b8f4)!important;outline-offset:3px}
:root[data-theme="light"] .language-picker,:root[data-theme="light"] .service-heading,:root[data-theme="light"] .slow-hint,:root[data-theme="light"] .message-sender .sender-name,:root[data-theme="light"] .message-footer time{color:var(--ui-muted)}
@media(max-width:600px){#modal{padding:10px}#modal .modal-box{max-height:calc(var(--viewport-height,100dvh) - 20px);border-radius:12px}#modal .modal-box>header{padding:12px 14px}#modalBody{padding:16px}#modalBody .service-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modalBody .modal-actions>.secondary{flex:1 1 130px}#modalBody .community-line>span{flex-basis:100%}#modalBody input,#modalBody select,#modalBody textarea{font-size:16px}#modalBody .wallet-summary h2{font-size:23px}}
@media(max-width:360px){#modalBody .service-card-grid{grid-template-columns:1fr}}

:root[data-theme="light"] .vip-sender .sender-name{color:var(--vip-color,#9a6500)}
.rail,.list-pane,.list-foot,.chat-head,.search{border-color:var(--ui-line)}
#mediaContent{overflow:hidden;touch-action:none}
#mediaContent .viewer-image,#mediaContent video{transform-origin:center;will-change:auto;touch-action:none}
#mediaContent.media-zoomed .viewer-image{cursor:grab}
#mediaZoomReset{width:auto;min-width:54px;font-size:12px}
@media(max-width:600px){.media-viewer-bar{gap:8px;flex-wrap:wrap}.media-viewer-actions{gap:4px}.media-viewer-actions button{min-width:34px;width:34px;height:36px}#mediaZoomReset{min-width:48px;width:auto}.media-viewer-bar>div:first-child{min-width:0;flex:1 1 110px}.media-viewer-bar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;display:block}}
#mediaContent.media-zoomed .viewer-image,#mediaContent.media-zoomed video{cursor:grab}
#mediaContent.media-dragging .viewer-image,#mediaContent.media-dragging video{cursor:grabbing;user-select:none}
#mediaContent .viewer-image{-webkit-user-drag:none;user-select:none}
#mediaContextMenu,#messageMenu,#spaceContextMenu{position:fixed;box-sizing:border-box;min-width:0;max-width:calc(100vw - 16px);max-height:calc(var(--menu-viewport-height,100dvh) - 16px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;z-index:110}
#mediaContextMenu button,#messageMenu button,#spaceContextMenu button,.message-menu a[role=menuitem]{width:100%;white-space:normal;overflow-wrap:anywhere;flex-shrink:0;text-align:left;line-height:1.4;min-height:40px}
@media(max-height:500px){.app{min-height:0!important}.rail{padding-top:12px}.rail nav{margin-top:12px}.list-top{padding-top:12px}.search{margin-top:12px}.chat-head{height:54px;min-height:54px}.composer-wrap{padding-top:6px;padding-bottom:6px}#modal .modal-box{max-height:calc(var(--viewport-height,100dvh) - 16px)}#modal .modal-box>header{padding:10px 14px}#modalBody{padding:14px}.media-viewer-bar{padding-top:6px;padding-bottom:6px}.upload-dock{max-height:calc(100dvh - 16px);overflow-y:auto}}

/* Use the actual visual viewport for keyboard and short-screen layouts. */
.app{min-height:0}
#modal{top:var(--viewport-top,0px);bottom:auto;height:var(--viewport-height,100dvh);max-height:var(--viewport-height,100dvh)}
#modal .modal-box{max-height:calc(var(--viewport-height,100dvh) - 30px)}
#modal .modal-box:has(#detailTabs){width:min(760px,100%)}
#modal .modal-box:has(#favoritesList){width:min(700px,100%)}
.media-viewer-content .viewer-image,.media-viewer-content video{max-height:100%;max-width:100%}
.album-grid.count-1{grid-template-columns:minmax(0,1fr)}
.album-grid.count-1 .album-item{aspect-ratio:4/3}
.toast{z-index:140;max-width:calc(100vw - 24px);overflow-wrap:anywhere;top:calc(var(--viewport-top,0px) + 16px + env(safe-area-inset-top))}
.danger{color:var(--ui-danger,#ffadb4)!important}
:root[data-theme="light"] .red-reaction,:root[data-theme="light"] .hearted,:root[data-theme="light"] .reaction-badge.visible{color:#b51e40!important}
@media(max-width:720px){
 .list-pane,.chat{height:100%;max-height:100%;min-height:0}
 .rail .service-link{min-height:44px}
 .rail .service-link b{display:block;overflow-wrap:normal;word-break:normal}
 #modal .modal-box{max-height:calc(var(--viewport-height,100dvh) - 20px)}
 .upload-dock{max-height:calc(var(--viewport-height,100dvh) - 100px)}
}
@media(max-height:500px){#modal .modal-box{max-height:calc(var(--viewport-height,100dvh) - 16px)}}

.reaction-badge.mine{color:#fff!important}:root[data-theme="light"] .reaction-badge.mine{color:#fff!important}