@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700;800;900&display=swap');

.sf-recados-host,
.sf-recados-host *{
    box-sizing:border-box;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
}

.sf-recados-host{
    --rw-gold:#e4b657;
    --rw-gold2:#f0ca77;
    background:
        radial-gradient(circle at 10% 0%,rgba(228,182,87,.10),transparent 26%),
        radial-gradient(circle at 100% 100%,rgba(37,115,255,.08),transparent 28%),
        linear-gradient(180deg,#09111d,#06101a)!important;
    border-color:rgba(228,182,87,.72)!important;
}

.sf-recados-host .recados-widget{
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sf-recados-host .rw-head{
    flex:0 0 auto;
}

.sf-recados-host .rw-head h2{
    margin:0!important;
    color:var(--rw-gold2)!important;
    font-size:1.18rem!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
}

.sf-recados-host .rw-stage{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    padding:0 18px;
    display:flex;
    align-items:center;
}

.sf-recados-host .rw-list{
    width:100%;
    min-height:0;
    display:flex;
    align-items:center;
}

.sf-recados-host .rw-loading,
.sf-recados-host .rw-empty{
    width:100%;
    min-height:230px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#9eb0c7;
    font-size:.82rem;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    background:rgba(12,24,40,.58);
}

.sf-recados-host .rw-card{
    --accent:#28c5ff;
    position:relative;
    width:100%;
    height:268px;
    max-height:100%;
    min-height:238px;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 90% 12%,rgba(40,130,255,.10),transparent 26%),
        linear-gradient(180deg,#0d1a2a,#091220);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 0 18px rgba(40,130,255,.06);
}

.sf-recados-host .rw-card::before{
    content:'';
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:var(--accent);
    box-shadow:0 0 14px var(--accent);
}

.sf-recados-host .rw-userline{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:11px;
    align-items:center;
    flex:0 0 56px;
}

.sf-recados-host .rw-avatar{
    width:54px;
    height:54px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:2px solid var(--accent);
    box-shadow:
        0 0 0 3px rgba(255,255,255,.03),
        0 0 18px color-mix(in srgb,var(--accent) 28%,transparent);
}

.sf-recados-host .rw-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sf-recados-host .rw-avatar svg{
    width:36px;
    height:36px;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.14));
}

.sf-recados-host .rw-user{
    min-width:0;
}

