:root { font-family: system-ui, sans-serif; color: #1a2932; background: #f2f5f4; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 72rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); }
header, .brand, .form-row, .employee { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; }
header { justify-content: space-between; }
.brand span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem; background: #0b5b4a; color: white; font-size: 1.5rem; }
h1, h2 { margin: 0; }
p { line-height: 1.55; }
section { padding: clamp(1rem, 3vw, 1.75rem); background: white; border: 1px solid #dce5e0; border-radius: 1rem; margin-top: 1rem; }
button, .button, input, select { font: inherit; border-radius: .5rem; padding: .55rem .8rem; min-height: 2.7rem; }
button, .button { display: inline-block; cursor: pointer; text-decoration: none; background: #0b5b4a; color: white; border: 1px solid #0b5b4a; }
.secondary { background: white; color: #0b5b4a; }
button:disabled { opacity: .65; cursor: wait; }
input, select { border: 1px solid #889e96; color: inherit; background: white; max-width: 100%; }
label { display: grid; gap: .25rem; }
.form-row, .employee { align-items: end; margin-top: 1rem; }
.employee { border-top: 1px solid #dce5e0; padding: .9rem 0 0; }
.employee .details { min-width: min(16rem, 100%); flex: 1; overflow-wrap: anywhere; }
.employee .details p { margin: .25rem 0; }
#chat-frame-wrap { margin-top: 1rem; }
#chat-frame { display: block; width: 100%; height: min(78vh, 900px); min-height: 34rem; border: 1px solid #dce5e0; border-radius: .75rem; background: white; }
@media (max-width: 600px) { #chat-frame { height: 75vh; min-height: 28rem; } }
details, aside { margin-top: 1rem; }
aside { padding: 1rem; background: #eaf4ef; border-radius: .5rem; }
output { display: inline-block; font-family: monospace; margin-inline-end: .6rem; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #174aaa; outline-offset: 3px; }

.profile { display: flex; align-items: center; gap: 12px; }
.profile h2 { margin: 0; }
.profile img { border-radius: 50%; object-fit: cover; }
button.danger { color: #922f2f; background: #fff1f1; border: 1px solid #f2caca; }
#chat-frame { width: 100%; min-height: 75vh; border: 0; }