/* ── App Layout (sidebar + main) ──────────────────── */
.app-layout{
  --sidebar-w:260px;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .25s ease;
}
.app-layout.sidebar-collapsed{--sidebar-w:56px}
/* Viewport-forced collapse: hide the toggle (user can't uncollapse until they resize). */
.app-layout.sidebar-forced .sidebar-collapse-btn{display:none}
.app-layout.sidebar-collapsed .sidebar{
  width:56px;overflow:visible;padding:1.25rem 0;
}
.app-layout.sidebar-collapsed .sidebar-brand .brand-full{display:none}
.app-layout.sidebar-collapsed .sidebar-brand .brand-short{display:inline}
.app-layout.sidebar-collapsed .sidebar-top{padding:0 0.5rem;justify-content:center}
.app-layout.sidebar-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
.app-layout.sidebar-collapsed .sidebar-nav{padding:0 0.5rem}
.app-layout.sidebar-collapsed .sidebar-link{justify-content:center;padding:0.6rem;gap:0;font-size:0;overflow:hidden}
.app-layout.sidebar-collapsed .sidebar-link svg{font-size:initial}
.app-layout.sidebar-collapsed .theme-toggle-wrap{padding:0.5rem 0.5rem 0}
.app-layout.sidebar-collapsed .theme-toggle span,
.app-layout.sidebar-collapsed .theme-toggle #theme-label{display:none}
.app-layout.sidebar-collapsed .theme-toggle{justify-content:center;padding:0.6rem;gap:0}
.app-layout.sidebar-collapsed .sidebar-row{flex-direction:column;gap:0.25rem}
.app-layout.sidebar-collapsed .lang-toggle{padding:0.4rem;font-size:0.62rem}
.app-layout.sidebar-collapsed .sidebar-bottom{padding:0.5rem 0.5rem 0}
.app-layout.sidebar-collapsed .account-info{display:none}
.app-layout.sidebar-collapsed .sidebar-plan-badge,
.app-layout.sidebar-collapsed .sidebar-plan-upgrade{display:none}
.app-layout.sidebar-collapsed .sidebar-account{padding:0.4rem;justify-content:center}
.app-layout.sidebar-collapsed .avatar{width:1.75rem;height:1.75rem;font-size:0.72rem}
.sidebar-collapse-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.75rem;
  height:1.75rem;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-muted);
  border-radius:var(--radius-md);
  transition:color .15s,background .15s;
  flex-shrink:0;
}
.sidebar-collapse-btn:hover{color:var(--text);background:var(--bg-tertiary)}
.sidebar-collapse-btn svg{transition:transform .25s ease}

/* Floating drawer-open button — only used in mobile drawer mode. */
.sidebar-open-btn{
  display:none;
  position:fixed;
  top:0.75rem;
  left:0.75rem;
  z-index:400;
  width:2rem;
  height:2rem;
  align-items:center;
  justify-content:center;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  cursor:pointer;
  color:var(--text-secondary);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:color .15s,background .15s;
}
.sidebar-open-btn:hover{color:var(--text);background:var(--bg-tertiary)}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar{
  background:var(--bg);
  border-right:1px solid var(--border-subtle);
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  padding:1.25rem 0;
  overflow:visible;
}

.sidebar-top{
  padding:0 1.5rem;
  margin-bottom:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sidebar-brand{
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
}
.sidebar-brand:hover{color:var(--text);text-decoration:none}
.sidebar-brand-dot{color:var(--accent);font-weight:600}
.sidebar-brand .brand-short{display:none}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:0.125rem;
  padding:0 0.75rem;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.55rem 0.75rem;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  border-radius:var(--radius);
  transition:background .15s ease,color .15s ease;
  text-decoration:none;
}
.sidebar-link svg{flex-shrink:0;opacity:.6;transition:opacity .15s}
.sidebar-link:hover{background:var(--bg-tertiary);color:var(--text);text-decoration:none}
.sidebar-link:hover svg{opacity:1}
.sidebar-link.active{background:var(--accent-subtle);color:var(--accent)}
.sidebar-link.active svg{opacity:1;color:var(--accent)}

