/* Elinno Agent — shared styles
   Built against the Elinnovation Style Guide.
   Clash Grotesk falls back to Space Grotesk if not loaded. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Mada:wght@200..900&display=swap');

:root {
  /* Colors */
  --color-bg-dark: #121215;
  --color-bg-light: #fff;
  --color-bg-soft: #f7f7f7;
  --color-bg-wash: #f0ebff;
  --color-brand: #6234fc;
  --color-brand-tint: rgba(98, 52, 252, 0.1);
  --color-brand-tint-strong: #f0ebff;            /* v1.3 mockup token; matches --color-bg-wash */
  --color-text-dark: #000;
  --color-text-body: #4f4f4f;
  --color-text-muted: #888;
  --color-text-placeholder: #a5a5a5;
  --color-text-inverse: #fff;
  --color-border: #e0e0e0;
  --color-field-bg: #eaeaea;
  --color-error: #ff0083;                        /* v1.1/v1.2 form-msg-error semantic; retained */

  /* v1.3 status tokens (Block 12.1) — text + bg + border per mockup _app.css.
     Decision P: added alongside the v1.2 tokens; v1.2 --color-error stays for
     the existing form-msg-error / btn-danger rules. */
  --color-success: #1d8a52;                      /* v1.3 success text (darker than v1.2's #4dd388 → better contrast) */
  --color-success-bg: rgba(77, 211, 136, 0.15);  /* v1.3 success container bg */
  --color-warning: #8a6500;                      /* v1.3 warning text */
  --color-warning-bg: rgba(255, 193, 61, 0.18);  /* v1.3 warning container bg */
  --color-warning-border: rgba(255, 193, 61, 0.40); /* v1.3 warning container border (mirrors --color-danger-border pattern; mockup _app.css omitted this, added here for .paused-banner) */
  --color-danger: #b3144b;                       /* v1.3 danger text (distinct from v1.2 --color-error pink) */
  --color-danger-bg: rgba(179, 20, 75, 0.04);    /* v1.3 danger container bg */
  --color-danger-border: rgba(179, 20, 75, 0.20); /* v1.3 danger container border */

  /* Glass */
  --glass-nav: rgba(0, 0, 0, 0.3);
  --glass-blur-nav: blur(3.5px);

  /* Type — fall back to Space Grotesk if Clash isn't loaded.
     NOTE (2026-05-31): family names were previously 'clight'/'cregular'/
     'cmedium'/'csemibold' — a typo, with no matching @font-face anywhere in
     the repo, so the app silently fell back to Space Grotesk. Pointed at the
     real loaded family 'Clash Grotesk' (matches styles.css). Weight is applied
     per-rule via font-weight, so all four aliases share one family. */
  --font-light: 'Clash Grotesk', 'Space Grotesk', system-ui, sans-serif;
  --font-regular: 'Clash Grotesk', 'Space Grotesk', system-ui, sans-serif;
  --font-medium: 'Clash Grotesk', 'Space Grotesk', system-ui, sans-serif;
  --font-semibold: 'Clash Grotesk', 'Space Grotesk', system-ui, sans-serif;

  /* Layout */
  --container-max: 1230px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;

  /* Motion */
  --t-fast: 0.1s ease-out;
  --t-form: 0.3s linear;
  --t-card: 0.7s;
}

/* ---------- Canonical breakpoints (convention, not tokens) ----------
   CSS media queries can't read custom properties, so these can't be real
   var()s — treat the list below as the source of truth and reuse these
   exact values rather than inventing new ones per page:
     700px  — primary layout boundary (matches sticky-topbar.js mobileMQ);
              two-column shells collapse, app nav switches to mobile.
     480px  — auth-card / fine card adjustments.
     360px  — tested minimum width (no horizontal scroll at or above this).
   Mobile-first: author base styles for ~360px, layer up with min-width.
   -------------------------------------------------------------------- */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Lock zoom: allow scroll/pan but no pinch-zoom (Android/Chrome honor this;
     iOS is handled by /_lib/no-zoom.js). Prevent iOS text auto-inflation too. */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 140%;
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* no-horizontal-scroll backstop; real fixes target the sources */
}
a { color: var(--color-brand); text-decoration: none; transition: opacity var(--t-form); }
a:hover { opacity: 0.8; }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

.custom-container {
  max-width: var(--container-max);
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/* ---------- Auth pages: dark hero layout ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-bg-dark);
  padding: 40px 15px;
  overflow: hidden;
}

/* Soft purple radial wash on the dark hero */
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(98, 52, 252, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(98, 52, 252, 0.25), transparent 50%);
  z-index: 0;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  padding: 45px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.auth-eyebrow {
  color: var(--color-brand);
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.auth-eyebrow-line {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-brand);
  margin: 0 0 24px;
}

.auth-heading {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 32px;
  line-height: 110%;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.auth-sub {
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 140%;
  margin: 0 0 28px;
}

/* ---------- Form fields (light variant) ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 13px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  background: var(--color-field-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  color: var(--color-text-dark);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 100%;
  transition: var(--t-form);
}
.field input::placeholder { color: var(--color-text-placeholder); }
.field input:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--color-brand);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 18px 24px;
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 100%;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter var(--t-form), background var(--t-form), color var(--t-form);
}
.btn-primary {
  background: var(--color-brand);
  color: #fff;
  width: 100%;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--color-text-body);
}
.btn-ghost:hover:not(:disabled) { color: var(--color-brand); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  padding: 10px 14px;
  font-size: 12px;
}
.btn-danger:hover:not(:disabled) { background: var(--color-error); color: #fff; }

/* ---------- Auth-page footer row ---------- */
.auth-foot {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-regular);
  font-size: 14px;
  color: var(--color-text-body);
}
.auth-foot a { color: var(--color-brand); }

/* ---------- Form messages ---------- */
.form-msg {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 140%;
}
.form-msg.error {
  background: rgba(255, 0, 131, 0.08);
  color: var(--color-error);
  border: 1px solid rgba(255, 0, 131, 0.3);
}
.form-msg.success {
  background: rgba(77, 211, 136, 0.1);
  color: #1f7a4d;
  border: 1px solid rgba(77, 211, 136, 0.4);
}
.form-msg.hidden { display: none; }

/* ---------- Dashboard / app shell ---------- */
/* v1.3 (Block 12.1) — light-mode .app-nav per PRD §7.1(a) + §7.4.
   The v1.2 dark-glass treatment was a marketing-shell carry-over that
   read as an arbitrary dark stripe over a light-grey body in the authed
   app. v1.3 inverts: white bg, thin bottom border, dark text. The brand
   E mark stays (existing .app-brand-mark rule if present). Site-wide
   propagation: every authed page shares this rule. */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}
.app-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.app-brand {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}
.app-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.app-nav-actions a {
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--t-form);
}
.app-nav-actions a:hover { color: var(--color-text-dark); }
.app-nav-actions .btn-nav {
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  color: var(--color-text-inverse);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-medium);
  font-size: 13px;
  text-transform: uppercase;
  transition: opacity var(--t-form);
}
.app-nav-actions .btn-nav:hover { opacity: 0.9; }

.app-main {
  background: var(--color-bg-soft);
  min-height: calc(100vh - 70px);
  padding: 70px 0;
}

