/* ========================================================================
   CONVERSAS REAIS — HOME SECTION (MACBOOK + GMAIL)
   ------------------------------------------------------------------------
   DESIGN INTENT
   • Spacing scale: 10 / 25 / 50px ONLY (font-sizes are the only exception).
   • Layout: flexbox only — never grid.
   • Brand palette: --color-primary, --color-secondary, --color-accent,
     --color-ink, --color-muted, --color-surface. The "ao vivo" indicator
     uses --color-accent (orange) instead of an off-palette red so the
     section stays inside the brand token set.
   • Symmetry: on desktop the macbook bleeds left and up out of the canvas
     while the right copy column anchors against the macbook's vertical
     center — the eyebrow / headline / lede form a tight, left-aligned
     stack with a single 25px rhythm between every element.
   ======================================================================== */


/* SECTION ROOT — overflow:visible so the macbook can bleed up into the
   previous section and off the left edge. Vertical padding inherits from
   the global section rule (75px / 200px); we override only on mobile.
   z-index:5 sits ABOVE NossosClientes (z:3) so the bleed-up macbook is
   never painted over by the previous section. */

.conversas-reais-home {
    position: relative;
    z-index: 5;
    background: var(--color-ink);
    overflow: visible;
}


/* WAVE DIVIDERS — top wave fill matches the previous section
   (#dbeafe = nossos-clientes); bottom wave fill matches the next section
   (#ffffff = como-funciona, transparent over the light body). The
   personalização fragment is now a CHILD of this section (not a
   sibling), so the boundary that used to live between them is gone —
   one DOM section, one dark canvas, one continuous narrative. */

.conversas-reais-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,0 1440,80 L1440,0 L0,0 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    transform: translateY(-1px);
}


.conversas-reais-home::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,0 1440,80 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}


/* INNER LAYOUT — sits above the wave dividers (z-index:10) so the
   bleed-up macbook is never clipped by the top wave. */

.conversas-reais-home .conversas-reais-home__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}


/* ROW — WRAPS MOCKUP (LEFT) + CONTROLS (RIGHT). STACKS COLUMN ON MOBILE,
   FLIPS TO ROW ON DESKTOP. THE HEADING (.conversas-reais-home__copy-col)
   SITS BELOW THIS ROW AS A SIBLING WITHIN .conversas-reais-home__inner. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}


/* CONTROLS COLUMN — TOOK THE HEADING'S OLD SPOT BESIDE THE MOCKUP. HOLDS
   THE LEAD-META PILL + SHUFFLE BUTTON, STACKED VERTICALLY AND LEFT-ALIGNED.
   ON DESKTOP IT BECOMES A TINTED PANEL THAT TUCKS BEHIND THE MOCKUP — SEE
   THE MEDIA QUERY BELOW. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
}


/* RIGHT COLUMN — copy. Centered on mobile, left-anchored on desktop.
   The 25px gap creates a single consistent vertical rhythm between
   eyebrow, headline, and lede. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}


/* DARK-SURFACE TYPOGRAPHY — the section runs on var(--color-ink), so the
   canonical .section-title (primary blue) and .section-subtitle (muted) need
   to flip to white / 70% white per the dark-section pattern in the design
   system. Scoped to this section so other consumers of _SectionHeader stay
   on the canonical light-surface treatment. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .section-header .section-title {
    color: #ffffff;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .section-header .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}


/* DARK-SURFACE LOGO — the canonical _SectionHeader uses logo-outline-blue.png,
   which is invisible on var(--color-ink). Standard design-system trick to flip
   it to white without swapping the asset URL. Same pattern the dark `.header`
   uses to whiten the global logo. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .section-header .conheca-header-logo {
    filter: brightness(0) invert(1);
}


/* GRADIENT BOTTOM CONNECTOR — physically threads the heading area into the
   arrow below. A horizontal cyan→transparent line sits at the bottom of the
   heading container, anchored to the LEFT (where the arrow originates from at
   desktop). Same cyan-blue palette + glow as the arrow stroke + the bridge
   headline gradient — three elements, one chromatic thread, one continuous
   beat. Desktop only: on mobile the heading is centered and the arrow is a
   simple vertical line, so a left-anchored connector would be off-axis. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col {
    position: relative;
}


@media (min-width: 1024px) {

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, #4fbefe 0%, rgba(79, 190, 254, 0) 100%);
        box-shadow: 0 0 25px rgba(79, 190, 254, 0.4);
        pointer-events: none;
    }

}


/* LIVE PILL POSITIONING — shared across all .section-title hosts via the
   generic rule in components.css (.section-title .eesier-live-pill).
   No section-specific override needed here. */


