/* Evermail WebApp — kit-specific layout & component CSS.
   Originally a single-page React kit; ported into the Blazor app.
   colors_and_type.css is loaded globally by App.razor — no @import here.

   The kit's body-level layout (display:flex spanning the viewport) is
   re-scoped to `.app-shell` so it doesn't fight the marketing/auth pages
   under PublicLayout. MainLayout's outer wrapper applies `.app-shell`. */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-app-bg);
  color: var(--color-text-primary);
}

/* ============ Sidebar ============ */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--color-sidebar-gradient);
  color: #cbd5f5;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem .5rem;
  /* Stretch with the scroll height of the page (body is flex, so the sidebar
     matches the tallest sibling — i.e. .main's full content height).
     An inner sticky wrapper keeps the nav visible while scrolling. */
  align-self: stretch;
}
/* Inner sticky wrapper — pin the nav + user card to the viewport top
   while the sidebar background stretches to the full document height. */
.sidebar__inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  /* Account for the sidebar's own top/bottom padding so the inner content
     fits within the viewport without clipping. */
  height: calc(100vh - 1.75rem);
}
/* The first group (Workspace) gets its own bottom margin; Account group uses margin-top:auto to pin. */
.sidebar > .sidebar__group:first-of-type { margin-bottom: 1rem; }
.sidebar__brand { display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem; }
.sidebar__brand img { width:28px; height:28px; }
.sidebar__brand-text { font-weight:700; font-size:1.05rem; color:#f8fafc; }
.sidebar__brand-text .word { color:#49d9c9; }

.sidebar__user {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin: .5rem 0 .35rem;
  border-radius: 14px;
  padding: .65rem .75rem;
  display:flex; align-items:center; gap:.65rem;
}
.sidebar__user .avatar {
  width:36px; height:36px; border-radius:999px;
  background: linear-gradient(120deg,#2563eb,#06b6d4);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  flex: none;
}
.sidebar__user .meta { display:flex; flex-direction:column; min-width:0; flex: 1 1 auto; }
.sidebar__user .name { font-weight:600; font-size:.85rem; color:#f8fafc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user .plan { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#5de1d6; margin-top:2px; }

/* Logout — ghost icon button tucked into the right edge of the user card */
.sidebar__user-logout {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(226, 232, 240, 0.55);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  padding: 0;
  font-size: 1rem;
}
.sidebar__user-logout:hover {
  color: #fecaca;                            /* soft red-wash on hover so the action reads as "leave" */
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.22);
}
.sidebar__user-logout:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.45);
  outline-offset: 2px;
}

.sidebar__group { display:flex; flex-direction:column; gap:.15rem; }
.sidebar__group-label { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:#64748b; padding:0 .65rem; margin-bottom:.4rem; }

.nav-link {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .75rem; border-radius:14px;
  font-size:.9rem; color:#cbd5f5; cursor:pointer;
  text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link i { font-size: 1.05rem; opacity:.85; }
.nav-link:hover { background: rgba(255,255,255,0.05); color:#fff; }
.nav-link.active { background: rgba(94,225,214,0.10); color:#fff; }
.nav-link.active i { color: #5de1d6; opacity:1; }

/* Parent nav link (Settings) */
.nav-link--parent { position:relative; }
.nav-link__chev {
  margin-left:auto;
  font-size:.85rem !important;
  opacity:.5 !important;
  transition: transform .28s cubic-bezier(.32,.72,.3,1), opacity var(--transition-fast);
}
.nav-link--parent.is-open .nav-link__chev {
  transform: rotate(90deg);
  opacity:.9 !important;
}
.nav-link--parent:hover .nav-link__chev { opacity:.8 !important; }

/* Sublist — max-height animation for broad browser support */
.nav-sublist {
  /* Reset the legacy airy.css sublist-reveal animation so our max-height toggle wins */
  animation: none !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.32,.72,.3,1),
              opacity .2s ease;
}
.nav-sublist__inner {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0 0 0 .55rem;
  padding: .35rem 0 .1rem .7rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.nav-sublist.is-open {
  max-height: 420px;
  opacity: 1;
  transition: max-height .4s cubic-bezier(.32,.72,.3,1),
              opacity .2s ease .08s;
}

/* Sublist items — staggered fade/slide in */
.nav-sublink {
  display:flex; align-items:center; gap:.55rem;
  padding:.42rem .6rem;
  border-radius:10px;
  font-size:.82rem;
  color:#94a3b8;
  cursor:pointer;
  text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  animation: navSublinkIn .36s cubic-bezier(.32,.72,.3,1) both;
  animation-delay: calc(40ms + var(--i, 0) * 32ms);
}
.nav-sublink i { font-size:.9rem; opacity:.7; width:14px; text-align:center; }
.nav-sublink:hover { background: rgba(255,255,255,0.04); color:#e2e8f0; }
.nav-sublink:hover i { opacity:.95; }
.nav-sublink.active { background: rgba(94,225,214,0.08); color:#fff; }
.nav-sublink.active i { color:#5de1d6; opacity:1; }
@keyframes navSublinkIn {
  from { opacity:0; transform: translateX(-6px); }
  to   { opacity:1; transform: translateX(0); }
}

.sidebar__footer {
  padding:.75rem .65rem .25rem;
  font-size:.72rem; color: rgba(248,250,252,.55); letter-spacing:.02em;
  display:flex; align-items:center; gap:.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 0;
}
.sidebar__footer-logo { height:16px; width:auto; opacity:.9; }
.sidebar__footer span { color: rgba(248,250,252,.7); font-weight: 500; }

/* ============ Main area ============ */
.main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 2rem 3rem;
  display:flex; flex-direction:column; gap:1.5rem;
}

/* ============ Top bar ============ */
/* Flat row — no pill chrome. Just a hairline underneath separating the
   bar from the content below. Matches the "airy" visual vocabulary used
   elsewhere in the app. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0 0 1rem;
  height: auto;
  box-shadow: none;
}
.topbar__crumbs { font-size:.85rem; color: var(--color-text-secondary); }
.topbar__crumbs strong { color: var(--color-text-primary); font-weight:600; }
.topbar__right { display:flex; align-items:center; gap:.4rem; }
/* .icon-btn — unified definition further down, in the Buttons section */

/* ============ Page hero ============ */
.page-hero {
  /* Compact title row — no card chrome, just a thin line of type + a
     primary action. Was a huge pill eating ~140px of vertical space on
     every interior page; now it's a single baseline row. */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: .25rem 0 0;
  display:flex; gap:1.5rem; justify-content:space-between; align-items:flex-end;
}
.page-hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
/* Eyebrow is sidebar duplication — hide it. Subtitle stays visible but
   demoted to a small meta line directly under the h1. */
.page-hero .eyebrow { display: none; }
.page-hero > div > p {
  margin: .3rem 0 0;
  font-size: .82rem;
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.35;
}

/* ============ Stat grid ============ */
.stat-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem;
}
.stat-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-sm);
}
.stat-card .label { font-size: .75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-secondary); font-weight:600; }
.stat-card .value { font-size: 2rem; font-weight:700; color: var(--color-brand-deep); margin-top:.4rem; }
.stat-card .delta { font-size: .8rem; font-weight:600; margin-top:.25rem; color: var(--color-success); display:flex; align-items:center; gap:.3rem; }
.stat-card .delta.muted { color: var(--color-text-secondary); }

/* ============ Home screen ============ */
.home-hero {
  margin-bottom: 0;
}
.home-hero h1 { margin:.5rem 0 .5rem; }
.home-hero__sub {
  font-size:.92rem;
  color: var(--color-text-secondary);
  margin:0;
}
.home-hero__sub strong { color: var(--color-text-primary); }

.home-search { /* override big top margin if needed; search-panel already fine */ }

.home-grid {
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.25rem;
  position: relative;
}
.home-grid::before {
  /* subtle divider between the two columns */
  content: '';
  position: absolute;
  left: calc(1.35 / 2.35 * 100% - .25rem);
  top: 2rem; bottom: .5rem;
  width: 1px;
  background: var(--color-border);
  opacity: .6;
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-grid::before { display:none; }
}

.home-panel {
  /* airy: no card chrome — just rhythm from spacing */
  padding: 0;
}
.home-panel__head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: .75rem;
  padding: 0 .2rem;
}
.home-panel__head h3 { margin:.15rem 0 0; font-size:1.05rem; }
.home-panel__head .eyebrow { margin:0; }

/* Recent searches list */
.recent-list { display:flex; flex-direction:column; gap:.35rem; }
.recent-row {
  all: unset;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:.85rem;
  align-items:center;
  padding:.65rem .55rem;
  border-radius:10px;
  cursor:pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.recent-row:hover { background: var(--color-surface-muted); }
.recent-row:active { transform: scale(.995); }
.recent-row__ico {
  color: var(--color-brand-primary);
  font-size:.95rem;
  width:24px; height:24px;
  display:grid; place-items:center;
  background: rgba(13,148,136,0.10);
  border-radius:8px;
}
.recent-row__body { min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.recent-row__q {
  font-weight:600; color: var(--color-text-primary);
  font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-row__filters { display:flex; flex-wrap:wrap; gap:.3rem; }
.recent-row__chip {
  font-size:.7rem;
  padding:.12rem .5rem;
  border-radius:999px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.recent-row__meta { text-align:right; display:flex; flex-direction:column; gap:.2rem; }
.recent-row__count { font-size:.82rem; color: var(--color-text-secondary); }
.recent-row__count strong { color: var(--color-text-primary); font-weight:600; }
.recent-row__when { font-size:.72rem; color: var(--color-text-tertiary, var(--color-text-secondary)); }

/* Archives at a glance */
.home-archives { display:flex; flex-direction:column; gap:.3rem; }
.home-archive {
  all: unset;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:.85rem;
  align-items:center;
  padding:.65rem .55rem;
  border-radius:10px;
  cursor:pointer;
  transition: background var(--transition-fast);
}
.home-archive:hover { background: var(--color-surface-muted); }
.home-archive__ico {
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  font-size:.95rem;
}
.home-archive__name { font-weight:600; color: var(--color-text-primary); font-size:.9rem; }
.home-archive__meta { font-size:.78rem; color: var(--color-text-secondary); margin-top:.1rem; }

/* Home quota indicator in search panel */
.home-quota {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; color: var(--color-text-secondary);
  cursor: default;
}
.home-quota__label strong { color: var(--color-text-primary); font-weight:600; }
.home-quota__bar {
  width: 90px; height: 6px;
  background: var(--color-surface-muted);
  border-radius: 999px; overflow: hidden;
  border: 1px solid var(--color-border);
}
.home-quota__fill {
  display:block; height:100%;
  background: var(--color-brand-gradient);
  border-radius: 999px;
  transition: width .3s ease;
}
.home-quota__fill.is-warning { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.home-quota__plan {
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .68rem; font-weight:700; letter-spacing:.04em;
  color: var(--color-brand-deep);
  background: rgba(13,148,136,0.10);
  border: 1px solid rgba(13,148,136,0.25);
}
[data-theme="dark"] .home-quota__plan {
  color: #5de1d6;
  background: rgba(94,225,214,0.12);
  border-color: rgba(94,225,214,0.3);
}

/* ============ Modern card ============ */
.modern-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.modern-card h3 { margin-bottom: .25rem; }
.card-row {
  display:flex; align-items:center; gap:1rem; padding:.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.card-row:last-child { border-bottom: 0; padding-bottom:0; }
.card-row:first-child { padding-top:0; }

/* ============ Search panel ============ */
.search-panel {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.search-bar {
  display:flex; align-items:center; gap:.75rem;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: 999px;
  padding: .85rem 1.2rem;
  font-size: 1rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.search-bar:focus-within { border-color: var(--color-brand-primary); }
.search-bar i { color: var(--color-text-secondary); }
.search-bar input { flex:1; background:transparent; border:none; outline:none; font: inherit; color: var(--color-text-primary); }
.search-bar input::placeholder { color: var(--color-text-muted); }
.search-bar kbd {
  font-family: var(--font-family-mono);
  font-size: .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--color-text-secondary);
}
/* Clear-search (x) button inside the bar */
.search-bar__clear {
  all: unset; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: var(--color-text-muted);
  transition: color .12s ease, background .12s ease;
}
.search-bar__clear:hover { color: var(--color-text-primary); background: color-mix(in oklch, var(--color-text-primary) 6%, transparent); }
.search-bar__clear i { font-size: 1rem; }

/* Clear-filters chip inside the bar — visible only when filters > 0 */
.search-bar__clear-filters {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all .12s ease;
}
.search-bar__clear-filters:hover {
  color: #dc2626; border-color: color-mix(in oklch, #dc2626 35%, var(--color-border));
  background: color-mix(in oklch, #dc2626 6%, var(--color-surface));
}
.search-bar__clear-filters i { font-size: .8rem; }

/* Primary CTA on the right side of the bar */
.search-bar__cta {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  background: var(--color-brand-primary); color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 4px 10px -4px color-mix(in oklch, var(--color-brand-primary) 50%, transparent);
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.search-bar__cta:hover { background: color-mix(in oklch, var(--color-brand-primary) 92%, #000); }
.search-bar__cta:active { transform: translateY(1px); }
.search-bar__cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Ghost variant — used on list screens where CTA toggles a filter panel
   rather than submits an action. Less visual weight than the primary blue. */
.search-bar__cta--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.search-bar__cta--ghost:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong, var(--color-border));
}
.search-bar__cta--ghost.is-active {
  background: color-mix(in oklch, var(--color-brand-primary) 10%, transparent);
  color: var(--color-brand-primary);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
}
.search-bar__cta--ghost i { color: currentColor !important; }

/* Active-filter count badge inside the ghost CTA */
.search-bar__cta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--color-brand-primary); color: #fff;
  font-size: .65rem; font-weight: 600; margin-left: .15rem;
}
/* Icon color — explicit white so it reads against the brand fill.
   Bootstrap Icons default to `currentColor`, but some global rule in
   airy.css darkens `.search-bar i` — this wins by specificity. */
.search-bar__cta i { font-size: .85rem; color: #fff; }

/* Hide the esc kbd on small screens when CTA takes priority */
.search-bar__kbd { /* kbd already styled by .search-bar kbd */ }
@media (max-width: 900px) {
  .search-bar__kbd, .search-bar__clear-filters { display: none; }
}

.filter-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 1rem; }
.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem; border-radius:999px;
  font-size:.8rem; font-weight:500;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  border:1px solid var(--color-border);
  cursor:pointer;
}
.chip i { font-size:.85rem; }
.chip.active { background: rgba(37,99,235,0.10); color: var(--color-brand-primary); border-color: rgba(37,99,235,0.25); }
/* Right-aligned cluster in the filter chips row */
.filter-chips__right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .65rem;
}
/* "Clear all" chip — ghost-destructive */
.chip.chip--clear-all {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px dashed var(--color-border);
  transition: all .12s ease;
}
.chip.chip--clear-all:hover {
  color: #dc2626; border-color: color-mix(in oklch, #dc2626 45%, var(--color-border));
  background: color-mix(in oklch, #dc2626 5%, transparent);
  border-style: solid;
}
.chip.chip--clear-all i { font-size: .7rem; }
.chip .x { opacity:.6; margin-left:.2rem; }

/* ============ Email card ============ */
.email-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1.25rem; }
.email-card {
  display:grid; grid-template-columns: 36px 1fr auto;
  gap:1rem; padding: 1rem 1.25rem;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.email-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.email-card.active { border-color: var(--color-brand-primary); }
.email-card .avatar {
  width:36px; height:36px; border-radius:999px;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem;
}
.email-card .body { min-width:0; }
.email-card .row1 { display:flex; align-items:baseline; gap:.5rem; }
.email-card .from { font-weight:600; color: var(--color-text-primary); font-size:.95rem; }
.email-card .to { color: var(--color-text-secondary); font-size:.8rem; }
.email-card .subject { font-weight:600; color: var(--color-text-primary); margin-top:.15rem; }
.email-card .subject mark { background: rgba(37,99,235,0.18); color: inherit; padding:0 2px; border-radius:3px; }
.email-card .snippet { color: var(--color-text-secondary); font-size:.85rem; margin-top:.25rem; line-height:1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.email-card .snippet mark { background: rgba(6,182,212,0.18); color: inherit; padding:0 2px; border-radius:3px; }
.email-card .right { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.email-card .when { font-size:.75rem; color: var(--color-text-muted); white-space:nowrap; }
.email-card .att { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; color: var(--color-text-secondary); background: var(--color-surface-muted); padding: 2px 8px; border-radius:999px; }

/* ============ Status pills ============ */
.status-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .75rem; border-radius:999px;
  font-size:.78rem; font-weight:600;
  background: var(--color-neutral-bg); color: var(--color-text-secondary);
}
.status-pill--success    { background: var(--color-success-bg);    color: var(--color-success); }
.status-pill--processing { background: var(--color-processing-bg); color: var(--color-processing); }
.status-pill--warning    { background: var(--color-warning-bg);    color: var(--color-warning); }
.status-pill--danger     { background: var(--color-danger-bg);     color: var(--color-danger); }

/* ============ Buttons (unified system) ============ */
/*
  The system:
    btn-primary   — brand gradient, the ONE main CTA per screen
    btn-secondary — white surface + border, default non-primary action
    btn-ghost     — transparent text button, for cancels / tertiary
    btn-danger    — destructive only
    btn-sm        — compact modifier for inline rows
*/
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.25rem; border-radius:999px;
  font-family: inherit; font-size:.88rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-transform:none;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn i { font-size: 1em; }

/* Primary — softer shadow so it reads as confident, not loud */
.btn-primary {
  background: var(--color-brand-gradient);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(13,148,136,0.45);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px -6px rgba(13,148,136,0.55);
  transform: translateY(-1px);
}

/* Secondary — canonical non-primary action. Calm neutral hover (subtle fill +
   slightly stronger border), not a brand-colored link highlight. */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Ghost — text only */
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* Danger */
.btn-danger {
  background: #dc2626; color:#fff;
  box-shadow: 0 4px 14px -6px rgba(220,38,38,0.50);
}
.btn-danger:hover:not(:disabled) {
  background:#b91c1c;
  box-shadow: 0 6px 18px -6px rgba(220,38,38,0.60);
  transform: translateY(-1px);
}

/* Deprecated aliases — keep legacy markup working while code is unified */
.btn-outline { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-outline:hover:not(:disabled) { color: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.btn--primary { background: var(--color-brand-gradient); color:#fff; box-shadow: 0 4px 14px -6px rgba(13,148,136,0.45); }
.btn--primary:hover:not(:disabled) { box-shadow: 0 6px 18px -6px rgba(13,148,136,0.55); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* Sizes */
.btn-sm { padding:.4rem .85rem; font-size:.8rem; gap:.4rem; }
.btn-lg { padding:.85rem 1.6rem; font-size:.95rem; }

/* ============ Icon buttons (unified) ============ */
/*
  Single class `.icon-btn` for any icon-only button.
  Modifiers: --sm, --danger, --active (for toggles), --solid (brand-filled)
  `.icon-chip` is a legacy alias kept working via this same base.
*/
.icon-btn, .icon-chip {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid transparent;
  border-radius:10px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor:pointer;
  flex-shrink:0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.icon-btn i, .icon-chip i { font-size: 1rem; line-height: 1; }
.icon-btn:hover, .icon-chip:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.icon-btn:active, .icon-chip:active { transform: scale(.95); }
.icon-btn:disabled, .icon-chip:disabled { opacity:.4; cursor:not-allowed; }

.icon-btn--sm, .icon-chip--sm { width:30px; height:30px; border-radius:8px; }
.icon-btn--sm i, .icon-chip--sm i { font-size:.85rem; }

.icon-btn--danger:hover, .icon-chip.danger:hover {
  color:#dc2626;
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.25);
}

.icon-btn--active, .icon-btn.is-active {
  color: var(--color-brand-primary);
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.25);
}

/* ============ Modal (delete confirm) ============ */
.modal-backdrop {
  position:fixed; inset:0; z-index:100;
  background: rgba(15,23,42,0.44);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  animation: mbFade .18s ease-out both;
}
[data-theme="dark"] .modal-backdrop { background: rgba(2,6,23,0.6); }
@keyframes mbFade { from { opacity:0; } to { opacity:1; } }

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 28px 80px -20px rgba(15,23,42,0.35);
  padding: 1.6rem 1.7rem;
  width: min(520px, 100%);
  animation: modalIn .22s cubic-bezier(.32,.72,.3,1) both;
}
@keyframes modalIn { from { opacity:0; transform: translateY(8px) scale(.98); } to { opacity:1; transform: none; } }

.delete-modal__head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
.delete-modal__ico {
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(220,38,38,0.12);
  color:#dc2626;
  font-size:1.15rem;
}
.delete-modal__head h3 { margin:0 0 .3rem; font-size:1.15rem; font-weight:600; color: var(--color-text-primary); }
.delete-modal__head p  { margin:0; font-size:.88rem; color: var(--color-text-secondary); line-height:1.5; }

.delete-modal__facts {
  display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem;
  padding:.75rem .9rem; margin-bottom:1rem;
  background: var(--color-surface-muted); border-radius:12px;
  border: 1px solid var(--color-border);
}
.delete-modal__facts > div { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.delete-modal__facts span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-tertiary, var(--color-text-secondary)); }
.delete-modal__facts strong { font-size:.88rem; color: var(--color-text-primary); }
.delete-modal__facts code { font-size:.78rem; color: var(--color-text-primary); font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.delete-modal__label { display:block; font-size:.82rem; color: var(--color-text-secondary); margin-bottom:.45rem; }
.delete-modal__label code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--color-surface-muted);
  padding:.08rem .4rem; border-radius:6px;
  color: var(--color-text-primary); font-size:.82rem;
  border:1px solid var(--color-border);
}
.delete-modal__input {
  width:100%; box-sizing:border-box;
  padding:.7rem .85rem;
  border:1px solid var(--color-border-strong);
  border-radius:10px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.9rem;
  transition: border-color .15s, box-shadow .15s;
}
.delete-modal__input:focus { outline:none; border-color:#dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.delete-modal__input.is-valid { border-color:#16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

.delete-modal__foot { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem; }

/* ============ Upload dropzone ============ */
.upload-dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-hero);
  padding: 2.5rem;
  text-align:center;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.upload-dropzone:hover { border-color: var(--color-brand-primary); }
.upload-dropzone .ico {
  width:64px; height:64px; border-radius:20px;
  background: rgba(37,99,235,0.10); color: var(--color-brand-primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom: 1rem;
}
.upload-dropzone h3 { font-size:1.15rem; margin-bottom:.4rem; }
.format-pills { display:inline-flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; justify-content:center; }
.format-pills span {
  font-family: var(--font-family-mono); font-size:.75rem;
  padding: .35rem .8rem; border-radius:999px;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  border:1px solid var(--color-border);
}

/* ============ Usage progress ============ */
.usage-progress {
  height: 8px; border-radius:999px;
  background: var(--color-surface-muted);
  overflow:hidden;
}
.usage-progress > span {
  display:block; height:100%;
  background: var(--color-brand-gradient);
  border-radius:999px;
}

/* ============ Data table ============ */
.table-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.table-card__head {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.data-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table thead th {
  text-align:left;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-text-secondary); font-weight:600;
  padding: .85rem 1.75rem;
  background: var(--color-surface-muted);
}
.data-table tbody td { padding: 1rem 1.75rem; border-top: 1px solid var(--color-border); color: var(--color-text-primary); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--color-surface-muted); }
.cell-mono { font-family: var(--font-family-mono); color: var(--color-text-secondary); font-size:.8rem; }
.btn-table-action {
  width:32px; height:32px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent; border:1px solid var(--color-border);
  color: var(--color-text-secondary); cursor:pointer;
  margin-left:.25rem;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.btn-table-action:hover { color: var(--color-brand-primary); border-color: var(--color-brand-primary); background: rgba(37,99,235,0.06); }
.btn-table-action.danger:hover { color: var(--color-danger); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }

/* ============ Results loading skeleton ============ */
/* Emails.razor renders .email-card--skeleton placeholders while a search is
   in flight. These classes previously had no styles at all, so the loading
   state collapsed to a stack of empty divs (EVE-2370). */
.email-card--skeleton { pointer-events: none; }
.skeleton-line {
  display: block; height: .7rem; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--color-surface-muted) 25%, var(--color-border) 50%, var(--color-surface-muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.email-card--skeleton .from { width: 32%; }
.email-card--skeleton .subject { width: 72%; margin-top: .5rem; }
.email-card--skeleton .snippet { width: 55%; margin-top: .45rem; }
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* ============ Email viewer (right pane) ============ */
.split { display:grid; grid-template-columns: 1fr 1.2fr; gap:1.5rem; align-items:start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* ── Desktop: list + reading pane scroll independently ──────────────────
   Lock the Emails page to the viewport height so the page itself never
   scrolls. The search panel stays fixed at the top and the list + reading
   pane each become their own scroll area. Scrolling the reading pane no
   longer moves the list, and scrolling the list no longer moves the reading
   pane. Scoped to wide viewports via :has(#emails-page) so every other page
   keeps normal document scroll; mobile keeps its full-screen viewer flow. */
@media (min-width: 1101px) {
  .app-shell:has(#emails-page) { height: 100vh; overflow: hidden; }
  .main:has(#emails-page) { min-height: 0; overflow: hidden; }

  .main:has(#emails-page) .layout-content-reveal {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
  }
  .main:has(#emails-page) .content {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }

  #emails-page {
    flex: 1 1 auto; min-height: 0;
    overflow: hidden;
    /* Reclaim the wrapper's tall bottom padding for the scroll area. */
    padding-bottom: 0;
  }

  #emails-page .split {
    flex: 1 1 auto; min-height: 0;
    align-items: stretch;
    padding-bottom: 1.5rem;
  }
  #emails-page .split > * {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    /* Room so the inner scrollbar doesn't sit flush against the card edge. */
    scrollbar-gutter: stable;
  }

  /* List pane: keep the pager pinned at the bottom and always visible.
     The pane itself doesn't scroll; only the list above the pager does. */
  #emails-page .split > .email-list-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-gutter: auto;
  }
  #emails-page .split > .email-list-pane > .email-list {
    flex: 1 1 auto;
    min-height: 0;
    /* `!important` defeats airy.css `.email-list { overflow: visible !important }`. */
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    margin-top: 0 !important;
  }
  #emails-page .split > .email-list-pane > .pagination {
    flex: 0 0 auto;
    margin-top: 0;
    background: var(--color-app-bg);
  }

  /* macOS-style overlay scrollbars: the thumb is invisible at rest and fades
     in while the pointer is over the scroll area (i.e. while wheel/trackpad
     scrolling). scrollbar-gutter:stable above reserves the track width so the
     content doesn't shift when the thumb appears. */
  #emails-page .split > .email-viewer,
  #emails-page .split > .email-list-pane > .email-list {
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: transparent transparent;
  }
  #emails-page .split > .email-viewer:hover,
  #emails-page .split > .email-viewer:focus-within,
  #emails-page .split > .email-list-pane > .email-list:hover,
  #emails-page .split > .email-list-pane > .email-list:focus-within {
    scrollbar-color: color-mix(in oklch, var(--color-text-primary) 28%, transparent) transparent;
  }
  #emails-page .split > .email-viewer::-webkit-scrollbar,
  #emails-page .split > .email-list-pane > .email-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  #emails-page .split > .email-viewer::-webkit-scrollbar-track,
  #emails-page .split > .email-list-pane > .email-list::-webkit-scrollbar-track {
    background: transparent;
  }
  #emails-page .split > .email-viewer::-webkit-scrollbar-thumb,
  #emails-page .split > .email-list-pane > .email-list::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 3px solid transparent;               /* inset the thumb from the edge */
    background-clip: content-box;
    border-radius: 999px;
    transition: background-color .25s ease;
  }
  #emails-page .split > .email-viewer:hover::-webkit-scrollbar-thumb,
  #emails-page .split > .email-list-pane > .email-list:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklch, var(--color-text-primary) 28%, transparent);
  }
  #emails-page .split > .email-viewer::-webkit-scrollbar-thumb:hover,
  #emails-page .split > .email-list-pane > .email-list::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklch, var(--color-text-primary) 45%, transparent);
  }
}

.email-viewer {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.email-viewer__head { padding: 1.5rem 1.75rem; border-bottom:1px solid var(--color-border); }
.email-viewer__subject { font-size:1.25rem; font-weight:700; }
.email-viewer__meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color: var(--color-text-secondary); margin-top:.5rem; }
.email-viewer__body {
  padding: 1.75rem;
  font-family: var(--font-family-base);
  font-size: .95rem; line-height:1.65; color: var(--color-text-primary);
  /* Wide HTML emails (fixed-width newsletters, big tables) scroll sideways
     instead of being clipped by the column. Normal prose still wraps. */
  overflow-x: auto;
  overflow-wrap: break-word;
}
.email-viewer__body p { color: var(--color-text-primary); margin: 0 0 1rem; }
/* Keep inline media within the column so ordinary emails don't force a
   horizontal scrollbar; only genuinely wide block content (tables, <pre>)
   triggers the sideways scroll above. */
.email-viewer__body img,
.email-viewer__body video,
.email-viewer__body svg { max-width: 100%; height: auto; }
.email-viewer__attachments { padding: 0 1.75rem 1.75rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.attachment-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius:999px;
  background: var(--color-surface-muted); border:1px solid var(--color-border);
  font-size:.8rem; color: var(--color-text-primary);
}
.attachment-pill i { color: var(--color-brand-primary); }

/* ============ Help menu ============ */
.help-wrap { position: relative; display: inline-flex; }
.help-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 48px -16px rgba(15,23,42,.18);
  z-index: 1000;
  overflow: hidden;
  animation: help-menu-in .14s ease-out;
}
@keyframes help-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-menu__head { padding: .85rem 1rem .5rem; }
.help-menu__title {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.help-menu__list { display: flex; flex-direction: column; padding: .25rem; }
.help-menu__item {
  all: unset; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .6rem .75rem; border-radius: 8px;
  transition: background .12s ease;
}
.help-menu__item:hover { background: var(--color-surface-muted); }
.help-menu__ico {
  color: var(--color-brand-primary); font-size: 1rem; width: 18px; text-align: center;
}
.help-menu__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-menu__label {
  font-weight: 600; font-size: .88rem; color: var(--color-text-primary);
  display: inline-flex; align-items: center; gap: .5rem;
}
.help-menu__sub { font-size: .75rem; color: var(--color-text-secondary); }
.help-menu__tag {
  font-size: .62rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--color-brand-primary); color: #fff;
  letter-spacing: .02em;
}
.help-menu__end {
  color: var(--color-text-muted); font-size: .8rem;
  display: inline-flex; align-items: center;
}
.help-menu__kbd, .sc-keys kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem; font-weight: 600;
  min-width: 22px; padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.help-menu__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: .72rem; color: var(--color-text-muted);
}
.help-menu__foot a {
  color: var(--color-text-secondary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.help-menu__foot .status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* ============ Help modal shell ============ */
.help-modal__backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 2rem;
  animation: help-fade .14s ease-out;
}
@keyframes help-fade { from { opacity: 0 } to { opacity: 1 } }
.help-modal {
  width: min(640px, 100%);
  max-height: calc(100vh - 4rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: help-pop .16s ease-out;
}
@keyframes help-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.help-modal__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.help-modal__head h3 {
  margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.help-modal__sub {
  margin: .25rem 0 0; font-size: .82rem; color: var(--color-text-secondary);
}
.help-modal__body { padding: 1.25rem 1.5rem 1.5rem; overflow: auto; }
.help-modal__foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* ============ Shortcuts ============ */
.sc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.sc-group__name {
  margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.sc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sc-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.sc-row:last-child { border-bottom: 0; }
.sc-label { font-size: .88rem; color: var(--color-text-primary); }
.sc-keys { display: inline-flex; align-items: center; gap: .25rem; }

/* ============ Feedback ============ */
.fb-kinds { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fb-kind {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-size: .82rem; font-weight: 500;
  transition: all .12s ease;
}
.fb-kind:hover { color: var(--color-text-primary); }
.fb-kind.is-sel {
  background: color-mix(in oklch, var(--color-brand-primary) 10%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
  color: var(--color-brand-primary);
}
.fb-kind i { font-size: .9rem; }
.fb-text {
  width: 100%; box-sizing: border-box;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit; font-size: .9rem; color: var(--color-text-primary);
  resize: vertical; min-height: 120px;
  transition: border-color .12s ease;
}
.fb-text:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand-primary) 15%, transparent);
}
.fb-meta { margin-top: .8rem; }
.fb-check {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--color-text-secondary);
  cursor: pointer;
}
.fb-sent { text-align: center; padding: 2rem 0; }
.fb-sent__ico {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklch, #22c55e 15%, var(--color-surface));
  color: #22c55e; font-size: 1.8rem;
  margin: 0 auto 1rem;
}
.fb-sent p { font-size: 1rem; color: var(--color-text-primary); font-weight: 500; margin: 0; }

/* ============ Changelog ============ */
.cl-list { display: flex; flex-direction: column; gap: 1.75rem; }
.cl-rel__head {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--color-border);
  margin-bottom: .75rem;
}
.cl-rel__v {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600; font-size: .95rem; color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.cl-rel__date { font-size: .78rem; color: var(--color-text-muted); }
.cl-rel__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--color-brand-primary) 15%, var(--color-surface));
  color: var(--color-brand-primary);
  margin-left: auto;
}
.cl-rel__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.cl-rel__items li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .88rem; color: var(--color-text-secondary);
  line-height: 1.5;
}
.cl-rel__items li::before {
  content: ''; position: absolute; left: 0; top: .55rem;
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--color-brand-primary);
}


