/* ═══════════════════════════════════════════════
   FLUX — Design System
   ═══════════════════════════════════════════════ */

:root {
  --c-bg:        #0d0d0f;
  --c-surface:   #131316;
  --c-panel:     #18181c;
  --c-raised:    #1f1f24;
  --c-border:    #2a2a30;
  --c-border2:   #353540;
  --c-text:      #e8e8ec;
  --c-text2:     #9090a0;
  --c-text3:     #55555f;
  --c-accent:    #f0832a;
  --c-accent2:   #c4631a;
  --c-accent-bg: rgba(240,131,42,0.08);
  --c-accent-bg2:rgba(240,131,42,0.15);
  --c-green:     #3dd68c;
  --c-red:       #f05252;
  --c-blue:      #4f9cf0;
  --c-purple:    #9b6af0;
  --c-yellow:    #f0c842;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sidebar-w: 220px;
  --detail-w: 320px;
  --topbar-h: 52px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);
  --shadow-accent: 0 4px 24px rgba(240,131,42,0.25);

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

[data-theme="light"] {
  --c-bg:        #f0f0f2;
  --c-surface:   #fafafa;
  --c-panel:     #ffffff;
  --c-raised:    #f5f5f7;
  --c-border:    #e0e0e6;
  --c-border2:   #d0d0d8;
  --c-text:      #1a1a20;
  --c-text2:     #60606a;
  --c-text3:     #a0a0aa;
  --c-accent-bg: rgba(240,131,42,0.07);
  --c-accent-bg2:rgba(240,131,42,0.14);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border2); border-radius: 99px; }

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  width: 100vw;
}

/* ═══════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════ */

.sidebar {
  grid-area: sidebar;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  z-index: 20;
  transition: transform 0.3s var(--ease);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--c-border);
  border-right: none;
  flex-shrink: 0;
}

.logo-mark {
  width: 28px;
  height: 28px;
  background: var(--c-accent);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: -1px;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--c-text);
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text3);
  padding: 8px 10px 4px;
  font-weight: 500;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--c-text2);
  font-size: 13.5px;
  font-weight: 400;
  transition: all 0.15s;
  position: relative;
  user-select: none;
}

.nav-item i { font-size: 17px; flex-shrink: 0; }
.nav-item span { flex: 1; }

.nav-item .badge {
  background: var(--c-raised);
  color: var(--c-text3);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 6px;
  border-radius: 99px;
  min-width: 14px;
  text-align: right;
}


.nav-item:hover {
  background: var(--c-raised);
  color: var(--c-text);
}

.nav-item.active {
  background: var(--c-accent-bg2);
  color: var(--c-accent);
}

.nav-item.active i { color: var(--c-accent); }
.nav-item.active .badge { background: var(--c-accent-bg2); color: var(--c-accent); }

.sidebar-bottom {
  padding: 12px 8px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */

.topbar {
  grid-area: topbar;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  z-index: 10;
}

.topbar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-text);
  margin-right: 4px;
}

.search-bar {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.search-bar input {
  width: 100%;
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 7px 12px 7px 34px;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}

.search-bar input:focus {
  border-color: var(--c-accent);
  background: var(--c-panel);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
}

.search-bar input::placeholder { color: var(--c-text3); }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text3);
  font-size: 15px;
  pointer-events: none;
}

.topbar-spacer { flex: 1; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-raised);
  color: var(--c-text2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  transition: all 0.15s;
}

.icon-btn:hover {
  background: var(--c-border);
  color: var(--c-text);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), var(--c-purple));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════ */

.main {
  grid-area: main;
  overflow: hidden;
  position: relative;
  background: var(--c-bg);
}

.view {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 28px 32px;
  animation: fadeSlideIn 0.25s var(--ease) both;
}

.view.active { display: block; }

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

