/* ─── MyLife2 ─── Purple & White ─── */
:root {
  --bg: #0f0615;
  --bg2: #1a0b2a;
  --bg3: #26103a;
  --surface: #2d1445;
  --purple: #7b2d8b;
  --purple-bright: #a44ad0;
  --purple-glow: #c084e8;
  --purple-dim: #4a1a5a;
  --accent: #e8b4f8;
  --text: #f0ecf5;
  --text-dim: #b8a8c8;
  --text-muted: #78608a;
  --border: rgba(123,45,139,0.2);
  --danger: #d04040;
  --success: #55b060;
  --warning: #e8a030;
  --shadow: rgba(0,0,0,0.45);
  --radius: 10px;
  --radius-sm: 6px;
  --transition: 0.2s ease;
  --font: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}
html { scroll-behavior: smooth; }
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display:flex;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background: var(--purple); color:#fff; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--purple-dim); border-radius:3px; }

/* ─── SIDEBAR ─── */
.sidebar {
  width: clamp(200px,18vw,280px);
  min-height:100vh;
  background: var(--bg2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:20px 16px 16px;
  position: fixed;
  top:0; left:0;
  overflow-y:auto;
  z-index:10;
}
.sidebar .brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.2rem;
  font-weight:700;
  color: var(--text);
  margin-bottom:24px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.sidebar .brand svg { width:32px; height:32px; }
.sidebar .brand span { color: var(--accent); }
.sidebar .brand .badge {
  font-size:10px;
  font-weight:400;
  color: var(--text-muted);
}

.nav-group {
  margin-bottom:16px;
}
.nav-group .nav-label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--text-muted);
  margin-bottom:6px;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration:none;
  font-size:0.88rem;
  font-weight:500;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: transparent;
  width:100%;
  text-align:left;
  font-family: var(--font);
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, var(--purple-dim), var(--surface));
  color: var(--purple-glow);
  border-left:3px solid var(--purple-bright);
}
.nav-item .icon { font-size:1.1rem; }
.nav-item .count {
  margin-left:auto;
  background: var(--purple-dim);
  color: var(--accent);
  font-size:10px;
  padding:1px 7px;
  border-radius:99px;
}
.sidebar-footer {
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:10px;
  color: var(--text-muted);
  display:flex;
  gap:8px;
}
.sidebar-footer button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size:10px;
  font-family: var(--font);
  transition: color var(--transition);
}
.sidebar-footer button:hover { color: var(--text-dim); }

/* ─── MAIN ─── */
.main {
  margin-left: clamp(200px,18vw,280px);
  flex:1;
  padding: 28px 28px 40px;
  min-height:100vh;
}
.page { display:none; }
.page.active { display:block; }
.page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.page-header h1 {
  font-size:1.6rem;
  font-weight:700;
  color: var(--text);
}
.page-header h1 .sub {
  font-size:0.9rem;
  font-weight:400;
  color: var(--text-dim);
  margin-left:8px;
}
.page-header .actions {
  display:flex;
  gap:10px;
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius: var(--radius-sm);
  font-size:0.88rem;
  font-weight:500;
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  cursor:pointer;
  transition: all var(--transition);
  font-family: var(--font);
  text-decoration:none;
}
.btn:hover { background: var(--surface); border-color: var(--purple); color: var(--text); }
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  color:#fff;
  border:none;
}
.btn-primary:hover { background: var(--purple-bright); }
.btn-danger {
  background: var(--danger);
  color:#fff;
  border:none;
}
.btn-sm { padding:4px 10px; font-size:0.78rem; }
.btn-icon { background: none; border:none; color: var(--text-dim); padding:4px; cursor:pointer; font-size:1.1rem; }
.btn-icon:hover { color: var(--text); }

/* ─── CARDS ─── */
.card {
  background: var(--bg3);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:20px;
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--purple); }
.card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.card-title {
  font-size:0.95rem;
  font-weight:600;
  color: var(--text);
}
.card-sub {
  font-size:0.78rem;
  color: var(--text-muted);
}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }

/* ─── TODAY ─── */
.greeting {
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:8px;
}
.greeting .highlight { color: var(--purple-glow); }
.quick-stats {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
  margin-bottom:24px;
}
.stat-card {
  background: var(--bg3);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px;
  text-align:center;
}
.stat-card .stat-value {
  font-size:1.5rem;
  font-weight:700;
  color: var(--purple-glow);
}
.stat-card .stat-label {
  font-size:0.75rem;
  color: var(--text-muted);
  margin-top:4px;
}