/* ============ Manage saved searches modal ============ */
.manage-modal {
  width: min(640px, 100%);
  padding: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 4rem);
}
.manage-modal__head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.manage-modal__head h3 { margin:0; font-size:1.05rem; font-weight:600; color: var(--color-text-primary); }
.manage-modal__head p  { margin:.25rem 0 0; font-size:.82rem; color: var(--color-text-secondary); }
.manage-modal__close {
  background:transparent; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:8px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  display:grid; place-items:center;
  transition: background .15s, color .15s;
}
.manage-modal__close:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.manage-modal__body { padding: .8rem 1.5rem 1rem; overflow:auto; }

.manage-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.manage-row {
  display:grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap:.85rem;
  align-items:center;
  padding:.6rem .2rem;
  border-bottom: 1px solid var(--color-border);
}
.manage-row:last-child { border-bottom: none; }
.manage-row__reorder { display:flex; flex-direction:column; gap:2px; }
.manage-row__rbtn {
  background:transparent; border:1px solid transparent;
  width:20px; height:16px; border-radius:4px;
  display:grid; place-items:center; cursor:pointer;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size:.65rem;
  transition: background .12s, color .12s;
}
.manage-row__rbtn:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }
.manage-row__rbtn:disabled { opacity:.3; cursor:not-allowed; }