/* ═══════════════════════════════════════════════
   COMPONENTS — BUTTONS
   ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}

.btn i { font-size: 16px; }

.btn-primary {
  background: var(--c-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--c-accent2);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text2);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover {
  background: var(--c-raised);
  color: var(--c-text);
  border-color: var(--c-border2);
}

.btn-danger {
  background: rgba(240,82,82,0.1);
  color: var(--c-red);
  border: 1px solid rgba(240,82,82,0.2);
}
.btn-danger:hover { background: rgba(240,82,82,0.18); }

.btn-sm {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.btn-sm i { font-size: 14px; }

/* ═══════════════════════════════════════════════
   COMPONENTS — TAGS & BADGES
   ═══════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
}

.tag-high   { background: rgba(240,82,82,0.15); color: var(--c-red); }
.tag-medium { background: rgba(240,200,66,0.15); color: var(--c-yellow); }
.tag-low    { background: rgba(61,214,140,0.15); color: var(--c-green); }
.tag-done   { background: rgba(61,214,140,0.12); color: var(--c-green); }
.tag-ai     { background: var(--c-accent-bg2); color: var(--c-accent); }

/* Sidenav badge/tag layout tweaks */
.sidebar .nav-item .badge { 
  margin: auto; 
  flex: 0 0 auto; 
  display: inline-flex;
  align-items: center; 
  justify-content: center;
  white-space: nowrap;
  width: 36px;
}
.sidebar .nav-item .tag,
.sidebar .nav-item .tag-ai { 
  margin-left: auto; 
  flex: 0 0 auto; 
  display: inline-flex;
  align-items: center; 
  justify-content: center;
  width: 36px;
}
.sidebar .nav-item .tag-ai { padding: 1px 6px; font-size: 10px; }

/* ═══════════════════════════════════════════════
   COMPONENTS — CARDS
   ═══════════════════════════════════════════════ */

.card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
}

/* ═══════════════════════════════════════════════
   VIEW: HOME / DASHBOARD
   ═══════════════════════════════════════════════ */

.home-header {
  margin-bottom: 28px;
}

.home-greeting {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}

.home-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text3);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.stat-card.orange::before { background: var(--c-accent); }
.stat-card.green::before  { background: var(--c-green); }
.stat-card.blue::before   { background: var(--c-blue); }
.stat-card.purple::before { background: var(--c-purple); }

.stat-card:hover {
  border-color: var(--c-border2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text3);
  margin-bottom: 10px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
}

.stat-sub {
  font-size: 11px;
  color: var(--c-text3);
  margin-top: 6px;
}

.stat-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 22px;
  opacity: 0.15;
}

/* ── Home Grid ────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text3);
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════
   TASK LIST
   ═══════════════════════════════════════════════ */

.task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-item {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}

.task-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s;
}

.task-item.p-high::before   { background: var(--c-red); }
.task-item.p-medium::before { background: var(--c-yellow); }
.task-item.p-low::before    { background: var(--c-green); }

.task-item:hover {
  border-color: var(--c-border2);
  background: var(--c-raised);
  transform: translateX(2px);
}

.task-item.completed {
  opacity: 0.45;
}

.task-item.completed .task-title {
  text-decoration: line-through;
}

.task-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--c-border2);
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  cursor: pointer;
}

.task-check:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-bg);
}

.task-check.checked {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
  font-size: 11px;
}

.task-body { flex: 1; min-width: 0; }

.task-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-date.overdue { color: var(--c-red); }
.task-date i { font-size: 12px; }

.task-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.task-item:hover .task-actions { opacity: 1; }

.task-action-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--c-text3);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
}

.task-action-btn:hover {
  background: var(--c-raised);
  color: var(--c-text);
}

.task-action-btn.delete:hover {
  background: rgba(240,82,82,0.1);
  color: var(--c-red);
}

/* ═══════════════════════════════════════════════
   VIEW: MY TASKS
   ═══════════════════════════════════════════════ */

.tasks-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--c-border);
  background: var(--c-panel);
  color: var(--c-text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-mono);
}

.filter-chip:hover {
  border-color: var(--c-border2);
  color: var(--c-text);
}

