:root {
  --mobile-action-control-size: 44px;
  --mobile-action-vertical-padding: .625rem;
  --mobile-action-horizontal-padding: 1rem;
  --mobile-action-bar-height: calc(var(--mobile-action-control-size) + 1.25rem + 1px);
  --mobile-action-bar-gap: .5rem;
  --mobile-action-bar-reserve: calc(var(--mobile-action-bar-height) + env(safe-area-inset-bottom) + var(--mobile-action-bar-gap));
}

.contact-dialog {
  width: min(30rem, calc(100% - 2rem));
  max-width: 30rem;
  max-block-size: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.contact-dialog__panel {
  display: grid;
  gap: 1rem;
  max-block-size: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
  .contact-dialog,
  .contact-dialog__panel {
    max-block-size: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
  }
}

.contact-dialog__header,
.contact-dialog__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.contact-dialog__header {
  justify-content: space-between;
}

.contact-dialog__title,
.contact-dialog__lawyer,
.contact-dialog__wechat,
.contact-dialog__notice,
.contact-dialog__status {
  margin: 0;
}

.contact-dialog__title {
  color: var(--ink);
}

.contact-dialog__lawyer,
.contact-dialog__notice,
.contact-dialog__status {
  color: var(--ink);
}

.contact-dialog__wechat {
  font-weight: 700;
  color: var(--ink);
}

.contact-dialog__qr {
  width: min(12rem, 100%);
  justify-self: center;
  border: 1px solid var(--line);
}

.contact-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-copy,
.contact-call,
.contact-close,
.contact-phone,
.contact-wechat {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: .75rem;
  font: inherit;
  text-decoration: none;
}

.contact-copy,
.contact-wechat {
  background: var(--brand);
  color: var(--paper);
}

.contact-call,
.contact-close,
.contact-phone {
  background: var(--paper);
  color: var(--ink);
}

.contact-copy,
.contact-call,
.contact-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem .875rem;
  cursor: pointer;
}

.mobile-bar,
.mobile-action-bar {
  display: none;
}

@media (max-width: 700px) {
  .contact-dialog {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 1rem 1rem 0 0;
  }

  .mobile-bar,
  .mobile-action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding:
      var(--mobile-action-vertical-padding)
      max(var(--mobile-action-horizontal-padding), env(safe-area-inset-right))
      calc(var(--mobile-action-vertical-padding) + env(safe-area-inset-bottom))
      max(var(--mobile-action-horizontal-padding), env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
  }

  .mobile-bar .contact-phone,
  .mobile-bar .contact-wechat,
  .mobile-action-bar .contact-phone,
  .mobile-action-bar .contact-wechat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--mobile-action-control-size);
    padding: .625rem .75rem;
    text-align: center;
  }
}