@layer base {
    :root {
        --color-shadow: oklch(var(--n) / 10%);
        background-color: var(--root-bg, var(--color-base-200)) !important;
    }

    [inert] ::-webkit-scrollbar {
        display: none;
    }
}

/* Global cursor styles */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

@import "tailwindcss" source("../../../app");

@theme {
    --color-primary: #e2594b;
    --color-primary-dark: #a12a17;
    --color-accent-purple: #667eea;
    --color-accent-pink: #f093fb;
    --color-accent-red: #f5576c;
    --color-accent-bone: #c9c5b1;
    --color-accent-ivory: #fefefe;
    --color-accent-bone-2: #dfdcd0;
    --color-accent-bone-3: #e4e3db;
}

@plugin "@tailwindcss/typography";

@layer components {
    .form {
        @apply grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6;
    }

    /* pagy */
    .pagy {
        @apply flex space-x-1 font-semibold text-sm text-gray-500;
        a:not(.gap) {
            @apply block rounded-lg px-3 py-1 bg-gray-200;
            &:hover {
                @apply bg-gray-300;
            }
            &:not([href]) {
                /* disabled links */
                @apply text-gray-300 bg-gray-100 cursor-default;
            }
            &.current {
                @apply text-white bg-gray-400;
            }
        }
        label {
            @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
            input {
                @apply bg-gray-100 border-none rounded-md;
            }
        }
    }

    /* Zero button container for hover effect */
    .keypad-zero-button {
        position: relative;
    }

    /* Long press tooltip that shows on hover */
    .keypad-zero-button:hover .keypad-tooltip {
        opacity: 1;
        visibility: visible;
    }

    /* Base tooltip style */
    .keypad-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 8px;
        padding: 6px 10px;
        background-color: rgba(31, 41, 55, 0.95); /* gray-800 with opacity */
        color: #d1d5db; /* gray-300 */
        font-size: 0.75rem;
        white-space: nowrap;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        pointer-events: none;
        z-index: 10;
    }

    /* Tooltip arrow */
    .keypad-tooltip:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: rgba(31, 41, 55, 0.95) transparent transparent transparent;
    }

    /* Visual feedback for long press */
    .long-press-active {
        background-color: #059669 !important; /* green-600 */
        transform: scale(0.95);
        transition: background-color 0.2s, transform 0.2s;
    }

    // Landing

    @keyframes glowPulse {
        0% {
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
        }
        50% {
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
        }
        100% {
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.5s ease forwards;
    }

    .btn-glow:hover {
        animation: glowPulse 1.5s infinite;
    }

    /* Retro grid background */
    .retro-grid {
        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
            linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px),
            linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px);
        background-size: 100% 100%, 20px 20px, 20px 20px;
        background-position: 0 0, 0 0, 0 0;
    }

    /* VHS scanlines effect */
    .scanlines {
        position: relative;
        overflow: hidden;
    }

    .scanlines::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: repeating-linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 0.5%, transparent 1%);
        pointer-events: none;
        z-index: 10;
    }

    /* Text glitch effect */
    @keyframes textGlitch {
        0% {
            text-shadow: 1px 0 0 rgba(255, 0, 0, 0.5), -1px 0 0 rgba(0, 255, 255, 0.5);
        }
        25% {
            text-shadow: -1px 0 0 rgba(255, 0, 0, 0.5), 1px 0 0 rgba(0, 255, 255, 0.5);
        }
        50% {
            text-shadow: 0.5px 0 0 rgba(255, 0, 0, 0.5), -0.5px 0 0 rgba(0, 255, 255, 0.5);
        }
        75% {
            text-shadow: -0.5px 0 0 rgba(255, 0, 0, 0.5), 0.5px 0 0 rgba(0, 255, 255, 0.5);
        }
        100% {
            text-shadow: 1px 0 0 rgba(255, 0, 0, 0.5), -1px 0 0 rgba(0, 255, 255, 0.5);
        }
    }

    .text-glitch:hover {
        animation: textGlitch 0.3s infinite;
    }

    /* Action movie inspired paper tear edge for sections */
    .torn-edge-top::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 0;
        width: 100%;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='15' viewBox='0 0 100 15' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q 10 5, 20 15 Q 30 5, 40 15 Q 50 5, 60 15 Q 70 5, 80 15 Q 90 5, 100 15 L 100 0 L 0 0 Z' fill='%23111827'/%3E%3C/svg%3E");
    }

    .torn-edge-bottom::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='15' viewBox='0 0 100 15' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 Q 10 10, 20 0 Q 30 10, 40 0 Q 50 10, 60 0 Q 70 10, 80 0 Q 90 10, 100 0 L 100 15 L 0 15 Z' fill='%23111827'/%3E%3C/svg%3E");
    }

    /* Animated bullet hole for bullet points */
    @keyframes bulletHole {
        0% {
            transform: scale(0.1);
            opacity: 0;
        }
        30% {
            transform: scale(1.2);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .bullet-hole {
        position: relative;
    }

    .bullet-hole::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: radial-gradient(circle, rgba(128, 128, 128, 0.8) 0%, rgba(64, 64, 64, 0.8) 60%, transparent 100%);
        border-radius: 50%;
        margin-right: 10px;
        animation: bulletHole 0.5s ease-out;
    }

    /* Typewriter effect for hero text */
    .typewriter {
        overflow: hidden;
        border-right: 0.15em solid #ff0000;
        white-space: nowrap;
        margin: 0 auto;
        letter-spacing: 0.15em;
        animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes blink-caret {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: #ff0000;
        }
    }

    /* Red digital LED-style countdown timer */
    .digital-counter {
        font-family: "Courier New", monospace;
        background: #000;
        color: #ff0000;
        border: 1px solid #ff0000;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
        letter-spacing: 2px;
    }

    /* Film grain overlay */
    .film-grain::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=");
        pointer-events: none;
        z-index: 2000;
        opacity: 0.05;
    }

    /* Animated explosion effect for buttons */
    @keyframes explosion {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
            transform: scale(1);
        }
        25% {
            box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.5);
            transform: scale(1.03);
        }
        50% {
            box-shadow: 0 0 40px 15px rgba(255, 200, 0, 0.5);
        }
        75% {
            box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.5);
            transform: scale(1.01);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
            transform: scale(1);
        }
    }

    .explosion-btn:active {
        animation: explosion 0.5s;
    }

    /* Blinking cursor effect */
    .blink-cursor {
        animation: blink 1s infinite;
    }

    @keyframes blink {
        0%,
        49% {
            opacity: 1;
        }
        50%,
        100% {
            opacity: 0;
        }
    }

    /* Add custom scrollbar with 80s/90s theme */
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #1a1a1a;
        border-left: 1px solid #3a3a3a;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #ff0000, #cc0000);
        border-radius: 0;
        border: 1px solid #ff3333;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(to bottom, #ff3333, #ff0000);
    }
}

