/* Motion adapted from the user's GlobalConsultationButton.vue; native HTML/CSS here. */
.contact-fab {
  --contact-content-width: 1240px;
  --contact-size: 52px;
  position: fixed;
  right: max(22px, env(safe-area-inset-right), calc((100vw - var(--contact-content-width)) / 2 - var(--contact-size) - 66px));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  place-items: center;
  width: var(--contact-size);
  height: var(--contact-size);
  padding: 0;
  border: 1px solid #6bab71;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #57ac67, #227c3c);
  box-shadow: 0 12px 30px #26784038;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 36px #2678404d; }
.contact-fab:active { transform: scale(.95); }
.contact-fab:focus-visible { outline: 3px solid #b2d6aa; outline-offset: 4px; }
.contact-fab::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #4094508c;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: contact-ripple 2.7s ease-out infinite;
}
.contact-fab-icon { display: grid; place-items: center; transform-origin: center 75%; animation: contact-hello 5.4s ease-in-out infinite; }
.contact-fab-icon .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.contact-fab > i { position: absolute; top: 4px; right: 5px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #bbdf89; }
.contact-fab-greeting { position: absolute; right: calc(100% + 14px); padding: 11px 14px; border: 1px solid #d5e6cf; border-radius: 16px 16px 4px 16px; color: var(--ink); background: #fff; box-shadow: 0 6px 24px #2a6d301a; font-size: 13px; line-height: 1.5; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.contact-fab-greeting strong { color: var(--green-dark); font-weight: 600; }
.contact-fab-greeting > span { display: inline-block; margin-left: 7px; color: var(--green); }
.contact-fab:is(:hover, :focus-visible) .contact-fab-greeting { opacity: 1; }
.contact-fab.is-open .contact-fab-greeting { opacity: 0; }
.contact-fab.is-open::before, .contact-fab.is-open .contact-fab-icon { animation: none; }
html.has-open-dialog { overflow: hidden; }
html.has-open-dialog .contact-fab::before, html.has-open-dialog .contact-fab-icon { animation-play-state: paused; }

@keyframes contact-hello {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  7% { transform: translateY(2px) scale(1.1, .9); }
  15% { transform: translateY(-6px) rotate(-6deg) scale(.96, 1.06); }
  22% { transform: translateY(1px) scale(1.08, .94); }
  29% { transform: translateY(-4px) rotate(6deg); }
  36% { transform: translateY(0) rotate(0); }
  44% { transform: translateX(-2px) rotate(-16deg); }
  52% { transform: translateX(2px) rotate(16deg); }
  60% { transform: translateX(-1px) rotate(-12deg); }
  68% { transform: translateX(1px) rotate(9deg); }
  76% { transform: translateY(1px) rotate(0) scale(1.1, .9); }
  85% { transform: translateY(-2px) scale(1.16); }
  93% { transform: translateY(1px) scale(.95, 1.04); }
}
@keyframes contact-ripple { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

.consultation-dialog { width: min(740px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #dfe7d9; border-radius: 21px; background: #fff; color: var(--ink); box-shadow: 0 30px 86px #122a2138; }
.consultation-dialog::backdrop { background: #142b2466; backdrop-filter: blur(7px); }
.consultation-close { position: absolute; top: 16px; right: 16px; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border: 1px solid #e0e8d9; border-radius: 50%; color: #75836c; background: #ffffffed; }
.consultation-close .icon { width: 17px; height: 17px; }
.consultation-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; }
.consultation-copy { position: relative; overflow: hidden; padding: 32px 34px; }
.consultation-copy::after { content: ''; position: absolute; width: 210px; height: 210px; left: -133px; bottom: -167px; border: 1px solid #dfead6; border-radius: 50%; box-shadow: 0 0 0 34px #f4f8ef, 0 0 0 69px #f9fbf6; pointer-events: none; z-index: 0; }
.consultation-copy > * { position: relative; z-index: 1; }
.consultation-brand { display: flex; align-items: center; gap: 11px; }
.consultation-brand img { width: 42px; height: 42px; }
.consultation-brand strong { display: block; font-size: 17px; line-height: 1.4; font-weight: 600; }
.consultation-brand span { display: block; margin-top: 3px; color: #708164; font-size: 10px; letter-spacing: .04em; }
.consultation-intro { margin-top: 28px; }
.consultation-intro .eyebrow { margin-bottom: 10px; font-size: 10px; }
.consultation-intro h2 { font-size: 29px; line-height: 1.4; white-space: nowrap; letter-spacing: -.035em; }
.consultation-intro > p { margin-top: 9px; font-size: 12px; color: #6d7d62; }
.consultation-details { display: grid; gap: 16px; list-style: none; padding: 0; margin: 25px 0 0; }
.consultation-details > li { display: flex; align-items: center; gap: 12px; }
.consultation-detail-icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; color: #629453; background: #eef5e7; border-radius: 10px; }
.consultation-detail-icon .icon { width: 17px; height: 17px; }
.consultation-details li > div > span { display: block; margin-bottom: 2px; color: #758568; font-size: 10px; line-height: 1.5; }
.consultation-details strong { display: block; font-size: 16px; font-weight: 550; line-height: 1.5; }
.consultation-details .consultation-phone { display: block; font-size: 21px; font-weight: 550; line-height: 1.5; letter-spacing: .01em; }
.consultation-details .consultation-hours { font-size: 13px; font-weight: 500; }
.consultation-more { font-size: 11px; margin-top: 22px; gap: 9px; }
.consultation-more .icon { width: 15px; height: 15px; }
.consultation-qr { display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #e2eadb; background: #f3f7ed; padding: 55px 22px 26px; text-align: center; }
.consultation-qr h3 { color: #3d5e35; font-size: 15px; font-weight: 550; letter-spacing: .015em; }
.wechat-qr-link { display: block; width: 100%; max-width: 248px; padding: 0; overflow: hidden; border: 1px solid #e1e9d9; border-radius: 12px; background: #fff; }
.wechat-qr-link > img { display: block; width: 100%; height: auto; object-fit: contain; }
.consultation-qr .wechat-qr-link { margin-top: 17px; box-shadow: 0 12px 28px #334d2110; }
.consultation-qr > p { margin-top: 13px; color: #748369; font-size: 10px; line-height: 1.65; }
.contact-qr-card .wechat-qr-link { max-width: 260px; margin: 25px auto 18px; }

@media (min-width:1600px) { .contact-fab { --contact-content-width: 1280px; } }
@media (max-width:680px) {
  .contact-fab { --contact-size: 48px; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .contact-fab-icon .icon { width: 22px; height: 22px; }
  .contact-fab-greeting { display: none; }
  .consultation-dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 17px; }
  .consultation-shell { grid-template-columns: 1fr; max-height: calc(100vh - 26px); max-height: calc(100dvh - 26px); }
  .consultation-close { top: 13px; right: 13px; width: 32px; height: 32px; }
  .consultation-copy { padding: 25px 25px 24px; }
  .consultation-brand { display: none; }
  .consultation-intro { margin-top: 0; }
  .consultation-intro .eyebrow { display: none; }
  .consultation-intro h2 { font-size: 25px; }
  .consultation-details { grid-template-columns: 1fr 1fr; grid-template-areas: "person hours" "phone phone"; gap: 14px; margin-top: 20px; }
  .consultation-details > li:nth-child(1) { grid-area: person; }
  .consultation-details > li:nth-child(2) { grid-area: phone; }
  .consultation-details > li:nth-child(3) { grid-area: hours; }
  .consultation-details > li:nth-child(3) .consultation-detail-icon { display: none; }
  .consultation-details .consultation-hours { font-size: 11px; }
  .consultation-details .consultation-phone { font-size: 22px; }
  .consultation-more { margin-top: 17px; }
  .consultation-qr { padding: 23px 24px 26px; border-left: 0; border-top: 1px solid #e2eadb; }
  .consultation-qr .wechat-qr-link { max-width: 220px; margin-top: 14px; }
}
@media (max-height:650px) and (min-width:681px) {
  .consultation-copy { padding-block: 25px; }
  .consultation-qr { padding-top: 48px; }
}
@media (prefers-reduced-motion:reduce) {
  .contact-fab, .contact-fab::before, .contact-fab-icon, .contact-fab-greeting { animation: none; transition: none; }
  .contact-fab:is(:hover, :focus-visible, :active) { transform: none; }
}