/* Contact person: round photo bottom right, click opens the card (popover, no script).
   z-index 640: above the content and the shop dock (610), below section bar (650) and header (700).
   While the shop dock (theme, .sg-dock) is visible, the box moves up. */
.sg-contact {
  --sg-contact-lift: 0px;
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + var(--sg-contact-lift) + env(safe-area-inset-bottom, 0px));
  z-index: 640;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: bottom .3s ease;
}
body:has(.sg-dock.is-visible) .sg-contact { --sg-contact-lift: 76px; }

.sg-contact__toggle {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--wp--preset--color--teal, #0e6e64);
  box-shadow: 0 12px 28px -10px rgba(21, 26, 25, .45);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease;

  &:hover { transform: scale(1.05); }
  &:focus-visible { outline: 2px solid var(--wp--preset--color--teal, #0e6e64); outline-offset: 3px; }

  /* green dot: "available" */
  &::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--wp--preset--color--accent, #8ac9ac);
  }
}

:is(.sg-contact__toggle, .sg-contact__head) .sg-contact__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sg-contact__initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

/* speech bubble next to the photo */
.sg-contact__message {
  position: relative;
  max-width: 240px;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  color: var(--wp--preset--color--ink, #151a19);
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 0;
  box-shadow: 0 12px 28px -14px rgba(21, 26, 25, .4), 0 1px 3px rgba(21, 26, 25, .08);

  &::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
  }
}
.sg-contact:has(.sg-contact__panel:popover-open) .sg-contact__message { display: none; }

/* the card (top layer of the browser, placed above the photo) */
.sg-contact__panel {
  position: fixed;
  inset: auto max(20px, env(safe-area-inset-right, 0px)) calc(96px + var(--sg-contact-lift, 0px) + env(safe-area-inset-bottom, 0px)) auto;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--wp--custom--body, #3f4846);
  font-size: 14.5px;
  line-height: 1.55;
  box-shadow: 0 28px 60px -20px rgba(21, 26, 25, .45), 0 2px 8px rgba(21, 26, 25, .08);

  &:popover-open { animation: sg-contact-in .25s cubic-bezier(.23, 1, .32, 1); }
}
@keyframes sg-contact-in {
  from { opacity: 0; transform: translateY(12px); }
}

.sg-contact__head {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 16px;
  background: var(--wp--preset--color--teal, #0e6e64);
  color: #fff;

  & .sg-contact__photo { width: 56px; height: 56px; border: 2px solid #fff; }
  & > :first-child:not(img) { grid-column: 1 / 3; }
}
.sg-contact__name { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.sg-contact__role { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.sg-contact__close {
  align-self: start;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  &:hover { background: rgba(255, 255, 255, .26); }
}

.sg-contact__body {
  padding: 18px;

  & > * { margin-block: 0; }
  & > * + * { margin-block-start: 12px; }
  & .wp-block-buttons { gap: 8px; }
}

/* phones: a real card above the photo – not a flat strip: more room, larger photo and name, buttons across the width,
   at most three quarters of the screen high (the text scrolls, the head with the close button stays) */
@media (max-width: 600px) {
  .sg-contact__message { display: none; }
  .sg-contact__toggle { width: 56px; height: 56px; }
  .sg-contact__panel {
    inset: auto 12px calc(84px + var(--sg-contact-lift, 0px) + env(safe-area-inset-bottom, 0px)) 12px;
    width: auto;
    max-height: min(75dvh, 600px);
    font-size: 15px;
    box-shadow: 0 30px 70px -18px rgba(21, 26, 25, .55), 0 0 0 1px rgba(21, 26, 25, .06);
  }
  .sg-contact__head {
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    padding: 22px 20px 20px;

    & .sg-contact__photo { width: 64px; height: 64px; }
  }
  .sg-contact__name { font-size: 18px; }
  .sg-contact__role { font-size: 14px; }
  .sg-contact__close { width: 44px; height: 44px; margin: -6px -6px 0 0; }
  .sg-contact__body {
    padding: 20px 20px 24px;

    & > * + * { margin-block-start: 14px; }
    & .wp-block-buttons { flex-direction: column; align-items: stretch; }
    & .wp-block-button__link { display: block; width: 100%; text-align: center; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-contact, .sg-contact__toggle { transition: none; }
  .sg-contact__panel:popover-open { animation: none; }
}

@media print {
  .sg-contact { display: none; }
}

/* editor: card in the content (on the page the block shows nothing in place) */
.sg-contact-preview {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px dashed var(--wp--preset--color--teal-pale, #a8d2c9);
  background: var(--wp--preset--color--mint, #eef6f3);
  font-size: 13.5px;
  line-height: 1.4;

  & img, & .sg-contact-preview__initial {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  & .sg-contact-preview__initial {
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--teal, #0e6e64);
    color: #fff;
    font-weight: 700;
  }
  & strong { display: block; color: var(--wp--preset--color--ink, #151a19); }
}