/*
 * Messaging card — Figma R2: Dashboard file VtSQbiEqtuaowkAOQhXmpI, layout set
 * widget_messaging_layout 1888:8718 (456×470 desktop / 362 content-driven
 * mobile), parts section 614:9524, use-cases 335:8470.
 *
 * White shell; the header carries a white→transparent fade that overlaps the
 * thread (desktop -37px) so bubbles scroll up behind it. The "muted" gradient
 * (rgba(229,229,229,.2) → rgba(173,173,173,.2); per-node angles differ by a
 * few degrees and collapse to one here) skins bubbles, panels, the
 * appointment pill and the skeletons.
 */

.card {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    background: var(--color-bg-base-light);
    border: 1px solid var(--border-color-light);
    color: var(--color-text-primary);
    text-align: left;
}

.cardDesktop {
    /* Fluid for the dashboard grid (Figma breakpoints 2831:26984): slots run
     * 424px (1024/1240) to 464px (1440/1600); the internal thread column
     * already flexes (min-height: 0 chain). Standalone, the floor wins. */
    min-height: 424px;
    height: 100%;
    border-radius: var(--border-radius-sm);
}

/* Mobile shell (1888:8755): radius-medium, content-driven height. */
.cardMobile {
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

/* Mobile upcoming/start_time (1888:8875): appointment block above the card. */
.mobileStack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
}

/* ================================ Header ================================ */

/* White fade over the thread (753:6764): solid to 60.284%, 70% white at
 * 79.626%, transparent at the bottom; pulls the thread up under it. */
.header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    padding: var(--spacing-20) var(--spacing-20) 0;
    margin-bottom: -37px;
    background: linear-gradient(180deg, #ffffff 60.284%, rgba(255, 255, 255, 0.7) 79.626%, rgba(255, 255, 255, 0) 100%);
    border-radius: var(--border-radius-sm);
}

/* The CTA/panel layout keeps the header flush (1888:8716 has no overlap). */
.headerNoOverlap {
    margin-bottom: 0;
}

.cardMobile .header {
    min-height: 56px;
    margin-bottom: 0;
    justify-content: center;
    gap: 0;
}

.headerTop {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-16);
    width: 100%;
}

.cardMobile .headerTop {
    align-items: center;
    gap: var(--spacing-12);
}

/* 48px tile, 6px radius (Figma one-off between xxs and xs). */
.avatar {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    filter: drop-shadow(0 9px 6.75px rgba(0, 0, 0, 0.1));
}

.cardMobile .avatar {
    width: 36px;
    height: 36px;
}

.avatarImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Blue dot riding the avatar's top-right corner (parts_avatars 76:2586). */
.unreadDot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg-fill-brand-indigo);
    border: 2px solid var(--color-bg-base-light);
    box-sizing: content-box;
}

.headerTitleCol {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-8);
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    word-break: break-word;
}

/* Welcome header (764:10405) drops the 6px vertical padding. */
.headerTitleColWelcome {
    padding: 0;
}

/* Mobile header (1785:7498): name and mono sub share one row. */
.headerTitleRow {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex: 1;
    min-width: 0;
}

.headerTitleRow .headerName {
    flex: 1;
    min-width: 0;
}

.headerName {
    font-feature-settings: 'case' 1;
}

.headerAction {
    flex-shrink: 0;
}

.headerAction button {
    width: auto;
}

.headerSub {
    text-transform: uppercase;
    color: var(--color-text-primary-disabled);
    white-space: nowrap;
}

/* ============================= Appointment ============================= */

/* Desktop pill (1789:8798): single row inside the header column. */
.appointment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-12);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-xs);
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

/* Mobile block (1789:8805): two rows split by a hairline, own card above
 * the shell. */
.mobileStack .appointment {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-20);
    border-radius: var(--border-radius-sm);
}

.appointmentRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.appointmentName {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    height: 19px;
    flex-shrink: 0;
    white-space: nowrap;
}

.appointmentDot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--color-bg-base-dark);
    flex-shrink: 0;
}

.appointmentVr {
    align-self: stretch;
    width: 0;
    border-left: 1px solid var(--border-color-light);
}

.appointmentHr {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--border-color-light);
}

