/* Chat: room list on the left, thread on the right; on a phone one at a time. */
.chat{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 3.8rem);height:calc(100dvh - 3.8rem);min-height:26rem}
.chat-side{border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;display:flex;flex-direction:column}
.chat-side .search{padding:.7rem .8rem .4rem;position:relative}
.chat-side .search input{padding-left:2.2rem;border-radius:999px}
.chat-side .search svg{position:absolute;left:1.5rem;top:1.35rem;color:var(--text3);pointer-events:none}
.rooms-h{display:flex;align-items:center;padding:.7rem 1rem .2rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-weight:700}
.rooms-h .grow{flex:1}
.rooms-h button{border:0;background:transparent;color:var(--brand-text);cursor:pointer;display:inline-flex;align-items:center;padding:.2rem;border-radius:6px}
.room{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;color:var(--text);text-decoration:none;min-height:2.9rem;border-left:4px solid transparent}
.room:hover{background:var(--surface2)}
.room[aria-current=page]{background:var(--brand-soft);border-left-color:var(--brand)}
.room .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.room.unread .nm{color:var(--text)}.room:not(.unread) .nm{font-weight:400;color:var(--text2)}
.room .pv{display:block;font-size:.8rem;color:var(--text3);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .hashico{width:1.6rem;display:inline-flex;justify-content:center;color:var(--text3)}
.room.muted-room{opacity:.65}
.thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
.thread-head{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}
.thread-head .ttl{flex:1;min-width:0}.thread-head b{display:block;font-size:1.05rem;line-height:1.2}.thread-head span{font-size:.82rem;color:var(--text3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-head .backbtn{display:none}
.msgs{flex:1;overflow-y:auto;padding:1rem 1rem .4rem;display:flex;flex-direction:column;gap:.15rem}
.dayhead{align-self:center;margin:.8rem 0 .4rem;font-size:.78rem;font-weight:700;color:var(--text3);background:var(--surface2);border-radius:999px;padding:.1rem .8rem}
.msg{display:flex;gap:.65rem;padding:.25rem .4rem;border-radius:12px;position:relative}
.msg:hover,.msg:focus-within{background:var(--surface)}
.msg.cont{padding-top:0}.msg.cont .avatar{visibility:hidden;height:0}
.msg .body{flex:1;min-width:0}
.msg .who{display:flex;gap:.5rem;align-items:baseline}.msg .who b{font-size:.95rem}.msg .who time{font-size:.74rem;color:var(--text3)}
.msg .text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.msg .text a{color:var(--brand-text)}
.msg .text .mention{background:var(--brand-soft);color:var(--brand-text);border-radius:5px;padding:0 .2rem;font-weight:700}
.msg.mine .text{}
.msg.pending{opacity:.6}
.msg.failed .text{color:var(--danger)}
.msg .edited{font-size:.72rem;color:var(--text3);margin-left:.3rem}
.msg.deleted .text{font-style:italic;color:var(--text3)}
.replyq{display:flex;gap:.5rem;align-items:center;border-left:3px solid var(--border-strong);padding:.1rem .6rem;margin-bottom:.2rem;font-size:.84rem;color:var(--text3);background:var(--surface2);border-radius:0 8px 8px 0;max-width:34rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reacts{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.25rem}
.react{display:inline-flex;gap:.25rem;align-items:center;border:1.5px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:.05rem .5rem;cursor:pointer;font-size:.85rem;min-height:1.7rem}
.react.mine{border-color:var(--brand);background:var(--brand-soft)}
.msg-actions{position:absolute;right:.5rem;top:-.9rem;display:none;gap:.1rem;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);padding:.15rem}
.msg:hover .msg-actions,.msg:focus-within .msg-actions,.msg.show-actions .msg-actions{display:flex}
.msg-actions button{border:0;background:transparent;border-radius:8px;width:2rem;height:2rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text2)}
.msg-actions button:hover{background:var(--surface2)}
.emoji-pop{display:flex;gap:.1rem;padding:.2rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);position:absolute;right:.5rem;top:1.4rem;z-index:15}
.emoji-pop button{border:0;background:transparent;font-size:1.25rem;border-radius:8px;width:2.2rem;height:2.2rem;cursor:pointer}.emoji-pop button:hover{background:var(--surface2)}
.newpill{position:absolute;left:50%;transform:translateX(-50%);bottom:5.8rem;background:var(--brand);color:var(--brand-ink);border:0;border-radius:999px;padding:.35rem 1rem;font-weight:700;box-shadow:var(--shadow-lg);cursor:pointer;z-index:10}
.composer{padding:.6rem 1rem 1rem;background:var(--bg)}
@media (min-width:861px){.composer{padding-right:8.5rem}} /* keeps the send button clear of Phoenix, who floats in the bottom-right corner */
.composer .replying{display:flex;align-items:center;gap:.5rem;background:var(--surface2);border-radius:10px 10px 0 0;padding:.35rem .7rem;font-size:.85rem;color:var(--text2)}
.composer .replying span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer .box{display:flex;gap:.5rem;align-items:flex-end;background:var(--surface);border:2px solid var(--border-strong);border-radius:18px;padding:.3rem .4rem .3rem .9rem}
.composer .box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.composer textarea{flex:1;border:0;background:transparent;resize:none;min-height:2.4rem;max-height:9rem;padding:.5rem 0;outline:none;box-shadow:none}
.composer textarea:focus{box-shadow:none}
.composer .send{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;padding:0}
.composer .hint{font-size:.74rem;color:var(--text3);margin:.3rem .5rem 0}
.mention-list{position:absolute;bottom:4.6rem;left:1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:.25rem;z-index:20;min-width:12rem}
.mention-list button{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;padding:.4rem .6rem;border-radius:8px;cursor:pointer;text-align:left}
.mention-list button[aria-selected=true],.mention-list button:hover{background:var(--brand-soft)}
.thread-empty{margin:auto;text-align:center;color:var(--text3);padding:2rem}
.readonly-note{padding:.8rem 1rem;text-align:center;color:var(--text3);background:var(--surface2);margin:.6rem 1rem 1rem;border-radius:12px}
.person-pick{display:flex;flex-direction:column;max-height:50vh;overflow-y:auto}
.person-pick label{display:flex;align-items:center;gap:.7rem;padding:.5rem .3rem;cursor:pointer;border-radius:10px}
.person-pick label:hover{background:var(--surface2)}
@media (max-width:860px){
  .chat{grid-template-columns:1fr;height:calc(100vh - 3.8rem - var(--tabbar));height:calc(100dvh - 3.8rem - var(--tabbar) - env(safe-area-inset-bottom))}
  .chat.has-room .chat-side{display:none}
  .chat:not(.has-room) .thread{display:none}
  .thread-head .backbtn{display:inline-flex}
  .msg-actions{display:flex;opacity:0;pointer-events:none}.msg.show-actions .msg-actions{opacity:1;pointer-events:auto}
}