/* ==========================================================================
   Clinic concierge — launcher + glass chat panel (assets/js/concierge.js)
   Sits directly above the floating WhatsApp button; uses site.css tokens.
   ========================================================================== */

/* ---------- Launcher: compact round button, label only as hover tooltip ---------- */
.cg-launch { position: fixed; z-index: 94; right: 20px; bottom: 86px; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--forest); color: var(--pearl); box-shadow: 0 18px 36px -14px rgba(22, 48, 42, .6), 0 0 0 1px rgba(255, 255, 255, .12) inset; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .6s, transform .8s var(--ease-out), background-color .3s, box-shadow .5s; -webkit-tap-highlight-color: transparent; }
.cg-launch.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cg-launch.is-in:hover { transform: translateY(-3px); background: var(--forest-900); box-shadow: 0 24px 44px -14px rgba(22, 48, 42, .7), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.cg-launch:focus-visible { outline: 2px solid var(--logo-magenta, #B0285F); outline-offset: 3px; }
.cg-launch > * { grid-area: 1 / 1; }
.cg-launch .lotus { width: 31px; color: var(--blush-300); transition: opacity .3s, transform .5s var(--ease-out); }
.cg-launch__close { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0; transform: rotate(-60deg) scale(.6); transition: opacity .3s, transform .5s var(--ease-out); }
.cg-launch.is-open .lotus { opacity: 0; transform: scale(.6); }
.cg-launch.is-open .cg-launch__close { opacity: 1; transform: none; }
.cg-launch__label { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); padding: .4rem .75rem; border-radius: 8px; background: var(--forest-900); color: #fff; font: 600 .78rem/1.2 var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4); }
.cg-launch:hover .cg-launch__label, .cg-launch:focus-visible .cg-launch__label { opacity: 1; transform: translate(0, -50%); }
.cg-launch.is-open .cg-launch__label { display: none; }
.no-js .cg-launch, .no-js .cg-panel { display: none; }

/* ---------- Panel ---------- */
.cg-panel { position: fixed; z-index: 97; right: 20px; bottom: 152px; width: 360px; max-width: calc(100vw - 32px); height: min(600px, calc(100vh - 176px)); min-height: 320px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius, 22px); background: rgba(255, 254, 252, .88); border: 1px solid var(--glass-border, rgba(255, 255, 255, .7)); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 34px 70px -28px rgba(22, 48, 42, .45), 0 0 0 1px rgba(35, 72, 61, .06); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); font-family: var(--font-sans); color: var(--ink, #222924); transform-origin: 100% 100%; }
.cg-panel[hidden] { display: none; }

.cg-head { display: flex; align-items: center; gap: .75rem; padding: .85rem .8rem .85rem 1rem; background: linear-gradient(135deg, var(--forest) 0%, var(--forest-900) 100%); color: var(--pearl); flex-shrink: 0; }
.cg-head__mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--pearl); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.cg-head__mark .lotus { width: 27px; color: var(--logo-magenta, #B0285F); }
.cg-head__text { min-width: 0; flex: 1; }
.cg-head__title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.28rem; line-height: 1.1; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pearl); }
.cg-head__sub { margin: .15rem 0 0; font-size: .74rem; letter-spacing: .02em; color: rgba(255, 254, 252, .72); }
.cg-head__close { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--pearl); cursor: pointer; transition: background-color .3s; }
.cg-head__close:hover { background: rgba(255, 255, 255, .2); }
.cg-head__close:focus-visible { outline: 2px solid var(--blush-300); outline-offset: 2px; }
.cg-head__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Message log */
.cg-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem .9rem .6rem; display: flex; flex-direction: column; gap: .6rem; background: linear-gradient(180deg, rgba(238, 243, 236, .55), rgba(248, 245, 239, .3)); scrollbar-width: thin; }
.cg-log:focus { outline: none; }
.cg-msg { display: flex; max-width: 100%; }
.cg-msg--me { justify-content: flex-end; }
.cg-bubble { max-width: 88%; padding: .7rem .85rem; border-radius: 16px; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.cg-msg--bot .cg-bubble { background: var(--pearl); border: 1px solid rgba(35, 72, 61, .08); border-bottom-left-radius: 6px; box-shadow: 0 8px 20px -16px rgba(22, 48, 42, .4); }
.cg-msg--me .cg-bubble { background: var(--forest); color: var(--pearl); border-bottom-right-radius: 6px; }
.cg-bubble p { margin: 0; }
.cg-bubble p + p, .cg-bubble ul + p, .cg-bubble dl + p { margin-top: .5rem; }
.cg-bubble .cg-q { font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: var(--forest); margin-bottom: .35rem; }
.cg-bubble .cg-h { margin-top: .55rem; font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sage-500, #6E9580); }
.cg-bubble ul { margin: .35rem 0 0; padding: 0 0 0 1.05rem; }
.cg-bubble li { margin: .15rem 0; }
.cg-bubble li::marker { color: var(--rose, #B5707C); }
.cg-note { font-size: .8rem; color: var(--muted, #6B736D); }
.cg-hours { margin: .45rem 0 0; display: grid; gap: .2rem; }
.cg-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px dashed rgba(35, 72, 61, .12); }
.cg-hours dt { font-weight: 700; color: var(--forest); }
.cg-hours dd { margin: 0; white-space: nowrap; }
.cg-today { font-weight: 600; color: var(--rose-deep, #94505D); }

/* Answer actions */
.cg-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.cg-act { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(35, 72, 61, .22); background: var(--pearl); color: var(--forest); font-size: .78rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; }
.cg-act:hover { background: var(--forest); border-color: var(--forest); color: var(--pearl); }
.cg-act:focus-visible { outline: 2px solid var(--logo-magenta, #B0285F); outline-offset: 2px; }
.cg-act--book { background: var(--forest); color: var(--pearl); border-color: var(--forest); }
.cg-act--book:hover { background: var(--forest-900); }
.cg-act--wa { background: #25D366; border-color: #25D366; color: #fff; }
.cg-act--wa:hover { background: #1DA851; border-color: #1DA851; color: #fff; }
.cg-act--wa svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* Typing indicator */
.cg-typing .cg-bubble { display: inline-flex; gap: 4px; padding: .8rem .9rem; }
.cg-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-500, #6E9580); animation: cgDot 1.1s var(--ease-out) infinite; }
.cg-typing span:nth-child(2) { animation-delay: .15s; }
.cg-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cgDot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

/* Quick replies */
.cg-chips { display: flex; gap: .4rem; padding: .55rem .9rem .15rem; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cg-chips::-webkit-scrollbar { display: none; }
.cg-chip { flex-shrink: 0; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgba(176, 40, 95, .22); background: var(--blush-50, #FAF0EE); color: var(--forest-900); font: 600 .78rem/1.2 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .25s, border-color .25s, color .25s; }
.cg-chip:hover { background: var(--blush-100, #F1E4DF); border-color: rgba(176, 40, 95, .4); }
.cg-chip:focus-visible { outline: 2px solid var(--logo-magenta, #B0285F); outline-offset: 2px; }

/* Input */
.cg-form { display: flex; gap: .5rem; align-items: center; padding: .55rem .9rem .35rem; flex-shrink: 0; }
.cg-input { flex: 1; min-width: 0; height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(35, 72, 61, .18); background: #fff; color: var(--ink, #222924); font: 500 16px/1 var(--font-sans); transition: border-color .25s, box-shadow .25s; }
.cg-input::placeholder { color: var(--muted, #6B736D); }
.cg-input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(35, 72, 61, .12); }
.cg-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--pearl); cursor: pointer; transition: background-color .25s, transform .4s var(--ease-out); }
.cg-send:hover { background: var(--forest-900); transform: translateX(2px); }
.cg-send:focus-visible { outline: 2px solid var(--logo-magenta, #B0285F); outline-offset: 2px; }
.cg-send svg { width: 19px; height: 19px; fill: currentColor; }
.cg-foot { margin: 0; padding: .2rem 1rem .75rem; font-size: .7rem; line-height: 1.4; color: var(--muted, #6B736D); text-align: center; flex-shrink: 0; }
.cg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Mobile: round 48px launcher above WhatsApp; panel as a bottom sheet above the tab bar ---------- */
@media (max-width: 900px) {
  .cg-launch { width: 48px; height: 48px; right: 14px; bottom: calc(var(--tabbar-h, 68px) + 80px + env(safe-area-inset-bottom)); }
  .cg-launch .lotus { width: 28px; }
  .cg-launch__label { display: none; }
  .install:not([hidden]) ~ .cg-launch { display: none; }
  .cg-panel { left: 10px; right: 10px; width: auto; max-width: none; bottom: calc(var(--tabbar-h, 68px) + 20px + env(safe-area-inset-bottom)); height: auto; max-height: calc(100vh - var(--tabbar-h, 68px) - 110px); max-height: calc(100dvh - var(--tabbar-h, 68px) - 110px); min-height: 0; border-radius: 24px; transform-origin: 50% 100%; }
  .cg-log { min-height: 160px; }
  .cg-is-open .cg-launch, .cg-is-open .wa-float { opacity: 0; pointer-events: none; }
}
@media (max-width: 380px) {
  .cg-head { padding: .7rem .6rem .7rem .8rem; gap: .6rem; }
  .cg-head__title { font-size: 1.15rem; }
  .cg-bubble { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-launch, .cg-launch .lotus, .cg-launch__close, .cg-launch__label, .cg-send { transition: none; }
  .cg-launch.is-in:hover, .cg-send:hover { transform: none; }
  .cg-typing span { animation: none; opacity: .7; }
}
@media print { .cg-launch, .cg-panel { display: none !important; } }

/* ---------- Layering: the concierge sits above the header and tab bar ---------- */
.cg-launch { z-index: 251; }
.cg-panel { z-index: 250; }

/* ---------- Guided hand-off ---------- */
.cg-act--team { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem .55rem .7rem; border-radius: 999px; border: 1px solid rgba(35,72,61,.18); background: linear-gradient(135deg, var(--sage-50, #EEF3EC), #fff); color: var(--forest-900, #16302A); font: 600 .84rem/1.2 var(--font-sans); cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s; }
.cg-act--team svg { width: 18px; height: 18px; fill: var(--forest, #23483D); }
.cg-act--team:hover { transform: translateY(-2px); border-color: var(--forest, #23483D); box-shadow: 0 10px 22px -14px rgba(22,48,42,.5); }

.cg-summary { margin: .5rem 0 .7rem; padding: .7rem .85rem; border-radius: 14px; background: var(--sage-50, #EEF3EC); border: 1px solid rgba(35,72,61,.1); display: grid; gap: .35rem; }
.cg-summary__row { display: grid; grid-template-columns: 96px 1fr; gap: .5rem; font-size: .84rem; line-height: 1.35; }
.cg-summary__row span { color: var(--muted, #6B736D); }
.cg-summary__row strong { color: var(--forest-900, #16302A); font-weight: 600; word-break: break-word; }

/* Send button — in the concierge's own aesthetic (forest glass + lotus-pink accent), not a generic green pill */
.cg-wasend { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .9rem .65rem .65rem; border-radius: 18px; text-decoration: none; color: var(--pearl, #FFFEFC);
  background: linear-gradient(135deg, var(--forest, #23483D), var(--forest-900, #16302A)); box-shadow: 0 16px 30px -16px rgba(22,48,42,.7), 0 0 0 1px rgba(255,255,255,.08) inset; position: relative; overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .4s; }
.cg-wasend::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); transform: translateX(-100%); animation: cgShine 3.2s 1s var(--ease-out) infinite; }
@keyframes cgShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cg-wasend:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 36px -16px rgba(22,48,42,.8); }
.cg-wasend__icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(232,165,180,.55); }
.cg-wasend__icon svg { width: 21px; height: 21px; fill: #E8A5B4; }
.cg-wasend__text { display: grid; line-height: 1.2; }
.cg-wasend__text strong { font: 600 .95rem/1.2 var(--font-sans); }
.cg-wasend__text small { font-size: .74rem; opacity: .72; margin-top: .15rem; }
.cg-link-btn { margin-top: .4rem; padding: 0; border: 0; background: none; font: 600 .8rem var(--font-sans); color: var(--forest, #23483D); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cg-chip--ghost { background: transparent !important; border-style: dashed !important; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .cg-wasend::after { animation: none; } }

/* ---------- The concierge is now the single floating contact button (WhatsApp lives inside it) ---------- */
.cg-launch { bottom: 22px; right: 22px; width: 58px; height: 58px; }
.cg-panel { bottom: 94px; height: min(620px, calc(100vh - 118px)); }
@media (max-width: 900px) {
  .cg-launch { right: 14px; bottom: calc(var(--tabbar-h, 68px) + 22px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .cg-panel { bottom: calc(var(--tabbar-h, 68px) + 84px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--tabbar-h, 68px) - 170px); }
}

/* Launcher: chat-bubble icon with typing dots + soft water-ripple rings */
.cg-launch { overflow: visible; }
.cg-launch__chat { width: 30px; height: 30px; position: relative; z-index: 1; transition: opacity .3s, transform .5s var(--ease-out); }
.cg-launch__bubble { fill: #fff; }
.cg-launch__dot { fill: var(--forest, #23483D); animation: cg-typing 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cg-launch__dot:nth-of-type(2) { animation-delay: .18s; }
.cg-launch__dot:nth-of-type(3) { animation-delay: .36s; }
@keyframes cg-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-2.2px); opacity: 1; } }
.cg-launch.is-open .cg-launch__chat { opacity: 0; transform: scale(.6); }
.cg-launch__ripple { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cg-launch__ripple i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--forest, #23483D); background: rgba(35, 72, 61, .12); opacity: 0; animation: cg-ripple 3.6s cubic-bezier(.2, .6, .35, 1) infinite; }
.cg-launch__ripple i:nth-child(2) { animation-delay: 1.2s; }
.cg-launch__ripple i:nth-child(3) { animation-delay: 2.4s; }
@keyframes cg-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; border-width: .5px; } }
.cg-launch.is-open .cg-launch__ripple, .cg-launch:hover .cg-launch__ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cg-launch__dot, .cg-launch__ripple i { animation: none; }
  .cg-launch__ripple { display: none; }
}
.cg-launch__ripple i { border: 2px solid rgba(181, 112, 124, .85); background: radial-gradient(circle, rgba(255, 255, 255, 0) 55%, rgba(181, 112, 124, .22)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
@keyframes cg-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }