/* Monochrome conversation view; message state remains demonstration-only. */
.phone-screen.wa-conversation { --wa-surface:#f3f3f3; --wa-incoming:#e7e7e7; --wa-outgoing:#000; --wa-ink:#111; --wa-muted:#999999; --wa-link:#111; --wa-thread:#f3f3f3; --app-bg:var(--wa-surface); }
.wa-conversation .phone-content { color: var(--wa-ink); }
.wa-chat-header { min-height:54px; display:flex; align-items:center; padding:5px 14px 5px 8px; gap:3px; background:var(--wa-surface); border:0; flex-shrink:0; }
.wa-chat-header button { display: grid; place-items: center; color: var(--wa-link); padding: 0; }
.wa-back { width: 32px; height: 44px; flex-shrink: 0; }
.wa-back>.icon { width: 27px; height: 27px; stroke-width: 1.9; }
.wa-chat-header .wa-contact { display:flex; gap:11px; align-items:center; text-align:left; min-width:0; flex:1; height:40px; }
.wa-contact>.avatar { width: 28px; height: 28px; border-radius: 50%; }
.wa-contact>span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-contact b { color: var(--wa-ink); font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-contact small { color: var(--wa-muted); font-size: 9px; white-space: nowrap; }
.wa-call-actions { display: flex; flex-shrink: 0; }
.wa-call-actions>button { width: 32px; height: 44px; }
.wa-call-actions .icon { width: 21px; height: 21px; stroke-width: 1.6; }
.wa-call-actions>button:last-child { width: 26px; }
.wa-demo-notice { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; color: var(--wa-muted); min-height: 27px; padding: 6px; background: var(--wa-surface); flex-shrink: 0; }
.wa-demo-notice>.icon { width: 10px; height: 10px; }
.wa-thread { flex:1; min-height:0; padding:16px 18px 22px; background:var(--wa-thread); background-image:none; }
.wa-date-divider { text-align:center; padding:0 0 20px; }
.wa-date-divider>span { display:inline-block; background:none; box-shadow:none; color:#9b9b9b; font-size:9px; letter-spacing:1px; padding:5px; }
.wa-message { display:flex; flex-direction:column; align-items:flex-start; margin:15px 0; gap:5px; }
.wa-message.group-start { margin-top: 12px; }
.wa-message.me { align-items:flex-end; }
.wa-bubble { min-width:0; border-radius:23px; background:var(--wa-incoming); color:var(--wa-ink); padding:var(--soft-message-padding) 13px; font-size:14px; line-height:1.5; letter-spacing:0; box-shadow:none; position:relative; overflow-wrap:anywhere; }
.wa-bubble::after { content: ''; display: block; clear: both; }
.wa-message.me>.wa-bubble { background:#000; color:#fff; }




.wa-text { white-space: pre-wrap; }
.wa-message-meta { display:flex; align-items:center; gap:5px; float:none; padding:0; margin:0 46px 0 0; min-height:17px; line-height:14px; white-space:nowrap; color:#999999; font-size:9px; }
.wa-message-meta>time { font-variant-numeric: tabular-nums; }
.wa-receipt { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #919191; min-height: 15px; min-width: 20px; }
.wa-checks { width: 19px; height: 14px; color: #919191; }
.wa-checks.read { color: #aaaaaa; }
.wa-photo-bubble { width:210px; padding:0; overflow:hidden; }
.wa-photo-bubble>button { display:block; padding:0; width:100%; overflow:hidden; border-radius:23px; }
.wa-photo-caption { padding:8px 12px; font-size:12px; line-height:1.5; }
.wa-photo-caption::after { content: ''; display: block; clear: both; }
.wa-sticker-message { display: flex; flex-direction: column; align-items: flex-end; width: 152px; padding-top: 3px; }
.wa-sticker-message>img { width: 144px; height: 144px; display: block; object-fit: contain; filter: drop-shadow(0 2px 2px #00000012); }
.wa-sticker-message>.wa-message-meta { float: none; background: #fbfbfbd9; padding: 3px 6px; border-radius: 8px; margin-top: 4px; }
.wa-composer { display:flex; align-items:center; gap:5px; padding:5px 7px; min-height:46px; margin:5px 18px 2px; background:#fff; border:0; border-radius:28px; flex-shrink:0; box-shadow:0 4px 24px #00000003; }
.wa-add { width:30px; height:34px; display:grid; place-items:center; color:#111; padding:0; flex-shrink:0; }
.wa-add>.icon { width:23px; height:23px; stroke-width:1.4; }
.wa-compose-field { flex:1; min-width:0; display:flex; align-items:center; min-height:34px; border:0; border-radius:22px; background:#f3f3f3; padding:0 5px 0 12px; }
.wa-compose-field>textarea { display:block; width:100%; min-width:0; border:0; border-radius:0; padding:7px 0; min-height:34px; max-height:92px; background:transparent; resize:none; color:#111; font-size:16px; line-height:20px; outline:0; }
.wa-compose-field>textarea::placeholder { color: #a9a9a9; }
.wa-sticker-toggle { flex-shrink: 0; display: grid; place-items: center; width: 31px; height: 35px; color: #949494; padding: 0; }
.wa-sticker-toggle>.icon { width: 23px; height: 23px; stroke-width: 1.5; }
.wa-sticker-toggle.active { color: var(--wa-link); }
.wa-send { width:34px; height:34px; border-radius:50%; background:#000; display:grid; place-items:center; color:#fff; padding:0; flex-shrink:0; }
.wa-send>.icon { width: 23px; height: 23px; stroke-width: 2; }
.wa-send:disabled { background:#000; color:#fff; opacity:.35; }
.wa-sticker-panel { flex-shrink: 0; height: 253px; display: flex; flex-direction: column; background: var(--wa-surface); border-top: 1px solid #00000012; color: var(--wa-ink); }
.wa-sticker-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; min-height: 40px; }
.wa-sticker-toolbar>span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; }
.wa-sticker-toolbar>span>.icon { width: 19px; height: 19px; color: var(--wa-link); }
.wa-sticker-toolbar small { font-size: 10px; color: var(--wa-muted); font-weight: 400; }
.wa-sticker-toolbar>div { display: flex; align-items: center; gap: 5px; }
.wa-sticker-toolbar button { color: var(--wa-link); font-size: 11px; min-height: 32px; padding: 3px 7px; }
.wa-sticker-toolbar .wa-panel-close { color: var(--wa-muted); padding: 5px 0 5px 7px; }
.wa-panel-close>.icon { width: 17px; height: 17px; }
.wa-sticker-storage { margin: 0; padding: 0 12px 8px; font-size: 9px; line-height: 1.6; color: var(--wa-muted); }
.wa-sticker-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 8px; }
.wa-sticker-empty>.icon { color: #b5b5b5; width: 32px; height: 32px; stroke-width: 1; }
.wa-sticker-empty>b { font-size: 12px; font-weight: 500; }
.wa-sticker-empty>span { font-size: 10px; color: var(--wa-muted); }
.wa-sticker-empty>button { padding: 8px 15px; font-size: 11px; color: var(--wa-link); border: 1px solid #bebebe; border-radius: 17px; margin-top: 2px; }
.wa-sticker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; gap: 6px; padding: 4px 10px 8px; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.wa-sticker-grid>div { position: relative; }
.wa-sticker-grid>div>button:first-child { display: flex; flex-direction: column; width: 100%; align-items: center; padding: 5px 3px; gap: 4px; border-radius: 7px; }
.wa-sticker-grid img { width: 57px; height: 57px; object-fit: contain; }
.wa-sticker-grid span { font-size: 8px; color: var(--wa-muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-remove-sticker { position: absolute; top: 0; right: 0; width: 20px; height: 20px; display: grid; place-items: center; padding: 3px; border-radius: 50%; color: #fff; background: #898989; }
.wa-remove-sticker>.icon { width: 12px; height: 12px; }
.wa-sticker-formats { font-size: 9px; color: var(--wa-muted); text-align: center; padding: 6px 9px 9px; }
.wa-receipt-info { position:absolute; left:16px; right:16px; bottom:8px; background:#fff; border:0; border-radius:28px; box-shadow:0 0 0 2000px #00000020,0 10px 35px #00000010; padding:15px 19px 19px; z-index:30; }
.wa-receipt-info>div { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.wa-receipt-info>div>button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--wa-muted); }
.wa-receipt-info>div .icon { width: 20px; height: 20px; }
.wa-receipt-info>p { display: flex; align-items: center; gap: 13px; font-size: 13px; margin: 16px 0; }
.wa-receipt-info>p>.wa-checks { width: 24px; height: 20px; }
.wa-receipt-info>p>span { display: flex; flex-direction: column; gap: 4px; }
.wa-receipt-info>p small { font-size: 10px; color: var(--wa-muted); }
.wa-receipt-info>small { display: block; line-height: 1.9; font-size: 10px; color: var(--wa-muted); padding-top: 5px; }








.wa-message-line { display:flex; gap:12px; align-items:flex-start; position:relative; max-width:100%; }
.wa-message.me .wa-message-line { flex-direction:row-reverse; }
.wa-message-line>.avatar { width:30px; height:30px; flex-shrink:0; }
#phone .wa-message-line .wa-bubble { max-width:min(275px,calc(100% - 42px)); }
.wa-message.me .wa-message-line>.wa-bubble { background:#000; color:#fff; }
.wa-connector { position:absolute; left:24px; top:22px; width:16px; height:8px; border:0; border-left:1px solid #d6d6d8; border-bottom:1px solid #d6d6d8; border-radius:0 0 0 6px; }
.wa-message.me .wa-connector { left:auto; right:24px; border-left:0; border-right:1px solid #d6d6d8; border-radius:0 0 6px 0; }
.wa-message-meta>.avatar { width:15px; height:15px; }
.wa-receipt-info>p>.avatar { width:25px; height:25px; }