.contact-dock {
  --dock-blue: #117cff;
  --dock-ink: #253747;
  --dock-muted: #607384;
  --dock-card: #fff;
  --dock-soft: #f4f8fa;
  --dock-line: #dce6ec;
  position: fixed;
  right: 22px;
  bottom: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.contact-dock button { border: 0; cursor: pointer; }
.contact-dock-main { position: relative; }
.dock-toggle, .dock-top, .dock-channel {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; position: relative; flex: none;
}
.dock-toggle {
  width: 52px; height: 52px; background: var(--dock-blue); color: #fff;
  box-shadow: 0 6px 22px #1b568e35; border: 1px solid #ffffff50;
  transition: box-shadow .25s, transform .25s;
}
.dock-toggle:hover { box-shadow: 0 8px 25px #1b568e50; transform: translateY(-2px); }
.dock-toggle svg, .dock-top svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.dock-chevron-icon { transition: transform .25s; }
.contact-dock.is-open .dock-chevron-icon { transform: rotate(180deg); }

.contact-dock-panel {
  position: absolute; right: -5px; bottom: 100%;
  display: flex; flex-direction: column; gap: 9px; padding: 11px 7px 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px) scale(.94); transform-origin: bottom center;
  transition: opacity .22s, transform .25s, visibility 0s .25s;
}
.contact-dock-panel:before {
  content: ""; position: absolute; inset: 0 0 9px; z-index: -1;
  background: var(--dock-card); border: 1px solid var(--dock-line);
  border-radius: 36px; box-shadow: 0 12px 32px #172a4126;
}
.contact-dock.is-open .contact-dock-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1); transition: opacity .22s, transform .25s, visibility 0s;
}

.dock-channel { width: 46px; height: 46px; color: #fff; transition: transform .2s, filter .2s; text-decoration: none; }
.dock-channel:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.dock-channel svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.dock-phone { background: #ec892e; }
.dock-line { background: #35b648; }
.dock-facebook { background: #3175e6; }
.dock-contact { background: var(--dock-blue); }
.dock-instagram { background: linear-gradient(135deg, #9653bd, #cb4184 70%, #e48156); }
.dock-instagram svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.dock-instagram .ig-dot { fill: currentColor; stroke: none; }
.dock-phone svg { width: 22px; height: 22px; }
.dock-contact svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock-line svg { width: 32px; height: 32px; }
.dock-line text { font-family: Arial, sans-serif; font-size: 7px; fill: #35a643; font-weight: 800; letter-spacing: -.35px; }

.dock-label {
  position: absolute; right: calc(100% + 13px); top: 50%; transform: translate(5px, -50%);
  background: var(--dock-ink); color: #fff; white-space: nowrap; padding: 7px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.5;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.dock-channel:hover .dock-label, .dock-channel:focus-visible .dock-label,
.dock-top:hover .dock-label, .dock-top:focus-visible .dock-label {
  opacity: 1; visibility: visible; transform: translate(0, -50%);
}

.dock-phone-card {
  position: absolute; right: calc(100% + 14px); top: 11px; width: 268px;
  padding: 19px 20px 17px; border: 1px solid var(--dock-line); border-radius: 20px;
  background: var(--dock-card); color: var(--dock-ink);
  box-shadow: 0 16px 42px #142e4a24; z-index: 2; animation: dock-phone-in .18s ease-out;
}
.dock-phone-card[hidden] { display: none; }
.dock-phone-card:before {
  content: ""; position: absolute; right: -6px; top: 22px; width: 10px; height: 10px;
  transform: rotate(45deg); background: var(--dock-card);
  border-top: 1px solid var(--dock-line); border-right: 1px solid var(--dock-line);
}
.dock-phone-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dock-phone-heading h3 { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .08em; color: var(--dock-muted); }
.dock-phone-dismiss {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  background: var(--dock-soft); color: var(--dock-muted);
}
.dock-phone-dismiss:hover { color: var(--dock-blue); }
.dock-phone-card svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock-phone-number { margin: 10px 0 16px; font-size: 27px; line-height: 1.3; font-weight: 650; letter-spacing: .015em; white-space: nowrap; user-select: text; }
.dock-phone-copy {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 42px;
  border: 1px solid var(--dock-line) !important; border-radius: 11px; padding: 9px 13px;
  background: var(--dock-soft); color: var(--dock-blue); font-size: 14px; font-weight: 600;
  transition: background .2s, color .2s;
}
.dock-phone-copy:hover { background: var(--dock-blue); color: #fff; }
.dock-copy-status { margin: 9px 0 0; font-size: 12px; line-height: 1.6; color: var(--dock-muted); }
.dock-copy-status:empty { display: none; }
.dock-phone[aria-expanded=true] .dock-label { display: none; }
@keyframes dock-phone-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }

.dock-top {
  width: 44px; height: 0; opacity: 0; visibility: hidden; overflow: hidden; margin-top: -9px;
  background: var(--dock-card); color: var(--dock-blue); border: 1px solid transparent;
  box-shadow: 0 4px 16px #142e4a12;
  transition: height .22s, margin .22s, opacity .2s, visibility .2s;
}
.contact-dock.has-scroll .dock-top {
  height: 44px; opacity: 1; visibility: visible; overflow: visible; margin-top: 0; border-color: var(--dock-line);
}

@media (max-width: 700px) {
  .contact-dock { right: 13px; bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .dock-toggle { width: 48px; height: 48px; }
  .contact-dock-panel { padding: 9px 5px 17px; gap: 8px; }
  .dock-phone-card { width: 240px; }
  .dock-phone-number { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dock *, .contact-dock *:before { transition: none !important; animation: none !important; }
}