/* Shared illustrative Pulse phone. Native radios remain usable without JS. */
[data-pulse-preview] {
  width: min(100%, 330px);
  color: #172d27;
  font-size: 13px;
  line-height: 1.4;
  animation: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
[data-pulse-preview] .px-frame {
  padding: 8px;
  border-radius: 43px;
  background: #1c2925;
  box-shadow: 0 28px 65px -20px #102b234d, 0 3px 7px #0a201b24, inset 0 0 0 1px #ffffff45;
}
[data-pulse-preview] .px-screen {
  height: 618px;
  aspect-ratio: auto;
  border-radius: 35px;
  background: #f8faf9;
  color: #172d27;
}
[data-pulse-preview] svg { flex: none; stroke-linecap: round; stroke-linejoin: round; }
.pp-status { display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 42px; padding: 0 24px; font-size: 11px; font-weight: 750; }
.pp-status > svg { width: 42px; height: 11px; }
.pp-island { position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 85px; height: 22px; border-radius: 20px; background: #1c2925; }
.pp-masthead { display: flex; align-items: center; justify-content: space-between; padding: 10px 21px 16px; }
.pp-masthead > div { display: grid; gap: 1px; }
.pp-workspace { color: #61766e; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.pp-masthead strong { font-size: 29px; line-height: 1.15; letter-spacing: -.06em; font-weight: 700; }
.pp-masthead strong > span { color: #008757; }
.pp-connected { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #dce9e1; border-radius: 7px; color: #34614c; font-size: 9px; font-weight: 650; }
.pp-connected > i, .pp-call-state > i { width: 5px; height: 5px; border-radius: 50%; background: #008757; }
.pp-app { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; flex-direction: column; border: 0; margin: 0; padding: 0; }
.pp-sr-only, .pp-choice { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pp-panels { display: grid; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; margin: 0 17px; }
.pp-panel { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transform: translateX(7px); transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s .32s; }
.pp-choice[value="calls"]:checked ~ .pp-panels > .pp-panel--calls,
.pp-choice[value="chat"]:checked ~ .pp-panels > .pp-panel--chat,
.pp-choice[value="team"]:checked ~ .pp-panels > .pp-panel--team { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.pp-page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 3px 12px; }
.pp-page-heading > h3 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.045em; font-weight: 650; }
.pp-page-heading > span { color: #6a7b73; font-size: 10px; }
.pp-conversation { border: 1px solid #dbe9df; background: linear-gradient(145deg, #eef6ef, #e6f2e9); border-radius: 18px; padding: 13px 14px 0; overflow: clip; }
.pp-call-state { display: flex; gap: 5px; align-items: center; color: #42664f; font-size: 9px; font-weight: 650; }
.pp-call-clock { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .06em; font-size: 10px; }
.pp-caller { display: grid; justify-items: center; margin-top: 14px; }
.pp-avatar { display: inline-grid; flex: none; place-items: center; width: 37px; height: 37px; border-radius: 13px; font-size: 11px; letter-spacing: -.025em; font-weight: 700; }
.pp-avatar--caller { width: 54px; height: 54px; border-radius: 19px; color: #295c41; background: #d4e7d8; box-shadow: 0 0 0 5px #ffffff5c; font-size: 19px; }
.pp-caller > strong { margin-top: 9px; font-size: 17px; font-weight: 650; letter-spacing: -.035em; }
.pp-caller > span:last-child { color: #597160; font-size: 10px; margin-top: 2px; }
.pp-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; margin: 6px 0; }
.pp-wave > i { width: 3px; height: 8px; border-radius: 4px; background: #4b8d67; transform-origin: center; }
.pp-wave > i:nth-child(3n) { height: 17px; }
.pp-wave > i:nth-child(4n) { height: 24px; }
.pp-wave > i:nth-child(5n) { height: 31px; }
.pp-wave > i:nth-child(-n+3), .pp-wave > i:nth-last-child(-n+3) { height: 6px; opacity: .5; }
.pp-call-route { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; border-top: 1px solid #d1e3d6; color: #4b6c56; font-size: 9px; }
.pp-call-route > svg { width: 12px; height: 12px; }
.pp-list-heading { margin: 14px 3px 4px; color: #667b6e; font-size: 10px; font-weight: 650; }
.pp-history-row { display: flex; align-items: center; gap: 10px; padding: 9px 3px; }
.pp-history-row + .pp-history-row { border-top: 1px solid #e7eee9; }
.pp-history-row > span:nth-child(2) { display: grid; gap: 3px; }
.pp-history-row strong, .pp-person strong, .pp-chat-room strong { color: #263f32; font-size: 12px; font-weight: 650; }
.pp-history-row small { color: #6e7e74; font-size: 9px; }
.pp-history-row > time { margin-left: auto; color: #6e7e74; font-size: 9px; }
.pp-avatar--mint { color: #477151; background: #e6efe5; }
.pp-avatar--stone { color: #746950; background: #eeeae1; }
.pp-chat-room { display: flex; align-items: center; gap: 9px; padding: 12px 0 16px; border-bottom: 1px solid #e0e9e3; }
.pp-chat-room > div { display: grid; gap: 4px; }
.pp-chat-room small { color: #6d7e72; font-size: 9px; }
.pp-room-dots { display: flex; margin-left: auto; padding-right: 2px; }
.pp-room-dots > i { display: grid; place-items: center; width: 21px; height: 21px; margin-right: -4px; border: 2px solid #f8faf9; border-radius: 50%; background: #dfebe0; color: #55725a; font-size: 7px; font-weight: 700; font-style: normal; }
.pp-room-dots > i:nth-child(2) { background: #e9e3d7; }
.pp-room-dots > i:nth-child(3) { background: #d5e6db; }
.pp-messages { display: grid; gap: 17px; padding-top: 21px; }
.pp-message { max-width: 87%; }
.pp-message > span { display: block; color: #6e7e74; font-size: 9px; padding: 0 2px 6px; }
.pp-message > p { margin: 0; padding: 12px 13px; background: #ecf0ec; border: 1px solid #e2e8e1; border-radius: 3px 13px 13px; color: #304a39; font-size: 12px; line-height: 1.55; }
.pp-message--own { justify-self: end; }
.pp-message--own > span { text-align: right; }
.pp-message--own > p { background: #e0f0e4; border-color: #d3e5d9; border-radius: 13px 3px 13px 13px; }
.pp-panel-note { display: flex; gap: 6px; align-items: center; justify-content: center; margin: auto 0 12px; padding-top: 16px; color: #687d6e; font-size: 9px; }
.pp-panel-note > span { width: 4px; height: 4px; background: #75a487; border-radius: 50%; }
.pp-availability { display: flex; align-items: center; gap: 11px; background: #edf4ee; border: 1px solid #dfeade; border-radius: 14px; padding: 12px; }
.pp-avatar--self { background: #cee3d2; color: #315c3e; width: 42px; height: 42px; }
.pp-availability > div { display: grid; gap: 4px; }
.pp-availability small { color: #657a6b; font-size: 9px; }
.pp-availability strong { font-size: 14px; font-weight: 650; }
.pp-availability > i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #008757; box-shadow: 0 0 0 4px #d9eadc; }
.pp-panel--team .pp-list-heading { margin-top: 10px; }
.pp-person { display: flex; align-items: center; gap: 11px; padding: 8px 3px; }
.pp-person + .pp-person { border-top: 1px solid #e2eae3; }
.pp-person > div { display: grid; gap: 5px; }
.pp-person small { display: flex; align-items: center; gap: 5px; color: #687e6c; font-size: 10px; }
.pp-person small > i { width: 5px; height: 5px; border-radius: 50%; background: #008757; }
.pp-person--busy small > i { background: #b18b46; }
.pp-hours { display: flex; gap: 11px; align-items: center; margin-top: 6px; padding: 10px 13px; border: 1px solid #dde7df; border-radius: 13px; background: #fff; }
.pp-hours > svg { width: 21px; height: 21px; color: #6e8b73; }
.pp-hours > div { display: grid; gap: 5px; }
.pp-hours strong { font-size: 10px; font-weight: 650; }
.pp-hours span { color: #6a7e70; font-size: 10px; }
.pp-navigation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 14px 0; padding: 8px 1px 0; border-top: 1px solid #e1e9e3; }
.pp-navigation > label { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; border-radius: 12px; color: #758077; font-size: 10px; font-weight: 650; transition: color .2s, background .2s; }
.pp-navigation > label > svg { width: 20px; height: 20px; }
.pp-navigation > label:hover { background: #eff4ef; color: #315c3e; }
.pp-choice[value="calls"]:checked ~ .pp-navigation > label:nth-child(1),
.pp-choice[value="chat"]:checked ~ .pp-navigation > label:nth-child(2),
.pp-choice[value="team"]:checked ~ .pp-navigation > label:nth-child(3) { background: #e8f1e9; color: #12613d; }
.pp-choice[value="calls"]:focus-visible ~ .pp-navigation > label:nth-child(1),
.pp-choice[value="chat"]:focus-visible ~ .pp-navigation > label:nth-child(2),
.pp-choice[value="team"]:focus-visible ~ .pp-navigation > label:nth-child(3) { outline: 2px solid #008757; outline-offset: 2px; }
.pp-home-indicator { width: 98px; height: 4px; border-radius: 3px; background: #243d2e; margin: 10px auto 9px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-pulse-preview] .pp-wave > i { animation: pp-voice 1.4s ease-in-out infinite alternate; animation-play-state: paused; }
  [data-pulse-preview] .pp-wave > i:nth-child(3n) { animation-delay: -.6s; }
  [data-pulse-preview] .pp-wave > i:nth-child(4n) { animation-delay: -.95s; }
  [data-pulse-preview] .pp-wave > i:nth-child(5n) { animation-delay: -.3s; }
  [data-pulse-preview][data-playback="playing"] .pp-choice[value="calls"]:checked ~ .pp-panels .pp-wave > i { animation-play-state: running; }
  @keyframes pp-voice { from { transform: scaleY(.48); } to { transform: scaleY(1); } }
}
@media (max-width: 560px) {
  [data-pulse-preview] { width: min(100%, 310px); }
  .pp-masthead { padding-inline: 18px; }
  .pp-panels { margin-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-panel, .pp-navigation > label { transition: none; transform: none; }
}