/* ═══════════════════════════════════════════
   Aura LifeOS — Clean Minimal Design System
   Inspired by: Linear, Raycast, Arc Browser
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
    /* Surface */
    --bg-base: #09090b;
    --bg-subtle: #111113;
    --bg-card: rgba(255,255,255,0.035);
    --bg-card-hover: rgba(255,255,255,0.06);
    --bg-elevated: rgba(255,255,255,0.08);
    --bg-input: rgba(255,255,255,0.04);

    /* Accent */
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-subtle: rgba(129,140,248,0.12);
    --accent-glow: rgba(129,140,248,0.2);

    /* Semantic */
    --green: #34d399;
    --green-subtle: rgba(52,211,153,0.1);
    --red: #f87171;
    --red-subtle: rgba(248,113,113,0.1);
    --amber: #fbbf24;
    --amber-subtle: rgba(251,191,36,0.1);
    --cyan: #22d3ee;
    --cyan-subtle: rgba(34,211,238,0.1);
    --violet: #a78bfa;
    --violet-subtle: rgba(167,139,250,0.1);
    --rose: #fb7185;
    --rose-subtle: rgba(251,113,133,0.1);
    --orange: #fb923c;
    --orange-subtle: rgba(251,146,60,0.1);

    /* Dynamic Aura (overridden by theme engine) */
    --aura-primary: #818cf8;
    --aura-glow: rgba(129,140,248,0.2);

    /* Sentiment */
    --aura-sentiment-neutral: #818cf8;
    --aura-sentiment-positive: #34d399;
    --aura-sentiment-negative: #f87171;

    /* Text */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #52525b;
    --text-inverse: #09090b;

    /* Border */
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --border-active: rgba(129,140,248,0.4);

    /* Radius */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);

    /* Motion */
    --ease: cubic-bezier(0.16,1,0.3,1);
    --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
    --ease-smooth: cubic-bezier(0.4,0,0.2,1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
}

/* ── Reset ── */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter','Noto Sans Thai',-apple-system,system-ui,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.5;
    letter-spacing: -0.011em;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
    animation: pageIn .5s var(--ease) both;
}

@keyframes pageIn { from{opacity:0} to{opacity:1} }

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}
.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}

/* ── Layout ── */
.app-container { display:flex; flex-direction:column; min-height:100vh; }

/* ── Bento Grid ── */
.bento-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:16px;
    padding:0 24px 24px;
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

