:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #182433; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #1459a6; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: .45rem; background: #1459a6; color: #fff; padding: .65rem .9rem; }
.site-header { min-height: 4rem; padding: .75rem clamp(1rem, 5vw, 5rem); display: flex; gap: 1.25rem; align-items: center; background: #fff; border-bottom: 1px solid #dfe5ee; }
.site-header nav { display: flex; gap: 1rem; margin-right: auto; }.brand { font-weight: 800; text-decoration: none; color: #182433; }.text-button { background: none; color: #1459a6; padding: .25rem; }
.page { max-width: 1180px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }.page-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }.page-heading h1 { margin: .15rem 0; }.eyebrow { margin: 0; color: #526579; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }.context, .muted { color: #526579; }.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }.metric-card, .panel, .login-card, .empty-state { background: #fff; border: 1px solid #dfe5ee; border-radius: .75rem; padding: 1rem; }.metric-card span, .metric-card small { display: block; color: #526579; }.metric-card strong { display: block; font-size: 2rem; margin: .5rem 0; }.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1rem; }.panel h2 { margin-top: 0; font-size: 1.1rem; }.bar-row { display: grid; grid-template-columns: 5rem minmax(2rem, 1fr) 2rem; gap: .5rem; align-items: center; margin: .5rem 0; }.bar-row i { display: block; width: var(--bar-size); max-width: 100%; height: .85rem; border-radius: .4rem; background: #38a0a5; }.reason-list, .chat-summary-list, .chat-list, .message-history { list-style: none; padding: 0; margin: 0; }.reason-list li, .chat-summary-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid #edf0f4; }.panel-title { display: flex; justify-content: space-between; align-items: baseline; }.login-card { max-width: 28rem; margin: 12vh auto; }.stack { display: grid; gap: 1rem; }.stack label, .period-filter label, .search-form label { display: grid; gap: .35rem; }.stack input, .search-form input, select { border: 1px solid #aebdcb; border-radius: .4rem; padding: .6rem; background: #fff; }.alert { color: #9e1b32; }.chat-workspace { display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.4fr); gap: 1rem; }.search-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: 1rem; }.chat-list a { display: grid; gap: .2rem; padding: .75rem 0; border-top: 1px solid #edf0f4; text-decoration: none; }.chat-list span, .chat-list small { color: #526579; }.lead-detail { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }.lead-detail dt { color: #526579; }.lead-detail dd { margin: 0; }.message-history { display: grid; gap: .75rem; margin-top: 1rem; }.message-history li { max-width: 80%; padding: .65rem .75rem; border-radius: .7rem; background: #edf5ff; }.message-history li.outbound { justify-self: end; background: #e9f8f1; }.message-history p { margin: 0 0 .35rem; }.message-history time { color: #526579; font-size: .8rem; }.empty-detail { color: #526579; }
.chat-list a.selected { color: #0d3d73; font-weight: 700; }.chat-list a.selected::before { content: ""; border-left: 3px solid #38a0a5; margin-left: -0.75rem; }.bar-row progress { width: 100%; height: .85rem; accent-color: #38a0a5; }
@media (max-width: 800px) { .site-header { flex-wrap: wrap; }.site-header nav { order: 3; width: 100%; }.metric-grid, .dashboard-grid, .chat-workspace { grid-template-columns: 1fr; }.page-heading { align-items: start; flex-direction: column; }.search-form { grid-template-columns: 1fr; }.chat-detail-panel { min-height: 15rem; } }