html body.chat-page .conversation-heading {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body.chat-page #roomTitle {flex:1;min-width:100px;overflow-wrap:anywhere}
html body.chat-page .conversation-heading #actions {display:flex;gap:4px;margin:0;align-items:center;flex-wrap:wrap}
.chat-more {position:relative}
.chat-more summary {cursor:pointer;list-style:none;font-size:28px;width:44px;height:44px;text-align:center;border-radius:50%}
.chat-more summary::-webkit-details-marker {display:none}
.chat-more[open] button {position:absolute;right:0;top:45px;z-index:20;box-shadow:0 4px 18px #35204733;background:#fff!important}
html body.chat-page #compose {display:flex;gap:6px;align-items:center}
html body.chat-page #compose[hidden] {display:none}
html body.chat-page #compose input {min-width:0;flex:1;width:0}
html body.chat-page .expression-trigger {font-size:27px}
.expression-picker {box-sizing:border-box;border:1px solid #e7d3eb;border-radius:22px;padding:20px;width:min(440px,calc(100vw - 24px));max-height:75dvh;overflow:auto;color:#30213f;background:#fffafc}
.expression-picker::backdrop {background:#20122c66}
.expression-picker h2 {font-size:18px;margin:0 40px 18px 0}
.expression-close {position:absolute;right:12px;top:10px;font-size:28px;width:44px;height:44px}
.expression-tabs {display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.expression-tabs button {flex:1;padding:10px;border-radius:12px;border:0;min-height:44px}
.expression-tabs [aria-pressed=true] {background:#8527b1;color:white}
.expression-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.expression-grid button {border:1px solid #eedfeb;border-radius:14px;min-height:56px;background:white;font-size:26px;padding:8px;cursor:pointer}
.expression-grid button:has(img) {grid-column:span 2;font-size:14px}
.expression-grid img {width:100%;height:auto;max-width:110px;display:block;margin:auto}
.chat-expression {object-fit:contain;display:block;width:128px;height:128px;max-width:100%}
.expression-preview {display:flex;gap:12px;align-items:center;padding:8px}
.expression-preview[hidden] {display:none}
.expression-preview img {width:52px;height:52px}
.expression-preview button {min-height:44px}
.expression-picker button:focus-visible,.chat-more summary:focus-visible {outline:3px solid #7857ef;outline-offset:2px}
@media(max-width:600px){html body.chat-page #compose .chat-icon-button{flex-basis:44px;width:44px!important;padding:10px!important}.expression-picker{padding:16px}}
