html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
        body {
    width:100vw;
    overflow-x:hidden;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    background: #f4f6f8;
    color: #17202a;
}

.header {
    /* STATUSBAR-PROPOSAL: was navy #102a43 with white text -- changed to white to match
       real WhatsApp's current design and the native status bar color proposed alongside
       this (see _PROPOSED_statusbar_colors.xml / capacitor.config.json / Info.plist), so
       the app's own top bar and the OS status bar above it read as one continuous white
       surface instead of a visible seam. Added a hairline bottom border since a white
       bar needs a boundary against the content below it that navy didn't. */
    background: #FFFFFF;
    color: #111B21;
    border-bottom: 1px solid #E5DDC9;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
}
.layout {
    width:100%;
    max-width:100%;
    display: flex;
    min-height: calc(100vh - 60px);
}


.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #f8fafc;
    padding: 20px 14px;
    border-right: 1px solid #cbd5e1;
    box-sizing: border-box;
}
.nav {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 6px;
    cursor: pointer;
}

.main {
    width:100%;
    max-width:100%;
    box-sizing:border-box;

    flex: 1;
    padding: 20px 20px;
}

        .welcome {
            background: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

       .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}
        

        .card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    box-sizing: border-box;
    min-width: 0;
}

        .card h3 {
            margin-top: 0;
        }

        .status {
            color: #16803c;
            font-weight: bold;
        }

        button {
            background: #1769aa;
            color: white;
            border: none;
            padding: 12px 18px;
            border-radius: 7px;
            cursor: pointer;
        }

        button:hover {
            background: #0d4f82;
        }

        .chat {
            margin-top: 25px;
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        input {
            width: 70%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 7px;
            margin-right: 8px;
        }

       #chatMessages {
    margin-top: 20px;
    padding: 12px;
    background: #f0f4f7;
    border-radius: 8px;
    height: 450px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
}
.bot-message,
.user-message {
    display:block;
    width:fit-content;
    max-width:89%;
    /* COMPOSERSPACING-FIX: started at 12px horizontal, read as noticeably more open than
       WhatsApp's tighter bubble spacing on comparison. Not an independently pixel-verified
       real WhatsApp value (unlike font-size:16px above, which was) -- tightened in two
       small reversible steps (12px -> 10px -> 8px) against live on-device feedback rather
       than guessing a final number up front. Applies symmetrically to both bubble colors
       since they share this one rule. */
    padding:10px 12px;
    margin:2px 17px;
    border-radius:20px;
    position:relative;
    font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    /* DESIGN-PASS: was 14.2px -- this is the single shared class every message bubble in
       the app renders through (.msg-text itself declares no font-size, so it always
       inherits from here), and 14.2px didn't match this project's already-verified real
       WhatsApp message-bubble value of 16px. line-height intentionally left at 19px --
       no independently-verified real value for it exists from earlier work, so bumping it
       to match 16px text would be a guess, not a confirmed fix. */
    /* W-BUBBLE-PARITY-1: line-height 19px -> 18px to match the native/WhatsApp line pitch
       (spec §2); padding 9px -> 10px top matches native BubbleDrawable's 10dp top. */
    font-size:16px;
    line-height:18px;
    font-weight:400;
    /* W-BUBBLE-PARITY-1: WhatsApp's soft bottom shadow (spec §1); no stroke. */
    box-shadow:0 1px 0.5px rgba(0,0,0,0.13);
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
/* SELBLOCK: keep in-bubble anchors selectable for copy even though the bubble itself
   blocks selection (long-press must open the menu, not select text). */
.bot-message a,
.user-message a {
    -webkit-user-select:text;
    user-select:text;
}
/* SELBLOCK: explicit block on the bubble (reinforces the shared rule above) so long-press
   on dense multi-paragraph text opens the menu instead of starting a text selection. */
#teamChatMessages .bot-message,
#teamChatMessages .user-message {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* SELBLOCK-2: allow vertical scroll gestures on bubbles; horizontal / selection
       gestures stay with the long-press handler. */
    touch-action: pan-y;
}
.msg-text {
    word-wrap:break-word;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:pre-wrap;
}
/* READMORE: long text bubbles are capped with a fade + a Read more link. */
.cl-msg-truncated .msg-text {
    max-height: 26em;
    overflow: hidden;
    position: relative;
}
.cl-msg-truncated .msg-text::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3.2em;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 35%,
        var(--bubble-bg, #FFFFFF) 100%);
    pointer-events: none;
}
.user-message.cl-msg-truncated .msg-text { --bubble-bg: #DDF3E4; }
.user-message.cl-msg-truncated .msg-text::after {
    background: linear-gradient(to bottom,
        rgba(217,253,211,0) 0%,
        rgba(217,253,211,0.35) 35%,
        #DDF3E4 100%);
}
.cl-readmore-link {
    display: block;
    color: #0A8F3D;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 2px;
}
/* VISUAL-TICKET: Ask Mitron search-chat screen only (#clSearchChatView) -- ChatGPT-style
   plain white look. Deliberately separate classes, never touches .bot-message/.user-message
   or #teamChatMessages, which keep the WhatsApp wallpaper/bubble look everywhere else. */
.am-container {
    background: #FFFFFF;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
.am-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}
.am-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.am-header-icon {
    color: #6B7280;
}
.am-thread {
    background: #FFFFFF;
}
.am-msg-row {
    margin-bottom: 24px;
}
.am-msg-user {
    display: inline-block;
    max-width: 80%;
    background: #F4F4F4;
    color: #111827;
    border-radius: 18px;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.am-msg-ai {
    display: block;
    background: #FFFFFF;
    color: #111827;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.am-empty-title {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
}
.am-chip {
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 10px 14px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    background: #FFFFFF;
}
.am-input-bar {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
}
.am-input {
    border-radius: 24px;
    background: #F4F4F4;
    border: none;
    color: #111827;
}
.am-input::placeholder {
    color: #9CA3AF;
}
.am-send-btn {
    background: #10A37F;
}
.am-sources {
    font-size: 13px;
    color: #6B7280;
}
.cl-voice-player {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 210px;
    padding: 2px 0;
}
.cl-voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0EB24D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.cl-voice-track {
    flex: 1;
    height: 3px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.cl-voice-progress {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: #0EB24D;
    border-radius: 2px;
}
.cl-voice-duration {
    font-size: 11px;
    color: #667781;
    flex-shrink: 0;
    min-width: 30px;
}
/* WALLPAPER-DOODLES: subtle repeating doodle tile over WhatsApp's light-mode beige
   base. 20 original hand-drawn line-art icons (coffee, phone, bubble, camera, plane,
   heart, star, calendar, check, pencil, envelope, clock, bulb, pin, note, sun, cloud,
   leaf, umbrella, briefcase) -- all original geometry, strokes only (fill none). Icons
   are hand-scattered: every icon has a unique x and a unique y, rotations spread -18..+18,
   and all 20 are verified non-overlapping (>=4px gap) and fully inside the 200x200 tile
   (no edge touches), so the tile is seamless by construction and reads as scattered
   doodles, not a grid. Wrapper group sets stroke-opacity 0.10 and a warm brown-grey stroke
   (#8B7B6B); stroke-width 1.25 is pre-scaled for the per-icon scale(0.8) so the rendered
   weight is a uniform 1. Self-contained data URI, no external/network asset; # percent-
   encoded ONCE as %23 (not double-encoded). Bubbles set their own background and continue
   to override this -- only the thread surface is textured. */
#teamChatMessages {
    background-color: #EEF0E7;
    background-image: url("/static/mitron_doodle.png"); /* STORE-S1: Mitron's own doodle (was WhatsApp's) */
    background-size: 300px 300px;
    background-repeat: repeat;
}
#teamChatPanel {
    background-color: #EEF0E7;
    background-image: url("/static/mitron_doodle.png"); /* STORE-S1: Mitron's own doodle (was WhatsApp's) */
    background-size: 300px 300px;
    background-repeat: repeat;
}
/* L2-CSS-CONTAINMENT: scope layout/style/paint to the list and to each bubble so long
   bubbles do not force whole-list relayout. Bubbles set their own position:relative
   inline (buildBubbleHtml), and .clReactionChips is a child of that bubble, so its
   position:absolute still anchors to the bubble under contain. */
#teamChatMessages {
    contain: strict;
}
#teamChatMessages .bot-message,
#teamChatMessages .user-message,
.bot-message,
.user-message {
    contain: content;
}
#teamChatMessages .bot-message,
#teamChatMessages .user-message {
    display:inline-block;
    vertical-align:top;
    margin:0 6px;
}
.bot-message{
    background:#FFFFFF;
    border-top-left-radius:18px;
    margin-right:auto;
}
.user-message{
    background:#DDF3E4;
    border-top-right-radius:18px;
    margin-left:auto;
}
/* W-BUBBLE-PARITY-1: AD13 tail on the FIRST bubble of a sender run (native-shipped
   geometry). A non-first bubble is fully rounded; the first bubble squares the top
   corner on the sender side and draws a small tail. The 7px gutter is reserved by the
   extra side margin below so the tail never overlaps the screen edge. */
