:root{font-family:system-ui,sans-serif;color:#1b2924;background:#f3f6f3}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1000px;margin:auto;padding:1.25rem}.card{max-width:380px;margin:14vh auto;background:#fff;padding:2rem;border-radius:1.25rem;box-shadow:0 12px 35px #18392a18}label{display:grid;gap:.35rem;margin:.8rem 0}input,select,textarea{width:100%;padding:.75rem;border:1px solid #b8c8c0;border-radius:.65rem;font:inherit}textarea{resize:vertical;line-height:1.4;min-height:4.75rem}button{font:inherit;min-height:2.75rem;padding:.65rem .9rem;border:0;border-radius:.65rem;background:#315a4c;color:#fff;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7aa893;outline-offset:2px}.secondary{background:#e1ebe5;color:#244236}header,.chatHead{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem}header h1{margin:0}.headerActions,.chatActions{display:flex;gap:.5rem}.iconButton{width:2.75rem;padding:.4rem}.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem}aside,.chat{background:#fff;border-radius:1rem;padding:1rem}nav{display:grid;gap:.35rem;margin-bottom:.75rem}.conversation{background:#f1f5f2;color:#244236;text-align:left;display:flex;justify-content:space-between;align-items:center}.conversation.selected{background:#d8eee2;outline:2px solid #315a4c}.unread{min-width:1.4rem;padding:.05rem .4rem;border-radius:1rem;background:#b12626;color:#fff;text-align:center}.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;min-height:65vh;position:relative}#messages{overflow:auto;padding:1rem 0}.message{display:flex;padding:.3rem 0;border:0}.message.own{justify-content:flex-end}.bubble{max-width:min(82%,42rem);padding:.55rem .75rem;background:#f1f5f2;border-radius:.85rem .85rem .85rem .25rem}.message.own .bubble{background:#d8eee2;border-radius:.85rem .85rem .25rem .85rem}.message strong{display:block;color:hsl(var(--author-hue) 52% 35%);font-size:.9rem}.message p{white-space:pre-wrap;margin:.3rem 0}.message small,.muted,.admin small{color:#65766d}.error{color:#a62929}form#composer{display:flex;align-items:end;gap:.5rem;border-top:1px solid #e5ece7;padding-top:.8rem}form#composer textarea{flex:1;margin:0}.sendButton{flex:0 0 2.75rem;width:2.75rem;padding:.4rem;font-size:0}.sendButton::before{content:'➤';font-size:1.25rem}.sendMenu{position:absolute;z-index:3;right:1rem;bottom:5.5rem;display:grid;gap:.35rem;padding:.45rem;background:#fff;border:1px solid #dce6e0;border-radius:.7rem;box-shadow:0 8px 20px #18392a22}.emojiBar,.reactionPicker{display:flex;gap:.3rem;padding:.4rem 0}.emojiBar button,.reactionPicker button,.reaction{min-height:0;padding:.25rem .45rem;background:#f1f5f2;color:#244236}.reactionPicker{position:absolute;z-index:2;right:1rem;bottom:5.5rem;background:#fff;border:1px solid #dce6e0;border-radius:.7rem;box-shadow:0 8px 20px #18392a22}.reactions{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0}.reaction.reacted{background:#d8eee2;outline:1px solid #315a4c}.messageMeta{display:flex;align-items:center;gap:.35rem}.reactionAdd{margin-left:auto;font-size:.85rem;padding:.2rem .35rem}.personalList{display:grid;gap:.4rem}.personalContact{display:flex;justify-content:space-between;align-items:center;text-align:left;background:#f1f5f2;color:#244236}.actions{display:flex;justify-content:end;gap:.5rem}dialog{border:0;border-radius:1rem;box-shadow:0 12px 45px #0004}.admin{min-width:min(32rem,90vw)}.userMenu{display:grid;gap:.5rem;min-width:min(20rem,80vw)}.userMenu h2{margin:.25rem 0}.admin ul{list-style:none;padding:0;max-height:12rem;overflow:auto}.admin li{padding:.5rem;border-bottom:1px solid #e8eeea;display:grid;gap:.25rem}.removeMember{justify-self:start;padding:.3rem .5rem}.admin fieldset{border:0;padding:0;display:grid;gap:.35rem}.admin fieldset label{display:flex;align-items:center;gap:.5rem;margin:0}.admin fieldset input[type=checkbox]{width:auto;margin:0}.token{overflow-wrap:anywhere;background:#f1f5f2;padding:.75rem;border-radius:.5rem}
@media(max-width:650px){main{padding:.65rem}header{margin-bottom:.65rem}header h1{font-size:1.4rem}.layout{grid-template-columns:1fr;gap:.65rem}aside{display:flex;gap:.5rem;align-items:center;padding:.65rem;overflow:auto}aside h2{display:none}nav{display:flex;gap:.4rem;margin:0;overflow:auto;flex:1}.conversation{white-space:nowrap;flex:0 0 auto}.chat{min-height:70dvh;padding:.75rem}.chatHead{margin-bottom:.25rem}.chatHead h2{font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:.35rem 0}.chatHead .iconButton{margin-left:auto}#messages{padding:.5rem 0}.bubble{max-width:88%}form#composer{gap:.35rem;padding-top:.65rem}.sendMenu{right:.75rem;bottom:6.1rem}.reactionPicker{right:.75rem;bottom:6.1rem}.emojiBar{overflow:auto}}
@media(max-width:650px){html,body{height:100%;overflow:hidden}main{height:100dvh;overflow:hidden}.layout{min-height:0}.chat{height:calc(100dvh - 8rem);min-height:0}.sendMenu{border-radius:1rem;padding:.65rem;box-shadow:0 12px 30px #18392a33}.sendMenu button{text-align:left}}
.token{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.token span{min-width:0}

.messageStatus{font-weight:700;letter-spacing:-.18em;margin-left:.1rem}.messageStatus.sent,.messageStatus.delivered{color:#8a9692}.messageStatus.read{color:#168ac6}

.messageAuthor{appearance:none;display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;text-align:left;font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;color:hsl(var(--author-hue) 52% 35%)!important;cursor:pointer}.messageAuthor:hover{text-decoration:underline}.messageAuthor:focus-visible{outline:2px solid #7aa893;outline-offset:2px}.loadOlder{display:block;margin:0 auto .75rem}.profileCard{min-width:min(22rem,80vw)}.profileCard h2{margin-top:0}

.authorAvatar,.profileAvatar{object-fit:cover;background:#d8eee2}.authorAvatar{width:2rem;height:2rem;border-radius:50%;flex:0 0 2rem}.message .bubble{position:relative}.messageAvatar{float:left;margin:.1rem .5rem .15rem 0}.profileAvatar{display:block;width:5rem;height:5rem;border-radius:50%;margin:0 auto .75rem}.profileCard{text-align:center}.profileCard .actions{justify-content:center}