/* ============================================================================
   CONVERSAS SHOWCASES — themed full-section showcases on /conversas, one per
   category. Each section is a dark stage with category-colored decorations,
   a centered iPhone running a real conversation of that category, and a
   shuffle button to cycle through more conversations of the same type.

   Per-section theme: violet (Reunião Marcada), blue (Lead Interessado),
   red (Resposta Rude). The iPhone chassis + glow is shared baseline; the
   decorative animated elements are unique per category.
   ============================================================================ */


/* ============================================================================
   1. SECTION FRAME — shared across all showcases
   ============================================================================ */


.conversas-showcase {
    position: relative;
    overflow: hidden;
    padding: 75px 25px;
    background: var(--color-ink);
    color: #ffffff;
    --cs-accent: #ffffff;
    --cs-accent-soft: rgba(255, 255, 255, 0.15);
}


.conversas-showcase .conversas-showcase__inner {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}


/* DECORATIONS LAYER — absolutely positioned animated elements behind the
   content. Pointer events disabled so nothing blocks interaction with the
   phone or buttons. */

.conversas-showcase .conversas-showcase__decorations {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}


/* RADIAL ATMOSPHERIC GLOW — each section gets a category-colored ambient
   glow from the center, fading to transparent at the edges. */

.conversas-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--cs-accent-soft) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}


/* SECTION DIVIDER — a neon glowing accent line at the bottom of each showcase
   in the section's own theme color. Crosses the join with the next section,
   making the boundary visible and aesthetic. The horizontal gradient fades
   in/out at both ends so it reads as a "spotlight bar" rather than a hard
   border. The box-shadow softly bleeds the glow into the next section's top,
   creating a colored bridge between sections. */

.conversas-showcase::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--cs-accent) 50%, transparent 100%);
    box-shadow:
        0 0 20px var(--cs-accent),
        0 0 60px var(--cs-accent-soft),
        0 -2px 80px var(--cs-accent-soft);
    pointer-events: none;
    z-index: 6;
}


/* Hide the divider on the last showcase — the footer has its own wave divider
   that handles the transition out of the conversas page. Doubling them would
   stack two visual breaks at the same spot. */

.conversas-showcase:last-of-type::after {
    display: none;
}


.conversas-showcase.conversas-showcase--invocou-lgpd::after {
    display: none;
}


/* ============================================================================
   2. HEADING
   ============================================================================ */


.conversas-showcase .conversas-showcase__inner .conversas-showcase__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 720px;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__title {
    margin: 0;
    color: #ffffff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__title-emoji {
    display: inline-block;
    animation: csTitleEmoji 3s ease-in-out infinite;
}


@keyframes csTitleEmoji {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate(8deg) scale(1.1); }
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1.5;
}


/* ============================================================================
   3. PHONE — iPhone mockup, scoped to showcase context
   ============================================================================ */


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    width: 100%;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 19.5;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 10px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 10px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 30px var(--cs-accent),
        0 0 80px var(--cs-accent);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: csIphoneGlow 2s ease-in-out infinite;
}