.user-message.cl-first-in-run {
    border-top-right-radius:0;
}
.bot-message.cl-first-in-run {
    border-top-left-radius:0;
}
.user-message.cl-first-in-run::after,
.bot-message.cl-first-in-run::after {
    content:"";
    position:absolute;
    top:0;
    width:10px;
    height:12px;
}
.user-message.cl-first-in-run::after {
    right:-7px;
    border-top-left-radius:12px;
    border-bottom-right-radius:12px;
    transform:scaleX(-1);
}
.bot-message.cl-first-in-run::after {
    left:-7px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
}
.user-message.cl-first-in-run::after { background:#DDF3E4; }
.bot-message.cl-first-in-run::after { background:#FFFFFF; }
.bot-message.cl-pressing,
.user-message.cl-pressing {
    transform: scale(0.97);
    transition: transform 120ms ease-out;
}
.cl-msg-image {
    padding: 0;
    background: transparent;
}
.cl-msg-img-ts {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 3px 8px 4px 16px;
    border-radius: 0 0 0 0;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.45) 100%);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}
.cl-msg-img-hd {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* SELECT-UI5k SURGICAL: reaction-chip position + spacing only. Chip floats entirely below
   its bubble -- top:100% puts its own top edge exactly at the bubble's bottom edge (the
   bubble already has position:relative, set inline in buildBubbleHtml()), margin-top:4px
   pushes it down 4 more px -- so it can never overlap the bubble's own box (or the text
   inside it) regardless of bubble size or message length. No background/border/shadow/
   padding -- just the bare emoji+count. Same right:8px anchor for both .user-message
   (sent) and .bot-message (received), no per-side split. */
