/* ============================================================
   "Talk to us" enquiry modal — header trigger + contact-specific content
   (WhatsApp/Call channels + divider). The modal SHELL (dialog, backdrop,
   panel, close, title, lede, thanks) and the quick form are shared with the
   RFP modal in app.css (.rfp-modal, .contact-modal / .contact-form), so the
   two enquiry surfaces are identical. Light, Bauhaus/Rams.
   ============================================================ */

/* ---------- Header trigger ---------- */
.site-contact-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    color: var(--ink);
    background: transparent;
    transition: background 140ms var(--ease), color 140ms var(--ease);
}
.site-contact-trigger:hover { background: var(--stone-100); color: var(--accent); }
.site-contact-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Channels (WhatsApp / Call) ---------- */
.contact-channels {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.contact-channel {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 14px 16px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.contact-channel:hover { border-color: var(--ink); background: var(--stone-100); }
.contact-channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-channel__icon { flex: 0 0 auto; display: inline-flex; }
.contact-channel--whatsapp .contact-channel__icon { color: #25D366; }
.contact-channel__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.contact-channel__label { font-weight: 600; font-size: 14px; }
.contact-channel__value { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* ---------- Rule between channels and the form ---------- */
.contact-modal__rule {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: var(--s-5) 0;
}

/* ============================================================
   "Chat with Lexi" — MAYA popover, chat only (no recommendations grid). We
   suppress MAYA's persistent floating chrome entirely: the whole popover wrapper
   is hidden by default, so neither the launcher bubble nor its proactive teaser
   ever float on the page. lexi-chat.js reveals it (html.lexi-chat-on) only while
   the chat is open — opened on demand from the contact-panel entry via MAYA's
   public openMayaPopoverChat() API — and drops the class again when the user
   closes the panel (MAYA would otherwise re-show its bubble). Validated full
   cycle against the live widget (bundle main.43711838.js). #maya-popover-wrapper
   is MAYA's stable id (never the hashed sc-* classes).
   ============================================================ */
#maya-popover-wrapper { display: none !important; }
html.lexi-chat-on #maya-popover-wrapper { display: block !important; }

/* Floating launcher (AI-chat icon), bottom-right. Hidden while the chat is open
   so only MAYA's panel shows. The "nach oben" button is bottom-left (app.css .to-top),
   so the two never collide on mobile. */
.lexi-bubble {
    position: fixed;
    right: var(--s-4);
    /* No env(safe-area-inset-bottom): iOS toggles it 0↔34px with the toolbar,
       which made the bubble jump up ~34px on scroll-down (see .to-top in app.css). */
    bottom: var(--s-4);
    z-index: 60;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink, #fff);
    box-shadow: var(--shadow-3);
    cursor: pointer;
    transition: transform 160ms var(--ease), background 160ms ease;
}
.lexi-bubble:hover { background: var(--accent-deep); transform: translateY(-1px); }
.lexi-bubble:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Hidden while the chat is open (only MAYA's panel shows) and while the first-visit
   consent banner covers the bottom of the screen. */
html.lexi-chat-on .lexi-bubble,
html.cc-banner-open .lexi-bubble { display: none; }