.markom-wa {
    --wa-header: #075e54;
    --wa-accent: #128c7e;
    --wa-brand: #25d366;
    --wa-out: #dcf8c6;
    --wa-bg: #ece5dd;
    --wa-in: #ffffff;
    --wa-text: #111b21;
    --wa-muted: #54656f;
    --wa-time: #667781;
    --wa-chip: #ffffff;
    --wa-chip-text: #54656f;
    --wa-avatar-bg: #dcf8c6;
    --wa-avatar-fg: #075e54;
    --wa-call-in: #e8f3ee;
    --wa-call-out: #c8f0be;
    --wa-border: color-mix(in srgb, #075e54 18%, #ece5dd);
    --wa-shadow: rgba(7, 94, 84, 0.18);
    --wa-empty-bg: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    padding: 0.25rem 0 0.75rem;
}

html.dark .markom-wa,
body.dark .markom-wa {
    --wa-header: #075e54;
    --wa-accent: #25d366;
    --wa-brand: #25d366;
    --wa-out: #075e54;
    --wa-bg: #032824;
    --wa-in: #333333;
    --wa-text: #e8fff3;
    --wa-muted: #9ad4c4;
    --wa-time: #8ecabb;
    --wa-chip: #075e54;
    --wa-chip-text: #dcf8c6;
    --wa-avatar-bg: #128c7e;
    --wa-avatar-fg: #dcf8c6;
    --wa-call-in: #2a2a2a;
    --wa-call-out: #054c44;
    --wa-border: #128c7e;
    --wa-shadow: rgba(0, 0, 0, 0.4);
    --wa-empty-bg: #075e54;
}

.markom-wa__phone {
    width: min(100%, 22.5rem);
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid var(--wa-border);
    box-shadow: 0 12px 32px var(--wa-shadow);
    background: var(--wa-bg);
}

.markom-wa__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--wa-header);
    color: #fff;
}

.markom-wa__avatar {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--wa-avatar-bg);
    color: var(--wa-avatar-fg);
    font-weight: 700;
    font-size: 1rem;
    flex: 0 0 auto;
}

.markom-wa__name {
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.2;
}

.markom-wa__sub {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

.markom-wa__thread {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 24rem;
    max-height: min(70dvh, 44rem);
    overflow-y: auto;
    padding: 0.85rem 0.75rem 1rem;
    background-color: var(--wa-bg);
    background-image: url("wa-chat-wallpaper-light.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.markom-wa__day-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-self: stretch;
    width: 100%;
}

.markom-wa__day-bar {
    position: sticky;
    top: 0.35rem;
    z-index: 6;
    display: flex;
    justify-content: center;
    padding: 0.15rem 0;
    pointer-events: none;
    background: transparent;
}

.markom-wa__day {
    align-self: center;
    margin: 0;
    padding: 0.28rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--wa-chip);
    color: var(--wa-chip-text);
    font-size: 0.72rem;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
}

.markom-wa__row {
    display: flex;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.markom-wa__row.is-in {
    justify-content: flex-start;
}

.markom-wa__row.is-out {
    justify-content: flex-end;
}

.markom-wa__bubble {
    position: relative;
    max-width: 82%;
    padding: 0.4rem 0.55rem 0.28rem;
    border-radius: 0.55rem;
    box-shadow: 0 1px 0.5px var(--wa-shadow);
    color: var(--wa-text);
}

.markom-wa__bubble--media {
    max-width: 14.5rem;
    width: auto;
    padding: 0.2rem 0.2rem 0.28rem;
}

.markom-wa__bubble--call {
    min-width: 11rem;
}

.markom-wa__row.is-in .markom-wa__bubble.markom-wa__bubble--call {
    background: var(--wa-call-in);
}

.markom-wa__row.is-in .markom-wa__bubble.markom-wa__bubble--call::before {
    border-color: transparent var(--wa-call-in) transparent transparent;
}

.markom-wa__row.is-out .markom-wa__bubble.markom-wa__bubble--call {
    background: var(--wa-call-out);
}

.markom-wa__row.is-out .markom-wa__bubble.markom-wa__bubble--call::before {
    border-color: transparent transparent transparent var(--wa-call-out);
}

.markom-wa__call {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.markom-wa__call-icon {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--wa-accent);
    opacity: 0.9;
}

.markom-wa__row.is-in .markom-wa__bubble {
    background: var(--wa-in);
    border-top-left-radius: 0;
}

.markom-wa__row.is-in .markom-wa__bubble::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 0;
    border-width: 0 8px 8px 0;
    border-style: solid;
    border-color: transparent var(--wa-in) transparent transparent;
}

.markom-wa__row.is-out .markom-wa__bubble {
    background: var(--wa-out);
    border-top-right-radius: 0;
}

.markom-wa__row.is-out .markom-wa__bubble::before {
    content: "";
    position: absolute;
    right: -7px;
    top: 0;
    border-width: 8px 0 0 8px;
    border-style: solid;
    border-color: var(--wa-out) transparent transparent transparent;
}

.markom-wa__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: contain;
    border-radius: 0.4rem;
    margin: 0;
}