.sf-recados-host .rw-name{
    color:#fff;
    font-weight:900;
    font-size:1rem;
    line-height:1.03;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sf-recados-host .rw-meta{
    margin-top:4px;
    display:flex;
    gap:6px;
    align-items:center;
    color:#f0ca77;
    font-size:.72rem;
    line-height:1.15;
    font-weight:800;
    min-width:0;
}

.sf-recados-host .rw-location{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sf-recados-host .rw-country-flag{
    width:18px;
    height:12px;
    object-fit:cover;
    border-radius:1px;
    flex:0 0 auto;
}

.sf-recados-host .rw-time{
    margin-top:3px;
    color:#86a6d0;
    font-size:.67rem;
}

.sf-recados-host .rw-bubble{
    position:relative;
    flex:0 0 80px;
    min-height:80px;
    max-height:80px;
    width:100%;
    padding:12px 14px 10px;
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 84% 12%,rgba(36,199,255,.18),transparent 22%),
        linear-gradient(180deg,#143a67,#102a4e);
    border:2px solid var(--accent);
    color:#f5f9ff;
    box-shadow:
        0 0 22px color-mix(in srgb,var(--accent) 22%,transparent),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.sf-recados-host .rw-bubble::after{
    content:'•••';
    position:absolute;
    top:8px;
    right:9px;
    display:grid;
    place-items:center;
    width:27px;
    height:21px;
    border-radius:8px;
    background:#d7f1ff;
    color:#24465c;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:1px;
}

.sf-recados-host .rw-message{
    padding-right:34px;
    color:#fff;
    font-size:.91rem;
    line-height:1.24;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
}

.sf-recados-host .rw-reply{
    position:relative;
    flex:0 0 82px;
    min-height:82px;
    padding:10px 11px 9px 42px;
    border-radius:16px;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 10%,rgba(255,218,103,.15),transparent 28%),
        linear-gradient(180deg,#2e2614,#15140f);
    border:1.5px solid #f0c85e;
    box-shadow:
        0 0 16px rgba(240,200,94,.10),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.sf-recados-host .rw-reply-icon{
    position:absolute;
    left:10px;
    top:11px;
    width:23px;
    height:23px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#16120c;
    background:linear-gradient(180deg,#f6d36f,#d7a53c);
    border:1px solid rgba(243,201,97,.96);
    font-size:.78rem;
}

.sf-recados-host .rw-reply-title{
    color:#f0ca77;
    font-size:.63rem;
    font-weight:900;
    line-height:1;
    letter-spacing:.025em;
    text-transform:uppercase;
}

.sf-recados-host .rw-reply-text{
    margin-top:4px;
    color:#f5f6f8;
    font-size:.79rem;
    line-height:1.18;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
}

.sf-recados-host .rw-nav{
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(61,187,255,.58);
    background:linear-gradient(180deg,#0e1a2a,#091321);
    color:#def8ff;
    font-size:1.18rem;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 0 18px rgba(39,137,255,.14);
}

.sf-recados-host .rw-prev{left:-2px}
.sf-recados-host .rw-next{right:-2px}

.sf-recados-host .rw-pages{
    flex:0 0 12px;
    min-height:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
}

.sf-recados-host .rw-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#4a76ad;
    cursor:pointer;
}

.sf-recados-host .rw-dot.active{
    width:10px;
    height:10px;
    background:#f3cf60;
    box-shadow:0 0 13px rgba(243,207,96,.24);
}

.sf-recados-host .rw-cta{
    flex:0 0 49px;
    min-height:49px;
    border-radius:15px;
    border:1px solid rgba(243,201,97,.95);
    background:
        radial-gradient(circle at 50% 16%,rgba(255,244,200,.28),transparent 40%),
        linear-gradient(180deg,#f7d66f,#d8a63b);
    color:#16120c;
    font-weight:900;
    font-size:.92rem;
    cursor:pointer;
    box-shadow:
        0 0 22px rgba(240,202,119,.14),
        inset 0 1px 0 rgba(255,255,255,.36);
}

/* LER MAIS */
.sf-recados-host .rw-more-btn{
    display:none;
    position:absolute;
    right:10px;
    bottom:7px;
    z-index:6;
    min-height:21px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(5,10,18,.76);
    color:#fff;
    font:800 .61rem/1 'Roboto Condensed','Arial Narrow',Arial,sans-serif;
    cursor:pointer;
}

.sf-recados-host .rw-more-btn.show{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.sf-recados-host .rw-reply .rw-more-btn{
    background:rgba(25,19,8,.86);
    color:#f3d47a;
    border-color:rgba(240,202,119,.28);
}

.sf-recados-host .rw-has-more{
    padding-bottom:22px!important;
}

/* MODAIS GLOBAIS DO WIDGET */
.rw-modal-overlay,
.rw-more-overlay{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(3,7,13,.82);
    backdrop-filter:blur(8px);
}

.rw-modal-overlay.open,
.rw-more-overlay.open{
    display:flex;
}

.rw-modal,
.rw-more-modal{
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    position:relative;
    padding:18px;
    border-radius:24px;
    background:
        radial-gradient(circle at 86% 8%,rgba(37,115,255,.11),transparent 23%),
        linear-gradient(180deg,#0d1623,#0a1320);
    border:1px solid rgba(228,182,87,.58);
    color:#fff;
    font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
    box-shadow:0 24px 54px rgba(0,0,0,.45);
}

.rw-modal h2,
.rw-more-modal h3{
    margin:0 48px 10px 0;
    color:#f0ca77;
    font-weight:900;
}

.rw-modal-close,
.rw-more-close{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.10);
    background:#101a28;
    color:#fff;
    font-size:1.35rem;
    cursor:pointer;
}

.rw-account-note{
    min-height:18px;
    margin:-3px 45px 12px 0;
    color:#aebed2;
    font-size:.78rem;
}

#rwFormRecado{
    display:grid;
    gap:10px;
}

#rwFormRecado input,
#rwFormRecado textarea{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(119,150,196,.20);
    background:linear-gradient(180deg,#162132,#121d2c);
    color:#fff;
    padding:13px 14px;
    font:inherit;
}

#rwFormRecado input[readonly]{
    color:#f0ca77;
    font-weight:800;
}

#rwFormRecado textarea{
    height:130px;
    resize:none;
}

.rw-form-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
}

.rw-form-row button{
    min-height:38px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.10);
    background:#111a28;
    color:#fff;
    font:inherit;
    padding:0 12px;
    cursor:pointer;
}

.rw-form-row span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#d0d8e3;
    font-size:.72rem;
}

.rw-emojis{
    display:none;
    grid-template-columns:repeat(6,1fr);
    gap:6px;
    max-height:180px;
    overflow-y:auto;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:#0c1522;
}

.rw-emojis.open{
    display:grid;
}

.rw-emojis button{
    min-height:39px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    background:#131e2d;
    color:#fff;
    font-size:1.15rem;
    cursor:pointer;
}

.rw-send{
    min-height:45px;
    border-radius:13px;
    border:1px solid #f0ca77;
    background:linear-gradient(180deg,#f7d66f,#d8a63b);
    color:#16120c;
    font-weight:900;
    cursor:pointer;
}

.rw-status{
    min-height:18px;
    color:#b7c7da;
    font-size:.78rem;
    text-align:center;
}

.rw-more-kicker{
    color:#f0ca77;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.rw-more-content{
    color:#eef4ff;
    font-size:1rem;
    line-height:1.45;
    white-space:pre-wrap;
    word-break:break-word;
}

@media(max-width:600px){
    /* No mobile, a navegação é feita por swipe + pontinhos. */
    .sf-recados-host .rw-nav{
        display:none!important;
    }

    /* Swipe lateral no card, sem prender a rolagem vertical do site. */
    .sf-recados-host .rw-stage{
        touch-action:pan-y;
        overscroll-behavior-x:contain;
    }

    .sf-recados-host .rw-card.rw-touch-dragging{
        transition:none!important;
        will-change:transform,opacity;
    }

    .sf-recados-host .rw-card.rw-touch-settling{
        transition:transform .18s cubic-bezier(.2,.78,.18,1),opacity .18s ease!important;
        will-change:transform,opacity;
    }

    .sf-recados-host .rw-card{
        height:258px;
        min-height:240px;
    }

    .sf-recados-host .rw-bubble{
        flex-basis:76px;
        min-height:76px;
        max-height:76px;
    }

    .sf-recados-host .rw-reply{
        flex-basis:78px;
        min-height:78px;
        padding-left:40px;
    }

    .sf-recados-host .rw-message{
        font-size:.87rem;
    }

    .sf-recados-host .rw-reply-text{
        font-size:.75rem;
    }

    .sf-recados-host .rw-nav{
        width:38px;
        height:38px;
    }

    .rw-form-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .rw-emojis{
        grid-template-columns:repeat(6,1fr);
    }
}