.section-eyebrow {
  color: var(--color-brand);
  font-family: var(--font-medium);
  font-size: 14px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.section-line {
  display: block;
  width: 107px;
  height: 2px;
  background: var(--color-brand);
  margin: 0 0 24px;
}
.section-heading {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 45px;
  line-height: 110%;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.section-sub {
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 18px;
  line-height: 140%;
  margin: 0 0 40px;
  max-width: 640px;
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

/* ---------- Admin user table ---------- */
.users-table-wrap {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
table.users-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-regular);
  font-size: 14px;
}
.users-table th, .users-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.users-table thead th {
  background: var(--color-bg-soft);
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--color-bg-wash); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  font-family: var(--font-medium);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Add-user form (admin) ---------- */
.add-user-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr auto auto;
  gap: 12px;
  align-items: end;
}
.add-user-row .field { margin: 0; }
.add-user-row .check {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0;
  font-family: var(--font-regular);
  font-size: 14px;
  white-space: nowrap;
}
.add-user-row .btn { padding: 16px 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .auth-card { padding: 32px 24px; }
  .auth-heading { font-size: 26px; }
  .section-heading { font-size: 30px; }
  .add-user-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .users-table th, .users-table td { padding: 12px 14px; }
  .users-table .col-created { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Block 2 / Session 2 — projects list + create UI
   Net-new components per BLOCK_2_PLAN.md decisions N–U.
   No existing selectors are modified.
   ════════════════════════════════════════════════════════════════════ */

/* ---------- Section header with trailing CTA (e.g. "+ New project") ---------- */
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}
.section-head-row .section-sub { margin-bottom: 0; }
.section-head-row .head-actions {
  padding-bottom: 6px;
  flex-shrink: 0;
  margin-left: 24px;
}

/* ---------- Form additions: textarea, narrow form, action row, hint ---------- */
.field textarea {
  width: 100%;
  background: var(--color-field-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  color: var(--color-text-dark);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 140%;
  transition: var(--t-form);
  resize: vertical;
  min-height: 110px;
}
.field textarea::placeholder { color: var(--color-text-placeholder); }
.field textarea:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--color-brand);
}

.field-hint {
  color: var(--color-text-muted);
  font-family: var(--font-regular);
  font-size: 13px;
  margin: -2px 0 8px;
}

.form-narrow { max-width: 640px; }

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.form-actions .btn-primary { width: auto; }

.btn-primary.auto { width: auto; }

/* ---------- Projects grid + project card ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  cursor: pointer;
  transition: background var(--t-card), border-color var(--t-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}
.project-card:hover {
  background: var(--color-bg-wash);
  border-color: transparent;
}
.project-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-card);
}
.project-card:hover .project-card-icon { background: var(--color-brand); }
.project-card-icon svg path,
.project-card-icon svg circle {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.6;
  transition: stroke var(--t-card);
}
.project-card:hover .project-card-icon svg path,
.project-card:hover .project-card-icon svg circle { stroke: #fff; }

.project-card-name {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 22px;
  line-height: 110%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.project-card-desc {
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 145%;
  margin-top: 8px;
}
.project-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.project-card:hover .project-card-meta {
  border-top-color: rgba(98, 52, 252, 0.2);
}
.project-card-meta-item {
  color: var(--color-text-muted);
  font-family: var(--font-regular);
  font-size: 13px;
}

.badge.muted {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-body);
}

/* ---------- Skeleton loading state (decision P: 4 ghost cards) ---------- */
.project-card-skeleton {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}
.skeleton-shape {
  background: linear-gradient(
    90deg,
    var(--color-border) 0%,
    var(--color-bg-soft) 50%,
    var(--color-border) 100%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-shape.icon   { width: 56px; height: 56px; border-radius: var(--radius-md); }
.skeleton-shape.title  { height: 20px; width: 70%; }
.skeleton-shape.line   { height: 14px; }
.skeleton-shape.line.short  { width: 50%; }
.skeleton-shape.line.medium { width: 75%; }
.skeleton-shape.line.full   { width: 100%; }

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ---------- State card — empty / error / unauthorized ----------
   Used by:
     • projects.html   empty (admin / non-admin) and error overlay (decision P)
     • projects/new.html unauthorized state (decision O)
   Reused in Session 3+ for the same four-state pattern on chat / members tabs. */
.state-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.state-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-brand-tint);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.state-card-heading {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 18px;
  line-height: 110%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.state-card-body {
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 145%;
  margin: 0;
  max-width: 420px;
}
.state-card-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.state-card-actions .btn { width: auto; }

/* ---------- Mobile floor (≤700px) — decision R ---------- */
@media (max-width: 700px) {
  .section-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .section-head-row .head-actions {
    margin-left: 0;
    padding-bottom: 0;
  }
  .section-head-row .head-actions .btn,
  .section-head-row .head-actions .btn-primary,
  .section-head-row .head-actions .btn-primary.auto {
    width: 100%;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .state-card {
    padding: 40px 24px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shape { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Block 2 / Session 4 — project.html three-tab shell + chat UI
   Net-new components per BLOCK_2_PLAN.md decisions V–AC.
   No existing selectors are modified. Mobile drawer (≤700px) appended
   to the existing media query at the bottom of this section.
   ════════════════════════════════════════════════════════════════════ */

/* ---------- Project shell — sidebar + main, single white card on soft-grey body ---------- */
.project-shell {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px 1fr;
  /* Lock the shell to (viewport − nav − app-main top+bottom padding) so
     long conversations scroll inside .chat-messages instead of the whole
     page. .app-main is 100vh-70px nav + 70px top/bottom padding, so the
     available height for the shell is 100vh − 210px. min-height keeps
     the layout usable on short viewports (page-level scroll falls back). */
  height: calc(100vh - 210px);
  min-height: 480px;
  position: relative;
}

.project-sidebar {
  background: var(--color-bg-soft);
  border-right: 1px solid var(--color-border);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
/* Independent scroll for the conversations list (sibling to the
   "Conversations" header). Without this, a long list overflows the
   now-height-locked .project-shell and the bottom rows are clipped. */
#convList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.project-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.project-sidebar-title {
  color: var(--color-text-muted);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.new-conv-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: var(--font-regular);
  line-height: 1;
  transition: background var(--t-form), color var(--t-form);
}
.new-conv-btn:hover { background: var(--color-brand); color: #fff; }
.new-conv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.new-conv-btn:disabled:hover { background: var(--color-brand-tint); color: var(--color-brand); }

/* Sidebar conversation rows (decision AB): two-line, ellipsized title + meta. */
.conv-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-body);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 130%;
  transition: background var(--t-form);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
}
.conv-item:hover { background: rgba(0, 0, 0, 0.04); }
.conv-item.active {
  background: var(--color-brand-tint);
  color: var(--color-brand);
  font-weight: 500;
}
.conv-item .conv-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item .conv-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-regular);
  font-weight: 400;
}
.conv-item.active .conv-meta { color: var(--color-brand); opacity: 0.7; }

/* ---------- Main pane: header (breadcrumb + name + tabs) + tab body ---------- */
.project-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* min-height: 0 lets #tabBody (and its flex:1 children) shrink below
     content size so .chat-messages can be the only scrollable surface. */
  min-height: 0;
}
.project-main-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-shrink: 0;
}
.project-header-left {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
}
.project-header-titles { min-width: 0; }
.project-breadcrumb {
  color: var(--color-text-muted);
  font-family: var(--font-regular);
  font-size: 13px;
  margin-bottom: 6px;
}
.project-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--t-form);
}
.project-breadcrumb a:hover { color: var(--color-brand); opacity: 1; }
.project-breadcrumb span {
  color: var(--color-text-dark);
}
.project-name-h {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 28px;
  line-height: 110%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
}

.project-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.project-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-form), color var(--t-form);
}
.project-tab:hover { background: rgba(0, 0, 0, 0.04); }
.project-tab.active {
  color: var(--color-brand);
  background: var(--color-brand-tint);
}

/* Tab body — flex column to inherit the main pane's vertical space; chat-area
   uses flex:1 inside this container to claim remaining room for the message scroll. */
#tabBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Chat surface ---------- */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 0;
  min-height: 0;
}
.chat-conv-title {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  padding-bottom: 24px;
  min-height: 0;
}
.chat-msg {
  display: flex;
  gap: 12px;
  max-width: 88%;
}
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.chat-msg.user .chat-msg-avatar {
  background: var(--color-brand);
  color: #fff;
}
.chat-msg.assistant .chat-msg-avatar {
  background: var(--color-bg-soft);
  color: var(--color-text-body);
  border: 1px solid var(--color-border);
}
.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.chat-msg.user .chat-msg-body { align-items: flex-end; }
.chat-msg-meta {
  color: var(--color-text-muted);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-msg-content {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 145%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-msg.user .chat-msg-content {
  background: var(--color-brand);
  color: #fff;
}
.chat-msg.assistant .chat-msg-content {
  background: var(--color-bg-soft);
  color: var(--color-text-dark);
}

/* Assistant 0-citation state (Block 5): agent answered honestly that it
   couldn't find anything. Italic + muted text signals no-source-cited
   without going as far as the error treatment. */
.chat-msg.assistant.muted .chat-msg-content {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Assistant error state (Block 5): model=null path — either an
   AnthropicError fallback (S21) or the zero-data-source short-circuit.
   Reuses the form-msg.error palette (.chat-error already does the same
   visually for composer-side errors). */
.chat-msg.assistant.error .chat-msg-content {
  background: rgba(255, 0, 131, 0.08);
  color: var(--color-error);
  border: 1px solid rgba(255, 0, 131, 0.3);
}

/* Citation rail (Block 5): chips below an assistant message linking to
   the source entities the answer cites. Each chip is a clickable
   anchor opening the source_url in a new tab. */
.chat-citation-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chat-citation {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-citation:hover {
  border-color: var(--color-brand);
  background: var(--color-bg-wash);
}
.chat-citation-noref {
  cursor: default;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}
/* Block 9.2 decisions D+F: freshness suffix on each chip. Always rendered
   (never hidden — decision F). Mildly dimmer than the title text so the
   relative timestamp reads as metadata. .chat-citation-stale = both
   source_updated_at and connection_last_sync_at were null. */
.chat-citation-freshness {
  opacity: 0.7;
}
.chat-citation-freshness.chat-citation-stale {
  font-style: italic;
  opacity: 0.55;
}

/* Block 10.2 decision F: AI-paused banner above the composer when the
   project's monthly cost cap is hit. Disabled state on the input +
   send button is handled JS-side; this is purely the visual notice.
   Reuses the existing form-msg.error tone (red text on red-tint
   background) for visual continuity with other "blocked" states. */
.ai-paused-banner {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.3);
  color: var(--color-error, #c62828);
  font-family: var(--font-regular);
  font-size: 13px;
  line-height: 1.4;
}

/* Block 10.1 decision C: ↻ Refresh & re-ask button on every assistant
   message's citation rail. Pill-shaped to harmonize with the citation
   chips next to it. Disabled-during-flight via [disabled] + in-flight
   class which softens the visual. */
.refresh-reask-button {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-brand);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  border: 1px solid var(--color-brand);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  margin-left: 4px;
}
.refresh-reask-button:hover {
  background: var(--color-brand-tint);
}
.refresh-reask-button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.refresh-reask-button[disabled] {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}
.refresh-reask-button.in-flight {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

/* Block 10.6 decision P: admin-only tool-call trace viewer. Collapsed
   <details> between the assistant message text and the citation rail.
   Compact: tool name + ✓ on success, ⚠️ + truncated error on failure.
   Args intentionally hidden in v1.1 (Block 11+ may add expand toggle).
   Render gated server-side via per-project admin role — non-admins
   receive tool_calls: null so the <details> never appears. */
.tool-trace {
  margin-top: 8px;
  font-family: var(--font-regular);
  font-size: 12px;
  color: var(--color-text-muted);
}
.tool-trace > summary {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  display: inline-block;
  user-select: none;
  list-style: none;
}
.tool-trace > summary::-webkit-details-marker { display: none; }
.tool-trace > summary:hover {
  background: var(--color-bg-wash);
}
.tool-trace > ul {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 8px 12px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-trace > ul > li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}
.tool-trace-name {
  font-family: var(--font-mono, monospace);
  color: var(--text);
}
.tool-trace-result.ok {
  color: var(--color-success, #2e7d32);
}
.tool-trace-result.err {
  color: var(--color-error, #c62828);
  font-style: italic;
}

/* Block 9.3 decisions H + I + K: empty-state suggestion chips on fresh
   conversations. Source-gated (slack-only / jira-only / both / none).
   Chips fill the input on click (no auto-submit) per decision I; the
   'none' state shows a card pointing at the Connections tab. */
.chat-suggestions {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-suggestions-label {
  font-family: var(--font-regular);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chat-suggestions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.chat-suggestion {
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand);
  border: 1px solid transparent;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.chat-suggestion:hover {
  border-color: var(--color-brand);
  background: var(--color-bg-wash);
}
.chat-suggestions-empty {
  padding: 32px 24px;
  border-radius: var(--radius-card, 12px);
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.chat-suggestions-empty-title {
  font-family: var(--font-regular);
  font-size: 14px;
  color: var(--color-text-muted);
}
.chat-suggestions-empty-link {
  font-family: var(--font-regular);
  font-size: 14px;
  color: var(--color-brand);
  text-decoration: underline;
  cursor: pointer;
}

/* Block 9.1: fixed-position toast for Sync-now feedback (success / 429 /
   error). Outside #tabBody so renderTabBody re-renders don't wipe it. */
.conn-toast {
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 1000;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-regular);
  font-size: 13px;
  line-height: 1.4;
  max-width: 360px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: none;
}
.conn-toast-success {
  background: var(--color-bg-soft);
  color: var(--color-text-body);
  border: 1px solid var(--color-brand);
}
.conn-toast-warn {
  background: var(--color-bg-soft);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}
.conn-toast-info {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Block 9.1 decision O: activity drawer + table. Drawer is a sibling of
   .connection-row inside .connection-row-group so the row layout stays
   unchanged; drawer toggles via display:none/block. */
.connection-row-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.activity-drawer {
  margin-top: 8px;
  padding: 12px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-card, 12px);
  border: 1px solid var(--color-border);
  font-size: 13px;
}
.activity-loading,
.activity-empty {
  padding: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-regular);
  font-size: 12px;
}
.activity-table th,
.activity-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.activity-table th {
  color: var(--color-text-muted);
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
}
.activity-table tbody tr:last-child td {
  border-bottom: none;
}
.activity-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-family: var(--font-regular);
  text-transform: capitalize;
}
.activity-status-succeeded {
  background: rgba(16, 185, 129, 0.12);
  color: rgb(6, 95, 70);
}
.activity-status-failed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error);
}
.activity-status-running {
  background: rgba(245, 158, 11, 0.18);
  color: rgb(146, 64, 14);
  animation: activityPulse 1.4s ease-in-out infinite;
}
.activity-status-cancelled {
  background: var(--color-bg-wash);
  color: var(--color-text-muted);
}
.activity-counts {
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.activity-error {
  font-style: italic;
  color: var(--color-error);
}
@keyframes activityPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------- Composer ---------- */
.chat-composer {
  padding: 16px 0 28px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
/* Reuses .form-msg.error visual language — same error palette across the site. */
.chat-error {
  background: rgba(255, 0, 131, 0.08);
  color: var(--color-error);
  border: 1px solid rgba(255, 0, 131, 0.3);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-regular);
  font-size: 13px;
  line-height: 140%;
}
.chat-composer-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.chat-input {
  flex: 1;
  padding: 14px 16px;
  background: var(--color-field-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 140%;
  resize: none;
  min-height: 48px;
  max-height: 140px;
  transition: var(--t-form);
}
.chat-input:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--color-brand);
}
.chat-input::placeholder { color: var(--color-text-placeholder); }
.chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
.chat-send-btn {
  padding: 14px 22px;
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  height: 48px;
  transition: filter var(--t-form);
  flex-shrink: 0;
}
.chat-send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Placeholder tabs (decision Y) — center .state-card in tab body ---------- */
.tab-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.tab-placeholder .state-card {
  border: none;
  background: transparent;
  padding: 32px;
}

/* ---------- Mobile drawer (decision AA) — net-new for Session 4.
   Hamburger and backdrop are CSS-hidden above 700px (display:none default).
   The shell switches to single-column at the breakpoint and the sidebar
   becomes a slide-in absolute overlay over the main pane. ---------- */
.drawer-toggle {
  display: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 0;
}
.drawer-toggle span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--color-text-body);
}

.drawer-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* ---------- Mobile floor (≤700px) — appends to projects.html's existing rules ---------- */
@media (max-width: 700px) {
  .project-shell {
    grid-template-columns: 1fr;
    min-height: 560px;
    border-radius: var(--radius-md);
  }

  .project-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 85%;
    z-index: 2;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    border-right: 1px solid var(--color-border);
  }
  .project-shell.drawer-open .project-sidebar {
    transform: translateX(0);
  }
  .project-shell.drawer-open .drawer-backdrop {
    display: block;
    opacity: 1;
  }

  .drawer-toggle { display: inline-flex; }

  .project-main-header {
    padding: 18px 18px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .project-header-left {
    align-items: center;
    gap: 12px;
  }
  .project-name-h { font-size: 22px; }

  /* Tab strip horizontally scrolls if the three tabs overflow a narrow viewport.
     Scrollbar hidden — swipe to reach the third tab. Block 9 polish if anyone hits it. */
  .project-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .project-tabs::-webkit-scrollbar { display: none; }
  .project-tab {
    flex-shrink: 0;
    padding: 10px 14px;
  }

  .chat-area { padding: 20px 18px 0; }
  .chat-composer { padding: 12px 0 20px; }
  .chat-msg { max-width: 95%; }

  .tab-placeholder { padding: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   Block 2 / Sub-task 2.6 — members tab UI
   Net-new components per BLOCK_2_PLAN.md decisions D, L, M, Q, Y.
   No existing selectors are modified.
   ════════════════════════════════════════════════════════════════════ */

/* ---------- Tab count pill (decision Y, deferred from 2.5) ---------- */
.project-tab .tab-count {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-body);
}
.project-tab.active .tab-count {
  background: var(--color-brand);
  color: #fff;
}

/* ---------- Members tab body ---------- */
.members-area {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
}

/* Invite row — soft-grey panel matching the mockup screen-4 pattern.
   Field + button side-by-side at desktop; stacks below 700px. */
.invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  background: var(--color-bg-soft);
  padding: 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  align-items: end;
}
.invite-row .field { margin: 0; }
.invite-row .field input { background: #fff; }
.invite-row .field input:focus { background: rgba(0, 0, 0, 0.04); }
.invite-row .btn-primary { width: auto; padding: 16px 22px; }
.invite-row .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.invite-row .btn-primary:disabled:hover { filter: none; }
.invite-error {
  grid-column: 1 / -1;
  font-family: var(--font-regular);
  font-size: 13px;
  color: var(--color-error);
  margin-top: -4px;
}

.members-section-title {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}

/* Members list — white card. Decision Y referenced admin.html's table; we use
   a CSS-grid row pattern to match the mockup verbatim (.member-row with
   grid-template-columns). Visually equivalent, semantically distinct. */
.members-list {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.member-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--t-form);
}
/* Read-only view (non-admin members) — collapse the trailing Remove column. */
.member-row.read-only {
  grid-template-columns: auto 1fr auto;
}
.member-row:last-child { border-bottom: none; }
.member-row:hover { background: var(--color-bg-wash); }

.member-row .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
}
/* Self-row marker: solid-brand avatar (mockup line 1250). */
.member-row.you .avatar {
  background: var(--color-brand);
  color: #fff;
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.member-email {
  color: var(--color-text-dark);
  font-family: var(--font-regular);
  font-size: 15px;
  font-weight: 500;
  word-break: break-all;
}
.member-email .self {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 13px;
  margin-left: 4px;
}
.member-meta {
  color: var(--color-text-muted);
  font-family: var(--font-regular);
  font-size: 12px;
}

/* Disabled Remove (creator's row) — faded, no hover-fill. */
.btn-danger.member-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-danger.member-remove-btn:disabled:hover {
  background: transparent;
  color: var(--color-error);
}

/* Skeleton loading row — reuses the projects.html shimmer animation. */
.member-row-skeleton {
  height: 72px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(
    90deg,
    var(--color-bg-soft) 0%,
    #fff 50%,
    var(--color-bg-soft) 100%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.member-row-skeleton:last-child { border-bottom: none; }

/* ---------- Mobile floor (≤700px) — members tab ----------
   Invite row stacks. Member row drops the role badge to reclaim horizontal
   space for the email (only 320–375px content width on phone viewports);
   role info is redundant with the (you) marker on the creator's row in v1.1
   since promotion is deferred to Block 9 per decision M. Block 9 polish
   task if anyone misses the badge on mobile. */
@media (max-width: 700px) {
  .members-area { padding: 20px 18px; }

  .invite-row {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 12px;
  }
  .invite-row .btn-primary {
    width: 100%;
    padding: 14px 22px;
  }

  .member-row {
    grid-template-columns: auto 1fr auto;
    padding: 14px 16px;
    gap: 12px;
  }
  .member-row.read-only {
    grid-template-columns: auto 1fr;
  }
  .member-row .avatar { width: 36px; height: 36px; font-size: 12px; }
  .member-row .badge { display: none; }
  .member-email { font-size: 14px; }
  .member-meta { font-size: 11px; }
}

/* =========================================================================
   Block 4 commit 8 — Connections tab + channel picker modal
   ========================================================================= */

/* Tab content wrapper (used by Connections tab; can be reused if other
   tabs migrate from the .tab-placeholder pattern). */
.tab-content {
  padding: 24px 0;
}

.tab-loading {
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
}

/* Single connection row (one per source). v1.1 only Slack ships, but the
   shape is connector-agnostic so Block 6/7/8 can drop in additional rows. */
.connection-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--bg);
}

.connection-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.connection-source {
  font-weight: 600;
  font-size: 15px;
}

.connection-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pill — derived UI state; see L's locked rule about
   selected_channel_id-driven "needs setup" not being a schema status. */
.connection-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.connection-pill.pill-setup {
  background: var(--color-warn-bg, #fff4e5);
  color: var(--color-warn, #b06a00);
}
.connection-pill.pill-active {
  background: var(--color-success-bg, #e6f4ea);
  color: var(--color-success, #1e7e34);
}
.connection-pill.pill-syncing {
  background: var(--color-info-bg, #e6f0ff);
  color: var(--color-info, #1f5fbf);
}

.connection-actions {
  display: flex;
  gap: 8px;
}

/* Channel-picker modal. Body-level overlay; shows on top of the project
   shell when openChannelPicker() flips display from none to default.
   Click-outside (backdrop) and the close button both call
   closeChannelPicker(); Escape is bound on document while open. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: min(520px, 90vw);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.modal-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--color-text-muted);
}
.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
}

.channel-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.channel-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.channel-list-item:hover {
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
  border-color: var(--color-border);
}

.channel-list-name {
  font-weight: 500;
}

.channel-list-tag {
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-info-bg, #e6f0ff);
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 700px) {
  .connection-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .connection-actions {
    justify-content: flex-end;
  }
  .modal-content { width: 95vw; max-height: 90vh; }
}


/* =========================================================================
   Block 12.2 — v1.3 cross-project components (per PRD §7.3 + §7.4)
   =========================================================================
   Purely additive — no existing selectors modified beyond decision P's
   token adds in 12.1. Each component below is referenced from one or more
   of the v1.3 mockups in ~/Downloads/mockups_v1_3/. Verification gallery
   at /_dev/components.html renders each in isolation.
   ========================================================================= */

/* ---------- §7.4 (a) Existing-component splits ---------- */

/* PRD §7.4: .project-card splits into .marketing (existing heavy "specialcard"
   pattern, used for + New CTAs and empty-state cards) and .data (new lighter
   pattern, used on dashboard and projects list). Modifier classes carry the
   weight; the base .project-card selector stays unchanged so v1.2 surfaces
   that haven't migrated continue to render via the existing rule. */
.project-card.data {
  padding: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  border-radius: 12px;
  transition: background var(--t-form), border-color var(--t-form);
}
.project-card.data:hover {
  background: var(--color-brand-tint-strong);
  border-color: rgba(98, 52, 252, 0.20);
}

/* PRD §7.4: .app-heading is the v1.3 screen-level heading at 20-24px (vs.
   the marketing-scale .section-heading at 45px). Both coexist; pick by
   surface. Authed pages from 12.3 onwards use .app-heading. */
.app-heading {
  color: var(--color-text-dark);
  font-family: var(--font-medium);
  font-size: 22px;
  line-height: 115%;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.app-heading strong { font-weight: 700; }
.app-heading.large { font-size: 24px; }
.app-heading.small { font-size: 20px; }

/* ---------- §7.3 (2) .label-pill — function label ---------- */
/* Small uppercase brand-tint pill: "Product", "Finance".
   Used on cross-project chat cards (b), creation modal (c), chat
   headers (d/e), edit-scope modal (h). */
.label-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  background: var(--color-brand-tint);
  padding: 4px 9px;
  border-radius: 50px;
}

/* ---------- §7.3 (3) .source-chip — inline source name + logo ---------- */
/* Used in chat headers (d/e), card source rows (b), creation modal (c).
   The SVG/icon sits inline next to a small text label. */
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-body);
  font-weight: 500;
}
.source-chip.muted { color: var(--color-text-muted); }
.source-chip svg,
.source-chip img { flex-shrink: 0; }

/* ---------- §7.3 (4) .scope-summary — folder icon + count + names ---------- */
/* The "2 of 2 · Rain, Joni" pattern with a folder icon. Used on chat
   cards (b), dashboard cross-project strip (a), chat headers (d/e),
   edit-scope modal footer (h). */
.scope-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.scope-summary i,
.scope-summary svg { font-size: 12px; flex-shrink: 0; }
.scope-summary strong {
  color: var(--color-text-dark);
  font-weight: 500;
}

/* ---------- §7.3 (5) .spend-bar — workspace cap visualizer ---------- */
/* Progress bar with healthy/warning/exceeded variants. Used on workspace
   settings (f) and project-settings limits section (i.1). Track is
   neutral grey; fill color flips with the variant modifier. */
.spend-bar-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50px;
  overflow: hidden;
}
.spend-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: var(--color-success);
  transition: width var(--t-form);
}
.spend-bar.healthy  .spend-bar-fill { background: var(--color-success); }
.spend-bar.warning  .spend-bar-fill { background: var(--color-warning); }
.spend-bar.exceeded .spend-bar-fill { background: var(--color-danger);  }

/* Slim variant for inline use on project cards (i.1 General → Limits). */
.spend-bar.slim .spend-bar-track { height: 6px; }
.spend-bar.thin .spend-bar-track { height: 4px; }

/* ---------- §7.3 (6) .citation-chip-prefix — [Project Name] pill ---------- */
/* Small purple pill INSIDE a citation chip in cross-project mode. Mockup
   (e) renders it as a sibling of the citation title/timestamp. Single-
   project chats omit this entirely — preserves the v1.2 citation surface. */
.citation-chip-prefix {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  background: rgba(98, 52, 252, 0.12);
  padding: 2px 7px;
  border-radius: 50px;
  margin-right: 6px;
}

/* ---------- §7.3 (7) .tool-trace-badge — "How I got this · N tool calls" ---------- */
/* Click affordance below an agent answer (mockup e). Plain text + icon,
   not a hard-edged button. Hover lifts it to body-text color. */
.tool-trace-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color var(--t-form);
}
.tool-trace-badge:hover { color: var(--color-text-body); }
.tool-trace-badge i,
.tool-trace-badge svg { font-size: 12px; flex-shrink: 0; }

/* ---------- §7.3 (8) .paused-banner — cap-reached banner ---------- */
/* 2px amber-bordered banner with raise-cap CTA (mockup g). Uses the v1.3
   warning token family — including --color-warning-border added in 12.2
   (mockup _app.css omitted that token; see token declaration above). */
.paused-banner {
  background: rgba(255, 193, 61, 0.08);
  border: 2px solid var(--color-warning-border);
  border-radius: 12px;
  padding: 18px 20px;
}
.paused-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.paused-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.paused-banner-body { flex: 1; }
.paused-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin: 0 0 4px;
}
.paused-banner-text {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.5;
  margin: 0 0 12px;
}
.paused-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.paused-banner-actions .btn {
  font-size: 11px;
  padding: 7px 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.paused-banner-actions .btn-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
}
.paused-banner-actions .btn-warning:hover { opacity: 0.9; }
.paused-banner-actions .btn-quiet {
  background: transparent;
  color: var(--color-text-body);
  border: 1px solid var(--color-border);
}

/* ---------- §7.3 (1) .cross-project-chat-card — labeled chat card ---------- */
/* Used on the cross-project landing (b) and dashboard (a). Two variants:
   .live (active Product/Jira chat) and .locked-v2 (Finance/Monday, ships
   in v2.0). Internal layout: header (label-pill + status pill), source
   row, body description, scope-summary, footer (open CTA or locked label). */
.cross-project-chat-card {
  display: block;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-form), border-color var(--t-form);
}
.cross-project-chat-card.live:hover {
  background: var(--color-brand-tint-strong);
  border-color: rgba(98, 52, 252, 0.20);
}
.cross-project-chat-card.locked-v2 {
  background: var(--color-bg-soft);
  opacity: 0.85;
  cursor: not-allowed;
}
.cross-project-chat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cross-project-chat-card-status {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 50px;
}
.cross-project-chat-card-status.live {
  color: var(--color-success);
  background: var(--color-success-bg);
}
.cross-project-chat-card-status.v2 {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}
.cross-project-chat-card-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cross-project-chat-card-source-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.cross-project-chat-card.locked-v2 .cross-project-chat-card-source-icon {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-muted);
}
.cross-project-chat-card-body {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.45;
  margin: 0 0 14px;
}
.cross-project-chat-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
}
.cross-project-chat-card.locked-v2 .cross-project-chat-card-foot {
  border-top-color: rgba(0, 0, 0, 0.06);
}
.cross-project-chat-card-foot-cta {
  color: var(--color-brand);
  font-weight: 500;
}
.cross-project-chat-card-foot-meta {
  color: var(--color-text-muted);
}