/* ── Nav badge (sidebar unread count) ─────────────── */
.sidebar-link .nav-badge{
  margin-left:auto;
  min-width:1.1rem;
  height:1.1rem;
  padding:0 0.38rem;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  font-size:0.65rem;
  font-weight:700;
  line-height:1.1rem;
  text-align:center;
  flex-shrink:0;
}
.app-layout.sidebar-collapsed .sidebar-link .nav-badge{
  /* When sidebar collapses, pin the badge as a small dot on the icon */
  position:absolute; top:0.25rem; right:0.25rem; margin:0;
  min-width:0.5rem; height:0.5rem; padding:0;
  font-size:0; line-height:0;
}

/* ── Theme Toggle ────────────────────────────────── */
.theme-toggle-wrap{
  padding:0.75rem 0.75rem 0;
  margin-top:auto;
}

.theme-toggle{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.55rem 0.75rem;
  font-size:0.82rem;
  font-weight:500;
  color:var(--text-muted);
  border-radius:var(--radius);
  cursor:pointer;
  border:none;
  background:none;
  font-family:inherit;
  width:100%;
  text-align:left;
  transition:background .15s,color .15s;
}
.theme-toggle:hover{background:var(--bg-tertiary);color:var(--text)}
.theme-toggle svg{flex-shrink:0;width:1rem;height:1rem}
.sidebar-row{
  display:flex;align-items:center;justify-content:space-between;gap:0.25rem;
}
.sidebar-row .theme-toggle{flex:1}
.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.55rem 0.65rem;
  font-size:0.7rem;font-weight:600;letter-spacing:0.04em;
  color:var(--text-muted);background:none;border-radius:var(--radius);
  text-decoration:none;transition:background .15s,color .15s;
}
.lang-toggle:hover{background:var(--bg-tertiary);color:var(--text)}

/* ── Sidebar Account ─────────────────────────────── */
.sidebar-bottom{
  padding:0.75rem 0.75rem 0;
  border-top:1px solid var(--border-subtle);
  position:relative;
}

.sidebar-account{
  display:flex;
  align-items:center;
  gap:0.625rem;
  padding:0.625rem 0.75rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .15s;
}
.sidebar-account:hover{background:var(--bg-tertiary)}

.avatar{
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.82rem;
  font-weight:600;
  flex-shrink:0;
}

