/* Mila Frontend — Light Apple Design System */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* Global */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animate in */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeSlideIn 0.35s ease-out forwards;
}

.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.1s; opacity: 0; }
.stagger-3 { animation-delay: 0.15s; opacity: 0; }
.stagger-4 { animation-delay: 0.2s; opacity: 0; }
.stagger-5 { animation-delay: 0.25s; opacity: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-in { animation: none; opacity: 1; }
    .stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5 { opacity: 1; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Card hover lift */
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(0,0,0,0.1);
}

/* Chat messages */
.chat-message-user {
    background: #007AFF;
    color: white;
    border-radius: 20px 20px 6px 20px;
}

.chat-message-mila {
    background: #E9E9EB;
    color: #1d1d1f;
    border-radius: 20px 20px 20px 6px;
}

/* Typing indicator */
@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.typing-dot {
    animation: typingDot 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Input focus */
.input-focus:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    border-color: #007AFF;
}

/* Subtle pulse for live indicators */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse-subtle {
    animation: subtlePulse 2s ease-in-out infinite;
}

/* Table rows */
.table-row {
    transition: background 0.15s ease;
}
.table-row:hover {
    background: rgba(0,0,0,0.02);
}

/* Modal backdrop */
.modal-backdrop {
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Stat card gradient backgrounds */
.stat-blue { background: linear-gradient(135deg, rgba(0,122,255,0.06), transparent 70%); }
.stat-purple { background: linear-gradient(135deg, rgba(175,82,222,0.06), transparent 70%); }
.stat-green { background: linear-gradient(135deg, rgba(52,199,89,0.06), transparent 70%); }
.stat-orange { background: linear-gradient(135deg, rgba(255,149,0,0.06), transparent 70%); }
.stat-red { background: linear-gradient(135deg, rgba(255,59,48,0.06), transparent 70%); }

/* Sidebar */
.sidebar {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sidebar-link {
    transition: all 0.15s ease;
}
.sidebar-link:hover {
    background: rgba(0,0,0,0.04);
}
.sidebar-link.active {
    background: rgba(0,122,255,0.08);
    color: #007AFF;
}

/* Bottom bar (mobile) */
.bottom-bar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Kanban drag */
.kanban-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: grab;
}
.kanban-card:active {
    cursor: grabbing;
}
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}
.kanban-column.drag-over {
    background: rgba(0,122,255,0.04);
    border-color: rgba(0,122,255,0.3);
}

/* Token bar chart */
.bar-chart-bar {
    transition: height 0.4s ease-out;
    border-radius: 4px 4px 0 0;
}

/* Upload zone */
.upload-zone {
    border: 2px dashed #d1d5db;
    transition: all 0.2s ease;
}
.upload-zone.drag-active {
    border-color: #007AFF;
    background: rgba(0,122,255,0.04);
}

/* Secret key reveal */
.secret-blur {
    filter: blur(4px);
    transition: filter 0.2s;
    user-select: none;
}
.secret-blur:hover, .secret-blur.revealed {
    filter: none;
    user-select: text;
}

/* Slide up animation for modals */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-slide-up {
    animation: slideUp 0.25s ease-out forwards;
}