@keyframes csIphoneGlow {
    0%, 100% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 10px 25px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 25px var(--cs-accent),
            0 0 70px var(--cs-accent);
    }
    50% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 10px 25px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 50px var(--cs-accent),
            0 0 130px var(--cs-accent);
    }
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen {
    flex: 1;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cs-iphone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 25px 10px 25px;
    background: #ffffff;
    flex-shrink: 0;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cs-iphone-statusbar .cs-iphone-statusbar-time {
    font-weight: 600;
    font-size: 14px;
    color: #000;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cs-iphone-statusbar .cs-iphone-statusbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


/* The Gmail thread inside the iPhone reuses the existing .cvr-gmail design
   system rules from conversas-reais-home.css — they're scoped to .cvr-gmail
   so they apply regardless of the surrounding container. */

.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail .cvr-gmail__thread {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail .cvr-gmail__thread .cvr-thread-host {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    flex-direction: column;
}


/* ============================================================================
   4. ACTION — shuffle button
   ============================================================================ */


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__shuffle,
.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border: 1px solid var(--cs-accent);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share {
    background: var(--cs-accent);
    color: #ffffff;
    box-shadow: 0 10px 25px var(--cs-accent-soft);
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share.conversas-showcase__share--instagram {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(45deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(221, 42, 123, 0.35);
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__shuffle:hover,
.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share:hover {
    background: var(--cs-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--cs-accent-soft);
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share:hover {
    background: rgba(255, 255, 255, 0.12);
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share.conversas-showcase__share--instagram:hover {
    background: linear-gradient(45deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
    box-shadow: 0 10px 25px rgba(221, 42, 123, 0.35);
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__shuffle:disabled,
.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


.conversas-showcase .conversas-showcase__inner .conversas-showcase__action .conversas-showcase__share.is-loading svg {
    animation: conversasShowcaseShareSpin 1s linear infinite;
}


@keyframes conversasShowcaseShareSpin {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}


/* ============================================================================
   5. THEME 1: REUNIÃO MARCADA — violet, schedule + celebration
   ============================================================================ */


.conversas-showcase.conversas-showcase--reuniao-marcada {
    --cs-accent: #8b5cf6;
    --cs-accent-soft: rgba(139, 92, 246, 0.25);
    background: linear-gradient(180deg, #1a1530 0%, #0f0a25 100%);
}


/* Floating calendar tiles drift up from the bottom edges of the section. */

.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile {
    position: absolute;
    font-size: 32px;
    animation: csrmFloat 12s linear infinite;
    opacity: 0.6;
}


.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-1 { left:  5%; animation-delay: 0s;   font-size: 28px; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-2 { left: 15%; animation-delay: -2s;  font-size: 36px; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-3 { left: 25%; animation-delay: -5s;  font-size: 22px; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-4 { left: 78%; animation-delay: -1s;  font-size: 30px; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-5 { left: 88%; animation-delay: -4s;  font-size: 26px; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-tile-6 { left: 95%; animation-delay: -7s;  font-size: 32px; }


@keyframes csrmFloat {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}


/* Pulsing concentric violet rings behind the phone — the "this slot just
   got booked" energy. Three layered rings on staggered delays. */

.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 380px;
    margin: -190px 0 0 -190px;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
    opacity: 0;
    animation: csrmPulseRing 4s ease-out infinite;
}


.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-pulse-2 { animation-delay: 1.3s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-pulse-3 { animation-delay: 2.6s; }


@keyframes csrmPulseRing {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0;   }
}


/* Twinkling stars across the section — celebratory atmosphere. */

.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 10px #fbbf24;
    animation: csrmTwinkle 3s ease-in-out infinite;
}


.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-1 { top: 15%; left: 10%; animation-delay: 0s;   }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-2 { top: 25%; left: 85%; animation-delay: 0.6s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-3 { top: 60%; left: 8%;  animation-delay: 1.2s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-4 { top: 75%; left: 92%; animation-delay: 1.8s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-5 { top: 40%; left: 50%; animation-delay: 2.4s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-6 { top: 20%; left: 60%; animation-delay: 0.3s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-7 { top: 85%; left: 30%; animation-delay: 1.5s; }
.conversas-showcase--reuniao-marcada .conversas-showcase__decorations .csrm-star-8 { top: 55%; left: 75%; animation-delay: 0.9s; }


@keyframes csrmTwinkle {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(0.4); opacity: 0.3; }
}


/* ============================================================================
   6. THEME 2: LEAD INTERESSADO — blue, magnetism + curiosity
   ============================================================================ */


.conversas-showcase.conversas-showcase--lead-interessado {
    --cs-accent: #3b82f6;
    --cs-accent-soft: rgba(59, 130, 246, 0.25);
    background: linear-gradient(180deg, #0a1530 0%, #050a20 100%);
}


/* Beams of light radiating from behind the phone outward. */

.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 100vh;
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.4) 50%, transparent 100%);
    transform-origin: 50% 0;
    margin-top: -50vh;
    animation: csliBeamSpin 20s linear infinite;
    filter: blur(2px);
}


.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-beam-1 { transform: rotate(0deg);   }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-beam-2 { transform: rotate(45deg);  }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-beam-3 { transform: rotate(90deg);  }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-beam-4 { transform: rotate(135deg); }


@keyframes csliBeamSpin {
    0%   { transform: rotate(0deg);   opacity: 0.4; }
    50%  { opacity: 0.7; }
    100% { transform: rotate(360deg); opacity: 0.4; }
}


/* Floating curiosity emojis — question marks, lightbulbs, eyes drifting up. */

.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji {
    position: absolute;
    font-size: 32px;
    animation: csliFloat 14s linear infinite;
    opacity: 0;
}


.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-1 { left:  8%; animation-delay: 0s;    font-size: 30px; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-2 { left: 18%; animation-delay: -3s;   font-size: 38px; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-3 { left: 28%; animation-delay: -7s;   font-size: 24px; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-4 { left: 75%; animation-delay: -2s;   font-size: 28px; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-5 { left: 85%; animation-delay: -5s;   font-size: 36px; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-emoji-6 { left: 92%; animation-delay: -10s;  font-size: 26px; }


@keyframes csliFloat {
    0%   { transform: translateY(110vh) scale(0.8); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.7; }
    100% { transform: translateY(-20vh) scale(1.1); opacity: 0; }
}


/* Concentric "engagement waves" radiating from the phone center — like a
   sonar ping showing the lead's attention being captured. */

.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border: 1px solid rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: csliWaveExpand 5s ease-out infinite;
}


.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-wave-2 { animation-delay: 1.7s; }
.conversas-showcase--lead-interessado .conversas-showcase__decorations .csli-wave-3 { animation-delay: 3.4s; }


@keyframes csliWaveExpand {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(3);   opacity: 0;   }
}


/* ============================================================================
   7. THEME 3: RESPOSTA RUDE — red, hostility met with composure
   ============================================================================ */


.conversas-showcase.conversas-showcase--resposta-rude {
    --cs-accent: #ef4444;
    --cs-accent-soft: rgba(239, 68, 68, 0.25);
    background: linear-gradient(180deg, #2a0a10 0%, #1a0508 100%);
}


/* Phone gets a subtle continuous shake to signal hostility — but stays
   composed (small amplitude, not chaotic). */

.conversas-showcase--resposta-rude .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone {
    animation: csIphoneGlow 2s ease-in-out infinite, csrrShake 0.4s ease-in-out infinite;
}


@keyframes csrrShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}


/* Lightning bolts flashing periodically in the corners. */

.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-bolt {
    position: absolute;
    font-size: 56px;
    color: #ef4444;
    text-shadow: 0 0 25px #ef4444, 0 0 50px #ef4444;
    animation: csrrFlash 4s steps(1, end) infinite;
    opacity: 0;
}


.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-bolt-1 { top: 10%; left:  5%;  animation-delay: 0s;   }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-bolt-2 { top: 25%; left: 88%;  animation-delay: 1s;   }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-bolt-3 { top: 70%; left:  8%;  animation-delay: 2s;   }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-bolt-4 { top: 80%; left: 90%;  animation-delay: 3s;   }


@keyframes csrrFlash {
    0%   { opacity: 0;   transform: scale(0.5); }
    3%   { opacity: 1;   transform: scale(1.2); }
    8%   { opacity: 0.7; transform: scale(1);   }
    13%  { opacity: 0;   transform: scale(1);   }
    100% { opacity: 0; }
}


/* Floating angry emojis drifting up. */

.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji {
    position: absolute;
    font-size: 30px;
    animation: csrrFloat 10s linear infinite;
    opacity: 0;
}


.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-1 { left: 12%; animation-delay: 0s;   font-size: 32px; }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-2 { left: 22%; animation-delay: -3s;  font-size: 26px; }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-3 { left: 78%; animation-delay: -1s;  font-size: 30px; }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-4 { left: 90%; animation-delay: -6s;  font-size: 28px; }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-5 { left:  6%; animation-delay: -8s;  font-size: 24px; }
.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-emoji-6 { left: 95%; animation-delay: -4s;  font-size: 32px; }


@keyframes csrrFloat {
    0%   { transform: translateY(110vh) rotate(-15deg);  opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-20vh) rotate(15deg);   opacity: 0; }
}


/* "ZEN" composure badge — eesier stays calm even when the lead is hostile.
   A floating circle near the phone with a calm icon. */

.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-zen {
    position: absolute;
    top: 50%;
    right: 8%;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    animation: csrrZenBreath 4s ease-in-out infinite;
}


.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-zen .csrr-zen-emoji {
    font-size: 28px;
}


.conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-zen .csrr-zen-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}


@keyframes csrrZenBreath {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.08); opacity: 1;   }
}


/* ============================================================================
   THEME 4: PARCERIA FECHADA — cyan, celebration + deal sealed. The two NEW
   "main" categories (along with ContornandoObjecoes below) get full creative
   treatment matching the first three; the four secondary categories below
   them use lighter theming.
   ============================================================================ */


.conversas-showcase.conversas-showcase--parceria-fechada {
    --cs-accent: #06b6d4;
    --cs-accent-soft: rgba(6, 182, 212, 0.25);
    background: linear-gradient(180deg, #051f30 0%, #02101a 100%);
}


/* Floating celebration emojis drifting up (handshakes, money, fireworks). */

.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji {
    position: absolute;
    font-size: 32px;
    animation: cspfFloat 11s linear infinite;
    opacity: 0;
}


.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-1 { left:  6%; animation-delay: 0s;   font-size: 32px; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-2 { left: 18%; animation-delay: -2s;  font-size: 28px; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-3 { left: 28%; animation-delay: -5s;  font-size: 36px; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-4 { left: 75%; animation-delay: -1s;  font-size: 30px; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-5 { left: 86%; animation-delay: -7s;  font-size: 26px; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-emoji-6 { left: 94%; animation-delay: -3s;  font-size: 32px; }


@keyframes cspfFloat {
    0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.7; }
    100% { transform: translateY(-20vh) rotate(20deg); opacity: 0; }
}


/* Confetti dots — small cyan + gold squares falling. */

.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti {
    position: absolute;
    width: 8px;
    height: 12px;
    animation: cspfFall 8s linear infinite;
    opacity: 0;
}


.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-1 { left: 12%; background: #06b6d4; animation-delay: 0s;   }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-2 { left: 24%; background: #fbbf24; animation-delay: -1.5s; }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-3 { left: 36%; background: #06b6d4; animation-delay: -3s;   }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-4 { left: 64%; background: #fbbf24; animation-delay: -2s;   }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-5 { left: 76%; background: #06b6d4; animation-delay: -4s;   }
.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-confetti-6 { left: 88%; background: #fbbf24; animation-delay: -6s;   }


@keyframes cspfFall {
    0%   { transform: translateY(-10vh) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.8; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}


/* Pulsing cyan ring around the phone — the "deal sealed" signal. */

.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 360px;
    margin: -180px 0 0 -180px;
    border: 3px solid #06b6d4;
    border-radius: 50%;
    opacity: 0;
    animation: cspfSealPulse 3s ease-out infinite;
}


.conversas-showcase--parceria-fechada .conversas-showcase__decorations .cspf-seal-2 { animation-delay: 1.5s; }


@keyframes cspfSealPulse {
    0%   { transform: scale(0.7); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0;   }
}


/* ============================================================================
   THEME 5: CONTORNANDO OBJEÇÕES — amber, redirect + judo move.
   ============================================================================ */


.conversas-showcase.conversas-showcase--contornando-objecoes {
    --cs-accent: #f59e0b;
    --cs-accent-soft: rgba(245, 158, 11, 0.25);
    background: linear-gradient(180deg, #2a1c0a 0%, #1a1208 100%);
}


/* Floating "redirect" arrow chevrons orbiting the phone area. */

.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-pivot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border: 2px dashed rgba(245, 158, 11, 0.4);
    border-radius: 50%;
    animation: cscoPivotSpin 18s linear infinite;
}


.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-pivot-2 {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-color: rgba(245, 158, 11, 0.6);
    animation: cscoPivotSpin 12s linear infinite reverse;
}


@keyframes cscoPivotSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Floating "objection-handling" symbols (shield, swords, redirect arrows). */

.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji {
    position: absolute;
    font-size: 32px;
    animation: cscoFloat 13s linear infinite;
    opacity: 0;
}


.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-1 { left:  8%; animation-delay: 0s;   font-size: 30px; }
.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-2 { left: 20%; animation-delay: -3s;  font-size: 36px; }
.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-3 { left: 30%; animation-delay: -6s;  font-size: 26px; }
.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-4 { left: 76%; animation-delay: -2s;  font-size: 32px; }
.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-5 { left: 86%; animation-delay: -8s;  font-size: 28px; }
.conversas-showcase--contornando-objecoes .conversas-showcase__decorations .csco-emoji-6 { left: 94%; animation-delay: -4s;  font-size: 30px; }


@keyframes cscoFloat {
    0%   { transform: translateY(110vh) rotate(-15deg); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.7; }
    100% { transform: translateY(-20vh) rotate(15deg);  opacity: 0; }
}


/* ============================================================================
   THEME 6: ENCONTROU TOMADOR DE DECISÃO — pink, gatekeeper passed.
   Lighter creative treatment (color theme + drifting emojis only).
   ============================================================================ */


.conversas-showcase.conversas-showcase--encontrou-tomador-decisao {
    --cs-accent: #ec4899;
    --cs-accent-soft: rgba(236, 72, 153, 0.25);
    background: linear-gradient(180deg, #2a0a1a 0%, #1a0510 100%);
}


.conversas-showcase--encontrou-tomador-decisao .conversas-showcase__decorations .cstd-emoji {
    position: absolute;
    font-size: 30px;
    animation: cstdFloat 14s linear infinite;
    opacity: 0;
}


.conversas-showcase--encontrou-tomador-decisao .conversas-showcase__decorations .cstd-emoji-1 { left: 10%; animation-delay: 0s;   font-size: 32px; }
.conversas-showcase--encontrou-tomador-decisao .conversas-showcase__decorations .cstd-emoji-2 { left: 22%; animation-delay: -4s;  font-size: 28px; }
.conversas-showcase--encontrou-tomador-decisao .conversas-showcase__decorations .cstd-emoji-3 { left: 80%; animation-delay: -2s;  font-size: 30px; }
.conversas-showcase--encontrou-tomador-decisao .conversas-showcase__decorations .cstd-emoji-4 { left: 90%; animation-delay: -7s;  font-size: 26px; }


@keyframes cstdFloat {
    0%   { transform: translateY(110vh) scale(0.8); opacity: 0; }
    15%  { opacity: 0.6; }
    85%  { opacity: 0.6; }
    100% { transform: translateY(-20vh) scale(1.1); opacity: 0; }
}


/* ============================================================================
   THEME 7: PEGOU O WHATSAPP — green, channel switch.
   ============================================================================ */


.conversas-showcase.conversas-showcase--pegou-whatsapp {
    --cs-accent: #22c55e;
    --cs-accent-soft: rgba(34, 197, 94, 0.25);
    background: linear-gradient(180deg, #0a2010 0%, #051208 100%);
}


.conversas-showcase--pegou-whatsapp .conversas-showcase__decorations .cspw-emoji {
    position: absolute;
    font-size: 30px;
    animation: cspwFloat 12s linear infinite;
    opacity: 0;
}


.conversas-showcase--pegou-whatsapp .conversas-showcase__decorations .cspw-emoji-1 { left:  8%; animation-delay: 0s;   font-size: 32px; }
.conversas-showcase--pegou-whatsapp .conversas-showcase__decorations .cspw-emoji-2 { left: 20%; animation-delay: -3s;  font-size: 28px; }
.conversas-showcase--pegou-whatsapp .conversas-showcase__decorations .cspw-emoji-3 { left: 78%; animation-delay: -1s;  font-size: 30px; }
.conversas-showcase--pegou-whatsapp .conversas-showcase__decorations .cspw-emoji-4 { left: 92%; animation-delay: -6s;  font-size: 26px; }


@keyframes cspwFloat {
    0%   { transform: translateY(110vh) rotate(-10deg); opacity: 0; }
    15%  { opacity: 0.65; }
    85%  { opacity: 0.65; }
    100% { transform: translateY(-20vh) rotate(10deg);  opacity: 0; }
}


/* ============================================================================
   THEME 8: INDICAÇÃO — emerald, referral chain.
   ============================================================================ */


.conversas-showcase.conversas-showcase--indicacao {
    --cs-accent: #10b981;
    --cs-accent-soft: rgba(16, 185, 129, 0.25);
    background: linear-gradient(180deg, #0a1f15 0%, #05120a 100%);
}


.conversas-showcase--indicacao .conversas-showcase__decorations .csid-emoji {
    position: absolute;
    font-size: 30px;
    animation: csidFloat 13s linear infinite;
    opacity: 0;
}


.conversas-showcase--indicacao .conversas-showcase__decorations .csid-emoji-1 { left: 10%; animation-delay: 0s;   font-size: 30px; }
.conversas-showcase--indicacao .conversas-showcase__decorations .csid-emoji-2 { left: 22%; animation-delay: -4s;  font-size: 28px; }
.conversas-showcase--indicacao .conversas-showcase__decorations .csid-emoji-3 { left: 78%; animation-delay: -2s;  font-size: 32px; }
.conversas-showcase--indicacao .conversas-showcase__decorations .csid-emoji-4 { left: 90%; animation-delay: -7s;  font-size: 26px; }


@keyframes csidFloat {
    0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.6; }
    85%  { opacity: 0.6; }
    100% { transform: translateY(-20vh) rotate(20deg); opacity: 0; }
}


/* ============================================================================
   THEME 9: INVOCOU A LGPD — amber/gold, judicial. Scales of justice + scrolls
   + shields drift up the canvas; two semi-transparent stamps ("LGPD" / "Art. 18")
   pulse in the background like court seals. Gold halo around the phone.
   ============================================================================ */


.conversas-showcase.conversas-showcase--invocou-lgpd {
    --cs-accent: #ca8a04;
    --cs-accent-soft: rgba(202, 138, 4, 0.25);
    background: linear-gradient(180deg, #2a1f08 0%, #15100a 100%);
}


.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji {
    position: absolute;
    font-size: 32px;
    animation: cslgRise 14s linear infinite;
    opacity: 0;
}

.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji-1 { left:  8%; animation-delay: 0s;   font-size: 36px; }
.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji-2 { left: 18%; animation-delay: -4s;  font-size: 28px; }
.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji-3 { left: 82%; animation-delay: -2s;  font-size: 38px; }
.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji-4 { left: 92%; animation-delay: -7s;  font-size: 30px; }
.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-emoji-5 { left: 50%; animation-delay: -10s; font-size: 26px; }


.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-stamp {
    position: absolute;
    font-family: 'Quicksand', sans-serif;
    font-weight: 900;
    font-style: italic;
    color: rgba(202, 138, 4, 0.18);
    border: 4px double rgba(202, 138, 4, 0.18);
    padding: 10px 25px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    pointer-events: none;
    animation: cslgStampPulse 4s ease-in-out infinite;
}

.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-stamp-1 {
    top: 18%;
    left: 8%;
    font-size: 36px;
    transform: rotate(-12deg);
    animation-delay: 0s;
}
.conversas-showcase--invocou-lgpd .conversas-showcase__decorations .cslg-stamp-2 {
    bottom: 22%;
    right: 8%;
    font-size: 24px;
    transform: rotate(8deg);
    animation-delay: 1.5s;
}


@keyframes cslgRise {
    0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.5; }
    85%  { opacity: 0.5; }
    100% { transform: translateY(-20vh) rotate(15deg); opacity: 0; }
}


@keyframes cslgStampPulse {
    0%, 100% { opacity: 0.5; transform: rotate(var(--cs-rot, -12deg)) scale(1); }
    50%      { opacity: 1;   transform: rotate(var(--cs-rot, -12deg)) scale(1.03); }
}


/* ============================================================================
   THEME 10: AQUECEU O CORAÇÃO — rose/pink, warm. Hearts of multiple shades
   rise from the bottom, twinkling sparkles glint at random positions. The
   phone glows in soft rose, like a sunset reflection. The most emotionally
   tender of the eleven themes.
   ============================================================================ */


.conversas-showcase.conversas-showcase--aqueceu-coracao {
    --cs-accent: #fb7185;
    --cs-accent-soft: rgba(251, 113, 133, 0.25);
    background: linear-gradient(180deg, #2a1018 0%, #15080d 100%);
}


.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart {
    position: absolute;
    font-size: 32px;
    animation: csacRiseHearts 12s linear infinite;
    opacity: 0;
}

.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-1 { left:  6%; animation-delay: 0s;   font-size: 34px; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-2 { left: 16%; animation-delay: -3s;  font-size: 28px; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-3 { left: 28%; animation-delay: -7s;  font-size: 36px; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-4 { left: 78%; animation-delay: -1s;  font-size: 30px; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-5 { left: 88%; animation-delay: -5s;  font-size: 38px; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-heart-6 { left: 95%; animation-delay: -9s;  font-size: 26px; }


.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-sparkle {
    position: absolute;
    font-size: 22px;
    animation: csacSparkle 3s ease-in-out infinite;
    opacity: 0;
}

.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-sparkle-1 { top: 18%; left: 12%; animation-delay: 0s; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-sparkle-2 { top: 28%; right: 12%; animation-delay: 0.6s; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-sparkle-3 { bottom: 25%; left: 8%; animation-delay: 1.2s; }
.conversas-showcase--aqueceu-coracao .conversas-showcase__decorations .csac-sparkle-4 { bottom: 20%; right: 18%; animation-delay: 1.8s; }


@keyframes csacRiseHearts {
    0%   { transform: translateY(110vh) scale(0.8) rotate(-10deg); opacity: 0; }
    20%  { opacity: 0.85; }
    50%  { transform: translateY(50vh) scale(1.1) rotate(0deg); }
    80%  { opacity: 0.85; }
    100% { transform: translateY(-20vh) scale(0.8) rotate(10deg); opacity: 0; }
}


@keyframes csacSparkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.2); }
}


/* ============================================================================
   THEME 11: CONVERSA NORMAL — gray, calm baseline. Most minimal of the eleven.
   ============================================================================ */


.conversas-showcase.conversas-showcase--conversa-normal {
    --cs-accent: #6b7280;
    --cs-accent-soft: rgba(107, 114, 128, 0.25);
    background: linear-gradient(180deg, #1a1d22 0%, #0a0d12 100%);
}


.conversas-showcase--conversa-normal .conversas-showcase__decorations .cscn-emoji {
    position: absolute;
    font-size: 28px;
    animation: cscnDrift 16s linear infinite;
    opacity: 0;
}


.conversas-showcase--conversa-normal .conversas-showcase__decorations .cscn-emoji-1 { left: 12%; animation-delay: 0s;  font-size: 28px; }
.conversas-showcase--conversa-normal .conversas-showcase__decorations .cscn-emoji-2 { left: 88%; animation-delay: -8s; font-size: 26px; }


@keyframes cscnDrift {
    0%   { transform: translateY(110vh); opacity: 0; }
    15%  { opacity: 0.4; }
    85%  { opacity: 0.4; }
    100% { transform: translateY(-20vh); opacity: 0; }
}


/* ============================================================================
   8. RESPONSIVE — DESKTOP (≥1024px). Phone scales up slightly, more
   breathing room, decorations adjusted.
   ============================================================================ */


@media (min-width: 1024px) {

    .conversas-showcase {
        padding: 100px 25px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__title {
        font-size: 64px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap {
        padding-bottom: 25px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone {
        max-width: 900px;
        aspect-ratio: 16 / 10;
        border-radius: 25px;
        padding: 10px;
        background: linear-gradient(145deg, #111827 0%, #020617 55%, #1f2937 100%);
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 10px 25px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 30px var(--cs-accent),
            0 0 80px var(--cs-accent);
        animation: csLaptopGlow 2s ease-in-out infinite;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -25px;
        transform: translateX(-50%);
        width: calc(100% + 50px);
        height: 25px;
        border-radius: 0 0 25px 25px;
        background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 100%);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        z-index: -1;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-notch,
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cs-iphone-statusbar {
        display: none;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen {
        border-radius: 10px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar {
        height: 50px;
        padding: 0 25px;
        border-bottom: 1px solid #e0e0e0;
        gap: 10px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-sep {
        display: block;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn {
        width: 40px;
        height: 40px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(3),
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(5),
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(6),
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(7),
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(8) {
        display: inline-flex;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header {
        padding: 25px;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 10px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-subject {
        flex: 0 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: 0;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-label,
    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-star {
        order: 0;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-messages {
        padding: 0 25px 25px 25px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg {
        padding: 25px 0;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row .cvr-gmail__msg-from-email {
        display: inline;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-action-btn:nth-of-type(2) {
        display: inline-flex;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-date {
        margin-right: 10px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-body {
        padding: 10px 0 0 50px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone .cs-iphone-screen .cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-actions-row {
        padding: 25px 0 0 50px;
    }

    /* Hide the zen badge on smaller screens; reposition it on desktop where
       there's room to the side of the phone. */

    .conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-zen {
        right: 18%;
    }

}


/* ============================================================================
   9. RESPONSIVE — MOBILE (≤1023px). Compact phone, fewer decorations to
   reduce visual noise, smaller typography.
   ============================================================================ */


@keyframes csLaptopGlow {
    0%, 100% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 10px 25px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 25px var(--cs-accent),
            0 0 70px var(--cs-accent);
    }
    50% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.5),
            0 10px 25px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 50px var(--cs-accent),
            0 0 130px var(--cs-accent);
    }
}


@media (max-width: 1023px) {

    .conversas-showcase {
        padding: 75px 25px;
    }

    .conversas-showcase .conversas-showcase__inner {
        gap: 50px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__title {
        font-size: 36px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__header .conversas-showcase__subtitle {
        font-size: 15px;
    }

    .conversas-showcase .conversas-showcase__inner .conversas-showcase__phone-wrap .cs-iphone {
        max-width: 320px;
    }

    /* Hide the zen badge on mobile — not enough room beside the phone. */

    .conversas-showcase--resposta-rude .conversas-showcase__decorations .csrr-zen {
        display: none;
    }

}