@import 'tailwindcss';
@import 'tw-animate-css';
@import '@fontsource-variable/geist';

@custom-variant dark (&:is(.dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@theme inline {
    --font-heading: var(--font-sans);
    --font-sans: 'Geist Variable', sans-serif;
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-border: var(--border);
    --color-destructive: var(--destructive);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent: var(--accent);
    --color-muted-foreground: var(--muted-foreground);
    --color-muted: var(--muted);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-secondary: var(--secondary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary: var(--primary);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    --color-background: var(--background);
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.4);
    --radius-2xl: calc(var(--radius) * 1.8);
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --primary: oklch(0.488 0.243 264.376);
    --primary-foreground: oklch(0.97 0.014 254.604);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --radius: 0.625rem;
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground font-sans antialiased;
    }
}

@layer utilities {
    .font-heading {
        font-family: var(--font-heading);
    }

    .login-form-shell {
        background:
            radial-gradient(80% 60% at 100% 0%, color-mix(in oklch, var(--primary) 6%, transparent) 0%, transparent 55%),
            var(--background);
    }

    .login-brand {
        background:
            radial-gradient(120% 80% at 10% 0%, color-mix(in oklch, var(--primary) 85%, white) 0%, transparent 55%),
            linear-gradient(160deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 75%, black) 100%);
    }

    .login-brand-grid {
        background-image:
            linear-gradient(color-mix(in oklch, white 12%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklch, white 12%, transparent) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 90% 80% at 30% 40%, black 10%, transparent 70%);
        opacity: 0.55;
    }

    .login-brand-orb {
        background: color-mix(in oklch, white 22%, transparent);
        animation: login-orb 14s ease-in-out infinite alternate;
    }

    .login-brand-orb-soft {
        background: color-mix(in oklch, black 18%, transparent);
        animation: login-orb 18s ease-in-out infinite alternate-reverse;
    }

    [data-conversation-row][data-unread]:not([data-unread='0']) [data-conversation-time] {
        color: #25d366;
        font-weight: 600;
    }

    [data-conversation-row][data-unread]:not([data-unread='0']) [data-conversation-name] {
        font-weight: 600;
    }

    .inbox-message-menu {
        background: #233138;
        box-shadow: 0 6px 22px rgb(0 0 0 / 0.42);
    }

    .inbox-lightbox-image {
        animation: inbox-lightbox-image-in 180ms ease-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .login-brand-orb,
        .login-brand-orb-soft,
        .inbox-lightbox-image {
            animation: none;
        }
    }
}

@keyframes login-orb {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-6%, 8%, 0) scale(1.08);
    }
}

@keyframes inbox-lightbox-image-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}