/* MiniCAD Chat Widget — front-end visitor UI (Chatway-style) */
/* ── Design tokens ─────────────────────────────────────────────── */
.mc-chat-widget {
/* The site's palette tokens (MC Settings › Appearance, #1408); pages
outside the MiniCAD templates get them with this stylesheet. */
--mc-ink: var(--mc-deep); /* Deep Dianne — header, darkest text */
--mc-ink-2: var(--mc-dark); /* Blue Dianne — headings */
--mc-brand: var(--mc-keppel); /* Keppel — primary brand */
--mc-brand-dark: var(--mc-calypso); /* Calypso — hover */
--mc-brand-soft: var(--mc-fountain); /* Fountain Blue — input borders */
--mc-body: var(--mc-gray); /* Neutral Gray — body text */
--mc-field: var(--mc-tint); /* Spray Tint — message-area bg */
--mc-surface: #ffffff; /* White — cards/composer */
--mc-radius: 16px;
position: fixed; z-index: 999999; bottom: 24px; right: 24px;
font-family: inherit; line-height: normal;
/* Overrides the script's inline hidden, set until this async file applies (#935). */
visibility: visible !important;
}
/* ── Contained reset: stop Astra leaking in, without an !important war ── */
.mc-chat-widget, .mc-chat-widget * { box-sizing: border-box; }
.mc-chat-widget button,
.mc-chat-widget input,
.mc-chat-widget textarea,
.mc-chat-widget a {
box-sizing: border-box;
font-family: inherit;
margin: 0;
}
/* text-transform and letter-spacing undo Astra's global button capitals and
2px spacing, so chat buttons keep their text as written (#770). */
.mc-chat-widget button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-transform: none; letter-spacing: normal; }
.mc-chat-widget a { text-decoration: none; }
/* ── Launcher bubble ─────────────────────────────────────────── */
.mc-chat-bubble-btn {
position: relative;
width: 62px;
height: 62px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(47, 131, 136, .45);
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
transition: transform .18s ease, background .18s ease;
}
/* Resting fill — scoped to beat the `.mc-chat-widget button { background:none }`
reset above; without this the circle only appeared on hover. */
.mc-chat-widget .mc-chat-bubble-btn { background: var(--mc-brand); color: #fff; }
.mc-chat-bubble-btn:hover { transform: scale(1.06); }
.mc-chat-widget .mc-chat-bubble-btn:hover {
background: var(--mc-brand-dark);
}
/* Keyboard focus (BUG-085): a dark ring over a white halo stays >= 3:1 on
both dark and light pages; Astra's button:focus reset removed any ring. */
.mc-chat-widget .mc-chat-bubble-btn:focus-visible {
outline: 2px solid var(--mc-dark);
outline-offset: 3px;
box-shadow: 0 0 0 5px var(--mc-white, #ffffff), 0 6px 20px rgba(47, 131, 136, .45);
}
.mc-chat-launcher-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.mc-chat-launcher-chevron { width: 34px; height: 34px; align-items: center; justify-content: center; font-size: 24px; }
.mc-chat-bubble-btn.mc-chat-attract { animation: mc-chat-wiggle 1.6s ease; }
.mc-chat-bubble-btn.mc-chat-attract::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(47,131,136,.6); animation: mc-chat-ring 1.6s ease-out; }
@keyframes mc-chat-wiggle {
0%, 60%, 100% { transform: rotate(0deg) scale(1); }
10% { transform: rotate(-12deg) scale(1.08); }
20% { transform: rotate(10deg) scale(1.08); }
30% { transform: rotate(-8deg) scale(1.05); }
40% { transform: rotate(6deg) scale(1.05); }
50% { transform: rotate(-3deg) scale(1.02); }
}
@keyframes mc-chat-ring {
0% { box-shadow: 0 0 0 0 rgba(47,131,136,.55); }
100% { box-shadow: 0 0 0 24px rgba(47,131,136,0); }
}
/* ── Greeting popup ──────────────────────────────────────────── */
.mc-chat-greeting { position: fixed; bottom: 100px; right: 24px; max-width: 320px; background: #fff; border-radius: 18px 18px 4px 18px; box-shadow: 0 12px 32px rgba(var(--mc-deep-rgb),.22); padding: 16px 36px 16px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; animation: mc-chat-greeting-in .3s cubic-bezier(.2,.8,.2,1); }
.mc-chat-greeting:hover { box-shadow: 0 14px 38px rgba(var(--mc-deep-rgb),.28); }
.mc-chat-greeting-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mc-chat-greeting-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--mc-brand); color: #fff; font-size: 20px; }
.mc-chat-greeting-body { min-width: 0; }
.mc-chat-greeting-name { font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 3px; }
.mc-chat-greeting-text { font-size: 15px; font-weight: 600; color: var(--mc-deep); line-height: 1.4; }
.mc-chat-greeting-close { position: absolute; top: 8px; right: 10px; border: none; background: none; font-size: 17px; line-height: 1; color: #64748b; cursor: pointer; padding: 0; }
.mc-chat-greeting-close:hover { color: #333; }
@keyframes mc-chat-greeting-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ── Panel ───────────────────────────────────────────────────── */
.mc-chat-panel { position: fixed; bottom: 100px; right: 24px; width: 400px; max-width: calc(100vw - 32px); height: 640px; max-height: calc(100vh - 130px); background: #fff; border-radius: 22px; box-shadow: 0 16px 48px rgba(var(--mc-deep-rgb),.28); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: mc-chat-panel-in .22s ease; }
.mc-chat-panel.mc-chat-open { display: flex; }
.mc-chat-panel.mc-chat-expanded {
width: 850px;
height: calc(100vh - 115px);
max-height: 900px;
}
@keyframes mc-chat-panel-in { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* While the panel is open the launcher shows a chevron and closes the chat;
phones hide the whole launcher instead (see the 480 px block). Only the
chevron moves (#822, owner, 8 Oct): on open the chat icon is swapped for the
chevron at once and the chevron turns from down to up; on close it turns
back to down, then the chat icon shows again. The chat icon never turns or
fades, and the circle, badge, hover scale and attract wiggle are untouched.
The swap uses visibility, delayed on close until the turn ends. The
chevron's hidden attribute only matters to a stale cache without this file. */
.mc-chat-widget .mc-chat-launcher-chevron {
position: absolute;
top: 50%;
left: 50%;
margin: -17px 0 0 -17px;
display: flex;
visibility: hidden;
transform: rotate(0deg);
transition: transform .28s ease-out, visibility 0s linear .28s;
}
.mc-chat-widget .mc-chat-launcher-chevron ~ .mc-chat-launcher-icon { transition: visibility 0s linear .28s; }
.mc-chat-widget .mc-chat-panel.mc-chat-open ~ .mc-chat-bubble-btn .mc-chat-launcher-chevron {
visibility: visible;
transform: rotate(180deg);
transition: transform .28s ease-out, visibility 0s;
}
.mc-chat-widget .mc-chat-panel.mc-chat-open ~ .mc-chat-bubble-btn .mc-chat-launcher-chevron ~ .mc-chat-launcher-icon { visibility: hidden; transition: none; }
@media (prefers-reduced-motion: reduce) {
.mc-chat-widget .mc-chat-launcher-chevron,
.mc-chat-widget .mc-chat-panel.mc-chat-open ~ .mc-chat-bubble-btn .mc-chat-launcher-chevron,
.mc-chat-widget .mc-chat-launcher-chevron ~ .mc-chat-launcher-icon { transition: none; }
}
/* Header — compact: avatar beside title/subtitle, the buttons on the right. */
.mc-chat-header {
background: var(--mc-ink);
color: #fff;
padding: 8px 14px 14px;
display: inline-flex;
}
.mc-chat-header-bar {
display: flex;
flex: auto;
align-items: center;
justify-content: flex-end;
gap: 2px;
height: 26px;
}
.mc-chat-widget .mc-chat-expand-btn, .mc-chat-widget .mc-chat-close-btn, .mc-chat-widget .mc-chat-transcript-btn, .mc-chat-widget .mc-chat-back-btn {
color: rgba(255,255,255,.8); padding: 4px 6px; line-height: 1; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
}
/* Back sits first in the button group, beside the others (#821). */
.mc-chat-widget .mc-chat-back-btn { font-size: 18px; }
.mc-chat-widget .mc-chat-back-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.mc-chat-expand-btn, .mc-chat-transcript-btn { font-size: 15px; }
.mc-chat-close-btn { font-size: 20px; }
/* One icon per direction; the panel class picks which one shows. */
.mc-chat-expand-btn .mc-chat-shrink-ic,
.mc-chat-panel.mc-chat-expanded .mc-chat-expand-btn .mc-chat-expand-ic { display: none; }
.mc-chat-panel.mc-chat-expanded .mc-chat-expand-btn .mc-chat-shrink-ic { display: inline; }
.mc-chat-widget .mc-chat-expand-btn:hover, .mc-chat-widget .mc-chat-close-btn:hover, .mc-chat-widget .mc-chat-transcript-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.mc-chat-header-main { display: flex; align-items: center; gap: 12px; }
.mc-chat-header-avatar-wrap { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.mc-chat-header-avatar { width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.mc-chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-chat-online-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid var(--mc-ink); z-index: 1; }
.mc-chat-online-dot.mc-chat-dot-off { background: #94a3b8; }
.mc-chat-online-dot.mc-chat-dot-recent { background: #f59e0b; }
.mc-chat-header-text { min-width: 0; }
.mc-chat-header-title { margin: 0; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.25; }
.mc-chat-header-sub { margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); }
.mc-chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: var(--mc-field); position: relative; }
/* ── Opening greeting bubble ─────────────────────────────────── */
.mc-chat-opening { align-items: flex-start; }
.mc-chat-op-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-right: 8px; }
.mc-chat-op-avatar-ph { background: #cbd5e1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
/* ── Details form card ───────────────────────────────────────── */
.mc-chat-form-card { background: var(--mc-surface); border: 1px solid rgba(var(--mc-spray-rgb),.5); border-radius: var(--mc-radius); padding: 18px; margin: 4px 0; box-shadow: 0 4px 16px rgba(var(--mc-deep-rgb),.06); }
.mc-chat-card-agent { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(var(--mc-spray-rgb),.4); }
.mc-chat-card-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
.mc-chat-card-avatar-ph { display: flex; align-items: center; justify-content: center; background: var(--mc-brand); color: #fff; font-size: 22px; }
.mc-chat-card-greeting { font-size: 15px; font-weight: 700; color: var(--mc-ink-2); line-height: 1.35; }
.mc-chat-form-intro { font-size: 13.5px; color: #475569; margin: 0 0 8px; line-height: 1.5; }
.mc-chat-form label { display: block; font-size: 13px; margin: 12px 0 5px; color: var(--mc-ink-2); font-weight: 600; }
.mc-chat-form input, .mc-chat-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--mc-brand-soft); border-radius: 10px; font-size: 14px; background: #fff; color: var(--mc-ink); resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; }
.mc-chat-form input:focus, .mc-chat-form textarea:focus { outline: none; border-color: var(--mc-brand); box-shadow: 0 0 0 3px rgba(var(--mc-spray-rgb),.5); }
.mc-chat-form input.mc-chat-input-invalid { border-color: #d63638; }
.mc-chat-form > button { margin-top: 16px; width: 100%; padding: 12px; background: var(--mc-brand); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; transition: background .15s ease; }
.mc-chat-form > button:hover { background: var(--mc-brand-dark); }
.mc-chat-form > button:disabled { opacity: .6; cursor: default; }
/* Read-only identity rows shown on the back/welcome screen mid-conversation. */
.mc-chat-ro-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--mc-field); border-radius: 10px; margin-bottom: 8px; font-size: 14px; color: var(--mc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chat-ro-ic { opacity: .7; flex-shrink: 0; }
.mc-chat-field-error { color: #d63638; font-size: 12px; margin-top: 4px; min-height: 15px; line-height: 1.25; }
/* ── Other-channel quick actions (under the form) ────────────── */
.mc-chat-channels { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--mc-spray-rgb),.4); }
.mc-chat-channels-label { font-size: 12px; color: var(--mc-body); text-align: center; margin-bottom: 8px; }
.mc-chat-channels-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mc-chat-widget .mc-chat-channel { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--mc-ink-2); background: var(--mc-field); border: 1px solid rgba(var(--mc-spray-rgb),.6); border-radius: 20px; padding: 7px 13px; }
.mc-chat-widget .mc-chat-channel:hover { background: #e4f6f5; }
/* ── Client info card (name / email / phone + edit) ───────────── */
.mc-chat-idcard { background: var(--mc-surface); border: 1px solid rgba(var(--mc-spray-rgb),.6); border-radius: 12px; padding: 10px 12px; margin: 2px 0 14px; box-shadow: 0 1px 3px rgba(var(--mc-deep-rgb),.05); }
.mc-chat-idcard-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-brand); margin-bottom: 6px; }
.mc-chat-idcard-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mc-ink-2); padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chat-idcard-ic { flex-shrink: 0; opacity: .7; font-size: 13px; }
.mc-chat-widget .mc-chat-confirm-edit { color: var(--mc-brand); font-size: 14px; flex-shrink: 0; }
.mc-chat-widget .mc-chat-confirm-edit:hover { color: var(--mc-brand-dark); }
/* ── Edit-details overlay ────────────────────────────────────── */
.mc-chat-overlay { position: absolute; inset: 0; background: rgba(var(--mc-deep-rgb),.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; animation: mc-chat-greeting-in .2s ease; }
.mc-chat-overlay-card { background: #fff; border-radius: 14px; padding: 20px; width: 100%; max-width: 300px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.mc-chat-overlay-card h4 { margin: 0 0 10px; font-size: 15px; color: var(--mc-deep); }
.mc-chat-overlay-card input { width: 100%; padding: 9px 11px; border: 1px solid #d8dce1; border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.mc-chat-overlay-card input:focus { outline: none; border-color: var(--mc-brand); }
.mc-chat-overlay-card input.mc-chat-input-invalid { border-color: #d63638; }
.mc-chat-overlay-card label { display: block; font-size: 12px; margin: 10px 0 4px; color: #475569; font-weight: 600; }
/* Supporting line under a modal heading — the question the buttons answer. */
.mc-chat-modal-text { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: #475569; }
.mc-chat-overlay-actions { display: flex; gap: 8px; margin-top: 16px; }
.mc-chat-overlay-actions button { flex: 1; padding: 9px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.mc-chat-widget .mc-chat-overlay-cancel { background: #fff; color: #475569; border: 1px solid #d8dce1; }
.mc-chat-widget .mc-chat-overlay-cancel:hover { background: #f2f5f8; }
.mc-chat-widget .mc-chat-overlay-save { background: var(--mc-brand); color: #fff; border: 1px solid var(--mc-brand); }
.mc-chat-widget .mc-chat-overlay-save:hover { background: var(--mc-brand-dark); }
/* ── Messages ────────────────────────────────────────────────── */
.mc-chat-messages { display: flex; flex-direction: column; }
.mc-chat-msg { margin-bottom: 12px; display: flex; align-items: flex-end; gap: 8px; }
.mc-chat-msg-staff { justify-content: flex-start; }
.mc-chat-msg-visitor { justify-content: flex-end; }
.mc-chat-msg-pending { opacity: .55; }
.mc-chat-msg-failed .mc-chat-bubble-text { border: 1px solid #d63638 !important; }
.mc-chat-msg-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mc-chat-msg-avatar-ph { background: #cbd5e1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.mc-chat-bubble-text { max-width: 76%; min-width: 50%; padding: 10px 14px; border-radius: var(--mc-radius); font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.mc-chat-msg-visitor .mc-chat-bubble-text { background: var(--mc-brand); color: #fff; border-bottom-right-radius: 4px; }
.mc-chat-msg-staff .mc-chat-bubble-text { background: var(--mc-surface); color: var(--mc-ink-2); border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(var(--mc-deep-rgb),.08); }
.mc-chat-sender-name { font-size: 11px; color: var(--mc-brand); margin-bottom: 3px; font-weight: 700; }
.mc-chat-msg-body { white-space: pre-wrap; }
.mc-chat-meta { font-size: 10.5px; opacity: .7; margin-top: 5px; text-align: right; }
.mc-chat-msg-visitor .mc-chat-meta { color: #eafcfb; }
.mc-chat-msg-staff .mc-chat-meta { color: var(--mc-body); }
.mc-chat-check { opacity: .95; }
/* Visually hidden, still read by screen readers (the sent tick's "Sent"). */
.mc-chat-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mc-chat-seen { font-weight: 600; }
.mc-chat-widget .mc-chat-load-earlier { display: block; margin: 0 auto 12px; background: var(--mc-surface); border: 1px solid rgba(var(--mc-spray-rgb),.6); color: var(--mc-brand); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 16px; }
.mc-chat-widget .mc-chat-load-earlier:hover { background: #e4f6f5; }
.mc-chat-att-thumb { max-width: 190px; max-height: 150px; border-radius: 12px; display: block; margin-top: 8px; cursor: zoom-in; }
.mc-chat-lightbox { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.8); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.mc-chat-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.mc-chat-lightbox-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.mc-chat-att-link { display: inline-block; font-size: 12.5px; margin-top: 8px; text-decoration: underline; }
.mc-chat-msg-visitor .mc-chat-att-link { color: #eafcfb; }
.mc-chat-msg-staff .mc-chat-att-link { color: var(--mc-brand); }
/* Order card (rich order/invoice message) */
.mc-chat-order-card { display: flex; flex-direction: column; gap: 6px; }
.mc-chat-oc-head { font-weight: 700; color: var(--mc-ink-2); font-size: 14px; }
.mc-chat-oc-amount { font-size: 16px; font-weight: 800; color: var(--mc-ink); display: flex; align-items: center; gap: 8px; }
.mc-chat-oc-status { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 8px; border-radius: 10px; background: #fde8c8; color: #8a5a00; }
.mc-chat-oc-status-paid { background: #d6f5df; color: #1a7f45; }
.mc-chat-oc-summary { font-size: 13px; color: var(--mc-body); }
.mc-chat-oc-ref { font-size: 12px; color: var(--mc-body); opacity: .8; }
.mc-chat-edited { margin-left: 6px; font-size: 11px; opacity: .6; font-style: italic; }
/* Video: YouTube/Vimeo embeds and inline players for uploaded clips. */
.mc-chat-video { margin-top: 6px; width: 100%; }
.mc-chat-video iframe,
.mc-chat-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; }
.mc-chat-video-file video { aspect-ratio: auto; max-height: 260px; }
/* A preferred width rather than a min-width: the bubble is capped at 76% of a
panel that is itself `overflow: hidden`, which on a 320px phone leaves only
about 190px of content box — a floor wider than that would not widen the
bubble, it would just get clipped. max-width keeps the player inside it. */
.mc-chat-audio { margin-top: 6px; width: 240px; max-width: 100%; }
.mc-chat-audio audio { width: 100%; display: block; }
/* Under an audio player this is a download link, not a caption, so it needs
the per-side colours the other attachment link has — left to inherit, a
browser's default link blue lands on the visitor bubble's brand fill. */
.mc-chat-att-name { display: block; margin-top: 3px; font-size: 11px; opacity: .7; }
a.mc-chat-att-name { text-decoration: underline; }
.mc-chat-msg-visitor a.mc-chat-att-name { color: #eafcfb; }
.mc-chat-msg-staff a.mc-chat-att-name { color: var(--mc-brand); }
/* Pricing cards — one plan or the full comparison, stacked so the card stays
narrow enough for the widget on a phone. */
.mc-chat-price-card { display: flex; flex-direction: column; gap: 8px; }
.mc-chat-pl-row { border: 1px solid rgba(var(--mc-spray-rgb),.6); border-radius: 10px; padding: 8px 10px; background: var(--mc-surface); }
.mc-chat-pl-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--mc-ink-2); font-size: 14px; }
.mc-chat-pl-price { font-weight: 800; color: var(--mc-ink); white-space: nowrap; }
.mc-chat-pl-desc { font-size: 13px; color: var(--mc-body); margin-top: 3px; }
/* The description is authored HTML. Browser defaults give a a full line of
margin and a
40px of padding, which is far too loose inside a card this
size, so the spacing is set here rather than inherited. */
.mc-chat-pl-desc > :first-child { margin-top: 0; }
.mc-chat-pl-desc > :last-child { margin-bottom: 0; }
.mc-chat-pl-desc p { margin: 0 0 6px; line-height: 1.45; }
.mc-chat-pl-desc ul,
.mc-chat-pl-desc ol { margin: 0 0 6px; padding-left: 18px; }
.mc-chat-pl-desc li { margin: 0 0 2px; line-height: 1.4; }
.mc-chat-pl-desc strong, .mc-chat-pl-desc b { font-weight: 700; }
.mc-chat-pl-tl { font-size: 12px; color: var(--mc-body); opacity: .8; margin-top: 3px; }
/* Meeting cards (consultation request/scheduled/completed/declined/cancelled) */
.mc-chat-meetings-wrap { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.mc-chat-meeting-card { border: 1px solid rgba(var(--mc-spray-rgb),.6); border-radius: 12px; padding: 12px 14px; background: var(--mc-surface); }
.mc-chat-mc-head { font-weight: 700; color: var(--mc-ink-2); }
.mc-chat-mc-muted { color: #94a3b8; }
.mc-chat-mc-sub, .mc-chat-mc-when { font-size: 13px; color: var(--mc-body); margin-top: 4px; }
.mc-chat-mc-join { display: inline-block; margin-top: 8px; background: var(--mc-brand); color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-weight: 700; }
/* Scoped under .mc-chat-widget so it outranks the contained reset
(.mc-chat-widget a { all: revert }), which would otherwise strip the
button back to a plain underlined link with invisible white text. */
.mc-chat-widget .mc-chat-oc-pay { display: inline-block; margin-top: 4px; text-align: center; background: var(--mc-brand); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 10px; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(47,131,136,.35); }
.mc-chat-widget .mc-chat-oc-pay:hover { background: var(--mc-brand-dark); }
/* ── File chips ──────────────────────────────────────────────── */
.mc-chat-file-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-chat-composer-area .mc-chat-file-chips:not(:empty) { padding: 8px 12px 0; }
.mc-chat-file-chip { display: inline-flex; align-items: center; gap: 5px; background: #eef3f5; border-radius: 14px; padding: 5px 9px; font-size: 11.5px; color: #334155; }
/* Why a picked file was not attached. pre-line so several rejects stack. */
.mc-chat-file-error { margin: 8px 12px 0; padding: 7px 10px; background: #fdf2f2; border: 1px solid #f5c9c9; border-radius: 8px; font-size: 11.5px; line-height: 1.45; color: #a33a3a; white-space: pre-line; }
.mc-chat-file-chip button { border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: #94a3b8; padding: 0; }
.mc-chat-file-chip button:hover { color: #d63638; }
/* ── Composer ────────────────────────────────────────────────── */
.mc-chat-composer-area { border-top: 1px solid rgba(var(--mc-spray-rgb),.4); background: var(--mc-surface); }
.mc-chat-composer-hint { padding: 8px 14px; font-size: 12.5px; color: var(--mc-body); background: var(--mc-field); border-top: 1px solid rgba(var(--mc-spray-rgb),.4); }
.mc-chat-composer { display: flex; gap: 6px; align-items: flex-end; padding: 10px 12px; }
.mc-chat-composer textarea { flex: 1 1 auto; width: 100%; resize: none; border: 1px solid var(--mc-brand-soft); border-radius: 20px; padding: 10px 14px; font-size: 13.5px; line-height: 1.4; min-height: 42px; max-height: 90px; background: #fff; color: var(--mc-ink); }
.mc-chat-composer textarea:focus { outline: none; border-color: var(--mc-brand); box-shadow: 0 0 0 3px rgba(var(--mc-spray-rgb),.5); }
/* Attach + emoji are always-visible icon buttons; all controls share a 42px
height so they align with the textarea's resting height. */
.mc-chat-widget .mc-chat-icon-btn { width: 40px; height: 42px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--mc-field); color: var(--mc-body); font-size: 18px; cursor: pointer; }
.mc-chat-widget .mc-chat-icon-btn:hover { background: #e4f6f5; }
.mc-chat-widget .mc-chat-icon-btn:focus-visible { outline: 2px solid var(--mc-brand); outline-offset: 2px; }
/* Emoji picker hidden for now (owner, 6 Oct): the composer row is narrow on
phones and the message box was cut off. The feature stays in the JS so it
can come back by removing this rule. */
.mc-chat-widget .mc-chat-emoji-btn { display: none; }
.mc-chat-widget .mc-chat-send-btn { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; background: var(--mc-brand); color: #fff; font-size: 16px; transition: background .15s ease; }
.mc-chat-widget .mc-chat-send-btn:hover { background: var(--mc-brand-dark); }
/* ── Voice note recorder ───────────────────────────────────────
The bar replaces the composer while the microphone is live, so a
half-written message cannot look editable mid-recording. The compound
selector is deliberate: `.mc-chat-composer` sets `display: flex` just
above, and a single-class rule would only win by being later in the file. */
.mc-chat-composer.mc-chat-composer-hidden { display: none; }
.mc-chat-recorder { display: none; align-items: center; gap: 10px; padding: 10px 12px; }
.mc-chat-recorder.mc-chat-rec-on { display: flex; }
.mc-chat-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d63638; flex: 0 0 10px; animation: mc-chat-rec-pulse 1.4s infinite ease-in-out; }
.mc-chat-rec-time { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--mc-ink); }
.mc-chat-rec-label { flex: 1 1 auto; font-size: 12.5px; color: var(--mc-body); }
.mc-chat-widget .mc-chat-rec-cancel,
.mc-chat-widget .mc-chat-rec-stop { border-radius: 16px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; border: none; }
.mc-chat-widget .mc-chat-rec-cancel { background: var(--mc-field); color: var(--mc-body); }
.mc-chat-widget .mc-chat-rec-cancel:hover { background: #e4f6f5; }
.mc-chat-widget .mc-chat-rec-stop { background: var(--mc-brand); color: #fff; }
.mc-chat-widget .mc-chat-rec-stop:hover { background: var(--mc-brand-dark); }
/* Disabled while the permission prompt is open: nothing is captured yet, so
there is nothing for Done to finish. Needs to look unavailable, not just act it. */
.mc-chat-widget .mc-chat-rec-stop:disabled,
.mc-chat-widget .mc-chat-rec-stop:disabled:hover { background: #b6c6c8; cursor: default; }
@keyframes mc-chat-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
.mc-chat-rec-dot { animation: none; }
}
.mc-chat-emoji-bar { flex-wrap: wrap; gap: 2px; padding: 8px 12px 0; }
.mc-chat-widget .mc-chat-emoji { font-size: 20px; padding: 3px; border-radius: 6px; line-height: 1; background: none; }
.mc-chat-widget .mc-chat-emoji:hover { background: var(--mc-field); }
/* ── Typing indicator (welcome simulation + real staff typing) ── */
.mc-chat-typing-row { align-items: flex-end; }
.mc-chat-typing-bubble { min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 13px 16px; }
.mc-chat-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: #9db4c0; animation: mc-chat-typing-blink 1.2s infinite ease-in-out; }
.mc-chat-typing-dot:nth-child(2) { animation-delay: .18s; }
.mc-chat-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes mc-chat-typing-blink {
0%, 60%, 100% { opacity: .35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ── Unread badge on the closed launcher ─────────────────────── */
.mc-chat-unread { position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 800; line-height: 21px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: mc-chat-greeting-in .25s ease; }
/* ── Details prompt card (quick-start visitors with no identity yet) ── */
.mc-chat-dp-text { font-size: 13px; color: var(--mc-body); line-height: 1.45; margin-bottom: 8px; }
.mc-chat-widget .mc-chat-dp-btn { display: block; width: 100%; padding: 9px 12px; background: var(--mc-brand); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; transition: background .15s ease; }
.mc-chat-widget .mc-chat-dp-btn:hover { background: var(--mc-brand-dark); }
/* ── "Fill in my details" button inside a details-request message ── */
.mc-chat-widget .mc-chat-drq-btn { display: block; width: 100%; margin-top: 10px; padding: 9px 12px; background: var(--mc-brand); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; transition: background .15s ease; }
.mc-chat-widget .mc-chat-drq-btn:hover { background: var(--mc-brand-dark); }
.mc-chat-widget .mc-chat-drq-btn:disabled { background: #e2e8f0; color: #64748b; cursor: default; }
/* ── CSAT rating card (shown when the conversation is closed) ── */
.mc-chat-rate-card { background: var(--mc-surface); border: 1px solid rgba(var(--mc-spray-rgb),.6); border-radius: var(--mc-radius); padding: 14px 16px; margin: 8px 0; text-align: center; box-shadow: 0 2px 8px rgba(var(--mc-deep-rgb),.06); animation: mc-chat-greeting-in .25s ease; }
.mc-chat-rate-prompt { font-size: 13.5px; font-weight: 700; color: var(--mc-ink-2); margin-bottom: 8px; }
.mc-chat-rate-stars { display: flex; justify-content: center; gap: 4px; }
.mc-chat-widget .mc-chat-rate-star { font-size: 26px; line-height: 1; color: #cbd5e1; padding: 2px 4px; transition: transform .12s ease, color .12s ease; }
.mc-chat-widget .mc-chat-rate-star:hover { transform: scale(1.15); }
.mc-chat-widget .mc-chat-rate-star.mc-chat-rate-on { color: #f0a500; }
/* Outline star until picked, then the filled one. */
.mc-chat-widget .mc-chat-rate-ic-on,
.mc-chat-widget .mc-chat-rate-on .mc-chat-rate-ic-off { display: none; }
.mc-chat-widget .mc-chat-rate-on .mc-chat-rate-ic-on { display: inline; }
.mc-chat-rate-more { margin-top: 10px; }
.mc-chat-rate-comment { width: 100%; border: 1px solid var(--mc-brand-soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; resize: vertical; background: #fff; color: var(--mc-ink); }
.mc-chat-rate-comment:focus { outline: none; border-color: var(--mc-brand); }
.mc-chat-widget .mc-chat-rate-send { margin-top: 8px; padding: 8px 18px; background: var(--mc-brand); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; }
.mc-chat-widget .mc-chat-rate-send:hover { background: var(--mc-brand-dark); }
.mc-chat-widget .mc-chat-rate-send:disabled { opacity: .6; cursor: default; }
/* ── Push opt-in card ─────────────────────────────────────────── */
.mc-chat-push-card { display: flex; align-items: center; gap: 10px; background: #fff8e8; border: 1px solid #f2dfae; border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 12.5px; color: #6b5417; animation: mc-chat-greeting-in .25s ease; }
.mc-chat-push-text { flex: 1; line-height: 1.4; }
.mc-chat-push-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mc-chat-widget .mc-chat-push-enable { background: var(--mc-brand); color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; }
.mc-chat-widget .mc-chat-push-enable:hover { background: var(--mc-brand-dark); }
.mc-chat-widget .mc-chat-push-enable:disabled { opacity: .6; cursor: default; }
.mc-chat-widget .mc-chat-push-later { color: #b0a173; font-size: 16px; line-height: 1; padding: 2px 4px; }
.mc-chat-widget .mc-chat-push-later:hover { color: #6b5417; }
/* ── Team avatar stack (2-3 agents in the header) ────────────── */
.mc-chat-header-avatar-wrap.mc-chat-team-wrap { width: auto; min-width: 46px; }
.mc-chat-team-stack { display: flex; align-items: center; height: 46px; }
.mc-chat-team-stack img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mc-ink); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mc-chat-team-stack img + img { margin-left: -14px; }
/* ── Portfolio project card ──────────────────────────────────── */
.mc-chat-pf-card { display: flex; flex-direction: column; gap: 4px; }
.mc-chat-pf-img { width: 100%; max-width: 240px; border-radius: 12px; display: block; margin-bottom: 4px; }
.mc-chat-pf-title { font-weight: 700; font-size: 14px; color: var(--mc-ink-2); }
.mc-chat-pf-excerpt { font-size: 12.5px; color: var(--mc-body); }
.mc-chat-widget .mc-chat-pf-link { display: inline-block; margin-top: 6px; text-align: center; background: var(--mc-brand); color: #fff; font-weight: 700; padding: 9px 14px; border-radius: 10px; font-size: 13px; }
.mc-chat-widget .mc-chat-pf-link:hover { background: var(--mc-brand-dark); }
/* ── Mobile: full-screen panel ───────────────────────────────── */
@media (max-width: 480px) {
.mc-chat-widget { bottom: 16px; right: 16px; }
.mc-chat-greeting { right: 12px; left: 12px; max-width: none; bottom: 92px; }
.mc-chat-panel, .mc-chat-panel.mc-chat-expanded { right: 0; left: 0; bottom: 0; top: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
/* Already full screen here, so there is nothing to expand. The widget
prefix is needed to beat the header button display rule. */
.mc-chat-widget .mc-chat-expand-btn { display: none; }
/* The full-screen panel takes over the launcher's corner, so the launcher
hides while it is open instead of floating on top of the header. */
.mc-chat-panel.mc-chat-open ~ .mc-chat-bubble-btn { display: none; }
.mc-chat-bubble-text { max-width: 86%; }
/* iOS Safari zooms into any focused field under 16 px (#560). */
.mc-chat-widget input,
.mc-chat-widget textarea,
.mc-chat-widget select { font-size: 16px; }
}
/* While a page CTA crosses the launcher's band, the greeting hides so it
never covers the button (BUG-017). The launcher itself never moves (#902). */
.mc-chat-widget--tucked .mc-chat-greeting { display: none; }
@media (prefers-reduced-motion: reduce) {
.mc-chat-widget .mc-chat-bubble-btn { transition: none; }
}
/* Launcher/greeting accessibility (BUG-051). */
.mc-chat-widget .mc-chat-greeting-open {
display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mc-chat-widget .mc-chat-greeting-open .mc-chat-greeting-name,
.mc-chat-widget .mc-chat-greeting-open .mc-chat-greeting-text { display: block; }
.mc-chat-widget .mc-chat-greeting-open:focus-visible { outline: 2px solid var(--mc-brand); outline-offset: 3px; }
.mc-chat-widget .mc-chat-greeting-close { min-width: 32px; min-height: 32px; padding: 6px; color: #64748b; }
/* Astra's button:hover/:focus fill would otherwise paint the close button. */
.mc-chat-widget .mc-chat-greeting-close:focus { background: none; color: #64748b; }
/* Visible keyboard focus, like the greeting's open button (#558). */
.mc-chat-widget .mc-chat-greeting-close:focus-visible { outline: 2px solid var(--mc-brand); outline-offset: 2px; }
.mc-chat-widget .mc-chat-greeting-close:hover { background: none; color: #333; }
@media (prefers-reduced-motion: reduce) {
.mc-chat-bubble-btn.mc-chat-attract,
.mc-chat-bubble-btn.mc-chat-attract::after { animation: none; }
}
/* Room under the footer for the launcher (62 px, 16-24 px from the bottom):
scrolled to the end, it covered the footer's WhatsApp icon (#934). The room
goes on the last footer row, on top of its 1em, so it keeps that row's dark
background; on #colophon it showed the footer's amber background. */
@media (max-width: 768px) {
#colophon .site-below-footer-wrap { padding-bottom: calc(1em + 86px); }
}