/* 2026-10-09 Claude: read counts and 'who has read it' (party-reads.js) */
.room-message-foot .room-read{flex:none;margin:0 4px 0 0;padding:0 2px;border:0;background:none;font:700 calc(11px * var(--pg-ts,1))/1.2 inherit;color:#e0a100;cursor:pointer;min-width:0;min-height:0}
.room-message-foot .room-read.is-all{font-weight:600;color:#8a94a6}
.room-message-foot .room-read:hover{text-decoration:underline}
.room-read-pop{position:absolute;z-index:40;width:max-content;min-width:180px;max-width:min(280px,calc(100% - 16px));max-height:min(320px,60vh);overflow:auto;padding:10px 12px;border-radius:14px;background:#fff;color:#1f2a44;box-shadow:0 10px 30px rgba(20,34,61,.22);font-size:calc(12.5px * var(--pg-ts,1))}
.room-read-pop .room-read-head{margin:0 0 6px;font-weight:700}
.room-read-pop .room-read-group{margin:6px 0 0}.room-read-pop .room-read-group>b{font-size:calc(11px * var(--pg-ts,1));color:#8a94a6;font-weight:600}
.room-read-pop ul{list-style:none;margin:3px 0 0;padding:0}.room-read-pop li{padding:2px 0}
.room-read-pop .is-unread li{color:#8a94a6}
.room-read-pop .room-read-delete{margin-top:10px;width:100%;min-height:32px;border:0;border-radius:10px;background:#fdecec;color:#c62828;font-weight:700;cursor:pointer}
.room-read-pop .room-read-delete:active{transform:scale(.97)}
.room-read-pop .room-read-note{margin:10px 0 0;font-size:calc(11px * var(--pg-ts,1));color:#8a94a6}
body.dark .room-read-pop{background:#1f2738;color:#e7ebf2;box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.dark .room-read-pop .room-read-delete{background:#3a2226;color:#ff8a80}
body.dark .room-message-foot .room-read{color:#f5c542}body.dark .room-message-foot .room-read.is-all{color:#7d889c}
/* number at the side-bottom of my bubble (KakaoTalk); the bubble keeps it visible outside its edge */
html body .party-room .room-message.is-mine .room-message-copy>p{position:relative;overflow:visible}
.room-message .room-read.is-side{position:absolute;right:calc(100% + 5px);bottom:1px;margin:0;padding:0 1px;font-size:calc(10.5px * var(--pg-ts,1));line-height:1.1;white-space:nowrap}
.room-read-pop{min-width:160px;padding:8px 11px;font-size:calc(12px * var(--pg-ts,1))}
.room-read-pop li{display:flex;align-items:center;gap:6px}.room-read-pop li img{width:14px;height:14px;object-fit:contain;border-radius:3px}
/* the side number sits inside the bubble element, so it must not take the bubble's white text colour */
html body .party-room .room-message .room-read.is-side{color:#e0a100!important;background:none!important;font-weight:700}
html body .party-room .room-message .room-read.is-side.is-all{color:#8a94a6!important;font-weight:600}
html body.dark .party-room .room-message .room-read.is-side{color:#f5c542!important}html body.dark .party-room .room-message .room-read.is-side.is-all{color:#7d889c!important}
/* 2026-10-09: the side number is a CSS mark, not text in the bubble */
html body .party-room .room-message.is-mine .room-message-copy>p[data-read]::after{content:attr(data-read);position:absolute;right:calc(100% + 5px);bottom:1px;font-size:calc(10.5px * var(--pg-ts,1));font-weight:700;line-height:1.1;white-space:nowrap;color:#e0a100;cursor:pointer}
html body .party-room .room-message.is-mine .room-message-copy>p[data-read][data-read-all]::after{color:#8a94a6;font-weight:600}
html body.dark .party-room .room-message.is-mine .room-message-copy>p[data-read]::after{color:#f5c542}html body.dark .party-room .room-message.is-mine .room-message-copy>p[data-read][data-read-all]::after{color:#7d889c}
html body .party-room .room-message.is-mine .room-message-copy>p[data-read]{position:relative;overflow:visible}
html body .party-room .room-message .room-message-foot .room-read{color:#e0a100!important;background:none!important;font-weight:700!important}
html body .party-room .room-message .room-message-foot .room-read.is-all{color:#8a94a6!important;font-weight:600!important}
html body.dark .party-room .room-message .room-message-foot .room-read{color:#f5c542!important}html body.dark .party-room .room-message .room-message-foot .room-read.is-all{color:#7d889c!important}