/* Chat looks: make a blog look exactly like a WhatsApp group (wa_group), a Telegram group (tg_group) or a WhatsApp channel (wa_channel).
   Chosen per blog (Customize > Chat Style, or when creating a blog from a design). Only blogs that choose one of these get restyled. Loaded after main.css. */

/* ---------- shared: each post becomes ONE chat bubble with its sender name (top) and time (bottom right) inside ---------- */
body[data-chat-look="wa_group"] .bm-thread .bm-post,
body[data-chat-look="tg_group"] .bm-thread .bm-post,
body[data-chat-look="wa_channel"] .bm-thread .bm-post {
  display: grid !important; position: relative; width: min(100%, 560px) !important; max-width: 100% !important; margin: 0 auto 3px !important;
  grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "av bub" ". react" ". share" ". foot"; column-gap: 6px; row-gap: 0; align-items: start;
}
body[data-chat-look="wa_channel"] .bm-thread .bm-post { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "bub share" "react ." "foot ."; column-gap: 8px; }
body[data-chat-look] { --bmc-pad: 9px; }
body[data-chat-look="tg_group"], body[data-chat-look="wa_channel"] { --bmc-pad: 10px; }
body[data-chat-look] .bm-thread { gap: 0 !important; padding: 8px 10px 0 !important; align-items: stretch !important; }
body[data-chat-look] .bm-post-avatar { grid-area: av; align-self: end; margin: 0 !important; }
body[data-chat-look] .bm-post-avatar img, body[data-chat-look] .bm-post-avatar .w-10 { width: 34px !important; height: 34px !important; font-size: .75rem !important; display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; }
body[data-chat-look="wa_channel"] .bm-post-avatar { display: none !important; }
body[data-chat-look] .bm-post-bubble { grid-area: bub; }
body[data-chat-look] .bm-post-bubble.chat-bubble { position: relative; border: 0 !important; box-shadow: 0 1px .5px rgba(11, 20, 26, .13) !important; transform: none !important; background: #fff !important; color: #111b21 !important; padding: 6px var(--bmc-pad) 20px !important; overflow: visible !important; min-width: 0 !important; max-width: 100% !important; }
body[data-chat-look] .bm-post-bubble.chat-bubble:hover { transform: none !important; box-shadow: 0 1px .5px rgba(11, 20, 26, .13) !important; border: 0 !important; }
body[data-chat-look] .bm-post-bubble.chat-bubble::before { display: block !important; content: attr(data-sender); font-weight: 600; font-size: .8rem; line-height: 1.2; margin-bottom: 2px; width: auto; height: auto; position: static; background: none; clip-path: none; }
body[data-chat-look="wa_channel"] .bm-post-bubble.chat-bubble::before { display: none !important; }
body[data-chat-look] .bm-post-bubble h2 { font-size: .95rem !important; margin: 0 0 2px !important; color: inherit !important; line-height: 1.25 !important; }
body[data-chat-look] .bm-post-bubble p, body[data-chat-look] .bm-post-bubble figcaption { color: inherit !important; }
body[data-chat-look] .bm-post-bubble figure:has(.bm-post-media-img, .bm-post-media-video, .bm-album) { margin-left: calc(var(--bmc-pad) * -1) !important; margin-right: calc(var(--bmc-pad) * -1) !important; margin-top: 2px !important; width: auto !important; max-width: none !important; overflow: hidden !important; border-radius: 6px !important; }
body[data-chat-look] .bm-post-bubble .bm-post-media-img, body[data-chat-look] .bm-post-bubble .bm-post-media-video { border-radius: 6px !important; }
/* the time sits INSIDE the bubble, bottom right (it is the header's <time>; the sender name is drawn by the bubble itself) */
body[data-chat-look] .bm-post-header { grid-area: bub; align-self: end; justify-self: end; font-size: 0 !important; margin: 0 9px 3px 0 !important; padding: 0 !important; z-index: 2; pointer-events: none; opacity: 1 !important; gap: 0 !important; }
body[data-chat-look] .bm-post-header time { font-size: 11px !important; opacity: 1 !important; color: #667781; }
body[data-chat-look] .bm-reactions-bar { grid-area: react; justify-content: flex-start !important; margin: -9px 0 4px 10px !important; gap: 4px !important; position: relative; z-index: 3; }
body[data-chat-look] .bm-reaction-btn { background: #fff !important; border: 1px solid #e9edef !important; border-radius: 13px !important; padding: 0 7px !important; font-size: 11.5px !important; line-height: 22px !important; height: 24px !important; display: inline-flex !important; align-items: center; gap: 3px; color: #54656f !important; box-shadow: 0 1px 2px rgba(11, 20, 26, .18); }
body[data-chat-look] .bm-reaction-btn.active { background: #d9fdd3 !important; border-color: #8ed987 !important; color: #111b21 !important; }
body[data-chat-look] .bm-share-row { grid-area: share; margin: 0 !important; padding: 0 !important; text-align: left; }
body[data-chat-look] .bm-share-btn { background: transparent !important; border: 0 !important; color: #8696a0 !important; font-size: 11px !important; padding: 0 0 4px 10px !important; gap: 4px !important; box-shadow: none !important; }
body[data-chat-look] .bm-post-footer { grid-area: foot; font-size: 11px !important; justify-content: flex-start !important; padding-left: 10px; color: #8696a0; }
body[data-chat-look] .bm-ad-slot, body[data-chat-look] .bm-comments { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
body[data-chat-look] .bm-pinned-bar { max-width: 560px; margin-left: auto; margin-right: auto; }

/* the blog's top bar becomes the chat's top bar */
body[data-chat-look] .bm-hero { display: flex !important; align-items: center; gap: 12px; padding: 9px 14px !important; text-align: left !important; border-radius: 0 !important; position: sticky; top: 0; z-index: 30; margin: 0 !important; min-height: 58px; }
body[data-chat-look] .bm-hero h1 { font-size: 1.02rem !important; line-height: 1.2; margin: 0 !important; font-weight: 600; letter-spacing: 0 !important; font-family: inherit !important; }
body[data-chat-look] .bm-hero .subtitle { font-size: .76rem !important; margin: 1px 0 0 !important; line-height: 1.2; }
body[data-chat-look] .bm-hero .bm-hero-logo, body[data-chat-look] .bm-hero-initial { width: 40px !important; height: 40px !important; max-width: 40px !important; margin: 0 !important; flex: none; }
body[data-chat-look] .bm-hero-initial { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
body[data-chat-look] .bm-hero-text { min-width: 0; flex: 1; }
body[data-chat-look] .bm-group-menu-toggle { position: static !important; margin-left: auto; order: 9; color: inherit !important; background: transparent !important; border: 0 !important; }
body[data-chat-look] .bm-chan-follow { display: none; }

/* ======================= WhatsApp GROUP ======================= */
body[data-chat-look="wa_group"] { background-color: #efeae2 !important; background-image: radial-gradient(rgba(11, 20, 26, .045) 1.2px, transparent 1.2px) !important; background-size: 20px 20px !important; background-attachment: scroll !important; }
body[data-chat-look="wa_group"] .bm-hero { background: #008069 !important; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
body[data-chat-look="wa_group"] .bm-hero h1, body[data-chat-look="wa_group"] .bm-hero .subtitle { color: #fff !important; }
body[data-chat-look="wa_group"] .bm-hero .subtitle { opacity: .82; }
body[data-chat-look="wa_group"] .bm-post-bubble.chat-bubble { border-radius: 0 7.5px 7.5px 7.5px !important; font-size: 14.2px; line-height: 19px; }
body[data-chat-look="wa_group"] .bm-post-bubble.chat-bubble::before { color: #00a884; }
body[data-chat-look="wa_group"] .bm-thread .bm-post:first-child .bm-post-bubble.chat-bubble::after { content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #fff transparent transparent; }
body[data-chat-look="wa_group"] .bm-thread > .bm-post { margin-bottom: 4px !important; }

/* ======================= Telegram GROUP ======================= */
body[data-chat-look="tg_group"] { background: linear-gradient(135deg, #cfe3b9 0%, #a9d1b2 38%, #8cc3bc 68%, #82b5d8 100%) fixed !important; }
body[data-chat-look="tg_group"] .bm-hero { background: #fff !important; color: #000; border-bottom: 1px solid #dfe1e5; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body[data-chat-look="tg_group"] .bm-hero h1 { color: #000 !important; font-weight: 700; }
body[data-chat-look="tg_group"] .bm-hero .subtitle { color: #707579 !important; }
body[data-chat-look="tg_group"] .bm-hero .bm-group-menu-toggle { color: #707579 !important; }
body[data-chat-look="tg_group"] .bm-post-avatar { display: block !important; }
body[data-chat-look="tg_group"] .bm-post-bubble.chat-bubble { border-radius: 15px 15px 15px 4px !important; font-size: 15px; line-height: 20px; box-shadow: 0 1px 2px rgba(16, 35, 47, .22) !important; }
body[data-chat-look="tg_group"] .bm-post-bubble.chat-bubble::before { color: #3390ec; font-weight: 700; font-size: .84rem; }
body[data-chat-look="tg_group"] .bm-post-header time { color: #a0acb6; }
body[data-chat-look="tg_group"] .bm-thread .bm-post .bm-post-bubble.chat-bubble::after { content: ""; position: absolute; bottom: 0; left: -7px; width: 12px; height: 14px; background: #fff; clip-path: path("M12 0 L12 14 L0 14 C 6 13, 10 8, 12 0 Z"); }
body[data-chat-look="tg_group"] .bm-reactions-bar { margin: 3px 0 4px 4px !important; }
body[data-chat-look="tg_group"] .bm-reaction-btn { background: rgba(255, 255, 255, .85) !important; border: 0 !important; color: #3390ec !important; border-radius: 15px !important; font-weight: 600; padding: 2px 9px !important; box-shadow: none !important; }
body[data-chat-look="tg_group"] .bm-reaction-btn.active { background: #3390ec !important; color: #fff !important; }
body[data-chat-look="tg_group"] .bm-share-btn { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
body[data-chat-look="tg_group"] .bm-post-footer { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* ======================= WhatsApp CHANNEL ======================= */
body[data-chat-look="wa_channel"] { background-color: #efeae2 !important; background-image: radial-gradient(rgba(11, 20, 26, .045) 1.2px, transparent 1.2px) !important; background-size: 20px 20px !important; background-attachment: scroll !important; }
body[data-chat-look="wa_channel"] .bm-hero { background: #fff !important; color: #111b21; box-shadow: 0 1px 0 #e9edef; }
body[data-chat-look="wa_channel"] .bm-hero h1 { color: #111b21 !important; display: flex; align-items: center; gap: 5px; }
body[data-chat-look="wa_channel"] .bm-hero h1::after { content: ""; width: 17px; height: 17px; flex: none; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2325d366' d='M12 1l2.6 1.9 3.2-.1 1 3 2.6 1.9-1 3.1 1 3.1-2.6 1.9-1 3-3.2-.1L12 22l-2.6-1.9-3.2.1-1-3L2.6 15.3l1-3.1-1-3.1 2.6-1.9 1-3 3.2.1z'/><path fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M8 12.3l2.6 2.6L16 9.5'/></svg>"); }
body[data-chat-look="wa_channel"] .bm-hero .subtitle { color: #667781 !important; }
body[data-chat-look="wa_channel"] .bm-hero .bm-group-menu-toggle { display: none !important; }
body[data-chat-look="wa_channel"] .bm-chan-follow { display: inline-flex; margin-left: auto; align-items: center; gap: 6px; background: #25d366; color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: .85rem; cursor: pointer; flex: none; }
body[data-chat-look="wa_channel"] .bm-chan-follow.on { background: #e9edef; color: #54656f; }
body[data-chat-look="wa_channel"] .bm-post-bubble.chat-bubble { border-radius: 8px !important; font-size: 14.5px; line-height: 20px; padding: 7px var(--bmc-pad) 22px !important; }
body[data-chat-look="wa_channel"] .bm-post-header { margin-right: 10px !important; }
body[data-chat-look="wa_channel"] .bm-thread .bm-post { margin-bottom: 14px !important; }
body[data-chat-look="wa_channel"] .bm-reactions-bar { margin: -12px 0 0 8px !important; }
body[data-chat-look="wa_channel"] .bm-reaction-btn { border: 0 !important; box-shadow: 0 1px 3px rgba(11, 20, 26, .22); font-size: 13px !important; padding: 2px 8px !important; }
body[data-chat-look="wa_channel"] .bm-share-row { align-self: center; justify-self: center; }
body[data-chat-look="wa_channel"] .bm-share-btn { width: 34px; height: 34px; border-radius: 50% !important; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 1px 3px rgba(11, 20, 26, .2) !important; justify-content: center; padding: 0 !important; color: #54656f !important; }
body[data-chat-look="wa_channel"] .bm-share-btn span { display: none; }
body[data-chat-look="wa_channel"] .bm-post-footer { grid-area: bub; align-self: end; justify-self: end; margin: 0 56px 4px 0; padding: 0; z-index: 2; color: #667781; font-size: 11px !important; pointer-events: none; }
body[data-chat-look="wa_channel"] .bm-post-footer i, body[data-chat-look="wa_channel"] .bm-post-footer svg { display: none; }
body[data-chat-look="wa_channel"] .bm-post-footer::before { content: "\1F441"; font-size: 11px; margin-right: 3px; }
@media (max-width: 640px) { body[data-chat-look] .bm-thread .bm-post { width: 100% !important; } body[data-chat-look] .bm-thread { padding: 8px 8px 0 !important; } }

body[data-chat-look] .bm-reaction-btn > span:first-child { font-size: 14px !important; line-height: 1 !important; }
body[data-chat-look] .bm-reaction-btn .bm-reaction-count { font-size: 11px !important; color: inherit !important; opacity: .85; }
body[data-chat-look] .bm-reaction-btn img, body[data-chat-look] .bm-reaction-btn svg { width: 15px !important; height: 15px !important; }
/* polls inside a chat bubble: light and compact like a real chat poll */
body[data-chat-look] .bm-poll { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 0 !important; }
body[data-chat-look] .bm-poll-option, body[data-chat-look] .bm-poll button { background: #fff !important; color: #111b21 !important; border: 1px solid #d1d7db !important; border-radius: 8px !important; box-shadow: none !important; padding: 7px 11px !important; font-size: 13.5px !important; margin: 3px 0 !important; text-align: left; width: 100%; }
body[data-chat-look] .bm-poll-option:hover, body[data-chat-look] .bm-poll button:hover { background: #f0f2f5 !important; transform: none !important; }
body[data-chat-look] .bm-poll-row { background: #f0f2f5 !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; margin: 3px 0 !important; position: relative; overflow: hidden; }
body[data-chat-look] .bm-poll-row-inner { color: #111b21 !important; font-size: 12.5px !important; padding: 5px 10px !important; position: relative; z-index: 1; }
body[data-chat-look="wa_group"] .bm-poll-fill, body[data-chat-look="wa_channel"] .bm-poll-fill { background: #d9fdd3 !important; }
body[data-chat-look="tg_group"] .bm-poll-fill { background: #d6eafc !important; }
body[data-chat-look] .bm-post-footer svg, body[data-chat-look] .bm-post-footer i, body[data-chat-look] .bm-post-footer img { display: none !important; }
body[data-chat-look="wa_group"] .bm-share-btn svg, body[data-chat-look="tg_group"] .bm-share-btn svg { width: 14px; height: 14px; }
body[data-chat-look] .bm-comments { background: #fff !important; border-radius: 10px; padding: 12px 14px; color: #111b21 !important; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
body[data-chat-look] .bm-comments h2, body[data-chat-look] .bm-comment .author { color: #111b21 !important; }
body[data-chat-look] .bm-comments input, body[data-chat-look] .bm-comments textarea { background: #f0f2f5 !important; color: #111b21 !important; border: 1px solid #e9edef !important; border-radius: 8px !important; }
body[data-chat-look] .bm-page-footer { color: #54656f; }

/* ===== never let content leave its bubble (photos, videos, albums, long words, embeds, tables, code) ===== */
body[data-chat-look] .bm-post, body[data-chat-look] .bm-post-bubble, body[data-chat-look] .bm-post-bubble figure { min-width: 0; }
body[data-chat-look] .bm-post-bubble img, body[data-chat-look] .bm-post-bubble video, body[data-chat-look] .bm-post-bubble iframe, body[data-chat-look] .bm-post-bubble canvas, body[data-chat-look] .bm-post-bubble svg:not(.lucide) { max-width: 100% !important; height: auto; }
body[data-chat-look] .bm-post-bubble .bm-album { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 6px; margin: 0 !important; }
body[data-chat-look] .bm-post-bubble .bm-album-item { min-width: 0 !important; max-width: 100% !important; width: 100% !important; object-fit: cover; }
body[data-chat-look] .bm-post-bubble .bm-album { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body[data-chat-look] .bm-post-bubble .bm-album-1 { grid-template-columns: minmax(0, 1fr) !important; }
body[data-chat-look] .bm-post-bubble .bm-post-media-video, body[data-chat-look] .bm-post-bubble .bm-post-media-img { width: 100% !important; display: block; }
body[data-chat-look] .bm-post-bubble audio { width: 100% !important; max-width: 100% !important; }
body[data-chat-look] .bm-post-bubble { overflow-wrap: anywhere; word-break: break-word; }
body[data-chat-look] .bm-post-bubble pre, body[data-chat-look] .bm-post-bubble table { display: block; max-width: 100%; overflow-x: auto; }
/* the time never sits on top of a photo or a video control: media always has room under it, and taps pass through the time */
body[data-chat-look] .bm-post-header, body[data-chat-look] .bm-post-header * { pointer-events: none !important; }
body[data-chat-look] .bm-post-bubble figure { position: relative; z-index: 1; }
body[data-chat-look] .bm-post-bubble.bmc-clip { overflow: hidden !important; }
body[data-chat-look] .bm-post-bubble.bmc-clip::after { display: none !important; }

body[data-chat-look] .bm-post-bubble .bm-album.bm-album-many { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; aspect-ratio: auto !important; max-height: none !important; }
body[data-chat-look] .bm-post-bubble .bm-album-many > .bm-album-item { aspect-ratio: 1 / 1; height: auto !important; }