// Keypad V2

@layer base {
    :root {
        --color-dial-red: 255 71 87;
        --color-dial-green: 34 197 94;
        --color-dial-blue: 59 130 246;
        --color-dial-orange: 245 158 11;
        --color-bg-primary: 10 15 28;
        --color-bg-secondary: 15 23 42;
        --color-bg-tertiary: 30 41 59;
    }
}

@layer components {
    /* Header Components */
    .dial-header {
        @apply px-5 py-5 flex justify-between items-center;
        @apply bg-slate-900/80 backdrop-blur-md border-b border-white/10;
    }

    .dial-logo {
        @apply text-2xl font-bold flex items-center gap-1;
    }

    .dial-logo-accent {
        @apply text-red-500;
    }

    .dial-status {
        @apply flex gap-6 text-sm text-green-500;
    }

    .dial-status-item {
        @apply flex items-center gap-2;
    }

    .dial-status-dot {
        @apply w-2 h-2 bg-green-500 rounded-full animate-pulse;
    }

    /* Main Content */
    .dial-main {
        @apply flex-1 flex flex-col items-center max-w-[520px] w-full mx-auto px-5;
    }

    /* Display Section */
    .dial-display-section {
        @apply w-full;
        @apply flex-1 flex flex-col justify-center mb-6 relative;
    }

    .dial-phone-input {
        @apply text-3xl font-light text-center tracking-wider mb-2 min-h-[48px];
        @apply flex items-center justify-center transition-all duration-200;
    }

    .dial-phone-input.empty {
        @apply text-white/30 text-lg;
    }

    .dial-input-cursor {
        @apply inline-block w-0.5 h-8 bg-blue-500 ml-0.5 animate-blink;
    }

    .dial-validation {
        @apply text-xs text-center h-5 mb-2 flex items-center justify-center gap-1.5;
        @apply transition-all duration-200;
    }

    .dial-validation-progress {
        @apply w-[60px] h-[3px] bg-white/10 rounded-full overflow-hidden relative;
    }

    .dial-validation-bar {
        @apply h-full bg-blue-500 rounded-full transition-all duration-300;
    }

    .dial-validation-text {
        @apply text-white/50 transition-colors duration-200;
    }

    .dial-validation-text.valid {
        @apply text-green-500;
    }

    .dial-validation-text.warning {
        @apply text-orange-500;
    }

    .dial-input-controls {
        @apply absolute right-0 top-1/2 -translate-y-1/2 flex gap-2;
        @apply opacity-0 transition-opacity duration-200;
    }

    .dial-display-section:hover .dial-input-controls,
    .dial-input-controls.visible {
        @apply opacity-100;
    }

    .dial-input-btn {
        @apply w-8 h-8 rounded-full bg-white/10 border-0 text-white/60;
        @apply cursor-pointer flex items-center justify-center;
        @apply transition-all duration-200 text-base;
        @apply hover:bg-white/20 hover:text-white active:scale-90;
    }

    /* Settings Bar */
    .dial-settings-bar {
        @apply w-full max-w-[400px];
        @apply flex gap-3 mb-6 flex-wrap p-4;
        @apply bg-slate-900/40 rounded-2xl border border-white/5;
    }

    .dial-setting-chip {
        @apply flex-1 min-w-[120px] py-3 px-4;
        @apply bg-slate-800/60 border border-white/10 rounded-xl;
        @apply cursor-pointer transition-all duration-200;
        @apply flex items-center justify-between;
        @apply hover:bg-slate-800/80 hover:border-white/20;
    }

    .dial-setting-chip.active {
        @apply bg-blue-500/20 border-blue-500;
    }

    .dial-setting-label {
        @apply text-xs text-white/60 mb-0.5;
    }

    .dial-setting-value {
        @apply text-sm font-medium;
    }

    .dial-setting-icon {
        @apply opacity-60 transition-opacity duration-200;
    }

    .dial-setting-chip:hover .dial-setting-icon {
        @apply opacity-100;
    }

    /* Keypad Section */
    .dial-keypad-section {
        @apply w-full max-w-[400px];
        @apply bg-slate-900/30 rounded-[20px] p-4 border border-white/5;
    }

    .dial-keypad {
        @apply grid grid-cols-3 gap-3 mb-5;
    }

    .dial-key {
        @apply aspect-square bg-slate-800/40 border border-white/10 rounded-2xl;
        @apply flex flex-col items-center justify-center cursor-pointer;
        @apply transition-all duration-150 relative overflow-hidden;
        @apply hover:bg-slate-800/60 hover:scale-105 active:scale-95 active:bg-slate-800/80;
    }

    .dial-key-number {
        @apply text-[28px] font-light leading-none;
    }

    .dial-key-letters {
        @apply text-[10px] text-white/50 mt-1 uppercase tracking-wider;
    }

    .dial-key-special {
        @apply text-2xl;
    }

    .dial-key.long-press-active {
        @apply bg-green-500/80 border-green-500 scale-95;
        @apply transition-all duration-200;
    }

    /* Action Buttons */
    .dial-action-buttons {
        @apply w-full max-w-[400px];
        @apply flex gap-3 mb-5 mt-5;
    }

    .dial-action-btn {
        @apply flex-1 py-4 rounded-xl border-0 text-base font-medium;
        @apply cursor-pointer transition-all duration-200;
        @apply flex items-center justify-center gap-2;
    }

    .dial-call-btn {
        @apply text-white transition-all duration-150 ease-out;
        background: linear-gradient(to bottom, #34C759, #28A745);
        transform: translateY(-1px);
        box-shadow: 
            /* Outer shadows for depth */
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 2px 4px rgba(0, 0, 0, 0.1),
            /* Inner highlights for bevel */
            inset 0px 2px 1px rgba(255, 255, 255, 0.6),
            inset 1px 0 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(0, 0, 0, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }

    .dial-call-btn:hover {
        transform: translateY(.25px);
        box-shadow: 
            /* Enhanced outer shadows for hover lift */
            0 8px 16px rgba(0, 0, 0, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 2px 4px rgba(52, 199, 89, 0.2),
            /* Inner highlights remain strong */
            inset 0px 2px 1px rgba(255, 255, 255, 0.6),
            inset 1px 0 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(0, 0, 0, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }

    .dial-call-btn:active {
        background: linear-gradient(to bottom, #2DB84E, #25A03E);
        transform: translateY(1px);
        transition-duration: 75ms;
        box-shadow: 
            /* Minimal outer shadows for pressed state */
            0 1px 2px rgba(0, 0, 0, 0.2),
            0 0 1px rgba(0, 0, 0, 0.1),
            /* Inverted inner shadows for pressed effect */
            inset 0 -1px 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(255, 255, 255, 0.2),
            inset 1px 0 0 rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(0, 0, 0, 0.25);
    }

    .dial-call-btn.in-call {
        @apply text-white transition-all duration-150 ease-out;
        background: linear-gradient(to bottom, #DC2626, #B91C1C) !important;
        transform: translateY(-1px);
        box-shadow: 
            /* Outer shadows for depth */
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 2px 4px rgba(0, 0, 0, 0.1),
            /* Inner highlights for bevel */
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            inset 1px 0 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(0, 0, 0, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }

    .dial-call-btn.in-call:hover {
        background: linear-gradient(to bottom, #EF4444, #DC2626) !important;
        transform: translateY(-2px);
        box-shadow: 
            /* Enhanced outer shadows for hover lift */
            0 8px 16px rgba(0, 0, 0, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 2px 4px rgba(220, 38, 38, 0.3),
            /* Inner highlights remain strong */
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 1px 0 0 rgba(255, 255, 255, 0.4),
            inset -1px 0 0 rgba(0, 0, 0, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }

    .dial-call-btn.in-call:active {
        background: linear-gradient(to bottom, #B91C1C, #991B1B) !important;
        transform: translateY(1px);
        transition-duration: 75ms;
        box-shadow: 
            /* Minimal outer shadows for pressed state */
            0 1px 2px rgba(0, 0, 0, 0.2),
            0 0 1px rgba(0, 0, 0, 0.1),
            /* Inverted inner shadows for pressed effect */
            inset 0 -1px 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(255, 255, 255, 0.2),
            inset 1px 0 0 rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(0, 0, 0, 0.25);
    }

    .dial-mute-btn {
        @apply bg-slate-800/60 text-white border border-white/10;
        @apply hover:bg-slate-800/80;
    }

    .dial-mute-btn.active {
        @apply bg-red-500 border-red-500;
    }

    .dial-action-backspace {
        @apply p-4 cursor-pointer rounded-full;
        @apply cursor-pointer transition-all duration-200;
        @apply hover:bg-slate-600 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-500/30;
        @apply active:translate-y-0;
    }

    /* Bottom Info */
    .dial-bottom-info {
        @apply w-full max-w-[400px];
        @apply flex justify-between items-center px-2 text-sm text-white/60;
    }

    .dial-credit-info {
        @apply flex items-center gap-2;
    }

    .dial-credit-amount {
        @apply text-green-500 font-medium;
    }

    .dial-rate-info {
        @apply flex items-center gap-1;
    }

    .dial-rate-display {
        @apply text-blue-500 font-medium;
    }

    .dial-rate-display.error {
        @apply text-red-500;
    }

    .dial-minutes-display {
        @apply text-white/60 ml-1;
    }

    .dial-rate-link {
        @apply text-blue-500 no-underline transition-opacity duration-200;
        @apply hover:opacity-80;
    }

    /* Modal */
    .dial-modal {
        @apply hidden fixed inset-0 bg-black/80 backdrop-blur-md z-[1000];
        @apply items-center justify-center;
    }

    .dial-modal.active {
        @apply flex;
    }

    .dial-modal-content {
        @apply bg-slate-800 rounded-[20px] p-8 max-w-[400px] w-[90%] max-h-[80vh];
        @apply overflow-y-auto animate-slideUp;
    }

    .dial-modal-header {
        @apply flex justify-between items-center mb-5;
    }

    .dial-modal-title {
        @apply text-xl font-medium text-center;
    }

    .dial-close-btn {
        @apply bg-transparent border-0 text-white/60 text-2xl cursor-pointer p-1;
        @apply transition-colors duration-200 hover:text-white;
    }

    .dial-option-list {
        @apply flex flex-col gap-2;
    }

    .dial-option-item {
        @apply p-4 bg-slate-700/40 border border-white/10 rounded-xl;
        @apply cursor-pointer transition-all duration-200;
        @apply flex justify-between items-center;
        @apply hover:bg-slate-700/60 hover:border-white/20;
    }

    .dial-option-item.selected {
        @apply bg-blue-500/20 border-blue-500;
    }

    .dial-option-main {
        @apply flex flex-col;
    }

    .dial-option-name {
        @apply font-medium mb-1;
    }

    .dial-option-detail {
        @apply text-xs text-white/60;
    }

    .dial-option-value {
        @apply text-sm text-slate-100 font-medium;
    }

    .dial-option-icons {
        @apply flex items-center gap-2;
    }

    .dial-capability-icon {
        @apply flex items-center justify-center w-5 h-5;
        @apply text-white/40 transition-colors duration-200;
    }

    .dial-option-item:hover .dial-capability-icon {
        @apply text-white/60;
    }

    .dial-option-item.selected .dial-capability-icon {
        @apply text-blue-400;
    }

    /* Toast */
    .dial-toast {
        @apply fixed bottom-[100px] left-1/2 -translate-x-1/2 translate-y-[100px];
        @apply bg-slate-800/95 backdrop-blur-md border border-white/20 rounded-xl;
        @apply py-3 px-5 text-white text-sm z-[1001] opacity-0;
        @apply transition-all duration-300 flex items-center gap-2;
    }

    .dial-toast.show {
        @apply translate-y-0 opacity-100;
    }

    .dial-toast.success {
        @apply bg-green-500/95 border-green-500/30;
    }

    .dial-toast.error {
        @apply bg-red-500/95 border-red-500/30;
    }

    /* Error Toast Stack */
    .dial-error-toast-stack {
        @apply fixed top-4 left-1/2 -translate-x-1/2 z-[9999];
        @apply flex flex-col gap-2 w-[90%] max-w-md;
    }

    .dial-error-toast {
        @apply bg-red-500/95 backdrop-blur-md border border-red-500/30 rounded-xl;
        @apply py-3 px-5 text-white text-sm;
        @apply transition-all duration-300 flex items-center gap-2;
        @apply translate-y-[-20px] opacity-0;
    }

    .dial-error-toast.show {
        @apply translate-y-0 opacity-100;
    }

    /* Call Overlay */
    .dial-call-overlay {
        @apply fixed inset-0 bg-black/90 backdrop-blur-md z-[1000];
        @apply flex items-center justify-center;
        @apply transition-all duration-300;
    }

    .dial-overlay-content {
        @apply bg-slate-900/95 border border-white/10 rounded-[24px] p-8;
        @apply max-w-[400px] w-[90%] backdrop-blur-md;
        @apply animate-slideUp;
    }

    .dial-overlay-header {
        @apply text-center mb-8;
    }

    .dial-overlay-caller-id {
        @apply flex justify-center items-center gap-1;
    }

    .dial-overlay-number {
        @apply text-2xl font-mono mb-3;
    }

    .dial-overlay-status {
        @apply flex items-center justify-center gap-2 text-sm text-white/60 mb-2;
    }

    .dial-status-indicator {
        @apply w-2 h-2 rounded-full;
    }

    .dial-status-indicator.connecting {
        @apply bg-orange-500 animate-pulse;
    }

    .dial-status-indicator.connected {
        @apply bg-green-500 animate-pulse;
    }

    .dial-status-indicator.ringing {
        @apply bg-blue-500 animate-pulse;
    }

    .dial-status-indicator.failed {
        @apply bg-red-500;
    }

    .dial-status-message {
        @apply text-white/70;
    }

    .dial-sent-digits {
        @apply text-sm font-mono text-white/50 mt-2;
    }

    .dial-digits-label {
        @apply text-white/40;
    }

    .dial-digits-value {
        @apply text-white/70;
    }

    .dial-overlay-timer {
        @apply text-center mb-4;
    }

    .dial-timer-display {
        @apply text-4xl font-mono text-green-500 font-light;
    }

    .dial-overlay-cost {
        @apply text-center mb-2;
    }

    .dial-cost-display {
        @apply text-lg font-mono text-orange-400 font-medium;
    }

    .dial-overlay-budget {
        @apply text-center mb-8;
    }

    .dial-budget-display {
        @apply text-sm text-white/50 font-medium;
    }

    .dial-overlay-controls {
        @apply flex justify-center gap-8;
    }

    .dial-control-group {
        @apply flex flex-col items-center;
    }

    .dial-control-btn {
        @apply w-16 h-16 rounded-full border-0 cursor-pointer;
        @apply flex items-center justify-center;
        @apply transition-all duration-200;
        @apply hover:scale-105 active:scale-95;
    }

    .dial-control-btn svg {
        @apply w-6 h-6;
    }

    .dial-control-btn.dial-mute-btn {
        @apply bg-slate-700/60 text-white border border-white/10;
        @apply hover:bg-slate-700/80;
    }

    .dial-control-btn.dial-mute-btn.muted {
        @apply bg-orange-500 border-orange-500 text-white;
    }

    .dial-control-btn.dial-keypad-btn {
        @apply bg-slate-700/60 text-white border border-white/10;
        @apply hover:bg-slate-700/80;
    }

    .dial-control-btn.dial-hangup-btn {
        @apply bg-red-600 text-white;
        @apply hover:bg-red-700 hover:shadow-lg hover:shadow-red-500/30;
    }

    .dial-control-label {
        @apply text-xs text-white/60 mt-2;
    }

    /* DTMF Keypad Modal */
    .dial-dtmf-modal {
        @apply fixed inset-0 bg-black/80 backdrop-blur-md z-[1100];
        @apply flex items-center justify-center;
        @apply transition-all duration-300;
    }

    .dial-dtmf-content {
        @apply bg-slate-800/95 border border-white/10 rounded-[20px] p-6;
        @apply max-w-[320px] w-[90%] backdrop-blur-md;
        @apply animate-slideUp;
    }

    .dial-dtmf-header {
        @apply flex justify-between items-center mb-4;
    }

    .dial-dtmf-title {
        @apply text-lg font-medium text-white;
    }

    .dial-dtmf-display {
        @apply bg-slate-900/60 border border-white/10 rounded-xl p-4 mb-4;
        @apply text-center min-h-[48px] flex items-center justify-center;
    }

    .dial-dtmf-digits {
        @apply text-xl font-mono text-white tracking-wider;
    }

    .dial-dtmf-keypad {
        @apply grid grid-cols-3 gap-2 mb-4;
    }

    .dial-dtmf-key {
        @apply aspect-square bg-slate-700/40 border border-white/10 rounded-xl;
        @apply flex flex-col items-center justify-center cursor-pointer;
        @apply transition-all duration-150 relative overflow-hidden;
        @apply hover:bg-slate-700/60 hover:scale-105 active:scale-95 active:bg-slate-700/80;
    }

    .dial-dtmf-number {
        @apply text-xl font-light leading-none text-white;
    }

    .dial-dtmf-special {
        @apply text-lg font-light leading-none text-white;
    }

    .dial-dtmf-letters {
        @apply text-[8px] text-white/50 mt-1 uppercase tracking-wider;
    }

    .dial-dtmf-actions {
        @apply flex justify-center;
    }

    .dial-dtmf-clear {
        @apply bg-slate-700/60 text-white border border-white/10 rounded-lg px-4 py-2;
        @apply cursor-pointer transition-all duration-200;
        @apply hover:bg-slate-700/80 active:scale-95;
    }

    /* Incoming Call Overlay */
    .dial-incoming-call-overlay {
        @apply fixed inset-0 bg-black/90 backdrop-blur-md z-[1000];
        @apply items-center justify-center;
        @apply transition-all duration-300;
    }

    .dial-incoming-content {
        @apply bg-slate-900/95 border border-white/10 rounded-[24px] p-8;
        @apply max-w-[400px] w-[90%] backdrop-blur-md;
        @apply animate-slideUp;
    }

    .dial-incoming-header {
        @apply text-center mb-8;
    }

    .dial-incoming-label {
        @apply text-sm text-white/60 mb-4 uppercase tracking-wide font-medium;
    }

    .dial-incoming-caller {
        @apply text-2xl font-mono mb-2 text-white;
        word-break: break-all;
    }

    .dial-incoming-country {
        @apply text-base text-white/80 mb-6;
    }

    .dial-incoming-info {
        @apply mb-8 p-4 bg-white/5 rounded-xl border border-white/10;
    }

    .dial-incoming-to {
        @apply flex items-center justify-center gap-2 text-sm;
    }

    .dial-incoming-to-label {
        @apply text-white/60 font-medium;
    }

    .dial-incoming-to-number {
        @apply text-white font-semibold;
    }

    .dial-incoming-controls {
        @apply flex justify-center gap-8;
    }

    .dial-incoming-btn {
        @apply flex flex-col items-center justify-center gap-2;
        @apply w-20 h-20 rounded-full border-0 cursor-pointer;
        @apply transition-all duration-200;
        @apply hover:scale-105 active:scale-95;
        @apply text-sm font-medium;
    }

    .dial-incoming-btn svg {
        @apply w-6 h-6;
    }

    .dial-decline-btn {
        @apply bg-red-600 text-white;
        @apply hover:bg-red-700;
        box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.4);
    }

    .dial-pickup-btn {
        @apply bg-green-600 text-white;
        @apply hover:bg-green-700;
        box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.4);
    }

    .dial-incoming-content {
        animation: slideUp 0.4s ease-out, incomingCallPulse 2s ease-in-out infinite;
    }

    /* Active incoming call overlay additions */
    .dial-incoming-to-info {
        @apply text-center mb-2;
    }

    // Design system v2
    .noise-bg {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    }

    .grid-bg {
        background-size: 40px 40px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-position: top center;
    }

    .slide-up {
        animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUp {
        0% {
            transform: translateY(20px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md py-3 px-6 text-base font-medium text-white transition-all hover:shadow-2xl active:shadow-md;
        background: linear-gradient(to bottom, #d1371d, #a12a17);
        box-shadow: 0 1px 2px #0000004d, 0 0 #000, inset 1px 1px 0.25px #ffffff4d, inset 0 2px 1px #ffffff80;
    }

    .btn-primary:hover {
        background: linear-gradient(to bottom, #e03d20, #b82e1a);
        box-shadow: 0 2px 4px #0000006d, 0 0 #000, inset 1px 1px 0.25px #ffffff4d, inset 0 2px 1px #ffffff80;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-md bg-white/5 py-3 px-6 text-base font-medium text-white shadow-sm border border-white/10 hover:bg-white/10 transition-all hover:shadow-lg active:translate-y-0 active:shadow-md;
    }

    .btn-tertiary {
        @apply inline-flex items-center justify-center rounded-md bg-white/[0.02] py-3 px-6 text-base font-medium text-white/80 shadow-sm border border-white/5 hover:bg-white/[0.05] hover:text-white transition-all active:translate-y-0;
    }

    .btn-small {
        @apply py-2 px-4 text-sm;
    }

    .btn-large {
        @apply py-4 px-8 text-lg;
    }

    .card {
        @apply rounded-lg p-6;
        background: linear-gradient(to bottom, #ffffff08, #ffffff03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 1px 2px #0000004d, 0 0 #000, inset 1px 1px 0.25px #ffffff2d, inset 0 2px 1px #ffffff4d;
        backdrop-filter: blur(2px);
    }

    .card:hover {
        background: linear-gradient(to bottom, #ffffff0a, #ffffff05);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 8px #0000006d, 0 0 #000, inset 1px 1px 0.25px #ffffff2d, inset 0 2px 1px #ffffff4d;
    }

    .card-primary {
        background: linear-gradient(to bottom, #3a3a3a, #1a1a1a);
        border: 1px solid #444;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 2px 1px #5f5f5f80,
            inset 1px 1px 0.2px #ffffff9e;
    }

    .card-primary:hover {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15),
            inset 0 2px 1px #5f5f5f80, inset 1px 1px 0.2px #ffffff9e;
    }

    .card-tertiary {
        @apply rounded-lg p-6;
        background: linear-gradient(to bottom, #ffffff02, #ffffff01);
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .card-tertiary:hover {
        background: linear-gradient(to bottom, #ffffff05, #ffffff02);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .feature-card {
        @apply relative p-6 flex flex-col justify-center rounded-md transition-all;
        background: linear-gradient(to bottom, #ffffff08, #ffffff03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 1px 2px #0000004d, 0 0 #000, inset 1px 1px 0.25px #ffffff2d, inset 0 2px 1px #ffffff4d;
        backdrop-filter: blur(2px);
    }

    .feature-card:hover {
        background: linear-gradient(to bottom, #ffffff0a, #ffffff05);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px #0000006d, 0 0 #000, inset 1px 1px 0.25px #ffffff2d, inset 0 2px 1px #ffffff4d;
    }

    .input-field {
        @apply block w-full rounded-md bg-white/5 border border-white/10 px-3 py-2 text-white placeholder-white/50 focus:border-red-500/50 focus:outline-none focus:ring-1 focus:ring-red-500/50 transition-colors;
    }

    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
    }

    .badge-primary {
        @apply bg-red-500/20 text-red-500 border border-red-500/30;
    }

    .badge-success {
        @apply bg-green-500/20 text-green-400 border border-green-500/30;
    }

    .badge-warning {
        @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
    }

    .badge-error {
        @apply bg-red-500/20 text-red-400 border border-red-500/30;
    }

    .alert {
        @apply rounded-md p-4 border;
    }

    .alert-info {
        @apply bg-blue-500/10 border-blue-500/30 text-blue-300;
    }

    .alert-success {
        @apply bg-green-500/10 border-green-500/30 text-green-300;
    }

    .alert-warning {
        @apply bg-yellow-500/10 border-yellow-500/30 text-yellow-300;
    }

    .alert-error {
        @apply bg-red-500/10 border-red-500/30 text-red-300;
    }

    .tab-button {
        @apply flex-grow md:flex-grow-0 text-center font-medium py-3 px-6 border-b-2 border-white/10 text-white/70 hover:border-red-500 hover:text-red-500 transition-colors duration-150;
    }

    .tab-button.active {
        @apply border-red-500 text-red-500 bg-red-500/5;
    }

    /* Mission Control tab content visibility */
    .tab-content {
        @apply hidden;
    }

    .tab-content.active {
        @apply block;
    }
}


@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes blink {
    0%,
    50% {
        opacity: 1;
    }
    51%,
    100% {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@utility animate-blink {
    animation: blink 1s ease-in-out infinite;
}

@utility animate-slideUp {
    animation: slideUp 0.3s ease;
}

/* Incoming call pulse animation */
@keyframes incomingCallPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}