/* ========================================
   Reset & Base Styles - Borderless Design
======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

html, body {
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    background: var(--bg-base);
    background-image:
        radial-gradient(circle at top left, rgba(245, 184, 0, 0.08), transparent 26%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove all default borders and outlines */
button, input, textarea, select {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Focus states - subtle glow instead of outline */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.surface-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.section-enter {
    animation: fadeIn var(--transition-spring) both;
}

/* Loading Dots Animation */
.loading-dots {
    display: flex;
    gap: 4px;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-tertiary);
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
    0%, 80%, 100% { 
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% { 
        opacity: 1;
        transform: scale(1);
    }
}

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

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

@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

/* Scrollbar - minimal, borderless */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Selection */
::selection {
    background: var(--accent-subtle);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Prevent iOS zoom on input focus by ensuring 16px minimum */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Mobile scrollbar - thinner on small screens */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}