.markom-wa__text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.35;
}

.markom-wa__via {
    margin-top: 0.2rem;
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--wa-time);
    opacity: 0.9;
}

.markom-wa__row.is-out .markom-wa__via {
    text-align: right;
}

.markom-wa__row.is-in .markom-wa__via {
    text-align: left;
}

.markom-wa__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.18rem;
    margin-top: 0.15rem;
}

.markom-wa__time {
    text-align: right;
    font-size: 0.68rem;
    color: var(--wa-time);
}

.markom-wa__ack {
    display: inline-flex;
    align-items: center;
    width: 0.95rem;
    height: 0.7rem;
    color: #8696a0;
    flex: 0 0 auto;
}

.markom-wa__ack.is-pending {
    width: 0.85rem;
    color: #8696a0;
}

.markom-wa__ack.is-sent {
    width: 0.95rem;
    color: #8696a0;
}

.markom-wa__ack.is-delivered {
    width: 1.2rem;
    color: #8696a0;
}

.markom-wa__ack.is-read {
    width: 1.2rem;
    color: #53bdeb;
}

html.dark .markom-wa__ack.is-pending,
html.dark .markom-wa__ack.is-sent,
html.dark .markom-wa__ack.is-delivered,
body.dark .markom-wa__ack.is-pending,
body.dark .markom-wa__ack.is-sent,
body.dark .markom-wa__ack.is-delivered {
    color: #aebac1;
}

html.dark .markom-wa__ack.is-read,
body.dark .markom-wa__ack.is-read {
    color: #53bdeb;
}

.markom-wa__ack svg {
    display: block;
    width: 100%;
    height: 100%;
}

.markom-wa__empty {
    align-self: center;
    margin: auto;
    max-width: 16rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.55rem;
    background: var(--wa-empty-bg);
    color: var(--wa-muted);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.4;
}

html.dark .markom-wa__thread,
body.dark .markom-wa__thread {
    background-image: url("wa-chat-wallpaper-dark.jpg");
}

.markom-chat-fu {
    display: grid;
    grid-template-columns: minmax(18rem, 22.5rem) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
}

.markom-chat-fu--dual {
    grid-template-columns: minmax(16rem, 20rem) minmax(16rem, 20rem) minmax(0, 1fr);
}

.markom-chat-fu__wa,
.markom-chat-fu__fu {
    min-height: 38rem;
    height: min(78dvh, 52rem);
    display: flex;
    flex-direction: column;
}

.markom-chat-fu .markom-wa {
    justify-content: stretch;
    padding: 0;
    height: 100%;
}

.markom-chat-fu .markom-wa__phone {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.markom-chat-fu .markom-wa__thread {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.markom-chat-fu__fu {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.markom-chat-fu__fu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.72rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0;
    color: #0f172a;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.markom-chat-fu__fu-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0;
    color: #475569;
}

.markom-chat-fu__fu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.markom-chat-fu__empty {
    margin: 0;
    padding: 1.35rem 1rem;
    color: #64748b;
    font-size: 0.85rem;
}

.markom-fu-tl {
    list-style: none;
    margin: 0;
    padding: 0.85rem 0.85rem 1rem 0.55rem;
}

.markom-fu-tl__item {
    position: relative;
    padding: 0 0 0.8rem 1.35rem;
    --fu-accent: #64748b;
    --fu-badge-bg: #f1f5f9;
    --fu-badge-fg: #475569;
    --fu-card-bg: #f8fafc;
}

.markom-fu-tl__item:last-child {
    padding-bottom: 0.15rem;
}

.markom-fu-tl__item::before {
    content: "";
    position: absolute;
    left: 0.34rem;
    top: 1.15rem;
    bottom: -0.05rem;
    width: 2px;
    background: #cbd5e1;
}

.markom-fu-tl__item:last-child::before {
    display: none;
}

.markom-fu-tl__item::after {
    content: "";
    position: absolute;
    left: 0.06rem;
    top: 0.78rem;
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 999px;
    background: var(--fu-accent);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--fu-accent) 35%, transparent);
}

