/* ------------------------------------------------------------------------
   Looks — switchable visual identities. The default (Beam) is style.css.
   Each look only overrides tokens and a handful of structural rules.
   ------------------------------------------------------------------------ */

/* Shared bits used by the WhatsApp/Telegram looks: time + ticks inside bubbles */
.bubble .meta { display: none; }
[data-look="whatsapp"] .bubble .meta, [data-look="telegram"] .bubble .meta {
  display: inline-flex; align-items: center; gap: 3px; float: right; margin: 8px -4px -4px 8px;
  font-size: 11px; line-height: 1; opacity: .65; font-weight: 500; white-space: nowrap; user-select: none;
}
[data-look="whatsapp"] .bubble.img .meta, [data-look="telegram"] .bubble.img .meta,
[data-look="whatsapp"] .bubble.vid .meta, [data-look="telegram"] .bubble.vid .meta { position: absolute; right: 10px; bottom: 8px; margin: 0; color: #fff; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tick { display: inline-block; width: 16px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 5.5l3.5 3.5L11 2.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 5.5l3.5 3.5L11 2.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tick.dd, .tick.read { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 5.5l3.5 3.5L11 2.5M6 8.5l1 1L13.5 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 5.5l3.5 3.5L11 2.5M6 8.5l1 1L13.5 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tick.read { color: #53BDEB; opacity: 1; }
[data-look="whatsapp"] .status, [data-look="telegram"] .status { display: none; }         /* ticks replace "Delivered/Read" */
[data-look="whatsapp"] .status.red, [data-look="telegram"] .status.red, [data-look="whatsapp"] .status.readby, [data-look="telegram"] .status.readby { display: block; }

/* =========================================================================
   WHATSAPP
   ========================================================================= */
html[data-look="whatsapp"] {
  --accent: #25D366; --brand: #008069; --brand-deep: #075E54; --blue: #008069; --green: #25D366;
  --window: #ffffff; --sidebar: #ffffff; --sidebar-border: #e9edef; --hairline: #e9edef;
  --chat-bg: #efeae2; --chat-tint: none;
  --in-bubble: #ffffff; --in-text: #111b21; --out-bubble: #d9fdd3; --out-text: #111b21;
  --text: #111b21; --text-2: #54656f; --text-3: #667781; --search: #f0f2f5; --field: #ffffff; --field-border: transparent; --row-hover: #f5f6f6;
  --glass: rgba(240,242,245,.96); --glass-edge: transparent; --glass-line: transparent; --glass-shadow: none; --glass-blur: none;
  --avatar-a: #dfe5e7; --avatar-b: #cfd6d9; --sms-bubble: linear-gradient(180deg, #ffd7d4, #ffb8b3);
}
html[data-look="whatsapp"][data-theme="dark"], html[data-look="whatsapp"]:not([data-theme="light"]).sysdark {
  --window: #111b21; --sidebar: #111b21; --sidebar-border: #222d34; --hairline: #222d34;
  --chat-bg: #0b141a; --in-bubble: #202c33; --in-text: #e9edef; --out-bubble: #005c4b; --out-text: #e9edef;
  --text: #e9edef; --text-2: #8696a0; --text-3: #8696a0; --search: #202c33; --field: #2a3942; --row-hover: #202c33;
  --glass: rgba(32,44,51,.98); --avatar-a: #6a7175; --avatar-b: #4e5659; --brand: #202c33; --card: #233138; --card-solid: #233138;
}
[data-look="whatsapp"] .pane::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Cpath d='M60 10c6 0 10 4 10 10s-4 10-10 10'/%3E%3Cpath d='M95 30l8 8-8 8-8-8z'/%3E%3Cpath d='M18 70c0-6 5-10 10-10s10 4 10 10'/%3E%3Ccircle cx='70' cy='75' r='3'/%3E%3Cpath d='M100 90q6-8 12 0'/%3E%3Cpath d='M40 100l6 6M46 100l-6 6'/%3E%3Cpath d='M75 108c8 0 8-8 0-8'/%3E%3C/g%3E%3C/svg%3E"); opacity: 1; }
[data-look="whatsapp"] .rail { background: #f0f2f5; border-right: 1px solid #d1d7db; }
[data-look="whatsapp"][data-theme="dark"] .rail { background: #202c33; border-color: #222d34; }
[data-look="whatsapp"] .dock-icon, [data-look="whatsapp"] .dock-icon.people { background: transparent; box-shadow: none; filter: none; color: #54656f; border-radius: 50%; }
[data-look="whatsapp"] .dock-icon svg path, [data-look="whatsapp"] .dock-icon svg rect, [data-look="whatsapp"] .dock-icon svg circle { fill: currentColor; }
[data-look="whatsapp"] .dock-icon.active { background: rgba(0,128,105,.12); color: var(--brand); }
[data-look="whatsapp"] .dock-icon::after { display: none; }
[data-look="whatsapp"] .sb-top { background: var(--brand); color: #fff; padding: 18px 16px 14px; margin: 0; }
[data-look="whatsapp"] .sb-top h2 { color: #fff; font-size: 21px; font-weight: 600; letter-spacing: 0; }
[data-look="whatsapp"] .sb-top .icon-btn { color: #fff; }
[data-look="whatsapp"] .search { margin: 8px 12px; height: 36px; border-radius: 8px; }
[data-look="whatsapp"] .row { border-radius: 0; padding: 12px 14px 12px 4px; }
[data-look="whatsapp"] .row + .row .r-body { position: relative; }
[data-look="whatsapp"] .row.active { background: #f0f2f5; color: var(--text); box-shadow: none; }
[data-look="whatsapp"][data-theme="dark"] .row.active { background: #2a3942; }
[data-look="whatsapp"] .row.active .r-time, [data-look="whatsapp"] .row.active .r-preview { color: var(--text-3); }
[data-look="whatsapp"] .row.unread .r-time { color: var(--accent); }
[data-look="whatsapp"] .row .dot { background: var(--accent); }
[data-look="whatsapp"] .row .r-name { font-weight: 500; font-size: 16px; }
[data-look="whatsapp"] .pane-head { top: 0; left: 0; right: 0; border-radius: 0; height: 60px; background: var(--brand); color: #fff; box-shadow: none; padding: 0 12px 0 14px; }
[data-look="whatsapp"] .pane-head::before { display: none; }
[data-look="whatsapp"] .pane-head .who .n, [data-look="whatsapp"] .pane-head .who .s, [data-look="whatsapp"] .pane-head .icon-btn, [data-look="whatsapp"] .back { color: #fff; }
[data-look="whatsapp"] .pane-head .who .s { color: rgba(255,255,255,.8); }
[data-look="whatsapp"] .pane-head .ft-btn { background: rgba(255,255,255,.18); box-shadow: none; }
[data-look="whatsapp"] .thread { padding-top: 72px; padding-bottom: 84px; }
[data-look="whatsapp"] .bubble { border-radius: 8px; padding: 6px 8px 6px 9px; font-size: 14.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
[data-look="whatsapp"] .bubble.tail::before, [data-look="whatsapp"] .bubble.tail::after { display: none; }
[data-look="whatsapp"] .msg.gap.out .bubble { border-top-right-radius: 0; }
[data-look="whatsapp"] .msg.gap.in .bubble { border-top-left-radius: 0; }
[data-look="whatsapp"] .msg.gap.out .bubble:not(.img):not(.vid):not(.big):not(.sticker)::before { content: ""; position: absolute; top: 0; right: -8px; border: 8px solid transparent; border-top-color: var(--out-bubble); border-left-color: var(--out-bubble); border-radius: 0 3px 0 0; }
[data-look="whatsapp"] .msg.gap.in .bubble:not(.img):not(.vid):not(.big):not(.sticker)::before { content: ""; position: absolute; top: 0; left: -8px; border: 8px solid transparent; border-top-color: var(--in-bubble); border-right-color: var(--in-bubble); border-radius: 3px 0 0 0; }
[data-look="whatsapp"] .msg.out.sms .bubble { box-shadow: 0 1px .5px rgba(11,20,26,.13); }
[data-look="whatsapp"] .stamp { background: #fff; color: #54656f; border-radius: 8px; padding: 5px 12px; width: max-content; margin: 12px auto 8px; font-size: 12px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
[data-look="whatsapp"][data-theme="dark"] .stamp { background: #182229; color: #8696a0; }
[data-look="whatsapp"] .stamp b { font-weight: 500; text-transform: uppercase; }
[data-look="whatsapp"] .sender { color: #d4842f; font-weight: 600; font-size: 12.5px; margin-left: 10px; }
[data-look="whatsapp"] .composer-wrap { left: 0; right: 0; bottom: 0; }
[data-look="whatsapp"] .composer { border-radius: 0; background: #f0f2f5; box-shadow: none; padding: 8px 10px; }
[data-look="whatsapp"][data-theme="dark"] .composer { background: #202c33; }
[data-look="whatsapp"] .composer::before { display: none; }
[data-look="whatsapp"] .field-wrap { border-radius: 24px; background: var(--field); box-shadow: none; min-height: 42px; }
[data-look="whatsapp"] .field-wrap textarea { padding: 11px 44px 11px 16px; font-size: 15px; }
[data-look="whatsapp"] .composer .plus { background: transparent; color: #54656f; width: 40px; height: 40px; }
[data-look="whatsapp"] .send, [data-look="whatsapp"] .send.sms { right: 6px; bottom: 6px; width: 30px; height: 30px; background: var(--brand); box-shadow: none; }
[data-look="whatsapp"] .field-wrap .mic { right: 8px; bottom: 9px; color: #54656f; }
[data-look="whatsapp"] .ft-new { background: var(--brand); border-radius: 24px; box-shadow: none; }
[data-look="whatsapp"] .avatar { color: #fff; background: linear-gradient(180deg, var(--avatar-a), var(--avatar-b)); color: #54656f; text-shadow: none; }
[data-look="whatsapp"] .toggle.on { background: var(--brand); }
[data-look="whatsapp"] .primary { background: var(--brand); box-shadow: none; border-radius: 24px; }
[data-look="whatsapp"] .chip { background: rgba(0,128,105,.12); color: var(--brand); }
[data-look="whatsapp"] .install-tip .it-icon, [data-look="whatsapp"] .app-icon { background: var(--accent); box-shadow: none; }
[data-look="whatsapp"] .typing .tb { background: var(--in-bubble); border-radius: 8px; }
[data-look="whatsapp"] .typing .tb::before, [data-look="whatsapp"] .typing .tb::after { display: none; }
[data-look="whatsapp"] .react.mine { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* =========================================================================
   TELEGRAM
   ========================================================================= */
html[data-look="telegram"] {
  --accent: #3390ec; --brand: #3390ec; --blue: #3390ec; --green: #4dcd5e;
  --window: #ffffff; --sidebar: #ffffff; --sidebar-border: #e4e4e4; --hairline: #ecedef;
  --chat-bg: #d6e1ea; --chat-tint: linear-gradient(160deg, #e6f2fb 0%, #d1e2ef 45%, #c8e0f3 100%);
  --in-bubble: #ffffff; --in-text: #000000; --out-bubble: #effdde; --out-text: #000000;
  --text: #000000; --text-2: #707579; --text-3: #8b8f93; --search: #f4f4f5; --field: #ffffff; --field-border: transparent; --row-hover: #f4f4f5;
  --glass: rgba(255,255,255,.98); --glass-edge: transparent; --glass-line: transparent; --glass-shadow: 0 1px 0 rgba(0,0,0,.08); --glass-blur: none;
  --avatar-a: #7fb4ff; --avatar-b: #3390ec;
}
html[data-look="telegram"][data-theme="dark"], html[data-look="telegram"]:not([data-theme="light"]).sysdark {
  --window: #212121; --sidebar: #212121; --sidebar-border: #0f0f0f; --hairline: #2f2f2f;
  --chat-bg: #0f0f0f; --chat-tint: linear-gradient(160deg, #1b2733 0%, #0f1418 60%, #141a1f 100%);
  --in-bubble: #212121; --in-text: #ffffff; --out-bubble: #8774e1; --out-text: #ffffff;
  --text: #ffffff; --text-2: #aaaaaa; --text-3: #8b8f93; --search: #2c2c2c; --field: #212121; --row-hover: #2c2c2c;
  --glass: rgba(33,33,33,.98); --avatar-a: #a98bf5; --avatar-b: #8774e1; --card: #2c2c2c; --card-solid: #2c2c2c;
}
[data-look="telegram"] .pane::before { background: var(--chat-tint); }
[data-look="telegram"] .rail { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); }
[data-look="telegram"] .dock-icon, [data-look="telegram"] .dock-icon.people { background: transparent; box-shadow: none; filter: none; color: var(--text-3); border-radius: 12px; }
[data-look="telegram"] .dock-icon svg path, [data-look="telegram"] .dock-icon svg rect, [data-look="telegram"] .dock-icon svg circle { fill: currentColor; }
[data-look="telegram"] .dock-icon.active { color: var(--accent); background: rgba(51,144,236,.1); }
[data-look="telegram"] .dock-icon::after { display: none; }
[data-look="telegram"] .sb-top h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
[data-look="telegram"] .search { height: 40px; border-radius: 20px; margin: 4px 12px 8px; }
[data-look="telegram"] .row { border-radius: 10px; padding: 9px 12px 9px 4px; }
[data-look="telegram"] .row.active { background: var(--accent); }
[data-look="telegram"] .row .r-name { font-weight: 600; font-size: 15px; }
[data-look="telegram"] .row .r-time { font-size: 12px; }
/* Never display:none a grid item here — .row is grid-template-columns: 14px 46px 1fr,
   and removing the dot shifts the avatar and r-body into the earlier tracks, crushing
   the whole row down to ~46px wide (same bug already fixed for the WhatsApp look). */
[data-look="telegram"] .row .dot { opacity: 0; }
[data-look="telegram"] .row.unread .r-time::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 1px; }
[data-look="telegram"] .row.active.unread .r-time::after { background: #fff; }
[data-look="telegram"] .pane-head { top: 0; left: 0; right: 0; border-radius: 0; height: 56px; background: var(--glass); }
[data-look="telegram"] .pane-head::before { display: none; }
[data-look="telegram"] .pane-head .who .n { font-size: 15px; }
[data-look="telegram"] .pane-head .ft-btn { background: transparent; color: var(--accent); box-shadow: none; padding: 0 6px; }
[data-look="telegram"] .pane-head .ft-btn span { display: none; }
[data-look="telegram"] .thread { padding-top: 68px; padding-bottom: 76px; }
[data-look="telegram"] .bubble { border-radius: 12px; padding: 6px 10px 7px; font-size: 15px; box-shadow: 0 1px 2px rgba(16,35,47,.15); }
[data-look="telegram"] .bubble.tail::before, [data-look="telegram"] .bubble.tail::after { display: none; }
[data-look="telegram"] .msg.out .bubble.tail:not(.img):not(.vid):not(.big):not(.sticker) { border-bottom-right-radius: 4px; }
[data-look="telegram"] .msg.in .bubble.tail:not(.img):not(.vid):not(.big):not(.sticker) { border-bottom-left-radius: 4px; }
[data-look="telegram"] .msg.out .bubble.tail:not(.img):not(.vid):not(.big):not(.sticker)::after { content: ""; position: absolute; right: -6px; bottom: 0; width: 12px; height: 14px; background: var(--out-bubble); clip-path: path("M0 0 C 2 8 6 12 12 14 L 0 14 Z"); display: block; }
[data-look="telegram"] .msg.in .bubble.tail:not(.img):not(.vid):not(.big):not(.sticker)::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 12px; height: 14px; background: var(--in-bubble); clip-path: path("M12 0 C 10 8 6 12 0 14 L 12 14 Z"); display: block; }
[data-look="telegram"] .msg.out .bubble .meta { color: #4fae4e; opacity: 1; }
[data-look="telegram"][data-theme="dark"] .msg.out .bubble .meta { color: rgba(255,255,255,.75); }
[data-look="telegram"] .tick.read { color: #4fae4e; }
[data-look="telegram"][data-theme="dark"] .tick.read { color: #fff; }
[data-look="telegram"] .stamp { background: rgba(0,0,0,.28); color: #fff; border-radius: 12px; padding: 4px 10px; width: max-content; margin: 12px auto 8px; font-size: 12.5px; font-weight: 500; }
[data-look="telegram"] .sender { color: #e17076; font-weight: 600; font-size: 13px; margin-left: 12px; }
[data-look="telegram"] .composer-wrap { left: 0; right: 0; bottom: 0; }
[data-look="telegram"] .composer { border-radius: 0; background: var(--sidebar); box-shadow: 0 -1px 0 var(--hairline); padding: 6px 8px; }
[data-look="telegram"] .composer::before { display: none; }
[data-look="telegram"] .field-wrap { background: transparent; box-shadow: none; }
[data-look="telegram"] .field-wrap textarea { padding: 9px 44px 9px 8px; font-size: 16px; }
[data-look="telegram"] .composer .plus { background: transparent; color: var(--text-3); }
[data-look="telegram"] .send, [data-look="telegram"] .send.sms { background: transparent; color: var(--accent); box-shadow: none; width: 32px; height: 32px; }
[data-look="telegram"] .send svg { width: 22px; height: 22px; }
[data-look="telegram"] .field-wrap .mic { color: var(--text-3); }
[data-look="telegram"] .ft-new { background: var(--accent); border-radius: 12px; box-shadow: none; }
[data-look="telegram"] .toggle.on { background: var(--accent); }
[data-look="telegram"] .primary { background: var(--accent); box-shadow: none; }
[data-look="telegram"] .avatar { text-shadow: none; }
[data-look="telegram"] .typing .tb { border-radius: 12px; }
[data-look="telegram"] .typing .tb::before, [data-look="telegram"] .typing .tb::after { display: none; }
[data-look="telegram"] .install-tip .it-icon, [data-look="telegram"] .app-icon { background: var(--accent); box-shadow: none; }

/* =========================================================================
   SNAPCHAT — no bubbles: colored rails and CAPS names, yellow chrome
   ========================================================================= */
html[data-look="snapchat"] {
  --accent: #fffc00; --brand: #fffc00; --blue: #0eadff; --green: #00d564; --red: #f23c57;
  --window: #ffffff; --sidebar: #ffffff; --sidebar-border: #efefef; --hairline: #efefef;
  --chat-bg: #ffffff; --chat-tint: none;
  --in-bubble: transparent; --in-text: #000; --out-bubble: transparent; --out-text: #000;
  --text: #000000; --text-2: #656d78; --text-3: #8b98a5; --search: #f2f3f5; --field: #f2f3f5; --field-border: transparent; --row-hover: #f7f7f7;
  --glass: rgba(255,255,255,.98); --glass-edge: transparent; --glass-line: transparent; --glass-shadow: 0 1px 0 rgba(0,0,0,.06); --glass-blur: none;
  --avatar-a: #ffe28a; --avatar-b: #ffd400; --sms-bubble: transparent;
}
html[data-look="snapchat"][data-theme="dark"], html[data-look="snapchat"]:not([data-theme="light"]).sysdark {
  --window: #121212; --sidebar: #121212; --sidebar-border: #232323; --hairline: #232323; --chat-bg: #121212;
  --in-text: #fff; --out-text: #fff; --text: #fff; --text-2: #a4a9b0; --text-3: #8b98a5; --search: #232323; --field: #232323; --row-hover: #1d1d1d;
  --glass: rgba(18,18,18,.98); --card: #1e1e1e; --card-solid: #1e1e1e;
}
[data-look="snapchat"] body, [data-look="snapchat"] .shell { font-family: "Avenir Next", "Helvetica Neue", -apple-system, "Segoe UI", sans-serif; }
[data-look="snapchat"] .rail { background: var(--brand); border-right: 0; }
[data-look="snapchat"] .dock-icon, [data-look="snapchat"] .dock-icon.people { background: transparent; box-shadow: none; filter: none; color: rgba(0,0,0,.45); border-radius: 50%; }
[data-look="snapchat"] .dock-icon svg path, [data-look="snapchat"] .dock-icon svg rect, [data-look="snapchat"] .dock-icon svg circle { fill: currentColor; }
[data-look="snapchat"] .dock-icon.active { color: #000; }
[data-look="snapchat"] .dock-icon::after { display: none; }
[data-look="snapchat"] .rail .me { box-shadow: 0 0 0 2px var(--brand), 0 0 0 3.5px rgba(0,0,0,.25); }
[data-look="snapchat"] .badge { background: #f23c57; }
[data-look="snapchat"] .sb-top { background: var(--brand); color: #000; padding: 16px 16px 12px; }
[data-look="snapchat"] .sb-top h2 { font-weight: 800; letter-spacing: -.01em; font-size: 22px; }
[data-look="snapchat"] .sb-top .icon-btn { color: #000; }
[data-look="snapchat"] .search { height: 38px; border-radius: 19px; margin: 8px 12px; }
[data-look="snapchat"] .row { border-radius: 0; padding: 10px 14px 10px 4px; }
[data-look="snapchat"] .row .r-name { font-weight: 700; font-size: 15px; }
[data-look="snapchat"] .row .r-preview { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; -webkit-line-clamp: 1; color: var(--text-3); }
[data-look="snapchat"] .row.unread .r-preview { color: #0eadff; }
[data-look="snapchat"] .row.active { background: var(--row-hover); color: var(--text); box-shadow: none; }
[data-look="snapchat"] .row.active .r-preview, [data-look="snapchat"] .row.active .r-time { color: var(--text-3); }
[data-look="snapchat"] .row .dot { background: #0eadff; border-radius: 3px; width: 9px; height: 9px; }
[data-look="snapchat"] .pane-head { top: 0; left: 0; right: 0; border-radius: 0; height: 56px; }
[data-look="snapchat"] .pane-head::before { display: none; }
[data-look="snapchat"] .pane-head .who .n { font-weight: 800; }
[data-look="snapchat"] .pane-head .ft-btn { background: #f2f3f5; color: #000; box-shadow: none; }
[data-look="snapchat"][data-theme="dark"] .pane-head .ft-btn { background: #232323; color: #fff; }
[data-look="snapchat"] .pane-head .ft-btn span { display: none; }
[data-look="snapchat"] .thread { padding: 64px 14px 80px; }
[data-look="snapchat"] .msg, [data-look="snapchat"] .msg.out { justify-content: flex-start; margin-top: 1px; }
[data-look="snapchat"] .msg .col, [data-look="snapchat"] .msg.out .col { max-width: 100%; width: 100%; align-items: flex-start; }
[data-look="snapchat"] .msg.gap { margin-top: 14px; }
[data-look="snapchat"] .msg.gap .col::before { content: attr(data-sender); display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 3px 10px; color: #0eadff; }
[data-look="snapchat"] .msg.gap.out .col::before { color: #f23c57; }
[data-look="snapchat"] .bubble { background: transparent !important; border-radius: 0; padding: 1px 10px; font-size: 15px; font-weight: 500; border-left: 2.5px solid #0eadff; box-shadow: none; color: var(--text); }
[data-look="snapchat"] .msg.out .bubble { border-left-color: #f23c57; }
[data-look="snapchat"] .msg.out.sms .bubble { border-left-color: #8b98a5; }
[data-look="snapchat"] .bubble.tail::before, [data-look="snapchat"] .bubble.tail::after { display: none; }
[data-look="snapchat"] .bubble.img, [data-look="snapchat"] .bubble.vid, [data-look="snapchat"] .bubble.sticker, [data-look="snapchat"] .bubble.big { border-left: 0; padding-left: 10px; }
[data-look="snapchat"] .bubble.img img, [data-look="snapchat"] .bubble.vid { border-radius: 14px; }
[data-look="snapchat"] .bubble.voice, [data-look="snapchat"] .bubble.call { background: var(--search) !important; border-radius: 14px; border-left: 0; margin-left: 10px; color: var(--text); }
[data-look="snapchat"] .msg.in .bubble.voice .wave i { background: rgba(14,173,255,.5); } [data-look="snapchat"] .msg.in .bubble.voice .wave i.done { background: #0eadff; }
[data-look="snapchat"] .msg.out .bubble.voice .wave i { background: rgba(242,60,87,.5); } [data-look="snapchat"] .msg.out .bubble.voice .wave i.done { background: #f23c57; }
[data-look="snapchat"] .bubble.voice .vplay { background: rgba(0,0,0,.08); }
[data-look="snapchat"] .sender { display: none; }
[data-look="snapchat"] .status { margin-left: 12px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
[data-look="snapchat"] .status b { font-weight: 800; }
[data-look="snapchat"] .stamp { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
[data-look="snapchat"] .reacts { position: static; margin: 2px 0 0 10px; }
[data-look="snapchat"] .react { background: var(--search) !important; box-shadow: none; }
[data-look="snapchat"] .composer-wrap { left: 0; right: 0; bottom: 0; }
[data-look="snapchat"] .composer { border-radius: 0; background: var(--sidebar); box-shadow: 0 -1px 0 var(--hairline); padding: 8px 10px; }
[data-look="snapchat"] .composer::before { display: none; }
[data-look="snapchat"] .field-wrap { background: var(--field); border-radius: 22px; box-shadow: none; min-height: 40px; }
[data-look="snapchat"] .field-wrap textarea { padding: 10px 44px 10px 16px; font-weight: 600; }
[data-look="snapchat"] .field-wrap textarea::placeholder { color: var(--text-3); font-weight: 600; }
[data-look="snapchat"] .composer .plus { background: var(--field); color: var(--text); }
[data-look="snapchat"] .send, [data-look="snapchat"] .send.sms { background: #0eadff; box-shadow: none; }
[data-look="snapchat"] .ft-new { background: #0eadff; box-shadow: none; }
[data-look="snapchat"] .toggle.on { background: #00d564; }
[data-look="snapchat"] .primary { background: #0eadff; box-shadow: none; }
[data-look="snapchat"] .chip { background: rgba(14,173,255,.12); color: #0eadff; }
[data-look="snapchat"] .avatar { color: #000; text-shadow: none; }
[data-look="snapchat"] .install-tip .it-icon, [data-look="snapchat"] .app-icon { background: var(--brand); box-shadow: none; }
[data-look="snapchat"] .app-icon svg path, [data-look="snapchat"] .install-tip .it-icon svg path { fill: #000; }
[data-look="snapchat"] .typing .tb { background: transparent; border-left: 2.5px solid #0eadff; border-radius: 0; padding: 6px 10px; margin-left: 0; }
[data-look="snapchat"] .typing .tb::before, [data-look="snapchat"] .typing .tb::after { display: none; }
[data-look="snapchat"] .typing i { background: #0eadff; }

/* Look picker in Settings */
.look-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.look-row button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--search); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.look-row button.on { box-shadow: inset 0 0 0 2px var(--blue); color: var(--text); }
.look-row button:active { transform: scale(.96); }
.look-row .sw { width: 100%; height: 34px; border-radius: 8px; position: relative; overflow: hidden; }
.look-row .sw i { position: absolute; height: 9px; border-radius: 5px; }
.look-row .sw.beam { background: #f5f5f7; } .look-row .sw.beam i:first-child { left: 6px; top: 7px; width: 45%; background: #e9e9eb; } .look-row .sw.beam i:last-child { right: 6px; bottom: 7px; width: 45%; background: #0b84fe; }
.look-row .sw.whatsapp { background: #efeae2; border-top: 8px solid #008069; } .look-row .sw.whatsapp i:first-child { left: 6px; top: 6px; width: 45%; background: #fff; } .look-row .sw.whatsapp i:last-child { right: 6px; bottom: 6px; width: 45%; background: #d9fdd3; }
.look-row .sw.telegram { background: linear-gradient(160deg, #e6f2fb, #c8e0f3); } .look-row .sw.telegram i:first-child { left: 6px; top: 7px; width: 45%; background: #fff; } .look-row .sw.telegram i:last-child { right: 6px; bottom: 7px; width: 45%; background: #effdde; }
.look-row .sw.snapchat { background: #fff; border-top: 8px solid #fffc00; } .look-row .sw.snapchat i:first-child { left: 8px; top: 7px; width: 3px; height: 8px; background: #0eadff; border-radius: 1px; } .look-row .sw.snapchat i:last-child { left: 8px; bottom: 5px; width: 3px; height: 8px; background: #f23c57; border-radius: 1px; }
.look-row .sw.messenger { background: linear-gradient(160deg, #e7f3ff, #cfe6ff); } .look-row .sw.messenger i:first-child { left: 6px; top: 7px; width: 45%; background: #fff; border-radius: 5px; } .look-row .sw.messenger i:last-child { right: 6px; bottom: 7px; width: 45%; background: #0084ff; border-radius: 5px; }
.look-row .sw.discord { background: #313338; } .look-row .sw.discord i:first-child { left: 6px; top: 7px; width: 3px; height: 20px; background: #5865f2; border-radius: 2px; } .look-row .sw.discord i:last-child { left: 15px; top: 11px; width: 45%; height: 6px; background: #949ba4; border-radius: 3px; }

/* Telegram / WhatsApp: no boxes behind emoji, stickers, media or voice notes */
[data-look="telegram"] .bubble.big, [data-look="whatsapp"] .bubble.big, [data-look="telegram"] .bubble.sticker, [data-look="whatsapp"] .bubble.sticker { box-shadow: none; background: transparent !important; }
[data-look="telegram"] .bubble.img, [data-look="whatsapp"] .bubble.img { box-shadow: none; }
[data-look="telegram"] .bubble.vid, [data-look="whatsapp"] .bubble.vid { border-radius: 12px; }
[data-look="telegram"] .bubble.voice, [data-look="whatsapp"] .bubble.voice { white-space: nowrap; }
[data-look="telegram"] .bubble.voice .meta, [data-look="whatsapp"] .bubble.voice .meta { display: none; }
[data-look="telegram"] .bubble .meta, [data-look="whatsapp"] .bubble .meta { margin-top: 6px; }
[data-look="telegram"] .msg .col { max-width: min(78%, 560px); }
[data-look="telegram"] .bubble.call, [data-look="whatsapp"] .bubble.call { border-radius: 12px; }

/* Snapchat: realer chat rows — Bitmoji circle, status line, camera on the right */
[data-look="snapchat"] .row { grid-template-columns: 14px 52px 1fr 28px; padding: 9px 12px 9px 4px; }
[data-look="snapchat"] .row .r-name { font-size: 15px; }
[data-look="snapchat"] .row .r-time { display: none; }
[data-look="snapchat"] .row::after { content: ""; width: 24px; height: 24px; justify-self: end; background: var(--text-3); opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A1.5 1.5 0 0 1 5.5 7h2.2l1.2-2h6.2l1.2 2h2.2A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-9z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A1.5 1.5 0 0 1 5.5 7h2.2l1.2-2h6.2l1.2 2h2.2A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-9z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-look="snapchat"] .row.person::after, [data-look="snapchat"] .row.call-row::after, [data-look="snapchat"] .suggest .row::after, [data-look="snapchat"] .picks .row::after, [data-look="snapchat"] .members .row::after { display: none; }
[data-look="snapchat"] .row.person, [data-look="snapchat"] .row.call-row { grid-template-columns: 52px 1fr auto; }
[data-look="snapchat"] .avatar { background: linear-gradient(180deg, #fff3a0, #ffe14d); color: #000; font-weight: 700; }
[data-look="snapchat"] .avatar.moji { background: #f2f3f5; }
[data-look="snapchat"] .avatar.group .avatar:last-child { box-shadow: 0 0 0 2px #fff; }
[data-look="snapchat"] .sc-status { font-size: 12px; letter-spacing: .01em; }
[data-look="snapchat"] .sc-status.recv.new, [data-look="snapchat"] .sc-status.sent.new { font-weight: 700; }
[data-look="snapchat"] .pane-head .who .s { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
[data-look="snapchat"] .status { color: var(--text-3); }
[data-look="snapchat"] .msg.out .status { color: #f23c57; }

/* =========================================================================
   Snapchat look: the Bitmoji acts out what the other person is doing.
   Three states, three animations — typing, camera open, and just watching.
   The character is the user's own scanned Bitmoji (avatarFor -> .avatar.moji);
   people without one fall back to initials and still get the motion.
   ========================================================================= */
[data-look="snapchat"] .presence { align-items: flex-end; gap: 4px; }
[data-look="snapchat"] .presence .avatar { width: 46px; height: 46px; font-size: 16px; overflow: visible; }
[data-look="snapchat"] .presence .avatar.moji { background: none; box-shadow: none; }
[data-look="snapchat"] .presence .avatar.moji img { border-radius: 0; object-fit: contain; }

/* Typing: the character leans in and bobs, the way it does on a keyboard. */
@keyframes moji-type { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
[data-look="snapchat"] .presence.typing .avatar { transform-origin: 50% 100%; animation: moji-type 1.1s var(--ease-in-out) infinite; }

/* Camera: a quick shutter bounce, and the badge flashes like a viewfinder. */
@keyframes moji-snap { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-5px) scale(1.06); } 86% { transform: translateY(0) scale(.97); } }
@keyframes cam-flash { 0%, 72%, 100% { box-shadow: 0 0 0 2px var(--bg); } 80% { box-shadow: 0 0 0 2px var(--bg), 0 0 14px 4px rgba(14, 173, 255, .75); } }
[data-look="snapchat"] .presence.cam .avatar { transform-origin: 50% 100%; animation: moji-snap 2.2s var(--ease-out) infinite; }
[data-look="snapchat"] .presence.cam .cam-badge { background: #0eadff; animation: cam-flash 2.2s var(--ease-out) infinite; }

/* Watching: the character peeks up from below the edge of the thread, settles,
   and breathes — Snapchat's "they're in the chat" pose. */
@keyframes moji-peek { 0% { transform: translateY(70%); } 60% { transform: translateY(-4%); } 100% { transform: translateY(0); } }
@keyframes moji-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
[data-look="snapchat"] .presence.here { align-items: flex-end; }
[data-look="snapchat"] .presence.here .avatar {
  animation: moji-peek 620ms var(--ease-drawer) both, moji-breathe 3.4s var(--ease-in-out) 620ms infinite;
}
[data-look="snapchat"] .presence.here .here-dot { align-self: center; }

@media (prefers-reduced-motion: reduce) {
  [data-look="snapchat"] .presence.typing .avatar,
  [data-look="snapchat"] .presence.cam .avatar,
  [data-look="snapchat"] .presence.cam .cam-badge,
  [data-look="snapchat"] .presence.here .avatar { animation: none; transform: none; }
}

/* =========================================================================
   MESSENGER — fully-rounded pill bubbles, one blue accent everywhere
   ========================================================================= */
html[data-look="messenger"] {
  --accent: #0084ff; --brand: #0084ff; --blue: #0084ff; --green: #31a24c;
  --window: #ffffff; --sidebar: #ffffff; --sidebar-border: #e4e6eb; --hairline: #e4e6eb;
  --chat-bg: #ffffff; --chat-tint: none;
  --in-bubble: #f0f0f0; --in-text: #050505; --out-bubble: #0084ff; --out-text: #ffffff;
  --text: #050505; --text-2: #65676b; --text-3: #8a8d91; --search: #f0f2f5; --field: #f0f2f5; --field-border: transparent; --row-hover: #f2f2f2;
  --glass: rgba(255,255,255,.98); --glass-edge: transparent; --glass-line: transparent; --glass-shadow: 0 1px 0 rgba(0,0,0,.06); --glass-blur: none;
  --avatar-a: #a0c4ff; --avatar-b: #0084ff; --sms-bubble: linear-gradient(180deg, #ffd7d4, #ffb8b3);
}
html[data-look="messenger"][data-theme="dark"], html[data-look="messenger"]:not([data-theme="light"]).sysdark {
  --window: #18191a; --sidebar: #18191a; --sidebar-border: #3e4042; --hairline: #3e4042;
  --chat-bg: #18191a; --in-bubble: #3a3b3c; --in-text: #e4e6eb; --out-bubble: #0084ff; --out-text: #fff;
  --text: #e4e6eb; --text-2: #b0b3b8; --text-3: #8a8d91; --search: #3a3b3c; --field: #3a3b3c; --row-hover: #3a3b3c;
  --glass: rgba(24,25,26,.98); --avatar-a: #4f6d9a; --avatar-b: #0084ff; --card: #242526; --card-solid: #242526;
}
[data-look="messenger"] .rail { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); }
[data-look="messenger"] .dock-icon, [data-look="messenger"] .dock-icon.people { background: transparent; box-shadow: none; filter: none; color: var(--text-3); border-radius: 50%; }
[data-look="messenger"] .dock-icon svg path, [data-look="messenger"] .dock-icon svg rect, [data-look="messenger"] .dock-icon svg circle { fill: currentColor; }
[data-look="messenger"] .dock-icon.active { color: #fff; background: linear-gradient(135deg, #00c6ff, #0084ff); }
[data-look="messenger"] .dock-icon::after { display: none; }
[data-look="messenger"] .sb-top h2 { font-weight: 800; letter-spacing: -.01em; font-size: 22px; }
[data-look="messenger"] .search { height: 38px; border-radius: 19px; margin: 6px 12px 10px; }
[data-look="messenger"] .row { border-radius: 0; padding: 8px 14px 8px 4px; }
[data-look="messenger"] .row .avatar { width: 52px; height: 52px; }
[data-look="messenger"] .row .r-name { font-weight: 600; font-size: 15.5px; }
[data-look="messenger"] .row.active { background: var(--row-hover); box-shadow: none; }
[data-look="messenger"] .row .dot { opacity: 0; }
[data-look="messenger"] .pane-head { top: 0; left: 0; right: 0; border-radius: 0; height: 58px; background: var(--glass); box-shadow: 0 1px 0 var(--hairline); }
[data-look="messenger"] .pane-head::before { display: none; }
[data-look="messenger"] .pane-head .who .n { font-weight: 700; font-size: 15.5px; }
[data-look="messenger"] .pane-head .ft-btn, [data-look="messenger"] .pane-head .icon-btn { background: transparent; color: var(--accent); box-shadow: none; }
[data-look="messenger"] .pane-head .ft-btn span { display: none; }
[data-look="messenger"] .thread { padding-top: 74px; padding-bottom: 84px; }
[data-look="messenger"] .bubble { border-radius: 18px; padding: 8px 14px; font-size: 15px; box-shadow: none; }
[data-look="messenger"] .bubble.tail::before, [data-look="messenger"] .bubble.tail::after { display: none; }
[data-look="messenger"] .msg.out .bubble { background: linear-gradient(135deg, #00c6ff, #0084ff); }
[data-look="messenger"] .msg .col { max-width: min(72%, 560px); }
[data-look="messenger"] .stamp { font-weight: 600; font-size: 12px; }
[data-look="messenger"] .sender { color: var(--text-3); font-weight: 600; font-size: 11.5px; margin-left: 12px; }
[data-look="messenger"] .composer-wrap { left: 0; right: 0; bottom: 0; }
[data-look="messenger"] .composer { border-radius: 0; background: var(--sidebar); box-shadow: 0 -1px 0 var(--hairline); padding: 8px 12px; }
[data-look="messenger"] .composer::before { display: none; }
[data-look="messenger"] .field-wrap { border-radius: 22px; background: var(--field); box-shadow: none; min-height: 40px; }
[data-look="messenger"] .field-wrap textarea { padding: 10px 44px 10px 16px; }
[data-look="messenger"] .composer .plus { background: var(--field); color: var(--accent); }
[data-look="messenger"] .send, [data-look="messenger"] .send.sms { background: linear-gradient(135deg, #00c6ff, #0084ff); box-shadow: none; }
[data-look="messenger"] .field-wrap .mic { color: var(--accent); }
[data-look="messenger"] .ft-new { background: var(--accent); border-radius: 24px; box-shadow: none; }
[data-look="messenger"] .toggle.on { background: var(--accent); }
[data-look="messenger"] .primary { background: linear-gradient(135deg, #00c6ff, #0084ff); box-shadow: none; border-radius: 24px; }
[data-look="messenger"] .chip { background: rgba(0,132,255,.12); color: var(--accent); }
[data-look="messenger"] .avatar { background: linear-gradient(180deg, var(--avatar-a), var(--avatar-b)); text-shadow: none; }
[data-look="messenger"] .typing .tb { background: var(--in-bubble); border-radius: 18px; }
[data-look="messenger"] .typing .tb::before, [data-look="messenger"] .typing .tb::after { display: none; }
[data-look="messenger"] .install-tip .it-icon, [data-look="messenger"] .app-icon { background: linear-gradient(135deg, #00c6ff, #0084ff); box-shadow: none; }
[data-look="messenger"] .r-badge { display: inline-grid; place-items: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }

/* =========================================================================
   DISCORD — no bubbles, flush messages with a colored username, dark by default
   ========================================================================= */
html[data-look="discord"] {
  --accent: #5865f2; --brand: #5865f2; --blue: #5865f2; --green: #23a55a; --red: #f23f42;
  --window: #313338; --sidebar: #2b2d31; --sidebar-border: #1e1f22; --hairline: #3f4147;
  --chat-bg: #313338; --chat-tint: none;
  --in-bubble: transparent; --in-text: #dbdee1; --out-bubble: transparent; --out-text: #dbdee1;
  --text: #dbdee1; --text-2: #b5bac1; --text-3: #949ba4; --search: #1e1f22; --field: #383a40; --field-border: transparent; --row-hover: #35373c;
  --glass: rgba(49,51,56,.98); --glass-edge: transparent; --glass-line: transparent; --glass-shadow: none; --glass-blur: none;
  --avatar-a: #949cf7; --avatar-b: #5865f2; --sms-bubble: transparent; --card: #2b2d31; --card-solid: #2b2d31;
}
/* Discord's light theme swaps the panel colors but keeps blurple as the one accent. */
html[data-look="discord"][data-theme="light"] {
  --window: #ffffff; --sidebar: #f2f3f5; --sidebar-border: #e3e5e8; --hairline: #e3e5e8;
  --chat-bg: #ffffff; --in-text: #060607; --out-text: #060607;
  --text: #060607; --text-2: #4e5058; --text-3: #6d6f78; --search: #e3e5e8; --field: #ebedef; --row-hover: #f2f3f5;
  --glass: rgba(255,255,255,.98); --card: #f2f3f5; --card-solid: #f2f3f5;
}
[data-look="discord"] .rail { background: var(--sidebar-border); border-right: 0; }
[data-look="discord"] .dock-icon, [data-look="discord"] .dock-icon.people { background: var(--window); box-shadow: none; filter: none; color: var(--text-2); border-radius: 16px; }
[data-look="discord"] .dock-icon svg path, [data-look="discord"] .dock-icon svg rect, [data-look="discord"] .dock-icon svg circle { fill: currentColor; }
[data-look="discord"] .dock-icon.active { color: #fff; background: var(--accent); border-radius: 14px; }
[data-look="discord"] .dock-icon::after { display: none; }
[data-look="discord"] .sb-top h2 { font-weight: 700; font-size: 18px; }
[data-look="discord"] .search { height: 34px; border-radius: 4px; background: var(--search); }
[data-look="discord"] .row { border-radius: 4px; padding: 8px 8px 8px 4px; }
[data-look="discord"] .row.active { background: var(--field); box-shadow: none; }
[data-look="discord"] .row .dot { opacity: 0; }
[data-look="discord"] .r-badge { display: inline-grid; place-items: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; }
[data-look="discord"] .pane-head { top: 0; left: 0; right: 0; border-radius: 0; height: 48px; background: var(--window); box-shadow: 0 1px 0 var(--hairline); }
[data-look="discord"] .pane-head::before { display: none; }
[data-look="discord"] .pane-head .who .n { font-weight: 700; font-size: 15px; }
[data-look="discord"] .pane-head .ft-btn, [data-look="discord"] .pane-head .icon-btn { background: transparent; color: var(--text-2); box-shadow: none; }
[data-look="discord"] .pane-head .ft-btn span { display: none; }
[data-look="discord"] .thread { padding: 62px 16px 78px; }
/* No bubble container at all — flush text, a bold colored sender name above every
   new run, the same reduced-chrome idea the Snapchat look already uses, just without
   the CAPS/underline treatment (Discord messages read as sentence case). */
[data-look="discord"] .msg, [data-look="discord"] .msg.out { justify-content: flex-start; margin-top: 1px; }
[data-look="discord"] .msg .col, [data-look="discord"] .msg.out .col { max-width: 100%; width: 100%; align-items: flex-start; }
[data-look="discord"] .msg.gap { margin-top: 16px; }
[data-look="discord"] .msg.gap .col::before { content: attr(data-sender); display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 3px 4px; color: var(--accent); }
[data-look="discord"] .msg.out.gap .col::before { color: #ed8a2b; }
[data-look="discord"] .bubble { background: transparent !important; border-radius: 4px; padding: 2px 4px; font-size: 15px; box-shadow: none; color: var(--text); }
[data-look="discord"] .bubble:hover { background: rgba(0,0,0,.08) !important; }
html[data-look="discord"][data-theme="light"] .bubble:hover { background: rgba(0,0,0,.04) !important; }
[data-look="discord"] .bubble.tail::before, [data-look="discord"] .bubble.tail::after { display: none; }
[data-look="discord"] .bubble.img img, [data-look="discord"] .bubble.vid { border-radius: 8px; }
[data-look="discord"] .bubble.voice, [data-look="discord"] .bubble.call { background: var(--field) !important; border-radius: 8px; margin-left: 4px; color: var(--text); }
[data-look="discord"] .sender { display: none; }
[data-look="discord"] .status { margin-left: 6px; color: var(--text-3); }
[data-look="discord"] .stamp { font-weight: 600; font-size: 11.5px; color: var(--text-3); }
[data-look="discord"] .reacts { position: static; margin: 2px 0 0 4px; }
[data-look="discord"] .react { background: var(--field) !important; box-shadow: none; border-radius: 8px; }
[data-look="discord"] .react.mine { background: rgba(88,101,242,.22) !important; box-shadow: inset 0 0 0 1px var(--accent); }
[data-look="discord"] .composer-wrap { left: 12px; right: 12px; bottom: 12px; }
[data-look="discord"] .composer { border-radius: 8px; background: var(--field); box-shadow: none; padding: 8px 10px; }
[data-look="discord"] .composer::before { display: none; }
[data-look="discord"] .field-wrap { background: transparent; box-shadow: none; }
[data-look="discord"] .field-wrap textarea { padding: 8px 44px 8px 4px; }
[data-look="discord"] .composer .plus { background: transparent; color: var(--text-2); }
[data-look="discord"] .send, [data-look="discord"] .send.sms { background: var(--accent); box-shadow: none; }
[data-look="discord"] .field-wrap .mic { color: var(--text-2); }
[data-look="discord"] .ft-new { background: var(--accent); border-radius: 8px; box-shadow: none; }
[data-look="discord"] .toggle.on { background: var(--accent); }
[data-look="discord"] .primary { background: var(--accent); box-shadow: none; border-radius: 4px; }
[data-look="discord"] .chip { background: rgba(88,101,242,.18); color: #949cf7; }
[data-look="discord"] .avatar { background: linear-gradient(180deg, var(--avatar-a), var(--avatar-b)); color: #fff; text-shadow: none; border-radius: 50%; }
[data-look="discord"] .typing .tb { background: var(--field); border-radius: 8px; }
[data-look="discord"] .typing .tb::before, [data-look="discord"] .typing .tb::after { display: none; }
[data-look="discord"] .install-tip .it-icon, [data-look="discord"] .app-icon { background: var(--accent); box-shadow: none; }

/* =========================================================================
   FIDELITY PASS — the details that make each look read as the real app.
   Appended last on purpose: these win the source-order tie against the
   base rules above.
   ========================================================================= */

/* The unread count lives in the preview line; only the looks that use a
   counter show it, and those hide the dot instead. */
.r-badge { display: none; }
.row .r-preview { position: relative; }

/* -------------------------------------------------------------------------
   WHATSAPP
   ------------------------------------------------------------------------- */

/* WhatsApp's header carries plain white glyphs — no coloured call pill. */
[data-look="whatsapp"] .pane-head .ft-btn { background: transparent; box-shadow: none; color: #fff; padding: 0 6px; }
[data-look="whatsapp"] .pane-head .ft-btn span { display: none; }
[data-look="whatsapp"] .pane-head .actions { gap: 6px; }
[data-look="whatsapp"] .pane-head .who .n { font-size: 16.5px; font-weight: 500; }

/* List rows: 17px names, a hairline that starts past the avatar, and a green
   counter instead of a dot. */
[data-look="whatsapp"] .row { padding: 10px 14px 10px 4px; }
[data-look="whatsapp"] .row .r-name { font-size: 17px; font-weight: 400; }
/* Reserve room for the widest counter ("99+" is ~37px), not just two digits — at 26px
   the badge sat on top of the preview text. */
[data-look="whatsapp"] .row .r-preview { font-size: 14px; -webkit-line-clamp: 1; padding-right: 44px; }
[data-look="whatsapp"] .row .r-time { font-size: 12px; }
[data-look="whatsapp"] .row::after {
  content: ""; position: absolute; left: 70px; right: 0; bottom: 0; height: 1px; background: var(--hairline);
}
[data-look="whatsapp"] .row:last-child::after { display: none; }
/* Never display:none a grid item here — the row is `grid-template-columns: 14px 46px 1fr`
   and removing the dot shifts the avatar into the 14px track, crushing the whole row. */
[data-look="whatsapp"] .row .dot { opacity: 0; }
[data-look="whatsapp"] .r-badge {
  display: inline-grid; place-items: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #111b21; font-size: 12px; font-weight: 600; line-height: 1;
}
[data-look="whatsapp"][data-theme="dark"] .r-badge { color: #111b21; }

[data-look="whatsapp"] .bubble { border-radius: 7.5px; }

/* -------------------------------------------------------------------------
   TELEGRAM
   ------------------------------------------------------------------------- */
/* Telegram's wallpaper is a pattern of small solid glyphs sitting on a blue
   gradient, not a flat wash. */
[data-look="telegram"] .pane::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23000' fill-opacity='.05'%3E%3Cpath d='M30 22c-5-5-13-1-13 6 0 6 8 12 13 16 5-4 13-10 13-16 0-7-8-11-13-6z'/%3E%3Ccircle cx='86' cy='26' r='9'/%3E%3Cpath d='M140 14l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z'/%3E%3Crect x='176' y='16' width='18' height='18' rx='5'/%3E%3Cpath d='M18 74h22a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-9l-7 6v-6h-6a4 4 0 0 1-4-4V78a4 4 0 0 1 4-4z'/%3E%3Cpath d='M86 68l10 18H76z'/%3E%3Ccircle cx='140' cy='80' r='10'/%3E%3Cpath d='M172 70c-4-4-11-1-11 5 0 5 7 11 11 14 4-3 11-9 11-14 0-6-7-9-11-5z'/%3E%3Crect x='14' y='126' width='20' height='20' rx='6'/%3E%3Cpath d='M82 120l3 7 8 1-6 6 2 8-7-4-7 4 2-8-6-6 8-1z'/%3E%3Cpath d='M132 124h24a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4h-10l-8 6v-6h-6a4 4 0 0 1-4-4v-10a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='188' cy='134' r='8'/%3E%3Cpath d='M28 170l11 18H17z'/%3E%3Ccircle cx='84' cy='180' r='9'/%3E%3Cpath d='M138 168c-4-4-11-1-11 5 0 5 7 11 11 14 4-3 11-9 11-14 0-6-7-9-11-5z'/%3E%3Crect x='178' y='172' width='18' height='18' rx='5'/%3E%3C/g%3E%3C/svg%3E"),
    var(--chat-tint);
  background-size: 200px 200px, cover; opacity: 1;
}
[data-look="telegram"][data-theme="dark"] .pane::before, [data-look="telegram"]:not([data-theme="light"]).sysdark .pane::before { background-blend-mode: overlay, normal; }

/* Header: white bar, blue glyphs, no call pill. */
[data-look="telegram"] .pane-head .ft-btn { color: var(--accent); }
[data-look="telegram"] .pane-head .icon-btn { color: var(--accent); }
[data-look="telegram"] .pane-head .who .n { font-weight: 600; font-size: 16px; }
[data-look="telegram"] .pane-head .who .s { font-size: 13px; color: var(--text-2); }
[data-look="telegram"] .back { color: var(--accent); }

/* Rows: bigger avatars, blue counter pill. */
[data-look="telegram"] .row .avatar { width: 54px; height: 54px; font-size: 20px; }
[data-look="telegram"] .row .r-name { font-size: 16px; }
[data-look="telegram"] .row .r-preview { font-size: 14.5px; -webkit-line-clamp: 2; padding-right: 44px; }
[data-look="telegram"] .row.unread .r-time::after { display: none; }
[data-look="telegram"] .r-badge {
  display: inline-grid; place-items: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1;
}
[data-look="telegram"] .row.active .r-badge { background: #fff; color: var(--accent); }

/* -------------------------------------------------------------------------
   SNAPCHAT
   ------------------------------------------------------------------------- */
/* The chat screen's chrome is white; the yellow belongs to the app frame. */
[data-look="snapchat"] .pane-head { background: var(--sidebar); box-shadow: 0 1px 0 var(--hairline); }
[data-look="snapchat"] .pane-head .ft-btn { background: var(--brand); color: #000; }
[data-look="snapchat"] .pane-head .who .n { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
[data-look="snapchat"] .pane-head .who .s { display: none; }
/* The status glyphs (filled arrow = sent, hollow = opened, square = received) are
   already implemented correctly in style.css — do not override them here. */
[data-look="snapchat"] .row .r-preview { padding-right: 0; }
[data-look="snapchat"] .r-badge { display: none; }
[data-look="snapchat"] .row .avatar { width: 52px; height: 52px; }

/* -------------------------------------------------------------------------
   BEAM keeps the house style; it is the one look that is not an impression
   of somebody else's app.
   ------------------------------------------------------------------------- */
[data-look="beam"] .r-badge, html:not([data-look]) .r-badge { display: none; }

/* WhatsApp's wallpaper is a faint scatter of little line drawings of *things* —
   a cup, a plane, a heart, a bulb. Abstract triangles and diamonds read as noise
   and make the whole chat look busy, which is what the first attempt did. These
   are objects, rotated irregularly so the tile does not read as a grid, at about
   half the contrast of the first pass. */
[data-look="whatsapp"] .pane::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.038' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(10,12) rotate(-12,12,12)'%3E%3Cpath d='M12 21c-5-4-9-7-9-11a4.5 4.5 0 0 1 9-2 4.5 4.5 0 0 1 9 2c0 4-4 7-9 11z'/%3E%3C/g%3E%3Cg transform='translate(74,6) rotate(18,12,12)'%3E%3Cpath d='M4 7h12v7a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 9h2a2.5 2.5 0 0 1 0 5h-2'/%3E%3Cpath d='M3 22h15'/%3E%3C/g%3E%3Cg transform='translate(136,14) rotate(-6,12,12)'%3E%3Cpath d='M2 11l19-7-6 17-4-7z'/%3E%3C/g%3E%3Cg transform='translate(198,8) rotate(14,12,12)'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/%3E%3C/g%3E%3Cg transform='translate(256,16) rotate(-20,12,12)'%3E%3Cpath d='M9 19V5l11-2v12'/%3E%3Ccircle cx='6.5' cy='19' r='2.6'/%3E%3Ccircle cx='17.5' cy='15' r='2.6'/%3E%3C/g%3E%3Cg transform='translate(34,68) rotate(10,12,12)'%3E%3Crect x='2' y='7' width='20' height='13' rx='2.5'/%3E%3Ccircle cx='12' cy='13.5' r='4'/%3E%3Cpath d='M8 7l1.5-3h5L16 7'/%3E%3C/g%3E%3Cg transform='translate(100,74) rotate(-16,12,12)'%3E%3Cpath d='M2 12a10 10 0 0 1 20 0z'/%3E%3Cpath d='M12 12v7a2.5 2.5 0 0 0 5 0'/%3E%3C/g%3E%3Cg transform='translate(164,66) rotate(8,12,12)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2.5'/%3E%3C/g%3E%3Cg transform='translate(226,72) rotate(-10,12,12)'%3E%3Cpath d='M12 3c3.5 0 6 2.6 6 6 0 2.4-1.4 3.6-2.2 4.8-.6.9-.8 1.6-.8 2.7h-6c0-1.1-.2-1.8-.8-2.7C7.4 12.6 6 11.4 6 9c0-3.4 2.5-6 6-6z'/%3E%3Cpath d='M10 20h4'/%3E%3C/g%3E%3Cg transform='translate(6,128) rotate(16,12,12)'%3E%3Cpath d='M3 20V6a12 12 0 0 1 9 2 12 12 0 0 1 9-2v14a12 12 0 0 0-9 2 12 12 0 0 0-9-2z'/%3E%3Cpath d='M12 8v14'/%3E%3C/g%3E%3Cg transform='translate(68,134) rotate(-8,12,12)'%3E%3Cpath d='M12 3c3.9 0 7 3.1 7 7 0 4-4.4 6.6-7 9-2.6-2.4-7-5-7-9 0-3.9 3.1-7 7-7z'/%3E%3Cpath d='M12 19v3'/%3E%3C/g%3E%3Cg transform='translate(132,126) rotate(20,12,12)'%3E%3Crect x='3' y='9' width='18' height='12' rx='1.5'/%3E%3Cpath d='M3 13h18M12 9v12'/%3E%3Cpath d='M12 9c-2-3-6-4-6-1.5S10 9 12 9zM12 9c2-3 6-4 6-1.5S14 9 12 9z'/%3E%3C/g%3E%3Cg transform='translate(196,132) rotate(-14,12,12)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 10h.01M15 10h.01M8.5 14.5a5 5 0 0 0 7 0'/%3E%3C/g%3E%3Cg transform='translate(258,124) rotate(12,12,12)'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 7l10 7 10-7'/%3E%3C/g%3E%3Cg transform='translate(20,188) rotate(-18,12,12)'%3E%3Ccircle cx='8' cy='8' r='4.5'/%3E%3Cpath d='M11 11l9 9M17 17l2.5-2.5M20 20l2-2'/%3E%3C/g%3E%3Cg transform='translate(84,194) rotate(6,12,12)'%3E%3Ccircle cx='6' cy='16' r='4.5'/%3E%3Ccircle cx='18' cy='16' r='4.5'/%3E%3Cpath d='M6 16l5-8h6M11 8l4 8'/%3E%3C/g%3E%3Cg transform='translate(148,186) rotate(-6,12,12)'%3E%3Cpath d='M3 18h18l-2-7H5z'/%3E%3Cpath d='M12 11V4M12 4l6 3'/%3E%3C/g%3E%3Cg transform='translate(210,192) rotate(16,12,12)'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='17' cy='14' r='4'/%3E%3Cpath d='M11 13h2M3 12l1-3M21 12l-1-3'/%3E%3C/g%3E%3Cg transform='translate(268,182) rotate(-12,12,12)'%3E%3Cpath d='M20 14a4.5 4.5 0 0 0-2-8.5A6.5 6.5 0 0 0 5.5 8 4.5 4.5 0 0 0 6 17h13a3 3 0 0 0 1-3z'/%3E%3C/g%3E%3Cg transform='translate(8,246) rotate(8,12,12)'%3E%3Cpath d='M12 4a8 8 0 1 0 8 8 6 6 0 0 1-8-8z'/%3E%3C/g%3E%3Cg transform='translate(70,252) rotate(-16,12,12)'%3E%3Cpath d='M5 21V9l7-6 7 6v12z'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/g%3E%3Cg transform='translate(134,244) rotate(14,12,12)'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M12 10v9M8 13h8M9 19h6'/%3E%3C/g%3E%3Cg transform='translate(196,250) rotate(-8,12,12)'%3E%3Cpath d='M4 20c2-6 5-9 8-9s6 3 8 9z'/%3E%3Cpath d='M12 11V5M9 7l3-3 3 3'/%3E%3C/g%3E%3Cg transform='translate(258,242) rotate(18,12,12)'%3E%3Cpath d='M12 4l2.4 5.2 5.6.7-4.1 3.9 1.1 5.6L12 16.7 6.9 19.4 8 13.8 3.9 9.9l5.7-.7z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px; opacity: 1;
}
[data-look="whatsapp"][data-theme="dark"] .pane::before, [data-look="whatsapp"]:not([data-theme="light"]).sysdark .pane::before { filter: invert(1) brightness(2.2); opacity: .38; }

/* The send button is its own circle sitting beside the pill, not floating on top
   of it. .field-wrap is overflow:visible and position:relative, so a negative
   offset puts the button in the gap the margin reserves. */
[data-look="whatsapp"] .field-wrap { margin-right: 52px; }
[data-look="whatsapp"] .send, [data-look="whatsapp"] .send.sms {
  right: -52px; bottom: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: none;
}
[data-look="whatsapp"] .send svg { width: 21px; height: 21px; }
[data-look="whatsapp"] .field-wrap .mic { right: 14px; bottom: 11px; }