.filter-chip.active {
  background: var(--c-accent-bg2);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.tasks-group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text3);
  padding: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tasks-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ═══════════════════════════════════════════════
   VIEW: PROJECTS
   ═══════════════════════════════════════════════ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.project-card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--c-raised) 100%);
  pointer-events: none;
}

.project-card:hover {
  border-color: var(--c-border2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.project-color {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.project-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 5px;
}

.project-desc {
  font-size: 12px;
  color: var(--c-text3);
  margin-bottom: 16px;
  line-height: 1.4;
}

.project-progress {
  height: 3px;
  background: var(--c-raised);
  border-radius: 99px;
  margin-bottom: 10px;
  overflow: hidden;
}

.project-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s var(--ease);
}

.project-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-task-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text3);
}

/* ═══════════════════════════════════════════════
   VIEW: CALENDAR
   ═══════════════════════════════════════════════ */

.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-month {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.calendar-grid-wrap {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--c-border);
}

.cal-day-name {
  padding: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text3);
}

.calendar-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  min-height: 90px;
  padding: 8px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background 0.15s;
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--c-raised); }

.cal-cell-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text3);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 4px;
  transition: all 0.15s;
}

.cal-cell.today .cal-cell-num {
  background: var(--c-accent);
  color: #fff;
}

.cal-cell.other-month .cal-cell-num { opacity: 0.3; }

.cal-task-dot {
  font-size: 10px;
  color: var(--c-text2);
  background: var(--c-raised);
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* ═══════════════════════════════════════════════
   VIEW: ANALYTICS
   ═══════════════════════════════════════════════ */

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.chart-wrap {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
}

.chart-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 16px;
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--c-accent);
  opacity: 0.8;
  transition: height 0.6s var(--ease);
  min-height: 2px;
}

.bar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--c-text3);
  letter-spacing: 0.5px;
}

/* Donut chart */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.donut-svg { flex-shrink: 0; }

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text2);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Productivity score ring */
.score-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
}

.score-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.score-ring svg { transform: rotate(-90deg); }

.score-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
}

.score-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text3);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════
   VIEW: AI ASSISTANT
   ═══════════════════════════════════════════════ */

/* ── AI Layout ────────────────────────────── */
.ai-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  height: calc(100dvh - var(--topbar-h) - 80px);
  min-height: 300px;
  background: var(--c-raised);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.ai-chat {
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-msg {
  display: flex;
  gap: 10px;
  animation: fadeSlideIn 0.2s var(--ease) both;
}

.ai-msg.user { flex-direction: row-reverse; }

.ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--c-accent), #d04010);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.ai-avatar.user-av {
  background: linear-gradient(135deg, var(--c-purple), var(--c-blue));
}

.ai-bubble {
  max-width: 75%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text);
}

.ai-msg:not(.user) .ai-bubble {
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: 2px var(--r-md) var(--r-md) var(--r-md);
}

.ai-msg.user .ai-bubble {
  background: var(--c-accent-bg2);
  border: 1px solid rgba(240,131,42,0.2);
  border-radius: var(--r-md) 2px var(--r-md) var(--r-md);
  color: var(--c-text);
}

.ai-input-area {
  padding: 12px;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 8px;
}

.ai-input-area textarea {
  flex: 1;
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 13px;
  resize: none;
  outline: none;
  height: 40px;
  max-height: 120px;
  overflow: hidden;
  transition: border-color 0.2s;
  line-height: 1.4;
}

.ai-input-area textarea:focus { border-color: var(--c-accent); }
.ai-input-area textarea::placeholder { color: var(--c-text3); }

.ai-send-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  border: none;
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.ai-send-btn:hover { background: var(--c-accent2); }
.ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ai-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid var(--c-border);
  background: var(--c-panel);
}

.ai-quick-action {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text2);
}

.ai-quick-action:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
  background: var(--c-accent-bg);
}

.ai-quick-action i {
  font-size: 18px;
  color: var(--c-accent);
}

