:root{font:16px system-ui,sans-serif;color:#182c29;background:#eef4f2}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
header{background:#075e54;color:white;padding:12px clamp(12px,4vw,42px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header strong{font-size:1.35rem}
#identity{margin-inline-end:auto}
button,input{font:inherit;border-radius:8px;padding:9px 12px}
button{cursor:pointer;border:0;background:#087765;color:white}
button:disabled{opacity:.55;cursor:wait}
input{min-width:0;border:1px solid #9fb8b0;background:white;color:inherit}
#auth{width:min(420px,calc(100% - 28px));margin:8vh auto;padding:24px;background:white;border-radius:16px}
#auth form,#auth label{display:grid;gap:8px}
#auth form{gap:14px}
h1,h2{margin:0}
h2{font-size:1.05rem}
#chat{margin:16px auto;width:min(1100px,calc(100% - 24px));height:calc(100dvh - 95px);min-height:400px;display:grid;grid-template-columns:minmax(165px,270px) 1fr;border:1px solid #c9dbd4;border-radius:14px;overflow:hidden;background:white}
aside,section{display:flex;flex-direction:column;min-height:0;min-width:0}
aside{padding:12px;gap:10px;border-inline-end:1px solid #c9dbd4}
#contacts,#history{overflow:auto}
#contacts button{display:block;text-align:left;width:100%;margin-bottom:5px;background:#edf6f2;color:#15483e;overflow-wrap:anywhere}
#contacts button[aria-pressed=true]{background:#087765;color:white}
#conversation,#composer{padding:12px}
#history{flex:1;background:#e9f1eb;padding:12px}
#messages{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.bubble{align-self:flex-start;max-width:85%;border-radius:10px;background:white;padding:8px 11px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.mine{align-self:flex-end;background:#c9edda}
.bubble time{display:block;text-align:right;font-size:.7rem;color:#395951}
#composer{display:flex;gap:8px}
#composer input{flex:1}
#toast,#status{background:#173e35;color:white;padding:12px 16px;border-radius:10px}
#toast{position:fixed;top:70px;right:12px;max-width:calc(100% - 24px);box-shadow:0 4px 16px #0003}
#status{position:fixed;bottom:54px;left:12px;right:12px;z-index:1;margin:0}
@media(max-width:620px){#chat{grid-template-columns:1fr;grid-template-rows:minmax(95px,24%) 1fr}aside{border-inline-end:0;border-bottom:1px solid #c9dbd4}#contacts button{width:auto;display:inline-block;margin-right:5px}}