*{box-sizing:border-box}
:root{font:16px system-ui;color:#321e2b;background:#fff5ed}
body{margin:0}
[hidden]{display:none!important}
header{background:#ffe1e5;padding:1rem clamp(1rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
h1,h2,h3,p{margin:.4em 0 .65em}
main{max-width:1300px;margin:auto;padding:1rem}
section,article,aside,form{min-width:0}
#inbox{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:1rem}
aside,article,#admin,#login{padding:1rem;border-radius:1rem;background:#fff;box-shadow:0 3px 15px #87384f14}
#login{max-width:28rem;margin:2rem auto}
label{display:block;margin:.55rem 0}
input,select,textarea,button{font:inherit;border-radius:.55rem;padding:.6rem;border:1px solid #a97886}
input,textarea{width:100%}
textarea{display:block;min-height:5rem}
button{background:#8e2c56;color:white;cursor:pointer}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid #4f1764;outline-offset:2px}
.actions{display:flex;gap:.45rem;flex-wrap:wrap;margin:.7rem 0}
#categories button[aria-pressed=false]{background:#fff;color:#85234c}
.thread-button{display:block;width:100%;text-align:left;margin-top:.6rem;background:#fff3f6;color:inherit;overflow-wrap:anywhere}
.thread-button[aria-current=true]{background:#ffdbe5}
.message{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:.75rem;padding:.65rem;background:#fff0f2;margin:.45rem 0}
.message.out{background:#f5e6ff}
small{display:block;color:#663e55}
#messages{max-height:45dvh;overflow-y:auto}
.chat{max-width:36rem}
#status,#notice{color:#85234c}
fieldset{margin:1rem 0;border-radius:.6rem}
@media(max-width:690px){#inbox{grid-template-columns:1fr}#threads{max-height:35vh;overflow:auto}}

.chat-header{background:transparent;padding:0;align-items:baseline}
.chat-header a,.contact a{color:#85234c}
.contact{margin-top:1rem;padding:1rem;border:1px solid #a97886;border-radius:.75rem;background:white}