/* API Key setup banner */
.api-banner {
  background: var(--c-accent-bg);
  border: 1px solid rgba(240,131,42,0.3);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.api-banner i { font-size: 22px; color: var(--c-accent); flex-shrink: 0; }
.api-banner p { font-size: 13px; color: var(--c-text2); flex: 1; line-height: 1.4; }
.api-banner strong { color: var(--c-text); }

.api-key-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.api-key-input-row input {
  flex: 1;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}

.api-key-input-row input:focus { border-color: var(--c-accent); }

/* typing indicator */
.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text3);
  animation: dotBounce 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ═══════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease both;
  /* block all pointer events on the page behind */
  pointer-events: none;
  overflow: hidden;
}

.modal-overlay.open {
  display: flex;
  pointer-events: all;
}

/* when any modal is open, body must not scroll */
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s var(--ease) both;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  background: var(--c-panel);
  z-index: 1;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--c-raised);
  color: var(--c-text2);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}

.modal-close:hover { background: var(--c-border); color: var(--c-text); }

.modal-body { padding: 20px 24px; flex: 1; overflow-y: auto; }

.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--c-panel);
  z-index: 1;
}

/* Form fields */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text3);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--c-accent); }

.field textarea { resize: vertical; min-height: 80px; }

.field select { cursor: pointer; }
.field select option { background: var(--c-panel); }

.fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* #task-comment-input styles removed - duplicates .field textarea */

/* ── Voice settings layout ─────────────────────────── */
.voice-settings-card { display:flex; flex-direction:column; gap:14px; }
.voice-settings-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.voice-settings-label { font-family:var(--font-mono); font-size:11px; color:var(--c-text3); min-width:90px; flex-shrink:0; }
.voice-settings-row input[type="range"] { flex:1; min-width:80px; accent-color:var(--c-accent); }
.voice-settings-row select {
  flex: 1; min-width:120px; background:var(--c-raised); border:1px solid var(--c-border);
  border-radius:var(--r-sm); padding:7px 10px; color:var(--c-text); font-size:13px; outline:none;
}
.voice-val { font-family:var(--font-mono); font-size:11px; width:32px; text-align:right; flex-shrink:0; }
@media (max-width:480px) {
  .voice-settings-row.lang-row { flex-direction:column; align-items:stretch; }
  .voice-settings-label { min-width: unset; }
}

/* ── Token display ─────────────────────────────────── */
.ai-token-display {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text3);
  letter-spacing: 0.5px;
  margin-left: auto;
  padding: 3px 8px;
  background: var(--c-raised);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  white-space: nowrap;
}

/* Voice status visual feedback */
#ai-voice-toggle.btn-primary {
  box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.4);
  animation: voicePulse 2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(61, 214, 140, 0); }
}

/* Body lock when sidebar open */
/* body.no-scroll removed */

/* ── Universal dialog ──────────────────────────────── */
#flux-dialog {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-panel);
  color: var(--c-text);
  padding: 0;
  max-width: 380px;
  width: calc(100% - 40px);
  box-shadow: var(--shadow-lg);
  /* Center horizontally and vertically */
  position: fixed;
  inset: 0;
  margin: auto;
}
#flux-dialog::backdrop { background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); }
.flux-dialog-inner { padding:28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.flux-dialog-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:26px; margin-bottom:4px; }
.flux-dialog-icon.danger { background: rgba(240,82,82,0.12); color: var(--c-red); }
.flux-dialog-icon.warning { background: rgba(240,200,66,0.12); color: var(--c-yellow); }
.flux-dialog-icon.info { background: var(--c-accent-bg2); color: var(--c-accent); }
.flux-dialog-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.flux-dialog-msg { font-size: 13px; color: var(--c-text3); line-height: 1.6; max-width: 280px; }
.flux-dialog-actions { display:flex; gap:10px; margin-top:8px; justify-content:center; }

/* Attachments */
.attach-list { display:flex; flex-wrap:wrap; gap:8px; }
.attach-chip { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--c-border); background:var(--c-raised); border-radius: var(--r-sm); font-size:12px; }
.attach-chip .chip-btn { border:none; background:transparent; color:var(--c-text3); cursor:pointer; }
.attach-badge { margin-left:6px; padding:0 6px; border-radius:10px; font-size:10px; background:var(--c-raised); border:1px solid var(--c-border); }

