* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --accent: #c2922a; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, #fdfcf9 0%, #f6f2ea 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 20px;
  color: #23211c;
}
.card {
  background: #ffffff; width: 100%; max-width: 400px;
  border-radius: 28px; padding: 44px 28px 36px;
  box-shadow: 0 24px 60px -18px rgba(60, 48, 20, .18), 0 2px 8px rgba(60,48,20,.06);
  text-align: center;
}
.brandmark {
  width: 54px; height: 6px; border-radius: 3px;
  background: var(--accent); margin: 0 auto 22px;
}
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.65rem; line-height: 1.25; }
.tagline { color: #6b675e; margin-top: 8px; font-size: .95rem; }
.hours { color: #8a8578; font-size: .82rem; margin-top: 4px; }
.callbtn {
  margin: 34px auto 18px; width: 96px; height: 96px; border: none; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .15s ease;
  animation: pulse 2.4s infinite;
}
.callbtn:active { transform: scale(.94); }
@keyframes pulse {
  0% { box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  70% { box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 22px transparent; }
  100% { box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 0 transparent; }
}
.avail { color: #6b675e; font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #35a06b; display: inline-block; }
.avatar {
  width: 104px; height: 104px; border-radius: 50%; margin: 26px auto 18px;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 2.4rem; color: var(--accent);
}
.avatar.speaking { animation: talk 1.1s infinite; }
@keyframes talk { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.status { font-size: 1.05rem; color: #23211c; min-height: 1.5em; }
.timer { color: #8a8578; font-variant-numeric: tabular-nums; margin-top: 6px; font-size: .9rem; }
.controls { display: flex; gap: 22px; justify-content: center; margin-top: 28px; }
.ctl {
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background: #f1ede3; color: #4a463c; display: flex; align-items: center; justify-content: center;
}
.ctl.muted { background: #e4dccb; color: #9c2f2f; }
.ctl.end { background: #c0392b; color: #fff; }
.again {
  margin-top: 18px; padding: 14px 34px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 1rem; cursor: pointer;
}