/* ── Bento Card ── */
.bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    position:relative;
    overflow:hidden;
    transition: background var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease),
                transform var(--duration-slow) var(--ease),
                box-shadow var(--duration-slow) var(--ease);
}
.bento-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Navigation ── */
.nav-blur {
    background: rgba(9,9,11,0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
}

.bottom-nav {
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    background:rgba(9,9,11,0.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-top:1px solid var(--border);
    padding:6px 8px;
    padding-bottom:max(6px,env(safe-area-inset-bottom));
    display:flex;justify-content:space-around;align-items:center;
}
.safe-padding { padding-bottom:max(6px,env(safe-area-inset-bottom)); }

/* ── Typography ── */
h1 { font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-0.03em;line-height:1.15; }
h2 { font-size:1.2rem;font-weight:600;letter-spacing:-0.02em; }
h3 { font-size:1rem;font-weight:600;letter-spacing:-0.01em; }
.text-gold,.text-accent { color:var(--accent); }

/* ── Animations ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes spin { to{transform:rotate(360deg)} }

.animate-fade-in { animation:fadeInUp .5s var(--ease) both; }
.animate-pulse { animation:pulse 2s ease-in-out infinite; }

.stagger-children>*{opacity:0;animation:fadeInUp .4s var(--ease) both}
.stagger-children>*:nth-child(1){animation-delay:0s}
.stagger-children>*:nth-child(2){animation-delay:.05s}
.stagger-children>*:nth-child(3){animation-delay:.1s}
.stagger-children>*:nth-child(4){animation-delay:.15s}
.stagger-children>*:nth-child(5){animation-delay:.2s}
.stagger-children>*:nth-child(6){animation-delay:.25s}
.stagger-children>*:nth-child(7){animation-delay:.3s}
.stagger-children>*:nth-child(8){animation-delay:.35s}

/* Header stagger */
.header-greeting{animation:fadeInUp .4s .02s var(--ease) both}
.header-title{animation:fadeInUp .4s .06s var(--ease) both}
.header-subtitle{animation:fadeInUp .4s .1s var(--ease) both}
.header-clock{animation:fadeInUp .4s .04s var(--ease) both}

/* Skeleton */
.skeleton {
    background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);
    background-size:200% 100%;
    animation:shimmer 2s ease-in-out infinite;
    border-radius:var(--r-md);
}

/* ── Buttons ── */
.btn-spring { transition:transform var(--duration-fast) var(--ease-bounce); cursor:pointer; }
.btn-spring:hover { transform:translateY(-1px); }
.btn-spring:active { transform:translateY(0) scale(0.97); }

.btn-gold,.btn-primary {
    background:var(--accent);color:var(--text-inverse);border:none;
    font-weight:600;border-radius:var(--r-md);padding:10px 20px;cursor:pointer;
    transition:all var(--duration-base) var(--ease);
}
.btn-gold:hover,.btn-primary:hover { background:var(--accent-hover);transform:translateY(-1px); }
.btn-gold:active,.btn-primary:active { transform:scale(0.97); }

.btn-ghost {
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    border-radius:var(--r-md);padding:10px 20px;cursor:pointer;
    transition:all var(--duration-base) var(--ease);
}
.btn-ghost:hover { background:var(--bg-card);border-color:var(--border-hover);color:var(--text-primary); }

/* ── Inputs ── */
.input-glow {
    transition:border-color var(--duration-base) var(--ease),box-shadow var(--duration-base) var(--ease);
}
.input-glow:focus {
    border-color:var(--accent) !important;
    box-shadow:0 0 0 3px var(--accent-subtle);
    outline:none;
}

/* ── Progress ── */
.progress-circle-container{position:relative;display:flex;align-items:center;justify-content:center}
.progress-circle-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:6}
.progress-circle-fill{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
@keyframes progressFill{from{width:0}}
.progress-bar-animated{animation:progressFill .8s var(--ease) both;position:relative;overflow:hidden}

/* ── Modal ── */
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.modal-backdrop{animation:backdropIn .2s ease both}
.modal-panel{animation:modalIn .3s var(--ease) both}
.modal-sheet{animation:sheetIn .35s var(--ease) both}

/* ── Chat ── */
@keyframes msgLeft{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes msgRight{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.msg-ai{animation:msgLeft .25s var(--ease) both}
.msg-user{animation:msgRight .25s var(--ease) both}

/* Thinking */
@keyframes dotPulse{0%,80%,100%{transform:scale(.4);opacity:.3}40%{transform:scale(1);opacity:1}}
.thinking-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;animation:dotPulse 1.4s ease infinite}
.thinking-dot:nth-child(2){animation-delay:.16s}
.thinking-dot:nth-child(3){animation-delay:.32s}

/* ── AI Indicator ── */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.ai-aura-indicator{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:breathe 3s ease infinite}
.ai-aura-indicator.thinking{animation-duration:.8s;background:var(--text-primary)}

/* ── Day Chip ── */
@keyframes chipPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.chip-selected{animation:chipPop .2s var(--ease-bounce) both}

/* ── Event Row ── */
.event-row{animation:fadeInUp .3s var(--ease) both}
.event-row:nth-child(n+2){animation-delay:calc(0.04s * var(--i,0))}

/* ── Cursor ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink::after{content:'▊';color:var(--accent);animation:blink 1s step-end infinite;margin-left:1px;font-size:.8em}

/* ── Icon Bounce ── */
@keyframes iconBounce{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
.icon-bounce:hover i,.icon-bounce:hover svg{animation:iconBounce .3s var(--ease) both}

/* ── Focus Mode ── */
.focus-pulse-glow{position:absolute;width:400px;height:400px;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:0;filter:blur(80px);transition:opacity 1.5s ease;pointer-events:none}
.focus-pulse-glow.active{opacity:.1;animation:focusPulse 6s ease infinite}
@keyframes focusPulse{0%,100%{transform:scale(1);opacity:.1}50%{transform:scale(1.2);opacity:.2}}

@keyframes breathingOrb{0%,100%{transform:scale(1);box-shadow:0 0 40px var(--accent-glow)}50%{transform:scale(1.03);box-shadow:0 0 60px var(--accent-glow)}}
.breathing-aura{animation:breathingOrb 4s ease infinite}

@keyframes textDrift{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-3px);opacity:1}}
.focus-quote{animation:textDrift 5s ease infinite}
.focus-timer-text{text-shadow:0 0 30px var(--accent-glow)}

/* ── Gold Pulse ── */
@keyframes goldPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}}
.pulse-gold{animation:goldPulse 2s ease infinite}

/* ── Float ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.float-slow{animation:float 4s ease infinite}
.float-fast{animation:float 2.5s ease infinite}

/* ── Aurora BG (subtle) ── */
.aurora-bg{background:linear-gradient(135deg,var(--bg-base),var(--bg-subtle));transition:background 2s ease}

/* ── Progress Ring ── */
@keyframes ringFill{from{stroke-dashoffset:251}}
.progress-ring-circle{animation:ringFill 1s var(--ease) both;transform-origin:center;transform:rotate(-90deg)}

/* ── Health Components ── */
.health-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all var(--duration-base) var(--ease)}
.health-stat-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px)}

.macro-pill{padding:4px 12px;border-radius:var(--r-full);font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px}
.health-label{font-size:10px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em}
.health-value{font-size:1.2rem;font-weight:600;color:var(--text-primary)}
.health-unit{font-size:9px;color:var(--text-tertiary)}
.habit-heatmap-container{padding:12px;background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border)}
.wellness-pill{transition:all var(--duration-base) var(--ease);cursor:pointer}
.wellness-pill:hover{background:var(--accent);color:var(--text-inverse);transform:translateY(-1px)}

/* Glass active */
.glass-active{background:rgba(9,9,11,0.95)!important;border-color:var(--border)!important}

/* Nav animation */
nav{animation:fadeIn .4s var(--ease) both}

/* ── Responsive ── */
@media(max-width:1024px){
    .bento-grid{grid-template-columns:repeat(6,1fr);padding:0 16px 16px;gap:12px}
    .bento-card{padding:20px;border-radius:var(--r-lg)}
    body{padding-bottom:72px}
}
@media(max-width:768px){
    .bento-grid{grid-template-columns:1fr}
    .bento-card{padding:18px;border-radius:var(--r-lg)}
    h1{font-size:1.5rem}
}
@media(max-width:380px){
    .bento-grid{padding:0 12px 12px;gap:10px}
    .bento-card{padding:16px}
}

/* Perf */
.bento-card,.btn-spring,.btn-gold{will-change:transform}