/* Status pill (Live / v2.0) inside the card head. */
.status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 50px;
}
.status-pill.live {
  color: var(--color-success);
  background: var(--color-success-bg);
}
.status-pill.v2 {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

/* ---------- §7.3 (9) .picker-row — multi-column project picker row ---------- */
/* Variant 1 row from mockups (c) creation modal + (h) edit-scope modal.
   Stacked sprint metadata in the middle column, progress bar, right-
   aligned ticket stats. Selected state uses brand-tint-strong bg. */
.picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-bg-light);
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  transition: background var(--t-form);
}
.picker-row:first-child { border-top: none; }
.picker-row:hover { background: var(--color-bg-soft); }
.picker-row.selected { background: var(--color-brand-tint-strong); }
.picker-row.selected:hover { background: var(--color-brand-tint-strong); }

.picker-row-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  font-size: 11px;
}
.picker-row.selected .picker-row-checkbox {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-inverse);
}

.picker-row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.picker-row-info {
  flex: 1;
  min-width: 0;
}
.picker-row-name {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-text-dark);
}
.picker-row-sprint-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.picker-row-sprint-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-dark);
}
.picker-row-sprint-deadline {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-body);
}
.picker-row-sprint-deadline.urgent { color: var(--color-danger); }
.picker-row-sprint-deadline.healthy { color: var(--color-success); }

