@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap");

:root {
  --canvas: #f5f3ef;
  --paper: #ffffff;
  --paper-soft: #faf9f7;
  --ink: #312e33;
  --muted: #777178;
  --muted-2: #a29da1;
  --line: #e7e3de;
  --line-dark: #d7d0ca;
  --plum: #694e63;
  --plum-dark: #493544;
  --plum-soft: #f0e9ee;
  --sage: #819985;
  --sage-soft: #edf2ed;
  --clay: #c77e66;
  --clay-soft: #f7eae5;
  --sand: #d8b56a;
  --sand-soft: #f8f0dc;
  --danger: #ac5656;
  --danger-soft: #faeceb;
  --success: #467456;
  --shadow-sm: 0 1px 2px rgba(49, 38, 46, 0.04), 0 5px 16px rgba(49, 38, 46, 0.04);
  --shadow-lg: 0 24px 70px rgba(49, 38, 46, 0.16), 0 6px 22px rgba(49, 38, 46, 0.08);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif; background: var(--canvas); }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(105, 78, 99, .24); outline-offset: 2px; }

.dashboard-page { overflow: hidden; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: relative; z-index: 30; display: flex; width: 248px; height: 100vh; flex: 0 0 248px; flex-direction: column; padding: 28px 18px 17px; color: #f8f4f6; background: #373238; }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 9px 26px; }
.brand-mark { position: relative; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px 12px 12px 4px; background: linear-gradient(145deg, #a07f95, #684d61); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.brand-mark span { position: absolute; bottom: 8px; width: 2px; border-radius: 5px; background: #fff; transform-origin: bottom; }
.brand-mark span:nth-child(1) { left: 11px; height: 10px; transform: rotate(-22deg); }
.brand-mark span:nth-child(2) { left: 17px; height: 17px; }
.brand-mark span:nth-child(3) { right: 9px; height: 12px; transform: rotate(20deg); }
.brand-lockup strong { display: block; font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: -.02em; }
.brand-lockup small { display: block; margin-top: 2px; color: #bdb5bc; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.workspace-switcher { display:flex; width:100%; min-height:50px; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.09); border-radius:11px; margin-bottom:7px; padding:8px; color:#f0eaee; background:rgba(255,255,255,.045); cursor:pointer; text-align:left; }
.workspace-logo { display:grid; width:31px; height:31px; flex:0 0 auto; place-items:center; border-radius:9px; color:#425044; background:#cfdbcc; font-family:Georgia,serif; font-size:14px; }
.workspace-switcher > span:nth-child(2) { display:grid; min-width:0; gap:2px; }.workspace-switcher strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.workspace-switcher small { color:#a69da4; font-size:8px; }.workspace-switcher b { margin-left:auto; color:#91878f; }
.primary-nav { display: grid; gap: 3px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.nav-label { margin: 14px 10px 6px; color: #948c93; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-item { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 11px; border-radius: 10px; padding: 0 10px; color: #c9c2c8; background: transparent; cursor: pointer; font-size: 12px; text-align: left; transition: color .16s ease, background .16s ease, transform .16s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.is-active { color: white; background: rgba(255,255,255,.105); box-shadow: inset 2px 0 #b692aa; }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; color: #aaa0a8; font-size: 18px; font-weight: 500; }
.nav-item.is-active .nav-icon { color: #d9c5d3; }
.nav-count { min-width: 19px; margin-left: auto; border-radius: 999px; padding: 2px 6px; color: #fff; background: #a4686b; font-size: 9px; text-align: center; }
.nav-count.subtle { color: #cfc6cc; background: rgba(255,255,255,.09); }
.sidebar-foot { display: grid; gap: 13px; margin-top: auto; padding-top: 15px; }
.plan-mini { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.035); }
.plan-mini > div:first-child { display: flex; justify-content: space-between; color: #bdb5bc; font-size: 9px; }
.plan-mini strong { color: #eee8ec; font-size: 9px; }
.plan-mini small { display: block; margin-top: 7px; color: #91898f; font-size: 9px; }
.progress { height: 4px; overflow: hidden; border-radius: 4px; margin-top: 8px; background: rgba(255,255,255,.1); }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a9829c, #ca9c8d); }
.progress.large { height: 8px; margin: 16px 0; background: #eeeae6; }
.profile-button { display: flex; align-items: center; gap: 9px; width: 100%; border-radius: 11px; padding: 8px; color: #e7e1e5; background: transparent; cursor: pointer; text-align: left; }
.profile-button:hover { background: rgba(255,255,255,.05); }
.avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: #785c70; font-size: 10px; font-style: normal; font-weight: 700; }
.profile-button > span:nth-child(2) { display: grid; gap: 2px; }
.profile-button strong { font-size: 10px; }
.profile-button small { color: #9f969d; font-size: 9px; }
.profile-button b { margin-left: auto; color: #928990; letter-spacing: 2px; }

.main-panel { min-width: 0; height: 100vh; flex: 1; overflow-y: auto; background: var(--canvas); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 65px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(218,213,207,.82); padding: 0 30px; background: rgba(245,243,239,.9); backdrop-filter: blur(16px); }
.global-search { display: flex; width: min(430px, 42vw); height: 36px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; color: var(--muted-2); background: rgba(255,255,255,.72); }
.global-search > span { font-size: 18px; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.global-search kbd { border: 1px solid var(--line); border-bottom-color: var(--line-dark); border-radius: 5px; padding: 2px 5px; color: #aaa4a8; background: white; font-family: inherit; font-size: 8px; }
.top-actions, .heading-actions { display: flex; align-items: center; gap: 9px; }
.test-badge { display: inline-flex; height: 28px; align-items: center; gap: 7px; border: 1px solid #dfcfae; border-radius: 999px; padding: 0 10px; color: #82672f; background: #faf3e2; font-size: 9px; font-weight: 600; }
.test-badge i { width: 6px; height: 6px; border-radius: 50%; background: #c89c41; box-shadow: 0 0 0 3px rgba(200,156,65,.14); }
.icon-control { position: relative; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 9px; color: #716a70; background: rgba(255,255,255,.72); cursor: pointer; font-size: 16px; }
.icon-control i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); }
.mobile-brand { display: none; }

.view { display: none; max-width: 1500px; margin: 0 auto; padding: 29px 32px 55px; animation: viewIn .24s ease both; }
.view.is-active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 1px 0 8px; font-family: Manrope, sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 650; letter-spacing: -.045em; }
.page-heading p:not(.eyebrow) { max-width: 640px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.compact-heading { align-items: center; }
.compact-heading h1 { margin-bottom: 5px; font-size: 29px; }
.eyebrow, .clinic-eyebrow { margin: 0 0 6px; color: var(--plum); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; padding: 0 13px; cursor: pointer; font-size: 10px; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--plum); box-shadow: 0 5px 14px rgba(91,64,84,.15); }
.button.primary:hover { background: var(--plum-dark); }
.button.secondary { border-color: var(--line-dark); color: #595258; background: rgba(255,255,255,.74); }
.button.secondary:hover { background: white; box-shadow: var(--shadow-sm); }
.button.compact { min-height: 31px; padding: 0 10px; font-size: 9px; }
.button.full { width: 100%; }
.sparkle { font-size: 13px; }
.text-button { border: 0; padding: 0; color: var(--plum); background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.select-button { min-height: 31px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; color: #6e676d; background: #fff; cursor: pointer; font-size: 9px; }

.demo-banner { display: flex; align-items: center; gap: 14px; min-height: 75px; border: 1px solid #ded5da; border-radius: 14px; margin-bottom: 17px; padding: 13px 16px; background: linear-gradient(100deg, #f5edf2, #fff 55%, #eef3ee); box-shadow: var(--shadow-sm); }
.demo-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: white; background: var(--plum); box-shadow: 0 7px 18px rgba(91,64,84,.2); }
.demo-banner strong { font-size: 12px; }
.demo-banner p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.channel-pills { display: flex; gap: 7px; margin-left: auto; }
.channel-pills span { border: 1px solid #d8e3d8; border-radius: 999px; padding: 6px 9px; color: #53735a; background: rgba(255,255,255,.8); font-size: 8px; font-weight: 700; }
.channel-pills span::first-letter { color: #58a06c; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 13px; }
.metric-card { min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: var(--paper); box-shadow: var(--shadow-sm); }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 700; }
.metric-icon.plum { color: var(--plum); background: var(--plum-soft); }
.metric-icon.moss { color: #648169; background: var(--sage-soft); }
.metric-icon.clay { color: #af664f; background: var(--clay-soft); }
.metric-icon.sand { color: #9a7427; background: var(--sand-soft); }
.trend { border-radius: 999px; padding: 4px 7px; font-size: 8px; font-weight: 700; }
.trend.up { color: #4f7b5c; background: #eaf3ec; }
.trend.neutral { color: #746c72; background: #f2f0ee; }
.trend.warn { color: #9a6a37; background: #faf0dc; }
.metric-card > p { margin: 0 0 5px; color: var(--muted); font-size: 10px; }
.metric-card > strong { font-family: Manrope, sans-serif; font-size: 27px; letter-spacing: -.04em; }
.metric-split { display: flex; align-items: center; gap: 13px; margin-top: 12px; color: #8a8388; font-size: 8px; }
.metric-split span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.dot.voice, .chart-legend i.voice { background: var(--plum); }
.dot.chat, .chart-legend i.chat { background: var(--sage); }
.dot.after { background: var(--clay); }
.metric-caption { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); gap: 13px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 17px 13px; }
.panel-head h2 { margin: 0 0 3px; font-family: Manrope, sans-serif; font-size: 13px; letter-spacing: -.02em; }
.panel-head p { margin: 0; color: var(--muted); font-size: 8px; }
.count-badge { border-radius: 999px; padding: 4px 8px; color: #99544b; background: var(--clay-soft); font-size: 8px; font-weight: 700; }
.conversation-table { border-top: 1px solid var(--line); }
.overview-conversation { display: grid; grid-template-columns: 38px minmax(120px, 1fr) minmax(145px, 1.2fr) 100px 50px; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid #efedea; padding: 7px 17px; cursor: pointer; transition: background .14s ease; }
.overview-conversation:last-child { border-bottom: 0; }
.overview-conversation:hover { background: #fbfaf8; }
.channel-bubble { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; font-size: 12px; font-weight: 700; }
.channel-bubble.voice { color: var(--plum); background: var(--plum-soft); }
.channel-bubble.chat { color: #537359; background: var(--sage-soft); }
.overview-conversation strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.overview-conversation small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.overview-summary { color: #756e73; font-size: 8px; line-height: 1.4; }
.outcome-chip, .tag, .approved-chip, .review-chip, .safety-chip, .paid-chip { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 4px 7px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.outcome-chip.booked { color: #467455; background: #e8f2eb; }
.outcome-chip.answered { color: #64546c; background: #efeaf2; }
.outcome-chip.callback { color: #906429; background: #f9efd9; }
.outcome-chip.escalated { color: #9d4e4e; background: #fae9e8; }
.outcome-chip.transferred { color: #4e6f7e; background: #e9f1f4; }
.overview-time { color: #9b9599; font-size: 8px; text-align: right; }
.queue-list { border-top: 1px solid var(--line); }
.queue-item { display: flex; width: 100%; min-height: 63px; align-items: center; gap: 10px; border-bottom: 1px solid #efedea; padding: 9px 16px; background: transparent; cursor: pointer; text-align: left; }
.queue-item:hover { background: #fbfaf8; }
.queue-symbol { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 800; }
.queue-symbol.urgent { color: #9e4d4d; background: var(--danger-soft); }
.queue-symbol.callback { color: #94662b; background: var(--sand-soft); }
.queue-symbol.answer { color: #5e5a72; background: #eeecf4; }
.queue-item > span:nth-child(2) { min-width: 0; }
.queue-item strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.queue-item small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.queue-item > b { margin-left: auto; color: var(--plum); font-size: 8px; }
.queue-footer { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; border-radius: 0 0 14px 14px; padding: 11px; color: var(--plum); background: #fbfaf9; cursor: pointer; font-size: 8px; font-weight: 700; }
.queue-footer span { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 50%; color: white; background: var(--plum); font-size: 7px; }
.performance-panel, .usage-panel { min-height: 295px; }
.performance-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.performance-stats div { padding: 12px 17px; border-right: 1px solid var(--line); }
.performance-stats div:last-child { border-right: 0; }
.performance-stats span { display: block; color: var(--muted); font-size: 8px; }
.performance-stats strong { display: block; margin: 4px 0 2px; font-family: Manrope, sans-serif; font-size: 18px; }
.performance-stats small { font-size: 7px; }
.positive { color: var(--success); }
.mini-chart { display: flex; height: 125px; gap: 10px; padding: 15px 18px 3px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; color: #aaa4a8; font-size: 7px; }
.chart-bars { display: flex; flex: 1; align-items: flex-end; justify-content: space-between; gap: 7px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, #fff 0, #fff 26px, #f0edea 27px); }
.chart-bars div { position: relative; display: flex; height: 100%; flex: 1; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-bars i, .chart-bars b { display: block; width: 35%; border-radius: 3px 3px 0 0; }
.chart-bars i { background: #73566c; }
.chart-bars b { background: #92a995; }
.chart-bars span { position: absolute; bottom: -13px; color: #aaa4a8; font-size: 7px; }
.chart-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 8px; }
.performance-panel > .chart-legend { justify-content: center; padding: 15px 0 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 6px; height: 6px; border-radius: 2px; }
.usage-panel { position: relative; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto 1fr; }
.usage-panel .panel-head { grid-column: 1 / -1; }
.usage-ring { display: grid; width: 94px; height: 94px; place-items: center; border-radius: 50%; margin: 20px 0 0 20px; background: conic-gradient(var(--plum) calc(var(--usage) * 1%), #ece8e4 0); }
.usage-ring::before { content: ""; grid-area: 1 / 1; width: 72px; height: 72px; border-radius: 50%; background: #fff; }
.usage-ring div { z-index: 1; grid-area: 1 / 1; text-align: center; }
.usage-ring strong { display: block; font-family: Manrope, sans-serif; font-size: 20px; }
.usage-ring small { color: var(--muted); font-size: 8px; }
.usage-total { padding: 24px 15px 0; }
.usage-total strong { display: block; font-family: Manrope, sans-serif; font-size: 24px; }
.usage-total span { color: var(--muted); font-size: 8px; }
.usage-lines { display: grid; grid-column: 1 / -1; gap: 7px; margin: 12px 17px 0; border-top: 1px solid var(--line); padding-top: 11px; }
.usage-lines div { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; }
.usage-lines span { display: flex; align-items: center; gap: 6px; }
.usage-lines strong { color: var(--ink); }
.usage-note { grid-column: 1 / -1; margin: 11px 17px 14px; border-radius: 8px; padding: 8px; color: #79643b; background: #faf3e2; font-size: 7px; line-height: 1.4; }

/* Shared inbox */
.inbox-shell { display: grid; grid-template-columns: 345px minmax(0, 1fr); height: calc(100vh - 190px); min-height: 570px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow-sm); }
.inbox-list-panel { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); }
.inbox-tools { padding: 14px 13px 11px; border-bottom: 1px solid var(--line); }
.inbox-search, .records-actions label { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; color: var(--muted-2); background: #fbfaf9; }
.inbox-search input, .records-actions input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 9px; }
.filter-row { display: flex; gap: 5px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.filter-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--muted); background: white; cursor: pointer; font-size: 7px; }
.filter-chip span { margin-left: 2px; }
.filter-chip.is-active { border-color: var(--plum); color: white; background: var(--plum); }
.conversation-list { min-height: 0; flex: 1; overflow-y: auto; }
.conversation-list-item { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; gap: 9px; width: 100%; min-height: 78px; border-bottom: 1px solid #efedea; padding: 11px 12px; background: transparent; cursor: pointer; text-align: left; }
.conversation-list-item:hover { background: #fbfaf8; }
.conversation-list-item.is-active { background: #f6f1f4; box-shadow: inset 3px 0 var(--plum); }
.conversation-list-item .channel-bubble { width: 33px; height: 33px; }
.conversation-item-copy { min-width: 0; }
.conversation-item-top { display: flex; align-items: center; gap: 5px; }
.conversation-item-top strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item-top i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--clay); }
.conversation-item-copy > span { display: block; margin: 3px 0 4px; color: var(--muted); font-size: 7px; }
.conversation-item-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: #696268; font-size: 8px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.conversation-list-item > time { color: var(--muted-2); font-size: 7px; }
.conversation-detail { min-width: 0; overflow-y: auto; background: #fff; }
.detail-header { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; border-bottom: 1px solid var(--line); padding: 12px 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.detail-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.detail-person .avatar { width: 37px; height: 37px; border-radius: 11px; }
.detail-person h2 { margin: 0; font-size: 12px; }
.detail-person p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.detail-header-actions { display: flex; align-items: center; gap: 6px; }
.detail-content { padding: 16px 18px 30px; }
.summary-card { border: 1px solid #e1d8de; border-radius: 12px; padding: 13px; background: linear-gradient(120deg, #f7f1f5, #fbfaf9); }
.summary-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.summary-label span { color: var(--plum); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.summary-label small { color: var(--muted); font-size: 7px; }
.summary-card p { margin: 0; color: #5f585e; font-size: 9px; line-height: 1.55; }
.outcome-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tag { color: #696168; background: #f0eeec; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(210px, .7fr); gap: 14px; margin-top: 14px; }
.transcript-section, .detail-sidebar > section { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.section-subhead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 11px 12px; }
.section-subhead h3 { margin: 0; font-size: 10px; }
.section-subhead span { color: var(--muted); font-size: 7px; }
.transcript { display: grid; gap: 13px; padding: 13px; }
.transcript-line { display: grid; grid-template-columns: 31px minmax(0,1fr) 32px; gap: 8px; }
.speaker { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: white; background: #8c7185; font-size: 7px; font-weight: 700; }
.speaker.customer { color: #5e6f61; background: #e5eee6; }
.transcript-line strong { display: block; margin-bottom: 3px; font-size: 8px; }
.transcript-line p { margin: 0; color: #625b61; font-size: 8px; line-height: 1.5; }
.transcript-line time { color: var(--muted-2); font-size: 7px; text-align: right; }
.safety-transcript { border-left: 3px solid var(--danger); border-radius: 6px; padding: 8px; background: var(--danger-soft); }
.recording-placeholder { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 7px; }
.recording-placeholder button { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: white; background: var(--plum); cursor: pointer; }
.wave-mini { display: flex; align-items: center; gap: 2px; height: 20px; }
.wave-mini i { width: 2px; border-radius: 2px; background: #b6adb3; }
.wave-mini i:nth-child(1), .wave-mini i:nth-child(5) { height: 6px; }.wave-mini i:nth-child(2), .wave-mini i:nth-child(4) { height: 13px; }.wave-mini i:nth-child(3) { height: 18px; }
.detail-sidebar { display: grid; align-content: start; gap: 10px; }
.detail-sidebar > section { padding: 12px; }
.detail-sidebar h3 { margin: 0 0 10px; font-size: 9px; }
.info-list { display: grid; gap: 9px; }
.info-list div { display: grid; gap: 2px; }
.info-list span { color: var(--muted); font-size: 7px; }
.info-list strong { font-size: 8px; font-weight: 600; }
.followup-card { background: #fffdf8 !important; }
.followup-state { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 9px; color: #755c2f; background: var(--sand-soft); }
.followup-state span { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: white; background: #c39749; font-size: 8px; }
.followup-state strong { display: block; font-size: 8px; }
.followup-state small { display: block; margin-top: 3px; font-size: 7px; }
.followup-actions { display: flex; gap: 5px; margin-top: 8px; }
.notes-box textarea { width: 100%; min-height: 76px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: 0; padding: 8px; background: #fbfaf9; font-size: 8px; line-height: 1.45; }
.notes-box button { width: 100%; margin-top: 7px; }
.empty-state { display: grid; min-height: 300px; place-items: center; padding: 30px; color: var(--muted); font-size: 11px; }

/* Records */
.source-note { display: flex; align-items: center; gap: 10px; border: 1px solid #d9e4da; border-radius: 12px; margin-bottom: 13px; padding: 11px 14px; background: #f2f6f2; }
.source-note > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: white; background: var(--sage); font-size: 9px; }
.source-note p { margin: 0; color: #687069; font-size: 9px; }
.source-note strong { color: #4f6153; }
.source-note button { margin-left: auto; color: var(--plum); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }
.lead-metrics .metric-card { padding: 14px 16px; }
.lead-metrics .metric-card > strong { font-size: 23px; }
.records-panel { overflow: hidden; }
.records-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 14px; }
.segmented { display: flex; border-radius: 8px; padding: 3px; background: #f0eeeb; }
.segmented button { border-radius: 6px; padding: 6px 11px; color: var(--muted); background: transparent; cursor: pointer; font-size: 8px; font-weight: 600; }
.segmented button.is-active { color: var(--ink); background: white; box-shadow: 0 1px 5px rgba(44,34,41,.08); }
.records-actions { display: flex; align-items: center; gap: 6px; }
.records-actions label { width: 180px; height: 31px; }
.records-table-wrap { overflow-x: auto; }
.records-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.records-table th { height: 37px; padding: 0 12px; color: #989196; background: #fbfaf9; font-size: 7px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.records-table td { height: 58px; border-top: 1px solid #efedea; padding: 8px 12px; color: #696268; font-size: 8px; vertical-align: middle; }
.record-person { display: flex; align-items: center; gap: 8px; }
.record-person .avatar { width: 29px; height: 29px; border-radius: 8px; }
.record-person strong, .record-person small { display: block; }
.record-person strong { color: var(--ink); font-size: 8px; }
.record-person small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.channel-label { display: inline-flex; align-items: center; gap: 5px; }
.owner-mini { display: flex; align-items: center; gap: 5px; }
.owner-mini i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: white; background: #785c70; font-size: 6px; font-style: normal; }
.row-action { color: var(--plum); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }

/* Settings */
.save-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: #69a075; }
.settings-banner { display: flex; align-items: center; gap: 12px; border: 1px solid #ded7db; border-radius: 13px; margin-bottom: 13px; padding: 12px 14px; background: linear-gradient(100deg,#f4edf2,#fff); }
.settings-banner > span:first-child { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: white; background: var(--plum); }
.settings-banner strong { font-size: 10px; }
.settings-banner p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.sync-chip { margin-left: auto; border-radius: 999px; padding: 5px 8px; color: #51705a; background: var(--sage-soft); font-size: 7px; font-weight: 700; }
.settings-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); align-items: start; gap: 13px; }
.settings-nav { display: grid; border: 1px solid var(--line); border-radius: 12px; padding: 7px; background: white; box-shadow: var(--shadow-sm); }
.settings-nav button { display: flex; min-height: 39px; align-items: center; justify-content: space-between; border-radius: 8px; padding: 0 10px; color: #746d73; background: transparent; cursor: pointer; font-size: 9px; text-align: left; }
.settings-nav button:hover { background: #f8f6f4; }
.settings-nav button.is-active { color: var(--plum); background: var(--plum-soft); font-weight: 700; }
.settings-nav button span { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; color: var(--muted); background: white; font-size: 7px; }
.settings-content { min-width: 0; }
.settings-panel { display: none; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: white; box-shadow: var(--shadow-sm); animation: viewIn .2s ease both; }
.settings-panel.is-active { display: block; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); margin: -2px 0 17px; padding-bottom: 15px; }
.settings-head h2 { margin: 0 0 4px; font-family: Manrope, sans-serif; font-size: 15px; }
.settings-head p { margin: 0; color: var(--muted); font-size: 8px; }
.template-note { display:flex; align-items:center; gap:10px; border:1px solid #ddd4da; border-radius:10px; margin-bottom:14px; padding:10px; background:#f8f4f7; }.template-note span { flex:0 0 auto; border-radius:999px; padding:5px 8px; color:white; background:var(--plum); font-size:8px; font-weight:700; }.template-note p { margin:0; color:#6e656c; font-size:9px; line-height:1.5; }
.approved-chip { color: #4f7458; background: var(--sage-soft); }
.review-chip { color: #8c662e; background: var(--sand-soft); }
.safety-chip { color: #9b5050; background: var(--danger-soft); }
.paid-chip { color: #4f7458; background: var(--sage-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field { display: grid; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field > span { color: #696268; font-size: 8px; font-weight: 600; }
.field input:not([type="range"]), .field select { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px; outline: 0; padding: 0 10px; background: #fbfaf9; font-size: 9px; }
.field input:focus, .field select:focus { border-color: #ac93a5; box-shadow: 0 0 0 3px rgba(105,78,99,.08); }
.settings-section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 17px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title h3 { margin: 0 0 3px; font-size: 10px; }
.section-title p { margin: 0; color: var(--muted); font-size: 8px; }
.hours-list { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.hours-list span { display: grid; gap: 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 9px; color: #6d666c; font-size: 7px; }
.hours-list span:nth-child(3n) { border-right: 0; }.hours-list span:nth-child(n+4) { border-bottom: 0; }
.hours-list b { color: var(--ink); font-size: 8px; }
.hours-list .closed { color: #9a7777; background: #fbf5f4; }
.service-list { display: grid; gap: 7px; }
.service-list > div { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.service-symbol { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--plum); background: var(--plum-soft); font-size: 7px; font-weight: 700; }
.service-list p { display: grid; gap: 3px; flex: 1; margin: 0; }
.service-list strong { font-size: 8px; }.service-list small { color: var(--muted); font-size: 7px; }
.knowledge-status { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 13px; background: #fbfaf9; }
.knowledge-status div { display: grid; gap: 3px; border-right: 1px solid var(--line); padding: 10px; }
.knowledge-status div:last-child { border-right: 0; }.knowledge-status strong { font-size: 9px; }.knowledge-status span { color: var(--muted); font-size: 7px; }
.faq-card { border: 1px solid var(--line); border-radius: 11px; padding: 13px; }
.faq-card.featured { border-color: #dbcbd5; background: #faf5f8; }
.faq-top, .faq-foot { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 7px; }
.faq-top { justify-content: space-between; }.faq-card h3 { margin: 13px 0 6px; font-size: 11px; }.faq-card p { margin-bottom: 13px; color: #625b61; font-size: 9px; line-height: 1.55; }
.faq-foot span:not(.approved-chip) { border-radius: 999px; padding: 4px 7px; background: white; }.faq-foot button { margin-left: auto; color: var(--plum); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }
.faq-list { display: grid; gap: 7px; margin-top: 10px; }
.faq-list article { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.faq-list article div { flex: 1; }.faq-list h3 { margin: 0 0 4px; font-size: 9px; }.faq-list p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.channel-config-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.channel-config-grid > article, .test-grid > article { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfaf9; }
.channel-card-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; font-size: 15px; }
.channel-card-icon.voice { color: var(--plum); background: var(--plum-soft); }.channel-card-icon.chat { color: #55725a; background: var(--sage-soft); }
.channel-config-grid h3 { margin: 12px 0 5px; font-size: 11px; }.channel-config-grid > article > p { min-height: 36px; margin: 0 0 13px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.channel-config-grid .field { margin-bottom: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.switch-row span { display: grid; gap: 3px; }.switch-row strong { font-size: 8px; }.switch-row small { color: var(--muted); font-size: 7px; }
.switch-row input { width: 30px; height: 17px; accent-color: var(--plum); }
.greeting-box { border-left: 3px solid var(--plum); border-radius: 0 8px 8px 0; padding: 12px 14px; color: #5e565d; background: #f8f4f7; font-size: 9px; line-height: 1.6; }
.action-list { display: grid; gap: 7px; }
.action-list label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.action-check { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: #51765b; background: var(--sage-soft); font-size: 9px; font-weight: 700; }
.action-list label > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }.action-list strong { font-size: 9px; }.action-list small { color: var(--muted); font-size: 7px; }.action-list input { accent-color: var(--plum); }
.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 14px; }
.policy-grid article { border-radius: 10px; padding: 12px; background: #f7f5f2; }.policy-grid h3 { margin: 0 0 6px; font-size: 9px; }.policy-grid p { margin: 0 0 9px; color: var(--muted); font-size: 8px; line-height: 1.5; }.policy-grid span { color: var(--plum); font-size: 7px; font-weight: 700; }
.safety-banner { display: flex; gap: 12px; border: 1px solid #ebcecc; border-radius: 11px; padding: 13px; background: #fcf1f0; }.safety-banner > span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: white; background: var(--danger); font-weight: 800; }.safety-banner strong { font-size: 10px; }.safety-banner p { margin: 4px 0 0; color: #805c5c; font-size: 8px; line-height: 1.5; }
.rule-list { display: grid; gap: 8px; margin-top: 12px; }.rule-list article { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }.rule-number { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--plum); background: var(--plum-soft); font-size: 7px; font-weight: 700; }.rule-list h3 { margin: 0 0 4px; font-size: 9px; }.rule-list p { margin: 0 0 7px; color: var(--muted); font-size: 8px; line-height: 1.5; }.flow-text { color: var(--plum); font-size: 7px; font-weight: 700; }
.safety-example { margin-top: 12px; border: 1px solid #ead1cf; border-radius: 11px; padding: 13px; background: #fffafa; }.safety-example h3 { margin: 12px 0 6px; font-size: 11px; }.safety-example blockquote { margin: 0; border-left: 2px solid var(--danger); padding-left: 11px; color: #765e5e; font-size: 9px; line-height: 1.6; }.safety-example > div { display: flex; gap: 6px; margin-top: 11px; }.safety-example > div span { border-radius: 999px; padding: 4px 7px; color: #56725b; background: var(--sage-soft); font-size: 7px; }
.compact-switch { margin: 0; }.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.test-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--plum); background: var(--plum-soft); font-size: 12px; font-weight: 700; }.test-grid h3 { margin: 10px 0 5px; font-size: 9px; }.test-grid p { min-height: 45px; margin: 0 0 10px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.parity-table { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.parity-table > div { display: grid; grid-template-columns: 1fr 80px 80px; border-top: 1px solid var(--line); }.parity-table > div:first-child { border-top: 0; }.parity-table span, .parity-table b { padding: 9px 11px; font-size: 8px; }.parity-table b { color: #4e7659; text-align: center; }.parity-head { color: var(--muted); background: #f7f5f3; font-weight: 700; }

/* Analytics */
.analytics-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.8fr); gap: 13px; }.reason-chart { display: grid; gap: 14px; border-top: 1px solid var(--line); padding: 16px 17px; }.reason-chart > div { display: grid; grid-template-columns: 150px minmax(100px, 1fr) 35px; align-items: center; gap: 12px; }.reason-chart span { display: grid; gap: 3px; }.reason-chart b { font-size: 8px; }.reason-chart small { color: var(--muted); font-size: 7px; }.reason-chart > div > div { display: flex; height: 9px; overflow: hidden; border-radius: 999px; background: #f1eeeb; }.reason-chart i, .reason-chart > div > div b { display: block; height: 100%; }.reason-chart i { background: var(--plum); }.reason-chart > div > div b { background: var(--sage); }.reason-chart > div > strong { font-size: 8px; text-align: right; }
.donut-row { display: flex; align-items: center; gap: 23px; border-top: 1px solid var(--line); padding: 25px 18px; }.outcome-donut { width: 130px; height: 130px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#6d4d64 0 42%, #8aa58d 42% 67%, #cf856d 67% 81%, #d9b568 81% 87%, #b85b5b 87% 95%, #d8d3cc 95%); mask: radial-gradient(circle, transparent 0 48%, #000 50%); }.outcome-legend { display: grid; flex: 1; gap: 8px; }.outcome-legend div { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 7px; }.outcome-legend i { width: 6px; height: 6px; border-radius: 2px; }.outcome-legend strong { color: var(--ink); }
.usage-trend-panel { grid-column: 1 / -1; }.line-chart { position: relative; height: 230px; border-top: 1px solid var(--line); padding: 20px 22px 27px; }.line-grid { position: absolute; inset: 20px 22px 27px; display: flex; flex-direction: column; justify-content: space-between; }.line-grid span { border-top: 1px solid #efedea; }.line-chart svg { position: relative; width: 100%; height: 175px; overflow: visible; }.line-labels { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 7px; }.usage-summary { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.usage-summary > div { display: flex; align-items: center; justify-content: center; gap: 9px; border-right: 1px solid var(--line); padding: 12px; }.usage-summary > div:last-child { border-right: 0; }.usage-summary p { display: grid; gap: 2px; margin: 0; }.usage-summary strong { font-size: 11px; }.usage-summary small { color: var(--muted); font-size: 7px; }
.question-list { border-top: 1px solid var(--line); }.question-list article { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding: 13px 15px; }.question-list article > div { flex: 1; }.question-list span { color: var(--clay); font-size: 7px; font-weight: 700; }.question-list h3 { margin: 4px 0; font-size: 8px; }.question-list p { margin: 0; color: var(--muted); font-size: 7px; }.question-list button { color: var(--plum); background: transparent; cursor: pointer; font-size: 7px; font-weight: 700; }.safe-stat { display: flex; align-items: center; gap: 12px; margin: 13px; border-radius: 10px; padding: 12px; background: var(--sage-soft); }.safe-stat > span { font-family: Manrope,sans-serif; font-size: 21px; color:#52705a; }.safe-stat p { display: grid; gap: 3px; margin: 0; }.safe-stat strong { font-size: 8px; }.safe-stat small { color: var(--muted); font-size: 7px; }

/* Lower priority product views */
.channel-overview-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-bottom: 13px; }.channel-manage-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: white; box-shadow: var(--shadow-sm); }.channel-manage-head { display: flex; align-items: flex-start; justify-content: space-between; }.status-online { color: #52765a; font-size: 8px; font-weight: 700; }.status-muted { color: var(--muted); font-size: 8px; }.status-demo { color: #8e6a2f; font-size: 8px; font-weight: 700; }.channel-manage-card h2 { margin: 14px 0 5px; font-size: 14px; }.channel-address { margin: 0 0 8px; color: var(--plum) !important; font-size: 10px !important; font-weight: 700; }.channel-manage-card > p { color: var(--muted); font-size: 8px; line-height: 1.5; }.channel-stats { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 9px; margin: 14px 0; }.channel-stats span { display: grid; gap: 2px; border-right: 1px solid var(--line); padding: 9px; color: var(--muted); font-size: 7px; }.channel-stats span:last-child { border-right: 0; }.channel-stats strong { color: var(--ink); font-size: 10px; }.route-box { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 9px 0; font-size: 8px; }.route-box span { color: var(--muted); }.route-box strong { text-align: right; }.channel-manage-card .button { margin-top: 10px; }.routing-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 20px 22px; }.routing-flow > div { display: flex; align-items: center; gap: 9px; }.routing-flow > div > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--plum); background: var(--plum-soft); font-size: 7px; font-weight: 700; }.routing-flow p { display: grid; gap: 3px; margin: 0; }.routing-flow strong { font-size: 8px; }.routing-flow small { color: var(--muted); font-size: 7px; }.routing-flow > b { color: #bdb7bb; }
.integration-feature { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; border: 1px solid #d5e0d6; border-radius: 14px; margin-bottom: 13px; padding: 17px; background: linear-gradient(100deg,#f0f5f0,#fff); box-shadow: var(--shadow-sm); }.integration-logo { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: white; font-family: Manrope,sans-serif; font-size: 16px; font-weight: 700; }.integration-logo.acuity { background:#76a27d }.integration-logo.hubspot { background:#de7657 }.integration-logo.google { background:#4d7cbf }.integration-logo.mail { background:#70546a }.integration-logo.sms { background:#588267 }.integration-feature h2 { margin: 5px 0 3px; font-size: 13px; }.integration-feature p { margin: 0; color: var(--muted); font-size: 8px; }.integration-meta { display: grid; justify-items: end; gap: 3px; }.integration-meta span { color: var(--muted); font-size: 7px; }.integration-meta strong { font-size: 8px; }.integration-meta button { margin-top: 5px; color: var(--plum); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }.integration-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; }.integration-grid article { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: white; box-shadow: var(--shadow-sm); }.integration-grid h3 { margin: 3px 0 4px; font-size: 10px; }.integration-grid p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }.integration-grid .button { grid-column: 1 / -1; }.integration-note { display: flex; gap: 10px; margin-top: 13px; border-radius: 10px; padding: 12px; color: #6d626a; background: #eeebed; }.integration-note span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: var(--plum); font-size: 8px; }.integration-note p { margin: 0; font-size: 8px; line-height: 1.5; }
.team-panel { overflow: hidden; }.team-table-head, .team-row { display: grid; grid-template-columns: 1.3fr .7fr 1fr .5fr 25px; align-items: center; gap: 12px; padding: 11px 15px; }.team-table-head { color: var(--muted); background: #fbfaf9; font-size: 7px; font-weight: 700; text-transform: uppercase; }.team-row { min-height: 65px; border-top: 1px solid var(--line); color: #6d666c; font-size: 8px; }.team-person { display: flex; align-items: center; gap: 9px; }.team-person .sage { background: var(--sage); }.team-person .sand { background: #b68e52; }.team-person span { display: grid; gap: 3px; }.team-person strong { color: var(--ink); }.team-person small { color: var(--muted); }.team-row > button { color: var(--muted); background: transparent; cursor: pointer; }.team-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-top: 13px; }.team-cards article { border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: white; }.team-cards > article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--plum); background: var(--plum-soft); }.team-cards h3 { margin: 10px 0 4px; font-size: 10px; }.team-cards p { color: var(--muted); font-size: 8px; }.team-cards button { color: var(--plum); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }
.plan-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 13px; margin-bottom: 13px; }.current-plan, .allowance-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: white; box-shadow: var(--shadow-sm); }.current-plan { color: white; background: linear-gradient(140deg,#443a42,#624b5c); }.current-plan-top { display: flex; justify-content: space-between; gap: 20px; }.plan-tag { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 7px; color: #d9ced6; background: rgba(255,255,255,.06); font-size: 7px; font-weight: 700; }.current-plan h2 { margin: 12px 0 4px; font-size: 17px; }.current-plan p { color: #c9bec6; font-size: 8px; }.plan-price { display: flex; align-items: baseline; gap: 3px; }.plan-price strong { font-size: 25px; }.plan-price span { color: #c9bec6; font-size: 8px; }.plan-includes { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; border-top: 1px solid rgba(255,255,255,.12); margin: 16px 0; padding-top: 15px; color: #e7dfe5; font-size: 8px; }.current-plan .button { border-color: rgba(255,255,255,.2); color: white; background: rgba(255,255,255,.08); }.allowance-value { margin-top: 15px; }.allowance-value strong { font-family: Manrope,sans-serif; font-size: 27px; }.allowance-value span { color: var(--muted); font-size: 9px; }.allowance-lines { display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; }.allowance-lines div { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }.allowance-lines span { display: flex; align-items: center; gap: 6px; }.allowance-lines strong { color: var(--ink); }.allowance-card > p { margin: 12px 0 0; color: var(--muted); font-size: 7px; }.invoice-panel { overflow: hidden; }.invoice-table > div { display: grid; grid-template-columns: .8fr 1.4fr .5fr .5fr .5fr; align-items: center; min-height: 49px; border-top: 1px solid var(--line); padding: 0 17px; color: #6d666c; font-size: 8px; }.invoice-table .invoice-head { min-height: 34px; color: var(--muted); background: #fbfaf9; font-size: 7px; font-weight: 700; text-transform: uppercase; }.invoice-table button { color: var(--plum); background: transparent; cursor: pointer; font-size: 7px; font-weight: 700; text-align: right; }

/* Modals */
.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }.modal-layer.is-open { opacity: 1; pointer-events: auto; }.modal-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(35,29,33,.48); backdrop-filter: blur(4px); }.test-modal-card, .calendar-card { position: relative; z-index: 1; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.98); transition: transform .23s ease; }.modal-layer.is-open > section { transform: translateY(0) scale(1); }.test-modal-card > header, .calendar-card > header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 17px 18px 14px; }.test-modal-card h2, .calendar-card h2 { margin: 2px 0 0; font-size: 16px; }.calendar-card header p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }.modal-close { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--muted); background: #f3f0ee; cursor: pointer; font-size: 17px; }.test-channel-toggle { display: grid; grid-template-columns: repeat(2,1fr); margin: 13px 17px 0; border-radius: 9px; padding: 3px; background: #efedea; }.test-channel-toggle button { min-height: 33px; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }.test-channel-toggle button.is-active { color: var(--plum); background: white; box-shadow: 0 2px 7px rgba(45,35,42,.08); }.test-context { display: flex; gap: 9px; margin: 11px 17px; border-radius: 9px; padding: 10px; color: #645b62; background: #f5f1f4; }.test-context > span { color: var(--plum); }.test-context p { margin: 0; font-size: 8px; line-height: 1.45; }.scenario-select { padding: 0 17px 12px; }.scenario-select > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; }.scenario-select > div { display: flex; gap: 6px; }.scenario-select button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: var(--muted); background: white; cursor: pointer; font-size: 7px; }.scenario-select button:hover, .scenario-select button.is-active { border-color: var(--plum); color: var(--plum); background: var(--plum-soft); }.test-stage { min-height: 260px; border-top: 1px solid var(--line); padding: 15px 17px 18px; background: #fbfaf9; }.test-welcome { display: grid; min-height: 230px; place-items: center; text-align: center; }.test-welcome > div { max-width: 300px; }.test-welcome span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; margin: 0 auto 12px; color: white; background: var(--plum); }.test-welcome h3 { margin: 0 0 6px; font-size: 11px; }.test-welcome p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.test-chat { display: grid; gap: 10px; }.test-message { max-width: 82%; border-radius: 11px 11px 11px 3px; padding: 9px 10px; color: #5e575c; background: white; box-shadow: 0 1px 4px rgba(50,40,47,.06); font-size: 8px; line-height: 1.5; animation: bubbleIn .25s ease both; }.test-message.user { margin-left: auto; border-radius: 11px 11px 3px 11px; color: white; background: var(--plum); }.test-message.safe { border: 1px solid #ebcfcd; color: #765c5c; background: #fff5f4; }.test-result { display: flex; align-items: center; gap: 8px; border: 1px solid #d5e1d7; border-radius: 9px; padding: 9px; color: #55705b; background: #eef5ef; font-size: 8px; font-weight: 700; animation: bubbleIn .3s ease both; }.test-voice-stage { display: grid; min-height: 225px; place-items: center; text-align: center; }.test-voice-orb { position: relative; display: grid; width: 90px; height: 90px; place-items: center; border-radius: 50%; color: white; background: radial-gradient(circle at 35% 25%,#b995ad,#6a4e63); box-shadow: 0 0 0 15px rgba(105,78,99,.08),0 0 0 31px rgba(105,78,99,.04); animation: voicePulse 1.8s ease infinite; }.test-voice-orb::before, .test-voice-orb::after { content:""; position:absolute; width:2px; border-radius:2px; background:white; }.test-voice-orb::before { height:24px; transform:translateX(-6px); }.test-voice-orb::after { height:38px; transform:translateX(6px); }.test-voice-stage h3 { margin: 31px 0 5px; font-size: 12px; }.test-voice-stage p { max-width: 330px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.calendar-days { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 14px 17px 11px; }.calendar-days button { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 9px; padding: 8px; color: var(--muted); background: white; cursor: pointer; }.calendar-days button.is-active { border-color: var(--plum); color: var(--plum); background: var(--plum-soft); }.calendar-days span { font-size: 7px; text-transform: uppercase; }.calendar-days strong { font-size: 15px; }.calendar-days small { font-size: 7px; }.slot-list { display: grid; gap: 7px; padding: 0 17px 14px; }.slot-list button { display: grid; grid-template-columns: 85px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--ink); background: white; cursor: pointer; text-align: left; }.slot-list button.is-selected { border-color: var(--plum); background: #faf5f8; }.slot-list span { font-size: 9px; font-weight: 700; }.slot-list small { color: var(--muted); font-size: 7px; }.slot-list b { color: #56745e; font-size: 7px; }.calendar-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 13px 17px; background: #fbfaf9; }.calendar-foot > div { display: grid; gap: 3px; }.calendar-foot strong { font-size: 8px; }.calendar-foot span { color: var(--muted); font-size: 7px; }.toast { position: fixed; z-index: 200; right: 25px; bottom: 25px; display: flex; align-items: center; gap: 9px; min-width: 260px; border: 1px solid #d4e0d6; border-radius: 11px; padding: 11px; background: white; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: white; background: var(--sage); font-size: 9px; }.toast p { display: grid; gap: 2px; margin: 0; }.toast strong { font-size: 8px; }.toast small { color: var(--muted); font-size: 7px; }

/* Clinic website */
.clinic-page { color: #353634; background: #f5f0e8; overflow-x: hidden; }
.clinic-header { position: relative; z-index: 5; display: flex; height: 78px; align-items: center; justify-content: space-between; gap: 25px; max-width: 1280px; margin: 0 auto; padding: 0 38px; }
.clinic-logo { display: flex; align-items: center; gap: 10px; }
.clinic-logo-mark { position: relative; width: 31px; height: 31px; border: 1px solid #667768; border-radius: 50% 50% 50% 12px; transform: rotate(45deg); }
.clinic-logo-mark i { position: absolute; left: 50%; bottom: 6px; width: 1px; height: 17px; background: #667768; transform: translateX(-50%) rotate(-45deg); transform-origin: bottom; }
.clinic-logo-mark i:nth-child(2) { height: 12px; transform: translateX(-50%) rotate(-75deg); }.clinic-logo-mark i:nth-child(3) { height: 11px; transform: translateX(-50%) rotate(-15deg); }
.clinic-logo > span:last-child { display: grid; gap: 1px; }.clinic-logo strong { font-family: Manrope,sans-serif; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }.clinic-logo small { color: #858276; font-size: 8px; letter-spacing: .23em; text-transform: uppercase; }
.clinic-header nav { display: flex; gap: 28px; }.clinic-header nav a { color: #696a65; font-size: 10px; }.clinic-header nav a:hover { color: #3c5140; }
.clinic-header-action, .clinic-primary, .clinic-secondary { min-height: 42px; border-radius: 999px; padding: 0 18px; cursor: pointer; font-size: 9px; font-weight: 700; }.clinic-header-action, .clinic-secondary { border: 1px solid #8a8c83; color: #4e524c; background: transparent; }.clinic-primary { color: white; background: #536b58; box-shadow: 0 8px 20px rgba(71,92,75,.16); }.clinic-secondary { display: inline-flex; align-items: center; gap: 7px; }
.clinic-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 610px; max-width: 1280px; margin: 0 auto; padding: 45px 38px 75px; }
.hero-copy { max-width: 530px; padding-left: 4vw; }.clinic-eyebrow { color: #83714a; }.hero-copy h1 { max-width: 480px; margin: 11px 0 21px; font-family: Georgia,serif; font-size: clamp(48px,6.2vw,83px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }.hero-copy > p:not(.clinic-eyebrow) { max-width: 450px; color: #6f706b; font-family: Georgia,serif; font-size: 16px; line-height: 1.65; }.clinic-actions { display: flex; gap: 9px; margin-top: 27px; }.hero-note { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: #88867d; font-size: 8px; }.hero-note i { width: 6px; height: 6px; border-radius: 50%; background: #69906f; box-shadow: 0 0 0 4px rgba(105,144,111,.12); }
.hero-visual { position: relative; min-height: 500px; overflow: hidden; border-radius: 48% 48% 18px 18px; background: #d8c7b1; box-shadow: inset 0 -80px rgba(87,101,84,.1); }.sun-shape { position: absolute; top: 35px; right: 50px; width: 210px; height: 210px; border-radius: 50%; background: #e8cf9b; opacity: .9; }.arch-shape { position: absolute; left: 22%; bottom: 0; width: 58%; height: 82%; border-radius: 160px 160px 0 0; background: #9ba68e; box-shadow: inset 18px 0 rgba(255,255,255,.12); }.arch-shape span { position: absolute; inset: 16% 19% 0; border-radius: 100px 100px 0 0; background: linear-gradient(#eae1d1,#cbb99e); }.botanical { position: absolute; right: 10%; bottom: -10px; width: 170px; height: 300px; }.botanical::before { content:""; position:absolute; left:50%; bottom:0; width:3px; height:260px; border-radius:3px; background:#596e5c; transform:rotate(5deg); }.botanical i { position:absolute; width:75px; height:32px; border-radius:90% 8% 90% 8%; background:#6f846f; transform-origin:right center; }.botanical i:nth-child(1){left:12px;bottom:55px;transform:rotate(23deg)}.botanical i:nth-child(2){right:4px;bottom:95px;transform:rotate(145deg)}.botanical i:nth-child(3){left:10px;bottom:140px;transform:rotate(13deg)}.botanical i:nth-child(4){right:6px;bottom:180px;transform:rotate(154deg)}.botanical i:nth-child(5){left:25px;bottom:220px;transform:rotate(35deg)}
.hero-card { position: absolute; left: 22px; bottom: 22px; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.65); border-radius: 13px; padding: 13px 16px; background: rgba(250,247,241,.9); box-shadow: 0 15px 35px rgba(70,61,55,.14); backdrop-filter: blur(8px); }.hero-card span { color:#8b8178;font-size:7px;text-transform:uppercase;letter-spacing:.1em}.hero-card strong{font-family:Georgia,serif;font-size:13px}.hero-card small{color:#77736f;font-size:8px}
.clinic-trust { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 64px; border-top: 1px solid rgba(89,92,84,.18); border-bottom: 1px solid rgba(89,92,84,.18); color: #777970; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.clinic-trust i { width: 3px; height: 3px; border-radius:50%;background:#9b936f }
.care-section { max-width: 1180px; margin: 0 auto; padding: 100px 38px; }.care-section > div:first-child { display:flex;align-items:flex-end;justify-content:space-between; }.care-section h2, .visit-copy h2 { max-width: 530px; margin:0;font-family:Georgia,serif;font-size:42px;font-weight:400;line-height:1.1;letter-spacing:-.035em}.care-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px }.care-grid article { border-top:1px solid #a7a092;padding:20px 5px }.care-grid span{color:#8d7a52;font-size:8px}.care-grid h3{margin:27px 0 10px;font-family:Georgia,serif;font-size:18px;font-weight:400}.care-grid p{color:#77766f;font-size:10px;line-height:1.7}
.visit-section { display:grid;grid-template-columns:1fr 1fr;min-height:580px;background:#ebe4d9 }.visit-art { position:relative;display:grid;place-items:center;overflow:hidden;background:#687b69 }.visit-circle{position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.24);border-radius:50%}.visit-line{position:absolute;width:1px;height:78%;background:rgba(255,255,255,.2);transform:rotate(35deg)}.visit-art>span{display:grid;width:180px;height:180px;place-items:center;border-radius:50% 50% 50% 20px;color:#f1eadd;background:#899688;font-family:Georgia,serif;font-size:72px;box-shadow:0 25px 60px rgba(42,56,45,.22)}.visit-copy { display:flex;flex-direction:column;justify-content:center;max-width:550px;padding:70px }.visit-copy>p:not(.clinic-eyebrow){margin-top:23px;color:#6e6d68;font-size:11px;line-height:1.8}.visit-copy ul{display:grid;gap:10px;margin:7px 0 25px;padding:0;list-style:none;color:#62655f;font-size:9px}.visit-copy li::before{content:"✓";margin-right:8px;color:#58715c;font-weight:700}.visit-copy .clinic-primary{width:fit-content}
.clinic-footer { display:grid;grid-template-columns:1.3fr .7fr .7fr 1.2fr;gap:35px;padding:55px max(38px,calc((100vw - 1180px)/2));color:#d8d2d5;background:#373238 }.clinic-footer .clinic-logo-mark{border-color:#bfaeba}.clinic-footer .clinic-logo-mark i{background:#bfaeba}.clinic-footer .clinic-logo small{color:#978e94}.clinic-footer>div>span{display:block;margin-bottom:12px;color:#9f969c;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.clinic-footer p{color:#aaa2a8;font-size:9px;line-height:1.7}.footer-note{border-left:1px solid rgba(255,255,255,.12);padding-left:28px}.footer-note strong{font-family:Georgia,serif;font-size:15px;font-weight:400}
.concierge-launcher { position:fixed;z-index:50;right:24px;bottom:22px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:10px 14px 10px 10px;color:white;background:#4a4048;box-shadow:0 17px 40px rgba(53,43,50,.3);cursor:pointer;text-align:left }.launcher-mark,.site-concierge-mark{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:#4a4048;background:#eadfe6}.concierge-launcher>span:last-child{display:grid;gap:2px}.concierge-launcher strong{font-size:9px}.concierge-launcher small{color:#c2b8bf;font-size:7px}
.site-concierge { position:fixed;z-index:60;right:24px;bottom:22px;display:flex;width:370px;height:540px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);flex-direction:column;overflow:hidden;border:1px solid #ded8d3;border-radius:20px;background:white;box-shadow:0 25px 80px rgba(45,35,42,.25);opacity:0;pointer-events:none;transform:translateY(16px) scale(.97);transform-origin:right bottom;transition:opacity .2s ease,transform .25s ease}.site-concierge.is-open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.site-concierge>header{display:flex;align-items:center;gap:10px;min-height:65px;border-bottom:1px solid var(--line);padding:11px 13px}.site-concierge-mark{width:35px;height:35px;color:white;background:var(--plum)}.site-concierge>header>div:nth-child(2){display:grid;gap:3px}.site-concierge>header strong{font-size:10px}.site-concierge>header span{color:var(--muted);font-size:7px}.site-concierge>header span i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px;background:#66a171}.site-concierge>header button{margin-left:auto;color:var(--muted);background:transparent;cursor:pointer;font-size:20px}.site-channel-tabs{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line);padding:7px;background:#fbfaf9}.site-channel-tabs button{min-height:32px;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer;font-size:8px;font-weight:700}.site-channel-tabs button.is-active{color:var(--plum);background:white;box-shadow:0 1px 5px rgba(45,35,42,.1)}.site-concierge-body{min-height:0;flex:1;overflow-y:auto;background:#fbfaf9}.site-safety-note{border-top:1px solid var(--line);padding:9px;color:#93888f;background:white;font-size:7px;text-align:center}.site-chat{display:flex;min-height:100%;flex-direction:column}.site-messages{display:grid;gap:10px;flex:1;padding:14px}.site-bubble{max-width:82%;border-radius:12px 12px 12px 3px;padding:10px 11px;color:#5f585d;background:white;box-shadow:0 1px 5px rgba(45,35,42,.06);font-size:8px;line-height:1.55;animation:bubbleIn .24s ease both}.site-bubble.user{margin-left:auto;border-radius:12px 12px 3px 12px;color:white;background:var(--plum)}.site-bubble.safe{border:1px solid #ebd2cf;color:#755c5c;background:#fff6f5}.quick-replies{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}.quick-replies button{border:1px solid #d7c8d2;border-radius:999px;padding:6px 8px;color:var(--plum);background:white;cursor:pointer;font-size:7px}.site-composer{display:flex;gap:7px;border-top:1px solid var(--line);padding:9px;background:white}.site-composer input{min-width:0;height:35px;flex:1;border:1px solid var(--line);border-radius:9px;outline:0;padding:0 9px;background:#fbfaf9;font-size:8px}.site-composer button{width:35px;border-radius:9px;color:white;background:var(--plum);cursor:pointer}.site-voice{display:grid;min-height:100%;place-items:center;padding:25px;text-align:center;background:radial-gradient(circle at 50% 42%,#f2eaf0,transparent 37%),#fbfaf9}.site-voice>div{display:grid;justify-items:center}.voice-orb{position:relative;display:grid;width:115px;height:115px;place-items:center;border-radius:50%;color:white;background:radial-gradient(circle at 35% 26%,#ad8da4,#654b5f);box-shadow:0 0 0 17px rgba(105,78,99,.07),0 0 0 35px rgba(105,78,99,.035);animation:voicePulse 1.8s ease infinite}.voice-bars{display:flex;align-items:center;gap:4px}.voice-bars i{width:3px;border-radius:5px;background:white;animation:voiceBars .9s ease-in-out infinite}.voice-bars i:nth-child(1),.voice-bars i:nth-child(5){height:13px}.voice-bars i:nth-child(2),.voice-bars i:nth-child(4){height:29px;animation-delay:.12s}.voice-bars i:nth-child(3){height:43px;animation-delay:.24s}.site-voice h3{margin:35px 0 7px;font-size:14px}.site-voice p{max-width:270px;margin:0;color:var(--muted);font-size:8px;line-height:1.5}.site-voice-actions{display:flex;gap:7px;margin-top:18px}.site-voice-actions button{border-radius:999px;padding:8px 12px;cursor:pointer;font-size:8px;font-weight:700}.site-voice-actions .end{color:#9b4f4f;background:#fae9e8}.site-voice-actions .scenario{color:var(--plum);background:var(--plum-soft)}

.usage-bar-chart { display:flex; height:225px; align-items:flex-end; justify-content:space-between; gap:clamp(5px,1.2vw,14px); border-top:1px solid var(--line); padding:24px 24px 25px; background:repeating-linear-gradient(to bottom,#fff 0,#fff 47px,#efedea 48px); }.usage-bar-chart>div { position:relative; display:flex; height:100%; flex:1; align-items:flex-end; justify-content:center; gap:4px; }.usage-bar-chart i,.usage-bar-chart b { display:block; width:min(15px,38%); border-radius:4px 4px 0 0; }.usage-bar-chart i { background:var(--plum); }.usage-bar-chart b { background:var(--sage); }.usage-bar-chart span { position:absolute; bottom:-17px; color:var(--muted-2); font-size:8px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@keyframes viewIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
@keyframes bubbleIn { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
@keyframes voicePulse { 0%,100%{transform:scale(.97)}50%{transform:scale(1.03)} }
@keyframes voiceBars { 0%,100%{transform:scaleY(.45);opacity:.65}50%{transform:scaleY(1);opacity:1} }

@media (max-width: 1100px) {
  .sidebar { width: 218px; flex-basis: 218px; }
  .overview-grid { grid-template-columns: 1fr; }.usage-panel { min-height: 260px; }
  .analytics-grid { grid-template-columns: 1fr; }.usage-trend-panel { grid-column: auto; }
  .clinic-header nav { display:none }.hero-copy{padding-left:0}.clinic-hero{grid-template-columns:.9fr 1.1fr}.clinic-footer{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 850px) {
  .dashboard-page { overflow:auto }.app-shell{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;height:100vh;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}.sidebar.is-open{transform:translateX(0)}
  .main-panel{height:auto;min-height:100vh;overflow:visible}.topbar{padding:0 18px}.mobile-brand{display:flex;align-items:center;gap:10px}.menu-button{width:33px;height:33px;border-radius:8px;background:#fff;cursor:pointer}.mobile-brand strong{font-family:Manrope,sans-serif;font-size:12px}.global-search{width:min(320px,42vw)}.top-actions .test-badge,.top-actions .icon-control{display:none}
  .view{padding:25px 18px 45px}.metric-grid{grid-template-columns:repeat(2,1fr)}.inbox-shell{grid-template-columns:300px minmax(500px,1fr);overflow-x:auto}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow-x:auto}.settings-nav button{flex:0 0 auto}.channel-overview-grid,.plan-grid{grid-template-columns:1fr}
  .clinic-hero{grid-template-columns:1fr;padding-top:70px}.hero-copy{max-width:650px}.hero-visual{min-height:480px;margin-top:55px}.visit-section{grid-template-columns:1fr}.visit-art{min-height:450px}.clinic-footer{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px) {
  .topbar{height:58px}.global-search{display:none}.top-actions .button{display:none}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%;flex-wrap:wrap}.heading-actions .button{flex:1}.demo-banner{align-items:flex-start}.channel-pills{display:none}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:13px}.metric-card>strong{font-size:23px}.overview-conversation{grid-template-columns:34px 1fr auto}.overview-summary,.overview-time{display:none}.performance-stats div{padding:10px}.usage-panel{grid-template-columns:105px 1fr}.inbox-shell{display:block;height:auto;min-height:0;overflow:visible}.inbox-list-panel{border:0}.conversation-list{max-height:350px}.conversation-detail{border-top:1px solid var(--line)}.detail-header{position:static}.detail-grid{grid-template-columns:1fr}.records-toolbar{align-items:flex-start;flex-direction:column}.records-actions{width:100%;overflow-x:auto}.records-actions label{min-width:150px}.form-grid,.channel-config-grid,.policy-grid,.test-grid,.knowledge-status{grid-template-columns:1fr}.field.wide{grid-column:auto}.knowledge-status div{border-right:0;border-bottom:1px solid var(--line)}.knowledge-status div:last-child{border-bottom:0}.hours-list{grid-template-columns:repeat(2,1fr)}.hours-list span:nth-child(3n){border-right:1px solid var(--line)}.hours-list span:nth-child(2n){border-right:0}.hours-list span:nth-child(n+4){border-bottom:1px solid var(--line)}.hours-list span:nth-child(n+5){border-bottom:0}.parity-table>div{grid-template-columns:1fr 55px 55px}.analytics-grid{grid-template-columns:1fr}.reason-chart>div{grid-template-columns:115px 1fr 28px}.donut-row{align-items:flex-start;flex-direction:column}.channel-overview-grid,.integration-grid,.team-cards{grid-template-columns:1fr}.routing-flow{align-items:flex-start;flex-direction:column}.routing-flow>b{transform:rotate(90deg);margin-left:11px}.integration-feature{grid-template-columns:45px 1fr}.integration-meta{grid-column:1/-1;justify-items:start}.team-table-head{display:none}.team-row{grid-template-columns:1fr 1fr}.team-row>*:nth-child(n+4){display:none}.current-plan-top{flex-direction:column}.plan-includes{grid-template-columns:1fr}.invoice-table{overflow-x:auto}.invoice-table>div{min-width:700px}.modal-layer{padding:10px}.toast{right:14px;bottom:14px;left:14px;min-width:0}
  .clinic-header{height:65px;padding:0 18px}.clinic-header-action{display:none}.clinic-hero{min-height:auto;padding:55px 20px}.hero-copy h1{font-size:52px}.clinic-actions{align-items:stretch;flex-direction:column}.hero-visual{min-height:380px;border-radius:160px 160px 15px 15px}.clinic-trust{flex-wrap:wrap;gap:12px;padding:18px}.care-section{padding:75px 20px}.care-section>div:first-child{align-items:flex-start;flex-direction:column}.care-section h2,.visit-copy h2{font-size:34px}.care-grid{grid-template-columns:1fr;margin-top:35px}.visit-art{min-height:380px}.visit-copy{padding:55px 20px}.clinic-footer{grid-template-columns:1fr;padding:45px 20px}.footer-note{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:20px 0 0}.concierge-launcher{right:14px;bottom:14px}.site-concierge{right:16px;bottom:16px;width:calc(100vw - 32px);height:calc(100vh - 32px)}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important } }