/* ── Global Design Tokens ── */
:root {
    --bg-primary: #FAF9F5;
    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --accent-sage: #8DA399;
    --accent-sage-dark: #3E5A4D;
    --accent-clay: #D4A373;
    --border-light: #EAEAEA;
}

/* ── Global Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Global Typography & Body ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ── Global Footer ── */
.global-footer {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-light);
}

.footer-left .copyright {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    opacity: 0.6;
    margin: 0;
}

.footer-right {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-right a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.footer-right a:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .global-footer {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        text-align: center;
        margin-top: 40px;
    }
    .footer-right {
        justify-content: center;
    }
}

/* ── Core Primitives ── */
.btn {
    display: inline-block;
    background: var(--accent-clay);
    color: white;
    padding: 18px 30px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 10px 25px rgba(212, 163, 115, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 163, 115, 0.4);
}

.btn:active {
    transform: scale(0.96);
}

/* ── Share Location Button ── */
.share-location-btn {
    background: var(--accent-clay);
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    display: inline-block;
    animation: location-pulse-y 3s infinite ease-in-out;
}

@keyframes location-pulse-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
}

/* =========================================
   TOP PAGE SPACING & HEADER 
   ========================================= */

/* 1. Tighten the gap under the top logo/header */
header, .logo-container {
    margin-bottom: 8px !important;
    padding-bottom: 0;
}

/* 2. Pull up the main page wrapper */
main, .page-wrapper, .content-container {
    padding-top: 0 !important;
    margin-top: 8px !important;
}

/* 3. Snug the main H1 heading up to the top and reduce space below it */
h1, .main-heading {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

/* =========================================
   FORM CONTAINER & BOOST CARD SPACING
   ========================================= */

/* 4. Reduce top padding above the category toggles, 
      and add bottom padding so the sticky button doesn't hide the last field */
.form-container, .drop-form-wrapper, .drop-card {
    padding-top: 12px !important;
    padding-bottom: 100px !important; /* Fixed: Removed 80px dead space below the button */
}

/* 5. Shrink the gap below the Boost Card */
.boost-card-container, .note-card {
    margin-bottom: 12px !important;
}

/* 6. Remove excess space above the button wrapper */
.submit-button-container {
    margin-top: 0 !important;
}

/* =========================================
   STICKY SUBMIT BUTTON
   ========================================= */

/* 7. Lock the submit button to the bottom of the viewport on mobile */
.submit-btn, #drop-note-btn, #broadcast-btn, .drop-btn {
    position: absolute !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important; left: 50% !important; transform: translateX(-50%) !important; width: calc(100% - 32px) !important; max-width: 560px !important; /* Floats 16px above the physical bottom of the screen */
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin-top: 0 !important;
}

/* =========================================
   SHRINK CATEGORY BUTTONS HEIGHT
   ========================================= */
/* Target the 4 grid buttons: PAY FOR, GET PAID, FREE/FAVOR, LOCAL CHAT */
.category-btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important; /* Removes any tall default heights */
    line-height: 1.2 !important;
}

/* =========================================
   SHRINK BOOST CARD INTERNAL PADDING
   ========================================= */
/* Target the Boost card and its internal text */
.boost-card {
    padding: 12px 16px !important; /* Reduces the thick padding inside the card walls */
}

/* Condense the text inside the Boost card so it stacks tighter */
.boost-card > div, .boost-card > label {
    margin-bottom: 8px !important; /* Tighter gap under elements inside Boost Card */
}
.boost-card span {
    line-height: 1.1 !important;
}

/* =========================================
   TOP FORM SPACING FIX
   ========================================= */
/* The top category group doesn't have a floating label, so it doesn't need the 15px padding that other fields get */
.field-group.note-type-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* =========================================
   TEXT WRAPPING & ORPHAN PREVENTION
   ========================================= */

/* 1. For Headings and Short Subtext (Balancing) */
h1, h2, h3, h4, h5, h6, 
.step-subtext, .category-btn span, 
.drop-title, .drop-subtitle, 
.main-heading, .sub-header, 
.welcome-card h2, .loc-bar {
    text-wrap: balance !important;
}