/* EYEBROW — slim, uppercase live indicator (replaces the old puffy badge).
   No padding / background, so it visually weighs the same as the body
   copy and never competes with the headline. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    cursor: help;
    outline: none;
    white-space: nowrap;
}


/* LIVE DOT — orange accent (brand token). Pulses to signal real-time. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow .conversas-reais-home__eyebrow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgba(255, 111, 60, 0.5);
    animation: cvrPulse 3s ease-in-out infinite;
}


@keyframes cvrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 111, 60, 0.5); }
    60%  { box-shadow: 0 0 0 10px rgba(255, 111, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 111, 60, 0); }
}


/* "AO VIVO" LABEL — accent orange, bold, matches the dot. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow .conversas-reais-home__eyebrow-label {
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 1.6px;
}


/* SEPARATOR DOT — vertically centered between the LIVE label and the
   sub-label so the two strings read as a single line of meta. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow .conversas-reais-home__eyebrow-sep {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.15);
    flex-shrink: 0;
    /* Visual size of the dot is controlled via inset, NOT width — keeps
       the spacing scale clean while the dot still reads as small. */
    transform: scale(0.4);
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow .conversas-reais-home__eyebrow-sub {
    color: var(--color-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}


/* TOOLTIP ON HOVER / FOCUS OF THE EYEBROW */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: max-content;
    max-width: 320px;
    padding: 10px;
    border-radius: 10px;
    background: var(--color-ink);
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 30;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-ink) transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 30;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:hover::after,
.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:focus-visible::after,
.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:hover::before,
.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* HEADLINE — matches the project's standard .section-title size (32px)
   for cross-section consistency. Tight line-height so the two-liner
   reads as one block. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__title {
    margin: 0;
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-size: 32px;
}


/* DESKTOP — match the hero .headline scale (48px ≥ 1024px). */

@media (min-width: 1024px) {

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__title {
        font-size: 48px;
    }

}


/* LEDE — short, impactful, constrained narrower than the headline so the
   eye returns to the macbook on the left rather than running off the
   right edge. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__lede {
    margin: 0;
    max-width: 420px;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.6;
}


/* SHUFFLE CONTROL — utility-level pill (not a CTA), absolute-positioned
   inside the stage-col so it doesn't stretch the column height. Sits ON
   the boundary between the white section and the dark wave below for a
   "floating widget" feel. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 5;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    -webkit-font-smoothing: antialiased;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn:hover {
    color: var(--color-ink);
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.08);
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}


/* LOADING STATE — button is hidden entirely while a fetch is in flight.
   The loading legend inside the macbook screen ("Procurando uma nova
   conversa") is the visible affordance during loading; the button
   reappears once the new conversation lands. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn:disabled,
.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn[disabled],
.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action .conversas-reais-home__shuffle-btn.is-loading {
    visibility: hidden;
    pointer-events: none;
}


/* LEFT COLUMN — STAGE (macbook + lead-meta + absolute shuffle).
   z-index above the wave dividers so the bleed-up macbook is never
   clipped by them. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}


/* MACBOOK MOCKUP — proportions kept Apple-authentic (16/10 screen,
   chassis hinge below). Drop shadow is layered (close + far) for depth
   without looking like a stamp. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 25px 50px rgba(15, 23, 42, 0.22)) drop-shadow(0 10px 10px rgba(15, 23, 42, 0.08));
}


/* MACBOOK SCREEN BEZEL — matte black gradient, symmetric 10px padding
   (was previously 14/14/18 — asymmetric and broke the spacing scale). */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook .conversas-reais-home__macbook-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(180deg, #1f2024 0%, #14141a 50%, #0a0a0d 100%);
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}


/* CAMERA — small dot centered in the top bezel. Width/height are
   icon-tier (cosmetic detail at sub-bezel size), kept at 10px so the
   dot stays visible without crowding the 10px bezel; transform:scale
   visually shrinks it to a believable lens dot while keeping the box
   model on the spacing scale. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook .conversas-reais-home__macbook-screen .conversas-reais-home__macbook-camera {
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, calc(50% - 1px)) scale(0.5);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4a4a52 0%, #1a1a1f 70%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.3);
    /* TODO: if the user wants the authentic 2024 MacBook notch instead
       of a centered camera dot, swap this for a pill shape (40px wide,
       10px tall, top-rounded) anchored to the top edge. */
}