.account-info{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}
.account-name{font-size:0.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-email{font-size:0.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.account-chevron{
  flex-shrink:0;
  color:var(--text-muted);
  transition:transform .2s;
}
.sidebar-account.open .account-chevron{transform:rotate(180deg)}
.sidebar-plan-badge{
  flex-shrink:0;font-size:0.6rem;font-weight:700;letter-spacing:0.05em;
  padding:0.15rem 0.45rem;border-radius:var(--radius-sm);
  background:var(--accent-subtle);color:var(--accent);
}
.sidebar-plan-upgrade{
  flex-shrink:0;font-size:0.65rem;font-weight:600;
  padding:0.2rem 0.5rem;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;text-decoration:none;
  transition:opacity .15s;
}
.sidebar-plan-upgrade:hover{opacity:0.85}

/* Account dropdown — opens upward, wider menu like Claude */
.account-dropdown{
  display:none;
  flex-direction:column;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  position:absolute;
  bottom:100%;
  left:0.5rem;
  width:280px;
  margin-bottom:0.5rem;
  padding:0.5rem 0;
  z-index:500;
}
.app-layout.sidebar-collapsed .account-dropdown{left:0.25rem}
.account-dropdown.open{display:flex}

.account-dropdown-email{
  padding:0.5rem 1rem 0.4rem;
  font-size:0.68rem;
  color:var(--text-muted);
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:0.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.account-dropdown-sep{
  height:1px;background:var(--border-subtle);margin:0.25rem 0;
}

.account-dropdown-item{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 1rem;
  font-size:0.85rem;
  color:var(--text-secondary);
  border-radius:0;
  text-decoration:none;
  transition:background .12s,color .12s;
  border:none;
  background:none;
  cursor:pointer;
  font-family:inherit;
  width:100%;
  text-align:left;
}
.account-dropdown-item:hover{background:var(--bg-secondary);color:var(--text);text-decoration:none}
.account-dropdown-logout{color:var(--color-error)}
.account-dropdown-logout:hover{background:var(--color-error-bg);color:var(--color-error)}
.account-dropdown-form{margin:0}

/* ── Main Content ────────────────────────────────── */
.main-content{
  padding:2rem clamp(2rem, 4vw, 4rem);
  height:100vh;
  overflow-y:auto;
  background:var(--bg-secondary);
}
.main-content>*{max-width:1100px;margin-left:auto;margin-right:auto}

/* ── Auth Layout (login/signup pages) ────────────── */
.auth-layout{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}

.auth-container{
  width:100%;
  max-width:26rem;
  padding:2.5rem 1.5rem;
}

.auth-brand{
  display:block;
  text-align:center;
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  margin-bottom:2rem;
}
.auth-brand:hover{color:var(--text);text-decoration:none}
.auth-brand-dot{color:var(--accent)}

.auth-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:2.5rem 2rem;
}

.auth-heading{
  font-family:var(--font-serif);
  font-size:1.35rem;
  font-weight:600;
  line-height:1.25;
  margin-bottom:0.25rem;
}

.auth-subheading{
  font-size:0.88rem;
  color:var(--text-secondary);
  margin-bottom:1.5rem;
}

.auth-form .form-group{margin-bottom:1rem}

.auth-error{
  background:var(--color-error-bg);
  color:var(--color-error);
  padding:0.625rem 0.875rem;
  border-radius:var(--radius);
  font-size:0.82rem;
  font-weight:500;
  margin-bottom:1rem;
  border:1px solid var(--color-error);
}

.auth-success{
  background:var(--color-success-bg);
  color:var(--color-success);
  padding:0.625rem 0.875rem;
  border-radius:var(--radius);
  font-size:0.82rem;
  font-weight:500;
  margin-bottom:1rem;
  border:1px solid var(--color-success);
}

.auth-footer{
  text-align:center;
  font-size:0.82rem;
  color:var(--text-secondary);
  margin-top:1.25rem;
}

/* ── Toast notifications ─────────────────────────── */
#toast-container{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end;
}
.toast{
  padding:0.6rem 1rem;border-radius:var(--radius-md);
  font-size:0.82rem;font-weight:500;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  animation:toastIn .25s ease;pointer-events:auto;
  max-width:360px;
}
.toast-success{background:var(--color-success)}
.toast-error{background:var(--color-error)}
.toast-info{background:var(--text)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Auth split layout (signup/login) — Claude-style ── */
.auth-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  min-height:100vh;
  background:#1a1915;
  max-width:90rem;
  margin:0 auto;
  width:calc(100% - 2 * clamp(2rem, 1.43rem + 2.86vw, 4rem));
}
/* Left half: form centered */
.auth-split-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1.5rem 1rem;
  box-sizing:border-box;
  overflow-y:auto;
  min-height:89vh;
}
.auth-split-form-inner{
  width:100%;
  max-width:28rem;
}
.auth-form-card{
  border:0.5px solid rgba(255,255,255,.08);
  border-radius:2rem;
  padding:1.75rem;
  background:rgba(255,255,255,.02);
  box-shadow:0 4px 24px rgba(0,0,0,.06),0 2px 64px rgba(0,0,0,.04);
}
.auth-split-form .auth-brand{
  display:block;
  text-align:center;
  margin-bottom:2rem;
  color:#f5f1e8;
}
.auth-split-form .auth-brand-dot{color:var(--accent)}
.auth-split-form .auth-heading{color:#f5f1e8;text-align:center;font-size:1.5rem}
.auth-split-form .auth-subheading{color:#9a9084;text-align:center}
.auth-split-form .auth-footer{color:#9a9084;text-align:center}
.auth-split-form .auth-footer a{color:var(--accent)}
.auth-split-form .auth-legal{color:#6a6259;text-align:center}
.auth-split-form .auth-legal a{color:#9a9084}
.auth-split-form .auth-error{background:rgba(220,60,60,.15);border-color:#c44;color:#f88}
.auth-split-form label{color:#9a9084}
.auth-split-form input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#f5f1e8;
  padding:0.7rem 0.9rem;font-size:0.9rem;border-radius:0.5rem;
}
.auth-split-form input::placeholder{color:#6a6259}
.auth-split-form input:focus{border-color:rgba(255,255,255,.25);outline:none}
.auth-split-form .btn-social{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#f5f1e8;
  padding:0.7rem 1rem;font-size:0.9rem;
}
.auth-split-form .btn-social:hover{background:rgba(255,255,255,.1)}
.auth-split-form .auth-divider{color:rgba(255,255,255,.2)}
.auth-split-form .auth-divider::before,
.auth-split-form .auth-divider::after{background:rgba(255,255,255,.1)}
.auth-split-form .btn-primary{
  background:#f5f1e8;color:#1a1915;border-color:#f5f1e8;
  padding:0.7rem 1rem;font-size:0.9rem;
}
.auth-split-form .btn-primary:hover{background:#ebe7dc}

/* Right half: portrait demo (9:16) */
.auth-split-demo{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:1.5rem;
  overflow:hidden;
}
.auth-split-demo iframe{
  display:block;
  width:100%;
  height:100%;
  border:none;
  border-radius:1.25rem;
}
.auth-verify-link{
  color:#9a9084;font-size:0.85rem;text-decoration:underline;
  text-underline-offset:3px;transition:color .15s;
}
.auth-verify-link:hover{color:#f5f1e8}

@media(max-width:900px){
  .auth-split{grid-template-columns:1fr}
  .auth-split-demo{display:none}
}

.auth-divider{
  display:flex;align-items:center;gap:0.75rem;
  margin:1.25rem 0;font-size:0.72rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

.btn-social{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;
  width:100%;padding:0.7rem 1rem;
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:var(--radius-lg);font-family:inherit;font-size:0.88rem;
  font-weight:500;color:var(--text);cursor:pointer;
  transition:background .15s,transform .1s;text-decoration:none;
}
.btn-social:hover{background:var(--bg-secondary);transform:scale(1.01)}
.btn-social svg{flex-shrink:0}

.auth-legal{
  text-align:center;font-size:0.72rem;color:var(--text-muted);margin-top:1rem;
}
.auth-legal a{color:var(--text-secondary);font-weight:500}

/* ── Enhanced Stat Cards ─────────────────────────── */
.stat-icon{
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0.75rem;
}
.stat-icon-amber{background:var(--accent-subtle);color:var(--accent)}
.stat-icon-green{background:var(--color-success-bg);color:var(--color-success)}
.stat-icon-purple{background:var(--color-info-bg);color:var(--color-info)}
.stat-icon-orange{background:var(--color-warning-bg);color:var(--color-warning)}

/* ── Settings layout (Claude-style tabs + content) ── */
.settings-layout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:2.5rem;
  max-width:52rem;
  margin:0 auto;
}
.settings-tabs{
  display:flex;
  flex-direction:column;
  gap:0.125rem;
}
.settings-tab{
  display:block;
  padding:0.5rem 0.75rem;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  text-decoration:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  border:none;
  background:none;
  font-family:inherit;
  text-align:left;
  width:100%;
  transition:background .15s,color .15s;
}
.settings-tab:hover{background:var(--bg-tertiary);color:var(--text);text-decoration:none}
.settings-tab.active{background:var(--bg-tertiary);color:var(--text);font-weight:600}
.settings-content{min-width:0}

/* Settings sections (separated by lines, not cards) */
.settings-section{
  padding-bottom:1.75rem;
  margin-bottom:1.75rem;
  border-bottom:1px solid var(--border-subtle);
}
.settings-section:last-child{border-bottom:none;margin-bottom:0}
.settings-section-title{
  font-family:var(--font-serif);
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:0.5rem;
}
.settings-section-desc{
  font-size:0.88rem;
  color:var(--text-secondary);
  margin-bottom:1.25rem;
}
.settings-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
}
.settings-row+.settings-row{border-top:1px solid var(--border-subtle)}
.settings-row-text{flex:1;min-width:0}
.settings-row-label{font-size:0.9rem;font-weight:500;color:var(--text)}
.settings-row-desc{font-size:0.82rem;color:var(--text-muted);margin-top:0.15rem}

/* Legacy grid fallback */
.settings-grid{max-width:40rem;margin:0 auto}

/* ── Toggle switch ───────────────────────────────── */
.toggle{
  position:relative;
  width:2.75rem;
  height:1.5rem;
  flex-shrink:0;
  cursor:pointer;
}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{
  position:absolute;
  inset:0;
  background:var(--bg-tertiary);
  border-radius:var(--radius-pill);
  transition:background .2s ease;
}
.toggle-thumb{
  position:absolute;
  top:0.1875rem;
  left:0.1875rem;
  width:1.125rem;
  height:1.125rem;
  background:#fff;
  border-radius:50%;
  transition:transform .2s cubic-bezier(.25,.46,.45,.94);
}
.toggle input:checked~.toggle-track{background:rgba(255,255,255,.55)}
.toggle input:checked~.toggle-thumb{transform:translateX(1.25rem)}

/* ── Appearance toggle ────────────────────────────── */
.theme-options{
  display:flex;
  gap:0.5rem;
  margin-top:0.5rem;
}
.theme-option{
  flex:1;
  padding:0.75rem 1rem;
  text-align:center;
  font-size:0.82rem;
  font-weight:500;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text-secondary);
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.theme-option:hover{border-color:var(--text-muted);color:var(--text)}
.theme-option.active{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ── Auth OR divider ──────────────────────────────── */
.auth-divider{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:1.25rem 0;
  color:var(--text-muted);
  font-size:0.8rem;
  font-weight:500;
}
.auth-divider::before,.auth-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}

/* ── Auth social/outline button ──────────────────── */
.btn-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  width:100%;
  padding:0.85rem 1.1rem;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  font-size:0.95rem;
  font-weight:500;
  cursor:pointer;
  background:var(--bg-tertiary);
  color:var(--text);
  font-family:inherit;
  transition:transform .2s cubic-bezier(.25,.46,.45,.94);
}
.btn-social:hover{transform:scale(1.02);text-decoration:none;color:var(--text)}
.btn-social:active{transform:scale(0.98)}
.btn-social svg,.btn-social img{width:1.1rem;height:1.1rem;flex-shrink:0}

/* ── Auth fine print ─────────────────────────────── */
.auth-legal{
  font-size:0.72rem;
  color:var(--text-muted);
  text-align:center;
  margin-top:1rem;
  line-height:1.5;
}
.auth-legal a{color:var(--text-secondary)}

/* ── Command / search input bar ──────────────────── */
.command-bar{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.45rem 0.45rem 0.45rem 1.25rem;
  background:var(--bg-tertiary);
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  transition:border-color .2s ease;
}
.command-bar:focus-within{
  border-color:var(--border);
}
.command-input{
  flex:1;
  border:none;
  background:none;
  color:var(--text);
  font-size:1rem;
  font-family:inherit;
  padding:0.4rem 0;
  outline:none;
}
.command-input::placeholder{color:var(--text-muted)}
.command-input:focus{box-shadow:none;border-color:transparent}
.command-send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  padding:0;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-family:inherit;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .2s cubic-bezier(.25,.46,.45,.94);
}
.command-send:hover{transform:scale(1.06)}
.command-send:active{transform:scale(0.94)}
.command-send svg{width:1.1rem;height:1.1rem}

/* ── Action chips (below command bar) ────────────── */
.action-chips{
  display:flex;
  gap:0.5rem;
  margin-top:0.75rem;
}
.action-chip{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.45rem 0.9rem;
  background:var(--bg-tertiary);
  border:none;
  border-radius:var(--radius-lg);
  font-size:0.82rem;
  font-weight:500;
  color:var(--text-secondary);
  cursor:pointer;
  font-family:inherit;
  transition:transform .2s cubic-bezier(.25,.46,.45,.94);
}
.action-chip:hover{transform:scale(1.04);color:var(--text);text-decoration:none}
.action-chip:active{transform:scale(0.96)}
.action-chip svg{width:0.9rem;height:0.9rem;flex-shrink:0}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:960px){
  /* Sidebar becomes a drawer — remove it from layout flow and reset
     --sidebar-w so panel/content calculations treat the main area as full width. */
  .app-layout{grid-template-columns:1fr;--sidebar-w:0px}
  .sidebar{
    position:fixed;
    left:-260px;
    z-index:300;
    transition:left .25s;
    height:100vh;
    /* Always render as expanded form in drawer mode — more useful than a 56px bar */
    width:260px;
  }
  .sidebar.open{left:0}
  .main-content{padding:1.5rem 1.25rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* Drawer toggle button — visible when drawer is closed */
  .sidebar-open-btn{display:flex}
  body.sidebar-drawer-open .sidebar-open-btn{display:none}
  /* Scrim behind open drawer */
  body.sidebar-drawer-open::before{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:290;animation:fadeIn .2s ease;
  }
}

/* ── Tablet / small-laptop (≤ 768px) ────────────────────
   Shell is already in drawer mode (kicks in at 960px). This
   breakpoint handles layouts that are fine on tablet but too
   cramped on phones — specifically the settings two-col layout,
   which hard-codes a 180px tab rail that squeezes content. */
@media(max-width:768px){
  /* Settings: stack tabs above content, make tabs a horizontal
     scrolling strip so all labels stay reachable even if they
     don't all fit in the viewport width. */
  .settings-layout{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .settings-tabs{
    flex-direction:row;
    gap:0.25rem;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:0.25rem;
    margin-bottom:0.5rem;
    border-bottom:1px solid var(--border-subtle);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .settings-tabs::-webkit-scrollbar{display:none}
  .settings-tab{
    flex:0 0 auto;
    white-space:nowrap;
    padding:0.45rem 0.85rem;
    font-size:0.85rem;
  }
  /* Larger fluid padding backs off on phones */
  .main-content{padding:clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem)}
}

@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .auth-container{padding:1.5rem 1rem}
  .auth-card{padding:1.5rem 1.25rem}
  /* Page headers tighter on phones */
  .page-header h1{font-size:1.4rem}
  /* Buttons: minimum touch target (WCAG AAA = 44×44) */
  .btn{min-height:40px}
  .btn.btn-sm{min-height:34px}
}

/* ══════════════════════════════════════════════════════
   PREMIUM ANIMATIONS
   Inspired by Claude.ai, Arc Browser, reMarkable
   ══════════════════════════════════════════════════════ */

/* ── Shared keyframes ────────────────────────────────── */
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.96) translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes gentlePulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* ── Auth form staggered entrance ────────────────────── */
.auth-form .form-group,
.auth-form .btn-social,
.auth-form .auth-divider,
.auth-form button[type="submit"]{
  opacity:0;
  animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) forwards;
}
.auth-form >:nth-child(1){animation-delay:.05s}
.auth-form >:nth-child(2){animation-delay:.12s}
.auth-form >:nth-child(3){animation-delay:.19s}
.auth-form >:nth-child(4){animation-delay:.26s}
.auth-form >:nth-child(5){animation-delay:.33s}
.auth-form >:nth-child(6){animation-delay:.40s}
.auth-form >:nth-child(7){animation-delay:.47s}

.auth-heading{
  opacity:0;
  animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.auth-subheading{
  opacity:0;
  animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .12s forwards;
}
.auth-form-card{
  transition:transform .3s ease,box-shadow .3s ease;
}
.auth-form-card:hover{
  transform:scale(1.003);
  box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 80px rgba(0,0,0,.04);
}

/* ── Button loading state ────────────────────────────── */
.btn-loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn-loading *{color:transparent !important}
.btn-loading::after{
  content:'';
  position:absolute;
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
  left:50%;top:50%;
  margin:-8px 0 0 -8px;
}
.btn-primary.btn-loading::after{
  border-color:rgba(0,0,0,.2);
  border-top-color:#1a1915;
}

/* ── Onboarding step transitions ─────────────────────── */
.ob-step{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  max-height:0;
  overflow:hidden;
}
.ob-step.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
  max-height:400px;
  overflow:visible;
}

/* ── Onboarding progress dots ────────────────────────── */
.ob-progress{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:1.25rem;
}
.ob-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--border);
  transition:background .3s ease,transform .3s ease,width .3s ease;
}
.ob-dot.active{
  background:var(--accent);
  transform:scale(1.15);
  width:20px;
  border-radius:4px;
}
.ob-dot.done{
  background:var(--accent);
}

/* ── Dashboard welcome entrance ──────────────────────── */
.dash-greeting{
  opacity:0;
  animation:fadeSlideUp .65s cubic-bezier(.16,1,.3,1) .15s forwards;
}
#onboarding-card{
  opacity:0;
  animation:fadeSlideUp .55s cubic-bezier(.16,1,.3,1) .4s forwards;
}
.task-card{
  opacity:0;
  animation:scaleIn .5s cubic-bezier(.16,1,.3,1) .3s forwards;
}

/* ── Onboarding input styling ────────────────────────── */
.input-command{
  width:100%;
  padding:0.75rem 1rem;
  background:var(--bg-tertiary);
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  font-size:0.88rem;
  color:var(--text);
  font-family:var(--font-sans);
  transition:border-color .25s ease,box-shadow .25s ease,background .2s ease;
  outline:none;
}
.input-command:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-subtle);
  background:var(--bg-secondary);
}
.input-command::placeholder{
  color:var(--text-muted);
}
textarea.input-command{
  resize:vertical;
  min-height:56px;
  line-height:1.5;
}