.clReactionChips {
    position: absolute;
    top: auto;
    bottom: -30px;
    right: 8px;
    left: auto;
    margin-top: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    z-index: 2;
}

.bot-message .clReactionChips,
#teamChatMessages .bot-message .clReactionChips {
    right: auto;
    left: 8px;
}
/* SELECT-UI5k SURGICAL: the chip hanging below a bubble needs room reserved before the
   NEXT message row starts. Applied to the message ROW (bubble.parentElement -- the outer
   flex wrapper buildBubbleHtml() already gives every message), marked with .cl-msg-row and
   toggled together with .has-reaction by clApplyReactionChips() only on rows that actually
   have a reaction. !important is required: the row's own inline
   `margin:2px/4px 12px` (set directly in buildBubbleHtml()'s template) would otherwise
   always beat an external stylesheet rule regardless of selector specificity. */
.cl-msg-row.has-reaction,
[data-msg-row].has-reaction {
    margin-bottom: 36px !important;
}

/* REACT-CLIP-FIX: the bubble has contain: content which includes paint; the reaction
   chip at top:100% is painted outside the bubble's padding box and gets clipped. Drop
   paint containment on rows with a reaction so the chip renders below the bubble. */
#teamChatMessages .cl-msg-row.has-reaction .user-message,
#teamChatMessages .cl-msg-row.has-reaction .bot-message {
    contain: layout style;
}

.cl-sel-row.cl-selected {
    background: rgba(37,211,102,0.35) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 4px 12px;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px 2px;
}
.opt-btn {
    background: white;
    border: 1.5px solid #1769aa;
    color: #1769aa;
    font-weight: 600;
    font-size: 12px;
    padding: 7px 13px;
    border-radius: 18px;
    cursor: pointer;
}
.opt-btn:hover {
    background: #1769aa;
    color: white;
}
.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 4px 0 4px 2px;
}
.qr-btn {
    background: white;
    border: 1.5px solid #1769aa;
    color: #1769aa;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 14px;
    cursor: pointer;
}
.qr-btn:hover {
    background: #1769aa;
    color: white;
}
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #17202a;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* N-LANDSCAPE-1: a phone turned sideways (touch, short screen) keeps the phone layout, like WhatsApp */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 600px) {
    body {
        margin: 0;
        width: 100vw !important;
        overflow-x: hidden;
        height: 100dvh;
        overflow-y: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .layout {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .sidebar {
        display: none !important;
    }
    .main {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box;
    }
    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .welcome {
        width: 100%;
        box-sizing: border-box;
    }
    .ask-section {
        width: 100%;
        box-sizing: border-box;
    }

    #mitronChatLayout {
        position: fixed;
        inset: 0;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        z-index: 1000;
        border-radius: 0 !important;
    }
    #memberSidebar {
        display: none !important;
    }
    #teamChatPanel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }
    #teamChatPanel > div:first-child {
        position: sticky;
        top: 0;
        z-index: 1001;
    }
    #teamChatPanel > div:last-child {
        z-index: 1001;
        padding: 12px 14px;
    }
    #teamChatMessages {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 6px !important;
    }
    #teamChatInput {
        width: 100% !important;
    }
}
#teamChatInput::placeholder {
    color: #667781;
    opacity: 1;
}