.picker-row-progress {
  max-width: 200px;
}
.picker-row-dates {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 3px;
  max-width: 200px;
}

.picker-row-stats {
  flex-shrink: 0;
  text-align: right;
}
.picker-row-stats-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 2px;
}
.picker-row-stat-num {
  font-size: 14px;
  font-weight: 600;
}
.picker-row-stat-num.done { color: var(--color-success); }
.picker-row-stat-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.picker-row-stats-total {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Mobile: collapse picker-row to stack stats below info. */
@media (max-width: 700px) {
  .picker-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .picker-row-info { width: 100%; order: 3; }
  .picker-row-stats { order: 4; margin-left: auto; }
}

/* ════════════════════════════════════════════════════════════════════
   Block 13.0 — v1.4 design-system foundation
   Tokens + reusable components per BLOCK_13_DECISIONS.md and the
   v1.4 mockup set at ~/Downloads/elinno-agent-v1.3-screens/.

   Decision 5 (token naming): bare-noun tokens are the source of
   truth for v1.4+ component CSS. Legacy --color-* tokens above
   keep their existing values; the two namespaces coexist. Where
   values coincide (--brand vs --color-brand), one token is the
   value-holder and the other is left at its existing literal so
   no v1.1/v1.2/v1.3 surface shifts visually.

   Nothing in this section modifies an existing selector or token;
   purely additive.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — bare-noun source of truth (matches design-system.css). */
  --brand: #6234fc;
  --brand-strong: #5126d6;       /* active text on lavender */
  --brand-tint: #f0ebff;         /* active fill / role-admin pill bg */
  --brand-hair: #d9cdff;         /* eyebrow hair-rule, focus ring outer */
  --brand-soft: #f7f5ff;         /* read-only chip fill, menu hover */
  --brand-soft-border: #e9e2ff;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #fcfcfd;          /* input bg */
  --bg-card-tint: #fcfbff;
  --hero-bg: #1a1530;            /* the single dark surface in the light app */

  /* Borders */
  --border: #e6e6e6;             /* 0.5px hairline */
  --border-soft: #f0f0f0;
  --border-input: #e0e0e0;

  /* Text — v1.4 palette (slightly different from legacy --color-text-* by design) */
  --text: #121215;
  --text-2: #5a5a5a;
  --text-3: #9a9a9a;
  --text-faint: #bbbbbb;

  /* Status */
  --success: #1d8a52;
  --success-tint: #eaf7ef;
  --amber-text: #8a6500;
  --amber-dot: #d9a300;
  --amber-tint: #fffdf6;
  --amber-border: #f0e4c4;
  --danger: #b3144b;
  --danger-tint: rgba(179, 20, 75, 0.04);   /* danger container bg (promoted from legacy --color-danger-bg) */
  --danger-border: rgba(179, 20, 75, 0.20); /* danger container border (promoted from legacy --color-danger-border) */

  /* Source brand glyph chips (simplified marks, NOT trademarked logos). */
  --jira-chip: #f4f6fb;
  --jira-chip-border: #e3e9f5;
  --jira-text: #1a4b8c;
  --slack-chip: #faf5fb;
  --slack-chip-border: #efddf0;
  --slack-text: #5a2160;

  /* Radii — v1.4 scale (legacy --radius-* stays for current screens) */
  --r-lg: 16px;                  /* cards */
  --r-md: 13px;                  /* inner cards, surfaces */
  --r-sm: 9px;                   /* buttons, inputs */
  --r-pill: 50px;
  --r-bubble: 11px;              /* chat message bubbles */

  /* Font alias — points at the existing Clash Grotesk stack. */
  --font: var(--font-regular);
}

/* ────────────────────────────────────────────────────────────────────
   Eyebrow — uppercase label + short hair-rule. Used as a section
   divider across v1.4 surfaces. Pairs the brand purple label with a
   48px lavender hair line.
   ──────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.eyebrow__label {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
}
.eyebrow__rule {
  display: block;
  height: 1px;
  width: 48px;
  background: var(--brand-hair);
}

/* ────────────────────────────────────────────────────────────────────
   Brand mark — the half-circle glyph + uppercase wordmark used in
   the v1.4 login hero and authed top bars. .brandmark--light flips
   it for dark surfaces.
   ──────────────────────────────────────────────────────────────────── */
