:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #18212b; background: #f4f6f8; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.site-header { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: #162d3d; color: white; }
.site-header a { text-decoration: none; font-weight: 700; }
.site-header form { margin: 0; }
.link-button { padding: 0; border: 0; color: white; background: transparent; text-decoration: underline; }
.page-shell { width: min(100%, 52rem); min-height: calc(100vh - 3.5rem); margin: 0 auto; background: white; }
.push-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid #d9e0e5; background: #f4f8fb; }
.push-controls div { display: grid; gap: .15rem; }
.push-controls span { color: #64717d; font-size: .82rem; }
.push-controls button { min-width: 5.5rem; padding: .5rem .7rem; border: 0; border-radius: .4rem; color: white; background: #1261a0; }
.push-controls button:disabled { background: #8d99a3; }
.flash-messages { display: grid; gap: .4rem; padding: .75rem 1rem 0; }
.flash { margin: 0; padding: .65rem .75rem; border-radius: .4rem; background: #e7f0f7; }
.flash.error { color: #7b1d18; background: #fbe9e7; }
.flash.warning { color: #6c4b00; background: #fff3cd; }
.flash.success { color: #14532d; background: #dcfce7; }
.page-title { padding: 1.25rem 1rem .75rem; }
.page-title h1, .conversation-header h1 { margin: 0; font-size: 1.35rem; }
.page-title p, .conversation-header p { margin: .2rem 0 0; color: #64717d; }
.conversation-list { border-top: 1px solid #e3e7eb; }
.conversation-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; text-decoration: none; border-bottom: 1px solid #e3e7eb; }
.conversation-row:hover { background: #f8fafb; }
.conversation-main { min-width: 0; display: grid; gap: .25rem; }
.preview { overflow: hidden; color: #64717d; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { flex: none; display: grid; justify-items: end; gap: .4rem; color: #64717d; font-size: .8rem; }
.badge { min-width: 1.4rem; padding: .15rem .4rem; border-radius: 999px; color: white; background: #1261a0; text-align: center; }
.empty-state { margin: 2rem 1rem; padding: 2rem 1rem; border: 1px dashed #bac3cc; border-radius: .75rem; text-align: center; color: #64717d; }
.conversation-detail { min-height: calc(100vh - 3.5rem); display: grid; grid-template-rows: auto 1fr auto; }
.conversation-header { position: sticky; top: 0; display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid #e3e7eb; background: white; }
.conversation-header > a { font-size: 1.5rem; text-decoration: none; }
.message-thread { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; }
.message-bubble { max-width: 82%; padding: .7rem .85rem; border-radius: 1rem; background: #edf0f2; }
.message-bubble.inbound { align-self: flex-start; }
.message-bubble.outbound { align-self: flex-end; color: white; background: #1261a0; }
.message-bubble p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.message-bubble footer, .message-bubble span { display: block; font-size: .72rem; opacity: .75; }
.composer { position: sticky; bottom: 0; display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #e3e7eb; background: white; }
.composer textarea { flex: 1; resize: none; }
.composer button, .auth-card button { padding: .65rem .9rem; border: 0; border-radius: .4rem; color: white; background: #1261a0; }
.composer button:disabled { background: #8d99a3; }
.auth-card { width: min(calc(100% - 2rem), 24rem); margin: 4rem auto; padding: 1.25rem; border: 1px solid #d9dee3; border-radius: .75rem; }
.auth-card form { display: grid; gap: .65rem; }
.auth-card input { width: 100%; padding: .65rem; }
.error { color: #a12622; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 52rem) { .page-shell { border-inline: 1px solid #e3e7eb; } }