/* CHATLIST-VIEW-MERGE (Stage 1, in-page chat-list) */
#clTopHeader {
    height: 56px;
    flex-shrink: 0;
    background: #FFFFFF;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-family: -apple-system, "Roboto", Arial, sans-serif;
}
#clTopHeader .clLeft {
    display: flex;
    align-items: center;
    gap: 14px;
}
#clTopHeader h1 {
    font-size: 19px;
    font-weight: 700;
    color: #0EB24D;
    margin: 0;
    letter-spacing: 0.5px;
}
#clTopHeader .clIcons {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 18px;
    color: #000000;
    padding-right: 21px;
}
#clSearchBarWrap {
    padding: 10px 14px 6px;
}
#clSearchBar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    box-sizing: border-box;
    background: #F6F5F3;
    border: none;
    border-top-color: transparent;
    border-radius: 22px;
    padding: 9px 14px;
    color: #5B6368;
    font-size: 15.5px;
}
#clFilterPills {
    display: flex;
    gap: 8px;
    padding: 4px 14px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#clFilterPills::-webkit-scrollbar {
    display: none;
    height: 0;
}
.clPill {
    padding: 3px 14px;
    border-radius: 16px;
    border: 1px solid #CFD1D3;
    font-size: 15px;
    font-weight: 400;
    color: #5B6368;
    background: #FFFFFF;
    white-space: nowrap;
}
.clPill.clPillActive {
    background: #D8FDD2;
    border-color: #B1CFB0;
    color: #15603E;
}
#clChatList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 84px; /* W-FAB-1: the last rows can scroll clear of the new-chat button (WhatsApp) */
}
/* EFFICIENCY-BUNDLE: boot skeleton — muted grey placeholder rows shown until the chat list
   paints, then hidden by clHideBootSkeleton(). Static markup only; no JS, no fetch. */