.manage-row__icon { color: var(--color-brand-primary); font-size:.9rem; }

.manage-row__body { min-width:0; }
.manage-row__name {
  font-size:.9rem; font-weight:500; color: var(--color-text-primary);
  cursor: text;
  display:flex; align-items:center; gap:.5rem;
}
.manage-row__name:hover { color: var(--color-brand-primary); }
.manage-row__badge {
  font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:.1rem .4rem; border-radius:4px;
  background: rgba(13,148,136,0.12); color: var(--color-brand-primary);
}
.manage-row__desc {
  font-size:.74rem; color: var(--color-text-secondary);
  margin-top:.15rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.manage-row__input {
  width:100%; font-size:.9rem; font-weight:500;
  padding:.3rem .5rem; border-radius:6px;
  border: 1px solid var(--color-brand-primary);
  background: var(--color-surface);
  color: var(--color-text-primary);
  outline:none;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.manage-row__count {
  font-size:.78rem; color: var(--color-text-tertiary, var(--color-text-secondary));
  font-variant-numeric: tabular-nums;
}
.manage-row__actions { display:flex; gap:.15rem; }
.manage-row__abtn {
  background:transparent; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:6px;
  display:grid; place-items:center;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  transition: background .12s, color .12s;
}
.manage-row__abtn:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.manage-row__abtn--danger:hover { background: rgba(220,38,38,0.1); color:#dc2626; }

.manage-new {
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem .85rem;
  border: 1px dashed var(--color-border-strong);
  border-radius:10px;
  margin-top: 1rem;
  background: var(--color-surface-muted);
}
.manage-new i { color: var(--color-text-tertiary, var(--color-text-secondary)); }
.manage-new input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:.88rem; color: var(--color-text-primary);
}
.manage-new input::placeholder { color: var(--color-text-tertiary, var(--color-text-secondary)); }
.manage-new__cta {
  background: var(--color-brand-primary); color:#fff; border:none;
  padding:.4rem .9rem; border-radius:999px;
  font-size:.78rem; font-weight:500; cursor:pointer;
  transition: opacity .15s;
}
.manage-new__cta:disabled { opacity:.4; cursor:not-allowed; }

.manage-modal__foot {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: 0 0 16px 16px;
}
.manage-modal__hint { font-size:.75rem; color: var(--color-text-secondary); }

/* ==========================================================================
   Provider Connect & Migration UI  (EVE-2158)
   ========================================================================== */

/* ── Reverse trial banner (EVE-2286) ── */
.pro-trial-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  margin: 0 1.5rem 1rem;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  flex-wrap: wrap;
}
.pro-trial-banner__icon { font-size: 1.25rem; flex-shrink: 0; }
.pro-trial-banner__text {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.pro-trial-banner__cta { flex-shrink: 0; white-space: nowrap; }
.pro-trial-banner--active {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--color-brand-primary) 7%, var(--color-surface)) 0%,
    color-mix(in oklch, var(--color-brand-accent) 7%, var(--color-surface)) 100%);
  border-color: color-mix(in oklch, var(--color-brand-primary) 20%, var(--color-border));
}
.pro-trial-banner--active .pro-trial-banner__icon { color: var(--color-brand-primary); }
.pro-trial-banner--expired {
  background: color-mix(in oklch, var(--mud-palette-warning, #ed6c02) 10%, var(--color-surface));
  border-color: color-mix(in oklch, var(--mud-palette-warning, #ed6c02) 35%, var(--color-border));
}
.pro-trial-banner--expired .pro-trial-banner__icon { color: var(--mud-palette-warning, #ed6c02); }

/* ── Connect page: layout ── */
.connect-wrapper { max-width: var(--layout-app); margin: 0 auto; }

.provider-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 680px) {
  .provider-connect-grid { grid-template-columns: 1fr; }
}

/* ── Provider connect card ── */
.provider-connect-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.provider-connect-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--color-brand-primary) 30%, var(--color-border));
}

.provider-connect-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.provider-connect-card__logo--gmail { background: rgba(255, 193, 7, 0.08); }
.provider-connect-card__logo--outlook { background: rgba(0, 120, 212, 0.08); }
.provider-connect-card__logo svg { width: 32px; height: 32px; }

.provider-connect-card__body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--color-text-primary);
}
.provider-connect-card__body p {
  font-size: .9rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.provider-connect-card__scopes {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.provider-connect-card__scopes li {
  font-size: .82rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.provider-connect-card__scopes li i {
  color: var(--color-success);
  font-size: .9rem;
}

.provider-connect-card__action { margin-top: auto; }

/* ── Upgrade prompt (Free tier) ── */
.provider-connect-upgrade {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.provider-connect-upgrade__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.6rem;
  color: #fff;
}
.provider-connect-upgrade h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.provider-connect-upgrade p {
  color: var(--color-text-secondary);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.provider-connect-upgrade__free-note {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-top: 1.25rem !important;
}

/* ── Alternative path + privacy notice ── */
.provider-connect-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-size: .88rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.provider-connect-privacy {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-alert);
  padding: .9rem 1.1rem;
  font-size: .82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.provider-connect-privacy i {
  color: var(--color-brand-primary);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.provider-connect-privacy p { margin: 0; }

/* ── Connected / progress page ── */
.provider-sync-card {
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.provider-sync-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 1rem;
}

.provider-connect-next-steps { max-width: 640px; margin: 0 auto; }
.provider-connect-next-steps h3 {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
}
.provider-connect-next-steps__grid { display: flex; flex-direction: column; gap: .5rem; }

.provider-next-step-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.provider-next-step-card:hover {
  background: var(--color-surface-muted);
  border-color: color-mix(in oklch, var(--color-brand-primary) 25%, var(--color-border));
  transform: translateX(2px);
}
.provider-next-step-card > i:first-child {
  font-size: 1.1rem;
  color: var(--color-brand-primary);
  width: 36px;
  height: 36px;
  background: color-mix(in oklch, var(--color-brand-primary) 8%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.provider-next-step-card div { flex: 1; min-width: 0; }
.provider-next-step-card strong { display: block; font-size: .92rem; }
.provider-next-step-card span { font-size: .8rem; color: var(--color-text-secondary); }
.provider-next-step-card__arrow { color: var(--color-text-muted); font-size: .9rem; flex-shrink: 0; }

/* ── Google Drive import card (EVE-2423) ── */
.drive-import-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.drive-import-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--color-brand-primary) 30%, var(--color-border));
}
.drive-import-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.provider-connect-card__logo--drive { background: rgba(66, 133, 244, 0.08); }
.provider-connect-card__logo--onedrive { background: rgba(0, 120, 212, 0.08); }
.provider-connect-card__logo--mailbox {
  background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
  color: var(--color-brand-primary);
}
.provider-connect-card__logo--mailbox i { font-size: 1.4rem; }
.drive-import-card__body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--color-text-primary);
}
.drive-import-card__body p {
  font-size: .9rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.drive-import-card__alert { margin: 0; }
.drive-import-card__action { align-self: flex-start; }

.drive-import-card__results {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.drive-import-result {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: .85rem;
}
.drive-import-result strong { display: block; color: var(--color-text-primary); }
.drive-import-result span { color: var(--color-text-secondary); font-size: .8rem; }
.drive-import-result.is-success i { color: var(--color-success); }
.drive-import-result.is-error {
  border-color: color-mix(in oklch, var(--color-danger, #e74c3c) 30%, var(--color-border));
  background: color-mix(in oklch, var(--color-danger, #e74c3c) 6%, var(--color-surface-muted));
}
.drive-import-result.is-error i { color: var(--color-danger, #e74c3c); }
.drive-import-result.is-error span { color: var(--color-danger, #e74c3c); }

.drive-import-card__progress {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.drive-import-card__privacy { margin: 0; }

/* ── ProviderSyncProgress component ── */
.provider-sync-progress {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.provider-sync-progress__loading,
.provider-sync-progress__error {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  color: var(--color-text-secondary);
}
.provider-sync-progress__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.provider-sync-progress__provider-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}
.provider-sync-progress__info { flex: 1; min-width: 0; }
.provider-sync-progress__provider-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.provider-sync-progress__email {
  font-size: .8rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.provider-sync-progress__status-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}
.provider-sync-progress__chip { height: 20px !important; font-size: .72rem !important; }
.provider-sync-progress__status-text {
  font-size: .83rem;
  color: var(--color-text-secondary);
}
.provider-sync-progress__bar-wrap { display: flex; flex-direction: column; gap: .4rem; }
.provider-sync-progress__bar-stats {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--color-text-secondary);
}
.provider-sync-progress__complete,
.provider-sync-progress__failed {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.provider-sync-progress__complete strong,
.provider-sync-progress__failed strong { display: block; font-size: .92rem; }
.provider-sync-progress__complete p,
.provider-sync-progress__failed p {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--color-text-secondary);
}
.provider-sync-progress__error-detail {
  font-size: .8rem;
  color: var(--color-danger);
  margin: .2rem 0 0 !important;
}

/* ── Provider icon (shared between pages) ── */
.provider-icon { display: block; }
.provider-icon--sm { width: 28px !important; height: 28px !important; }

/* ── Settings: Connections section ── */
.settings-connections-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  flex-wrap: wrap;
}
.settings-connections-empty__icon {
  font-size: 1.6rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.settings-connections-empty div { flex: 1; min-width: 0; }
.settings-connections-empty strong { display: block; font-size: .9rem; }
.settings-connections-empty p { margin: .2rem 0 0; font-size: .82rem; color: var(--color-text-secondary); }

.settings-connections-list { display: flex; flex-direction: column; }

.settings-connection-row {
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
}
.settings-connection-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  padding: 6px;
  flex-shrink: 0;
}
.settings-connection-row__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.settings-connection-row__body strong { font-size: .9rem; color: var(--color-text-primary); }
.settings-connection-row__email { font-size: .8rem; color: var(--color-text-secondary); }
.settings-connection-row__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .15rem;
}
.settings-connection-row__meta span:not(.status-pill) { font-size: .78rem; color: var(--color-text-muted); }
.settings-connection-row__actions { flex-shrink: 0; }

.settings-connections-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .85rem;
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.settings-connections-note i { color: var(--color-brand-primary); flex-shrink: 0; margin-top: .05rem; }

/* ── Status pills for connections (extending existing .status-pill pattern) ── */
.status-pill--info {
  background: var(--color-processing-bg);
  color: var(--color-processing);
  border-color: color-mix(in oklch, var(--color-processing) 30%, transparent);
}
.status-pill--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: color-mix(in oklch, var(--color-danger) 30%, transparent);
}