.drawerMenuMobile
{
    display:none;
}

@media (max-width: 768px)
{
    .drawerMenuMobileHeader
    {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 15px;
        padding-top: 10px;
        padding-right: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .drawerMenuMobileHeader img
    {
        width: 100px;
        height: auto;
        object-fit: contain;
    }

    .drawerMenuMobile
    {
        display: flex;
        position: fixed;
        z-index: 999;
        background-color: white;
        height: 100vh;
        width: 250px;
        top: 0;
        left: -250px;
        box-shadow: 0px 5px 7px 1px rgba(0, 0, 0, 0.227);
        flex-direction: column;
        justify-content: start;
        align-items: start;
        padding-top: 5px;
        margin-top:0px;  /* TRIAL */
        gap: 20px;
        transition: all 0.3s ease;
    }

    .drawerMenuMobile.opened
    {
        left: 0px;
    }

    .drawerMenuMobile .drawerMenuMobileContent
    {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
        padding-left: 20px;
    }

    .drawerMenuMobile .drawerMenuMobileContent a
    {
        text-decoration: none;
        color: #5f6368;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s ease;
        cursor: pointer;
        user-select: none;
    }

    .drawerMenuMobile .drawerMenuMobileContent a.selected
    {
        /* background-color: #eef5ff; */
        color: #0782FF;
        font-weight: 600;
        font-size:15px;
        /* padding: 8px 16px; */
        border-radius: 20px;
        text-shadow: 0px 0px 10px rgba(7, 130, 255, 0.2);
    }

    .topbar
    {
        z-index: 2;
        background-color: white;
        height: 50px;
        width: 100%;
        top: 0;
        left: 0;
        box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.104);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
    }

    

    .topbar .logo
    {
        width: 120px;
        height: auto;
        object-fit: contain;
        margin-left: 0px;
        margin-right: 10px;
    }

    .topbar a
    {
        text-decoration: none;
        color: #5f6368;
        margin-right: 5px;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        font-size: 13px;
        transition: all 0.2s ease;
        cursor: pointer;
        user-select: none;
    }

    .topbar a.selected
    {
        background-color: #eef5ff;
        color: #0782FF;
        font-weight: 600;
    }

    .topbar a:hover
    {
        background-color: #f5f5f5;
        color: #21242a;
    }

    .topbar a.selected:hover
    {
        background-color: #e0efff;
        color: #0782FF;
    }


    .topbar .lopt
    {
        margin-left: 10px;
        display:flex;
    }

    .topbar .lopt .blocoMenuTopoDesktop
    {
        display:none;
    }

    .topbar .ropt
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
    }

    .topbar .ropt img
    {
        margin-left: 15px;
    }

    .topbar .ropt img:hover
    {
        cursor: pointer;
    }

    .bMenuHamburguer
    {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px; 
    }

    .content
    {
        margin-top: 40px; /* TRIAL */
        top: 0px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .content .panel_left
    {
        display: none;
    }

    .content .mainpanel
    {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        /* overflow: hidden; */
    }

    .content .mainpanel .navoptions .filters
    {
        width: 100%;
    }

    .content .mainpanel .navoptions
    {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 0px;
        height: auto;
        width: 100%;
    }

    .content .mainpanel .navoptions a
    {
        font-size: 11px;
        margin-right: 30px;
    }

    .content .mainpanel .navoptions a.selected
    {
        font-size: 12px;
    }

    .imguser
    {
        width: 40px;
        height: 40px;
    }

    .listcontents
    {
        display: flex;
        flex-direction: row;
        gap: 10px;
        height: auto;
        margin-bottom: 50px;
        margin-left: 0px;
        padding-left: 0px;
        justify-content: center;
        text-align: center;
    }

    .content .mainpanel .panel_right
    {
        flex: 1;
        border: 0px solid black;
        display: flex;
        flex-direction: column;
        align-items: start;
        overflow: auto;
        padding-bottom: 30px;
        margin-top: 15px;
        scrollbar-color: #0782FF var(--scrollbarBG);
    }

    .content .mainpanel .panel_right.noscroll
    {
        overflow-x: hidden;
        width: 100%;
        scrollbar-color: #0782FF var(--scrollbarBG);
    }


    #panR_Configs_Account {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box;
    }

    #panR_Configs_AndreIA {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box;
    }

    #panR_Configs_AndreIA .andreia-mobile-wrap {
        max-width: none !important;
        width: 100%;
    }

    #panR_Configs_AndreIA .andreia-profile-row {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        justify-content: center;
    }

    #panR_Configs_AndreIA .andreia-avatar {
        width: 120px !important;
    }

    #panR_Configs_AndreIA .andreia-profile-content {
        width: 100%;
        text-align:center;
    }

    #panR_Configs_AndreIA .andreia-whatsapp-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #panR_Configs_AndreIA .andreia-whatsapp-row > div:first-child {
        flex: none !important;
    }

    #panR_Configs_AndreIA .andreia-whatsapp-row .inputGroup {
        flex: none !important;
        width: 100%;
    }

    #bSaveAndreIAPhones,
    #bTalkAndreIA {
        width: 100% !important;
        justify-content: center;
    }

    #panR_Configs_AndreIAConfig {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box;
    }

    #panR_Configs_AndreIAConfig .andreia-config-form {
        max-width: none !important;
        width: 100%;
    }

    #panR_Configs_AndreIAConfig .andreia-config-contact-row {
        flex-direction: row;
        align-items: stretch !important;
        gap: 8px;
    }

    #panR_Configs_AndreIAConfig .andreia-config-contact-row > img {
        width: 24px !important;
        height: 24px !important;
        align-self: flex-start;
    }

    #panR_Configs_AndreIAConfig .andreia-config-contact-row .toggleSwitch {
        align-self: flex-start;
    }

    #panR_Configs_AndreIAConfig .andreia-config-contact-row .inputGroup {
        flex: none !important;
        width: 100%;
    }

    #panR_Configs_AndreIAConfig .andreia-config-save-wrap {
        width: 100% !important;
    }

    #bUpdateConfigAndreIA {
        width: 100% !important;
        justify-content: center;
    }

    #panR_Configs_Logo {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box;
    }

    #listaLogotipos {
        width: 100%;
    }

    #listaLogotipos > div {
        grid-template-columns: 1fr !important;
        width: 100%;
        justify-items: center;
    }

    .form-dados-cadastrais {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: none;
    }

    .form-dados-cadastrais .doc-field,
    .form-dados-cadastrais .uf-field {
        max-width: none;
        grid-column: 1 / -1;
    }

    #bUpdateAccountData {
        width: 100%;
        justify-content: center;
    }

    .signature-plans-grid {
        grid-template-columns: 1fr !important;
    }

    #mainArea_Help_Tutorials .panel_right {
        margin-top: 0px;
        width: 100%;
    }

    #mainArea_Help_Tutorials .help-wrapper {
        margin-left: 0;
        width: 100%;
        padding: 16px !important;
        border-radius: 14px;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    #mainArea_Help_Tutorials .help-hero {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }

    #mainArea_Help_Tutorials .help-title {
        font-size: 22px;
        line-height: 1.2;
    }

    #mainArea_Help_Tutorials .help-subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    #mainArea_Help_Tutorials .help-illustration {
        justify-content: center;
    }

    #mainArea_Help_Tutorials .help-illustration img {
        max-width: 180px;
        max-height: 180px !important;
        width: 100%;
        height: auto;
    }

    #mainArea_Help_Tutorials .help-meta {
        gap: 8px;
    }

    #mainArea_Help_Tutorials .help-meta .chip {
        font-size: 11px;
        padding: 7px 10px;
    }

    #mainArea_Help_Tutorials #bOpenTutorial {
        width: 100%;
        justify-content: center;
    }

    #mainArea_Help_Contact .panel_right {
        margin-top: 0px;
    }

    #mainArea_Help_Contact .help-wrapper {
        margin-left: 0;
        width: 100%;
        padding: 16px;
        border-radius: 14px;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    #mainArea_Help_Contact .help-hero {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #mainArea_Help_Contact .help-title {
        font-size: 22px;
        line-height: 1.2;
    }

    #mainArea_Help_Contact .help-subtitle {
        font-size: 14px;
    }

    #mainArea_Help_Contact .help-illustration {
        justify-content: center;
    }

    #mainArea_Help_Contact .help-illustration img {
        max-width: 180px;
        width: 100%;
        height: auto;
    }

    #mainArea_Help_Contact .contact-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #mainArea_Help_Contact .contact-card {
        padding: 14px;
    }

    #mainArea_Help_Contact .contact-card__top {
        align-items: flex-start;
    }

    #mainArea_Help_Contact .contact-headline h3 {
        font-size: 15px;
        line-height: 1.35;
        word-break: break-word;
    }

    #mainArea_Help_Contact .contact-headline p {
        font-size: 12px;
    }

    #mainArea_Help_Contact .contact-card__footer {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    #mainArea_Help_Contact .contact-btn {
        width: 80%;
        justify-content: center;
    }

    #mainArea_Help_Contact .contact-hint {
        font-size: 11px;
    }


    .wave-strip{
        position: relative;
        width: 100%;
        height: 20px;
        overflow: hidden;
        z-index: 9999;

        /* variação suave em torno do #0782FF */
        background: linear-gradient(90deg,
            rgba(7,130,255,.8),
            rgba(7,130,255,1),
            rgba(37,150,255,1),
            rgba(7,130,255,1),
            rgba(7,130,255,.8)
        );
        background-size: 200% 100%;
        animation: waveHue 4s ease-in-out infinite;
        font-size:10px;

        box-shadow: 0 4px 15px rgba(7,130,255,.3);
    }

    /* “onda” de verdade (recorte + movimento), SEM SVG no DOM (não quebra com innerHTML) */
    .wave-strip::after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;

        /* brilho de água + leve profundidade */
        background:
            linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,0) 80%),
            radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.3), transparent 70%),
            radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,.2), transparent 70%);

        opacity: 1;

        /* máscara em formato de onda (seno) repetida no eixo X */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 45'%3E%3Cpath fill='%23000' d='M0 25 C 15 10 30 40 45 25 C 60 10 75 40 90 25 C 105 10 120 40 120 25 L120 45 L0 45 Z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: repeat-x;
        -webkit-mask-size: 120px 45px;
        -webkit-mask-position: 0 0;

                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 45'%3E%3Cpath fill='%23000' d='M0 25 C 15 10 30 40 45 25 C 60 10 75 40 90 25 C 105 10 120 40 120 25 L120 45 L0 45 Z'/%3E%3C/svg%3E");
                        mask-repeat: repeat-x;
                        mask-size: 120px 45px;
                        mask-position: 0 0;

        animation: waveMaskMove 2s linear infinite;
        font-size:8px;
    }

    /* linha de “crista” bem sutil, dá acabamento premium */
    .wave-strip::before{
        content:"";
        position:absolute;
        left:0; right:0;
        bottom:0;
        height: 3px;
        background: rgba(255,255,255,.5);
        filter: blur(1px);
        opacity: .8;
        pointer-events:none;
        font-size:8px;
    }

    @keyframes waveHue{
        0%   { background-position: 0% 50%; filter: saturate(1.1) brightness(1.00); }
        50%  { background-position: 100% 50%; filter: saturate(1.3) brightness(1.1); }
        100% { background-position: 0% 50%; filter: saturate(1.1) brightness(1.00); }
    }

    @keyframes waveMaskMove{
        from {
            -webkit-mask-position: 0 0;
                            mask-position: 0 0;
        }
        to {
            -webkit-mask-position: -120px 0;
                            mask-position: -120px 0;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .wave-strip{ animation: none; }
        .wave-strip::after{ animation: none; }
    }

    

}