/* DISPLAY — absolute-positioned inside the bezel so the screen height
   stays locked to its aspect-ratio even when the thread has many
   messages. Inset matches the 10px bezel padding. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook .conversas-reais-home__macbook-screen .conversas-reais-home__macbook-display {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}


/* MACBOOK BASE — chassis hinge, Apple-silver gradient, slightly wider
   than the screen (104%) so it reads as the laptop's lower lip. The
   notch indent at the top center is the lid-open finger groove. */

/* CHASSIS HINGE — 25px tall reads as a believable lower lip; thinner
   than that and the laptop looks cartoonish. 104% width creates the
   subtle overhang that suggests the keyboard deck below. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook .conversas-reais-home__macbook-base {
    position: relative;
    width: 104%;
    height: 25px;
    background: linear-gradient(180deg, #d4d6da 0%, #b8bbc0 35%, #8d9095 100%);
    border-radius: 0 0 25px 25px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(15, 23, 42, 0.15);
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook .conversas-reais-home__macbook-base .conversas-reais-home__macbook-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18%;
    height: 25%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.06) 100%);
    border-radius: 0 0 10px 10px;
}


/* ============== GMAIL THREAD VIEW (compact, Gmail-authentic) ============== */

.cvr-gmail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #202124;
    font-family: 'Roboto', Arial, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* TOP TOOLBAR — gmail action icons (back / archive / spam / delete /
   mark-unread / snooze / move / label / more). 40px tall, hairline bottom
   border, identical icon button treatment to real gmail (28px hover ring,
   #5f6368 icon color, 50% radius). */

.cvr-gmail .cvr-gmail__toolbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    height: 40px;
    flex-shrink: 0;
    border-bottom: 1px solid #f1f3f4;
    background: #ffffff;
}


.cvr-gmail .cvr-gmail__toolbar .cvr-gmail__toolbar-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 120ms ease;
}


.cvr-gmail .cvr-gmail__toolbar .cvr-gmail__toolbar-btn + .cvr-gmail__toolbar-btn {
    margin-left: 0;
}


.cvr-gmail .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:hover {
    background: rgba(60, 64, 67, 0.08);
}


.cvr-gmail .cvr-gmail__toolbar .cvr-gmail__toolbar-sep {
    width: 1px;
    height: 18px;
    background: #dadce0;
    flex-shrink: 0;
    margin: 0 10px;
}


.cvr-gmail .cvr-gmail__toolbar .cvr-gmail__toolbar-spacer {
    flex: 1;
}


/* THREAD CONTAINER — fills the full display, flat white like real Gmail. */