/* 2. For Paragraphs and Longer Text (Orphan Prevention) */
p, .note-card p, 
.form-disclaimer, 
.trust-hook-text, 
.welcome-card p {
    text-wrap: pretty !important;
}

/* =========================================
   GLOBAL H1 STYLING (MATCH INDEX PAGE)
   ========================================= */
h1 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    font-size: 2rem !important;
    color: var(--text-primary) !important;
    text-align: center !important;
}

/* =========================================
   BURNER VIDEO UI
   ========================================= */

/* Full Screen Overlay */
#video-modal {
    backdrop-filter: blur(10px) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.burner-video-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(15, 20, 25, 0.85); /* Deep slate backdrop */
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.3s ease;
}

/* Main Video Window */
.burner-video-container {
    position: relative; 
    width: clamp(280px, 95vw, 440px); 
    aspect-ratio: 3/4; max-height: 85vh; 
    background: #111; /* Dark base for video */
    border-radius: 24px; 
    overflow: hidden; 
    box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

/* Remote & Local Video Feeds */
#remote-video {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#local-video {
    position: absolute; bottom: 24px; right: 16px; 
    width: clamp(80px, 25vw, 110px); aspect-ratio: 3/4; 
    object-fit: cover; border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Glassmorphic Control Bar */
.burner-controls {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 16px; 
    background: rgba(30, 35, 40, 0.6); 
    backdrop-filter: blur(16px);
    padding: 12px 24px; border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Control Buttons */
.control-btn {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); 
    color: white; border: none; cursor: pointer;
    transition: all 0.2s ease;
}
.control-btn:hover { background: rgba(255, 255, 255, 0.2); }
.control-btn.muted { background: rgba(212, 163, 115, 0.8); color: #111; } /* Volcanic accent for active state */

#mute-video-btn {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mute-video-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

/* End Call Button */
.end-call-btn {
    background: rgba(231, 76, 60, 0.9);
}
.end-call-btn:hover {
    background: rgba(231, 76, 60, 1);
    transform: scale(1.05);
}

/* Ringing / Calling Overlay */
.ringing-overlay {
    position: absolute; inset: 0; 
    background: rgba(0,0,0,0.82); 
    backdrop-filter: blur(8px); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    color: white; border-radius: 20px;
}

@keyframes ringPulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes phoneShake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-15deg); }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(-12deg); }
    40% { transform: rotate(12deg); }
    50% { transform: rotate(0deg); }
}

.ring-circle {
    position: absolute; width: 60px; height: 60px;
    border: 3px solid rgba(46, 204, 113, 0.5);
    border-radius: 50%;
    animation: ringPulse 2s ease-out infinite;
}
.ring-circle:nth-child(2) { animation-delay: 0.5s; }
.ring-circle:nth-child(3) { animation-delay: 1s; }

.ringing-title {
    font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; 
    font-size: 0.95rem; margin: 0;
}
.ringing-subtitle {
    font-size: 0.75em; color: rgba(255,255,255,0.5); margin: 6px 0 0 0;
}
.cancel-call-btn {
    margin-top: 28px; background: #e74c3c; color: white; 
    padding: 14px 48px; border-radius: 30px; border: none; 
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px; 
    font-size: 0.95rem; cursor: pointer; z-index: 100; 
    min-height: 48px; min-width: 160px; box-shadow: 0 6px 20px rgba(231,76,60,0.4);
    transition: transform 0.2s, background 0.2s;
}
.cancel-call-btn:hover {
    background: #c0392b; transform: scale(1.05);
}

/* Incoming Call Modal */
.incoming-modal-overlay {
    position: fixed; inset: 0; z-index: 10000; 
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); 
    display: flex; align-items: center; justify-content: center; 
    animation: fadeIn 0.3s ease;
}

@keyframes incomingPop { 0%{transform:scale(0.8);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes acceptPulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,0.4)} 70%{box-shadow:0 0 0 15px rgba(46,204,113,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0)} }

