.bubble-content{position:relative}.bubble .name-tag{background-color:rgba(200,200,205,.65)!important;box-shadow:none!important;border-radius:3px;padding:3px 28px 3px 7px!important}.bubble .bubble-content,.bubble .message-text{background-color:#fff!important}.bubble .message-text,.bubble .name-tag{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}.bubble .bubble-content{padding-inline-end:25px}.copy-message-button{position:absolute;right:2px;top:2px;border:0;border-radius:3px;background:#eef1f2;color:#66818b;font:16px Arial;width:22px;height:24px;padding:0;cursor:pointer}.copy-message-button:hover{background:#dcecf1}.chat-clear-menu{position:fixed;z-index:1200;width:230px;padding:5px;background:white;box-shadow:0 3px 12px #0004;border:1px solid #9cbdc7;border-radius:5px;direction:rtl}.chat-clear-menu[hidden]{display:none!important}.chat-clear-menu button{width:100%;border:0;background:#f3fafb;color:#a33939;padding:13px 8px;font:13px Tahoma}.chat-clear-menu button:hover{background:#ffe9e9}@media(max-width:750px){.bubble .bubble-content{background:white!important;padding-inline-end:27px}.bubble .name-tag{padding:3px 28px 3px 6px!important}.copy-message-button{width:24px;height:26px;font-size:18px}}

/* The whole message is the copy target; no separate copy icon or reserved gap. */
.bubble .copy-message-button{display:none!important}.bubble .bubble-content{cursor:text;padding-inline-end:0}.bubble .name-tag{padding-inline:6px!important}.bubble-content:focus-visible{outline:2px solid var(--room-dark,#427f80);outline-offset:2px}
@media(max-width:750px){
 .bubble .bubble-content{display:grid!important;grid-template-columns:minmax(0,max-content) minmax(0,1fr);column-gap:6px;row-gap:3px;width:max-content;min-width:0;max-width:calc(100% - 40px);padding:7px 8px!important;align-items:start;direction:ltr}
 .bubble .name-tag{display:block!important;grid-column:1;grid-row:1;align-self:start;max-inline-size:min(40vw,145px);min-width:0;white-space:nowrap;box-sizing:border-box;margin:0!important;line-height:1.5}
 .bubble .message-text{display:block!important;grid-column:2;grid-row:1;min-width:0;margin:0!important;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
 .bubble-content time{grid-column:2;grid-row:2;margin:0!important;text-align:right;line-height:1.2}.bubble-content .chat-image{grid-column:1/-1;grid-row:3;max-width:100%}
}

/* Keep the badge in normal flow, with a separate unbroken name label. */
.bubble .name-tag,.bubble .name-tag.speaker-name{display:inline-flex!important;flex-direction:row;direction:ltr;align-items:center;gap:6px;vertical-align:top;white-space:nowrap!important;min-width:0!important;max-width:100%;padding:3px 6px!important;box-sizing:border-box;overflow:visible!important}
.bubble .name-tag .chat-name-label{display:inline-block;min-width:0;white-space:nowrap;unicode-bidi:plaintext}
.bubble .name-tag>.name-kind-mark{position:static!important;transform:none!important;inset:auto!important;flex:none;width:18px;height:21px;max-height:none;margin:0!important}
@media(max-width:750px){
 .bubble .bubble-content{display:block!important;width:fit-content;min-width:0;max-width:calc(100% - 40px);padding:0!important;background:transparent!important;border-radius:0;box-shadow:none}
 .bubble .bubble-content:before{display:none!important}
 .bubble .name-tag{display:inline-flex!important;max-inline-size:100%;margin:0 6px 0 0!important;font-size:13px!important}
 .bubble .chat-name-label{font-size:var(--mobile-name-size,13px)}
 .bubble .message-text{display:inline!important;width:auto!important;margin:0!important;padding:2px 3px;background:#fff!important;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
 .bubble-content time{display:block!important;margin:3px 0 0!important;background:transparent;text-align:right}
 .bubble-content .chat-image{display:block;max-width:100%}
}

/* Names and message text sit directly on the room background. */
.bubble,.bubble .bubble-content,.bubble .message-text,.bubble .name-tag,.bubble .name-tag.speaker-name{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.bubble .bubble-content:before,.bubble .bubble-content:after,.bubble .name-tag:before,.bubble .name-tag:after{display:none!important}

.bubble .name-tag{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%;scrollbar-width:thin}.bubble .name-tag .chat-name-label{flex:0 0 auto}

.message-copy-menu{position:fixed;z-index:1700;min-width:190px;padding:4px;border:1px solid var(--room-dark,#427f80);background:#fff;box-shadow:0 3px 12px #0004;direction:rtl}.message-copy-menu[hidden]{display:none!important}.message-copy-menu button{width:100%;padding:12px;border:0;background:var(--room-bar,#b0d7d7);color:#163d42;font:14px Tahoma;cursor:pointer}#chatImageViewer{max-width:94vw;max-height:94dvh;padding:8px;border:2px solid var(--room-dark,#427f80);background:#fff;overflow:auto}#chatImageViewer::backdrop{background:#000b}#chatImageViewer>button{display:block;margin:0 0 8px auto;padding:7px 14px;font:14px Tahoma;cursor:pointer}#chatImageViewer>img{display:block;max-width:88vw;max-height:80dvh;object-fit:contain}.bubble .chat-image{cursor:zoom-in}

#chatImageViewer .chat-image-tools{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:1;background:#fff;padding:0 0 8px}#chatImageViewer .chat-image-tools button{font:14px Tahoma;min-width:32px;min-height:32px;padding:5px 8px;cursor:pointer}#chatImageViewer .chat-image-tools button:first-child{margin-inline-end:auto}#chatImageViewer>img{margin:auto}

/* Public message styling is independent of the room frame palette. */
.bubble .name-tag,.bubble .name-tag.speaker-name{background:rgba(192,192,192,.45)!important;background-image:none!important;border-radius:3px!important}
.bubble .message-text{background:#fff!important;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.bubble[data-role=user] .name-tag{color:var(--chat-author-color,#111)!important}

/* The timestamp sits at the physical right edge; rank accent is left of the avatar. */
#messages .bubble{display:grid!important;grid-template-columns:2px 52px minmax(0,1fr) max-content;column-gap:7px;align-items:start;direction:ltr;width:100%!important;max-width:100%!important;min-width:0;margin:0 0 9px!important;padding:4px 2px!important;box-sizing:border-box;--rank-accent:#000}
#messages .bubble[data-role=member]{--rank-accent:#ba83d1}
#messages .bubble[data-role=admin]{--rank-accent:#0045ce}
#messages .bubble[data-role=superadmin]{--rank-accent:#008000}
#messages .bubble[data-role=mastera]{--rank-accent:#ee68a2}
#messages .bubble[data-role=master]{--rank-accent:#d00000}
#messages .bubble[data-role=root]{--rank-accent:#ed7900}
#messages .bubble::before{content:'';display:block!important;grid-column:1;grid-row:1;width:2px;height:24px;margin-top:8px;background:var(--rank-accent);border-radius:1px}
#messages .bubble>.message-avatar{grid-column:2;grid-row:1;margin:0!important}
#messages .bubble>.bubble-content{grid-column:3;grid-row:1;display:flex!important;flex-direction:column!important;align-items:flex-start;gap:3px;direction:ltr;text-align:left;width:100%!important;max-width:100%!important;min-width:0;padding:0!important;border:0!important;box-sizing:border-box}
#messages .bubble .bubble-content>.name-tag{display:inline-flex!important;flex:0 0 auto;margin:0!important;max-inline-size:100%}
#messages .bubble .bubble-content>.message-text{display:block!important;width:auto!important;max-width:100%;margin:0!important;padding:0!important;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
#messages .bubble>time{grid-column:4;grid-row:1;display:block!important;align-self:start!important;direction:rtl;text-align:right!important;white-space:nowrap;font:10px/1.5 Tahoma,Arial,sans-serif;color:#85959d;margin:0!important;padding-top:5px}
#messages .bubble .bubble-content>.chat-image{display:block;max-width:100%}
#messages .room-event-restriction-mute{color:#9b4827}
#messages .room-event-restriction-unmute{color:#167448}

.remember-login{display:flex;align-items:center;justify-content:center;gap:7px;font:13px/1.6 Tahoma;padding:8px 10px;direction:rtl}.remember-login input{width:18px;height:18px;flex:none}

/* Keep the timestamp close to the chat edge on wide screens too. */
.conversation #messages{padding-inline:8px!important}

/* Full-width silver author strip, with an adjacent name badge and explicit AM/PM. */
#messages .bubble{position:relative;background:linear-gradient(to bottom,rgba(192,192,192,.42) 0,rgba(192,192,192,.42) var(--author-strip-height,30px),transparent var(--author-strip-height,30px))!important;padding-top:3px!important}
#messages .bubble>.bubble-content{background:transparent!important;gap:4px}
#messages .bubble .bubble-content>.name-tag,#messages .bubble .name-tag.speaker-name{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:27px;box-sizing:border-box;align-items:center;justify-content:flex-start!important;gap:4px!important;padding:2px 4px!important;background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
#messages .bubble .name-tag>.chat-name-label{flex:0 1 auto!important;min-width:0;max-width:calc(100% - 26px);white-space:normal!important;overflow-wrap:anywhere;line-height:1.35}
#messages .bubble .name-tag>.name-kind-mark{position:static!important;inset:auto!important;margin:0!important;flex:0 0 18px!important;width:18px!important;height:21px!important;align-self:center;order:0;transform:none!important}
#messages .bubble>time{background:transparent!important;padding-top:6px;color:#555;font-size:11px;min-width:62px}
@media(max-width:750px){.conversation{padding-inline:0!important}.conversation #messages{padding-inline:0!important}#messages .bubble{column-gap:4px!important;grid-template-columns:2px 52px minmax(0,1fr) max-content}#messages .bubble>.message-avatar{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}#messages .bubble .name-tag>.chat-name-label{font-size:17px!important}}
