/* Marco, the wedding concierge. Voice only (Retell web call, browser SDK v3).
   Palette and type are the site's own: olive and sage from the RSVP buttons, cream from the page
   ground, Inter from the nav, Instrument Serif from the hero. Radii match the nav pill (14px) and
   its button (10px). The site is single-theme, so this is too. */

#mc-root {
  --mc-olive: #404f33;
  --mc-olive-deep: #2f3b25;
  --mc-sage: #6f7e62;
  --mc-cream: #f4efec;
  --mc-ink: #252525;
  --mc-mute: #66665e;
  --mc-line: rgba(37, 37, 37, 0.1);
  --mc-shadow: 0 30px 80px -24px rgba(19, 38, 27, 0.5), 0 2px 8px rgba(19, 38, 27, 0.08);
  font-family: "Inter", "Inter Placeholder", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--mc-ink);
  -webkit-font-smoothing: antialiased;
}
#mc-root *, #mc-root *::before, #mc-root *::after { box-sizing: border-box; }
#mc-root button { font: inherit; color: inherit; }
#mc-root :focus-visible { outline: 2px solid var(--mc-olive); outline-offset: 3px; }

/* ---------- the floating button ---------- */
.mc-pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 20px 0 8px;
  background: #fff; border: 0; border-radius: 14px;
  box-shadow: 0 14px 34px -10px rgba(19, 38, 27, 0.42), 0 1px 3px rgba(19, 38, 27, 0.1);
  cursor: pointer; text-align: left;
  opacity: 0; transform: translateY(18px); pointer-events: none; visibility: hidden;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s, box-shadow 0.2s ease;
}
.mc-pill.is-shown { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mc-pill:hover { box-shadow: 0 18px 40px -10px rgba(19, 38, 27, 0.5), 0 1px 3px rgba(19, 38, 27, 0.1); }
.mc-pill.is-hidden-by-panel { opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; visibility: hidden; }

.mc-mark {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--mc-olive);
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.mc-mark i {
  display: block; width: 3px; border-radius: 2px; background: #fff;
  transform-origin: 50% 50%;
}
.mc-mark i:nth-child(1) { height: 9px; }
.mc-mark i:nth-child(2) { height: 17px; }
.mc-mark i:nth-child(3) { height: 12px; }
.mc-mark i:nth-child(4) { height: 6px; }
.mc-pill .mc-mark i { animation: mc-idle 3.6s ease-in-out infinite; }
.mc-pill .mc-mark i:nth-child(2) { animation-delay: 0.15s; }
.mc-pill .mc-mark i:nth-child(3) { animation-delay: 0.3s; }
.mc-pill .mc-mark i:nth-child(4) { animation-delay: 0.45s; }
.mc-pill.is-live .mc-mark { background: var(--mc-sage); }
.mc-pill.is-live .mc-mark i { animation: mc-live 0.9s ease-in-out infinite; }
@keyframes mc-idle { 0%, 70%, 100% { transform: scaleY(1); } 80% { transform: scaleY(0.45); } 90% { transform: scaleY(1.15); } }
@keyframes mc-live { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.1); } }

.mc-pill__text { display: flex; flex-direction: column; gap: 4px; }
.mc-pill__eyebrow { font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mc-sage); }
.mc-pill__label { font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; color: var(--mc-ink); }

/* ---------- the panel ---------- */
.mc-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483001;
  width: 376px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 20px; box-shadow: var(--mc-shadow);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; visibility: hidden;
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
.mc-panel.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }

.mc-photo {
  position: relative; height: 112px;
  background: var(--mc-cream) center 40% / cover no-repeat;
  border-radius: 20px 20px 0 0;
}
.mc-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.9) 100%);
}
.mc-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 10px; border: 0;
  background: rgba(255, 255, 255, 0.92); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(19, 38, 27, 0.14);
}
.mc-close svg { width: 14px; height: 14px; }

.mc-body { padding: 4px 24px 20px; }
/* the maker's credit: plain text, not a link, one quiet line under a hairline */
.mc-credit {
  margin: 0; padding: 11px 24px 13px; border-top: 1px solid var(--mc-line);
  text-align: center; font-size: 11px; line-height: 1; letter-spacing: 0.03em; color: #a2a298;
  cursor: default;
}
.mc-credit b { font-weight: 600; color: #7c7c73; letter-spacing: 0.01em; }
.mc-eyebrow { font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-sage); margin: 0 0 8px; }
.mc-title {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", "Times New Roman", serif;
  font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.01em;
  margin: 0; color: var(--mc-ink);
}
#mc-root .mc-title:focus, #mc-root .mc-title:focus-visible { outline: none; }
.mc-sub { font-size: 14px; line-height: 1.5; color: var(--mc-mute); margin: 10px 0 0; text-wrap: pretty; }