.markom-fu-tl__item[data-status="cold"] {
    --fu-accent: #0d9488;
    --fu-badge-bg: #ccfbf1;
    --fu-badge-fg: #0f766e;
    --fu-card-bg: #f0fdfa;
}

.markom-fu-tl__item[data-status="warm"] {
    --fu-accent: #ea580c;
    --fu-badge-bg: #ffedd5;
    --fu-badge-fg: #c2410c;
    --fu-card-bg: #fff7ed;
}

.markom-fu-tl__item[data-status="hot"] {
    --fu-accent: #e11d48;
    --fu-badge-bg: #ffe4e6;
    --fu-badge-fg: #be123c;
    --fu-card-bg: #fff1f2;
}

.markom-fu-tl__item[data-status="deal"] {
    --fu-accent: #16a34a;
    --fu-badge-bg: #dcfce7;
    --fu-badge-fg: #15803d;
    --fu-card-bg: #f0fdf4;
}

.markom-fu-tl__item[data-status="jeda_panjang"] {
    --fu-accent: #ca8a04;
    --fu-badge-bg: #fef9c3;
    --fu-badge-fg: #854d0e;
    --fu-card-bg: #fefce8;
}

.markom-fu-tl__item[data-status="menunggu_respon"] {
    --fu-accent: #2563eb;
    --fu-badge-bg: #dbeafe;
    --fu-badge-fg: #1d4ed8;
    --fu-card-bg: #eff6ff;
}

.markom-fu-tl__item[data-status="masuk_lagi"] {
    --fu-accent: #7c3aed;
    --fu-badge-bg: #ede9fe;
    --fu-badge-fg: #6d28d9;
    --fu-card-bg: #f5f3ff;
}

.markom-fu-tl__item[data-status="new"] {
    --fu-accent: #c026d3;
    --fu-badge-bg: #fae8ff;
    --fu-badge-fg: #a21caf;
    --fu-card-bg: #fdf4ff;
}

.markom-fu-tl__item[data-status="spam"] {
    --fu-accent: #e11d48;
    --fu-badge-bg: #ffe4e6;
    --fu-badge-fg: #9f1239;
    --fu-card-bg: #fff1f2;
}

.markom-fu-tl__item[data-status="cancel"] {
    --fu-accent: #64748b;
    --fu-badge-bg: #e2e8f0;
    --fu-badge-fg: #334155;
    --fu-card-bg: #f8fafc;
}

.markom-fu-tl__card {
    padding: 0.62rem 0.75rem 0.68rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--fu-accent) 22%, #e2e8f0);
    border-left: 4px solid var(--fu-accent);
    background: var(--fu-card-bg);
}

.markom-fu-tl__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0.35rem;
}

.markom-fu-tl__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--fu-badge-bg);
    color: var(--fu-badge-fg);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
}

.markom-fu-tl__meta {
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
}

.markom-fu-tl__note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #0f172a;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
    .markom-chat-fu--dual {
        grid-template-columns: 1fr 1fr;
    }

    .markom-chat-fu--dual .markom-chat-fu__fu {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .markom-chat-fu,
    .markom-chat-fu--dual {
        grid-template-columns: 1fr;
    }

    .markom-chat-fu--dual .markom-chat-fu__fu {
        grid-column: auto;
    }

    .markom-chat-fu__wa,
    .markom-chat-fu__fu {
        height: auto;
        min-height: 0;
    }

    .markom-chat-fu .markom-wa__thread {
        max-height: min(62dvh, 38rem);
    }

    .markom-chat-fu__fu-body {
        max-height: min(42dvh, 26rem);
    }
}

html.dark .markom-chat-fu__fu,
body.dark .markom-chat-fu__fu {
    background: #0b141a;
    border-color: #2a3942;
}

html.dark .markom-chat-fu__fu-head,
body.dark .markom-chat-fu__fu-head {
    background: #202c33;
    color: #e9edef;
    border-bottom-color: #2a3942;
}

html.dark .markom-chat-fu__fu-count,
body.dark .markom-chat-fu__fu-count {
    background: #2a3942;
    color: #8696a0;
}

