/* Camada visual dos fluxos sobrepostos do Mobile dos cantores. */
:root {
    --mobile-sheet: var(--kp-surface, #17111F);
    --mobile-sheet-raised: var(--kp-surface-raised, #21172B);
    --mobile-line: var(--kp-border, rgba(236,238,245,.11));
    --mobile-copy: var(--kp-text, #F5F4FA);
    --mobile-muted: var(--kp-muted, #A49BAD);
    --mobile-yellow: var(--kp-yellow, #FF7A00);
}

.mobile-modal-overlay {
    box-sizing: border-box;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    overflow: hidden auto;
    background: var(--color-bg-scrim, rgba(6, 3, 10, .78)) !important;
    backdrop-filter: blur(18px) saturate(.8) !important;
    -webkit-backdrop-filter: blur(18px) saturate(.8) !important;
}

.mobile-modal,
.score-card-modal-inner,
.challenge-dialog.social-dialog,
body.mobile-body .challenge-dialog {
    box-sizing: border-box;
    border: 1px solid var(--mobile-line) !important;
    color: var(--mobile-copy) !important;
    background: linear-gradient(150deg, var(--mobile-sheet-raised), var(--mobile-sheet)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .035) !important;
}

.mobile-modal { width: min(100%, 420px); max-height: min(88dvh, 760px); overflow-y: auto; border-radius: 24px; transform: none; }
.mobile-modal-eyebrow,
.score-card-header small {
    display: block;
    margin-bottom: 7px;
    color: var(--kp-lilac, #8A3FFC);
    font: 800 .65rem/1.2 'Inter', sans-serif;
    letter-spacing: .14em;
}
.mobile-modal h2,
.mobile-modal h3 { color: var(--mobile-copy) !important; text-transform: none; letter-spacing: -.025em !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.mobile-modal p { color: var(--mobile-muted) !important; }
.mobile-modal input:not([type="file"]),
.mobile-modal textarea,
body.mobile-body .challenge-dialog input:not([type="checkbox"]),
body.mobile-body .challenge-dialog textarea,
body.mobile-body .challenge-dialog select {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 13px !important;
    color: var(--mobile-copy) !important;
    background: var(--color-bg-deep, #09060D) !important;
    outline: none;
}
.mobile-modal input:focus,
.mobile-modal textarea:focus,
body.mobile-body .challenge-dialog input:focus,
body.mobile-body .challenge-dialog textarea:focus,
body.mobile-body .challenge-dialog select:focus { border-color: var(--color-focus, #8A3FFC) !important; box-shadow: var(--effect-focus-ring, 0 0 0 3px rgba(138, 63, 252, .28)); }

.modal-buttons { align-items: stretch; flex-wrap: wrap; }
.modal-buttons > button { min-width: 120px; }
.modal-buttons .challenge-btn { flex: 1 0 100%; min-height: 48px; }
.btn-confirm,
body.mobile-body .challenge-dialog .challenge-btn:not(.challenge-close) { border-color: transparent !important; color: #090b12 !important; background: var(--mobile-yellow) !important; box-shadow: none !important; }
.btn-cancel,
.btn-modal-close,
body.mobile-body .challenge-dialog .challenge-close { border: 1px solid var(--mobile-line) !important; color: var(--mobile-muted) !important; background: rgba(255, 255, 255, .045) !important; }

.photo-edit-modal { gap: 14px; text-align: center; }
.photo-preview-avatar,
.photo-preview-initials { border-color: var(--mobile-yellow); }
.photo-preview-initials { color: #090b12; background: var(--mobile-yellow); }
.photo-option-btn,
.bg-option-btn { border-color: var(--mobile-line) !important; color: var(--mobile-copy) !important; background: rgba(255, 255, 255, .045) !important; }
.photo-option-btn i { color: var(--mobile-yellow); }
.photo-option-btn:active,
.bg-option-btn:active { border-color: var(--mobile-yellow) !important; background: rgba(255, 122, 0, .08) !important; transform: scale(.98); }

#scoreCardModal { padding: max(10px, env(safe-area-inset-top)) 0 0; }
.score-card-modal-inner { border-width: 1px 1px 0 !important; border-radius: 24px 24px 0 0; }
.score-card-header > span { display: block; color: var(--mobile-copy); font-size: 1.1rem; line-height: 1.25; letter-spacing: -.02em; }
.mobile-icon-close {
    display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--mobile-line); border-radius: 50%; color: var(--mobile-copy); background: rgba(255,255,255,.05);
    font: 400 1.45rem/1 sans-serif; cursor: pointer;
}
.btn-share-card { color: #090b12 !important; background: var(--mobile-yellow) !important; }
.btn-download-card, #btnChangeBg { border-color: var(--mobile-line) !important; color: var(--mobile-copy) !important; background: rgba(255,255,255,.045) !important; }

.mobile-state-overlay { align-items: center; justify-content: center; }
.mobile-state-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mobile-state-card .btn-confirm { width: 100%; margin-top: 8px; }
.mobile-state-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 22px; color: #ff6b75; background: rgba(255, 75, 92, .1); font-size: 2rem; }

.voice-alert-overlay { padding: 18px; background: var(--color-bg-scrim, rgba(6, 3, 10, .78)) !important; backdrop-filter: blur(18px); }
.va-content { width: min(100%, 420px); padding: 30px 22px !important; border: 1px solid var(--mobile-line) !important; border-radius: 24px !important; background: linear-gradient(150deg, var(--mobile-sheet-raised), var(--mobile-sheet)) !important; box-shadow: 0 28px 80px rgba(0,0,0,.56) !important; }
.va-mic-icon { filter: none !important; }
.va-text { color: var(--mobile-yellow) !important; }
.btn-va-close { width: 100%; min-height: 50px; border: 0 !important; border-radius: 14px !important; color: #090b12 !important; background: var(--mobile-yellow) !important; box-shadow: none !important; }

body.mobile-body .challenge-dialog { width: min(100% - 24px, 560px); max-height: min(88dvh, 760px); padding: 22px; border-radius: 24px; }
body.mobile-body .challenge-dialog::backdrop { background: var(--color-bg-scrim, rgba(6, 3, 10, .78)); backdrop-filter: blur(18px); }
body.mobile-body .challenge-dialog h2 { margin: 4px 48px 18px 0; font: 800 1.35rem/1.2 'Montserrat', sans-serif; letter-spacing: -.025em; }
body.mobile-body .challenge-dialog h3 { color: var(--mobile-copy); }
body.mobile-body .challenge-dialog p { color: var(--mobile-muted); }
body.mobile-body .challenge-card { border-color: var(--mobile-line); background: rgba(255,255,255,.035); }
body.mobile-body .challenge-hero { color: var(--mobile-copy) !important; }
body.mobile-body .challenge-note { border-left-color: var(--color-social, #FF4FD8); }
body.mobile-body .challenge-feedback { color: var(--color-state-warning, #FFBF47); }
body.mobile-body .challenge-dialog .challenge-close { position: absolute; top: 16px; right: 16px; min-height: 38px; padding: 8px 12px; }

.kp-notice-layer { position: fixed; inset: 0; z-index: 3000000; display: grid; place-items: center; padding: 18px; background: var(--color-bg-scrim, rgba(6, 3, 10, .78)); backdrop-filter: blur(14px); }
.kp-notice-layer[hidden] { display: none; }
.kp-notice { box-sizing: border-box; width: min(100%, 390px); padding: 24px; border: 1px solid var(--mobile-line); border-radius: 22px; color: var(--mobile-copy); background: linear-gradient(150deg, var(--mobile-sheet-raised), var(--mobile-sheet)); box-shadow: 0 28px 80px rgba(0,0,0,.56); }
.kp-notice-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; color: #090b12; background: var(--mobile-yellow); font-size: 1.15rem; }
.kp-notice h2 { margin: 0 0 8px; font: 800 1.25rem/1.2 'Montserrat', sans-serif; }
.kp-notice p { margin: 0; color: var(--mobile-muted); font: 400 .9rem/1.55 'Inter', sans-serif; white-space: pre-line; overflow-wrap: anywhere; }
.kp-notice button { width: 100%; min-height: 50px; margin-top: 22px; border: 0; border-radius: 14px; color: #090b12; background: var(--mobile-yellow); font: 800 .85rem/1 'Inter', sans-serif; cursor: pointer; }

.kp-install-card {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    z-index: 2500000;
    box-sizing: border-box;
    max-width: 520px;
    margin-left: auto;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--color-navigation-line, rgba(138, 63, 252, .46));
    border-radius: 18px;
    color: var(--mobile-copy);
    background: var(--color-bg-overlay, rgba(14, 10, 20, .94));
    box-shadow: var(--effect-shadow-lg, 0 28px 90px rgba(0, 0, 0, .42));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.kp-install-copy { min-width: 0; flex: 1; }
.kp-install-copy strong { display: block; font: 800 .9rem/1.2 var(--font-family-display, 'Montserrat', sans-serif); }
.kp-install-copy p { margin: 6px 0 0; color: var(--mobile-muted); font: 400 .76rem/1.45 var(--font-family-interface, 'Inter', sans-serif); }
.kp-install-copy .kp-install-steps { margin-top: 9px; color: var(--color-text-secondary, #D8D2E2); }
.kp-install-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.kp-install-actions button { min-height: 38px; padding: 0 13px; border-radius: 10px; font: 700 .72rem/1 var(--font-family-interface, 'Inter', sans-serif); cursor: pointer; }
.kp-install-confirm { border: 0; color: var(--color-text-inverse, #180B00); background: var(--color-action-primary, #FF7A00); }
.kp-install-confirm:disabled { cursor: wait; opacity: .6; }
.kp-install-help { border: 1px solid var(--color-navigation-line, rgba(138, 63, 252, .46)); color: var(--color-text-primary, #F5F4FA); background: var(--color-navigation-soft, rgba(138, 63, 252, .14)); }
.kp-install-dismiss { border: 1px solid var(--mobile-line); color: var(--mobile-muted); background: transparent; }

@media (max-width: 520px) {
    .mobile-modal-overlay { align-items: flex-end; padding-inline: 0; padding-bottom: 0; }
    .mobile-modal-overlay > .mobile-modal { width: 100%; max-width: none; max-height: 91dvh; padding: 25px 20px calc(22px + env(safe-area-inset-bottom)); border-width: 1px 0 0 !important; border-radius: 24px 24px 0 0; }
    .mobile-state-overlay { align-items: center; padding: 16px; }
    .mobile-state-overlay > .mobile-modal { width: min(100%, 400px); border: 1px solid var(--mobile-line) !important; border-radius: 24px; }
    .photo-edit-options { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 8px; }
    .photo-option-btn { min-width: 0; padding: 12px 6px; }
    .kp-notice-layer { align-items: end; padding: 0; }
    .kp-notice { width: 100%; padding: 25px 20px calc(22px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
    .kp-install-card { align-items: stretch; flex-direction: column; }
    .kp-install-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-install-actions button:only-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-modal, .score-card-modal-inner, .kp-notice { animation: none !important; transition: none !important; }
}

/* Etapa 5: linguagem comum para ações e superfícies secundárias do mobile. */
body.mobile-body { --mobile-control-height: 48px; --mobile-radius-control: 13px; --mobile-radius-card: 16px; }
body.mobile-body :is(.btn-confirm, .btn-cancel, .btn-modal-close, .btn-share-card, .btn-download-card, .btn-va-close) {
    box-sizing: border-box; min-height: var(--mobile-control-height); padding: 0 16px;
    border-radius: var(--mobile-radius-control) !important;
    font: 800 .78rem/1 var(--font-family-interface, 'Inter', sans-serif); letter-spacing: .035em;
    cursor: pointer; transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
body.mobile-body :is(button, input, select, textarea):focus-visible { outline: 3px solid rgba(156, 91, 255, .35); outline-offset: 2px; }
body.mobile-body :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .52; }
body.mobile-body .mobile-modal > :is(h2, h3) { margin: 0 0 8px; }
body.mobile-body .mobile-modal > p { margin: 0 0 18px; font: 400 .86rem/1.55 var(--font-family-interface, 'Inter', sans-serif); }
body.mobile-body .mobile-modal > input + input { margin-top: 10px; }
body.mobile-body .modal-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px !important; }
body.mobile-body .modal-buttons > button { width: 100%; min-width: 0; }
body.mobile-body .modal-buttons > :only-child,
body.mobile-body .modal-buttons > .challenge-btn { grid-column: 1 / -1; }
body.mobile-body .modal-buttons > .challenge-btn { min-height: var(--mobile-control-height); }
body.mobile-body #nameModalOverlay .active-users-list { justify-content: flex-start; max-height: 32dvh; margin: 4px 0 14px; padding: 3px; gap: 8px; }
body.mobile-body #nameModalOverlay .user-chip {
    box-sizing: border-box; min-height: 44px; padding: 8px 12px; border-radius: 12px;
    color: var(--mobile-copy); background: rgba(255,255,255,.035);
}
body.mobile-body #nameModalOverlay .user-chip:has(input:checked) {
    border-color: var(--color-navigation, #8A3FFC); background: var(--color-navigation-soft, rgba(138,63,252,.14));
    box-shadow: inset 0 0 0 1px rgba(156,91,255,.16);
}
body.mobile-body #surpriseSongBox {
    margin: 16px 0 !important; padding: 16px !important; border-width: 1px !important;
    border-radius: var(--mobile-radius-card) !important; background: rgba(255,122,0,.045) !important; box-shadow: none !important;
}
body.mobile-body .song-card .song-actions { gap: 8px; }
body.mobile-body .song-card .song-actions > .star-btn {
    display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 12px;
}
body.mobile-body .song-card .btn-request { min-height: 44px; }
body.mobile-body #nowPlayingBar { padding: 15px !important; }
body.mobile-body #nowPlayingBar .audience-rating,
body.mobile-body #nowPlayingBar .reaction-panel,
body.mobile-body #nowPlayingBar .message-row { box-sizing: border-box; border-top-color: var(--mobile-line) !important; }
body.mobile-body #nowPlayingBar #avgVoteDisplay {
    min-height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px !important;
}
body.mobile-body #nowPlayingBar :is(.star-btn, .reaction-btn) { min-width: 44px; min-height: 44px; }
body.mobile-body #nowPlayingBar .message-row { align-items: stretch; }
body.mobile-body #mobileMsgText {
    min-width: 0; min-height: var(--mobile-control-height); padding: 0 14px !important;
    border-radius: var(--mobile-radius-control) !important; font-size: .82rem !important;
}
body.mobile-body #btnSendMobileMsg {
    min-height: var(--mobile-control-height); padding: 0 15px !important; border-radius: var(--mobile-radius-control) !important;
}
body.mobile-body .queue-indicator {
    max-width: calc(100vw - 32px); box-sizing: border-box; padding: 13px 18px; border-radius: 14px;
    font: 800 .8rem/1.3 var(--font-family-interface, 'Inter', sans-serif); letter-spacing: .035em; text-align: center;
}
@media (hover: hover) {
    body.mobile-body :is(.btn-confirm, .btn-cancel, .btn-modal-close, .btn-share-card, .btn-download-card, .btn-va-close):hover { filter: brightness(1.08); }
}
@media (max-width: 380px) {
    body.mobile-body .modal-buttons { grid-template-columns: 1fr; }
    body.mobile-body .modal-buttons > * { grid-column: 1; }
    body.mobile-body #nowPlayingBar .message-row { flex-direction: column; }
    body.mobile-body #btnSendMobileMsg { width: 100%; }
}