.brandmark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.4px solid var(--brand);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.brandmark::after {
  content: "";
  position: absolute;
  inset: 2px 2px 2px 50%;
  background: var(--brand);
  border-radius: 0 50px 50px 0;
}
.brandmark--light { border-color: #fff; }
.brandmark--light::after { background: #fff; }
.wordmark {
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────────────────
   Surface — bare-bones white-bordered card primitive. The v1.4
   equivalent of the legacy .card (which has 32px padding + thicker
   border baked in). Consumers add padding inline per use case. The
   --padded modifier adds the mockup default 18px.
   ──────────────────────────────────────────────────────────────────── */
.surface {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
}
.surface--lg { border-radius: var(--r-lg); }
.surface--padded { padding: 18px; }
.surface--tint { background: var(--bg-card-tint); }

/* ────────────────────────────────────────────────────────────────────
   Pill — status + role + neutral variants.
   - .pill--role-admin (brand-tint + brand-strong text)
   - .pill--role-member (neutral grey)
   - .pill--status-active (green; Connected, Active)
   - .pill--status-amber (amber; Needs-setup, Invited)
   - .pill--status-danger (danger tint)
   Use .pill__dot for the optional leading dot.
   ──────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill--role-admin {
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.pill--role-member {
  background: #f4f4f4;
  color: var(--text-2);
}
.pill--status-active {
  background: var(--success-tint);
  color: var(--success);
}
.pill--status-amber {
  background: var(--amber-tint);
  color: var(--amber-text);
  border: 0.5px solid var(--amber-border);
}
.pill--status-amber .pill__dot { background: var(--amber-dot); }
.pill--status-danger {
  background: rgba(179, 20, 75, 0.06);
  color: var(--danger);
}

/* ────────────────────────────────────────────────────────────────────
   Password field — input + Generate helper link + show/hide eye.
   Used in Admin create (10), Reset password (13), Reset-password
   admin modal (10). All toggling and generation are JS — this is
   the visual shell only.

   Structure (BEM-ish):
     .password-field
       .password-field__label-row
         label.password-field__label
         button.password-field__generate
       .password-field__input-wrap
         input.password-field__input (type=password)
         button.password-field__eye (toggles input.type)
       .password-field__hint (optional)
   ──────────────────────────────────────────────────────────────────── */
.password-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.password-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.password-field__label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.password-field__generate {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.password-field__generate:hover { color: var(--brand-strong); }
.password-field__generate:disabled {
  color: var(--text-3);
  cursor: not-allowed;
}
.password-field__input-wrap {
  position: relative;
}
.password-field__input {
  width: 100%;
  padding: 10px 38px 10px 13px;
  border: 0.5px solid var(--border-input);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.password-field__input::placeholder { color: var(--text-3); }
.password-field__input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg);
}
.password-field__eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.password-field__eye:hover { color: var(--text-2); background: var(--brand-soft); }
.password-field__eye i { font-size: 16px; }
.password-field__hint {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-3);
}

/* ────────────────────────────────────────────────────────────────────
   Confirm modal — extends the existing .modal shell with focus-trap
   + focus-restore behavior (see public/_lib/confirm-modal.js) and a
   type-to-confirm destructive variant.

   Markup (the .modal + .modal-backdrop + .modal-content shell from
   the Block 4 modal is reused; add the .confirm class on .modal for
   the v1.4 sizing/layout and .confirm--danger for the type-to-confirm
   destructive variant):

     <div class="modal confirm" role="dialog" aria-modal="true">
       <div class="modal-backdrop"></div>
       <div class="modal-content">
         <div class="modal-header">
           <h3 class="modal-heading">…</h3>
           <button class="modal-close">×</button>
         </div>
         <div class="modal-body">
           <p class="confirm-modal__text">…</p>
           <!-- danger variant only: -->
           <p class="confirm-modal__type-prompt">Type <strong>NAME</strong> to confirm</p>
           <input class="confirm-modal__type-input" data-confirm-token="NAME">
           <div class="confirm-modal__actions">
             <button class="btn btn-ghost">Cancel</button>
             <button class="confirm-modal__confirm-danger" disabled>Delete</button>
           </div>
         </div>
       </div>
     </div>
   ──────────────────────────────────────────────────────────────────── */
.modal.confirm .modal-content {
  width: min(440px, 90vw);
  border-radius: var(--r-md);
  border: 0.5px solid var(--border);
  background: var(--bg);
}
.modal.confirm .modal-header {
  border-bottom: 0.5px solid var(--border-soft);
  padding: 16px 22px;
}
.modal.confirm .modal-heading {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.modal.confirm .modal-body {
  padding: 18px 22px 22px;
}
.confirm-modal__text {
  margin: 0 0 16px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}
.confirm-modal__type-prompt {
  margin: 4px 0 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-3);
}
.confirm-modal__type-prompt strong {
  color: var(--text);
  font-weight: 600;
}
.confirm-modal__type-input {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 16px;
  border: 0.5px solid var(--border-input);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}
.confirm-modal__type-input:focus {
  outline: none;
  border-color: var(--danger);
  background: var(--bg);
}
.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Mobile: bottom-sheet for confirm modals (centered desktop / sheet phone). */
@media (max-width: 700px) {
  .modal.confirm {
    align-items: flex-end;
  }
  .modal.confirm .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-md) var(--r-md) 0 0;
    max-height: 85vh;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Inline-edit — turns a label into an input in place. Used for
   conversation rename + member-name edit. Purple focus ring matches
   the brand-hair token. JS toggles the .editing class.

   Markup:
     <span class="inline-edit" data-inline-edit>
       <span class="inline-edit__label">Current name</span>
       <input class="inline-edit__input" value="Current name">
       <button class="inline-edit__save" aria-label="Save"><i class="ti ti-check"></i></button>
     </span>
   ──────────────────────────────────────────────────────────────────── */
.inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.inline-edit__label {
  cursor: text;
  padding: 2px 6px;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  border: 0.5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.inline-edit__label:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
}
.inline-edit__input {
  display: none;
  padding: 2px 8px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-hair);
  min-width: 140px;
  max-width: 100%;
}
.inline-edit__save {
  display: none;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.inline-edit__save:hover { background: var(--brand-strong); }
.inline-edit.editing .inline-edit__label { display: none; }
.inline-edit.editing .inline-edit__input { display: inline-block; }
.inline-edit.editing .inline-edit__save { display: inline-flex; }

/* ────────────────────────────────────────────────────────────────────
   Overflow (⋯) menu — popover on desktop, bottom-sheet on mobile.
   Used by: per-row menus on conversations, members, admin users.

   Markup:
     <button class="kebab-btn" aria-haspopup="menu" aria-expanded="false">
       <i class="ti ti-dots"></i>
     </button>
     <div class="menu" role="menu" data-open="false">
       <button class="menu__item" role="menuitem">
         <i class="ti ti-pencil"></i> Rename
       </button>
       <div class="menu__divider"></div>
       <button class="menu__item menu__item--danger" role="menuitem">
         <i class="ti ti-trash"></i> Delete
       </button>
     </div>

   The menu is absolute-positioned by JS relative to its trigger.
   On mobile (≤700px), the rule below promotes it to a bottom-sheet.
   ──────────────────────────────────────────────────────────────────── */
.kebab-btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
  padding: 0;
}
.kebab-btn:hover { background: var(--brand-soft); color: var(--text-2); }
.kebab-btn[aria-expanded="true"] {
  background: var(--brand-tint);
  color: var(--brand);
}

.menu {
  position: absolute;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px;
  min-width: 200px;
  z-index: 100;
  display: none;
}
.menu[data-open="true"] { display: block; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  transition: background var(--t-fast);
}
.menu__item:hover:not(:disabled) { background: var(--brand-soft); }
.menu__item:disabled { color: var(--text-3); cursor: not-allowed; }
.menu__item i { font-size: 14px; flex-shrink: 0; color: var(--text-3); }
.menu__item:hover:not(:disabled) i { color: var(--brand); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger i { color: var(--danger); }
.menu__item--danger:hover:not(:disabled) {
  background: rgba(179, 20, 75, 0.06);
}
.menu__item--danger:hover:not(:disabled) i { color: var(--danger); }
.menu__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 2px;
}

/* Mobile: bottom-sheet menu. */
@media (max-width: 700px) {
  .menu[data-open="true"] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    min-width: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 12px 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  }
  .menu__item {
    padding: 14px 12px;
    font-size: 15px;
  }
  .menu__divider { margin: 6px 4px; }
}

/* ────────────────────────────────────────────────────────────────────
   Sticky top bar — progressive-enhancement hook classes added by
   public/_lib/sticky-topbar.js. The bar itself is already
   position: sticky via .app-nav (defined further up in this file);
   these rules just style the on-scroll affordances.

   - .is-lifted (desktop + mobile): subtle shadow, hairline border
     drops away.
   - .is-hidden (mobile only): translates the bar offscreen on
     scroll-down so the user reclaims viewport height; pulled back
     into view on scroll-up.
   ──────────────────────────────────────────────────────────────────── */
.app-nav {
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform 0.2s ease-out;
}
.app-nav.is-lifted {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-bottom-color: transparent;
}

@media (max-width: 700px) {
  .app-nav.is-hidden {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav {
    transition: none;
  }
  .app-nav.is-hidden {
    transform: none;
  }
}

/* ────────────────────────────────────────────────────────────────────
   v1.4 button family — BEM-style modifiers, sentence-case.
   Distinct from the legacy .btn-primary/.btn-ghost/.btn-danger
   (single-dash, uppercase, 14px, 8px radius) which stay in place for
   pre-v1.4 surfaces. The BEM double-dash names (.btn--primary etc.)
   never collide with the legacy single-dash names.

   Consumers opt in by combining the base .btn class with the v1.4
   modifier — e.g. <button class="btn btn--primary">Sign in</button>.
   The modifier selector overrides the legacy .btn rule's font-size
   / padding / text-transform / radius via cascade, so old buttons
   that only use .btn (no BEM modifier) keep their legacy look.
   ──────────────────────────────────────────────────────────────────── */
.btn--primary,
.btn--ghost,
.btn--danger {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  transition: filter var(--t-fast), background var(--t-fast), color var(--t-fast);
  width: auto;
}
.btn--primary {
  background: var(--brand);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn--ghost {
  background: var(--bg);
  color: var(--text-2);
  border: 0.5px solid var(--border);
}
.btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--brand-soft);
}
.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { filter: brightness(1.05); }
.btn--primary:disabled,
.btn--ghost:disabled,
.btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────────
   Confirm modal — destructive variant.
   .modal.confirm.confirm--danger uses a centered layout: an icon
   slot above the title (typically a Tabler alert-triangle in a
   danger-tinted rounded box), no top-bar × close, and centered
   body copy + prompt + input. Buttons stay right-aligned in the
   footer. Used by delete-project, remove-member, and any other
   destructive flow.

   Markup:
     <div class="modal confirm confirm--danger" role="dialog" aria-modal="true">
       <div class="modal-backdrop"></div>
       <div class="modal-content">
         <div class="modal-body">
           <div class="confirm-modal__icon"><i class="ti ti-alert-triangle"></i></div>
           <h3 class="confirm-modal__title">Delete Rain?</h3>
           <p class="confirm-modal__text">…</p>
           <p class="confirm-modal__type-prompt">Type <strong>Rain</strong> to confirm</p>
           <input class="confirm-modal__type-input" data-confirm-token="Rain" placeholder="Rain">
           <div class="confirm-modal__actions">
             <button class="btn btn--ghost" data-close-modal>Cancel</button>
             <button class="btn btn--danger" disabled>Delete project</button>
           </div>
         </div>
       </div>
     </div>
   ──────────────────────────────────────────────────────────────────── */
