/* Quick contact bubble. Sits on the inline-end corner, opposite the accessibility widget.
   One tap opens WhatsApp. The gold dot is a quiet notification cue that pulses twice on arrival. */
.qc { position: fixed; z-index: 88; inset-block-end: 20px; inset-inline-end: 20px; }
.qc.is-raised { inset-block-end: 96px; }

.qc-bubble {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid var(--gold); border-radius: 50%; background: var(--night); color: var(--gold-lum);
  box-shadow: 0 12px 30px -10px rgba(11, 31, 44, 0.55);
  transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.qc-bubble:hover { background: var(--petrol); color: var(--paper); transform: translateY(-2px); }
.qc-bubble:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

.qc-dot {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 14px; height: 14px;
  border: 2px solid var(--night); border-radius: 50%; background: var(--gold-lum);
}
html.js .qc-dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-lum);
  animation: qc-ping 1.6s var(--ease-out) 1.2s 2 both;
}
@keyframes qc-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }

@media (max-width: 600px) {
  .qc { inset-block-end: 16px; inset-inline-end: 16px; }
  .qc.is-raised { inset-block-end: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .qc-bubble { transition: none; }
  html.js .qc-dot::after { animation: none; display: none; }
}
html.a11y-reduced-motion .qc, html.a11y-reduced-motion .qc * { animation: none !important; transition: none !important; }
@media print { .qc { display: none; } }