/* Plain conversation rows; position distinguishes the sender on every screen. */
#chatMessages .chatMessage{width:fit-content;max-width:88%;box-sizing:border-box;margin:0 auto 22px 0;border:0;border-radius:0;background:transparent;padding:0;text-align:left;box-shadow:none}
#chatMessages .chatMessageMine{margin-left:auto;margin-right:0;background:transparent;text-align:right}
#chatMessages .chatMessageMine header{justify-content:flex-end}
#chatMessages .chatMessage p{margin:5px 0 3px;font-size:16px;line-height:1.55;color:#263142}
#chatMessages .chatMessage>.chatTime{display:block;margin:0;font-size:10px;line-height:1.4;color:#89909b}
#chatMessages .chatRank{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
#chatMessages{padding:14px 16px}
#chatMessages .chatMessage header{gap:5px 8px}#chatMessages .chatMessage time{font-size:10px;color:#707785}

#chatMessages .chatRank{display:inline-flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;color:#596273;vertical-align:middle}
#chatMessages .rankBars{display:inline-flex;flex-direction:column;gap:2px;min-width:12px}
#chatMessages .rankBars i{display:block;width:12px;height:2px;background:currentColor}
#chatMessages .rankBars:empty{min-width:7px;width:7px;height:7px;border:1px solid currentColor;border-radius:50%}
#chatMessages .rankStars{font-size:9px;letter-spacing:0;white-space:nowrap}

.chatDateDivider{text-align:center;font-size:11px;color:#9096a0;margin:8px 0 22px;line-height:1.5}
#chatMessages .chatMessage header{position:relative;padding-right:28px;min-height:24px}
#chatMessages .chatMessageMine header{padding-right:0;padding-left:28px}
.chatMessageActions{position:absolute;right:-6px;top:-8px;width:36px;height:36px;min-height:36px;border:0;background:transparent;color:#9297a0;font:22px system-ui;cursor:pointer}
.chatMessageMine .chatMessageActions{left:-6px;right:auto}
#chatMessages .chatMessage a{color:#6157bb;text-decoration:underline;word-break:break-word}
#chatMessages .chatQuote{margin:0 0 7px;padding:2px 8px;border-left:2px solid #c6bfdc;font-size:12px;color:#83818b;text-align:left;white-space:pre-wrap}
#chatReplyPreview{display:flex;align-items:center;gap:8px;border-left:2px solid #7665bb;padding:5px 8px;margin:0 0 8px;font-size:12px;color:#756987}
#chatReplyPreview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}#chatReplyPreview button{border:0;background:transparent;min-width:36px;min-height:36px;font-size:20px;color:#777}
#chatReplyPreview[hidden]{display:none}
#chatComposeStatus{font-size:12px;color:#796395;margin:4px 0 0}#chatComposeStatus:empty{display:none}
#chatForm .chatCompose{align-items:flex-end}#chatForm #chatMessage{min-height:42px!important;max-height:120px;padding:10px 12px;font-size:16px;line-height:22px;resize:none;box-sizing:border-box;overflow-y:auto}
#chatForm #chatSend{min-height:42px;height:42px;padding:8px 14px;font-size:14px}#chatForm small:empty{display:none}
#chatMessageMenu{width:min(340px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #e4e0eb;border-radius:16px;padding:16px;color:#303244;background:#fff}
#chatMessageMenu::backdrop{background:#20203055}.chatMenuExcerpt{max-height:110px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;color:#81818d;margin:0 0 10px}
#chatMessageMenu button{display:block;width:100%;border:0;background:transparent;text-align:left;min-height:44px;padding:8px;font-size:15px;color:#403957;cursor:pointer}
#chatMessageMenu button:hover{background:#f5f3f8}#chatMessageMenu button:focus-visible,.chatMessageActions:focus-visible{outline:2px solid #8173c6}

#chatReplyAlert{position:fixed;z-index:10020;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:12px 18px;border:1px solid #d9d3ef;border-radius:12px;background:#fff;color:#514397;box-shadow:0 4px 20px #25204022;font-size:14px;cursor:pointer}#chatReplyAlert[hidden]{display:none}#chatMessages .chatReplyFocused{outline:2px solid #b6abd9;outline-offset:6px}

#chatBadgePermission{border:0;background:transparent;color:#6555a4;font-size:12px;padding:4px 0;cursor:pointer}#chatBadgePermission[hidden]{display:none}

/* Explicit row alignment applies equally to narrow/mobile and desktop layouts. */
#chatMessages .chatMessage[data-sender="self"]{display:table;width:fit-content;max-width:88%;margin:0 0 22px auto;text-align:right;float:none;clear:both}
#chatMessages .chatMessage[data-sender="other"]{display:table;width:fit-content;max-width:88%;margin:0 auto 22px 0;text-align:left;float:none;clear:both}
#chatMessages .chatMessage[data-sender="self"]>p,#chatMessages .chatMessage[data-sender="self"]>.chatTime{text-align:right}
#chatMessages .chatMessage[data-sender="self"]>header{justify-content:flex-end;text-align:right}