/* ── FAB long-press feedback ───────────────────────── */
.fab-pulse { animation: orbPulse 0.6s ease-in-out infinite; background: var(--c-accent2) !important; }
#fab { display:none !important; }

/* ── Online status ─────────────────────────────────── */
.online-status { display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--c-text3); }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.online  { background:var(--c-green); box-shadow: 0 0 6px var(--c-green); }
.status-dot.offline { background:var(--c-red);   box-shadow: 0 0 6px var(--c-red);   }

/* Sidebar backdrop and mobile UX */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
  display: none; z-index: 8;
}
.sidebar.open + .sidebar-backdrop { display: block; }
@media (max-width: 600px) {
  .topbar .avatar, .topbar #online-status { display: none !important; }
  .sidebar .sidebar-mobile-status { display: block; }
}
@media (min-width: 601px) {
  .sidebar .sidebar-mobile-status { display: none; }
}

/* ── Focus mode ────────────────────────────────────── */
.app.focus-mode .sidebar { display: none; }
.app.focus-mode { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
.focus-bar {
  display: none; align-items:center; gap:10px; padding:8px 16px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));
  color:#fff; font-family:var(--font-mono); font-size:12px; letter-spacing:0.5px;
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 30;
}
.app.focus-mode .focus-bar { display: flex; }
.focus-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:9; }
.app.focus-mode .focus-overlay { display:block; }
#tasks-list-container { position: relative; z-index: 10; }

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */

.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text);
  box-shadow: var(--shadow-md);
  animation: toastIn 0.3s var(--ease) both;
  pointer-events: auto;
  min-width: 220px;
}

.toast.success i { color: var(--c-green); }
.toast.error   i { color: var(--c-red); }
.toast.ai      i { color: var(--c-accent); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); }
}

/* ═══════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--c-text3);
  text-align: center;
}

.empty-state i { font-size: 40px; opacity: 0.4; }
.empty-state p { font-size: 13px; max-width: 220px; line-height: 1.5; }

/* ═══════════════════════════════════════════════
   FAB - Removed
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   MOBILE SIDEBAR TOGGLE
   ═══════════════════════════════════════════════ */

.sidebar-toggle {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-raised);
  color: var(--c-text2);
  place-items: center;
  cursor: pointer;
  font-size: 18px;
}

/* ═══════════════════════════════════════════════
   AI THINKING BANNER
   ═══════════════════════════════════════════════ */

.ai-thinking {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--c-accent-bg);
  border: 1px solid rgba(240,131,42,0.2);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--c-accent);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

.ai-thinking.active { display: flex; }

/* AI Assistant mobile tabs: hidden by default, shown on small screens */
.ai-mobile-tabs { display: none; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root { --sidebar-w: 60px; }

  .sidebar-logo .logo-text { display: none; }
  .nav-item span, .nav-item .badge, .nav-label { display: none; }
  .nav-item { justify-content: center; padding: 10px; }
  .sidebar-bottom .nav-item { justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .home-grid, .analytics-grid { grid-template-columns: 1fr; }
  .ai-layout { grid-template-columns: 1fr; }
  .ai-sidebar-panel { display: none; }
}

@media (max-width: 600px) {
  :root { --sidebar-w: 0px; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 220px; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: grid; }
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .view { padding: 20px 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .search-bar { display: none; }
  .fields-row, #task-modal .fields-row { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }

  /* AI Mobile Layout: Use real VH */
  .ai-layout {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topbar-h) - 70px);
    min-height: 300px;
    border: none; background: transparent;
  }
  .ai-chat { flex: 1; border-radius: var(--r-lg); }
  .ai-sidebar { display: none; }
  .ai-sidebar.mobile-visible { display: flex; position: absolute; inset: 0; z-index: 20; }
  
  .cal-cell { min-height: 52px; padding: 4px; }
  .cal-task-dot { display: none; }
  .cal-cell-num { font-size: 11px; width: 20px; height: 20px; }
  /* Override the <=900 rule: show labels and badges in mobile sidebar */
  .sidebar .nav-item span,
  .sidebar .nav-label,
  .sidebar .nav-item .badge { display: inline !important; }
  .sidebar .nav-item { justify-content: flex-start; padding: 10px 12px; }
  .sidebar-logo .logo-text { display: block !important; }
  /* AI Assistant mobile tabs */
  .ai-mobile-tabs { display:flex; gap:8px; margin-bottom:10px; flex-shrink: 0; }
  .ai-mobile-tabs .btn { flex:1; justify-content:center; }
  .ai-chat.mobile-hide { display:none !important; }
  .ai-sidebar-panel.mobile-show { display:block !important; flex: 1; overflow-y: auto; padding-bottom: 20px; }
}

