:root{font-family:system-ui,sans-serif;color:#173b36;background:#f5f4ef}*{box-sizing:border-box}body{margin:0}header{height:70px;background:#173b36;color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}header span{font-weight:400;color:#c6d4cc;margin-left:16px}button,.file{cursor:pointer;border:1px solid #c6d4cc;border-radius:8px;padding:10px 14px;background:white;color:#173b36}button:hover{background:#edf4ee}input,textarea,select{font:inherit;border:1px solid #ccd4cc;border-radius:8px;padding:12px;background:white}header button{padding:8px;font-size:12px}#login{max-width:600px;margin:10vh auto;padding:24px}main{display:grid;grid-template-columns:300px 1fr;height:calc(100dvh - 110px)}[hidden]{display:none!important}aside{border-right:1px solid #ddd;padding:16px;overflow:auto}aside input{width:100%;margin-bottom:16px}nav button{display:block;width:100%;text-align:left;margin-bottom:8px;background:#fff}nav button.active{border:2px solid #173b36}nav small{display:block;color:#63766e;margin-top:4px}.chat{display:flex;flex-direction:column;min-width:0}#chat-head{padding:16px;border-bottom:1px solid #ddd;display:flex;gap:12px;align-items:center;flex-wrap:wrap}#chat-head a{color:#173b36}#messages{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:10px}.message{background:white;padding:12px 16px;border-radius:12px;max-width:80%;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere}.message.out{align-self:flex-end;background:#dfede0}.message small{display:block;color:#66776c;font-size:11px;margin-top:8px}.message button{display:block;margin-top:8px}#compose{display:flex;gap:8px;padding:16px;align-items:center}textarea{flex:1;resize:vertical;min-height:60px}.file input{display:none}#status{margin:0;padding:8px 24px;font-size:13px;min-height:40px}@media(max-width:700px){header{padding:12px;height:auto}header span{display:none}main{grid-template-columns:1fr;height:calc(100dvh - 110px)}aside{max-height:28vh;border-bottom:1px solid #ddd}#messages{padding:12px}.message{max-width:93%}#compose{padding:8px}.chat{min-height:45vh}header button{font-size:11px;padding:6px}}

.message .preview{display:block;max-width:min(100%,320px);max-height:280px;min-height:60px;object-fit:contain;border-radius:6px;margin-top:8px}

#pending{max-height:25vh;overflow:auto;padding:8px 16px;border-top:1px solid #ccd4cc}.pending-item{padding:8px;background:#fff2d9;border-radius:8px;margin-bottom:8px;white-space:pre-wrap;overflow-wrap:anywhere}.pending-item small{display:block;color:#665522}.pending-item button{font-size:12px;margin-top:4px}button:disabled{opacity:.6;cursor:default}