/* Complete message compositions within the existing animated accordion. */
.sms-page[data-product="rcs"] .sms-values--editorial .sms-values__item[open] { background:transparent; }
.sms-page[data-product="rcs"] .sms-values__demo-surface { padding:0; background:transparent; border:0; border-radius:0; }
.rcs-lite { --rcs-blue:#2458be; --rcs-shadow:0 14px 30px -15px #173c7540; position:relative; isolation:isolate; display:grid; align-content:center; min-height:300px; padding:20px 24px 28px; box-sizing:border-box; color:#172e51; }
.rcs-lite *, .rcs-lite *::before, .rcs-lite *::after { box-sizing:border-box; }
.rcs-lite svg { flex:none; display:block; width:20px; height:20px; }
.rcs-lite strong { font-weight:500; }
.rcs-lite__note { display:block; color:#526178; font-size:12px; line-height:1.5; }
/* 01 — a branded banner and an overlapping avatar. */
.rcs-lite__brand { width:82%; max-width:330px; justify-self:center; background:#fff; border-radius:14px; box-shadow:var(--rcs-shadow); }
.rcs-lite__banner { position:relative; height:76px; overflow:hidden; border-radius:14px 14px 0 0; background:var(--rcs-blue); }
.rcs-lite__banner i { position:absolute; width:160px; height:160px; border:30px solid #5584da; border-radius:50%; right:-24px; top:-94px; }
.rcs-lite__banner i+i { width:108px; height:108px; top:8px; right:80px; border:0; background:#3b6dca; }
.rcs-lite__brand-body { position:relative; padding:0 22px 16px; }
.rcs-lite__identity { display:flex; align-items:end; justify-content:space-between; margin-top:-24px; margin-bottom:10px; }
.rcs-lite__logo { display:grid; place-items:center; flex:none; width:54px; height:54px; border:4px solid #fff; border-radius:16px; background:#3157a2; color:#fff; font-size:26px; }
.rcs-lite__verified { position:relative; top:8px; display:grid; place-items:center; flex:none; width:29px; height:29px; margin:0 8px 1px 0; padding:0; line-height:1; border-radius:50%; color:#176346; background:#daf0e5; }
.rcs-lite__verified svg { width:18px; height:18px; transform:translateY(.75px); }
.rcs-lite__brand-body>strong { display:block; margin-bottom:4px; font-size:21px; line-height:1.25; }
.rcs-lite__brand-links { display:flex; justify-content:space-between; gap:10px; margin-top:15px; padding-top:12px; border-top:1px solid #e5eaf2; color:#42618b; font-size:10px; line-height:1.5; }
.rcs-lite__palette { position:absolute; bottom:0; right:18px; display:flex; gap:5px; padding:10px; border-radius:12px; background:#fff; box-shadow:var(--rcs-shadow); transform:rotate(8deg); }
.rcs-lite__palette i { width:26px; height:32px; border-radius:5px; background:#2458be; }
.rcs-lite__palette i:nth-child(2) { background:#8eade5; }
.rcs-lite__palette i:nth-child(3) { background:#dce8fc; }
/* 02 — format tiles compose a bounded, readable stack. */
.rcs-lite--1 { display:block; }
.rcs-lite__format-file { position:absolute; left:12%; top:22px; width:38%; min-height:108px; padding:16px; display:flex; align-items:start; gap:10px; border-radius:14px; background:var(--rcs-blue); color:#fff; transform:rotate(-9deg); }
.rcs-lite__format-file svg { width:28px; height:28px; }
.rcs-lite__format-file span { margin-top:5px; font-size:12px; }
.rcs-lite__format-text { position:absolute; z-index:2; left:21%; top:78px; width:66%; max-width:320px; min-height:140px; padding:20px; border-radius:14px; background:#fff; box-shadow:var(--rcs-shadow); }
.rcs-lite__format-label { display:block; margin-bottom:10px; color:#526178; font-size:11px; }
.rcs-lite__format-text strong { display:block; max-width:16ch; font-size:19px; line-height:1.3; }
.rcs-lite__text-lines { display:grid; gap:6px; margin-top:14px; }
.rcs-lite__text-lines i { display:block; width:85%; height:5px; background:#e0e7f0; border-radius:3px; }
.rcs-lite__text-lines i+i { width:55%; }
.rcs-lite__format-rich { position:absolute; z-index:3; left:8%; bottom:24px; width:33%; padding:8px; border-radius:12px; background:#e0e7fb; transform:rotate(-6deg); box-shadow:var(--rcs-shadow); }
.rcs-lite__format-rich img { display:block; width:100%; height:58px; object-fit:cover; border-radius:7px; }
.rcs-lite__format-rich>span { display:block; padding:7px 2px 1px; font-size:11px; }
.rcs-lite__format-carousel { position:absolute; right:7%; bottom:16px; z-index:3; width:43%; padding:11px 14px; border-radius:12px; background:#d9e7fb; transform:rotate(5deg); }
.rcs-lite__format-carousel>span:first-child { display:flex; gap:5px; margin-bottom:8px; }
.rcs-lite__format-carousel i { width:29px; height:20px; background:#2458be; border-radius:4px; }
.rcs-lite__format-carousel i:nth-child(2) { background:#7399da; }
.rcs-lite__format-carousel i:nth-child(3) { background:#b3c9ec; }
.rcs-lite__format-carousel>span:last-child { font-size:11px; }
/* 03 — media and action form a single rich message. */
.rcs-lite__message-card { min-width:0; overflow:hidden; border-radius:14px; background:#fff; box-shadow:var(--rcs-shadow); }
.rcs-lite__message-card>img { display:block; width:100%; height:116px; object-fit:cover; }
.rcs-lite__message-copy { padding:16px; }
.rcs-lite__message-copy>strong { display:block; font-size:19px; line-height:1.3; }
.rcs-lite__link { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; margin-top:14px; padding:9px 11px; border-radius:8px; background:#e5edfc; color:#214f9f; font-size:12px; line-height:1.4; }
.rcs-lite__link svg { width:16px; height:16px; }
.rcs-lite__featured { position:relative; width:78%; max-width:320px; justify-self:center; }
.rcs-lite__media-back { position:absolute; inset:34px 17% 38px 13%; border-radius:14px; background:#a8c3ef; transform:rotate(-7deg); }
.rcs-lite__media-label { position:absolute; right:3%; top:40px; padding:10px 14px; border-radius:8px; background:var(--rcs-blue); color:#fff; font-size:11px; transform:rotate(6deg); }
/* 04 — both neighboring cards remain visible while browsing. */
.rcs-lite--3 { gap:16px; padding-inline:0; }
.rcs-lite__viewport { width:100%; overflow:hidden; padding-block:8px 20px; }
.rcs-lite__slides { display:flex; width:320%; transform:translateX(-21.875%); }
.rcs-lite__carousel-slot { flex:0 0 25%; min-width:0; padding-inline:7px; }
.rcs-lite__carousel-slot .rcs-lite__message-copy { display:grid; grid-template-rows:minmax(48px,auto) auto; }
.rcs-lite__carousel-slot .rcs-lite__message-copy>strong { font-size:18px; }
.rcs-lite__carousel-slot .rcs-lite__link { margin-top:8px; }
.rcs-lite__dots { display:flex; justify-content:center; gap:6px; }
.rcs-lite__dots i { display:block; width:20px; height:4px; border-radius:3px; background:#c4d4ed; }
/* 05 — action and reply are anchored in a conversation. */
.rcs-lite__conversation { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; width:94%; max-width:370px; justify-self:center; }
.rcs-lite__chat-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#3157a2; color:#fff; font-size:15px; }
.rcs-lite__bubble { padding:20px; border-radius:4px 14px 14px; background:#fff; box-shadow:var(--rcs-shadow); }
.rcs-lite__bubble p { margin:0 0 18px; font-size:21px; line-height:1.35; }
.rcs-lite__button { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:9px; background:var(--rcs-blue); color:#fff; font-size:12px; line-height:1.4; }
.rcs-lite__button svg { width:16px; height:16px; }
.rcs-lite__quick-replies { grid-column:2; display:flex; flex-wrap:wrap; }
.rcs-lite__quick-replies>span { padding:9px 14px; border:1px solid #a9bfe3; border-radius:20px; color:#3157a2; font-size:12px; line-height:1.4; }
.rcs-lite__answer { grid-column:2; justify-self:end; display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:12px 4px 12px 12px; background:#d7e5fc; color:#214f9f; font-size:12px; line-height:1.4; }
.rcs-lite__answer svg { width:16px; height:16px; }
/* 06 — three substantial status blocks under the scheduling layer. */
.rcs-lite--5 { gap:20px; }
.rcs-lite__schedule { display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin-left:10%; padding:12px 16px; border-radius:10px; background:#fff; color:#526178; font-size:12px; line-height:1.5; box-shadow:var(--rcs-shadow); }
.rcs-lite__trace { --rcs-trace-gap:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:var(--rcs-trace-gap); margin:0; padding:0; list-style:none; }
.rcs-lite__trace-step { position:relative; display:grid; align-content:start; gap:16px; min-height:146px; padding:17px 14px; border-radius:14px; background:var(--rcs-blue); color:#fff; }
.rcs-lite__trace-step--1 { margin-top:14px; background:#dce7fb; color:#214f9f; }
.rcs-lite__trace-step--2 { margin-top:28px; background:#dcefe6; color:#205d47; }
.rcs-lite__trace-step:not(:last-child)::after { content:''; position:absolute; left:100%; top:43px; width:var(--rcs-trace-gap); height:2px; background:#8ca9d7; }
.rcs-lite__trace-symbol { display:grid; place-items:center; width:32px; height:32px; padding:0; line-height:1; border-radius:9px; background:#ffffff26; }
.rcs-lite__trace-step--1 .rcs-lite__trace-symbol { background:#c2d5f7; }
.rcs-lite__trace-step--2 .rcs-lite__trace-symbol { background:#b7ddc9; }
.rcs-lite__trace-step strong { font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.rcs-lite__trace-bars { display:grid; gap:5px; color:inherit; opacity:.25; }
.rcs-lite__trace-bars i { height:4px; width:90%; border-radius:3px; background:currentColor; }
.rcs-lite__trace-bars i+i { width:55%; }
@media(max-width:1100px) and (min-width:901px) {
 .rcs-lite { padding-inline:12px; }
 .rcs-lite__trace { --rcs-trace-gap:8px; }
 .rcs-lite__trace-step { padding:14px 10px; }
 .rcs-lite__brand { width:88%; }
}
@media(max-width:600px) {
 .rcs-lite { min-height:300px; padding:20px 10px 28px; }
 .rcs-lite__brand { width:86%; }
 .rcs-lite__brand-body { padding-inline:17px; }
 .rcs-lite__brand-body>strong { font-size:20px; }
 .rcs-lite__brand-links { gap:8px; font-size:9px; }
 .rcs-lite__palette { right:10px; bottom:0; padding:8px; }
 .rcs-lite__palette i { width:20px; height:26px; }
 .rcs-lite__format-text { left:17%; width:76%; padding:17px; }
 .rcs-lite__format-text strong { font-size:18px; }
 .rcs-lite__format-rich { left:3%; width:38%; }
 .rcs-lite__format-carousel { right:2%; width:47%; }
 .rcs-lite__featured { width:84%; }
 .rcs-lite__media-label { right:10px; font-size:10px; }
 .rcs-lite__message-copy { padding:14px; }
 .rcs-lite__message-copy>strong { font-size:18px; }
 .rcs-lite--3 { padding-inline:0; }
 .rcs-lite__conversation { width:100%; gap:10px; grid-template-columns:26px minmax(0,1fr); }
 .rcs-lite__chat-avatar { width:26px; height:26px; }
 .rcs-lite__bubble { padding:17px; }
 .rcs-lite__bubble p { font-size:20px; }
 .rcs-lite__schedule { margin-left:0; font-size:11px; }
 .rcs-lite__trace { --rcs-trace-gap:8px; }
 .rcs-lite__trace-step { min-height:146px; padding:14px 10px; }
 .rcs-lite__trace-step strong { font-size:12px; }
}