.clBootSkeleton {
    display: block;
}
.clSkelRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-height: 72px;
    box-sizing: border-box;
}
.clSkelAvatar {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #E5E7EB;
    flex-shrink: 0;
}
.clSkelBody {
    flex: 1;
    min-width: 0;
}
.clSkelBar {
    height: 12px;
    border-radius: 6px;
    background: #E5E7EB;
}
.clSkelBarName { width: 45%; margin-bottom: 8px; }
.clSkelBarPreview { width: 75%; }
.clChatRow {
    display: flex;
    align-items: center;
    gap: 9px; /* W-CHATLIST-MATCH-1: text starts at WhatsApp's x (measured: 3px further left) */
    padding: 11px 16px 11px 10px; /* right 16px: time/badge end where WhatsApp's do */
    min-height: 76px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    border-bottom: none;
    position: relative;
    cursor: pointer;
}
.clAvatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: white;
}
.clAvatar.clAvatarAi { background: #0EB24D; }
.clAvatar.clAvatarTeam { background: #0EB24D; }
.clAvatar.clAvatarEagleEye { background: #111B21; }
.clRowBody {
    flex: 1;
    min-width: 0;
    position: relative;
    top: -0.33px; /* W-CHATLIST-MATCH-1: with the 4.7px title gap (centred body) -> name 2.7px higher, preview 2px lower (WhatsApp) */
}
.clRowBody .clRowTitle { margin-bottom: 4.7px; }
.clRowTitle {
    font-size: 16px;
    font-weight: 500; /* W-ROWNAME-1: WhatsApp chat names are medium weight (measured on the phone) */
    color: #0A1014;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.clRowSub {
    font-size: 15px;
    font-weight: 400;
    color: #5B6368;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#clBottomNav {
    height: 80px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-top: 1px solid #E7E8E8;
    display: flex;
}
/* W-NAV-WA-1: measured on WhatsApp (CPH2491): icon pill 64x32dp from 12dp below the top
   edge, label 14px #12181C 4dp under it; the active tab gets a #DDF3E4 pill + bold label. */
.clNavItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12px;
    gap: 1px; /* W-CHATLIST-MATCH-1c: labels 4px higher -- measured on the phone vs WhatsApp */
    font-size: 10.7px; /* W-CHATLIST-MATCH-1: "Communities" label 103 screen px like WhatsApp (14px was 135) */
    line-height: 19px;
    font-weight: 500;
    color: #12181C;
    text-decoration: none;
    cursor: pointer;
}
.clNavItem.clNavItemActive {
    color: #0A1014;
    font-weight: 700;
}
.clNavItem .clNavIcon {
    position: relative;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clNavItem.clNavItemActive .clNavIcon {
    background: #DDF3E4;
}
.clNavBadge {
    position: absolute;
    top: -3px;
    left: 34px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1.5px solid #FFFFFF;
    background: #0EB24D;
    color: #FFFFFF;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
}
.clChatTime {
    font-size: 12.4px; /* W-CHATLIST-MATCH-1: "09:47" measured 132x38 on WhatsApp (was 122x37) */
    color: #5B6368;
    margin-left: auto;
    white-space: nowrap;
    align-self: flex-start;
}
@keyframes clSpin {
    to { transform: rotate(360deg); }
}
.cl-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #93918D;
    display: inline-block;
    animation: clTypingBounce 1s infinite ease-in-out;
}
@keyframes clTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.clSTTListening { background:#D14343 !important; animation:clSTTPulse 1.4s infinite; }
@keyframes clSTTPulse {
    0% { box-shadow:0 0 0 0 rgba(209,67,67,0.45); }
    70% { box-shadow:0 0 0 10px rgba(209,67,67,0); }
    100% { box-shadow:0 0 0 0 rgba(209,67,67,0); }
}


/* S10: Chat View picker chip pressed state (sheet open only; never clPillActive). */
.clPill.clPillOn { background:#D8FDD2; border-color:#D8FDD2; color:#175832; }
.clChatViewRadio.clChatViewRadioOn { border-color:#0EB24D; }

/* WP-PICK-A: chat-theme wallpaper presets (WebView). The default keeps the S1 doodle
   (no class needed). Each theme-XX swaps the tile; base color #F5F2EB; 180px repeat. */
#teamChatMessages.theme-01 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_01_classic_cream_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-02 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_02_soft_green_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-03 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_03_mint_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-04 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_04_light_blue_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-05 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_05_soft_pink_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-06 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_06_lavender_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-07 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_07_sand_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-08 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_08_light_gray_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-09 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_09_aqua_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-10 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_10_dark_mode_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
/* THEMES-2: the 8 colourful Mitron themes (same tiles as the apps) */
#teamChatMessages.theme-11 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_11_diwali_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-12 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_12_holi_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-13 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_13_monsoon_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-14 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_14_kolkata_night_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-15 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_15_sunset_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-16 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_16_ocean_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-17 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_17_festive_red_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }
#teamChatMessages.theme-18 { background-color:#F5F2EB; background-image:url('/static/chat_themes/chat_wallpaper_18_mitron_green_540x540.webp'); background-repeat:repeat; background-size:180px 180px; }

/* CV8: ongoing-call banner -- green pill at the top of the chat list and DM screen while a
   connected call is minimized; tap returns to the call overlay. */
.clCallBanner {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 6px 10px;
    padding: 9px 16px;
    border-radius: 22px;
    background: #0EB24D;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.clCallBannerText { overflow: hidden; text-overflow: ellipsis; }

/* W-UNREADPILLS-1: WhatsApp pill count -- same size, grey (active pill: inherits green). */
.clPill .clPillCount { color:#8696A0; margin-left:2px; }
.clPill.clPillActive .clPillCount { color:inherit; }

/* ---------------------------------------------------------------------------------------
   N-NATIVE-3 B6: dark theme for the web fallback. html[data-theme="dark"] is set by the
   Android app (Settings > Chats > Theme, app-wide) or, in a browser, by the Settings toggle /
   prefers-color-scheme. Values measured on the owner's WhatsApp in night mode (CPH2491):
   screen #0A1014, text #F7F8FA, secondary #8D9599, green #0EB24D, selected chip #16301A on
   #DDF3E4, outgoing bubble #1F3D1C, incoming #20272B, sheets / menus #12181C, tiles #23282C.
   Most web screens carry inline styles, so the [style*=...] rules re-colour those in place. */
html[data-theme="dark"] { color-scheme: dark; background: #0A1014; }
html[data-theme="dark"] body, html[data-theme="dark"] .layout, html[data-theme="dark"] .main, html[data-theme="dark"] .header,
html[data-theme="dark"] #clChatListView, html[data-theme="dark"] #clTopHeader, html[data-theme="dark"] #clSearchBarWrap, html[data-theme="dark"] #clFilterPills,
html[data-theme="dark"] #clChatList, html[data-theme="dark"] #clBottomNav, html[data-theme="dark"] .clChatRow, html[data-theme="dark"] #teamChatPanel,
html[data-theme="dark"] .am-container, html[data-theme="dark"] .am-header, html[data-theme="dark"] .am-thread, html[data-theme="dark"] .am-input-bar { background: #0A1014 !important; color: #F7F8FA !important; }
html[data-theme="dark"] #teamChatMessages { background-color: #0A1014 !important; }
html[data-theme="dark"] #clTopHeader h1, html[data-theme="dark"] .clRowTitle, html[data-theme="dark"] .am-header-title, html[data-theme="dark"] .am-empty-title { color: #F7F8FA !important; }
html[data-theme="dark"] .clRowSub, html[data-theme="dark"] .clChatTime, html[data-theme="dark"] .clNavItem, html[data-theme="dark"] .am-sources { color: #8D9599 !important; }
html[data-theme="dark"] .clNavItem.clNavItemActive { color: #F7F8FA !important; }
html[data-theme="dark"] .clNavItem.clNavItemActive .clNavIcon { background: #16301A !important; }
html[data-theme="dark"] #clSearchBar, html[data-theme="dark"] #teamChatInput, html[data-theme="dark"] .am-input, html[data-theme="dark"] .am-chip { background: #20272B !important; color: #F7F8FA !important; border-color: #20272B !important; }
html[data-theme="dark"] #teamChatInput::placeholder, html[data-theme="dark"] .am-input::placeholder, html[data-theme="dark"] #clSearchBar::placeholder { color: #8D9599 !important; }
html[data-theme="dark"] .clPill { background: transparent !important; color: #8D9599 !important; border-color: #20272B !important; }
html[data-theme="dark"] .clPill.clPillActive, html[data-theme="dark"] .clPill.clPillOn { background: #16301A !important; color: #DDF3E4 !important; border-color: #16301A !important; }
html[data-theme="dark"] .user-message, html[data-theme="dark"] .am-msg-user { background: #1F3D1C !important; color: #F7F8FA !important; }
html[data-theme="dark"] .bot-message, html[data-theme="dark"] .am-msg-ai { background: #20272B !important; color: #F7F8FA !important; }
html[data-theme="dark"] .user-message.cl-first-in-run::after { border-color: transparent transparent transparent #1F3D1C !important; }
html[data-theme="dark"] .bot-message.cl-first-in-run::after { border-color: transparent #20272B transparent transparent !important; }
html[data-theme="dark"] .cl-sel-row.cl-selected { background: #16301A !important; }
html[data-theme="dark"] .clBootSkeleton, html[data-theme="dark"] .clSkelBar, html[data-theme="dark"] .clSkelAvatar { background: #20272B !important; }
html[data-theme="dark"] .toast { background: #12181C !important; color: #F7F8FA !important; }
html[data-theme="dark"] .clCallBanner { background: #0B141A !important; }
/* inline styles (authored hex and the browser's rgb() serialisation) */
html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: #FFFFFF"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"], html[data-theme="dark"] [style*="background-color:#FFFFFF"], html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"], html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] { background-color: #12181C !important; }
html[data-theme="dark"] [style*="background:#F0EAD9"], html[data-theme="dark"] [style*="background: #F0EAD9"], html[data-theme="dark"] [style*="background: rgb(240, 234, 217)"], html[data-theme="dark"] [style*="background:#F0F2F5"], html[data-theme="dark"] [style*="background: #F0F2F5"], html[data-theme="dark"] [style*="background: rgb(240, 242, 245)"],
html[data-theme="dark"] [style*="background:#E9EDEF"], html[data-theme="dark"] [style*="background:#D8CFB8"], html[data-theme="dark"] [style*="background:#F7F5F3"], html[data-theme="dark"] [style*="background:#F7F5EF"], html[data-theme="dark"] [style*="background:#F3F3F3"], html[data-theme="dark"] [style*="background:#F6F5F4"], html[data-theme="dark"] [style*="background:#EEE"] { background-color: #20272B !important; }
html[data-theme="dark"] [style*="color:#111B21"], html[data-theme="dark"] [style*="color: #111B21"], html[data-theme="dark"] [style*="color: rgb(17, 27, 33)"], html[data-theme="dark"] [style*="color:#0A1014"], html[data-theme="dark"] [style*="color: #0A1014"], html[data-theme="dark"] [style*="color: rgb(10, 16, 20)"],
html[data-theme="dark"] [style*="color:#000000"], html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color:#3B4A54"], html[data-theme="dark"] [style*="color:#17202A"], html[data-theme="dark"] [style*="color: rgb(59, 74, 84)"] { color: #F7F8FA !important; }
html[data-theme="dark"] [style*="color:#667781"], html[data-theme="dark"] [style*="color: #667781"], html[data-theme="dark"] [style*="color: rgb(102, 119, 129)"], html[data-theme="dark"] [style*="color:#5B6368"], html[data-theme="dark"] [style*="color: rgb(91, 99, 104)"],
html[data-theme="dark"] [style*="color:#8696A0"], html[data-theme="dark"] [style*="color:#54656F"], html[data-theme="dark"] [style*="color:#999"], html[data-theme="dark"] [style*="color:#AEBAC1"] { color: #8D9599 !important; }
html[data-theme="dark"] [style*="color:#1B8755"], html[data-theme="dark"] [style*="color:#0A8F3D"], html[data-theme="dark"] [style*="color:#15603E"], html[data-theme="dark"] [style*="color:#0EB24D"] { color: #0EB24D !important; }
html[data-theme="dark"] [style*="border-top:1px solid #EEE"], html[data-theme="dark"] [style*="border-bottom:1px solid #EEE"], html[data-theme="dark"] [style*="border-bottom:1px solid #F0F0F0"], html[data-theme="dark"] [style*="border:1px solid #E9EDEF"], html[data-theme="dark"] [style*="border-bottom:1px solid #E9EDEF"],
html[data-theme="dark"] [style*="border-top:1px solid #E5DDC9"], html[data-theme="dark"] [style*="border:1px solid #CCC"], html[data-theme="dark"] [style*="border:1px solid #D8CFB8"], html[data-theme="dark"] [style*="border-bottom: 1px solid rgb(238, 238, 238)"], html[data-theme="dark"] [style*="border-top: 1px solid rgb(238, 238, 238)"] { border-color: #20272B !important; }
html[data-theme="dark"] [style*="border-bottom:8px solid #F7F5EF"] { border-color: #0A1014 !important; }
html[data-theme="dark"] [style*="background:#DDF3E4"], html[data-theme="dark"] [style*="background: rgb(217, 253, 211)"] { background-color: #1F3D1C !important; }
html[data-theme="dark"] [style*="background:#EEF0F1"] { background-color: #12181C !important; }
html[data-theme="dark"] [style*="background:#0EB24D"], html[data-theme="dark"] [style*="background:#0EB24D"] { background-color: #0EB24D !important; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #20272B; color: #F7F8FA; border-color: #20272B; }
/* exact inline spellings found in shell.html / core.js (attribute selectors are case-sensitive) */
html[data-theme="dark"] [style*="border-top:1px solid #eee"], html[data-theme="dark"] [style*="border-bottom:1px solid #eee"], html[data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"], html[data-theme="dark"] [style*="border:1px solid #ccc"], html[data-theme="dark"] [style*="border-top:1px solid #E5DDC9"] { border-color: #20272B !important; }
html[data-theme="dark"] [style*="background:#fff;"], html[data-theme="dark"] [style*="background:#fff "], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background:#FFFFFF;"] { background-color: #12181C !important; }
html[data-theme="dark"] [style*="color:#111B21"], html[data-theme="dark"] [style*="color:#0A1014"], html[data-theme="dark"] [style*="color:#000000"], html[data-theme="dark"] [style*="color:#222"] { color: #F7F8FA !important; }
html[data-theme="dark"] [style*="color:#667781"], html[data-theme="dark"] [style*="color:#5B6368"], html[data-theme="dark"] [style*="color:#8696A0"], html[data-theme="dark"] [style*="color:#54656F"], html[data-theme="dark"] [style*="color:#999"] { color: #8D9599 !important; }
html[data-theme="dark"] [style*="border-bottom:8px solid #F7F5EF"] { border-color: #0A1014 !important; }
html[data-theme="dark"] svg[stroke="#54656F"], html[data-theme="dark"] svg[stroke="#111B21"], html[data-theme="dark"] svg[stroke="#0A1014"], html[data-theme="dark"] svg[stroke="#000"], html[data-theme="dark"] svg[stroke="#000000"] { stroke: #8D9599 !important; }
html[data-theme="dark"] svg[fill="#54656F"], html[data-theme="dark"] svg[fill="#111B21"], html[data-theme="dark"] svg[fill="#0A1014"] { fill: #8D9599 !important; }
html[data-theme="dark"] #clSettingsListView, html[data-theme="dark"] #clSettingsView, html[data-theme="dark"] [id^="cl"][id$="View"] { background-color: #0A1014; color: #F7F8FA; }

/* IOS-LOOK-1 (owner 23 Oct, iPhone 17: "the design has to be in line with Apple"): WhatsApp-for-iPhone / Apple look --
   large title, frosted bars, iOS greys, hairlines, the light message bar. Only with html.ios-look (iPhone + preview switch). */
html.ios-look body, html.ios-look input, html.ios-look textarea, html.ios-look button {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html.ios-look #clTopHeader { background: rgba(255,255,255,0.94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); padding-left: 16px; padding-right: 12px; }
html.ios-look #clTopHeader h1 { font-size: 30px !important; font-weight: 700 !important; letter-spacing: 0.3px; }
html.ios-look #clSearchBarWrap { padding: 2px 16px 8px !important; }
html.ios-look #clSearchBar { background: rgba(118,118,128,0.12) !important; border: none !important; box-shadow: none !important; border-radius: 10px !important; min-height: 36px; }
html.ios-look #clFilterPills { padding-left: 16px !important; }
html.ios-look #clFilterPills .clPill { background: #F2F2F7 !important; color: #000 !important; border: none !important; font-weight: 500; border-radius: 16px !important; }
html.ios-look #clFilterPills .clPillActive { background: #DDF3E4 !important; color: #0B6E3A !important; font-weight: 600; }
html.ios-look .clChatRow { border-bottom: 0.5px solid rgba(60,60,67,0.18); }
html.ios-look .clRowTitle { font-size: 17px !important; font-weight: 600 !important; color: #000 !important; letter-spacing: -0.2px; }
html.ios-look .clRowSub { font-size: 15px !important; color: rgba(60,60,67,0.6) !important; }
html.ios-look #clBottomNav { background: rgba(249,249,249,0.94) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid rgba(60,60,67,0.29) !important; box-shadow: none !important; }
html.ios-look #clBottomNav .clNavItemActive .clNavIcon { background: transparent !important; }
html.ios-look #clChatHeaderRow { background: rgba(246,246,246,0.94) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0.5px 0 rgba(60,60,67,0.29) !important; }
html.ios-look #clComposerBar { background: #F6F6F6 !important; border-top: 0.5px solid rgba(60,60,67,0.29) !important; padding: 6px 8px 6px 8px !important; }
html.ios-look #clComposerBar > div:first-of-type { box-shadow: none !important; border: 0.5px solid #C7C7CC !important; border-radius: 18px !important; }
/* IOS-LOOK-2 (owner 23 Oct: "whichever iPhone users are used to"): WhatsApp-for-iPhone message bar -- "+" on the left,
   white rounded field with smiley + camera inside on the right, plain green mic. Same buttons, same actions. */
html.ios-look #clComposerBar { position: relative; padding-left: 46px !important; }
html.ios-look #clComposerBar > div:first-of-type { position: static !important; padding: 5px 8px 5px 12px !important; gap: 6px !important; background: #FFFFFF !important; }
html.ios-look #clEmojiBtn, html.ios-look #clVoiceTrashBtn { order: 3; }
html.ios-look #clComposerIconsWrap { order: 4; gap: 6px !important; }
html.ios-look #clVoiceRecordTimer { order: 5; }
html.ios-look #clComposerIconsWrap > span:first-child { position: absolute; left: 8px; top: 50%; transform: translateY(-50%) !important; padding: 2px 6px !important; }
html.ios-look #clComposerIconsWrap > span:first-child svg { display: none; }
html.ios-look #clComposerIconsWrap > span:first-child::before { content: "+"; font-size: 32px; line-height: 30px; font-weight: 300; color: #0EB24D; }
html.ios-look #clVoiceRecordBtn { background: transparent !important; box-shadow: none !important; }
html.ios-look #clVoiceRecordBtn svg { stroke: #0EB24D !important; width: 25px; height: 25px; }
/* IOS-MIC-1 (owner 23 Oct, iPhone 17: "hold mic still not on"): the iPhone's own long-press (selection loupe / callout)
   cancelled our 500 ms hold -- the mic button opts out of it. */
html.ios-look #clVoiceRecordBtn, html.ios-look #clSendBtn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
html.ios-look #clVoiceRecordBtn * { pointer-events: none; }