.appointmentDatetime {
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mobileStack .appointmentDatetime {
    flex: 1;
}

.appointmentCountdown {
    color: var(--color-text-secondary-disabled);
    white-space: nowrap;
}

/* ================================ Thread ================================ */

/* Preview area (1785:6833): newest bubble at the bottom, older ones truncate
 * up behind the header fade. Flexible height so the appointment pill shrinks
 * the thread instead of pushing bubbles under the composer; capped at the
 * Figma 298 when space allows. The whole thread opens the full conversation. */
.thread {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 298px;
    margin: 0;
    padding: var(--spacing-24) var(--spacing-20);
    border: none;
    background: none;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

/* Hover fades the preview to 40% (interaction annotation on 1888:14454). */
.thread:hover .threadInner {
    opacity: 0.4;
}

.cardMobile .thread {
    height: auto;
    max-height: none;
    margin: 0;
    padding: var(--spacing-20);
    justify-content: flex-end;
}

/* Figma's "clinical" column (1785:6825): bubbles center in the preview area
 * with a 60px right inset. The measuring effect keeps content within the
 * available height, so centering never clips. */
.threadInner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding-right: 60px;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.cardMobile .threadInner {
    flex: none;
    padding-right: 0;
}

.bubble {
    display: flex;
    align-items: flex-start;
    max-width: 356px;
    padding: var(--spacing-14);
    border-radius: var(--border-radius-sm);
    background: linear-gradient(160deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
    overflow: hidden;
    min-height: 0;
}

.cardMobile .bubble {
    width: 100%;
    max-width: none;
    padding: var(--spacing-12) var(--spacing-14);
}

/* Long messages end in an ellipsis (use-cases 335:8470). The clamp value is
 * allocated per bubble by the card's measuring effect (--bubble-clamp); the
 * fallback covers the pre-measure frame and no-JS rendering. */
.bubbleText {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--bubble-clamp, 8);
    overflow: hidden;
    min-width: 0;
}

/* Mobile preview clamps around five lines (max-h 96, 1785:8145). */
.cardMobile .bubbleText {
    -webkit-line-clamp: 4;
    max-height: 96px;
}

/* ============================= Booking panel ============================= */

.panelWrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 0 var(--spacing-20);
    box-sizing: border-box;
}

.cardMobile .panelWrap {
    flex: none;
    padding: var(--spacing-20);
}

.panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-28);
    border-radius: var(--border-radius-sm);
    background: linear-gradient(167deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
    box-sizing: border-box;
}

.cardMobile .panel {
    padding: var(--spacing-20);
}

.panelText {
    width: 100%;
    max-height: 154px;
    overflow: hidden;
}

.panelCta {
    width: 100%;
}

.panelCta button {
    width: 100%;
}

/* ================================ Footer ================================ */

.composer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-14);
    width: 100%;
    margin: 0;
    padding: 0 var(--spacing-20) var(--spacing-20);
    border: none;
    background: var(--color-bg-base-light);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.composer:disabled {
    cursor: default;
}

.composerText {
    flex: 1;
    min-width: 0;
    color: var(--color-text-secondary-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover pulls the placeholder through the Indigo gradient (1790:8009). */
.composer:hover:not(:disabled) .composerText {
    background-image: linear-gradient(
        -27.38deg,
        #d3d4e0 5.4241%,
        #a8a9c1 8.1612%,
        #7a87a6 21.747%,
        #496e8d 35.332%,
        #195675 48.917%,
        #13435b 62.503%,
        #0e3041 76.088%,
        #081d27 89.673%,
        #000000 103.26%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.composerIcon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-text-primary);
}

.cardMobile .composerIcon {
    width: 20px;
    height: 20px;
}

/* ================================ Error ================================ */

.errorBody {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    margin-bottom: -37px;
    padding: 0 var(--spacing-20) var(--spacing-24);
    text-align: center;
    box-sizing: border-box;
}

.cardMobile .errorBody {
    flex: none;
    margin-bottom: 0;
    padding: var(--spacing-20);
}

.errorIcon {
    width: 24px;
    height: 24px;
    color: var(--color-text-primary-disabled);
}

.errorTitle {
    color: var(--color-text-secondary);
    font-feature-settings: 'case' 1;
}

.errorSub {
    color: var(--color-text-secondary-disabled);
}

/* =============================== Loading =============================== */

/* Skeleton blocks share the "muted" gradient (1888:10909). */
.skel {
    display: block;
    border-radius: var(--border-radius-xxs);
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
}

.headerLoading {
    flex-direction: row;
    align-items: center;
    padding-bottom: var(--spacing-20);
}

.skelAvatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--border-radius-xs);
}

.cardMobile .skelAvatar {
    width: 36px;
    height: 36px;
}

/* 9px bar gap has no spacing token (1888:10899). */
.skelTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
}

.skelTitleBar {
    width: 100%;
    height: 22px;
}

.skelSubBar {
    width: 120px;
    height: 15px;
}

.loader {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    margin-bottom: -37px;
    padding: 0 var(--spacing-20) var(--spacing-24);
    box-sizing: border-box;
}

.cardMobile .loader {
    flex: none;
    margin-bottom: 0;
    padding: var(--spacing-20);
}

/* 48px window over the gif, zoomed 150% to crop its padding (1888:10903). */
.loaderGif {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
}

.cardMobile .loaderGif {
    width: 28px;
    height: 28px;
}

.loaderGif img {
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    object-fit: contain;
    pointer-events: none;
}

/* Footer skeleton (1888:10904): text bar + icon square, 104px apart. */
.skelFooter {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-104);
    width: 100%;
    padding: 0 var(--spacing-20) var(--spacing-20);
    background: var(--color-bg-base-light);
    box-sizing: border-box;
}

.skelFooterBar {
    flex: 1;
    min-width: 0;
    height: 22px;
    border-radius: 6px; /* no radius token between xxs (4) and xs (8) */
}

.skelFooterIcon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
}