/* WhatsApp's familiar conversation structure, with BotsApp's readable type sizes. */
:root { --wa-canvas:#efeae2; --wa-bar:#f0f2f5; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-text:#111b21; --wa-muted:#44545d; --wa-author:#125649; --wa-line:#d1d7db; --wa-pattern-opacity:.13; }
:root[data-theme="dark"] { --wa-canvas:#0b141a; --wa-bar:#202c33; --wa-in:#202c33; --wa-out:#005c4b; --wa-text:#edf4f4; --wa-muted:#c5cfd2; --wa-author:#a4e9d7; --wa-line:#3a4a54; --wa-pattern-opacity:.08; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --wa-canvas:#0b141a; --wa-bar:#202c33; --wa-in:#202c33; --wa-out:#005c4b; --wa-text:#edf4f4; --wa-muted:#c5cfd2; --wa-author:#a4e9d7; --wa-line:#3a4a54; --wa-pattern-opacity:.08; } }
.wa-chat { display:flex; flex-direction:column; min-width:0; min-height:0; color:var(--wa-text); background:var(--wa-canvas); border-radius:10px; overflow:hidden; width:100%; }
.wa-chat-header { display:flex; align-items:center; gap:12px; min-height:68px; flex-shrink:0; padding:12px 16px; background:var(--wa-bar); border-bottom:1px solid var(--wa-line); }
.wa-chat .c-avatar { position:relative; display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; overflow:hidden; color:var(--color-accent); background:var(--color-accent-soft); font-size:var(--type-avatar); font-weight:var(--type-emphasis-weight); --type-role:avatar; }
.wa-chat .c-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; }
.wa-chat .c-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wa-chat-identity { min-width:0; flex:1; }
.wa-chat-identity :is(h2,h3) { margin:0; --type-role:identity; font-size:var(--type-identity); font-weight:var(--type-identity-weight); line-height:var(--type-identity-line-height); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:var(--type-identity-tracking); font-kerning:var(--type-identity-kerning); }
.wa-chat-identity p { margin:3px 0 0; --type-role:caption; font-size:var(--type-caption); color:var(--wa-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-icon-button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--wa-muted); cursor:pointer; }
.wa-icon-button:hover { background:var(--color-surface-hover); }
.wa-icon-button:focus-visible, .wa-save-button:focus-visible, .wa-emojis button:focus-visible, .wa-search input:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.wa-search { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--wa-bar); border-bottom:1px solid var(--wa-line); flex-shrink:0; }
.wa-search input { width:100%; min-width:0; border:1px solid var(--wa-line); border-radius:8px; padding:12px; color:var(--wa-text); background:var(--wa-in); --type-role:compact; font-size:var(--type-compact); font-weight:var(--type-compact-weight); line-height:var(--type-compact-line-height); letter-spacing:var(--type-compact-tracking); font-kerning:var(--type-compact-kerning); }
.wa-search [role="status"] { white-space:nowrap; --type-role:caption; font-size:var(--type-caption); color:var(--wa-muted); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-context { background:var(--wa-bar); padding:12px 20px; border-bottom:1px solid var(--wa-line); display:grid; gap:4px; flex-shrink:0; border-left:3px solid var(--wa-author); }
.wa-context > span { display:flex; align-items:center; gap:6px; color:var(--wa-author); --type-role:caption; font-size:var(--type-caption); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-context > strong { --type-role:label; font-size:var(--type-label); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); letter-spacing:var(--type-label-tracking); font-kerning:var(--type-label-kerning); }
.wa-context > p { margin:0; color:var(--wa-muted); --type-role:caption; font-size:var(--type-caption); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-history { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:200px; flex:1; overflow:auto; overscroll-behavior:contain; padding:20px 28px 28px; }
.wa-history::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--wa-pattern-opacity); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160' fill='none' stroke='%238c999f' stroke-width='1.2'%3E%3Cpath d='M20 24h24v18H30l-7 6v-6h-3zM101 18l8 15-16 0zM177 32q15-22 27 0q-15 4-27 0zM44 100c-11-16-25 0 0 16c25-16 11-32 0-16zM130 100l8-12 8 12 14 3-10 10 1 14-13-6-13 6 1-14-10-10zM180 135q9-15 22-10M68 52l6 6m-6 0 6-6M80 135l8 8m-8 0 8-8'/%3E%3Ccircle cx='18' cy='75' r='4'/%3E%3Ccircle cx='166' cy='70' r='5'/%3E%3Cpath d='M100 65c0-6 9-6 9 0s-9 6-9 0'/%3E%3C/svg%3E"); }
.wa-date { align-self:center; margin:0 0 12px; --type-role:caption; font-size:var(--type-caption); color:var(--wa-muted); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-date span { display:block; padding:6px 12px; background:var(--wa-bar); border-radius:7px; box-shadow:0 1px 2px #0001; }
.wa-message { position:relative; max-width:85%; min-width:95px; padding:7px 10px 6px; border-radius:0 8px 8px; background:var(--wa-in); color:var(--wa-text); box-shadow:0 1px 1px #0002; }
.wa-message::before { content:""; position:absolute; top:0; left:-7px; border-top:8px solid var(--wa-in); border-left:8px solid transparent; }
.wa-message.wa-outgoing { align-self:flex-end; background:var(--wa-out); border-radius:8px 0 8px 8px; }
.wa-outgoing::before { left:auto; right:-7px; border-left:0; border-right:8px solid transparent; border-top-color:var(--wa-out); }
.wa-author { display:block; margin:0 0 4px; --type-role:field; font-size:var(--type-field); font-weight:var(--type-field-weight); color:var(--wa-author); line-height:var(--type-field-line-height); letter-spacing:var(--type-field-tracking); font-kerning:var(--type-field-kerning); }
.wa-message-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; --type-role:compact; font-size:var(--type-compact); line-height:var(--type-compact-line-height); font-weight:var(--type-compact-weight); letter-spacing:var(--type-compact-tracking); font-kerning:var(--type-compact-kerning); }
.wa-message-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin:3px 0 0 20px; --type-role:micro; font-size:var(--type-micro); line-height:var(--type-micro-line-height); color:var(--wa-muted); font-weight:var(--type-micro-weight); letter-spacing:var(--type-micro-tracking); font-kerning:var(--type-micro-kerning); }
.wa-ticks { display:flex; }
.wa-read { color:#167a9c; }
:root[data-theme="dark"] .wa-read { color:#75d4f2; }
.wa-quoted { padding:8px 10px; margin:0 0 8px; border-left:3px solid var(--wa-author); border-radius:4px; background:var(--wa-bar); --type-role:caption; font-size:var(--type-caption); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-quoted strong { color:var(--wa-author); }
.wa-quoted p { margin:3px 0 0; color:var(--wa-muted); }
.wa-composer { position:relative; display:grid; gap:8px; padding:12px 16px 10px; background:var(--wa-bar); border-top:1px solid var(--wa-line); flex-shrink:0; }
.wa-draft-label { display:flex; align-items:center; gap:6px; --type-role:caption; font-size:var(--type-caption); color:var(--wa-muted); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-compose-row { display:flex; align-items:flex-end; gap:8px; }
.wa-compose-row textarea { display:block; width:100%; min-width:0; min-height:48px; max-height:120px; resize:vertical; padding:12px; border:1px solid transparent; border-radius:8px; background:var(--wa-in); color:var(--wa-text); --type-role:compact; font-size:var(--type-compact); line-height:var(--type-compact-line-height); font-weight:var(--type-compact-weight); letter-spacing:var(--type-compact-tracking); font-kerning:var(--type-compact-kerning); }
.wa-compose-row textarea:focus-visible { outline:2px solid var(--color-focus); outline-offset:-2px; }
.wa-compose-row textarea::placeholder { color:var(--wa-muted); opacity:1; }
.wa-save-button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; flex-shrink:0; padding:10px 12px; border:0; border-radius:22px; background:var(--color-accent-fill); color:var(--color-on-accent); --type-role:meta; font-size:var(--type-meta); cursor:pointer; font-weight:var(--type-meta-weight); line-height:var(--type-meta-line-height); letter-spacing:var(--type-meta-tracking); font-kerning:var(--type-meta-kerning); }
.wa-save-button:hover { background:var(--color-accent-hover); }
.wa-compose-status { margin:0; --type-role:caption; font-size:var(--type-caption); color:var(--wa-muted); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-emojis { position:absolute; left:16px; bottom:calc(100% - 14px); display:flex; padding:6px; border:1px solid var(--wa-line); border-radius:10px; background:var(--wa-bar); box-shadow:0 8px 24px #0002; z-index:3; }
.wa-emojis button { width:44px; height:44px; font-size:var(--type-emoji); border:0; border-radius:6px; background:transparent; cursor:pointer; --type-role:emoji; }
.wa-emojis button:hover { background:var(--color-surface-hover); }
.wa-transcript-note { background:var(--wa-bar); color:var(--wa-muted); padding:10px 16px; --type-role:caption; font-size:var(--type-caption); font-weight:var(--type-caption-weight); line-height:var(--type-caption-line-height); letter-spacing:var(--type-caption-tracking); font-kerning:var(--type-caption-kerning); }
.wa-search-empty { align-self:center; padding:10px; color:var(--wa-muted); background:var(--wa-bar); border-radius:6px; --type-role:compact; font-size:var(--type-compact); font-weight:var(--type-compact-weight); line-height:var(--type-compact-line-height); letter-spacing:var(--type-compact-tracking); font-kerning:var(--type-compact-kerning); }
.wa-dialog .wa-chat { height:100%; border-radius:0; }
.wa-dialog .wa-history { min-height:0; }
.bots-component > .wa-chat { border:1px solid var(--wa-line); }
.bb-preview:has(> .wa-chat) { padding:0; }
.bb-preview > .wa-chat { border-radius:0; min-height:330px; }
.bb-preview .wa-composer { border:1px solid var(--wa-line); border-radius:10px; }
@media (max-width:740px) { .wa-chat-header { padding:8px 12px; gap:8px; } .wa-history { padding:20px 18px; } .wa-message { max-width:92%; } .wa-composer { padding:12px; } .wa-compose-row { flex-wrap:wrap; } .wa-compose-row textarea { width:calc(100% - 52px); } .wa-save-button { margin-left:auto; } .wa-context { padding:10px 16px; } }
@media(prefers-reduced-motion:no-preference) { .wa-icon-button,.wa-save-button { transition:background-color 140ms ease,transform 100ms ease; } .wa-icon-button:active,.wa-save-button:active { transform:scale(.97); } }

:root[data-theme="dark"] .wa-outgoing { --wa-muted:#edf4f4; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .wa-outgoing { --wa-muted:#edf4f4; } }

.wa-author .c-person-mention { color:var(--wa-author); }
.wa-quoted .c-person-mention { color:var(--wa-author); }
.wa-chat-identity > p .c-person-mention { gap:4px; color:var(--wa-text); }
.wa-chat-identity > p .c-avatar { width:18px; height:18px; font-size:var(--type-avatarSmall); --type-role:avatarSmall; }
.wa-chat .c-person-mention .c-avatar-fallback { color:var(--wa-text); }

.wa-forwarded { display:block; margin-bottom:5px; color:var(--wa-muted); font-size:var(--type-caption); font-weight:var(--type-caption-weight); font-style:italic; }
.wa-chat .wa-author .c-person-mention { display:inline-flex; align-items:center; gap:6px; }
.wa-chat .wa-author .c-avatar { width:24px; height:24px; }
.wa-chat .wa-author .c-person-mention > span:last-child { overflow-wrap:anywhere; }
.wa-history > .wa-date:not(:first-child) { margin-top:10px; }