:root {
    --bg-color: #fffdd0; /* Creme Back */
    --text-color: #1a0f0f;
    --card-radius: 20px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Default Red Shades Palette */
    --c-focus: #5b1424; /* Deep Burgundy */
    --c-cal: #dc143c; /* Crimson */
    --c-stats: #a52a2a; /* Brown / Red */
    --c-inbox: #800000; /* Maroon */
    --c-fit: #9b111e; /* Ruby */
    --c-groc: #4a0404; /* Dark Rust */
}

/* 10 Dynamic Color Profiles */
/* 10 Dynamic Color Profiles */
[data-theme="emerald"] { --c-focus: #064e3b; --c-cal: #10b981; --c-stats: #047857; --c-inbox: #065f46; --c-fit: #059669; --c-groc: #022c22; --bg-color: #f0fdf4; }
[data-theme="sapphire"] { --c-focus: #1e3a8a; --c-cal: #3b82f6; --c-stats: #1d4ed8; --c-inbox: #2563eb; --c-fit: #2563eb; --c-groc: #172554; --bg-color: #f0f9ff; }
[data-theme="amethyst"] { --c-focus: #4c1d95; --c-cal: #8b5cf6; --c-stats: #6d28d9; --c-inbox: #5b21b6; --c-fit: #7c3aed; --c-groc: #2e1065; --bg-color: #faf5ff; }
[data-theme="amber"] { --c-focus: #78350f; --c-cal: #f59e0b; --c-stats: #b45309; --c-inbox: #92400e; --c-fit: #d97706; --c-groc: #451a03; --bg-color: #fffbeb; }
[data-theme="slate"] { --c-focus: #0f172a; --c-cal: #64748b; --c-stats: #334155; --c-inbox: #1e293b; --c-fit: #475569; --c-groc: #020617; --bg-color: #f8fafc; }
[data-theme="rose"] { --c-focus: #881337; --c-cal: #f43f5e; --c-stats: #e11d48; --c-inbox: #be123c; --c-fit: #9f1239; --c-groc: #4c0519; --bg-color: #fff1f2; }
[data-theme="cyan"] { --c-focus: #164e63; --c-cal: #06b6d4; --c-stats: #0e7490; --c-inbox: #155e75; --c-fit: #0891b2; --c-groc: #083344; --bg-color: #ecfeff; }
[data-theme="fuchsia"] { --c-focus: #701a75; --c-cal: #d946ef; --c-stats: #c026d3; --c-inbox: #a21caf; --c-fit: #e879f9; --c-groc: #4a044e; --bg-color: #fdf4ff; }
[data-theme="lime"] { --c-focus: #3f6212; --c-cal: #84cc16; --c-stats: #65a30d; --c-inbox: #4d7c0f; --c-fit: #bef264; --c-groc: #1a2e05; --bg-color: #f7fee7; }


body {
    margin: 0; padding: 0; 
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(#eadfca 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-color); 
    overflow-x: hidden;
}

/* User Global Profile Header */
.topbar {
    width: 100%; height: 70px; background: var(--bg-color);
    border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: flex-end;
    padding: 0 40px; box-sizing: border-box; z-index: 50; position: sticky; top: 0;
}
.user-widget { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--c-focus); }
.user-widget img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-cal); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.profile-dropdown {
    position: absolute; top: 60px; right: 40px; background: #fff; width: 220px;
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05);
    display: none; flex-direction: column; overflow: hidden; z-index: 2000; animation: fadeIn 0.2s ease;
}
.profile-dropdown.active { display: flex; }
.dropdown-item {
    padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--text-color); cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05); transition: 0.2s; display: flex; align-items: center; gap: 10px; background:var(--bg-color);
}
.dropdown-item:last-child { border-bottom: none; color: var(--c-cal); }
.dropdown-item:hover { filter: brightness(0.95); }


/* --- CUSTOM AUTH GATEWAY --- */
.auth-gateway {
    position: fixed; inset: 0; background: linear-gradient(135deg, var(--c-focus), var(--c-cal)); 
    display: flex; justify-content: center; align-items: center; z-index: 2000;
}
.auth-card {
    background: #fff; padding: 40px; border-radius: 24px; width: 100%; max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4); text-align: center; border: 1px solid #eadfca;
}
.auth-card.signup { max-width: 500px; }
.auth-card h1 { font-size: 28px; margin: 0 0 5px 0; color: var(--c-focus); }
.auth-card h2 { font-size: 16px; color: #555; margin-bottom: 24px; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;}
.auth-card input {
    width: 100%; padding: 14px; border-radius: 12px; border: 1px solid #ccc; box-sizing: border-box;
    font-family: inherit; font-size: 14px; outline: none; margin-bottom: 12px; background:#fdfbf7; transition: 0.2s;
}
.auth-card input:focus { border-color: var(--c-focus); background: #fff; }
.action-btn {
    width: 100%; padding: 14px; background: var(--c-focus); color: white; border: none; border-radius: 12px;
    font-weight: 600; cursor: pointer; margin-block: 10px; font-size: 15px; transition: 0.2s;
}
.action-btn:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.auth-switch { font-size: 14px; color: #555; }
.auth-switch a { color: var(--c-cal); font-weight: 600; text-decoration: none; }
@keyframes fadeOut { to { opacity: 0; transform: scale(0.95); pointer-events: none;} }

/* --- APP SKELETON --- */
.app-layout { display: flex; height: calc(100vh - 70px); width: 100vw; animation: fadeIn 0.6s ease; }
.sidebar {
    width: 240px; background: var(--bg-color);
    border-right: 1px solid rgba(0,0,0,0.05);
    padding: 30px 20px; display: flex; flex-direction: column; z-index: 10;
}
.brand { font-size: 22px; margin: 0 0 40px 0; padding-left: 10px; color: var(--c-focus); font-weight: 800; }

.nav-links { list-style: none; padding: 0; margin: 0; }
.nav-links li {
    padding: 14px 16px; margin-bottom: 8px; border-radius: 12px;
    cursor: pointer; font-size: 15px; color: #4a0f0f; transition: var(--transition);
    display: flex; align-items: center; justify-content: space-between; font-weight: 500;
}
.nav-links li:hover, .nav-links li.active {
    background: var(--c-focus); box-shadow: 0 4px 12px rgba(0,0,0,0.2); color: #fff; font-weight: 600;
}
.badge { background: #fdfbf7; color: var(--c-focus); font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight:bold;}
.nav-links li:hover .badge, .nav-links li.active .badge { color: #333; }

.main-content {
    flex: 1; height: calc(100vh - 70px); overflow-y: auto; 
    position: relative; padding: 24px; box-sizing: border-box;
}

/* Base Views & Cards */
.view { display: none; animation: fadeIn 0.4s ease; min-height: 100%;}
.active-view { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.panel, .full-card {
    border-radius: var(--card-radius); padding: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.1);
    display: flex; flex-direction: column; transition: var(--transition);
    color: #fff; overflow: hidden;
}
.full-card { min-height: calc(100vh - 120px); background: #fff; color: #333; box-shadow: 0 10px 40px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1);}
.full-card h2 { color: var(--c-focus); }
.panel h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px 0; opacity: 0.95; text-transform: uppercase; letter-spacing: 0.8px; color: #fff;}
.subtitle { color: #888; font-size: 14px; margin-top: -10px; margin-bottom: 24px;}

/* DASHBOARD BENTO GRID */
.dashboard.grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-areas:
        "focus cal stats"
        "focus inbox fitness"
        "grocery inbox fitness"
        "grocery . .";     
    gap: 24px; min-height: 750px; 
}

.panel.hidden { display: none !important; }
.panel:hover { transform: scale(1.02); box-shadow: 0 24px 50px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.3); }
.pop-out-btn { background: none; border: none; color: #fff; opacity: 0.6; cursor: pointer; transition: 0.2s; font-size: 16px;}
.pop-out-btn:hover { opacity: 1; transform: scale(1.2); }

/* Dynamic Shade Overlays - Multiplies base var against darkened hex to keep depth */
.focus-panel { grid-area: focus; background: linear-gradient(135deg, var(--c-focus), rgba(0,0,0,0.8)); }
.cal-panel { grid-area: cal; background: linear-gradient(135deg, var(--c-cal), rgba(0,0,0,0.7)); }
.stats-panel { grid-area: stats; background: linear-gradient(135deg, var(--c-stats), rgba(0,0,0,0.85)); }
.inbox-panel { grid-area: inbox; background: linear-gradient(135deg, var(--c-inbox), rgba(0,0,0,0.6)); }
.fitness-panel { grid-area: fitness; background: linear-gradient(135deg, var(--c-fit), rgba(0,0,0,0.9)); }
.grocery-panel { grid-area: grocery; background: linear-gradient(135deg, var(--c-groc), rgba(0,0,0,0.8)); }

.centered-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none;}

/* Generic Input adjustments for Dark Panels */
.add-task-input {
    width: 100%; padding: 14px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1); font-size: 14px; margin-bottom: 12px; box-sizing: border-box; color: #fff; outline:none;
}
.add-task-input::placeholder { color: rgba(255,255,255,0.7); }
.add-task-input:focus { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.15); }

.input-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: stretch; }
.input-row input { flex:1; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); outline:none; background: rgba(255,255,255,0.1); font-family: inherit; font-size: 13px; color: #fff; min-width:0;}
.input-row input[type="number"] { max-width: 80px; }
.input-row input::placeholder { color: rgba(255,255,255,0.7); }
.input-row input:focus { border-color: rgba(255,255,255,0.8); }
.input-row button { padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,0.25); color: #fff; border:1px solid rgba(255,255,255,0.1); cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 16px;}
.input-row button:hover { background: rgba(255,255,255,0.4); transform: translateY(-1px); }

/* Dashboard Tasks */
.task-list { flex: 1; overflow-y: auto; padding-right: 4px; padding-bottom: 10px; min-height: 80px; }
.task-list::-webkit-scrollbar { width: 4px; }
.task-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }

.task {
    background: rgba(0, 0, 0, 0.2);        
    padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; font-size: 14px; color: #fff; border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer; display: flex; align-items: flex-start; gap: 12px; transition: all 0.2s ease; line-height: 1.4;
}
.task:hover { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.3); }
.task.completed { opacity: 0.5; background: rgba(0,0,0,0.4); }
.task.completed .task-content { text-decoration: line-through; }
.task-checkbox { width: 18px; height: 18px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.8); flex-shrink:0; transition: 0.2s; }
.task.completed .task-checkbox { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }
.task-content { flex: 1; word-break: break-word; }
.remove-btn { background: none; border: none; color: #fff; opacity:0.6; cursor:pointer; padding:2px 6px; border-radius:6px; font-weight:bold; transition:0.2s; font-size: 14px;}
.remove-btn:hover { background: rgba(255,255,255,0.3); opacity: 1; }
.cost-badge { float: right; background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 8px; font-size: 12px; border:1px solid rgba(255,255,255,0.1);}

/* Special Inbox Tasks UI */
.inbox-card {
    background: rgba(0, 0, 0, 0.25); padding: 16px; border-radius: 16px; margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.15); transition: 0.3s;
}
.inbox-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.inbox-header strong { font-size: 14px; color: #fff; flex: 1; word-break: break-all; margin-right:8px;}
.inbox-header > div { flex-shrink: 0; display: flex; gap: 8px; align-items: center; } 
.inbox-secret { font-size: 13px; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; line-height: 1.4; word-break: break-all; transition: filter 0.3s; border:1px solid rgba(255,255,255,0.05);}
.inbox-secret.hidden { filter: blur(6px); user-select: none; color: #bbb;}
.inbox-secret.visible { filter: blur(0); }

.eye-btn { 
    background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; padding: 6px; border-radius: 8px; 
    transition: 0.2s; opacity: 1; display: flex; align-items: center; justify-content: center; color:#fff;
}
.eye-btn:hover { background: rgba(255,255,255,0.4); transform: scale(1.05);}

/* Goals Panel */
.progress-group { margin-bottom: 16px; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; font-weight: 500; color: rgba(255,255,255,0.9);}
.progress-bar-bg { width: 100%; height: 8px; background: rgba(0,0,0,0.3); border-radius: 10px; overflow: hidden; border:1px solid rgba(255,255,255,0.1); }
.progress-bar-fill { height: 100%; border-radius: 10px; transition: width 1s ease-out; background: #fff; }

/* Quick Calendar Panel */
.date-display { font-size: 54px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.month-display { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.9); margin-bottom: 6px;}

/* --- FULL VIEWS IMPORTS --- */

.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 0 20px;}
.btn { padding: 10px 20px; border-radius: 12px; border: none; background: #fdfbf7; cursor:pointer; font-weight: 600; transition: 0.2s; color: var(--text-color); border: 1px solid #eadfca;}
.btn:hover { background: #eadfca; }

.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 700; color: #888; margin-bottom: 12px;}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.cal-day { aspect-ratio: 1; background: #fdfbf7; border-radius: 16px; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size: 18px; font-weight: 600; color: #333; transition: var(--transition); border: 1px solid #eadfca;}
.cal-day:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
.cal-day.marked { background: var(--c-cal); color: #fff; border: 2px solid var(--c-focus); box-shadow: 0 8px 16px rgba(0,0,0,0.2);}
.cal-day.empty { visibility: hidden; }

/* Calendar Day Task Manager */
.cal-task-manager { margin-top: 32px; padding-top: 32px; border-top: 1px solid #eadfca; display: none; }
.cal-task-manager h3 { color: var(--c-focus); margin-bottom: 16px; }

/* Full Dedicated Feature Cards */
.full-input-row { display: flex; gap: 12px; margin-bottom: 30px; }
.full-input-row input { padding: 16px; border-radius: 12px; border: 1px solid #ccc; outline:none; background: #fdfbf7; font-size:15px; flex:1;}
.full-input-row button { padding: 0 32px; border-radius: 12px; background: var(--c-focus); color: #fff; border:none; cursor: pointer; font-weight: 600; font-size:15px; transition:0.2s;}
.full-input-row button:hover { filter:brightness(0.8); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.full-lists-container { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Advanced Tasks */
.task-tabs { display: flex; gap: 10px; margin-bottom: 24px;}
.tab-btn { padding: 12px 24px; border-radius: 12px; border: 1px solid #eadfca; background: #fdfbf7; cursor:pointer; font-size: 14px; font-weight: 600; color:#555;}
.tab-btn.active { background: var(--c-focus); color: #fff; border-color: var(--c-focus); }

.adv-task { background: #fdfbf7; padding: 20px; border-radius: 16px; display: flex; align-items: flex-start; gap: 16px; transition: 0.2s; border:1px solid #eadfca; box-shadow: 0 4px 12px rgba(0,0,0,0.02);}
.adv-task.completed { opacity: 0.6; }
.adv-task-body { flex:1; }
.adv-task-title { font-weight: 700; margin-bottom: 6px; font-size: 16px; color: var(--c-focus);}
.adv-task.completed .adv-task-title { text-decoration: line-through; }
.adv-task-desc { font-size: 14px; color: #666; line-height: 1.5; }
.adv-task-del { background: #fee2e2; color: #be123c; border:none; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; transition:0.2s;}
.adv-task-del:hover { background: #fecaca; }
.adv-task .task-checkbox { border-color: #aaa; }
.adv-task.completed .task-checkbox { background: var(--c-focus); border-color: var(--c-focus); }

/* Report Stats */
.report-stats { display: flex; gap: 24px; margin-top: 40px;}
.stat-box { flex:1; background: #fdfbf7; padding: 40px 24px; border-radius: 24px; text-align: center; border: 1px solid #eadfca; box-shadow: 0 8px 24px rgba(0,0,0,0.05);}
.stat-val { font-size: 64px; font-weight: 800; color: var(--c-focus); margin-bottom: 12px; text-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.stat-name { font-size: 15px; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}

/* Settings */
.settings-section { margin-bottom: 40px; background: #fdfbf7; padding: 30px; border-radius: 20px; border: 1px solid #eadfca; }
.settings-section input[type="password"] { padding: 14px; width: 350px; border-radius: 12px; border: 1px solid #ccc; outline:none; margin-right: 12px;}
.status-msg { margin-left: 12px; color: var(--c-inbox); font-weight: 600; }
.widget-toggles label { display: inline-flex; align-items: center; margin-bottom: 16px; font-size: 15px; color: #444; width: 45%; gap: 10px; font-weight: 500;}
.widget-toggles input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-focus);}


/* Dynamic Custom Profile & Theming */
.theme-selector { display:flex; flex-wrap:wrap; gap: 12px; margin-top:16px;}
.theme-btn { width:48px; height:48px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.theme-btn:hover { transform:scale(1.1); }
.theme-btn.active { border-color: #333; transform:scale(1.1); }

/* The 10 Buttons */
.t-default { background: linear-gradient(135deg, #5b1424, #dc143c); }
.t-emerald { background: linear-gradient(135deg, #064e3b, #10b981); }
.t-sapphire { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.t-amethyst { background: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.t-amber { background: linear-gradient(135deg, #78350f, #f59e0b); }
.t-slate { background: linear-gradient(135deg, #0f172a, #64748b); }
.t-rose { background: linear-gradient(135deg, #881337, #f43f5e); }
.t-cyan { background: linear-gradient(135deg, #164e63, #06b6d4); }
.t-fuchsia { background: linear-gradient(135deg, #701a75, #d946ef); }
.t-lime { background: linear-gradient(135deg, #3f6212, #84cc16); }

/* Avatars */
.avatar-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap:16px; margin-top: 16px; justify-items: center;}
.avatar-btn { width:64px; height:64px; border-radius:50%; border:3px solid transparent; cursor:pointer; font-size: 32px; display:flex; align-items:center; justify-content:center; background:#eee; transition:0.2s; overflow:hidden;}
.avatar-btn img { width:100%; height:100%; object-fit:cover; }
.avatar-btn:hover { border-color: var(--c-focus); transform: scale(1.05);}
.avatar-btn.active { border-color: var(--c-focus); transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,0.2);}
.upload-btn-wrap { margin-top: 24px; position:relative;}
.upload-btn-wrap input[type="file"] { position:absolute; left:0; top:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.custom-upload-btn { display:inline-block; padding: 12px 24px; background:var(--c-stats); color:#fff; border-radius:12px; font-weight:600; pointer-events:none;}


/* RESPONSIVE STACKING FOR HALF WINDOWS */
@media (max-width: 1400px) {
    .dashboard.grid { grid-template-columns: 1fr 1fr; grid-template-areas: "focus cal" "focus stats" "inbox fitness" "grocery ."; }
}

@media (max-width: 1000px) {
    .app-layout { flex-direction: column; }
    .sidebar { width: 100%; border-right: none; border-bottom: 2px solid rgba(0,0,0,0.1); padding: 10px 20px; flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content:space-between; align-items:center;}
    .brand { margin: 0; display:flex;}
    .nav-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; width:100%;}
    .nav-links li { margin: 0; padding: 8px 12px; font-size:13px;}
    
    .dashboard.grid {
        grid-template-columns: 1fr;
        grid-template-areas: "focus" "cal" "stats" "inbox" "fitness" "grocery";
        min-height: auto;
    }
    .input-row { flex-direction: column; align-items: stretch;}
    .input-row input, .input-row button { width: 100%; max-width:100% !important;}
    .full-input-row { flex-direction: column; }
    
    .report-stats { flex-direction: column; }
}

/* AI ASSISTANT */
#ai-fab { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: var(--c-focus); color: #fff; font-size: 24px; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 1000; transition: transform 0.2s; display:flex; align-items:center; justify-content:center; }
#ai-fab:hover { transform: scale(1.1); }
#ai-chat-widget { position: fixed; bottom: 100px; right: 30px; width: 350px; height: 450px; background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: none; flex-direction: column; z-index: 1000; border: 1px solid #eadfca; overflow: hidden; }
#ai-chat-header { background: var(--c-focus); color: #fff; padding: 15px; font-weight: 600; font-size: 15px; }
#ai-chat-box { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: #333; background: #fdfbf7;}
.msg-user { align-self: flex-end; background: #e2e8f0; padding: 10px 14px; border-radius: 16px 16px 0 16px; max-width: 80%; }
.msg-ai { align-self: flex-start; background: #fff; border: 1px solid #eadfca; padding: 10px 14px; border-radius: 16px 16px 16px 0; max-width: 80%; }