/* Modern Design System */
:root {
    --primary-hue: 220;
    --success-hue: 142;
    --warning-hue: 38;
    --error-hue: 0;
    --radius-lg: 1rem;
    --radius-md: 0.75rem;
    --radius-sm: 0.5rem;
}

/* Enhanced Light Theme */
[data-theme="light"] {
    --p: 220 90% 56%;
    --s: 262 83% 58%;
    --a: 199 89% 48%;
    --n: 220 13% 18%;
    --nc: 220 9% 98%;
    --b1: 220 20% 98%;
    --b2: 220 17% 95%;
    --b3: 220 14% 89%;
    --bc: 220 13% 18%;
    --in: 198 93% 60%;
    --su: 142 76% 36%;
    --wa: 38 92% 50%;
    --er: 0 72% 51%;
}

/* Smooth transitions everywhere */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Better text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Improved text contrast */
.text-base-content {
    opacity: 0.95;
}

.text-base-content\/70 {
    opacity: 0.75;
}

.text-base-content\/50 {
    opacity: 0.6;
}

/* Enhanced Cards */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid oklch(var(--b3) / 0.5);
    backdrop-filter: blur(10px);
}

.card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Better buttons */
.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--p) / 0.9) 100%);
    border: none;
    box-shadow: 0 2px 8px oklch(var(--p) / 0.25);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px oklch(var(--p) / 0.35);
    transform: translateY(-1px);
}

/* Enhanced sidebar */
aside {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06);
    background: linear-gradient(to bottom, oklch(var(--b2)), oklch(var(--b2)) 50%, oklch(var(--b2)));
}

/* Sidebar frequent foods items */
.frequent-food-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--b3) / 0.4);
    border-radius: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.frequent-food-item:hover {
    background: oklch(var(--b2));
    border-color: oklch(var(--p) / 0.3);
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.frequent-food-item:active {
    transform: translateX(1px);
}

.frequent-food-item .food-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, oklch(var(--p) / 0.1), oklch(var(--s) / 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid oklch(var(--p) / 0.15);
}

.frequent-food-item .food-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: oklch(var(--p));
}

.frequent-food-item .food-info {
    flex: 1;
    min-width: 0;
}

.frequent-food-item .food-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--bc) / 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frequent-food-item .food-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.frequent-food-item .food-count {
    font-size: 0.6875rem;
    color: oklch(var(--bc) / 0.5);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.frequent-food-item .food-calories {
    font-size: 0.6875rem;
    color: oklch(var(--p) / 0.8);
    font-weight: 600;
}

.frequent-food-item .food-rank {
    font-size: 0.625rem;
    font-weight: 700;
    color: oklch(var(--bc) / 0.4);
    background: oklch(var(--b3) / 0.5);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Better input fields */
input, select, textarea {
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid oklch(var(--p) / 0.5);
    outline-offset: 2px;
}

/* Custom scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: oklch(var(--b2));
    border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: oklch(var(--bc) / 0.15);
    border-radius: 4px;
    border: 2px solid oklch(var(--b2));
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--bc) / 0.25);
}

/* Structured Meal Entry Cards */
.meal-entry-card {
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--b3) / 0.5);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.meal-entry-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: oklch(var(--p) / 0.3);
}

.meal-entry-card .entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid oklch(var(--b3) / 0.4);
    background: oklch(var(--b2) / 0.5);
}

.meal-entry-card .entry-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-entry-card .entry-icon.user {
    background: linear-gradient(135deg, oklch(var(--p)), oklch(var(--s)));
}

.meal-entry-card .entry-icon.assistant {
    background: linear-gradient(135deg, oklch(var(--su)), oklch(var(--in)));
}

.meal-entry-card .entry-icon.error {
    background: linear-gradient(135deg, oklch(var(--er)), oklch(var(--wa)));
}

.meal-entry-card .entry-content {
    padding: 0.75rem 1rem;
}

.meal-entry-card .entry-timestamp {
    font-size: 0.6875rem;
    color: oklch(var(--bc) / 0.5);
    font-weight: 500;
}