/* ─── TASKS / REMINDERS ─── */
.task-list { display:flex; flex-direction:column; gap:8px; }
.task-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background: var(--bg3);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.task-item:hover { border-color: var(--purple); }
.task-item.done {
  opacity:0.5;
  border-color: var(--success);
}
.task-item .task-check {
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid var(--purple-dim);
  background: transparent;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all var(--transition);
  flex-shrink:0;
}
.task-item .task-check:hover { border-color: var(--purple-bright); }
.task-item.done .task-check {
  background: var(--success);
  border-color: var(--success);
}
.task-item .task-check.done-icon::after {
  content:'✓';
  color:#fff;
  font-size:11px;
}
.task-item .task-body {
  flex:1;
}
.task-item .task-title {
  font-size:0.9rem;
  font-weight:500;
}
.task-item.done .task-title {
  text-decoration:line-through;
  color: var(--text-muted);
}
.task-item .task-meta {
  display:flex;
  gap:8px;
  font-size:0.72rem;
  color: var(--text-muted);
  margin-top:3px;
}
.task-item .task-tag {
  display:inline-flex;
  padding:1px 8px;
  border-radius:99px;
  font-size:10px;
}
.task-tag.school { background: #9b4dcb33; color: var(--purple-glow); }
.task-tag.workout { background: #55b06033; color: var(--success); }
.task-tag.trading { background: #e8a03033; color: var(--warning); }
.task-tag.personal { background: #78608a33; color: var(--text-dim); }
.task-actions {
  display:flex;
  gap:6px;
  opacity:0.6;
  transition: opacity var(--transition);
}
.task-item:hover .task-actions { opacity:1; }

/* ─── ADD TASK ─── */
.add-task {
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.add-task input {
  flex:1;
  padding:10px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size:0.88rem;
  font-family: var(--font);
  outline:none;
  transition: border-color var(--transition);
}
.add-task input:focus { border-color: var(--purple-bright); }
.add-task select {
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size:0.82rem;
  font-family: var(--font);
  cursor:pointer;
}

/* ─── CALENDAR ─── */
.calendar-nav {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.calendar-nav .month-label {
  font-size:1.2rem;
  font-weight:600;
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:20px;
}
.calendar-grid .day-header {
  text-align:center;
  font-size:0.7rem;
  color: var(--text-muted);
  padding:6px 0;
  font-weight:500;
}
.calendar-grid .day-cell {
  background: var(--bg3);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:10px 4px;
  text-align:center;
  font-size:0.82rem;
  cursor:pointer;
  transition: all var(--transition);
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.calendar-grid .day-cell:hover { border-color: var(--purple); }
.calendar-grid .day-cell.today {
  border-color: var(--purple-bright);
  background: var(--surface);
  font-weight:600;
}
.calendar-grid .day-cell.other-month { opacity:0.35; }
.calendar-grid .day-cell.has-event::after {
  content:'';
  width:6px; height:6px;
  background: var(--purple-bright);
  border-radius:50%;
}
.calendar-grid .day-cell .day-num { font-size:0.88rem; }
.day-detail {
  margin-top:8px;
}
.day-detail .event-list { display:flex; flex-direction:column; gap:6px; }
.event-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  border-left:3px solid var(--purple);
}
.event-item .event-time {
  font-family: var(--mono);
  font-size:0.75rem;
  color: var(--text-muted);
}
.event-item .event-title { font-size:0.88rem; font-weight:500; }

/* ─── AGENT CHAT ─── */
.agent-container {
  display:flex;
  flex-direction:column;
  height:calc(100vh - 140px);
  min-height:400px;
}
.agent-messages {
  flex:1;
  overflow-y:auto;
  padding:16px;
  background: var(--bg3);
  border:1px solid var(--border);
  border-radius: var(--radius);
}
.agent-msg {
  display:flex;
  gap:8px;
  margin-bottom:12px;
  align-items:flex-start;
}
.agent-msg .avatar {
  width:32px; height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  flex-shrink:0;
}
.agent-msg.user .avatar {
  background: var(--purple-dim);
  color: var(--accent);
}
.agent-msg.bot .avatar {
  background: var(--purple);
  color: #fff;
}
.agent-msg .msg-content {
  font-size:0.88rem;
  line-height:1.55;
  color: var(--text);
}
.agent-msg .msg-time {
  font-size:10px;
  color: var(--text-muted);
  margin-top:4px;
}
.agent-input {
  display:flex;
  gap:8px;
  margin-top:12px;
}
.agent-input input {
  flex:1;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size:0.9rem;
  font-family: var(--font);
  outline:none;
}
.agent-input input:focus { border-color: var(--purple-bright); }
.agent-typing {
  display:flex;
  gap:4px;
  font-size:0.78rem;
  color: var(--text-muted);
  padding:8px 16px;
}
.agent-typing .dot { animation: typingDot 1.2s infinite; }
.agent-typing .dot:nth-child(2) { animation-delay:0.15s; }
.agent-typing .dot:nth-child(3) { animation-delay:0.3s; }
@keyframes typingDot { 0%,100%{opacity:0.3} 50%{opacity:1} }
.agent-config {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.agent-config select, .agent-config input {
  padding:6px 10px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size:0.82rem;
  font-family: var(--font);
}
.agent-config .key-input {
  max-width:220px;
}

/* ─── FLOATING AGENT ─── */
.floating-agent {
  position:fixed;
  bottom:24px; right:24px;
  z-index:1000;
  transition: all var(--transition);
}
.floating-agent .fab {
  width:56px; height:56px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  color:#fff;
  border:none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  transition: all var(--transition);
}
.floating-agent .fab:hover { scale:1.1; }
.floating-agent .fab .pulse {
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--purple-glow);
  animation: fabPulse 2s infinite;
}
@keyframes fabPulse { 0%,100%{scale:1;opacity:1} 50%{scale:1.15;opacity:0} }
.floating-agent .popup {
  position:absolute;
  bottom:68px;
  right:0;
  width:380px;
  max-height:560px;
  background: var(--bg2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px var(--shadow);
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.floating-agent .popup.open { display:flex; }
.popup-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background: var(--surface);
  border-bottom:1px solid var(--border);
}
.popup-header .popup-title {
  font-size:0.9rem;
  font-weight:600;
  color: var(--text);
}
.popup-header .popup-title span { color: var(--accent); }
.popup-body {
  flex:1;
  overflow-y:auto;
  padding:12px 16px;
  min-height:200px;
  max-height:400px;
}
.popup-msg {
  margin-bottom:8px;
  font-size:0.84rem;
  line-height:1.5;
}
.popup-msg.bot {
  color: var(--text-dim);
}
.popup-msg.user {
  color: var(--text);
  text-align:right;
}
.popup-footer {
  display:flex;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid var(--border);
}
.popup-footer input {
  flex:1;
  padding:8px 10px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size:0.84rem;
  font-family: var(--font);
  outline:none;
}
.popup-footer input:focus { border-color: var(--purple-bright); }
.popup-footer button {
  background: var(--purple);
  color:#fff;
  border:none;
  border-radius: var(--radius-sm);
  padding:8px 14px;
  cursor:pointer;
  font-size:0.84rem;
}

/* ─── NOTIFICATIONS ─── */
.notif-toast {
  position:fixed;
  top:20px; right:20px;
  z-index:2000;
  background: var(--bg2);
  border:1px solid var(--purple);
  border-radius: var(--radius);
  padding:14px 20px;
  box-shadow: 0 4px 24px var(--shadow);
  transform:translateX(120%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  max-width:340px;
}
.notif-toast.show { transform:translateX(0); }
.notif-toast .notif-title {
  font-size:0.9rem;
  font-weight:600;
  color: var(--text);
  margin-bottom:4px;
}
.notif-toast .notif-body {
  font-size:0.82rem;
  color: var(--text-dim);
}

/* ─── SETTINGS ─── */
.settings-section { margin-bottom:20px; }
.settings-section h3 {
  font-size:0.95rem;
  font-weight:600;
  color: var(--text);
  margin-bottom:8px;
}
.settings-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.settings-row .label { font-size:0.84rem; color: var(--text-dim); }
.settings-row .value { font-size:0.84rem; color: var(--text); }
.toggle {
  width:44px; height:24px;
  border-radius:12px;
  background: var(--border);
  cursor:pointer;
  position:relative;
  transition: background var(--transition);
}
.toggle.on { background: var(--purple-bright); }
.toggle::after {
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background: #fff;
  transition: left var(--transition);
}
.toggle.on::after { left:22px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 820px) {
  .sidebar { width:60px; padding:12px 8px; }
  .sidebar .brand span { display:none; }
  .sidebar .brand .badge { display:none; }
  .nav-item { padding:10px 6px; justify-content:center; }
  .nav-item .icon { font-size:1.2rem; }
  .nav-item .nav-label-inline { display:none; }
  .nav-group .nav-label { display:none; }
  .main { margin-left:60px; padding:16px; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .sidebar { width:0; padding:0; transform:translateX(-100%); }
  .sidebar.open { width:220px; transform:translateX(0); }
  .main { margin-left:0; }
}
.preview-note{color:#b8a8c8;font-size:12px;line-height:1.8;margin-bottom:24px}.task-check{color:inherit;flex-shrink:0;cursor:pointer}.agent-config{flex-wrap:wrap}input{min-width:0}.task-title{overflow-wrap:anywhere}button:focus-visible,input:focus-visible{outline:2px solid #c084e8;outline-offset:3px}
@media(max-width:480px){.sidebar{transform:none;width:100%;height:68px;top:auto;bottom:0;display:flex;flex-direction:row;padding:5px;z-index:1000;justify-content:space-around}.sidebar .brand,.sidebar-footer{display:none}.nav-group{margin:0;display:contents}.nav-item{display:flex;flex-direction:column;gap:3px;padding:5px;min-width:55px}.nav-item .nav-label-inline{display:block;font-size:10px}.nav-item .count{display:none}.main{padding:18px 14px 110px}.floating-agent{bottom:85px;right:14px}.popup{width:min(340px,calc(100vw - 28px))}.add-task{flex-wrap:wrap}.add-task input{flex:1;min-width:120px}.agent-config input{max-width:100%}.quick-stats{gap:8px}.stat-card{padding:14px 8px}}
@media(max-width:480px){.sidebar{min-height:0;overflow:visible;align-items:stretch}.nav-item{width:auto;flex:1}.main{min-width:0}.sidebar .nav-group{display:contents}}