/* ── Toast notification entrance ─────────────────────── */
.toast{
  animation:toastIn .35s cubic-bezier(.16,1,.3,1) !important;
}
@keyframes toastIn{
  from{transform:translateY(100%) scale(.95);opacity:0}
  to{transform:none;opacity:1}
}

/* ── Feed card animations ────────────────────────────── */
.feed-card{
  animation:scaleIn .35s cubic-bezier(.16,1,.3,1) both;
}
.feed-card.swiping-right{
  border-color:var(--color-success) !important;
  box-shadow:0 0 0 2px var(--color-success);
  transform:translateX(110%) rotate(6deg);
  opacity:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.feed-card.swiping-left{
  border-color:var(--color-error) !important;
  box-shadow:0 0 0 2px var(--color-error);
  transform:translateX(-110%) rotate(-6deg);
  opacity:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.feed-done{
  opacity:0;
  animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) .1s forwards;
}

/* ── Section entrance for dashboard cards ────────────── */
.dash-section{
  opacity:0;
  animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.active-task{
  opacity:0;
  animation:fadeSlideUp .4s cubic-bezier(.16,1,.3,1) .6s forwards;
}

/* ── Shake animation for validation ──────────────────── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

/* ── Subtle hover lift on cards ──────────────────────── */
.card,.task-card,.feed-card,.active-task,.email-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover,.email-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}