/* Website live chat (assets/js/chat.js, app/chat.php). Launcher, teaser and the chat panel; a full-screen sheet on phones. */
.cbc { --cbc-bg: #fff; --cbc-fg: #0d0d0f; --cbc-mut: #6c6c74; --cbc-line: #e8e6e1; --cbc-soft: #f4f2ee; --cbc-red: #f43b2f; --cbc-ink: #0d0d0f; --cbc-ai: #eef0f8; font-family: inherit; }
.cbc[hidden] { display: none !important; }
.cbc-fab { position: fixed; z-index: 70; inset-inline-end: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--cbc-ink); box-shadow: 0 16px 34px -12px rgba(13,13,15,.55), 0 0 0 3px #fff; transition: transform .3s cubic-bezier(.32,.72,0,1); }
.cbc-fab:hover { transform: translateY(-2px) scale(1.04); }
.cbc-fab:focus-visible, .cbc button:focus-visible, .cbc a:focus-visible, .cbc textarea:focus-visible { outline: 2px solid var(--cbc-red); outline-offset: 2px; }
.cbc-av { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; background: linear-gradient(135deg, hsl(var(--h, 8) 70% 58%), hsl(calc(var(--h, 8) + 40) 65% 38%)); }
.cbc-av img { width: 100%; height: 100%; object-fit: cover; }
.cbc-ai { position: absolute; inset-inline-start: -4px; bottom: -2px; padding: 2px 6px; border-radius: 999px; background: var(--cbc-red); color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; line-height: 1.3; box-shadow: 0 0 0 2px #fff; }
.cbc-on { position: absolute; inset-inline-end: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
.cbc-unread { position: absolute; inset-inline-end: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cbc-red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.cbc-tease { position: fixed; z-index: 70; inset-inline-end: max(92px, calc(env(safe-area-inset-right, 0px) + 92px)); bottom: max(26px, env(safe-area-inset-bottom, 0px)); max-width: min(290px, calc(100vw - 120px)); padding: 12px 34px 12px 14px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--cbc-fg); box-shadow: 0 18px 40px -16px rgba(13,13,15,.4); border: 1px solid var(--cbc-line); font-size: 14px; line-height: 1.4; cursor: pointer; animation: cbc-in .4s cubic-bezier(.32,.72,0,1) both; }
.cbc-tease small { display: block; font-size: 11.5px; color: var(--cbc-mut); font-weight: 700; margin-bottom: 2px; }
.cbc-tease__x { position: absolute; inset-inline-end: 6px; top: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--cbc-mut); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; }
.cbc-panel { position: fixed; z-index: 80; inset-inline-end: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: min(392px, calc(100vw - 36px)); height: min(640px, calc(100vh - 36px)); display: flex; flex-direction: column; background: var(--cbc-bg); color: var(--cbc-fg); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(13,13,15,.55), 0 0 0 1px rgba(13,13,15,.06); animation: cbc-up .4s cubic-bezier(.32,.72,0,1) both; }
.cbc-panel[hidden] { display: none; }
@keyframes cbc-up { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes cbc-in { from { opacity: 0; transform: translateY(8px); } }
.cbc-hd { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--cbc-ink); color: #fff; }
.cbc-hd .cbc-av { width: 44px; height: 44px; flex: none; font-size: 18px; overflow: visible; }
.cbc-hd .cbc-av > img, .cbc-hd .cbc-av > span:first-child { border-radius: 50%; overflow: hidden; }
.cbc-hd__t { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.cbc-hd__t b { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.cbc-hd__t b i { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; background: var(--cbc-red); }
.cbc-hd__t small { font-size: 12.5px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbc-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 20px; cursor: pointer; flex: none; }
.cbc-x:hover { background: rgba(255,255,255,.2); }
.cbc-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #faf9f6, #fff 120px); overscroll-behavior: contain; }
.cbc-m { max-width: 84%; padding: 10px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: cbc-in .3s ease both; }
.cbc-m a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cbc-m--ai, .cbc-m--agent { align-self: flex-start; background: var(--cbc-ai); border-end-start-radius: 6px; }
.cbc-m--agent { background: #fff; border: 1px solid var(--cbc-line); }
.cbc-m--visitor { align-self: flex-end; background: var(--cbc-ink); color: #fff; border-end-end-radius: 6px; }
.cbc-m--system { align-self: center; max-width: 92%; background: none; color: var(--cbc-mut); font-size: 12.5px; text-align: center; padding: 4px 8px; }
.cbc-who { align-self: flex-start; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--cbc-mut); margin-top: 6px; }
.cbc-who img, .cbc-who .cbc-av { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; object-fit: cover; }
.cbc-joined { align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--cbc-line); box-shadow: 0 10px 24px -16px rgba(13,13,15,.35); font-size: 13.5px; animation: cbc-in .4s ease both; }
.cbc-joined img, .cbc-joined .cbc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; font-size: 15px; }
.cbc-joined small { display: block; color: var(--cbc-mut); font-size: 12px; }
.cbc-conn { align-self: center; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #fff3f2; color: #a1170d; font-size: 13px; font-weight: 700; }
.cbc-dots { display: inline-flex; gap: 4px; }
.cbc-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: cbc-dot 1.2s infinite; }
.cbc-dots i:nth-child(2) { animation-delay: .15s; } .cbc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cbc-dot { 30% { opacity: 1; transform: translateY(-3px); } }
.cbc-typing { align-self: flex-start; padding: 12px 14px; border-radius: 18px; border-end-start-radius: 6px; background: var(--cbc-ai); color: var(--cbc-mut); }
.cbc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.cbc-chips[hidden] { display: none; }
.cbc-chip { border: 1px solid var(--cbc-line); background: #fff; color: var(--cbc-fg); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.cbc-chip:hover { border-color: var(--cbc-ink); }
.cbc-chip--agent { background: var(--cbc-ink); color: #fff; border-color: var(--cbc-ink); }
.cbc-ft { border-top: 1px solid var(--cbc-line); padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; }
.cbc-form { display: flex; gap: 8px; align-items: flex-end; }
.cbc-form textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--cbc-line); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.35; max-height: 120px; background: var(--cbc-soft); color: var(--cbc-fg); }
.cbc-form textarea:focus { outline: none; border-color: var(--cbc-ink); background: #fff; }
.cbc-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--cbc-red); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cbc-send:disabled { opacity: .45; cursor: default; }
.cbc-send svg { width: 18px; height: 18px; fill: currentColor; }
[dir="rtl"] .cbc-send svg { transform: scaleX(-1); }
.cbc-note { margin: 6px 6px 0; font-size: 11px; color: var(--cbc-mut); text-align: center; }
.cbc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cbc-err { align-self: center; color: #a1170d; font-size: 12.5px; }
/* Phones: a full-screen sheet; with the app tab bar the launcher lives in the bar instead */
@media (max-width: 600px) {
  .cbc-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  .cbc-hd { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  .cbc-tease { bottom: calc(max(26px, env(safe-area-inset-bottom, 0px)) + 4px); }
}
@media (max-width: 767.98px) { body.has-tabbar .cbc-fab, body.has-tabbar .cbc-tease { display: none; } }
@media (min-width: 768px) { body:has(.cbc-fab) .lx-dock { right: 98px; } }
body.cbc-lock { overflow: hidden; }
.tabbar .tabbar__chat { position: relative; border: 0; background: none; font: inherit; color: var(--cbc-red, #f43b2f); cursor: pointer; }
.tabbar .tabbar__chat i { position: absolute; top: 6px; inset-inline-end: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce) { .cbc-panel, .cbc-m, .cbc-tease, .cbc-joined, .cbc-dots i { animation: none !important; } .cbc-fab { transition: none; } }
@media print { .cbc { display: none !important; } }
.lx-dock__b--chat { background: #fff; color: #0d0d0f; }
.cbc-hd__t small:empty { display: none; }

/* ---- Cozy redesign: warm paper tones, grouped bubbles with avatar and time, soft light header ---- */
.cbc { --cbc-paper: #f7f2ea; --cbc-card: #fffdf9; --cbc-ai: #ffffff; --cbc-line: #ece4d8; --cbc-mut: #857d72; --cbc-warm: #c9a27a; }
.cbc-panel { background: var(--cbc-card); border-radius: 28px; box-shadow: 0 44px 100px -34px rgba(60,40,20,.5), 0 0 0 1px rgba(60,40,20,.07); }
.cbc-hd { background: linear-gradient(180deg, #fffdf9, #fbf6ef); color: var(--cbc-fg); padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--cbc-line); position: relative; }
.cbc-hd__av { position: relative; flex: none; }
.cbc-hd .cbc-av { width: 46px; height: 46px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(201,162,122,.55); }
.cbc-hd__av::after { content: ""; position: absolute; inset-inline-end: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px #fffdf9; }
.cbc-hd__t b { font-size: 16.5px; letter-spacing: -.01em; }
.cbc-hd__t small { color: var(--cbc-mut); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.cbc-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; flex: none; }
.cbc-x { background: rgba(60,40,20,.06); color: var(--cbc-fg); display: grid; place-items: center; }
.cbc-x:hover { background: rgba(60,40,20,.12); }
.cbc-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cbc-body { gap: 4px; padding: 14px 14px 10px; background-color: var(--cbc-paper);
  background-image: radial-gradient(rgba(140,110,70,.09) 1px, transparent 1.2px), linear-gradient(180deg, rgba(255,253,249,.9), rgba(255,253,249,0) 140px);
  background-size: 18px 18px, 100% 100%; scrollbar-width: thin; }
.cbc-day { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--cbc-mut); background: rgba(255,253,249,.85); border: 1px solid var(--cbc-line); padding: 3px 10px; border-radius: 999px; margin: 2px 0 8px; }
.cbc-grp { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; margin-top: 8px; animation: cbc-in .35s cubic-bezier(.32,.72,0,1) both; }
.cbc-grp--out { justify-content: flex-end; }
.cbc-gav { width: 30px; height: 30px; flex: none; margin-bottom: 20px; }
.cbc-gav .cbc-av { font-size: 13px; box-shadow: 0 0 0 2px #fff; }
.cbc-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 82%; }
.cbc-grp--in .cbc-stack { align-items: flex-start; }
.cbc-grp--out .cbc-stack { align-items: flex-end; }
.cbc-gname { font-size: 11.5px; font-weight: 700; color: var(--cbc-mut); padding-inline-start: 4px; }
.cbc-time { font-size: 10.5px; color: var(--cbc-mut); padding: 2px 6px 0; font-variant-numeric: tabular-nums; }
.cbc-time:empty { display: none; }
.cbc-stack .cbc-m { max-width: 100%; animation: cbc-pop .32s cubic-bezier(.32,.72,0,1) both; }
@keyframes cbc-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.cbc-m--ai, .cbc-m--agent { background: var(--cbc-ai); border: 1px solid #efe7db; box-shadow: 0 1px 1px rgba(60,40,20,.04), 0 6px 16px -12px rgba(60,40,20,.25); border-radius: 20px; }
.cbc-grp--in .cbc-m { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.cbc-grp--in .cbc-stack > .cbc-m:first-of-type, .cbc-grp--in .cbc-gname + .cbc-m { border-start-start-radius: 20px; }
.cbc-grp--in .cbc-stack > .cbc-m:last-of-type { border-end-start-radius: 6px; }
.cbc-m--visitor { background: linear-gradient(160deg, #26262b, #0d0d0f); border-radius: 20px; box-shadow: 0 8px 18px -12px rgba(13,13,15,.6); }
.cbc-grp--out .cbc-m { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.cbc-grp--out .cbc-stack > .cbc-m:first-of-type { border-start-end-radius: 20px; }
.cbc-grp--out .cbc-stack > .cbc-m:last-of-type { border-end-end-radius: 6px; }
.cbc-m { font-size: 14.5px; line-height: 1.5; padding: 9px 14px; }
.cbc-typing { background: var(--cbc-ai); border: 1px solid #efe7db; border-radius: 20px; border-end-start-radius: 6px; padding: 12px 15px; color: var(--cbc-warm); }
.cbc-chips { gap: 7px; padding: 6px 14px 12px; justify-content: flex-end; background: var(--cbc-paper); }
.cbc-chip { background: var(--cbc-card); border-color: #e3d8c8; color: #3a2f24; font-weight: 650; padding: 8px 14px; box-shadow: 0 4px 12px -10px rgba(60,40,20,.5); animation: cbc-pop .4s cubic-bezier(.32,.72,0,1) both; animation-delay: var(--d, 0ms); }
.cbc-chip:hover { border-color: var(--cbc-warm); background: #fff; transform: translateY(-1px); }
.cbc-chip--agent { background: transparent; color: var(--cbc-fg); border-style: dashed; border-color: #cdbfac; }
.cbc-chip--agent::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-inline-end: 7px; vertical-align: 1px; }
.cbc-ft { background: var(--cbc-card); border-top: 1px solid var(--cbc-line); padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.cbc-form { position: relative; align-items: center; background: #fff; border: 1px solid #e6dccd; border-radius: 26px; padding: 4px 4px 4px 6px; box-shadow: 0 6px 18px -14px rgba(60,40,20,.45); transition: border-color .2s, box-shadow .2s; }
.cbc-form:focus-within { border-color: var(--cbc-warm); box-shadow: 0 0 0 4px rgba(201,162,122,.16); }
.cbc-form textarea, .cbc-form textarea:focus { border: 0; background: transparent; padding: 9px 10px; border-radius: 0; }
.cbc-send { width: 40px; height: 40px; transition: transform .2s, background .2s, opacity .2s; }
.cbc-form:has(textarea:placeholder-shown) .cbc-send { background: #e9e1d5; color: #9a8f80; }
.cbc-send:hover { transform: scale(1.05); }
.cbc-note { color: #a39a8d; font-size: 10.5px; margin-top: 7px; }
.cbc-joined { background: var(--cbc-card); border-color: var(--cbc-line); }
.cbc-conn { background: #fff7ef; color: #8a5a2b; border: 1px solid #f1dfc9; }
.cbc-fab { box-shadow: 0 16px 34px -12px rgba(60,40,20,.55), 0 0 0 3px #fff, 0 0 0 4px rgba(201,162,122,.6); }
.cbc-fab::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(201,162,122,.55); animation: cbc-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes cbc-ring { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.cbc-tease { background: var(--cbc-card); border-color: var(--cbc-line); border-radius: 20px 20px 6px 20px; box-shadow: 0 22px 44px -18px rgba(60,40,20,.45); }
@media (max-width: 600px) { .cbc-panel { border-radius: 0; } .cbc-stack { max-width: 86%; } }
@media (prefers-reduced-motion: reduce) { .cbc-grp, .cbc-stack .cbc-m, .cbc-chip, .cbc-fab::before { animation: none !important; } }
.cbc .cbc-form textarea:focus-visible { outline: none; }
.cbc .cbc-form textarea:focus, .cbc .cbc-form textarea:focus-visible { outline: none !important; box-shadow: none !important; }
/* When the home page's lead dock is showing, the teaser sits above the chat button instead of beside it, so the two never overlap */
.cbc-tease { transition: bottom .4s cubic-bezier(.32,.72,0,1), inset-inline-end .4s cubic-bezier(.32,.72,0,1); }
body:has(.lx-dock.is-on) .cbc-tease { inset-inline-end: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 76px); }