.modal.confirm.confirm--danger .modal-header { display: none; }
.modal.confirm.confirm--danger .modal-content {
  padding-top: 24px;
}
.modal.confirm.confirm--danger .modal-body {
  text-align: center;
  padding: 0 28px 22px;
}
.confirm-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(179, 20, 75, 0.10);
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 0 14px;
}
.modal.confirm.confirm--danger .confirm-modal__icon i { line-height: 1; }
.confirm-modal__title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}
.modal.confirm.confirm--danger .confirm-modal__text { text-align: center; }
.modal.confirm.confirm--danger .confirm-modal__type-prompt { text-align: center; }
.modal.confirm.confirm--danger .confirm-modal__type-input { text-align: center; }
.modal.confirm.confirm--danger .confirm-modal__actions {
  justify-content: flex-end;
  padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE HARDENING — added 2026-05-31 (mobile + consistency pass)
   Cross-cutting rules that every authed/auth page inherits. Page-local
   layout stacking lives in each page's own @media (max-width:700px).
   ════════════════════════════════════════════════════════════════════ */

/* Prevent iOS Safari from auto-zooming when a control is focused: any
   form control under 16px triggers it. 16px on mobile only — desktop
   keeps its smaller per-component sizing. Pairs with the viewport
   maximum-scale lock (which iOS ignores, so this is the real fix there). */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* Minimum 44×44 tap targets on touch viewports. min-height/width only
   grows controls that are smaller; it never shrinks a larger one, and
   inline padding overrides on individual buttons still apply on top. */
@media (max-width: 700px) {
  .btn,
  .btn--primary,
  .btn--ghost,
  .btn--danger,
  .btn-primary,
  .btn-ghost,
  .btn-danger {
    min-height: 44px;
  }
  .modal-close,
  .new-conv-btn,
  .chat-send-btn,
  .project-tab,
  [data-pw-eye] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* =========================================================================
   Block 16 — Sprint View (read-only Jira sprint dashboard tab)
   Ported from the v2 mockup (~/Downloads/files/sprint-view-mockup-v2.html).
   Tokens (--brand*, --success*, --amber*, --bg-subtle, --border-soft,
   --radius-*) already live in :root above; only the status-CATEGORY bar
   colors are new. Component classes are prefixed sv-* (plus .seg segmented
   control + .project-bar sticky chrome) — verified collision-free.
   ========================================================================= */
:root {
  --cat-new: #8b93a7;            /* status_category = new */
  --cat-prog: var(--brand);      /* status_category = indeterminate */
  --cat-done: var(--success);    /* status_category = done */
}

/* Segmented control (Sprint View / Chat switcher) */
.seg { display:inline-flex; background:var(--bg-subtle); border:1px solid var(--border); border-radius:11px; padding:3px; gap:3px; }
.seg-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; background:none; cursor:pointer; font-family:var(--font-medium); font-size:13.5px; color:var(--text-2); padding:8px 18px; border-radius:8px; white-space:nowrap; transition:background .12s,color .12s,box-shadow .12s; }
.seg-btn svg { width:16px; height:16px; }
.seg-btn:hover { color:var(--text); }
.seg-btn.active { background:var(--bg); color:var(--brand-strong); box-shadow:0 1px 3px rgba(26,21,48,.13); }
.seg-btn.active:hover { color:var(--brand-strong); }

/* Sticky project bar housing the segmented control */
.project-bar { position:sticky; top:0; z-index:45; background:var(--bg); border-bottom:1px solid var(--border); transition:box-shadow .2s ease; }
.project-bar.scrolled { box-shadow:0 6px 16px rgba(26,21,48,.07); }
.project-bar-inner { max-width:1230px; margin:0 auto; padding:8px 22px; display:flex; align-items:center; gap:18px; }
.project-bar .project-breadcrumb { padding:0; white-space:nowrap; }
.project-bar .project-tabs { flex:1; padding:0; }

/* Sprint View is full-width: collapse the sidebar and make the panel the
   single scrollable surface inside the height-locked .project-shell. The
   header stays pinned (it is flex-shrink:0 above the scroll area). */
.project-shell.sprint-mode { grid-template-columns: 1fr; }
.project-shell.sprint-mode .project-sidebar { display: none; }
.project-shell.sprint-mode #tabBody { overflow-y: auto; padding: 4px 32px 0; }
.project-shell.sprint-mode .project-main-header.scrolled { box-shadow: 0 6px 16px rgba(26,21,48,.07); }

/* Sprint panel */
/* width:100% gives a definite cross-size inside the column-flex #tabBody —
   without it, the `margin:0 auto` auto-margins suppress flex stretch and the
   dashboard shrinks to content width (narrow when issue list = flat "None"). */
.sv { width:100%; padding:4px 0 30px; max-width:980px; margin:0 auto; }
.sv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-top:18px; }
.sv-titlerow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sv-title { font-family:var(--font-semibold); font-size:26px; line-height:1.1; margin:0; }
.sv-pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-medium); font-size:12px; padding:4px 10px; border-radius:50px; background:var(--color-success-bg); color:var(--success); }
.sv-dot { width:7px; height:7px; border-radius:50%; background:var(--success); }
.sv-pill--over { background:#fdecea; color:#c5372b; }
.sv-pill--over .sv-dot { background:#e5493a; }
.sv-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px; color:var(--text-2); font-size:14px; }
.sv-meta svg { vertical-align:-2px; margin-right:4px; color:var(--text-3); }
.sv-sep { color:var(--text-faint); }
.sv-goal { color:var(--text-2); }
.sv-daysleft { flex:none; text-align:center; min-width:96px; background:var(--brand-tint); border:1px solid var(--brand-soft-border); border-radius:var(--radius-lg); padding:12px 16px; }
.sv-daysleft-num { font-family:var(--font-semibold); font-size:34px; line-height:1; color:var(--brand-strong); }
.sv-daysleft-lbl { font-family:var(--font-medium); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--brand-strong); margin-top:4px; }
.sv-daysleft--over { background:#fdecea; border-color:rgba(229,73,58,.35); }
.sv-daysleft--over .sv-daysleft-num, .sv-daysleft--over .sv-daysleft-lbl { color:#c5372b; }

.sv-progress { margin-top:20px; }
.sv-progress-track { height:8px; border-radius:50px; background:var(--border-soft); overflow:hidden; }
.sv-progress-fill { height:100%; border-radius:50px; background:var(--brand); }
.sv-progress-fill--over { background:#e5493a; }
.sv-progress-lbl { margin-top:7px; color:var(--text-3); font-size:12.5px; }
.sv-progress-lbl--over { color:#c5372b; }

.sv-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
.sv-stat { position:relative; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-subtle); padding:14px 16px; }
.sv-stat-ic { position:absolute; top:13px; right:14px; width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.sv-stat-ic svg { width:14px; height:14px; }
.sv-stat-ic--total { background:rgba(98,52,252,.12); color:#6234fc; }
.sv-stat-ic--task { background:rgba(47,111,237,.12); color:#2f6fed; }
.sv-stat-ic--bug { background:rgba(229,73,58,.13); color:#e5493a; }
.sv-stat-ic--story { background:rgba(42,157,107,.15); color:#2a9d6b; }
.sv-stat-num { font-family:var(--font-semibold); font-size:22px; line-height:1; }
.sv-stat-lbl { margin-top:6px; color:var(--text-2); font-size:12.5px; }

.sv-card { margin-top:22px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg); padding:20px 24px 18px; }
.sv-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sv-card-title { font-family:var(--font-medium); font-size:16px; margin:0; }
.sv-card-sub { font-family:var(--font-regular); font-size:12px; color:var(--text-3); }

/* status-CATEGORY segmented bar */
.sv-catbar { display:flex; height:30px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.sv-catseg { display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-medium); font-size:12.5px; }
.sv-catseg--todo { background:var(--cat-new); } .sv-catseg--prog { background:var(--cat-prog); } .sv-catseg--done { background:var(--cat-done); }
.sv-catseg + .sv-catseg { box-shadow:inset 1.5px 0 0 rgba(255,255,255,.6); }
.sv-catkey { display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
.sv-catkey span { color:var(--text-2); font-size:12.5px; }
.sv-sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
.sv-sw--todo { background:var(--cat-new); } .sv-sw--prog { background:var(--cat-prog); } .sv-sw--done { background:var(--cat-done); }

/* raw board-status column chart */
.sv-chart { display:flex; align-items:flex-start; gap:18px; padding:0 4px; }
.sv-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.sv-bar-val { font-family:var(--font-semibold); font-size:15px; }
.sv-bartrack { height:180px; width:100%; max-width:64px; display:flex; align-items:flex-end; }
.sv-bar { width:100%; border-radius:7px 7px 0 0; min-height:6px; }
.sv-bar--new { background:var(--cat-new); } .sv-bar--ind { background:var(--cat-prog); } .sv-bar--don { background:var(--cat-done); }
.sv-bar-lbl { font-family:var(--font-medium); font-size:13px; line-height:1.25; text-align:center; }
.sv-bar-sub { font-family:var(--font-regular); font-size:11.5px; color:var(--text-3); margin-top:-4px; }

/* assignee workload */
.sv-wl { display:flex; flex-direction:column; gap:12px; }
.sv-wl-row { display:grid; grid-template-columns:150px 1fr 92px; align-items:center; gap:14px; }
.sv-wl-name { display:flex; align-items:center; gap:9px; font-size:13.5px; }
.sv-wl-av { width:24px; height:24px; border-radius:50%; background:var(--brand-tint); color:var(--brand-strong); font-family:var(--font-medium); font-size:11px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sv-wl-av.un { background:var(--border-soft); color:var(--text-3); }
.sv-wl-track { height:22px; border-radius:6px; background:var(--border-soft); overflow:hidden; }
.sv-wl-fill { height:100%; display:flex; overflow:hidden; }
.sv-wl-seg { height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-medium); font-size:11.5px; min-width:0; }
.sv-wl-seg--todo { background:var(--cat-new); } .sv-wl-seg--prog { background:var(--cat-prog); } .sv-wl-seg--done { background:var(--cat-done); }
.sv-wl-num { text-align:right; font-size:12.5px; color:var(--text-2); }
.sv-wl-num b { font-family:var(--font-medium); color:var(--text); }

/* issue list filters + table */
.sv-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.sv-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-medium); font-size:12.5px; color:var(--text-2); border:1px solid var(--border); background:var(--bg); border-radius:50px; padding:6px 12px; cursor:pointer; }
.sv-chip.is-group { background:var(--brand-tint); border-color:var(--brand-soft-border); color:var(--brand-strong); }
.sv-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.sv-tbl th { text-align:left; font-family:var(--font-medium); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); padding:0 10px 9px; border-bottom:1px solid var(--border-soft); }
.sv-tbl td { padding:11px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.sv-tbl tr:last-child td { border-bottom:none; }
.sv-key { font-family:var(--font-medium); color:var(--brand-strong); white-space:nowrap; }
.sv-item { display:inline-flex; align-items:center; gap:9px; }
.sv-it-title { color:var(--text); }
.sv-spill { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-medium); font-size:12px; padding:3px 9px; border-radius:50px; white-space:nowrap; }
.sv-spill .d { width:6px; height:6px; border-radius:50%; }
.sp-new { background:#eef0f4; color:#5c6473; } .sp-new .d { background:var(--cat-new); }
.sp-ind { background:var(--brand-tint); color:var(--brand-strong); } .sp-ind .d { background:var(--cat-prog); }
.sp-don { background:var(--color-success-bg); color:var(--success); } .sp-don .d { background:var(--cat-done); }
.sv-pts { font-family:var(--font-medium); color:var(--text); } .sv-pts.none { color:var(--text-faint); font-family:var(--font-regular); }
.sv-lbls { display:flex; gap:5px; flex-wrap:wrap; }
.sv-lbl { font-size:11px; color:var(--text-2); background:var(--bg-subtle); border:1px solid var(--border); border-radius:5px; padding:2px 7px; }
.sv-muted { color:var(--text-3); }
.sv-type-ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.sv-type-ic svg { width:16px; height:16px; }
.sv-type-ic--task { color:#2f6fed; } .sv-type-ic--bug { color:#e5493a; } .sv-type-ic--story { color:#2a9d6b; }
.sv-asg-name { font-family:var(--font-medium); font-size:13.5px; color:var(--text); }

.sv-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); color:var(--text-3); font-size:12px; display:flex; align-items:center; gap:6px; }
.sv-foot svg { color:var(--text-3); }

/* grouped issue cards */
.sv-group { margin-top:14px; border:1px solid var(--border); border-left-width:3px; border-radius:12px; overflow:hidden; }
.sv-groups > .sv-group:first-child { margin-top:2px; }
.sv-group--new { border-left-color:#8b93a7; } .sv-group--ind { border-left-color:var(--brand); } .sv-group--done { border-left-color:var(--success); }
.sv-group--story { border-left-color:#2a9d6b; } .sv-group--bug { border-left-color:#e5493a; } .sv-group--task { border-left-color:#2f6fed; }
.sv-group-head { display:flex; align-items:center; gap:9px; padding:11px 16px; background:var(--bg-subtle); border-bottom:1px solid var(--border-soft); }
.sv-group-n { color:var(--text-3); font-size:12.5px; }
.sv-group .sv-tbl { table-layout:fixed; width:100%; }
.sv-group .sv-tbl td { padding:9px 16px; vertical-align:middle; }
.sv-group .sv-tbl tr:not(:last-child) { border-bottom:1px solid var(--border-soft); }
.sv-group .sv-tbl td:nth-child(1) { width:124px; }
.sv-group .sv-tbl td.sv-it-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-group .sv-tbl td:nth-child(3) { width:172px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2); }

/* dropdown filter menus */
.sv-filterwrap { position:relative; display:inline-flex; }
.sv-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--bg); border:1px solid var(--border); border-radius:11px; box-shadow:0 12px 30px rgba(26,21,48,.14); padding:6px; z-index:20; }
.sv-filterwrap.open .sv-menu { display:block; }
.sv-filterwrap.open .sv-chip { border-color:var(--brand-soft-border); box-shadow:0 0 0 3px var(--brand-tint); }
.sv-menu-label { font-family:var(--font-medium); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); padding:7px 10px 5px; }
.sv-menu-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; font-size:13px; color:var(--text); cursor:pointer; }
.sv-menu-item:hover { background:var(--brand-soft,#f7f5ff); }
.sv-menu-item.sel { color:var(--brand-strong); font-family:var(--font-medium); }
.sv-mcheck { margin-left:auto; color:var(--brand); display:inline-flex; }
.sv-mcheck svg { width:15px; height:15px; }
.sv-cb { width:16px; height:16px; border:1.5px solid var(--border-input); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.sv-cb.on { background:var(--brand); border-color:var(--brand); }
.sv-cb svg { width:11px; height:11px; }
.sv-menu .sv-type-ic { width:16px; height:16px; }
.sv-sdot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }

/* empty state (no active sprint) */
.sv-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:72px 20px; }
.sv-empty-ic { width:56px; height:56px; border-radius:15px; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.sv-empty-title { font-size:18px; margin:0 0 8px; }
.sv-empty-text { color:var(--text-2); font-size:13.5px; max-width:380px; line-height:1.55; margin:0; }
.sv-error { color:var(--text-2); }

/* ---- Sprint View mobile ---- */
@media (max-width: 640px) {
  .project-bar-inner { padding:8px 14px; gap:0; }
  .project-bar .project-breadcrumb { display:none; }
  .seg { flex:1; }
  .seg-btn { flex:1; padding:11px 6px; font-size:13px; }
  .sv { max-width:none; margin:0; }
  .sv-head { flex-direction:column; align-items:stretch; gap:14px; }
  .sv-title { font-size:21px; }
  .sv-daysleft { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; padding:10px 14px; }
  .sv-daysleft-num { font-size:24px; }
  .sv-daysleft-lbl { margin-top:0; }
  .sv-stats { grid-template-columns:repeat(2,1fr); }
  .sv-card { padding:16px 16px 14px; }
  .sv-card-head { flex-direction:column; align-items:flex-start; gap:4px; }
  .sv-card-sub { font-size:11.5px; }
  .sv-catkey { flex-wrap:wrap; gap:8px 14px; }
  .sv-chart { gap:10px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .sv-col { flex:0 0 54px; }
  .sv-bartrack { height:130px; max-width:46px; }
  .sv-bar-val { font-size:13px; } .sv-bar-lbl { font-size:11px; min-height:2.5em; } .sv-bar-sub { font-size:10.5px; }
  .sv-wl-row { grid-template-columns:104px 1fr 30px; gap:10px; }
  .sv-wl-name { font-size:12.5px; gap:7px; }
  .sv-wl-av { width:20px; height:20px; font-size:10px; }
  /* grouped issues -> compact 2-line cards */
  .sv-group .sv-tbl, .sv-group .sv-tbl tbody { display:block; }
  .sv-group .sv-tbl tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42vw); gap:1px 10px; padding:9px 14px; }
  .sv-group .sv-tbl tr:not(:last-child) { border-bottom:1px solid var(--border-soft); }
  .sv-group .sv-tbl td { display:block; padding:0; border:none; width:auto; }
  .sv-group .sv-tbl td:nth-child(1) { grid-column:1; grid-row:1; }
  .sv-group .sv-tbl td:nth-child(3) { grid-column:2; grid-row:1; justify-self:end; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; color:var(--text-3); font-size:12px; }
  .sv-group .sv-tbl td.sv-it-title { grid-column:1 / -1; grid-row:2; min-width:0; overflow-wrap:anywhere; white-space:normal; overflow:visible; text-overflow:clip; color:var(--text-2); font-size:13px; margin-top:1px; }
  .sv-group { margin-top:12px; }
  .sv-group-head { padding:10px 14px; }
  /* flat (Group: None) table -> stacked cards, same as grouped */
  .sv-tbl--flat thead { display:none; }
  .sv-tbl--flat, .sv-tbl--flat tbody { display:block; }
  .sv-tbl--flat tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42vw); gap:2px 10px; padding:12px 2px; border-bottom:1px solid var(--border-soft); }
  .sv-tbl--flat tr:last-child { border-bottom:none; }
  .sv-tbl--flat td { display:block; padding:0; border:none; }
  .sv-tbl--flat td:nth-child(1) { grid-column:1; grid-row:1; }
  .sv-tbl--flat td:nth-child(3) { grid-column:2; grid-row:1; justify-self:end; }
  .sv-tbl--flat td.sv-it-title { grid-column:1 / -1; grid-row:2; min-width:0; overflow-wrap:anywhere; white-space:normal; color:var(--text-2); font-size:13px; margin-top:1px; }
  .sv-tbl--flat td:nth-child(4) { grid-column:1 / -1; grid-row:3; color:var(--text-3); font-size:12px; margin-top:2px; }
  .sv-menu { min-width:180px; }
  .sv-filters { flex-wrap:wrap; gap:8px 6px; }
  .sv-filters .sv-filterwrap { flex:none; }
  .sv-filters .sv-chip { font-size:12px; padding:5px 10px; }
  .sv-filters .sv-filterwrap:first-child { flex:0 0 100%; }
  .sv-filters .sv-filterwrap:last-child .sv-menu { left:auto; right:0; }
}