:root {
  color-scheme: light;
  font: 100%/1.55 system-ui, sans-serif;
  color: #132c37;
  background: #edf4f5;
  --brand: #006b70;
  --muted: #435960;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: clamp(.75rem, 4vw, 2.5rem); }
.panel { max-inline-size: 40rem; margin-inline: auto; padding: clamp(1rem, 4vw, 2.25rem); border-radius: 1rem; background: #fff; box-shadow: 0 5px 24px #193b4017; }
h1, h2, h3, p { margin-block: 0 .65rem; }
h1 { line-height: 1.15; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
header { margin-block-end: 1.2rem; }
.brand { color: var(--brand); font-weight: 700; }
section + section { margin-block-start: 1.1rem; }
.contact { background: #eff7f7; border-radius: .65rem; padding: .8rem 1rem; }
.contact p, #email-help { color: var(--muted); }
.actions, .chat-header { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: center; }
.extra-actions { margin-block-start: .7rem; }
.chat-header { justify-content: space-between; margin-block-end: .55rem; }
.contact a { display: inline-flex; align-items: center; min-block-size: 3rem; overflow-wrap: anywhere; }
a { color: #005c62; }
form { display: grid; gap: .45rem; margin-block-start: .6rem; }
form + form { margin-block-start: 1.1rem; }
label { font-weight: 650; }
input, textarea, button { font: inherit; font-size: max(1rem, 1em); }
input, textarea { inline-size: 100%; min-block-size: 3rem; padding: .55rem .7rem; border: 1px solid #687c83; border-radius: .45rem; }
textarea { resize: vertical; }
button { justify-self: start; padding: .55rem .9rem; min-block-size: 3rem; border: 1px solid var(--brand); border-radius: .45rem; background: var(--brand); color: white; font-weight: 650; cursor: pointer; }
.secondary { color: var(--brand); background: white; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #165ebb; outline-offset: 3px; }
.status { color: #874319; margin-block: .7rem 0; }
.status:empty { margin: 0; }
.messages { display: grid; align-content: start; gap: .7rem; min-block-size: 6rem; max-block-size: 36vh; max-block-size: 36dvh; overflow: auto; padding: .65rem; border: 1px solid #9eb1b8; border-radius: .65rem; overscroll-behavior: contain; }
.message { padding: .6rem .75rem; border-radius: .55rem; background: #f0f5f6; overflow-wrap: anywhere; }
.message.user { background: #deeff0; }
.message p { margin: .2rem 0 0; white-space: pre-wrap; }
.message ul { margin-block: .5rem 0; padding-inline-start: 1.25rem; }
.message li { margin-block-end: .35rem; }
.material-list article { margin-block: .55rem; padding: .65rem .85rem; background: #eff7f7; border-radius: .55rem; }
.material-list ul { padding-inline-start: 1.25rem; }
.material-list a, #support-account { overflow-wrap: anywhere; }
@media (max-width: 30rem) { .actions button { inline-size: 100%; } }