/* ================================================
   OmGly — Desktop Layout
   Dois cards flutuantes centralizados (≥ 960px)
   Mobile: wrappers são display:contents
   ================================================ */

#dtHeader,
#dtDiscoverPanel { display: none; }

#dtCards,
#dtLeft,
#dtRight { display: contents; }

/* Ocultos globalmente — só aparecem no desktop via media query */
.dt-discover-tag  { display: none; }
.mf-dt-corner-btn { display: none; }

/* ═══════════════════════════════════════════════
   DESKTOP  ≥ 960px
═══════════════════════════════════════════════ */
@media (min-width: 960px) {

    /* ── Cancela o frame de celular de app.css ──── */
    html {
        display: block !important;
        height: 100vh !important;
        overflow: hidden !important;
        background: #f0f1f3 !important;
    }

    body.app-page {
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        flex-shrink: 1 !important;
    }

    body.app-page::before,
    body.app-page::after { display: none !important; }

    .top-bar            { padding-top: 0 !important; }
    .page-header,
    .searching-header   { padding-top: 16px !important; }
    .chat-header        { padding-top: 12px !important; }
    .bottom-nav         { border-radius: 0 !important; }

    /* ── Página branca system ───────────────────── */
    body.app-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background: #f0f1f3;
    }

    /* ── Header branco com borda ─────────────────── */
    #dtHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        height: 56px;
        padding: 0 20px;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(0,0,0,.07);
        gap: 12px;
        position: relative;
        z-index: 300;
    }

    .dt-logo {
        display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    }
    .dt-logo-text {
        font-size: 1.1rem; font-weight: 900;
        background: linear-gradient(135deg, #f07030, #ff8f50);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .dt-header-center {
        display: flex; align-items: center; gap: 8px;
        flex: 1; justify-content: flex-start; padding-left: 8px;
    }

    .dt-free-btn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(240,112,48,.10);
        border: 1px solid rgba(240,112,48,.28);
        color: #c84a00;
        font-size: .78rem; font-weight: 700;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s;
    }
    .dt-free-btn:hover { background: rgba(240,112,48,.18); }

    .dt-mode-btn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(0,0,0,.06);
        border: 1px solid rgba(0,0,0,.08);
        color: #444;
        font-size: .78rem; font-weight: 600;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s, color .15s;
    }
    .dt-mode-btn:hover { background: rgba(0,0,0,.10); color: #111; }

    .dt-header-right {
        display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    }

    #dtCoinBtn {
        display: flex; align-items: center; gap: 6px;
        background: rgba(240,112,48,.10);
        color: #c84a00;
        font-size: .86rem; font-weight: 800;
        padding: 6px 14px; border-radius: 50px;
        transition: background .15s;
        margin-right: 4px;
        border: none;
    }
    #dtCoinBtn:hover { background: rgba(240,112,48,.18); }

    .dt-icon-btn {
        position: relative;
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px;
        border-radius: 12px;
        color: #888;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: color .15s, background .15s;
        font-family: inherit;
    }
    .dt-icon-btn:hover { color: #222; background: rgba(0,0,0,.06); }
    .dt-icon-btn.active { color: #f07030; }

    .dt-badge {
        position: absolute; top: 6px; right: 5px;
        min-width: 15px; height: 15px;
        background: #e53935; border-radius: 50%;
        font-size: .56rem; font-weight: 800; color: #fff;
        display: flex; align-items: center; justify-content: center;
        padding: 0 3px;
        border: 2px solid #fff;
    }

    /* ── Cards container (centrado) ─────────────── */
    #dtCards {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px 32px 24px;
        gap: 0;
    }

    /* ── Card esquerdo — área de vídeo ──────────── */
    #dtLeft {
        display: block !important;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        background: #111;
        border-radius: 18px 0 0 18px;
        width: clamp(300px, 34vw, 440px);
        height: clamp(400px, calc(100vh - 120px), 600px);
        box-shadow: 0 20px 60px rgba(0,0,0,.18);
    }

    /* Screens dentro do card esquerdo */
    #dtLeft .screen {
        position: absolute !important;
        inset: 0 !important;
        bottom: 0 !important;
    }

    /* Discover: fundo laranja semi-transparente */
    #dtLeft #screenDiscover {
        background: linear-gradient(160deg, rgba(240,112,48,.88) 0%, rgba(200,74,0,.92) 100%) !important;
    }

    /* Oculta elementos mobile-only */
    #dtLeft .top-bar         { display: none !important; }
    #dtLeft .discover-bottom { display: none !important; }
    #dtLeft .tap-label       { display: none !important; }

    /* Anéis brancos sobre fundo laranja */
    #dtLeft .tap-ring-1 { background: rgba(255,255,255,.18) !important; }
    #dtLeft .tap-ring-2 { background: rgba(255,255,255,.30) !important; }
    #dtLeft .tap-ring-3 { background: rgba(255,255,255,.50) !important; }

    /* Tagline de desktop — visível apenas no card esquerdo */
    #dtLeft .dt-discover-tag {
        display: block;
        position: absolute;
        bottom: 32px; left: 0; right: 0;
        text-align: center;
        font-size: .85rem; font-weight: 500;
        color: rgba(255,255,255,.82);
        padding: 0 28px;
        line-height: 1.55;
        pointer-events: none;
    }

    /* ── Preview câmera local no card esquerdo ───── */
    #dtLocalPreview {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
        z-index: 2;
        display: none;
        background: #000;
        border-radius: 18px 0 0 18px;
    }
    body.dt-searching #dtLeft #dtLocalPreview,
    body.dt-in-call   #dtLeft #dtLocalPreview { display: block !important; }

    /* screenSearching no card direito: fundo laranja original */
    #dtRight #screenSearching.active {
        overflow: hidden !important;
        /* fundo laranja vem do app.css — mantém */
    }

    /* screenMatchFound foi movido para #dtRight */

    /* ── Card direito — controles ───────────────── */
    #dtRight {
        display: block !important;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        background: #ffffff;
        border-radius: 0 18px 18px 0;
        width: clamp(300px, 34vw, 440px);
        height: clamp(400px, calc(100vh - 120px), 600px);
        border-left: 1px solid rgba(0,0,0,.07);
        box-shadow: 0 20px 60px rgba(0,0,0,.12);
    }

    /* Screens dentro do card direito */
    #dtRight .screen {
        position: absolute !important;
        inset: 0 !important;
        bottom: 0 !important;
        overflow-y: auto;
    }

    /* Ajustes visuais no card direito */
    #dtRight .page-header  { padding-top: 16px; }
    #dtRight .chat-header  { padding-top: 12px; }
    #dtRight #screenProfile { overflow-y: auto; }
    #dtRight .coin-badge   { display: none !important; }

    /* ── Painel discover (ocupa todo o card direito) ── */
    #dtDiscoverPanel {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
    }

    /* ── Discover panel: idle state ────────────── */
    #dtPanelIdle {
        display: flex; flex-direction: column;
        align-items: center; gap: 20px;
        width: 100%; height: 100%;
        padding: 32px 24px 28px; text-align: center;
        justify-content: flex-start;
    }
    /* Botões (filtro + começar) empurrados para o fundo */
    .dt-discover-actions { margin-top: auto; }

    /* Marca cresce e centraliza no espaço disponível acima dos botões */
    .dt-brand {
        flex: 1;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 8px;
    }
    .dt-brand img    { border-radius: 16px; box-shadow: 0 6px 24px rgba(240,112,48,.22); }
    .dt-brand-name   { font-size: 1.5rem; font-weight: 900; color: #1a1a2e; letter-spacing: -.02em; }
    .dt-brand-sub    { font-size: .82rem; color: #999; margin: 0; }

    .dt-discover-actions {
        display: flex; flex-direction: column;
        align-items: stretch; gap: 10px; width: 100%;
    }

    .dt-filter-pill {
        display: flex; align-items: center; justify-content: center; gap: 9px;
        padding: 12px 18px;
        border: 1.5px solid rgba(0,0,0,.12);
        border-radius: 50px;
        color: #444; font-size: .88rem; font-weight: 600;
        background: rgba(0,0,0,.04);
        transition: background .15s, border-color .15s;
    }
    .dt-filter-pill:hover { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.2); }

    .dt-start-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 15px 18px;
        background: linear-gradient(135deg, #f07030, #d95a20);
        color: #fff; font-size: .95rem; font-weight: 800;
        border-radius: 13px;
        transition: filter .15s, transform .12s;
        box-shadow: 0 4px 20px rgba(240,112,48,.38);
    }
    .dt-start-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); }
    .dt-start-btn:active { transform: scale(.97); }

    /* ── screenMatchFound no card direito ───────── */
    #dtRight #screenMatchFound.active {
        background: #ffffff !important;
        overflow: hidden !important;
    }
    #dtRight #screenMatchFound.active .mf-name     { color: #1a1a2e !important; }
    #dtRight #screenMatchFound.active .mf-country,
    #dtRight #screenMatchFound.active .mf-countdown { color: #666 !important; }
    #dtRight #screenMatchFound.active .mf-score    { color: #f07030 !important; }

    /* Botões de canto — visíveis no desktop dentro do card direito */
    #dtRight #screenMatchFound.active .mf-dt-corner-btn {
        display: flex !important;
        align-items: center; justify-content: center;
        position: absolute !important;
        background: rgba(0,0,0,.07); border: none; cursor: pointer;
        border-radius: 50%; transition: background .15s, transform .12s;
        z-index: 10;
    }
    #dtRight #screenMatchFound.active .mf-dt-corner-btn:hover { background: rgba(0,0,0,.14); transform: scale(1.1); }
    /* Report — topo direito */
    #dtRight #screenMatchFound.active .mf-dt-report {
        top: 12px !important; right: 12px !important;
        width: 38px; height: 38px; color: #e53935;
    }
    /* Skip — inferior direito */
    #dtRight #screenMatchFound.active .mf-dt-skip {
        bottom: 18px !important; right: 16px !important;
        width: auto !important; border-radius: 20px !important; padding: 8px 18px !important;
        font-size: .82rem !important; font-weight: 700 !important; color: #777 !important;
        border: 1.5px solid rgba(0,0,0,.15) !important;
        background: rgba(0,0,0,.04) !important;
    }
    #dtRight #screenMatchFound.active .mf-dt-skip:hover { color: #333 !important; background: rgba(0,0,0,.08) !important; }

    /* ══════════════════════════════════════════════
       #callChatOverlay como painel lateral (chat real)
       Slide: entra da esquerda para a direita
    ══════════════════════════════════════════════ */
    @keyframes dtChatSlideIn {
        from { opacity: 0; transform: translateX(-28px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Quando .dt-chat-panel é adicionado via JS: transforma em painel */
    #callChatOverlay.dt-chat-panel {
        display: flex !important;
        flex-direction: column !important;
        background: linear-gradient(170deg, #312c6b 0%, #1e1a4a 100%) !important;
        border-radius: 18px !important;
        box-shadow: 6px 0 32px rgba(0,0,0,.28) !important;
        overflow: hidden !important;
        animation: dtChatSlideIn .35s cubic-bezier(.34,1.15,.64,1) both !important;
        /* inset, bottom resets já vêm via inline style do JS */
        inset: auto !important;
    }

    /* Mensagens: área que cresce */
    #callChatOverlay.dt-chat-panel .call-chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 12px !important;
        display: flex !important; flex-direction: column !important; gap: 6px !important;
        max-height: none !important;
    }
    #callChatOverlay.dt-chat-panel .call-chat-messages::-webkit-scrollbar { width: 3px; }
    #callChatOverlay.dt-chat-panel .call-chat-messages::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.2); border-radius: 2px;
    }

    /* Emoji picker */
    #callChatOverlay.dt-chat-panel .call-emoji-picker {
        background: rgba(0,0,0,.2) !important;
        padding: 8px !important;
        display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
        max-height: 140px !important; overflow-y: auto !important;
    }
    #callChatOverlay.dt-chat-panel .c-emoji {
        background: none !important; border: none !important;
        font-size: 1.3rem !important; cursor: pointer !important;
        padding: 3px !important; border-radius: 6px !important;
        transition: background .1s !important;
    }
    #callChatOverlay.dt-chat-panel .c-emoji:hover { background: rgba(255,255,255,.12) !important; }

    /* Barra de input */
    #callChatOverlay.dt-chat-panel .call-chat-bar {
        display: flex !important;
        align-items: center !important; gap: 6px !important;
        padding: 10px 10px 14px !important;
        background: rgba(0,0,0,.2) !important;
        flex-shrink: 0 !important;
    }
    #callChatOverlay.dt-chat-panel .call-chat-input {
        flex: 1 !important;
        background: rgba(255,255,255,.14) !important;
        border: none !important; border-radius: 20px !important;
        padding: 9px 14px !important;
        color: #fff !important; font-size: .84rem !important;
        outline: none !important;
    }
    #callChatOverlay.dt-chat-panel .call-chat-input::placeholder { color: rgba(255,255,255,.45) !important; }
    #callChatOverlay.dt-chat-panel .call-emoji-toggle,
    #callChatOverlay.dt-chat-panel .call-translate-toggle,
    #callChatOverlay.dt-chat-panel .call-chat-send {
        background: rgba(255,255,255,.14) !important; border: none !important;
        border-radius: 50% !important; cursor: pointer !important;
        width: 36px !important; height: 36px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-shrink: 0 !important; color: rgba(255,255,255,.8) !important;
        font-size: .95rem !important; transition: background .15s !important;
    }
    #callChatOverlay.dt-chat-panel .call-emoji-toggle:hover,
    #callChatOverlay.dt-chat-panel .call-translate-toggle:hover,
    #callChatOverlay.dt-chat-panel .call-chat-send:hover {
        background: rgba(255,255,255,.26) !important;
    }

    /* ── Mensagens animadas no painel de busca ─── */
    .dt-search-messages {
        margin: 12px 0 8px;
        height: 36px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .dt-search-msg {
        position: absolute; inset: 0;
        font-size: .78rem; color: #888; text-align: center;
        line-height: 1.5; padding: 0 8px;
        opacity: 0;
        transition: opacity .5s ease;
        display: flex; align-items: center; justify-content: center;
    }
    .dt-search-msg.active { opacity: 1; }

    /* ── Discover panel: searching state ────────── */
    #dtPanelSearching {
        display: none;
        width: 100%; height: 100%;
        align-items: center; justify-content: center;
    }
    .dt-searching-inner {
        display: flex; flex-direction: column;
        align-items: center; gap: 16px;
        padding: 28px 24px; text-align: center;
    }
    .dt-search-spinner {
        width: 52px; height: 52px;
        border: 4px solid rgba(240,112,48,.15);
        border-top-color: #f07030;
        border-radius: 50%;
        animation: dtSpin .9s linear infinite;
        margin-bottom: 4px;
    }
    @keyframes dtSpin { to { transform: rotate(360deg); } }
    .dt-search-label {
        font-size: 1.1rem; font-weight: 800; color: #1a1a2e;
    }
    .dt-search-sub {
        font-size: .82rem; color: #999; margin-top: -8px;
    }
    .dt-cancel-btn {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        margin-top: 8px;
        padding: 11px 22px;
        border: 1.5px solid rgba(0,0,0,.12);
        border-radius: 50px;
        color: #555; font-size: .84rem; font-weight: 600;
        background: rgba(0,0,0,.04);
        transition: background .15s, border-color .15s;
    }
    .dt-cancel-btn:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.2); }

    /* ── Video call: câmeras no desktop ─────────── */
    /* Minha câmera (local) preenche o card esquerdo */
    #dtLeft #screenCall.active #localVideo {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 1 !important;
    }
    /* Remote video: JS posiciona via inline style sobre o card direito */
    body.dt-in-call #dtRight { visibility: hidden; pointer-events: none; }

    /* ══════════════════════════════════════════════
       HUD sobre o vídeo remoto (card direito)
    ══════════════════════════════════════════════ */
    #dtCallHUD {
        position: fixed;
        z-index: 202;
        pointer-events: none;
        display: none;
        flex-direction: column;
        justify-content: space-between;
    }
    body.dt-in-call #dtCallHUD { display: flex; }

    .dtcall-top    { padding: 14px 16px; }
    .dtcall-bottom {
        padding: 14px 16px;
        display: flex; align-items: center; gap: 8px;
    }
    .dtcall-brand { color: rgba(255,255,255,.75); font-size: .92rem; font-weight: 700; letter-spacing: .01em; }

    .dtcall-user-pill {
        display: inline-flex; align-items: center; gap: 8px;
        background: rgba(0,0,0,.48);
        backdrop-filter: blur(8px);
        border-radius: 50px;
        padding: 5px 10px 5px 5px;
        pointer-events: all;
        max-width: 260px;
    }
    .dtcall-av {
        width: 34px; height: 34px; border-radius: 50%;
        object-fit: cover; object-position: center top;
        flex-shrink: 0;
        border: 2px solid rgba(255,255,255,.3);
    }
    .dtcall-user-text { display: flex; flex-direction: column; min-width: 0; }
    .dtcall-name {
        font-size: .82rem; font-weight: 800; color: #fff;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dtcall-loc { font-size: .7rem; color: rgba(255,255,255,.6); }
    .dtcall-report-btn {
        background: none; border: none; cursor: pointer;
        font-size: 1rem; padding: 2px 0; flex-shrink: 0;
        pointer-events: all;
        transition: transform .15s;
    }
    .dtcall-report-btn:hover { transform: scale(1.2); }

    /* ══════════════════════════════════════════════
       Chat panel ao vivo (à direita dos cards)
    ══════════════════════════════════════════════ */
    #dtChatPanel {
        position: fixed;
        z-index: 203;
        display: none;
        flex-direction: column;
        background: linear-gradient(170deg, #6c5ce7 0%, #5b4fcf 100%);
        border-radius: 0 18px 18px 0;
        overflow: hidden;
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }
    body.dt-side-chat #dtChatPanel { display: flex; }

    /* Avatares no topo */
    .dtcp-avatars {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 14px 12px 10px;
        background: rgba(0,0,0,.15);
        flex-shrink: 0;
    }
    .dtcp-av {
        border-radius: 50%; object-fit: cover; object-position: center top;
        border: 3px solid rgba(255,255,255,.3);
    }
    .dtcp-av-me    { border-color: rgba(255,255,255,.6); }
    .dtcp-av-match { border-color: rgba(255,200,50,.7); }

    /* Área de mensagens */
    .dtcp-msgs {
        flex: 1; overflow-y: auto;
        padding: 12px 10px;
        display: flex; flex-direction: column; gap: 8px;
    }
    .dtcp-msgs::-webkit-scrollbar { width: 4px; }
    .dtcp-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

    .dtcp-sys-msg {
        background: rgba(255,255,255,.12);
        border-radius: 12px; padding: 8px 12px;
        font-size: .75rem; color: rgba(255,255,255,.8);
        text-align: center;
    }
    .dtcp-bubble {
        max-width: 85%; word-break: break-word;
        padding: 8px 12px; border-radius: 16px;
        font-size: .82rem; line-height: 1.45;
    }
    .dtcp-bubble-me {
        align-self: flex-end;
        background: rgba(255,255,255,.92); color: #1a1a2e;
        border-bottom-right-radius: 4px;
    }
    .dtcp-bubble-them {
        align-self: flex-start;
        background: rgba(255,255,255,.18); color: #fff;
        border-bottom-left-radius: 4px;
    }

    /* Input */
    .dtcp-input-row {
        display: flex; align-items: center; gap: 6px;
        padding: 10px 10px 14px;
        background: rgba(0,0,0,.15);
        flex-shrink: 0;
    }
    .dtcp-input {
        flex: 1; background: rgba(255,255,255,.15);
        border: none; border-radius: 20px;
        padding: 8px 14px; color: #fff;
        font-size: .84rem; outline: none;
    }
    .dtcp-input::placeholder { color: rgba(255,255,255,.5); }
    .dtcp-btn {
        background: rgba(255,255,255,.15); border: none; cursor: pointer;
        width: 36px; height: 36px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; color: #fff; flex-shrink: 0;
        transition: background .15s;
    }
    .dtcp-btn:hover { background: rgba(255,255,255,.28); }
    .dtcp-gift-btn { font-size: 1.1rem; }
    .dtcp-send-btn { background: rgba(255,255,255,.25); }

    /* ── Theater Mode (discover + onboarding) ───── */
    body.dt-theater #dtRight,
    body.dt-theater #lpDtRight { display: none !important; }

    body.dt-theater #dtLeft,
    body.dt-theater #lpDtLeft  {
        width: clamp(640px, 78vw, 1000px) !important;
        border-radius: 18px !important;
        box-shadow: 0 24px 80px rgba(0,0,0,.22) !important;
    }
    body.dt-theater .dt-mode-btn {
        background: #f07030 !important; color: #fff !important; border-color: #f07030 !important;
    }

    /* ── Oculta nav mobile e banner de instalação PWA ── */
    .bottom-nav  { display: none !important; }
    #installBanner { display: none !important; }

    /* ── History / Chats / Profile como dropdown ── */
    /* Backdrop compartilhado */
    #dtSidePanelBackdrop {
        display: none; position: fixed;
        inset: 0; z-index: 490;
    }
    body.dt-side-open #dtSidePanelBackdrop { display: block; }

    /* Quando abertos: saem do card direito e viram painéis flutuantes */
    #dtRight #screenHistory.active,
    #dtRight #screenChats.active,
    #dtRight #screenProfile.active {
        position: fixed !important;
        inset: auto !important;
        top: 62px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        transition: none !important;
        width: 380px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06) !important;
        z-index: 500 !important;
        /* Cancela o fundo laranja do app.css */
        background: #ffffff !important;
        animation: dtPanelOpen .2s cubic-bezier(.34,1.15,.64,1) both !important;
    }
    /* Fundo branco nos dropdowns de navegação */
    #dtRight #screenHistory.active,
    #dtRight #screenChats.active,
    #dtRight #screenProfile.active {
        background: #ffffff !important;
    }
    /* Cancela gradiente no wrapper interno do perfil */
    #dtRight #screenProfile.active .profile-scroll-body,
    #dtRight #screenProfile.active > div:first-child {
        background: #ffffff !important;
    }
    /* Corrige texto branco → escuro */
    #dtRight #screenHistory.active .page-title,
    #dtRight #screenChats.active .page-title,
    #dtRight #screenProfile.active .page-title,
    #dtRight #screenProfile.active .profile-username { color: #1a1a2e !important; }

    #dtRight #screenHistory.active .page-subtitle,
    #dtRight #screenChats.active .page-subtitle,
    #dtRight #screenProfile.active .page-subtitle,
    #dtRight #screenProfile.active .profile-id,
    #dtRight #screenProfile.active .profile-country,
    #dtRight #screenProfile.active .stat-label { color: #666 !important; }

    #dtRight #screenProfile.active .stat-value { color: #1a1a2e !important; }
    @keyframes dtPanelOpen {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
    /* Painel discover fica visível mesmo com side panel aberto */
    body.dt-side-open #dtDiscoverPanel { display: flex !important; }

    /* ── Loja como dropdown ─────────────────────── */
    /* Backdrop da loja — acima do backdrop do side panel */
    #dtStoreBackdrop {
        display: none;
        position: fixed; inset: 0;
        z-index: 502;
    }
    body.dt-store-open #dtStoreBackdrop { display: block; }

    /* ── Animações do dropdown da loja ─────────── */
    @keyframes dtStoreOpen {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes dtStoreClose {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(12px); }
    }

    /* Loja: dropdown abaixo do botão de moedas (canto superior direito) */
    #screenStore.store-open {
        inset: auto !important;
        top: 62px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        transition: none !important;
        width: 400px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06) !important;
        z-index: 505 !important;
        background: white !important;
        animation: dtStoreOpen .2s cubic-bezier(.34,1.15,.64,1) both !important;
    }
    #screenStore.store-open.dt-store-closing {
        animation: dtStoreClose .16s ease forwards !important;
        pointer-events: none !important;
    }

    /* Esconde back-button e ajusta padding no dropdown */
    #screenStore .page-header .back-btn,
    #screenStore .page-header > button:first-child { display: none !important; }
    #screenStore .page-header { padding-top: 14px !important; }

    /* ══════════════════════════════════════════════
       SHEETS & MODAIS — desktop
       Regra: NUNCA mexer no transform de elementos
       fechados. Só estilizar quando estão ATIVOS/ABERTOS.
    ══════════════════════════════════════════════ */

    /* Bottom sheets: só quando sheet-open — aparecem centralizadas sem slide */
    .bottom-sheet.sheet-open {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        max-width: 480px; width: calc(100% - 40px);
        border-radius: 20px !important;
        max-height: 85vh; overflow-y: auto;
        transition: none !important;   /* cancela o slide-up do mobile */
        animation: dtSheetFadeIn .18s ease both !important;
    }
    @keyframes dtSheetFadeIn {
        from { opacity: 0; transform: translate(-50%, -46%); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
    }

    /* Country picker: só quando cp-open */
    .country-picker.cp-open {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        max-width: 460px; width: calc(100% - 40px);
        border-radius: 20px !important;
        max-height: 80vh;
    }

    /* app-confirm-overlay (outgoing call, incoming call, report, logout, delete):
       o overlay é SEMPRE display:flex no DOM (app.css).
       Fechado: o sheet dentro tem translateY(100%) → fica abaixo da tela.
       Aberto (.active): centraliza o sheet na tela. */
    .app-confirm-overlay.active {
        align-items: center !important;
        justify-content: center !important;
    }
    .app-confirm-overlay.active .app-confirm-sheet {
        transform: none !important;
        max-width: 460px;
        width: calc(100% - 40px);
        border-radius: 20px !important;
        max-height: 85vh;
    }

    /* payment-modal: app.css usa position:absolute;bottom:0 (bottom sheet)
       No desktop, participa do flex center do .modal-overlay */
    .payment-modal {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 460px !important;
        width: calc(100% - 40px) !important;
        border-radius: 20px !important;
    }
    .perm-modal {
        border-radius: 20px !important;
        max-width: 460px; width: calc(100% - 40px);
    }
}