/* Messenger replicas are scoped to this page; the site retains its neutral palette. */
body[data-service-page="chat"]{background:#fff}
[data-service-page="chat"] .experience{width:min(680px,calc(100% - 40px));margin:28px auto 32px}
.chat-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.chat-page-heading h1{font-size:30px;letter-spacing:-.04em;line-height:1.3}
.chat-page-heading .messaging-demo-label{font-size:12px;color:#787875;white-space:nowrap}
.messaging-demo{--chat-ground:#8eadd4;--chat-ink:#151b22;background:none;border:0;border-radius:0;padding:0;overflow:visible}
.messaging-channels{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#f2f2ef;border:1px solid #e9e9e5;border-radius:16px;margin:0 0 20px}
.messaging-channels button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:48px;font-size:15px;font-weight:500;border-radius:11px;padding:8px 16px;color:#70716c}
.messaging-channels button[aria-pressed=true]{background:#fff;color:#161816;box-shadow:0 1px 4px #1f291412}
.messaging-channels button:hover{color:#151815}
.channel-brand{width:25px;height:25px;display:grid;place-items:center;flex:none}
.channel-brand-line{border-radius:7px;background:#06c755;color:white;font-size:7px;font-weight:700;letter-spacing:-.5px;position:relative}
.channel-brand-line::after{content:"";position:absolute;width:17px;height:13px;border:1px solid white;border-radius:50%;top:5px;left:3px}
.channel-brand-whatsapp{background:#25d366;color:#fff;border-radius:50%}
.channel-brand-whatsapp svg{width:23px;height:23px}
.messaging-preview{display:flex;flex-direction:column;height:550px;max-width:none;border:1px solid #d7dce1;border-radius:20px;background:var(--chat-ground);overflow:hidden;box-shadow:0 12px 40px -26px #26354955;color:var(--chat-ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif}
.messenger-header{display:flex;flex:none;align-items:center;gap:10px;min-height:70px;padding:10px 14px;background:var(--chat-ground);border-bottom:1px solid #1425360b}
.messenger-back{width:44px;min-height:44px;display:grid;place-items:center;flex:none;margin-left:-4px}
.messenger-back .icon{width:23px;height:23px}
.messenger-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;background:#fff;border-radius:50%;overflow:hidden}
.messenger-avatar img{width:112%;height:112%;object-fit:contain;max-width:none}
.header-avatar{display:none}
.messenger-contact{min-width:0;flex:1;line-height:1.4}
.messenger-contact strong{font-size:17px;font-weight:600;display:block;white-space:nowrap}
#messaging-channel-name{font-size:11px;font-weight:400;color:#384f6a;letter-spacing:0;display:block;margin-top:1px}
.messenger-tools{display:flex;gap:2px;align-items:center}
.messenger-tool{width:36px;height:44px;flex:none;display:grid;place-items:center;padding:8px;background:none;border-radius:0}
.messenger-tool:disabled{color:inherit;cursor:default;opacity:.55}
.messenger-tool svg{width:22px;height:22px}
.video-tool,.whatsapp-menu{display:none}
.messenger-body{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--chat-ground);position:relative;isolation:isolate}
.messaging-thread{flex:1;min-height:0;height:auto;padding:18px 20px 28px;gap:18px;position:relative;scrollbar-color:#0003 transparent;scrollbar-gutter:stable;overflow-anchor:none}
.messaging-day{align-self:center;padding:3px 12px;border-radius:20px;background:#52698855;color:#fff;font-size:11px;line-height:1.7;margin:0 0 6px;flex:none}
.message-row{display:flex;align-items:flex-start;gap:8px;max-width:90%;flex:none;align-self:flex-start;min-width:0}
.message-row[data-speaker=user]{align-self:flex-end;flex-direction:row-reverse}
.message-row .messenger-avatar{width:30px;height:30px;margin-top:0}
.message-content{display:flex;align-items:flex-end;gap:5px;min-width:0}
.message-row[data-speaker=user] .message-content{flex-direction:row-reverse}
.messaging-message{position:relative;flex:initial;max-width:100%;padding:10px 13px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:wrap}
.messaging-message[data-speaker=assistant]{border:0;border-radius:17px;background:#fff;color:#161b20}
.messaging-message[data-speaker=user]{border-radius:17px;background:#91e85f;color:#162112}
.messaging-message::before{content:"";position:absolute;top:1px;width:11px;height:15px;background:inherit;z-index:-1}
.messaging-message[data-speaker=assistant]::before{left:-4px;clip-path:polygon(0 0,100% 15%,100% 100%)}
.messaging-message[data-speaker=user]::before{right:-4px;clip-path:polygon(100% 0,0 15%,0 100%)}
.message-time{display:block;flex:none;font-size:10px;line-height:1.5;color:#344d6b;margin-bottom:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.messaging-form{position:relative;display:flex;flex:none;align-items:flex-end;gap:6px;border:0;border-radius:0;margin:0;padding:10px 12px;background:#fff;box-shadow:none}
.messaging-form:focus-within{border-color:transparent;box-shadow:none}
.messaging-input-wrap{background:#f1f2f4;border:1px solid transparent;border-radius:24px;min-width:0;flex:1;display:flex}
.messaging-input-wrap:focus-within{border-color:#8cabc9}
.messaging-form textarea{height:42px;min-height:42px;max-height:114px;resize:none;padding:9px 14px;line-height:24px;font-size:16px;display:block;margin:0;color:#15212b}
.messaging-form textarea::placeholder{color:#7c8288}
.messaging-form>button{background:transparent;color:#517bd2;border-radius:50%;width:44px;height:44px;padding:10px}
.messaging-form>.attachment-tool{width:30px;padding:4px;color:#1c2732}
.messaging-form>.attachment-tool:disabled{opacity:.5}
.messaging-send svg{width:23px;height:23px}
.messaging-form>.messaging-send:disabled{opacity:.35}
.messaging-form>.messaging-send:enabled:hover{background:#e9effa}
.messaging-feedback{position:relative;flex:none;margin:0;padding:8px 16px 12px;font-size:12px;background:white;color:#a5382c}
.message-row.is-new{animation:message-arrive .2s ease-out both}
@keyframes message-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* WhatsApp: neutral app bar, warm patterned canvas, inset time and green composer. */
.messaging-demo[data-channel=whatsapp]{--chat-ground:#eee8df;--chat-ink:#192b2c}
[data-channel=whatsapp] .messaging-preview{border-color:#deded7}
[data-channel=whatsapp] .messenger-header{background:#fff;border-bottom-color:#e5e5df;gap:8px}
[data-channel=whatsapp] .header-avatar{display:grid;width:37px;height:37px;background:#f1f2ee;margin-left:-5px}
[data-channel=whatsapp] #messaging-channel-name{color:#727b79}
[data-channel=whatsapp] .video-tool,[data-channel=whatsapp] .whatsapp-menu{display:block}
[data-channel=whatsapp] .line-menu{display:none}
[data-channel=whatsapp] .messenger-body::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.26;background-image:url('./chat-pattern.svg');background-size:320px 320px;pointer-events:none}
[data-channel=whatsapp] .messaging-day{background:#fff8;color:#59635f;border-radius:7px;box-shadow:0 1px 2px #0000000a}
[data-channel=whatsapp] .message-row{max-width:85%}
[data-channel=whatsapp] .message-row .messenger-avatar{display:none}
[data-channel=whatsapp] .message-content{display:block;position:relative;max-width:100%;min-width:0}
[data-channel=whatsapp] .messaging-message{padding:8px 11px 24px;border-radius:8px;min-width:86px;box-shadow:0 1px 1px #0b141a15}
[data-channel=whatsapp] .messaging-message[data-speaker=user]{background:#d9fdd3;color:#152619}
[data-channel=whatsapp] .messaging-message::before{top:0;height:12px;width:12px}
[data-channel=whatsapp] .messaging-message[data-speaker=assistant]::before{left:-6px}
[data-channel=whatsapp] .messaging-message[data-speaker=user]::before{right:-6px}
[data-channel=whatsapp] .message-time{position:absolute;right:9px;bottom:5px;margin:0;color:#62746a}
[data-channel=whatsapp] .messaging-form{background:none;padding:10px 10px 12px;gap:7px}
[data-channel=whatsapp] .messaging-input-wrap{background:#fff;border-color:#fff;box-shadow:0 1px 2px #0b141a14}
[data-channel=whatsapp] .messaging-input-wrap:focus-within{border-color:#489f83}
[data-channel=whatsapp] .messaging-form>.attachment-tool{color:#2f4941}
[data-channel=whatsapp] .messaging-form>.messaging-send{background:#128c7e;color:#fff}
[data-channel=whatsapp] .messaging-form>.messaging-send:enabled:hover{background:#0d776a}
[data-channel=whatsapp] .messaging-feedback{background:#f8f6f2}

@media(max-width:800px){
 [data-service-page="chat"] .site-header{min-height:64px}
 [data-service-page="chat"] .experience{width:calc(100% - 32px);margin:12px auto 20px}
 .chat-page-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:22px}
 .chat-page-heading h1{font-size:27px}
 .chat-page-heading .messaging-demo-label{font-size:11px}
 .messaging-channels{margin-bottom:14px;padding:4px;border-radius:14px}
 .messaging-channels button{min-height:46px;font-size:14px;border-radius:10px}
 .messaging-preview{height:clamp(260px,calc(100dvh - 350px),560px);border-radius:16px}
 .messenger-header{min-height:64px;padding:8px 10px;gap:6px}
 .messenger-contact strong{font-size:16px}
 .messenger-tools{gap:0}
 .messenger-tool{width:32px;padding:6px}
 .messaging-thread{height:auto;padding:16px 14px 24px;gap:16px;scrollbar-gutter:auto}
 .message-row{max-width:94%;gap:6px}
 .messaging-message{font-size:14px;padding:9px 12px}
 .messaging-form{padding:9px 8px;gap:4px}
 .messaging-form>.attachment-tool{width:27px}
 .messaging-form>.messaging-send{width:44px}
 [data-channel=whatsapp] .message-row{max-width:88%}
 [data-service-page="chat"] .site-footer{padding-top:0;min-height:112px}
}
@media(max-width:360px){
 .messenger-tool{width:29px}
 .messenger-header{padding-inline:7px}
 [data-channel=whatsapp] .messenger-header{gap:5px}
 .header-avatar{width:30px!important;height:30px!important}
 .messenger-contact strong{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.message-row.is-new{animation:none}}

/* Each channel owns a document and independent demo state. */
[data-service-page="chat"] .experience{width:min(1240px,calc(100% - 48px))}
.messaging-channels{max-width:680px;margin-inline:auto}
.channel-demo-panel{overflow:hidden;border:1px solid #dfe4e9;border-radius:18px;background:#fff}
.channel-demo-panel iframe{display:block;width:100%;height:780px;border:0;background:#fff}
@media(max-width:800px){
 [data-service-page="chat"] .experience{width:calc(100% - 32px)}
 .channel-demo-panel{border-radius:16px}
 .channel-demo-panel iframe{height:730px}
}