.cvr-gmail .cvr-gmail__thread {
    flex: 1;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-loading {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #5f6368;
    padding: 25px;
    text-align: center;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-loading .cvr-gmail__loading-spinner {
    width: 25px;
    height: 25px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: cvrSpin 800ms linear infinite;
}


/* LOADING LEGEND — sits beneath the spinner, replaces the visible button
   as the affordance while a fetch is in flight. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-loading .cvr-gmail__loading-legend {
    color: #5f6368;
    font-size: 13px;
}


@keyframes cvrSpin {
    to { transform: rotate(360deg); }
}


/* THREAD-CONTENT — the one scrollable box. Header + messages scroll
   together (NO sticky/pinned subject row, per product requirement). */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 64, 67, 0.25) transparent;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content::-webkit-scrollbar-track {
    background: transparent;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content::-webkit-scrollbar-thumb {
    background: rgba(60, 64, 67, 0.25);
    border-radius: 50px;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 64, 67, 0.45);
}


/* RAZOR-RENDERED THREAD WRAPPER — regular block flow, scrolls with parent. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content #cvr-rendered-thread {
    display: block;
}


/* SUBJECT ROW — 22px Google Sans, scrolls with the thread (not pinned).
   Rectangular label chip + star icon at the right edge match the real
   Gmail open-thread layout exactly. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: #ffffff;
    margin-bottom: 10px;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-subject {
    font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #202124;
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1.4;
}


/* RECTANGULAR LABEL CHIP — 4px radius (NOT 50px pill), 1px outline in
   #dadce0, no fill. Matches Gmail's "Caixa de entrada" chip on the open
   thread view. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-label {
    padding: 0 10px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid #dadce0;
    color: #5f6368;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    align-self: center;
}


/* SUBJECT-ROW STAR — 28px hover ring identical to the toolbar buttons. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-star {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 120ms ease;
}


.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-star:hover {
    background: rgba(60, 64, 67, 0.08);
}


/* MESSAGES LIST — flat-divider style (no per-message cards). Each
   message provides its own vertical padding (25px) and a hairline
   bottom border that acts as the inter-message divider. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-messages {
    padding: 0 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* GMAIL MESSAGE CARD — gmail uses NO card border on individual messages
   inside an open thread; messages are separated by a hairline divider.
   Slight padding gives breathing room. */

.cvr-gmail .cvr-gmail__msg {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #f1f3f4;
    border-radius: 0;
    padding: 25px 0 25px 0;
}


.cvr-gmail .cvr-gmail__msg:last-of-type {
    border-bottom: none;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: default;
}


/* AVATAR — 40px flat solid color, regular weight initial. No gradient,
   no inset shadow. Color is set via inline style from a deterministic
   hash so each sender gets a stable color. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 400;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    overflow: hidden;
}


/* EESIER (OUTBOUND) AVATAR — whitish background with the main eesier
   logo (full color) inside, signaling the message was authored by the
   eesier agent. Replaces the deterministic-color letter avatar for
   outbound messages. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__avatar.cvr-gmail__avatar--eesier {
    background: #f6f7fc;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__avatar.cvr-gmail__avatar--eesier img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
}


/* SENDER META — two stacked rows. Top row: bold name + gray email.
   Bottom row: "para mim" / "para <recipient>" + chevron. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.3;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row .cvr-gmail__msg-from-name {
    font-weight: 700;
    font-size: 14px;
    color: #202124;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row .cvr-gmail__msg-from-email {
    font-weight: 400;
    font-size: 12px;
    color: #5f6368;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-para-row {
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 1.3;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-para-row .cvr-gmail__msg-para-text {
    font-size: 12px;
    color: #5f6368;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-para-row .cvr-gmail__msg-para-chevron {
    flex-shrink: 0;
}


/* RIGHT-SIDE STACK — timestamp + star + reply icons (real gmail per-message
   controls). Date sits on baseline; icons are 28px hover-ring buttons. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-date {
    color: #5f6368;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 10px;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 120ms ease;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-action-btn:hover {
    background: rgba(60, 64, 67, 0.08);
}


/* BODY — 14px Roboto, 50px left indent so it aligns with the start of
   the sender name (40px avatar + 10px gap = 50px). */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-body {
    padding: 10px 0 0 50px;
    color: #202124;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
}


/* REPLY / FORWARD ACTION ROW — appended only on the last message of the
   thread. Outlined pill buttons matching gmail's exact treatment:
   1px #dadce0 border, #1a73e8 icon + label, 50px radius, 25px gap. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-actions-row {
    display: flex;
    gap: 10px;
    padding: 10px 0 0 50px;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-actions-row .cvr-gmail__msg-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border: 1px solid #dadce0;
    background: #ffffff;
    border-radius: 50px;
    color: #1a73e8;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-actions-row .cvr-gmail__msg-action-pill:hover {
    background: #f6fafe;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}


/* PARAGRAPH SPACING — Razor emits <p>…</p> blocks, gap stays at 10px
   instead of double-<br> puff. */

.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-body p {
    margin: 0;
}


.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-body p + p {
    margin-top: 10px;
}


/* REDACTED CONTENT — subtle blurred tape, NO hover reveal (privacy is
   not a tease). Applied wherever pre-redacted spans live: thread subject,
   message sender name/email row, and message body. */

.cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-subject .redacted,
.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row .cvr-gmail__msg-from-name .redacted,
.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-from-row .cvr-gmail__msg-from-email .redacted,
.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-text .cvr-gmail__msg-para-row .cvr-gmail__msg-para-text .redacted,
.cvr-gmail .cvr-gmail__msg .cvr-gmail__msg-body .redacted {
    filter: blur(4px);
    user-select: none;
}


/* LEAD META — discreet frosted pill below the macbook. Holds CNAE +
   city/state from the rendered thread, never the lead's identity. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__lead-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    visibility: hidden;
}


/* TIME-AGO ROW — mirrors the lead-meta visual rhythm: 14px icon + muted
   text. Sits directly below the lead-meta in the controls panel.
   Visibility-hidden until JS lifts the language-aware label from the
   #cvr-rendered-time-ago template emitted by _ConversaThread. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__time-ago {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    visibility: hidden;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__time-ago .conversas-reais-home__time-ago-icon {
    display: inline-flex;
    color: var(--color-secondary);
}


/* CATEGORY INFO BLOCK — CLIMACTIC OUTCOME OF THE THREAD WITH AN EXPLANATORY
   LEGEND BELOW. NOT A BUTTON: SMALL CATEGORY-COLORED DOT + BOLD LABEL +
   ONE-LINE LEGEND IN MUTED TEXT. JS TOGGLES `display: flex` WHEN A KEY IS
   PRESENT — UNTAGGED THREADS RENDER WITHOUT THE BLOCK. DOT COLOR MATCHES
   THE /conversas PAGE BADGE PALETTE SO THE SAME CONVERSATION CARRIES THE
   SAME VISUAL CATEGORY ACROSS SURFACES. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category {
    display: none;
    flex-direction: column;
    /* No gap — the natural line-height padding on the label (1.2-ish,
       inherited) and legend (1.5, set explicitly) provides all the
       breathing room needed between the two lines. Tighter than any
       value on the 10/25/50 scale because they read as one info-block,
       not two separate elements. */
    gap: 0;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category .conversas-reais-home__category-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category .conversas-reais-home__category-label .conversas-reais-home__category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cvr-active-color, #6b7280);
    flex-shrink: 0;
    box-shadow: 0 0 12px var(--cvr-active-color, transparent);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category .conversas-reais-home__category-legend {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
    /* Hangs under the label text, not the dot. The label has a 10px dot
       + 10px flex-gap before its text, so 20px of padding here aligns the
       legend's left edge with the label's first character. Off the standard
       10/25/50 spacing scale, but this is a typographic alignment value
       (dot-width + label-gap), not a layout-rhythm spacing primitive. */
    padding-left: 20px;
}


/* Capitalize the first letter of the legend automatically — keeps the
   controller strings lowercase ("o eesier fechou…") for consistent
   sentence-case storage but renders them as proper sentences ("O eesier
   fechou…") on the page. Works across all 9 PT + 9 EN legends without
   touching the controllers. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category .conversas-reais-home__category-legend::first-letter {
    text-transform: uppercase;
}


/* CATEGORY COLOR VARIABLE — set once on the section root via the JS-managed
   data-active-category attribute. Cascades to BOTH the category dot inside
   the controls panel AND the animated halo on the macbook/iphone frames so
   the device frame literally lights up the color of the email being shown.
   Mirrors the /conversas page badge palette exactly. */

.conversas-reais-home {
    --cvr-active-color: transparent;
}


.conversas-reais-home[data-active-category="ConversaNormal"]          { --cvr-active-color: #6b7280; }
.conversas-reais-home[data-active-category="Indicacao"]               { --cvr-active-color: #10b981; }
.conversas-reais-home[data-active-category="LeadInteressado"]         { --cvr-active-color: #3b82f6; }
.conversas-reais-home[data-active-category="RespostaRude"]            { --cvr-active-color: #ef4444; }
.conversas-reais-home[data-active-category="ContornandoObjecoes"]     { --cvr-active-color: #f59e0b; }
.conversas-reais-home[data-active-category="ReuniaoMarcada"]          { --cvr-active-color: #8b5cf6; }
.conversas-reais-home[data-active-category="ParceriaFechada"]         { --cvr-active-color: #06b6d4; }
.conversas-reais-home[data-active-category="EncontrouTomadorDecisao"] { --cvr-active-color: #ec4899; }
.conversas-reais-home[data-active-category="PegouWhatsapp"]           { --cvr-active-color: #22c55e; }
.conversas-reais-home[data-active-category="InvocouLgpd"]             { --cvr-active-color: #ca8a04; }
.conversas-reais-home[data-active-category="AqueceuCoracao"]          { --cvr-active-color: #fb7185; }


/* DEVICE GLOW HALO — animated category-colored aura around the macbook (desktop)
   and iphone (mobile). Two layered drop-shadows of the same color: an inner
   close glow (25→55px) for definition, an outer halo (80→160px) for atmospheric
   reach. The halo breathes between two states on a 2.5s ease-in-out loop —
   slow enough to feel premium, dramatic enough in contrast to feel video-gamey.
   The colored layers ride on top of the existing depth drop-shadows so the
   device's lifted feel is preserved. Color comes from --cvr-active-color, so
   when no category is active the colored layers stay transparent and the
   animation is invisible. */

@keyframes cvrMacbookGlow {
    0%, 100% {
        filter:
            drop-shadow(0 25px 50px rgba(15, 23, 42, 0.22))
            drop-shadow(0 10px 10px rgba(15, 23, 42, 0.08))
            drop-shadow(0 0 8px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent))
            drop-shadow(0 0 25px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent));
    }
    50% {
        filter:
            drop-shadow(0 25px 50px rgba(15, 23, 42, 0.22))
            drop-shadow(0 10px 10px rgba(15, 23, 42, 0.08))
            drop-shadow(0 0 35px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent))
            drop-shadow(0 0 90px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent));
    }
}


@keyframes cvrIphoneGlow {
    0%, 100% {
        box-shadow:
            0 25px 50px rgba(15, 23, 42, 0.22),
            0 10px 25px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 8px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent),
            0 0 25px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent);
    }
    50% {
        box-shadow:
            0 25px 50px rgba(15, 23, 42, 0.22),
            0 10px 25px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 35px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent),
            0 0 90px color-mix(in srgb, var(--cvr-active-color, transparent) 70%, transparent);
    }
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__stage-col .conversas-reais-home__macbook {
    animation: cvrMacbookGlow 2s ease-in-out infinite;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__stage-col .conversas-reais-home__iphone {
    animation: cvrIphoneGlow 2s ease-in-out infinite;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__lead-meta .conversas-reais-home__lead-meta-pin {
    display: inline-flex;
    color: var(--color-secondary);
}


/* ============== IPHONE MOCKUP — MOBILE STAGE ============================
   Same chassis language as the /conversas page (--cv-phone-bezel,
   --cv-phone-radius). Tall portrait aspect ratio, notch at the top, iOS
   status bar, then the gmail mobile app interface fills the rest.
   ======================================================================= */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 19.5;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.22), 0 10px 25px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


/* IPHONE NOTCH — pill at the top center, sits inside the screen area. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 25px;
    background: #1a1a1a;
    border-radius: 0 0 25px 25px;
    z-index: 3;
}


/* IPHONE SCREEN — flat white, fills the chassis minus the 10px bezel. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* IOS STATUS BAR — purely visual. Time on the left, sig/wifi/battery on
   the right. Sits flush at the top, padding accounts for the notch. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-screen .conversas-reais-home__iphone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    height: 35px;
    flex-shrink: 0;
    font-family: 'Roboto', Arial, sans-serif;
    color: #000000;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-screen .conversas-reais-home__iphone-statusbar .conversas-reais-home__iphone-statusbar-time {
    font-weight: 600;
    font-size: 14px;
}


.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-screen .conversas-reais-home__iphone-statusbar .conversas-reais-home__iphone-statusbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


/* The gmail-mobile container fills whatever's left of the screen. */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone .conversas-reais-home__iphone-screen .cvr-gmail--mobile {
    flex: 1;
    min-height: 0;
}


/* ============== GMAIL MOBILE APP INTERFACE OVERRIDES ====================
   The same _ConversaThread Razor partial renders inside both devices.
   These rules retarget the markup to look like the gmail iOS / android
   app instead of the gmail web open-thread view.
   ======================================================================= */

.cvr-gmail.cvr-gmail--mobile {
    font-size: 14px;
}


/* Mobile gmail toolbar — only 4 buttons (back, archive, trash, more).
   The other desktop-only buttons hide. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar {
    height: 50px;
    padding: 0 10px;
    border-bottom: none;
    gap: 0;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-sep {
    display: none;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn {
    width: 35px;
    height: 35px;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn svg {
    width: 22px;
    height: 22px;
}


/* Hide spam, mark-unread, snooze, move, label — keep back, archive,
   trash, more. Buttons are in DOM order: back, archive, spam, trash,
   mark-unread, snooze, move, label, more. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(3),
.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(5),
.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(6),
.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(7),
.cvr-gmail.cvr-gmail--mobile .cvr-gmail__toolbar .cvr-gmail__toolbar-btn:nth-of-type(8) {
    display: none;
}


/* Subject row — larger 24px Google Sans, no rectangular label chip
   (mobile gmail moves the label to a smaller secondary row). */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header {
    padding: 10px 25px;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-subject {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    order: 1;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-label {
    order: 2;
    font-size: 11px;
    line-height: 1.6;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-header .cvr-gmail__thread-star {
    order: 3;
    margin-left: auto;
}


/* Messages list — tighter horizontal padding (mobile uses 10px gutters). */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__thread .cvr-gmail__thread-content .cvr-gmail__thread-messages {
    padding: 10px;
}


/* Each message — vertical padding shrinks to 10px to keep more visible
   on the small screen. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg {
    padding: 10px 0;
}


/* Sender row — stacks more compactly. Hide email next to name on the
   smallest screens (it shows on the secondary row instead). */

.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: none;
}


/* Per-message right-side controls — drop the inline reply button on
   mobile (gmail mobile shows it in the bottom action bar of the last
   message instead). Keep date + star. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0;
}


.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: none;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-head .cvr-gmail__msg-head-actions .cvr-gmail__msg-date {
    margin-right: 0;
    font-size: 11px;
}


/* Body — same indent (50px) so it lines up with sender name. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-body {
    padding: 10px 0 0 50px;
    font-size: 14px;
    line-height: 1.5;
}


/* Reply / Forward bottom row — full-width pills, gmail mobile style. */

.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-actions-row {
    padding: 10px 0 0 50px;
    gap: 10px;
    flex-wrap: wrap;
}


.cvr-gmail.cvr-gmail--mobile .cvr-gmail__msg .cvr-gmail__msg-actions-row .cvr-gmail__msg-action-pill {
    padding: 10px;
    font-size: 13px;
    flex: 1;
    justify-content: center;
}


/* ============== RESPONSIVE — DEVICE VISIBILITY =========================
   Macbook visible only ≥1024px, iphone visible only <1024px. Both stay
   in the DOM so the JS can keep them in sync (a viewport resize never
   reveals a stale device).
   ======================================================================= */

.conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone {
    display: none;
}


@media (max-width: 1023px) {

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook {
        display: none;
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__iphone {
        display: flex;
    }
}


/* RESPONSIVE — DESKTOP (≥1024px). Two-column layout: macbook bleeds
   left + up, copy column anchors against the macbook's vertical center
   so the eyebrow / headline / lede form a clean optical line with the
   gmail subject row to its left. */

@media (min-width: 1024px) {

    /* INNER STAYS FLEX-COLUMN ON ALL BREAKPOINTS — THE __ROW HANDLES ITS OWN
       SIDE-BY-SIDE LAYOUT, AND __COPY-COL SITS BELOW IT AS A FULL-WIDTH SIBLING. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }


    /* CONTROLS PANEL — VISUALLY EMERGES FROM BEHIND THE MOCKUP, SO THESE
       CONTROLS READ AS TETHERED TO THE SCREEN BESIDE THEM. THREE LAYERED
       TRICKS:
         1. `margin-left: -100px` shifts the column left through the 50px
            row gap and 50px past the mockup's right edge — the panel's
            left half ends up behind the macbook chassis.
         2. `z-index: 5` is below the stage-col's z-index (10) so the
            macbook stays in front and visually covers the tucked portion.
         3. Asymmetric `border-radius` (0 on the left side, 25px on the
            right) so the visible edge reads as the panel emerging from
            behind the device — never a floating disconnected card.
       Inside, `padding-left: 100px` pushes the content back to exactly
       50px right of the mockup's right edge (50px gap + 50px breathing
       room), satisfying the spec. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col {
        flex: 1 1 420px;
        max-width: 560px;
        align-self: center;
        position: relative;
        z-index: 5;
        margin-left: -100px;
        padding: 25px 50px 25px 100px;
        background: #1e293b;
        border-radius: 0 25px 25px 0;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    }


    /* Tooltip anchors to the eyebrow's left edge on desktop (left-aligned
       copy block) instead of centering. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow::after,
    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow::before {
        left: 25px;
        transform: translateX(0) translateY(5px);
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:hover::after,
    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:focus-visible::after,
    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:hover::before,
    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow:focus-visible::before {
        transform: translateX(0) translateY(0);
    }


    /* STAGE-COL — bleeds 50px left of the content-inner. The macbook
       inside also gets 50px of up-bleed via negative margin-top. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col {
        flex: 0 1 750px;
        max-width: 750px;
        align-self: center;
        margin-left: -50px;
    }


    /* MACBOOK BLEED-UP — 200px into the 300px reserved at the bottom of
       NossosClientes. Leaves 50px of breathing room above the macbook so
       it doesn't crash into the NossosClientes CTA. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__stage-col .conversas-reais-home__macbook {
        margin-top: -200px;
    }


    /* HEADING — left-align ONLY at desktop. Mobile inherits the canonical
       .section-header (text-align: center) and .conheca-header-with-logo
       (align-items: center) for free, no override needed. We can't use the
       canonical .section-header--left modifier here because it's static
       (always-left) and we want viewport-conditional behavior. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .section-header {
        text-align: left;
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conheca-header-with-logo {
        align-items: flex-start;
    }
}


/* RESPONSIVE — TABLET / MOBILE (≤1023px). Stacks the layout with copy
   first, iphone second. The iphone provides its own internal padding
   so the stage-col itself stays simple. */

@media (max-width: 1023px) {

    /* Section frame — symmetric 50px top / 50px bottom on mobile. */

    .conversas-reais-home {
        padding-top: 50px;
        padding-bottom: 50px;
    }


    /* Stack order on mobile: heading → device → controls → personalização.
       Flips the desktop order (where the mockup appears above the heading
       and personalização is the visual finale) by reversing the inner
       flex direction. The personalização fragment is a SIBLING of __inner,
       not a child, so it stays at the bottom regardless of this reverse. */

    .conversas-reais-home .conversas-reais-home__inner {
        flex-direction: column-reverse;
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__stage-col {
        align-items: center;
    }


    /* Controls-col centers on mobile (the panel chrome turns off below 1024px,
       so the lead-meta + time-ago + shuffle stack reads better centered).
       The heading auto-centers from the canonical .section-header /
       .conheca-header-with-logo defaults — no override needed.

       Tighter internal spacing too: 10px between the controls items on mobile
       (down from desktop's 25px) so the info block reads as one cohesive
       group rather than a loose vertical list. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col {
        align-items: center;
        text-align: center;
        gap: 10px;
    }


    /* Tighter handoff between the iPhone and the controls panel — desktop's
       50px row gap is too generous on a 360-400px viewport and pushes the
       primary CTA (shuffle) too far from the phone. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row {
        gap: 25px;
    }


    /* Information hierarchy on mobile: iPhone → ACTION → context. Move the
       shuffle button to the TOP of the controls stack via flex `order: -1`
       so it lands right below the phone. Category info-block, lead-meta,
       and time-ago follow as supporting context. The desktop order
       (category → meta → time → shuffle) reads top-to-bottom in a tucked
       side panel; mobile inverts because the action's proximity to the
       phone matters more than the metadata's. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__action {
        order: -1;
    }


    /* Center the category info-block contents on mobile. The category
       container is `flex-direction: column`, so without an explicit
       align-items the label box stretches full-width and pins the dot
       to the far left edge of the controls column. align-items: center
       makes the label content-sized and centered. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category {
        align-items: center;
    }


    /* Drop the desktop padding-left hanging-indent on the legend. That
       20px was a typographic alignment trick to hang the legend under
       the label TEXT (past the dot + label-gap) when both lines are
       left-aligned. On mobile everything is centered, so the indent
       just shoves the legend off-center. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__category .conversas-reais-home__category-legend {
        padding-left: 0;
    }


    /* Eyebrow wraps to two lines on small screens. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__eyebrow {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
    }


    /* Headline — keeps the 32px scale at mobile. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__title {
        text-align: center;
    }


    /* Lede — unconstrained max-width on mobile. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__copy-col .conversas-reais-home__lede {
        max-width: 100%;
        font-size: 15px;
        text-align: center;
    }


    /* Lead-meta pill — tighter padding on mobile, on the spacing scale. */

    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__lead-meta {
        font-size: 12px;
        max-width: 100%;
        text-align: center;
    }


    .conversas-reais-home .conversas-reais-home__inner .conversas-reais-home__row .conversas-reais-home__controls-col .conversas-reais-home__lead-meta .conversas-reais-home__lead-meta-text {
        white-space: normal;
        word-break: break-word;
    }
}