/* Receptionist — Figma 10007:21955
   Desktop (1728): copy + chat panel in a 704px column, dashboard panel 521px on the right.
   Columns are fr-based so they reproduce 704/521 at 1728 and shrink proportionally below it. */
.receptionist { padding-bottom: clamp(48px, calc(100 / 1728 * 100vw), 100px); }

.receptionist-inner {
  display: grid;
  grid-template-columns: minmax(0, 704fr) minmax(340px, 521fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, calc(215 / 1728 * 100vw), 215px);
  row-gap: 32px;
}

/* Copy block */
.receptionist-copy { grid-column: 1; grid-row: 1; padding-top: clamp(0px, calc(53 / 1728 * 100vw), 53px); display: flex; flex-direction: column; gap: 24px; }
.receptionist-head { display: flex; flex-direction: column; gap: 8px; }
.receptionist-title { font-size: clamp(40px, calc(78.83 / 1728 * 100vw), 78.83px); color: var(--text-primary); }
.receptionist-kicker { font-size: clamp(24px, calc(38.02 / 1728 * 100vw), 38.02px); color: #613492; } /* matches the Receptionist pill */
.receptionist-body { max-width: 695px; font-size: clamp(16px, calc(22 / 1728 * 100vw), 22px); line-height: normal; color: var(--text-primary); }

/* Shared panel */
.receptionist-panel { position: relative; background: #e5eaf3; border-radius: 20px; overflow: hidden; }
.receptionist-glow { position: absolute; width: 774px; height: 770px; pointer-events: none; }
.receptionist-glow img { position: absolute; left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }

/* Chat panel (left) — fluid; bubble sized in em so it scales with its font size */
.receptionist-chat {
  grid-column: 1; grid-row: 2; align-self: end;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 704 / 359;
  padding: 24px clamp(16px, calc(65 / 1728 * 100vw), 65px);
}
.receptionist-chat .receptionist-glow { left: 68%; top: -546px; }
.receptionist-msg { position: relative; display: flex; align-items: flex-end; gap: 5.246px; min-width: 0; }
.receptionist-msg > img { flex: none; width: clamp(36px, calc(58.9482 / 1728 * 100vw), 58.9482px); height: auto; }
.receptionist-bubble {
  position: relative; flex: 0 1 20.671em; min-width: 0; min-height: 4.869em;
  font-size: clamp(15px, calc(24.648 / 1728 * 100vw), 24.648px);
  padding: 0.5em 1.25em 0.5em 0.75em;
  background: rgba(255,255,255,0.3);
  border-radius: 0.75em 0.75em 0.75em 0;
}
.receptionist-bubble p { font-size: 1em; line-height: 1.375; color: var(--text-primary); }
@media (min-width: 1200px) { .receptionist-bubble p { white-space: nowrap; } }
.receptionist-ts { position: absolute; right: 0.324em; bottom: 0.372em; font-size: 0.75em; letter-spacing: .02em; line-height: normal; color: var(--text-unavailable); white-space: nowrap; }

/* Dashboard panel (right) — real fluid HTML; card is 391px wide at 1728, centred in the panel */
.receptionist-dash { grid-column: 2; grid-row: 1 / 3; padding: 53px 16px 48px; }
.receptionist-dash .receptionist-glow { left: 34px; top: 177px; }
.receptionist-card {
  position: relative; width: min(391px, 100%); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 18.246px;
  padding: 18.246px; background: rgba(255,255,255,0.5); border-radius: 22.807px;
  color: var(--text-primary); line-height: normal;
}
.receptionist-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.receptionist-id { display: flex; align-items: center; gap: 11.404px; }
.receptionist-icon {
  display: flex; flex: none; padding: 11.404px; border-radius: 114.035px;
  background: rgba(230,245,244,0.6); border: 1px solid rgba(7,117,108,0.2);
}
.receptionist-id-text { display: flex; flex-direction: column; gap: 3px; }
.receptionist-id-text .name { font-size: 18.246px; }
.receptionist-id-text .sub { font-size: 15.201px; }

.receptionist-pill {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  padding: 6.842px 11.404px; border-radius: 114.035px;
  font-size: 15.201px; line-height: normal; white-space: nowrap; text-align: center;
  background: var(--bg-brand); border: 1px solid rgba(7,117,108,0.2); color: var(--text-success);
}
.receptionist-pill.is-warning { background: #fff8ed; border-color: rgba(122,79,0,0.2); color: #7a4f00; }
.receptionist-pill.is-error { background: #ffebef; border-color: rgba(233,4,66,0.2); color: var(--text-destructive); }

.receptionist-stats { display: flex; flex-direction: column; gap: 18.246px; width: 100%; }
.receptionist-stat-row { display: flex; gap: 18.246px; align-items: stretch; }
.receptionist-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 9.123px;
  padding: 18.246px; background: rgba(255,255,255,0.1); /* no solid white fill — matches Recent calls (Shane feedback) */
  border: 1.14px solid var(--border-default); border-radius: 22.807px;
}
.receptionist-stat.is-wide { width: 100%; }
.receptionist-stat-row .receptionist-stat { flex: 1 1 0; min-width: 0; }
.receptionist-stat .label { font-size: 15.201px; }
.receptionist-stat .value { font-size: 21.895px; }
.receptionist-stat.is-wide .value { font-size: 37.837px; }

.receptionist-calls {
  display: flex; flex-direction: column; align-items: stretch; gap: 18.246px; width: 100%;
  padding: 18.246px; background: rgba(255,255,255,0.1);
  border: 1.14px solid var(--border-default); border-radius: 22.807px;
}
.receptionist-calls-title { font-size: 15.201px; white-space: nowrap; }
.receptionist-divider { display: block; height: 1.14035px; width: 100%; }
.receptionist-call-list { display: flex; flex-direction: column; align-items: stretch; gap: 9.123px; }
.receptionist-call { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.receptionist-caller { display: flex; flex-direction: column; gap: 9.123px; min-width: 0; }
.receptionist-caller .num { font-size: 18.246px; white-space: nowrap; }
.receptionist-caller .meta { font-size: 15.201px; }

/* Body text in Inter (Shane: Inter everywhere, no Helvetica) */
.receptionist-body, .receptionist-dash { font-family: var(--font-body); }

/* Tablet: give the dashboard room; chat follows the copy instead of sinking to the bottom */
@media (max-width: 1199px) {
  .receptionist-inner { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); column-gap: 48px; }
  .receptionist-chat { align-self: start; margin-top: 16px; aspect-ratio: auto; padding: 56px 16px; }
}

/* Mobile: single column — text, chat, dashboard */
@media (max-width: 899px) {
  .receptionist { padding-top: 48px; }
  .receptionist-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
  .receptionist-copy, .receptionist-chat, .receptionist-dash { grid-column: 1; grid-row: auto; }
  .receptionist-copy { padding-top: 0; margin-bottom: 8px; }
  .receptionist-chat { aspect-ratio: auto; padding: 56px 16px; }
  .receptionist-dash { padding: 32px 12px; }
  .receptionist-card { gap: 14px; padding: 14px; }
  .receptionist-stats, .receptionist-stat-row { gap: 12px; }
  .receptionist-stat, .receptionist-calls { padding: 14px; }
  .receptionist-calls { gap: 14px; }
  .receptionist-caller .num { font-size: 16px; }
  .receptionist-call .receptionist-pill { font-size: 13px; padding: 5px 9px; }
  .receptionist-call { flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .receptionist-dash { padding-inline: 8px; }
  .receptionist-card { padding: 10px; }
  .receptionist-calls { padding: 12px; }
  .receptionist-id-text .name { font-size: 16px; }
  .receptionist-caller .num { font-size: 15px; }
  .receptionist-caller .meta { font-size: 13px; }
  .receptionist-call .receptionist-pill { font-size: 12px; padding: 4px 8px; }
  .receptionist-stat.is-wide .value { font-size: 32px; }
}

/* Count-up numbers: fixed-width digits so the layout does not jitter while counting. */
.receptionist-stat .value { font-variant-numeric: tabular-nums; }