.mc-stage { margin-top: 18px; }
[data-view] { display: none; }
#mc-root[data-state="idle"] [data-view~="idle"],
#mc-root[data-state="mic"] [data-view~="mic"],
#mc-root[data-state="connecting"] [data-view~="call"],
#mc-root[data-state="live"] [data-view~="call"],
#mc-root[data-state="ended"] [data-view~="ended"],
#mc-root[data-state="denied"] [data-view~="problem"],
#mc-root[data-state="nomic"] [data-view~="problem"],
#mc-root[data-state="error"] [data-view~="problem"] { display: block; }

.mc-try { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-line); }
.mc-try__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-sage); margin: 0 0 10px; }
.mc-try li {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", "Times New Roman", serif;
  font-style: italic; font-size: 19px; line-height: 1.3; color: var(--mc-ink);
  padding: 9px 0; border-bottom: 1px solid var(--mc-line);
}

.mc-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; margin-top: 20px;
  border: 0; border-radius: 10px; background: var(--mc-olive); color: #fff !important;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: background 0.2s ease;
}
.mc-primary:hover { background: var(--mc-olive-deep); }
.mc-primary[disabled] { opacity: 0.6; cursor: default; }
.mc-primary svg { width: 17px; height: 17px; }
.mc-note { font-size: 12.5px; line-height: 1.45; color: var(--mc-mute); margin: 10px 0 0; text-align: center; }

/* the voice orb */
.mc-orb { position: relative; width: 150px; height: 150px; margin: 6px auto 0; --lvl: 0; }
.mc-orb span { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.mc-orb__halo {
  width: 150px; height: 150px; background: rgba(111, 126, 98, 0.16);
  transform: scale(calc(0.72 + var(--lvl) * 0.28)); transition: transform 0.08s linear;
}
.mc-orb__ring {
  width: 116px; height: 116px; border: 1px solid rgba(111, 126, 98, 0.45);
  transform: scale(calc(0.9 + var(--lvl) * 0.16)); transition: transform 0.08s linear;
}
.mc-orb__core {
  width: 88px; height: 88px;
  background: radial-gradient(circle at 38% 32%, #6a7a5a 0%, var(--mc-olive) 58%, var(--mc-olive-deep) 100%);
  box-shadow: 0 10px 26px -8px rgba(47, 59, 37, 0.6);
  transform: scale(calc(1 + var(--lvl) * 0.12)); transition: transform 0.08s linear;
}
#mc-root[data-state="connecting"] .mc-orb__halo { animation: mc-breathe 1.6s ease-in-out infinite; }
#mc-root[data-state="live"]:not([data-talk="agent"]) .mc-orb__halo { animation: mc-breathe 3.2s ease-in-out infinite; }
@keyframes mc-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.mc-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--mc-sage); min-height: 18px;
}
.mc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#mc-root[data-state="live"] .mc-status::before { background: #5d9a5a; }
#mc-root[data-muted="1"] .mc-status::before { background: #b0873a; }

.mc-caption {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", "Times New Roman", serif;
  font-size: 19px; line-height: 1.35; text-align: center; color: var(--mc-ink);
  margin: 12px 0 0; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mc-caption:empty { display: none; }

.mc-controls { display: flex; gap: 10px; margin-top: 20px; }
.mc-controls button {
  flex: 1; height: 48px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
}
.mc-controls svg { width: 16px; height: 16px; }
.mc-mute { background: #fff; border: 1px solid rgba(37, 37, 37, 0.18); }
.mc-mute[aria-pressed="true"] { background: var(--mc-cream); border-color: rgba(37, 37, 37, 0.28); }
.mc-end { background: var(--mc-ink); border: 1px solid var(--mc-ink); color: #fff !important; }
.mc-end:hover { background: #000; }

.mc-message {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", "Times New Roman", serif;
  font-size: 24px; line-height: 1.25; margin: 0; color: var(--mc-ink); text-wrap: balance;
}
.mc-message + .mc-sub { margin-top: 8px; }
.mc-text-btn {
  display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--mc-mute); cursor: pointer;
}
.mc-text-btn:hover { color: var(--mc-ink); }

/* phones */
@media (max-width: 600px) {
  #mc-root .mc-pill { right: 0; left: 0; bottom: 16px; margin: 0 auto; width: max-content; }
  .mc-panel { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; max-height: calc(100vh - 24px); transform-origin: 50% 100%; }
  .mc-photo { height: 96px; }
  .mc-body { padding: 2px 20px 18px; }
  .mc-credit { padding: 10px 20px 12px; }
  .mc-title { font-size: 38px; }
  .mc-try li { font-size: 18px; padding: 8px 0; }
  .mc-orb { width: 132px; height: 132px; }
  .mc-orb__halo { width: 132px; height: 132px; }
  .mc-orb__ring { width: 104px; height: 104px; }
  .mc-orb__core { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-pill, .mc-panel { transition: opacity 0.2s ease, visibility 0s linear 0.2s; transform: none !important; }
  .mc-pill.is-shown, .mc-panel.is-open { transition-delay: 0s; }
  .mc-mark i, .mc-orb span { animation: none !important; }
  .mc-orb span { transform: none !important; }
}

.mc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }