/* Shared geometry for conversation navigation and the separate close control. */
.health-demo-modal {
  --dialogue-control-size: 50px;
  --dialogue-control-gap: 12px;
  --demo-frame-padding: 14px;
  --demo-panel-top: 24px;
  --demo-panel-side: 25px;
}
.health-demo-modal .health-call__panel {
  padding-top: var(--demo-panel-top);
  padding-inline: var(--demo-panel-side);
}
/* Draw the inner frame without offsetting the toolbar's content origin. */
.health-demo-modal .health-call {
  border: 0;
  box-shadow: inset 0 0 0 1px #ffffffd9;
}
.health-demo-modal .health-call__topbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--dialogue-control-gap);
  padding-right: calc(var(--dialogue-control-size) + var(--dialogue-control-gap));
}
.health-demo-modal .health-call__topbar > .health-call__back,
.health-demo-modal .health-call__topbar > .health-call__data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  height: var(--dialogue-control-size);
  min-height: var(--dialogue-control-size);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}
.health-demo-modal .health-call__topbar > .health-call__data > .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.health-demo-modal .health-call__topbar > .health-call__data:disabled,
.service-modal__shell.is-call-active .repair-data-trigger--stage:disabled {
  color: #708298;
  border-color: #dce6f1;
  background: #edf2f8;
  cursor: default;
}
.health-demo-modal .health-data__examples:not(.health-data__persona) {
  position: sticky;
  top: 0;
  z-index: 3;
}
.health-demo-modal[open] > .modal-close {
  top: calc(var(--demo-frame-padding) + var(--demo-panel-top));
  right: calc(var(--demo-frame-padding) + var(--demo-panel-side));
  width: var(--dialogue-control-size);
  min-width: var(--dialogue-control-size);
  height: var(--dialogue-control-size);
  min-height: var(--dialogue-control-size);
  padding: 0;
}
.health-demo-modal .health-call__controls > .health-call__retry,
.health-demo-modal .health-call__controls > .health-call__end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: var(--dialogue-control-size);
  min-height: var(--dialogue-control-size);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}
@media (max-width: 1100px) and (min-width: 684.01px) {
  .health-demo-modal { --demo-panel-side: 22px; }
}
@media (max-height: 666px) and (min-width: 684.01px) {
  .health-demo-modal { --demo-frame-padding: 11px; --demo-panel-top: 19px; }
}
@media (max-width: 684px) {
  .health-demo-modal {
    --dialogue-control-gap: 8px;
    --demo-frame-padding: 10px;
    --demo-panel-top: 16px;
    --demo-panel-side: 15px;
  }
  .health-demo-modal .health-call__topbar { padding-right: 0; }
  .health-demo-modal .health-call__topbar > .health-call__back,
  .health-demo-modal .health-call__topbar > .health-call__data {
    font-size: 12px;
    gap: 6px;
    padding: 8px;
  }
  .health-demo-modal[open] > .modal-close,
  .health-demo-modal[open].has-data > .modal-close {
    top: 17px;
    right: 17px;
    width: var(--dialogue-control-size);
    height: var(--dialogue-control-size);
  }
  .health-demo-modal .health-data__header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "close" "title";
    gap: 8px;
    padding: calc(17px - var(--demo-frame-padding)) 17px 14px;
  }
  .health-demo-modal .health-data__header > .health-data__eyebrow { display: none; }
  .health-demo-modal .health-data__header > .health-data__close {
    grid-area: close;
    justify-self: start;
    max-width: calc(100% - var(--dialogue-control-size) - var(--dialogue-control-gap));
    height: var(--dialogue-control-size);
    min-height: var(--dialogue-control-size);
    padding: 8px 12px;
    margin: 0;
    border: 1px solid #c7daee;
    border-radius: 12px;
    background: #f4f9ff;
    font-size: 12px;
  }
}

/* Automotive calls have a separate shell, with the same control dimensions. */
.service-modal__shell.is-call-active {
  --dialogue-control-size: 50px;
  --dialogue-control-gap: 12px;
  --dialogue-frame-padding: 18px;
  --dialogue-panel-top: 24px;
  --dialogue-panel-side: 34px;
}
.service-modal__shell.is-call-active .service-call__panel {
  padding-top: var(--dialogue-panel-top);
  padding-inline: var(--dialogue-panel-side);
}
.service-modal__shell.is-call-active .service-call {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84);
}
.service-modal__shell.is-call-active .service-call__topbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--dialogue-control-gap);
  padding-right: calc(var(--dialogue-control-size) + var(--dialogue-control-gap));
  margin: 0 0 24px;
}
.service-modal__shell.is-call-active .service-call__topbar > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: var(--dialogue-control-size);
  min-height: var(--dialogue-control-size);
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}
.service-modal__shell.is-call-active .service-call__topbar > button[hidden] { display: none; }
.service-modal__shell.is-call-active .repair-data-trigger__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.service-modal__shell.is-call-active > .service-modal__close {
  top: calc(var(--dialogue-frame-padding) + var(--dialogue-panel-top));
  right: calc(var(--dialogue-frame-padding) + var(--dialogue-panel-side));
  width: var(--dialogue-control-size);
  height: var(--dialogue-control-size);
}
.service-modal__shell.is-call-active > .service-modal__close:hover { transform: none; }
.service-modal__shell.is-call-active .service-call__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dialogue-control-gap);
}
.service-modal__shell.is-call-active .service-call__controls > button {
  width: 100%;
  min-width: 0;
  min-height: var(--dialogue-control-size);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
}
.service-modal__shell.is-call-active .service-call__retry { grid-column: 1; grid-row: 1; }
.service-modal__shell.is-call-active .service-call__end { grid-column: 2; grid-row: 1; }
.service-modal__shell.is-call-active .service-call__privacy { grid-column: 1 / -1; }
.service-call[data-state="ready"] .service-call__retry { color: #fff; background: #075fda; border-color: #0b62d3; }
.service-call__controls:has(.service-call__retry[hidden]) .service-call__end { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .service-modal__shell.is-call-active {
    --dialogue-control-gap: 8px;
    --dialogue-frame-padding: 8px;
    --dialogue-panel-top: 26px;
    --dialogue-panel-side: 18px;
  }
  .service-modal__shell.is-call-active .service-call__topbar { padding-right: 0; margin-bottom: 18px; }
  .service-modal__shell.is-call-active .service-call__topbar > button { font-size: 12px; padding: 8px; }
  .service-modal__shell.is-call-active > .service-modal__close { top: 16px; right: 16px; }
}