html.dark .markom-chat-fu__empty,
body.dark .markom-chat-fu__empty {
    color: #8696a0;
}

html.dark .markom-fu-tl__item,
body.dark .markom-fu-tl__item {
    --fu-badge-bg: #334155;
    --fu-badge-fg: #e2e8f0;
    --fu-card-bg: #18242c;
}

html.dark .markom-fu-tl__item::before,
body.dark .markom-fu-tl__item::before {
    background: #3a4c56;
}

html.dark .markom-fu-tl__item::after,
body.dark .markom-fu-tl__item::after {
    box-shadow: 0 0 0 2px #0b141a, 0 0 0 4px color-mix(in srgb, var(--fu-accent) 40%, transparent);
}

html.dark .markom-fu-tl__item[data-status="cold"],
body.dark .markom-fu-tl__item[data-status="cold"] {
    --fu-accent: #2dd4bf;
    --fu-badge-bg: #115e59;
    --fu-badge-fg: #99f6e4;
    --fu-card-bg: #12262a;
}

html.dark .markom-fu-tl__item[data-status="warm"],
body.dark .markom-fu-tl__item[data-status="warm"] {
    --fu-accent: #fb923c;
    --fu-badge-bg: #9a3412;
    --fu-badge-fg: #fed7aa;
    --fu-card-bg: #2a1d14;
}

html.dark .markom-fu-tl__item[data-status="hot"],
body.dark .markom-fu-tl__item[data-status="hot"] {
    --fu-accent: #fb7185;
    --fu-badge-bg: #9f1239;
    --fu-badge-fg: #fecdd3;
    --fu-card-bg: #2a151c;
}

html.dark .markom-fu-tl__item[data-status="deal"],
body.dark .markom-fu-tl__item[data-status="deal"] {
    --fu-accent: #4ade80;
    --fu-badge-bg: #166534;
    --fu-badge-fg: #bbf7d0;
    --fu-card-bg: #13251b;
}

html.dark .markom-fu-tl__item[data-status="jeda_panjang"],
body.dark .markom-fu-tl__item[data-status="jeda_panjang"] {
    --fu-accent: #fbbf24;
    --fu-badge-bg: #854d0e;
    --fu-badge-fg: #fde68a;
    --fu-card-bg: #261e10;
}

html.dark .markom-fu-tl__item[data-status="menunggu_respon"],
body.dark .markom-fu-tl__item[data-status="menunggu_respon"] {
    --fu-accent: #60a5fa;
    --fu-badge-bg: #1e3a8a;
    --fu-badge-fg: #bfdbfe;
    --fu-card-bg: #152033;
}

html.dark .markom-fu-tl__item[data-status="masuk_lagi"],
body.dark .markom-fu-tl__item[data-status="masuk_lagi"] {
    --fu-accent: #c4b5fd;
    --fu-badge-bg: #5b21b6;
    --fu-badge-fg: #ddd6fe;
    --fu-card-bg: #1e1730;
}

html.dark .markom-fu-tl__item[data-status="new"],
body.dark .markom-fu-tl__item[data-status="new"] {
    --fu-accent: #e879f9;
    --fu-badge-bg: #86198f;
    --fu-badge-fg: #f5d0fe;
    --fu-card-bg: #27152c;
}

html.dark .markom-fu-tl__item[data-status="spam"],
body.dark .markom-fu-tl__item[data-status="spam"] {
    --fu-accent: #fb7185;
    --fu-badge-bg: #9f1239;
    --fu-badge-fg: #fecdd3;
    --fu-card-bg: #2a151c;
}

html.dark .markom-fu-tl__item[data-status="cancel"],
body.dark .markom-fu-tl__item[data-status="cancel"] {
    --fu-accent: #94a3b8;
    --fu-badge-bg: #334155;
    --fu-badge-fg: #e2e8f0;
    --fu-card-bg: #1a222a;
}

html.dark .markom-fu-tl__card,
body.dark .markom-fu-tl__card {
    background: var(--fu-card-bg);
    border-color: color-mix(in srgb, var(--fu-accent) 32%, #2a3942);
}

html.dark .markom-fu-tl__badge,
body.dark .markom-fu-tl__badge {
    background: var(--fu-badge-bg);
    color: var(--fu-badge-fg);
}

html.dark .markom-fu-tl__meta,
body.dark .markom-fu-tl__meta {
    color: #8696a0;
}

html.dark .markom-fu-tl__note,
body.dark .markom-fu-tl__note {
    color: #e9edef;
}