.incoming-card {
    background: var(--bg-primary); 
    border: 1px solid var(--border-light); 
    border-radius: 20px; 
    padding: clamp(24px,6vw,36px) clamp(20px,5vw,32px); 
    max-width: 380px; width: calc(100% - 32px); 
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.15); 
    animation: incomingPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.incoming-title {
    font-weight: 800; color: var(--text-primary); 
    letter-spacing: 0.5px; margin: 0 0 6px 0; 
    font-size: clamp(1.2rem,4vw,1.4rem);
}
.incoming-subtitle {
    color: var(--text-secondary); margin: 0 0 28px 0; 
    font-size: clamp(0.9em,3vw,1em); line-height: 1.4;
}



/* =========================================
   GLOBAL BUTTON SYSTEM
   ========================================= */

/* Base Modal Action Wrapper */
.modal-actions {
    display: flex; flex-direction: column; gap: 12px; 
    align-items: center; justify-content: center; 
    margin-top: 24px; width: 100%;
}

/* Base Modal Action Wrapper (Row) */
.modal-actions-row {
    display: flex; flex-direction: row; gap: 16px; 
    align-items: center; justify-content: center; 
    margin-top: 24px; width: 100%;
}

/* Base Global Button */
.btn-global {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 260px; /* Prevents ugly full-screen stretching */
    min-height: 48px; padding: 12px 24px;
    border-radius: 30px; font-weight: 800; font-size: 0.95rem;
    letter-spacing: 0.5px; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s ease;
    border: none; text-align: center;
}

/* Primary Action (e.g., Accept, Notify Me, Submit) */
.btn-primary {
    background: var(--accent-clay, #d4a373);
    color: #111;
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.3);
}
.btn-primary:active { transform: scale(0.98); }

/* Success Action (e.g., Accept Call) */
.btn-success {
    background: #2ecc71;
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}
.btn-success:active { transform: scale(0.98); }

/* Danger/Destructive Action (e.g., Hang Up, Decline) */
.btn-danger {
    background: #e74c3c;
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.btn-danger:active { transform: scale(0.98); }

/* Ghost/Subtle Action (e.g., Maybe Later, Cancel) */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.btn-ghost:hover { background: rgba(0,0,0,0.05); }

/* Force Header to be pinned flush at the top globally */
.app-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1.5rem !important;
    background: var(--bg-primary) !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Force body to hug the viewport and push content below header */
body {
    margin: 0 !important;
    padding: 80px 0 0 0 !important;
}

/* Kill all excessive spacing */
.app-content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   DROP NOTE BUTTON PLACEMENT FIX
   ========================================================= */
.fab, #main-fab, .submit-btn, #drop-note-btn, #broadcast-btn, .drop-btn {
    position: fixed !important;
    bottom: max(24px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
}

/* =========================================================
   MOBILE INPUT AUTO-ZOOM PREVENTION
   ========================================================= */
input, textarea, select, .drop-input, #note-desc {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
}

/* =========================================================
   DROP NOTE BUTTON PLACEMENT FIX REFINEMENT
   ========================================================= */
.fab, #main-fab {
    position: fixed !important;
    bottom: max(24px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
}

/* Revert form submit buttons to standard flow */
.submit-btn, #drop-note-btn, #broadcast-btn, .drop-btn {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    z-index: 10 !important;
}

/* =========================================================
   DROP FORM BOTTOM WHITESPACE ERADICATION
   ========================================================= */
.form-container, .drop-form-wrapper, .drop-card {
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
}

.submit-btn, #drop-note-btn, #broadcast-btn, .drop-btn {
    margin-bottom: 0 !important;
}

/* Ensure the body doesn't artificially stretch the scroll */
body {
    min-height: 100vh !important; /* Keep viewport filled but don't force overflow */
    padding-bottom: 24px !important;
}

footer {
    padding-bottom: 24px !important;
}

/* =========================================================
   HEADER-TO-CONTENT SPACING REFINEMENT
   ========================================================= */
body {
    padding-top: clamp(56px, 8vh, 72px) !important; 
}

h1, .main-heading, .page-header {
    margin-top: 0 !important;
}

