/* Standart is mobile-only; desktop keeps the original layout. */
#standardTabs,.standard-time{display:none}
@media(max-width:760px){
html[data-message-style="standard"] #app{display:flex!important;flex-direction:column;height:var(--chat-height,100dvh);padding:0!important;gap:0;background:var(--cz-f1f9ff,#f0f7ff);border:0;border-radius:0}
html[data-message-style="standard"] #app.hidden{display:none!important}
html[data-message-style="standard"] .sidebar,
html[data-message-style="standard"] .channel-head,
html[data-message-style="standard"] .right-panel>.info-card,
html[data-message-style="standard"] .member-card>h3{display:none!important}
html[data-message-style="standard"] #standardTabs{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;flex:0 0 auto;gap:1px;padding:2px;max-height:25dvh;overflow:auto;border-bottom:1px solid #c7d6e5;font:13px/20px Arial,sans-serif;background:var(--cz-f1f9ff,#f0f7ff)}
html[data-message-style="standard"] .standard-tab{display:inline-flex;align-items:center;border:1px solid #d7e0e8;background:var(--cz-f1f9ff,#f0f7ff);height:24px;max-width:100%}
html[data-message-style="standard"] .standard-tab.selected{background:#fff;border-color:#9baec3}
html[data-message-style="standard"] #standardTabs button{font:13px/20px Arial,sans-serif;color:#00e;min-width:0;min-height:0;height:auto;padding:0 2px;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-message-style="standard"] #standardTabs .selected>button:first-child{color:#111}
html[data-message-style="standard"] #standardTabs .conversation-close{position:static;width:11px;height:15px;flex:0 0 11px;font-size:14px}
html[data-message-style="standard"] #standardTabs .standard-menu{margin-left:auto;color:#234f76;width:20px}
html[data-message-style="standard"] #app>.layout{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(100px,29vw,150px)!important;grid-template-rows:minmax(0,1fr) auto;flex:1;min-height:0;height:auto!important;width:100%;margin:0;padding:0!important;gap:0;border:0;border-radius:0;box-shadow:none;background:var(--cz-f1f9ff,#f0f7ff)}
html[data-message-style="standard"] #app>.layout.private-chat{grid-template-columns:minmax(0,1fr)!important}
html[data-message-style="standard"] .chat-panel{display:flex!important;flex-direction:column;grid-column:1;min-width:0;min-height:0;border:0;border-radius:0;background:transparent}
html[data-message-style="standard"] #rightPanel{display:block!important;grid-column:2;position:static!important;width:auto!important;min-width:0;min-height:0;overflow:auto;padding:0!important;margin:0;border:0;border-left:1px solid #d3deeb;border-radius:0;background:transparent}
html[data-message-style="standard"] #rightPanel.private-hidden{display:none!important}
html[data-message-style="standard"] .member-card{padding:0!important;border:0;background:transparent;box-shadow:none;border-radius:0}
html[data-message-style="standard"] #memberSearch{display:block;width:100%;height:28px!important;padding:1px 3px!important;margin:0!important;border:1px dotted #abb8c5!important;border-radius:0!important;font:13px Arial,sans-serif!important;background:#fff!important}
html[data-message-style="standard"] #memberList{padding:0;margin:0}
html[data-message-style="standard"] #memberList .member-row{display:flex;align-items:center;gap:1px;min-height:21px;height:21px;margin:0;padding:0!important;overflow:hidden;border:0;border-radius:0;background:transparent;font:13px/19px Arial,sans-serif}
html[data-message-style="standard"] #memberList .member-row>div:last-of-type{display:flex;min-width:0;align-items:center;white-space:nowrap;gap:0}
html[data-message-style="standard"] #memberList .member-nick{font:13px/19px Arial,sans-serif!important;color:var(--standard-nick,#007a80);overflow:hidden;text-overflow:clip}
html[data-message-style="standard"] #memberList .member-prefix{font:13px/19px Arial,sans-serif;color:var(--standard-nick,#007a80)}
html[data-message-style="standard"] #memberList .member-avatar,html[data-message-style="standard"] #memberList .member-avatar img{width:13px!important;height:13px!important;min-width:13px;flex:0 0 13px;padding:0!important;border:0!important;border-radius:0!important;background:transparent;box-shadow:none}
html[data-message-style="standard"] #memberList .member-row>button,html[data-message-style="standard"] #memberList .member-row>.social-friend-actions{display:none!important}
html[data-message-style="standard"] #messages{flex:1;min-height:0;padding:2px 3px!important;background:var(--cz-f1f9ff,#f0f7ff)!important;background-image:none!important;font:13px/19px Arial,sans-serif!important;color:#000;text-align:left}
html[data-message-style="standard"] #messages .message,html[data-message-style="standard"] #messages .message.self{display:block!important;width:100%;margin:0!important;padding:0!important;min-height:21px;border:0;background:transparent;text-align:left;font:13px/19px Arial,sans-serif!important}
html[data-message-style="standard"] #messages .standard-time{display:inline;color:#000;font:13px/19px Arial,sans-serif;margin-right:1px}
html[data-message-style="standard"] #messages .message-avatar{display:inline-block!important;vertical-align:middle;width:12px!important;height:12px!important;min-width:12px;padding:0!important;margin:0 1px!important;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-message-style="standard"] #messages .message-avatar img{width:12px!important;height:12px!important;border-radius:0}
html[data-message-style="standard"] #messages .message-body{display:inline!important;width:auto!important;max-width:none!important;min-width:0;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none;color:#000;font:13px/19px Arial,sans-serif!important}
html[data-message-style="standard"] #messages .message-body>div:first-child,html[data-message-style="standard"] #messages .message-content-line,html[data-message-style="standard"] #messages .message-text{display:inline!important;padding:0!important;margin:0!important;font:13px/19px Arial,sans-serif!important;white-space:pre-wrap;overflow-wrap:anywhere;color:#000}
html[data-message-style="standard"] #messages .message-name{font:13px/19px Arial,sans-serif!important;color:var(--standard-nick,#008080)!important}
html[data-message-style="standard"] #messages .message-name:before{content:'<'}
html[data-message-style="standard"] #messages .message-name:after{content:'> '}
html[data-message-style="standard"] #messages .message-time{display:none!important}
html[data-message-style="standard"] #messages .system-message{font:13px/19px Arial,sans-serif!important;color:#222;text-align:left;margin:0;padding:0;border:0;background:transparent}
html[data-message-style="standard"] #messages .history-page:disabled,html[data-message-style="standard"] #messages .message-media:empty{display:none}
html[data-message-style="standard"] #messages .history-page{font:13px Arial,sans-serif;padding:2px;margin:0;border-radius:0}

html[data-message-style="standard"] #memberList .member-row[hidden]{display:none!important}
html[data-message-style="standard"] #memberList .social-avatar,html[data-message-style="standard"] #messages .message-avatar .social-avatar{display:inline-grid;width:12px!important;height:12px!important;min-width:0;line-height:12px;font-size:12px;border:0;border-radius:0;background:transparent}
html[data-message-style="standard"] #memberList .social-dot,html[data-message-style="standard"] #messages .message-avatar .social-dot{display:none}
html[data-message-style="standard"] #messages .message-text img{max-height:21px;vertical-align:middle}
html[data-message-style="standard"] #app>.titlebar{flex:0 0 auto}
html[data-message-style="standard"] #standardTabs .standard-menu{display:none}
html[data-message-style="standard"] .layout>.composer{grid-column:1 / -1;grid-row:2;min-width:0;width:100%;margin:0;border-radius:0}
html[data-message-style="standard"] #memberList>.show-more{display:block;width:100%;padding:6px 2px;margin:0;font:12px/16px Arial,sans-serif;white-space:normal}
html[data-message-style="standard"] #memberList .member-avatar,html[data-message-style="standard"] #memberList .member-avatar img{width:17px!important;height:17px!important;min-width:17px;flex-basis:17px}
html[data-message-style="standard"] #memberList .social-avatar{width:17px!important;height:17px!important;font-size:15px;line-height:17px}
}

@media(max-width:760px){
html[data-message-style="standard"] #app .mobile-nav{display:grid!important;position:relative;inset:auto;z-index:190;flex:0 0 calc(66px + env(safe-area-inset-bottom));margin:0}
html[data-message-style="standard"] #app .mobile-section.open{position:absolute;top:68px;bottom:calc(66px + env(safe-area-inset-bottom));height:auto;max-height:none;z-index:180}
html[data-message-style="standard"] #app>.layout{transition:grid-template-columns .18s ease}
html[data-message-style="standard"] #app>.layout.standard-members-hidden:not(.private-chat){grid-template-columns:minmax(0,1fr) 0px!important}
html[data-message-style="standard"] .layout.standard-members-hidden #rightPanel{visibility:hidden;pointer-events:none;overflow:hidden;transform:translateX(100%)}
html[data-message-style="standard"] #rightPanel{transition:transform .18s ease}
}

@media(max-width:760px){
/* Constrain the list itself, so touch scrolling never moves the composer. */
html[data-message-style="standard"] #app>.layout{grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden}
html[data-message-style="standard"] #rightPanel{grid-row:1;align-self:stretch;height:100%!important;max-height:100%;min-height:0;display:flex!important;flex-direction:column;overflow:hidden!important;box-sizing:border-box}
html[data-message-style="standard"] #rightPanel.private-hidden{display:none!important}
html[data-message-style="standard"] #rightPanel .member-card{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}
html[data-message-style="standard"] #memberSearch{flex:0 0 28px}
html[data-message-style="standard"] #memberList{flex:1;min-height:0;max-height:none;height:auto;overflow-x:hidden;overflow-y:auto!important;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:0}
html[data-message-style="standard"] .layout>.composer{align-self:end}
html[data-message-style="standard"] #userCard{width:min(290px,calc(100vw - 32px));max-height:70dvh;padding:14px;border-radius:14px;overflow-y:auto}
html[data-message-style="standard"] #userCard.open{left:50%;right:auto;bottom:calc(58px + env(safe-area-inset-bottom));transform:translateX(-50%)}
html[data-message-style="standard"] #userCard .user-card-avatar{width:48px;height:48px;margin:8px auto;font-size:28px}
html[data-message-style="standard"] #userCard .user-card-avatar img,html[data-message-style="standard"] #userCard .user-card-avatar .social-avatar{width:44px;height:44px}
html[data-message-style="standard"] #userCard .user-card-info h2{font-size:18px;margin:6px 0}
html[data-message-style="standard"] #userCard .user-card-info p{margin:4px 0}
html[data-message-style="standard"] #userCard .user-card-actions{margin-top:10px}
html[data-message-style="standard"] #userCard .user-card-actions button{min-height:44px;padding:7px 10px;font-size:13px}
html[data-message-style="standard"] #messages .message-avatar,html[data-message-style="standard"] #messages .message-avatar img,html[data-message-style="standard"] #messages .message-avatar .social-avatar{width:17px!important;height:17px!important;min-width:17px;vertical-align:middle;line-height:17px}
html[data-message-style="standard"] #messages .message-avatar{margin:0 2px!important;transform:translateY(-1px)}
html[data-message-style="standard"] #messages .reaction-menu{padding:3px!important;border-radius:16px}
html[data-message-style="standard"] #messages .reaction-menu .message-reactions button{flex:0 0 25px!important;width:25px!important;height:27px!important;min-height:27px!important;font-size:19px!important}
html[data-message-style="standard"] #messages .reaction-menu svg{width:17px;height:17px}
/* Private conversations retain the existing, functional call/action header. */
html[data-message-style="standard"] .layout.private-chat .channel-head{display:flex!important;flex:0 0 auto;align-items:center;min-height:38px!important;height:auto!important;padding:4px 5px!important;gap:4px;border-bottom:1px solid #d3deeb}
html[data-message-style="standard"] .layout.private-chat .channel-head>.channel-icon,html[data-message-style="standard"] .layout.private-chat .channel-head p{display:none!important}
html[data-message-style="standard"] .layout.private-chat #activeChannel{font:600 13px/20px Arial,sans-serif;margin:0}
html[data-message-style="standard"] .layout.private-chat .chat-head-actions{position:static!important;margin-left:auto!important;gap:2px!important;flex-shrink:0}
html[data-message-style="standard"] .layout.private-chat .chat-head-actions button{width:24px!important;min-width:24px!important;height:26px!important}
html[data-message-style="standard"] #app .mobile-nav{height:calc(52px + env(safe-area-inset-bottom));flex-basis:calc(52px + env(safe-area-inset-bottom));padding-top:2px;padding-bottom:env(safe-area-inset-bottom)}
html[data-message-style="standard"] #app .mobile-nav button{margin:0 3px;font-size:19px}
html[data-message-style="standard"] #app .mobile-nav span{font-size:9px;margin-top:1px}
html[data-message-style="standard"] #app .mobile-section.open{bottom:calc(52px + env(safe-area-inset-bottom))}
html[data-message-style="standard"].standard-input-focus #app .mobile-nav{display:none!important}
html[data-message-style="standard"].standard-input-focus #app .mobile-section.open{bottom:0}
}
@media(max-width:760px){
html[data-message-style="standard"] #messages .reaction-widget{display:inline!important;margin:0 0 0 2px!important;padding:0;vertical-align:baseline}
html[data-message-style="standard"] #messages .reaction-counts{display:inline!important;margin:0!important;padding:0!important;white-space:normal}
html[data-message-style="standard"] #messages .reaction-counts:empty{display:none!important}
html[data-message-style="standard"] #messages .reaction-counts button{display:inline-flex!important;align-items:center;vertical-align:baseline;gap:1px;min-width:0;min-height:0;height:16px;max-width:100%;margin:0 1px;padding:0 2px!important;font:11px/14px Arial,sans-serif;border-radius:6px;white-space:nowrap;box-shadow:none}
html[data-message-style="standard"] #messages .reaction-counts button b{font-size:9px;line-height:12px}
html[data-message-style="standard"] #userCard.open{top:auto}
}

/* The time setting applies to all message appearances. */
html[data-show-message-time="false"] #messages .message-time,html[data-show-message-time="false"] #messages .standard-time{display:none!important}
@media(max-width:760px){
html[data-message-style="standard"] #messages .message.has-message-reactions{margin-bottom:7px!important}
html[data-message-style="standard"] #messages .message-name{display:inline!important;visibility:visible!important}
html[data-message-style="standard"] #messages .message:has(.quoted-message) .message-body>div:first-child{display:inline!important}
html[data-message-style="standard"] #messages .quoted-message{display:block;clear:both;margin:3px 0;padding:3px 5px;font-size:11px}
html[data-message-style="standard"] #standardTabs .conversation-close{width:18px;flex-basis:18px;height:21px;font-size:19px;line-height:20px;padding:0}
html[data-message-style="standard"] #memberList .social-avatar{position:relative;overflow:visible}
html[data-message-style="standard"] #memberList .social-dot{display:block!important;position:absolute;width:5px;height:5px;right:-1px;bottom:-1px;border:1px solid white;border-radius:50%}
html[data-message-style="standard"] .layout.private-chat .channel-head>.channel-icon{display:flex!important;align-items:center;width:23px;min-width:23px;height:25px;margin:0}
html[data-message-style="standard"] .layout.private-chat .channel-icon img{width:23px;height:23px}
html[data-message-style="standard"] .layout:not(.private-chat) .channel-head{display:block!important;position:absolute;z-index:9;right:0;top:0;width:31px;height:30px!important;min-height:0!important;padding:0!important;background:transparent;border:0;overflow:visible}
html[data-message-style="standard"] .layout:not(.private-chat) .channel-head>*,html[data-message-style="standard"] .layout:not(.private-chat) .chat-head-actions>*{display:none!important}
html[data-message-style="standard"] .layout:not(.private-chat) .channel-head>.chat-head-actions{display:flex!important;position:static!important;margin:0!important}
html[data-message-style="standard"] .layout:not(.private-chat) .chat-head-actions>.admin-clear-channel{display:block!important;width:27px!important;min-width:27px!important;height:27px!important;background-size:20px 20px!important}
html[data-message-style="standard"] .layout:not(.private-chat) #messages{padding-right:30px!important}
html[data-message-style="standard"] #messages .voice-player{width:195px;max-width:100%;padding:5px 7px;gap:5px;border-radius:15px}
html[data-message-style="standard"] #messages .voice-play{width:24px;height:24px;flex-basis:24px;font-size:12px}
html[data-message-style="standard"] #messages .voice-wave{height:20px}
html[data-message-style="standard"] #messages .voice-time{font-size:10px}
html[data-message-style="standard"] #emojiPicker{width:min(285px,calc(100vw - 16px));max-height:38dvh;padding:6px}
html[data-message-style="standard"] #emojiGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
html[data-message-style="standard"] #emojiGrid button{font-size:21px;width:30px;height:30px;padding:2px;min-height:0}
html[data-message-style="standard"] dialog:not(.image-viewer){width:min(320px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:76dvh;font-size:12px;border-radius:12px}
html[data-message-style="standard"] .nick-auth-dialog{padding:14px}
html[data-message-style="standard"] dialog h2,html[data-message-style="standard"] dialog h3{font-size:16px;margin:7px 0}
html[data-message-style="standard"] dialog header{padding:10px 12px}
html[data-message-style="standard"] .social-dialog-content,html[data-message-style="standard"] .applet-admin-dialog>.admin-content{padding:10px}
html[data-message-style="standard"] dialog input:not([type=checkbox]):not([type=radio]),html[data-message-style="standard"] dialog select{max-width:100%;padding:5px 7px;font-size:16px;min-height:32px}
html[data-message-style="standard"] dialog button{padding:5px 8px;min-height:28px;font-size:12px}
html[data-message-style="standard"] .social-profile-hero{padding:10px}
html[data-message-style="standard"] .social-profile-hero .social-avatar{width:46px;height:46px}
}

.chat-image{max-width:min(100%,150px);max-height:160px}
/* Round chat and member avatars in every appearance. Keep presence dots visible. */
html #messages .message-avatar,
html #messages .message-avatar .social-avatar,
html #messages .message-avatar img,
html #memberList .member-avatar,
html #memberList .member-avatar .social-avatar,
html #memberList .member-avatar img,
html #mobileMemberList .member-avatar,
html #mobileMemberList .member-avatar .social-avatar,
html #mobileMemberList .member-avatar img{border-radius:50%!important}
@media(max-width:760px){
html[data-message-style="standard"] #messages .message-avatar,
html[data-message-style="standard"] #messages .message-avatar .social-avatar,
html[data-message-style="standard"] #messages .message-avatar img,
html[data-message-style="standard"] #memberList .member-avatar,
html[data-message-style="standard"] #memberList .member-avatar .social-avatar,
html[data-message-style="standard"] #memberList .member-avatar img{border-radius:50%!important}
}

/* Comfortable, borderless account fields. */
html .nick-auth-dialog input,
html #ircAccountForm input,
html #socialDialog form input:not([type=checkbox]):not([type=radio]):not([type=file]),
html #loginNick,html #loginPassword{
box-sizing:border-box;max-width:100%;min-width:0;border:0!important;border-radius:20px!important;padding:10px 14px!important;background:var(--cz-f8fcff,#f8fcff)!important;color:inherit;box-shadow:none!important;font-size:16px}
html .nick-auth-dialog input:focus,html #ircAccountForm input:focus,html #loginNick:focus,html #loginPassword:focus{outline:0!important;background:var(--cz-e2f1ff,#e2f1ff)!important}
html .nick-auth-dialog input:focus-visible,html #ircAccountForm input:focus-visible{outline:2px solid var(--cz-aecce8,#aecce8)!important;outline-offset:2px}
html dialog.appearance-choice{width:min(340px,calc(100vw - 32px));padding:22px!important;border:0;border-radius:22px;background:linear-gradient(140deg,var(--cz-f8fcff,#f8fcff),var(--cz-e2f1ff,#e2f1ff));box-shadow:0 16px 50px #12385d33;text-align:center}
html dialog.appearance-choice h3{font-size:19px;margin:0 0 8px}
html dialog.appearance-choice p{font-size:12px;line-height:1.5;margin:8px 0 16px}
html dialog.appearance-choice button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;margin:9px 0;padding:12px 15px;border:1px solid var(--cz-bdd3e7,#bdd3e7);border-radius:14px;background:var(--cz-f8fcff,#f8fcff);color:inherit;cursor:pointer}
html dialog.appearance-choice button:hover,html dialog.appearance-choice button:focus-visible{background:var(--cz-e2f1ff,#e2f1ff)}
html dialog.appearance-choice button b{font-size:15px}html dialog.appearance-choice button small{font-size:11px}
@media(max-width:760px){
html .emoji-picker{box-sizing:border-box;max-width:calc(100vw - 16px)}
html .emoji-picker-search{box-sizing:border-box;width:100%;min-width:0;padding:6px;gap:5px;flex-shrink:0}
html .emoji-picker-search input{width:0;min-width:0;flex:1 1 0%;box-sizing:border-box}
html .emoji-picker-search button{display:grid;place-items:center;flex:0 0 30px;width:30px;min-width:30px;height:30px;padding:0;font-size:22px}
html[data-message-style="standard"] #messages .youtube-preview{width:min(100%,180px);min-height:0;height:auto;aspect-ratio:16/9;margin-top:4px;border-radius:8px}
html[data-message-style="standard"] #socialDialog{box-sizing:border-box;width:min(300px,calc(100vw - 28px));max-width:300px;max-height:76dvh;padding:0;border-radius:16px;font-size:12px;overflow:auto}
html[data-message-style="standard"] #socialDialog>header{padding:9px 12px}
html[data-message-style="standard"] #socialDialog>header h2{font-size:15px;margin:0}
html[data-message-style="standard"] #socialDialog>header button{width:29px;height:29px;min-height:29px;padding:4px}
html[data-message-style="standard"] #socialDialog .social-dialog-content{padding:11px}
html[data-message-style="standard"] #socialDialog .social-profile-hero{padding:8px}
html[data-message-style="standard"] #socialDialog .social-profile-hero .social-avatar{width:38px;height:38px}
html[data-message-style="standard"] #socialDialog .social-profile-hero h3{font-size:16px;margin:7px 0}
html[data-message-style="standard"] #socialDialog p{margin:7px 0;font-size:12px}
html[data-message-style="standard"] #socialDialog label{font-size:12px;margin:7px 0}
html[data-message-style="standard"] #socialDialog textarea{box-sizing:border-box;width:100%;min-height:60px;max-height:120px;padding:8px;font-size:16px;border:0;border-radius:12px}
html[data-message-style="standard"] #socialDialog .theme-options{gap:6px}
html[data-message-style="standard"] #socialDialog .theme-options button{padding:7px 8px;font-size:11px;border-radius:10px}
html[data-message-style="standard"] #socialDialog .theme-swatch{width:14px;height:14px}
html[data-message-style="standard"] #messages .message-receipt{display:inline-block;font-size:10px;line-height:12px;vertical-align:baseline;margin-left:5px;letter-spacing:-3px;padding-right:3px}
}