/* ── Modal body lock ─────────────────────── */
/* body.modal-open removed - duplicates global rule */

/* ── Backup modal ────────────────────────── */
.backup-action {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; background: var(--c-raised);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  margin-bottom: 10px; cursor: pointer; transition: all 0.15s;
}
.backup-action:hover { border-color: var(--c-border2); background: var(--c-panel); transform: translateX(3px); }
.backup-action i:first-child { font-size: 24px; flex-shrink: 0; }
.backup-action h4 { font-size: 13.5px; font-weight: 600; color: var(--c-text); margin-bottom: 2px; }
.backup-action p  { font-size: 11.5px; color: var(--c-text3); line-height: 1.4; }
.backup-action.danger  i:first-child { color: var(--c-red);   }
.backup-action.danger  h4            { color: var(--c-red);   }
.backup-action.export  i:first-child { color: var(--c-green); }
.backup-action.import-a i:first-child { color: var(--c-blue); }

/* ── Voice AI modal ──────────────────────── */
.voice-orb-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding: 6px 0 18px;
}
.voice-orb {
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent) 0%, #b85a15 100%);
  display: grid; place-items: center; font-size: 32px; color: #fff;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 24px rgba(240,131,42,0.35);
}
.voice-orb:hover { transform: scale(1.06); }
.voice-orb.listening { animation: orbPulse 1.4s ease-in-out infinite; }
@keyframes orbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,131,42,0.5); transform: scale(1); }
  50%  { box-shadow: 0 0 0 22px rgba(240,131,42,0); transform: scale(1.07); }
  100% { box-shadow: 0 0 0 0 rgba(240,131,42,0); transform: scale(1); }
}
.voice-orb.speaking {
  animation: orbSpeak 0.8s ease-in-out infinite;
  background: radial-gradient(circle, var(--c-blue) 0%, #2060b0 100%);
  box-shadow: 0 4px 24px rgba(79,156,240,0.45);
}
@keyframes orbSpeak {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 24px rgba(79,156,240,0.35); }
  50%       { transform: scale(1.08); box-shadow: 0 4px 36px rgba(79,156,240,0.65); }
}

.voice-mode-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
#voice-mode-task.active-mode,
#voice-mode-chat.active-mode {
  background: var(--c-accent-bg2);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.voice-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0 24px;
}
#voice-transcript {
  min-height: 72px;
  font-size: 14px;
}