/* =========================================================
   DROP FORM PREMIUM BOOST CARD & CTA STYLING
   ========================================================= */

.premium-boost-card {
    background: linear-gradient(145deg, rgba(55, 75, 65, 0.45), rgba(30, 42, 36, 0.55)) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(163, 201, 184, 0.3) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
}

.boost-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.boost-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.5px !important;
    text-transform: uppercase !important;
}

.boost-badge {
    background: var(--accent-clay) !important;
    color: #111 !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 12px rgba(212, 163, 115, 0.3) !important;
}

.boost-features {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.boost-features li {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    opacity: 0.9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.boost-features li span {
    font-size: 0.95rem !important;
}

.premium-interactive-zone {
    margin-top: 8px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(163, 201, 184, 0.15) !important;
}

.boost-manifesto {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: var(--accent-sage) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    opacity: 0.8 !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* Split CTA Container */
.split-cta-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.premium-cta-btn {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--accent-clay), hsl(30, 42%, 54%)) !important;
    color: #111 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 12px 24px hsla(30, 52%, 64%, 0.4), inset 0 1px 0 hsla(0, 0%, 100%, 0.4) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
}

.premium-cta-btn:active {
    transform: scale(0.98) !important;
}

.free-cta-btn {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
}

.free-cta-btn:hover {
    color: var(--text-primary) !important;
}

.premium-interactive-zone {
    transition: all 0.3s ease !important;
}

.premium-cta-btn {
    transition: all 0.3s ease !important;
}

#boost-features-list {
    transition: all 0.3s ease !important;
}

/* =========================================================
   PREMIUM BOOST CARD REFINEMENT
   ========================================================= */
.premium-boost-card {
    background: rgba(141, 163, 153, 0.15) !important;
    box-shadow: none !important;
    padding: 16px !important;
    gap: 8px !important;
}

/* =========================================================
   AGGRESSIVE EMPTY SPACE CRUSHING
   ========================================================= */
.premium-boost-card {
    padding: 12px !important;
    gap: 6px !important;
}
.boost-title {
    line-height: 1 !important;
}
#boost-features-list {
    line-height: 1.2 !important;
    margin-top: 0 !important;
    font-size: 0.7rem !important;
}
.premium-interactive-zone {
    margin-top: 6px !important;
    padding-top: 10px !important;
}
.split-cta-container { gap: 6px !important; }

/* =========================================================
   HEADER OVERLAP FIX
   ========================================================= */
.app-header {
    position: relative !important; 
}

body {
    padding-top: 0 !important; 
}

h1, .main-heading, .page-header {
    margin-top: 1rem !important; 
}

/* =========================================================
   OVERLAY Z-INDEX DOMINANCE OVERRIDE
   ========================================================= */
.burner-video-overlay, 
#video-modal, 
.welcome-overlay, 
#browser-switch-overlay, 
#toast-alert {
    z-index: 999999 !important; 
}

#video-modal, .burner-video-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

body:has(#video-modal[style*="display: block"]) .fab,
body:has(#video-modal[style*="display: flex"]) .fab,
body:has(#video-modal[style*="display: block"]) .app-header,
body:has(#video-modal[style*="display: flex"]) .app-header {
    display: none !important;
}

/* =========================================================
   PREMIUM MODAL & TOAST UPGRADES
   ========================================================= */

@keyframes sonarPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes dropIn {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

#toast-alert {
    position: fixed !important;
    top: -100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(30, 40, 35, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(163, 201, 184, 0.3) !important;
    color: #FFF !important;
    padding: 14px 28px !important;
    border-radius: 99px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-align: center !important;
    width: auto !important;
    max-width: 90% !important;
}

#toast-alert.show {
    top: 40px !important;
    opacity: 1 !important;
}

#missed-call-modal, .burner-video-overlay, #ringing-overlay {
    z-index: 999999 !important;
}

/* =========================================================
   GLOBAL HEADER POSITIONING SWEEP
   ========================================================= */
header, 
.app-header, 
.page-header, 
.drop-header, 
.global-header,
#main-header,
.site-header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}