/* Legacy chat styling (for compatibility) */
.chat-bubble {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid oklch(var(--b3) / 0.3);
}

.chat-bubble-primary {
    background: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--p) / 0.95) 100%);
    border: none;
}

.chat-bubble-success {
    background: linear-gradient(135deg, oklch(var(--su)) 0%, oklch(var(--su) / 0.95) 100%);
    border: none;
}

.typing-dot {
  @apply w-1.5 h-1.5 bg-base-content rounded-full;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes typing {
  0%   { opacity: .3; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: .3; transform: translateY(0); }
}

/* Today's date header */
h2.text-2xl {
    background: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Meal cards */
.entry-card {
    border-radius: 0.75rem;
    padding: 1rem;
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--b3) / 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.entry-card:hover {
    background: oklch(var(--b2));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: oklch(var(--p) / 0.3);
}

/* Badge styling */
.badge {
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.375rem 0.75rem;
}

/* Collapsible meals section */
#today-meals-list {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

#meals-toggle-btn {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Profile section */
#sidebar-avatar-placeholder,
#sidebar-avatar-image {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Trend chart bars */
.trend-bar {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Modern Nutrition Bars */
.modern-nutrition-bar {
    padding: 0.5rem 0.75rem;
    background: oklch(var(--b1));
    border-radius: 0.5rem;
    border: 1px solid oklch(var(--b3) / 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.modern-nutrition-bar:hover {
    background: oklch(var(--b2));
    border-color: oklch(var(--p) / 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.modern-nutrition-bar .bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.modern-nutrition-bar .bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--bc) / 0.85);
}

.modern-nutrition-bar .bar-value {
    font-size: 0.6875rem;
    font-weight: 500;
    color: oklch(var(--bc) / 0.6);
}

.modern-nutrition-bar .bar-track {
    height: 0.375rem;
    background: oklch(var(--b3) / 0.4);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.modern-nutrition-bar .bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.modern-nutrition-bar .bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.modern-nutrition-bar .bar-percentage {
    font-size: 0.625rem;
    font-weight: 600;
    color: oklch(var(--bc) / 0.5);
    margin-top: 0.125rem;
    text-align: right;
}

/* Color variations for each nutrient */
.calories-fill {
    background: linear-gradient(90deg,
        hsl(var(--primary-hue), 85%, 60%),
        hsl(var(--primary-hue), 85%, 50%));
    box-shadow: 0 0 8px hsl(var(--primary-hue), 85%, 60%);
}

.protein-fill {
    background: linear-gradient(90deg,
        hsl(var(--success-hue), 70%, 55%),
        hsl(var(--success-hue), 70%, 45%));
    box-shadow: 0 0 8px hsl(var(--success-hue), 70%, 55%);
}

.carbs-fill {
    background: linear-gradient(90deg,
        hsl(199, 85%, 60%),
        hsl(199, 85%, 50%));
    box-shadow: 0 0 8px hsl(199, 85%, 60%);
}

.fat-fill {
    background: linear-gradient(90deg,
        hsl(var(--warning-hue), 90%, 60%),
        hsl(var(--warning-hue), 90%, 50%));
    box-shadow: 0 0 8px hsl(var(--warning-hue), 90%, 60%);
}

.fiber-fill {
    background: linear-gradient(90deg,
        hsl(262, 80%, 65%),
        hsl(262, 80%, 55%));
    box-shadow: 0 0 8px hsl(262, 80%, 65%);
}

/* Over-goal styling */
.modern-nutrition-bar.over-goal .bar-fill {
    background: linear-gradient(90deg,
        hsl(var(--error-hue), 70%, 60%),
        hsl(var(--error-hue), 70%, 50%)) !important;
    box-shadow: 0 0 8px hsl(var(--error-hue), 70%, 60%) !important;
}

.modern-nutrition-bar.over-goal .bar-percentage {
    color: oklch(var(--er));
    font-weight: 700;
}

/* Micronutrients styling */
#micronutrients-display {
    background: oklch(var(--b1));
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid oklch(var(--b3) / 0.4);
}

#micronutrients-display .micro-item {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

#micronutrients-display .micro-item:hover {
    background: oklch(var(--b2));
}