.voice-status {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text3);
  letter-spacing: 1.5px; text-transform: uppercase; text-align: center;
}
.voice-transcript {
  width: 100%; background: var(--c-raised);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 14px; font-size: 13px; color: var(--c-text);
  min-height: 56px; line-height: 1.5; text-align: center;
  transition: border-color 0.2s;
}
.voice-ai-preview {
  width: 100%; background: var(--c-accent-bg);
  border: 1px solid rgba(240,131,42,0.25);
  border-radius: var(--r-md); padding: 14px;
  display: none; flex-direction: column; gap: 8px;
  margin-top: 10px;
  animation: fadeSlideIn 0.2s var(--ease) both;
}
.voice-ai-preview.visible { display: flex; }
.preview-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.preview-row i          { color: var(--c-accent); font-size: 15px; flex-shrink: 0; }
.preview-row strong     { color: var(--c-text3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; min-width: 58px; }
.preview-row span       { color: var(--c-text); }

.color-swatch {
  width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; transition: all 0.15s; border: 2px solid transparent;
}
.color-swatch:hover, .color-swatch.selected {
  transform: scale(1.15);
  border-color: var(--c-text);
}

/* ── Task modal wide layout (desktop >= 768px) ───────────────── */
@media (min-width: 768px) {
  #task-modal .modal { max-width: 700px; }
  #task-modal .fields-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  #task-modal .modal { max-width: 860px; }
}

/* AI Buttons */
.task-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-panel);
  flex-wrap: wrap;
  min-height: 44px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ai-chat-header { gap: 4px; padding: 6px 8px; }
  #token-display { display: none !important; }
  #ai-history-depth { display: none !important; }
  
  .fields-row { grid-template-columns: 1fr; }
  #task-modal .modal-body { padding: 16px; }

  .search-bar { display: none; }
  .topbar-title { flex: 1; }

  .cal-cell { min-height: 52px; padding: 4px; }
  .cal-task-dot { display: none; }
  .cal-cell-num { font-size: 11px; width: 20px; height: 20px; }
}

.ai-layout {
  height: calc(100dvh - var(--topbar-h) - 80px);
  min-height: 300px;
}

.home-grid {
  grid-template-columns: 1fr minmax(240px, 320px);
}



/* ═══════════════════════════════════════════════════════════
   SMART BANNERS — Conflict Detection & Recurring Suggestion
   ═══════════════════════════════════════════════════════════ */

.flux-smart-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 10px 0;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  flex-wrap: wrap;
}

.flux-smart-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.flux-smart-banner.conflict {
  background: rgba(240, 82, 82, 0.1);
  border-color: rgba(240, 82, 82, 0.3);
  color: var(--c-red);
}

.flux-smart-banner.conflict > i { font-size: 18px; flex-shrink: 0; }

.flux-smart-banner.recur {
  background: rgba(61, 214, 140, 0.08);
  border-color: rgba(61, 214, 140, 0.25);
  color: var(--c-text);
}

.fsb-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.fsb-text strong { display: block; font-weight: 600; }
.fsb-text span   { font-size: 12px; color: var(--c-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.fsb-action {
  flex-shrink: 0;
  white-space: nowrap;
}

.fsb-close {
  flex-shrink: 0;
  opacity: 0.6;
  width: 26px;
  height: 26px;
}
.fsb-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PROJECT HEALTH SCORING
   ═══════════════════════════════════════════════════════════ */

.project-health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.project-health-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-health-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.project-health-signal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.project-health-signal.good {
  background: rgba(61, 214, 140, 0.1);
  color: var(--c-green);
}

.project-health-signal.bad {
  background: rgba(240, 82, 82, 0.1);
  color: var(--c-red);
}

.project-health-signal i { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════
   IMPORT PREVIEW MODAL
   ═══════════════════════════════════════════════════════════ */

.import-preview-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}

.import-preview-row:last-child { border-bottom: none; }

.import-cb { margin-top: 3px; flex-shrink: 0; accent-color: var(--c-accent); }

.import-preview-body { flex: 1; min-width: 0; }

.import-preview-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 4px;
}

.import-preview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   END-OF-DAY MODAL — override some modal defaults
   ═══════════════════════════════════════════════════════════ */

#eod-modal .modal-header {
  background: rgba(240, 131, 42, 0.06);
  border-bottom: 1px solid rgba(240, 131, 42, 0.18);
}

#eod-modal .modal-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

#eod-summary {
  padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
   SUGGESTIONS — run button pulse
   ═══════════════════════════════════════════════════════════ */

.sugg-run {
  color: var(--c-accent) !important;
  transition: transform 0.15s var(--ease);
}
.sugg-run:hover {
  transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════════════
   IMPORT TEXTAREA focus ring
   ═══════════════════════════════════════════════════════════ */

#import-text-input:focus {
  border-color: var(--c-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--c-accent-bg);
}