/* REMIC Desk — full-screen live-chat landing page (desk.remic.ca/livechat).
   Loaded AFTER chat.css; presents the widget markup as a centered card on a
   branded full-page background. */

:root { --lc-blue: #4382ed; --lc-blue-deep: #2a5fc0; }

.lc-body {
    margin: 0; min-height: 100vh;
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    color: #0f1b2d;
    background: radial-gradient(1200px 600px at 15% 10%, #5b93ff 0%, var(--lc-blue) 38%, var(--lc-blue-deep) 100%);
    -webkit-font-smoothing: antialiased;
}

.lc-stage {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    gap: 56px; flex-wrap: wrap;
    padding: 40px 24px;
}

/* ---- Brand / intro column ---- */
.lc-hero { color: #fff; max-width: 440px; }
.lc-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.lc-logo { height: 40px; width: auto; }
.lc-wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.2px; }
.lc-title { font-size: 44px; line-height: 1.05; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.5px; }
.lc-sub { font-size: 16px; line-height: 1.6; margin: 0 0 22px; color: rgba(255,255,255,0.92); }
.lc-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lc-points li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.95); }
.lc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #bfe0ff; box-shadow: 0 0 0 4px rgba(255,255,255,0.15); }

/* ---- Chat card (hosts the .cw-wrap widget markup) ---- */
.lc-card {
    width: 420px; max-width: 100%;
    height: min(660px, calc(100vh - 80px));
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(8, 22, 55, 0.38);
    display: flex; flex-direction: column;
}
/* Override the widget's full-viewport height so it fills the card instead. */
.lc-card .cw-wrap { height: 100%; }
/* Slightly larger, friendlier header on the full page. */
.lc-card .cw-header { padding: 16px 18px; font-size: 17px; }

/* ---- Responsive: stack on narrow screens ---- */
@media (max-width: 880px) {
    .lc-stage { flex-direction: column; gap: 24px; padding: 28px 16px; justify-content: flex-start; }
    .lc-hero { text-align: center; max-width: 520px; }
    .lc-brand { justify-content: center; }
    .lc-title { font-size: 34px; }
    .lc-points { display: none; }            /* keep the fold tight on phones */
    .lc-card { width: 100%; height: min(640px, calc(100vh - 220px)); }
}
@media (max-width: 480px) {
    .lc-sub { font-size: 15px; }
    .lc-card { height: calc(100vh - 200px); }
}