/* ══════════════════════════════════════════════════════════════════════════════
   psyn Company Portal — style.css
   Complete rewrite: 2026-03-10
   ══════════════════════════════════════════════════════════════════════════════ */

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

:root,
[data-theme="dark-default"] {
  --bg: #0e1117;
  --surface: #1a1f29;
  --surface-2: #222838;
  --surface-3: #2a3145;
  --border: #2d3548;
  --text: #e6e8eb;
  --text-2: #a8b0bf;
  --muted: #65737e;
  --accent: #3178c6;
  --accent-dim: rgba(49, 120, 198, 0.14);
  --success: #4dbb86;
  --warning: #e5a445;
  --error: #e05555;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
}

/* ── Dark themes ────────────────────────────────────────────────────────────── */

[data-theme="dark-midnight"] {
  --bg: #060d1a;
  --surface: #0d1526;
  --surface-2: #132038;
  --surface-3: #1a2a4a;
  --border: #1e3460;
  --accent: #5b8dee;
  --accent-dim: rgba(91,141,238,0.14);
  --muted: #4a607e;
  --text: #d0dff5;
  --text-2: #8ca5c8;
}

[data-theme="dark-forest"] {
  --bg: #070f0a;
  --surface: #0f1c14;
  --surface-2: #162518;
  --surface-3: #1e3022;
  --border: #264030;
  --accent: #3daa6b;
  --accent-dim: rgba(61,170,107,0.14);
  --muted: #4a6b53;
  --text: #d0f0da;
  --text-2: #8abd9a;
}

[data-theme="dark-purple"] {
  --bg: #0a070f;
  --surface: #14101c;
  --surface-2: #1e1828;
  --surface-3: #281f36;
  --border: #362945;
  --accent: #9b6dff;
  --accent-dim: rgba(155,109,255,0.14);
  --muted: #6b5585;
  --text: #e8d8ff;
  --text-2: #b49ed4;
}

[data-theme="dark-obsidian"] {
  --bg: #0c0b0a;
  --surface: #181614;
  --surface-2: #221f1c;
  --surface-3: #2c2825;
  --border: #3a3430;
  --accent: #f0a045;
  --accent-dim: rgba(240,160,69,0.14);
  --muted: #7a6e63;
  --text: #f2ede8;
  --text-2: #c0b8ae;
}

/* ── Light themes ───────────────────────────────────────────────────────────── */

[data-theme="light-clean"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e3e8ef;
  --border: #d1d8e0;
  --accent: #3178c6;
  --accent-dim: rgba(49,120,198,0.1);
  --muted: #8a97a8;
  --text: #1a202c;
  --text-2: #4a5568;
}

[data-theme="light-sky"] {
  --bg: #eef4fb;
  --surface: #f8fbff;
  --surface-2: #deedf8;
  --surface-3: #cde0f0;
  --border: #b8d0e8;
  --accent: #1a6fb5;
  --accent-dim: rgba(26,111,181,0.1);
  --muted: #6a8ba8;
  --text: #12253a;
  --text-2: #3a5a7a;
}

[data-theme="light-sand"] {
  --bg: #faf6f0;
  --surface: #fffcf8;
  --surface-2: #f5ede0;
  --surface-3: #ede0cc;
  --border: #d8c8a8;
  --accent: #b07030;
  --accent-dim: rgba(176,112,48,0.12);
  --muted: #9a8060;
  --text: #2a1a08;
  --text-2: #5a4030;
}

[data-theme="light-sage"] {
  --bg: #f0f5f1;
  --surface: #f8fbf8;
  --surface-2: #e0ece1;
  --surface-3: #ccdece;
  --border: #b0cbb2;
  --accent: #2a7a48;
  --accent-dim: rgba(42,122,72,0.1);
  --muted: #6a8a6e;
  --text: #0f2014;
  --text-2: #2e5235;
}

[data-theme="light-rose"] {
  --bg: #fdf2f5;
  --surface: #fff7f9;
  --surface-2: #fae0e8;
  --surface-3: #f5ccd8;
  --border: #e8b0c0;
  --accent: #c04070;
  --accent-dim: rgba(192,64,112,0.1);
  --muted: #a07080;
  --text: #280d18;
  --text-2: #6a2040;
}

/* ── Light theme global overrides ───────────────────────────────────────────── */

[data-theme^="light"] .chat-layout {
  background: radial-gradient(circle at top, var(--accent-dim), transparent 30%), var(--bg);
}
[data-theme^="light"] .chat-header {
  background: rgba(255,255,255,0.92);
}
[data-theme^="light"] .chat-input-bar {
  background: linear-gradient(180deg, transparent, var(--surface-2));
}
[data-theme^="light"] .chat-input-shell {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme^="light"] .msg-row.agent .msg-bubble {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme^="light"] .thinking-indicator {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}
[data-theme^="light"] .quick-actions {
  background: var(--surface-2);
}
[data-theme^="light"] .sidebar {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme^="light"] .msg-bubble pre {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme^="light"] .msg-bubble code {
  background: var(--surface-3);
}

/* ── Theme picker ───────────────────────────────────────────────────────────── */

.theme-picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.theme-picker-btn:hover {
  background: var(--surface-2);
  color: var(--text-2);
}
.theme-picker-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.theme-panel {
  position: fixed;
  bottom: 80px;
  left: 12px;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.theme-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.theme-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.theme-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-2);
  transition: border-color 0.15s, background 0.15s;
}
.theme-chip:hover {
  background: var(--surface-2);
}
.theme-chip.active {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-swatch {
  width: 32px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(128,128,128,0.2);
  position: relative;
  overflow: hidden;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

#app {
  height: 100%;
}

/* ── ─────────────────────────── LOGIN ────────────────────────────────── ── */

.login-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 32px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wordmark {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}
.wordmark .bracket {
  color: var(--muted);
}
.wordmark .p-char {
  color: var(--text);
}
.wordmark .syn {
  color: var(--accent);
}

.login-tagline {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.field-group input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.field-group input:focus {
  border-color: var(--accent);
}
.field-group input::placeholder {
  color: var(--muted);
}

.error-msg {
  background: rgba(224, 85, 85, 0.1);
  border: 1px solid rgba(224, 85, 85, 0.3);
  border-radius: var(--radius-xs);
  color: var(--error);
  font-size: 13px;
  padding: 8px 12px;
  display: none;
}
.error-msg.visible {
  display: block;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 11px 20px;
}
.btn-primary:hover:not(:disabled) {
  background: #3d8fd7;
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  padding: 8px 12px;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.btn-icon {
  background: transparent;
  color: var(--text-2);
  border: none;
  padding: 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.btn-icon:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ── ─────────────────────── MAIN APP LAYOUT ──────────────────────────── ── */
/*
   Layout: Fixed sidebar + scrollable main area.
   The KEY principle: .main-scroll is the ONLY scroll container.
   It is NOT a flex column. Cards are plain block elements with auto height.
   They NEVER get squished. They ALWAYS show all content.
*/

.app-layout {
  height: 100%;
  display: flex;
  flex-direction: row;
}

/* Sidebar */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 8px;
  overflow: hidden;
}

.sidebar .wordmark {
  font-size: 18px;
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: var(--surface-2);
  color: var(--text-2);
}
.nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.sidebar-grow {
  flex: 1;
}

.sidebar .btn-ghost {
  width: 100%;
  justify-content: flex-start;
  padding: 9px 12px;
  font-size: 13px;
}

/* Main area — THE scroll container. Block layout. Not flex. */
.main-scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px;
}

/* Full-height container for the inbox pane */
.inbox-main-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Mobile bottom bar (shown only on narrow screens) ────────────────────── */
.mobile-bar {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bar button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-top: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 0;
  overflow: hidden;
}
.mobile-bar button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.mobile-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.mobile-bar button.active {
  color: var(--accent);
  border-top-color: var(--accent);
}

/* ── Mobile Top Bar ─────────────────────────────────────────────────────── */
.mobile-topbar {
  display: none;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
}

.mobile-topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hamburger-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 10px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger-btn:hover { background: var(--surface-2); }
.hamburger-btn svg { width: 22px; height: 22px; }

/* ── Nav Drawer Backdrop ─────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* ── Nav Drawer ──────────────────────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 8px;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.nav-drawer.open {
  transform: translateX(0);
}
.nav-drawer .wordmark {
  font-size: 18px;
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.nav-drawer-grow { flex: 1; }

/* ── ──────────────────────── DASHBOARD CARDS ─────────────────────────── ── */
/*
   Cards are plain block elements. They NEVER have a fixed height.
   They ALWAYS expand to fit all their content.
   The .main-scroll container scrolls to reveal all cards.
*/

.refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.refresh-row .timestamp {
  font-size: 12px;
  color: var(--muted);
}

.refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.refresh-btn svg {
  width: 14px;
  height: 14px;
}
.refresh-btn:hover {
  color: var(--text-2);
  border-color: var(--text-2);
}
.refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  /* NO fixed height. NO max-height. NO overflow hidden. */
}

.card-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h3 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Page Headers ────────────────────────────────────────────────────────── */
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pg-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pg-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pg-icon {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pg-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.pg-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.pg-subtitle {
  font-size: 13px;
  color: var(--muted);
}

.card-body {
  padding: 16px;
  /* NO max-height. NO overflow. Content flows naturally. */
}

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.badge-accent {
  background: var(--accent-dim);
  color: var(--accent);
}
.badge-warn {
  background: rgba(229, 164, 69, 0.15);
  color: var(--warning);
}
.badge-ok {
  background: rgba(77, 187, 134, 0.15);
  color: var(--success);
}
.badge-muted {
  background: var(--surface-2);
  color: var(--muted);
}

.refresh-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.summary-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.summary-value {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: var(--text);
}
.summary-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-2);
}
.summary-detail {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.focus-item,
.integration-row,
.workspace-item {
  border-bottom: 1px solid var(--border);
}
.focus-item:last-child,
.integration-row:last-child,
.workspace-item:last-child {
  border-bottom: none;
}
.focus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.focus-item-clickable {
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background 0.15s, border-color 0.15s;
}
.focus-item-clickable:hover {
  background: rgba(255, 255, 255, 0.02);
}
.focus-item-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.focus-kind {
  min-width: 88px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.focus-copy {
  min-width: 0;
  flex: 1;
}
.focus-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}
.focus-detail {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.focus-item.focus-high .focus-kind {
  color: var(--error);
}
.focus-item.focus-medium .focus-kind {
  color: var(--warning);
}
.focus-item.focus-low .focus-kind {
  color: var(--success);
}

.focus-ask-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}
.focus-ask-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
}
.focus-ask-btn:active {
  opacity: 0.8;
}
.focus-ask-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.integration-list,
.workspace-list {
  display: flex;
  flex-direction: column;
}
.integration-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.integration-copy {
  min-width: 0;
  flex: 1;
}
.integration-label,
.workspace-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.integration-note,
.workspace-meta,
.workspace-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.workspace-item {
  padding: 12px 0;
}
.workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Task list ── */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.task-item-clickable {
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background 0.15s, border-color 0.15s;
}
.task-item-clickable:hover {
  background: rgba(255, 255, 255, 0.02);
}
.task-item-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.task-item:last-child {
  border-bottom: none;
}
.task-main {
  min-width: 0;
  flex: 1;
}
.task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  flex-shrink: 0;
}
.task-dot.high {
  background: var(--error);
}
.task-dot.medium {
  background: var(--warning);
}
.task-dot.low {
  background: var(--muted);
}

.task-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  /* IMPORTANT: No truncation, no overflow hidden, no max-height */
}
.task-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.task-text a:hover {
  color: #5ca0e0;
}
.task-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.task-action-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.task-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.75);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 1000;
}

.task-modal {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-modal-header h4 {
  font-size: 16px;
  color: var(--text);
}

.task-modal-task {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 13px;
}

.task-select,
.task-comment {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 9px 11px;
  outline: none;
}

.task-select:focus,
.task-comment:focus {
  border-color: var(--accent);
}

.task-comment {
  resize: vertical;
  min-height: 96px;
}

.task-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.task-submit-status {
  min-height: 18px;
  font-size: 12px;
  color: var(--muted);
}

.task-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Inbox list ── */
.inbox-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.inbox-item:last-child {
  border-bottom: none;
}
.inbox-from {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 100px;
  flex-shrink: 0;
}
.inbox-main {
  min-width: 0;
  flex: 1;
}
.inbox-subject {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.inbox-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Roster / Team grid ── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.roster-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.roster-item:hover {
  border-color: var(--border);
}
.roster-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.roster-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.roster-avatar-wrap .status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface-2);
  border-radius: 50%;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.available {
  background: var(--success);
}
.status-dot.busy {
  background: var(--warning);
  box-shadow: 0 0 6px rgba(229, 164, 69, 0.5);
}
.status-dot.offline {
  background: var(--border);
}
.roster-identity {
  min-width: 0;
  flex: 1;
}
.roster-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-role {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-reports-to {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-task {
  font-size: 12px;
  color: var(--accent);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roster-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.roster-tagline {
  font-size: 11px;
  font-style: italic;
  color: var(--accent);
  opacity: 0.8;
  margin-top: 2px;
  line-height: 1.4;
}
.roster-bio {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roster-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.roster-actions .task-action-btn {
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 5px 8px;
}

/* ── Agents grid ── */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.agent-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-status-wrap {
  min-width: 0;
  flex: 1;
}
.agent-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.avatar-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  background: hsl(220 20% 6%);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.avatar-shell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
}
.avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.avatar-md {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.avatar-lg {
  width: 104px;
  height: 104px;
  border-radius: 28px;
}
.avatar-sm .avatar-fallback {
  font-size: 13px;
}
.avatar-md .avatar-fallback {
  font-size: 16px;
}
.avatar-lg .avatar-fallback {
  font-size: 28px;
}

.agent-avatar {
  width: 40px;
  height: 40px;
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
}
.agent-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.agent-role {
  font-size: 12px;
  color: var(--muted);
}
.agent-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
}
.agent-status.available {
  background: rgba(77, 187, 134, 0.15);
  color: var(--success);
}
.agent-status.busy {
  background: rgba(229, 164, 69, 0.15);
  color: var(--warning);
}
.agent-status.offline {
  background: var(--surface-2);
  color: var(--muted);
}
.agent-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.email-modal {
  width: min(720px, 100%);
  max-height: min(80vh, 760px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.email-meta {
  font-size: 12px;
  color: var(--muted);
}
.email-body {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 14px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.email-body h1, .email-body h2, .email-body h3 {
  margin: 12px 0 6px;
  color: var(--text);
}
.email-body p {
  margin: 0 0 10px;
}
.email-body ul, .email-body ol {
  margin: 8px 0 8px 20px;
}
.email-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 5px;
  border-radius: 4px;
}
.email-body pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.email-body a {
  color: var(--accent);
}

/* ── Empty / loading states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}
.empty-state svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}
.empty-state p {
  font-size: 14px;
}

/* ── ────────────────────────────── CHAT ──────────────────────────────── ── */

.chat-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background:
    radial-gradient(circle at top, rgba(49, 120, 198, 0.12), transparent 30%),
    var(--bg);
}

.chat-header {
  min-height: 68px;
  background: rgba(26, 31, 41, 0.92);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
  backdrop-filter: blur(12px);
}

.back-btn,
.chat-header-btn,
.composer-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.back-btn svg {
  width: 16px;
  height: 16px;
}
.back-btn:hover,
.chat-header-btn:hover:not(:disabled),
.composer-btn:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}
.chat-header-btn:disabled,
.composer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chat-header-btn.danger:hover:not(:disabled) {
  border-color: rgba(224, 85, 85, 0.45);
  color: var(--error);
}
.composer-btn.listening {
  border-color: rgba(77, 187, 134, 0.45);
  color: var(--success);
  background: rgba(77, 187, 134, 0.12);
}

.chat-agent-info {
  flex: 1;
  min-width: 0;
}
.chat-composer-meta,
.messages,
.msg-row,
.chat-input-bar,
.chat-input-shell {
  min-width: 0;
}
.chat-agent-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.chat-agent-status {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.chat-header-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-actions {
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: rgba(26, 31, 41, 0.8);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  scrollbar-width: none;
}
.quick-actions::-webkit-scrollbar {
  display: none;
}

.qa-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}

.qa-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.qa-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

/* Message rows */
.msg-row {
  display: flex;
  gap: 10px;
  max-width: 100%;
}
.msg-row.user {
  justify-content: flex-end;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-avatar.agent {
  background: var(--accent-dim);
  color: var(--accent);
}

.msg-bubble {
  max-width: min(680px, calc(100% - 44px));
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.msg-row.user .msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-row.agent .msg-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-row.agent .msg-bubble.streaming {
  border-color: var(--accent);
  white-space: pre-wrap;
}

/* Markdown in bubbles */
.msg-bubble p {
  margin: 0 0 8px;
}
.msg-bubble p:last-child {
  margin-bottom: 0;
}
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 {
  margin: 12px 0 6px;
  font-weight: 700;
  line-height: 1.3;
}
.msg-bubble h1 {
  font-size: 17px;
}
.msg-bubble h2 {
  font-size: 16px;
}
.msg-bubble h3 {
  font-size: 15px;
}
.msg-bubble ul, .msg-bubble ol {
  padding-left: 20px;
  margin: 6px 0;
}
.msg-bubble li {
  margin: 3px 0;
}
.msg-bubble hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
.msg-bubble strong {
  font-weight: 700;
}
.msg-bubble em {
  font-style: italic;
}
.msg-bubble a {
  color: var(--accent);
  text-decoration: none;
}
.msg-bubble a:hover {
  text-decoration: underline;
}
.msg-row.user .msg-bubble a {
  color: rgba(255, 255, 255, 0.85);
}
.msg-bubble code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
}
.msg-row.user .msg-bubble code {
  background: rgba(255, 255, 255, 0.2);
}
.msg-bubble pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.msg-bubble pre code {
  background: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--text);
  white-space: pre;
}

/* Thought blocks */
.thought-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: calc(100% - 44px);
}
.thought-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font);
}
.thought-toggle svg {
  width: 14px;
  height: 14px;
  transition: rotate 0.15s;
}
.thought-toggle.open svg {
  rotate: 90deg;
}
.thought-content {
  padding: 0 12px 10px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  display: none;
}
.thought-content.visible {
  display: block;
}

/* Tool call pill */
.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-2);
}
.tool-pill.running {
  border-color: var(--accent);
  color: var(--accent);
}
.tool-pill.done {
  color: var(--muted);
}
.tool-pill svg {
  width: 12px;
  height: 12px;
}

/* Thinking dots */
.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 13px;
  color: var(--muted);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.dot-pulse {
  display: flex;
  gap: 3px;
}
.dot-pulse span {
  width: 5px;
  height: 5px;
  background: var(--muted);
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}
.dot-pulse span:nth-child(2) {
  animation-delay: 0.2s;
}
.dot-pulse span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.chat-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 0;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

.chat-speech-status {
  color: var(--text-2);
}
.chat-input-hint {
  color: var(--muted);
}

/* Chat input bar */
.chat-input-bar {
  background: linear-gradient(
    180deg,
    rgba(26, 31, 41, 0.18),
    rgba(26, 31, 41, 0.94)
  );
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

.chat-input-shell {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: rgba(26, 31, 41, 0.94);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.chat-input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 6px 4px;
  outline: none;
  resize: none;
  min-height: 42px;
  max-height: 180px;
  line-height: 1.5;
  overflow-y: auto;
}
.chat-input::placeholder {
  color: var(--muted);
}

.send-btn {
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #3d8fd7, var(--accent));
  border: none;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.send-btn:disabled {
  background: var(--surface-3);
  cursor: not-allowed;
  opacity: 0.5;
}
.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.send-btn svg {
  width: 18px;
  height: 18px;
}

/* ── ─────────────────────── RESPONSIVE ───────────────────────────────── ── */

/* On narrow screens: hide sidebar, show bottom bar */
@media (max-width: 640px) {
  .sidebar {
    display: none;
  }
  .chat-layout {
    width: 100%;
  }
  .chat-header {
    min-height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }
  .chat-agent-info {
    flex: 1 1 calc(100% - 84px);
  }
  .chat-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chat-header-btn {
    width: 100%;
  }
  .quick-actions {
    padding: 8px 12px;
  }
  .messages {
    padding: 12px 10px 8px;
  }
  .msg-row {
    gap: 8px;
  }
  .msg-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .msg-bubble, .thinking-indicator, .thought-block {
    max-width: calc(100vw - 60px);
  }
  .chat-composer-meta {
    padding: 8px 12px 0;
  }
  .chat-input-bar {
    padding: 8px 10px;
  }
  .chat-input-shell {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
  }
  .chat-input-actions {
    justify-content: stretch;
    width: 100%;
  }
  .composer-btn, .send-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .mobile-topbar {
    display: flex;
  }
  .app-layout {
    flex-direction: column;
  }
  .main-scroll {
    padding: 16px;
  }
  .roster-grid {
    grid-template-columns: 1fr;
  }
  .agents-grid {
    grid-template-columns: 1fr;
  }
}

.badge-error {
  background: rgba(224, 85, 85, 0.15);
  color: var(--error);
}

.card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.company-email-identity,
.monitor-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.company-email-note,
.monitor-meta,
.monitor-note,
.monitor-url,
.mailbox-empty {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.mailbox-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mailbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.mailbox-pill-label,
.mailbox-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-2);
}

.mailbox-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.mailbox-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.mailbox-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
}

.mailbox-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mailbox-item:first-of-type {
  border-top: none;
}

.mailbox-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mailbox-item-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mailbox-item-meta,
.mailbox-item-preview {
  font-size: 12px;
  color: var(--muted);
}

.monitor-list {
  display: flex;
  flex-direction: column;
}

.monitor-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.monitor-main {
  min-width: 0;
  flex: 1;
}

.monitor-url {
  overflow-wrap: anywhere;
}

.agents-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.agents-hero-copy,
.office-detail-card,
.office-card {
  background: var(--surface);
}

.agents-hero-copy {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.agents-hero-copy h2 {
  font-size: 24px;
  color: var(--text);
}

.agents-hero-copy p {
  margin-top: 8px;
  color: var(--text-2);
  max-width: 60ch;
}

.agents-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.people-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.people-directory-card,
.profile-card {
  min-height: 100%;
}

.directory-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.directory-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}

.directory-search:focus {
  border-color: var(--accent);
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
}

.filter-chip.active {
  border-color: rgba(49, 120, 198, 0.45);
  background: var(--accent-dim);
  color: var(--accent);
}

.directory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}

.directory-item {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.directory-item.selected {
  border-color: rgba(49, 120, 198, 0.55);
  box-shadow: 0 0 0 1px rgba(49, 120, 198, 0.18) inset;
}

.directory-item-main {
  min-width: 0;
  flex: 1;
}

.directory-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.directory-item-meta {
  font-size: 12px;
  color: var(--text-2);
}

.directory-item-submeta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.profile-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.profile-heading {
  min-width: 0;
  flex: 1;
}

.profile-name {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--text);
}

.profile-role {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-2);
}

.profile-meta,
.profile-copy,
.profile-panel-copy,
.leadership-meta {
  font-size: 13px;
  color: var(--muted);
}

.profile-meta {
  margin-top: 6px;
}

.profile-copy {
  margin-top: 10px;
  max-width: 62ch;
  line-height: 1.6;
}

.profile-actions,
.leadership-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-panel-wide {
  grid-column: 1 / -1;
}

.profile-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-2);
}

.profile-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-stat,
.info-chip {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 12px;
  padding: 7px 10px;
}

.profile-stat strong {
  color: var(--text);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.people-link {
  cursor: pointer;
  font-family: var(--font);
}

.leadership-list {
  display: flex;
  flex-direction: column;
}

.leadership-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.leadership-item:last-child {
  border-bottom: none;
}

.leadership-main {
  min-width: 0;
  flex: 1;
}

.leadership-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.leadership-tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--accent);
  opacity: 0.85;
  margin-top: 3px;
  line-height: 1.4;
}

.leadership-bio {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 5px;
  max-width: 60ch;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.office-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.office-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim) inset;
}

.office-card-head,
.office-card-actions,
.office-detail-top,
.office-detail-actions,
.office-member-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.office-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.office-card-subtitle,
.office-card-meta,
.office-detail-path,
.office-member-role,
.office-member-task,
.office-detail-summary,
.office-lead-label,
.office-lead-value {
  font-size: 12px;
  color: var(--muted);
}

.office-card-summary {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.office-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.office-metric {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 4px 8px;
}

.office-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.office-detail-copy {
  min-width: 0;
  flex: 1;
}

.office-detail-summary {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
}

.office-lead-strip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.office-member-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.office-member-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
}

.office-member-copy {
  min-width: 0;
  flex: 1;
}

.office-member-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.office-member-task {
  margin-top: 4px;
  color: var(--accent);
}

.office-member-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .agents-hero {
    grid-template-columns: 1fr;
  }
  .people-workspace,
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Agent Hub ──────────────────────────────────────── */
.agent-hub {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 0 32px;
}

.agent-hub-search-wrap {
  padding: 0;
}

.agent-hub-search-wrap .directory-search {
  width: 100%;
  box-sizing: border-box;
}

.agent-hub-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-hub-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.agent-hub-section-count {
  background: var(--surface-2);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}

.agent-hub-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.agent-hub-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .agent-hub-people-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

.agent-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  color: inherit;
}

.agent-hub-card:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

.agent-hub-card .avatar-shell {
  flex-shrink: 0;
}

.agent-hub-card .card-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.agent-hub-card .card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.agent-hub-card .card-role {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.available { background: #22c55e; }
.status-dot.busy { background: var(--warning); }
.status-dot.offline { background: var(--muted); }

.agent-hub-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.agent-hub-location-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.agent-hub-location-card:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

.agent-hub-location-card .loc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.agent-hub-location-card .loc-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.agent-profile-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 0 48px;
}

.agent-page-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0 20px;
  border: none;
  background: none;
  width: fit-content;
  transition: color 0.15s;
}

.agent-page-back:hover {
  color: var(--text);
}

.location-page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.location-page-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-2);
}

.profile-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.profile-inbox-item:last-child {
  border-bottom: none;
}

.profile-inbox-from {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.profile-inbox-subject {
  font-size: 13px;
  color: var(--text);
}

.profile-panel-wide {
  grid-column: 1 / -1;
}

.agents-stats-grid {
  display: flex;
  gap: 24px;
  align-items: center;
}

.agents-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agents-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

.agents-stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.msg-bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.84rem;
}
.msg-bubble th,
.msg-bubble td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.65rem;
  text-align: left;
}
.msg-bubble th {
  background: var(--surface-2, rgba(255, 255, 255, 0.05));
  font-weight: 600;
}
.msg-bubble tr:nth-child(even) td {
  background: var(--surface-1, rgba(255, 255, 255, 0.02));
}

/* ── Chat image attachments ───────────────────────────────────────────────── */
.chat-image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
}
.img-preview-thumb {
  position: relative;
  display: inline-flex;
}
.img-preview-thumb img {
  max-width: 80px;
  max-height: 80px;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: cover;
}
.img-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error, #e05);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  padding: 0;
}
.msg-bubble .chat-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INBOX — Outlook-style email client
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Root layout ─────────────────────────────────────────────────────────────── */
.inbox-root {
  display: grid;
  grid-template-columns: 200px 300px 1fr;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.inbox-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  gap: 8px;
  overflow-y: auto;
}

.inbox-compose-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 8px;
}
.inbox-compose-btn:hover { background: #2460a0; }
.inbox-compose-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.inbox-compose-btn__icon svg { width: 16px; height: 16px; }

.inbox-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inbox-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.inbox-folder-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.inbox-folder-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}
.inbox-folder-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.inbox-folder-icon svg { width: 16px; height: 16px; }
.inbox-folder-label { flex: 1; }
.inbox-folder-count {
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.inbox-folder-count.active {
  background: var(--accent);
  color: #fff;
}

/* ── Message list column ─────────────────────────────────────────────────────── */
.inbox-list-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg);
}

.inbox-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inbox-list-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.inbox-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}
.inbox-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.inbox-icon-btn svg { width: 14px; height: 14px; }

.inbox-list-body {
  flex: 1;
  overflow-y: auto;
}

.inbox-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  font-size: 13px;
  gap: 8px;
}

.inbox-thread-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.inbox-thread-item:hover { background: var(--surface-2); }
.inbox-thread-item.active { background: var(--accent-dim); border-left: 3px solid var(--accent); }

.inbox-thread-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.inbox-thread-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.inbox-thread-date {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.inbox-thread-subject {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-thread-count {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}
.inbox-thread-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Reading pane ─────────────────────────────────────────────────────────────── */
.inbox-reading-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.inbox-reading-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}
.inbox-reading-empty__icon {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}
.inbox-reading-empty__icon svg { width: 40px; height: 40px; }

.inbox-reading-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inbox-reading-subject {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}

.inbox-reading-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

.inbox-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.inbox-action-btn:hover { background: var(--surface-3); color: var(--text); }
.inbox-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.inbox-action-btn--danger { margin-left: auto; }
.inbox-action-btn--danger:hover { background: rgba(239,68,68,0.12); color: var(--error); }

/* Thread navigator */
.inbox-thread-nav-wrap {
  padding: 0 20px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inbox-thread-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0;
}
.inbox-thread-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.inbox-thread-nav-btn:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.inbox-thread-nav-btn:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.inbox-thread-nav-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.inbox-thread-nav-btn:hover:not(.active) { background: var(--surface-2); }
.inbox-thread-nav-from { font-weight: 600; color: inherit; }
.inbox-thread-nav-date { font-size: 11px; color: var(--muted); }

/* Message view */
.inbox-msg-view {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inbox-msg-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.inbox-msg-meta-row {
  display: flex;
  gap: 12px;
  font-size: 13px;
}
.inbox-meta-label {
  color: var(--muted);
  font-weight: 600;
  min-width: 44px;
  flex-shrink: 0;
}
.inbox-meta-value {
  color: var(--text-2);
  word-break: break-all;
}

.inbox-reading-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0;
}

/* Attachments */
.inbox-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}
.inbox-att-list-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  width: 100%;
}
.inbox-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}
.inbox-att-chip:hover { background: var(--surface-3); color: var(--text); }
.inbox-att-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.inbox-att-remove {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 4px;
  color: var(--muted);
  transition: color 0.1s;
}
.inbox-att-remove:hover { color: var(--error); }
.inbox-att-remove svg { width: 11px; height: 11px; }

/* ── Compose pane ─────────────────────────────────────────────────────────────── */
.inbox-compose-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.inbox-compose-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inbox-compose-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.inbox-compose-fields {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inbox-compose-input {
  width: 100%;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
}
.inbox-compose-input:last-child { border-bottom: none; }
.inbox-compose-input::placeholder { color: var(--muted); }
.inbox-compose-input:focus { background: var(--accent-dim); }

.inbox-compose-body {
  flex: 1;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  line-height: 1.7;
  resize: none;
  outline: none;
  min-height: 0;
}
.inbox-compose-body::placeholder { color: var(--muted); }

.inbox-att-list.compose {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inbox-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.inbox-compose-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.inbox-compose-send:hover { background: #2460a0; }
.inbox-compose-send svg { width: 14px; height: 14px; }

/* ── Flash message ─────────────────────────────────────────────────────────── */
.inbox-flash {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.inbox-flash--ok { background: var(--success); color: #fff; }
.inbox-flash--err { background: var(--error); color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

/* Back bar (shown on tablet + mobile, added via JS when isNarrow()) */
.inbox-reading-back-bar {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

/* Mobile nav button (back/folders links in header/back bars) */
.inbox-mobile-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: background 0.1s;
}
.inbox-mobile-nav-btn:hover { background: var(--accent-dim); }
.inbox-mobile-nav-btn svg { width: 16px; height: 16px; }

/* Agent profile page — bio panel */
.profile-bio-panel {
  border-left: 3px solid var(--accent, #3b82f6);
  background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, transparent 100%);
  padding: 18px 20px;
}
.profile-bio-panel .profile-panel-copy {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2, #94a3b8);
}
.profile-bio-panel .profile-trait {
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  padding: 3px 10px;
}
.profile-bio-panel .profile-voice {
  font-style: italic;
  font-size: 13px;
  color: var(--text-3, #64748b);
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-top: 10px;
  margin-top: 8px;
}

/* Tablet: sidebar always visible, list OR detail/compose fills remaining space */
@media (max-width: 900px) {
  .inbox-root {
    grid-template-columns: 200px 1fr;
  }
  /* Default: show sidebar + list, hide reading/compose */
  .inbox-reading-pane,
  .inbox-compose-pane {
    display: none;
  }
  /* Detail active: show reading pane, hide list */
  .inbox-root.narrow-detail .inbox-list-col { display: none; }
  .inbox-root.narrow-detail .inbox-reading-pane { display: flex; }
  /* Compose active: show compose pane, hide list */
  .inbox-root.narrow-compose .inbox-list-col { display: none; }
  .inbox-root.narrow-compose .inbox-compose-pane { display: flex; }
}

/* Mobile: single-column drill-down */
@media (max-width: 640px) {
  .inbox-root {
    display: flex;
    flex-direction: column;
  }
  /* Hide all panels */
  .inbox-root .inbox-sidebar,
  .inbox-root .inbox-list-col,
  .inbox-root .inbox-reading-pane,
  .inbox-root .inbox-compose-pane { display: none !important; }
  /* Show only the active panel, filling all available space */
  .inbox-root.narrow-folders .inbox-sidebar { display: flex !important; flex: 1; min-height: 0; }
  .inbox-root.narrow-list .inbox-list-col  { display: flex !important; flex: 1; min-height: 0; }
  .inbox-root.narrow-detail .inbox-reading-pane  { display: flex !important; flex: 1; min-height: 0; overflow-y: auto; }
  .inbox-root.narrow-compose .inbox-compose-pane { display: flex !important; flex: 1; min-height: 0; }

  /* Sidebar: full-width folders view */
  .inbox-sidebar {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .inbox-compose-btn {
    max-width: 200px;
  }

  /* List header: make room for the Folders back button */
  .inbox-list-header {
    gap: 6px;
  }

  /* Compact reading header: stack subject above action buttons */
  .inbox-reading-header {
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 10px;
  }
  .inbox-reading-subject {
    font-size: 15px;
  }
  .inbox-reading-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .inbox-action-btn--danger {
    margin-left: 0;
  }

  /* Message view padding */
  .inbox-msg-view {
    padding: 14px;
  }

  /* Compose toolbar: allow wrapping */
  .inbox-compose-toolbar {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
}

/* ── Finance Dashboard ────────────────────────────────────────────────────── */

.finance-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .finance-cols { grid-template-columns: 1fr; }
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.finance-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.finance-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}
.finance-table tr:last-child td { border-bottom: none; }
.finance-table .amount-positive { color: var(--success); font-weight: 600; }
.finance-table .amount-negative { color: var(--error); font-weight: 600; }
.finance-table .amount-neutral  { color: var(--text-2); font-weight: 600; }

.finance-account-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.finance-account-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.finance-account-chip-name {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.finance-account-chip-balance {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.finance-account-chip-kind {
  font-size: 11px;
  color: var(--muted);
}

.finance-not-configured {
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.finance-not-configured code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

/* Finance stat cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════════════
   System page
   ══════════════════════════════════════════════════════════════════════════════ */

.sys-metrics-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}

.sys-metric-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sys-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.sys-metric-row:last-child {
  border-bottom: none;
}

.sys-metric-label {
  font-size: 13px;
  color: var(--text-2);
  flex-shrink: 0;
}

.sys-metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  text-align: right;
}

/* Memory bar */
.sys-mem-bar-wrap {
  margin-bottom: 4px;
}
.sys-mem-bar-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sys-mem-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.sys-mem-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

/* Restart card */
.sys-restart-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sys-restart-note {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}
.sys-restart-note code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.sys-restart-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sys-restart-btn svg {
  width: 16px;
  height: 16px;
}

.sys-restart-status {
  font-size: 13px;
  min-height: 20px;
}

.sys-status-ok    { color: var(--success); }
.sys-status-warn  { color: var(--warning); }
.sys-status-error { color: var(--error); }

/* ══════════════════════════════════════════════════════════════════════════════
   Support / Tickets page
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────────────────────────── */

.tickets-error-icon {
  display: block;
  margin-bottom: 8px;
}
.tickets-error-icon svg {
  width: 40px;
  height: 40px;
  color: var(--error);
}

.tickets-filter-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}

.tickets-filter-select:focus {
  border-color: var(--accent);
}

/* ── Flash message ────────────────────────────────────────────────────────────── */

.tickets-flash {
  padding: 10px 16px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

.tickets-flash--ok  { background: rgba(77, 187, 134, 0.15); color: var(--success); border: 1px solid rgba(77,187,134,0.3); }
.tickets-flash--err { background: rgba(224, 85, 85, 0.15);  color: var(--error);   border: 1px solid rgba(224,85,85,0.3); }

/* ── Layout ───────────────────────────────────────────────────────────────────── */

.tickets-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.tickets-layout--split {
  grid-template-columns: 360px 1fr;
}

@media (max-width: 900px) {
  .tickets-layout--split {
    grid-template-columns: 1fr;
  }
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */

.tickets-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tickets-empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.4;
}

/* ── List column ─────────────────────────────────────────────────────────────── */

.tickets-list-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tickets-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

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

.tickets-row:hover {
  background: var(--surface-2);
}

.tickets-row--active {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
}

.tickets-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.tickets-row-id {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 600;
}

.tickets-row-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickets-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tickets-row-customer {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tickets-row-customer svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--muted);
}

.tickets-row-date {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Detail column ───────────────────────────────────────────────────────────── */

.tickets-detail-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.tickets-detail-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}

.tickets-detail-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tickets-detail-close svg {
  width: 14px;
  height: 14px;
}

.tickets-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tickets-detail-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tickets-detail-id {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 600;
}

.tickets-detail-subject {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

/* Customer block */
.tickets-detail-customer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.tickets-detail-customer-name {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.tickets-detail-customer-name svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.tickets-detail-customer-email {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}

.tickets-detail-customer-email:hover {
  text-decoration: underline;
}

.tickets-detail-meta-item {
  font-size: 12px;
  color: var(--muted);
}

.tickets-detail-meta-item strong {
  color: var(--text-2);
}

/* Description */
.tickets-detail-desc {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ── Update controls ─────────────────────────────────────────────────────────── */

.tickets-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.tickets-control-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tickets-control-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
}

.tickets-control-select:focus {
  border-color: var(--accent);
}

.tickets-control-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  outline: none;
  width: 180px;
}

.tickets-control-input:focus {
  border-color: var(--accent);
}

.tickets-close-btn {
  margin-left: auto;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tickets-close-btn:hover {
  color: var(--error);
  background: rgba(224,85,85,0.1);
}

.tickets-close-btn svg {
  width: 13px;
  height: 13px;
}

/* ── Notes block ─────────────────────────────────────────────────────────────── */

.tickets-notes-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tickets-notes-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tickets-notes-title svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

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

.tickets-notes-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.tickets-note-item {
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.tickets-note-ts {
  font-size: 11px;
  color: var(--muted);
  margin-right: 8px;
}

.tickets-note-text {
  color: var(--text-2);
}

.tickets-note-compose {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.tickets-note-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  font-family: var(--font);
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

.tickets-note-input:focus {
  border-color: var(--accent);
}

/* ── Create modal ────────────────────────────────────────────────────────────── */

.tickets-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.tickets-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tickets-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.tickets-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.tickets-modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  transition: background 0.1s;
}

.tickets-modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tickets-modal-close svg {
  width: 14px;
  height: 14px;
}

.tickets-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tickets-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

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

@media (max-width: 500px) {
  .tickets-modal-row { grid-template-columns: 1fr; }
}

.tickets-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.tickets-modal-input,
.tickets-modal-select,
.tickets-modal-textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  font-family: var(--font);
}

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

.tickets-modal-textarea {
  resize: vertical;
  line-height: 1.5;
}

.tickets-modal-err {
  font-size: 13px;
  color: var(--error);
  padding: 8px 10px;
  background: rgba(224,85,85,0.1);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(224,85,85,0.25);
}

.tickets-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ── Chat visual overhaul ─────────────────────────────────────────────────── */

/* Message entrance animations */
@keyframes msgSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.msg-row.user.msg-new .msg-bubble {
  animation: msgSlideUp 0.25s ease-out;
}
.msg-row.agent.msg-new .msg-bubble {
  animation: msgSlideIn 0.25s ease-out;
}

/* Streaming cursor */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.msg-bubble.streaming::after {
  content: "▋";
  display: inline-block;
  animation: cursorBlink 0.7s step-end infinite;
  color: var(--accent);
  margin-left: 1px;
  font-size: 0.85em;
  vertical-align: baseline;
}

/* Better thinking indicator */
@keyframes thinkWave {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}
.dot-pulse span {
  animation: thinkWave 1.4s ease-in-out infinite;
}
.dot-pulse span:nth-child(1) { animation-delay: 0s; }
.dot-pulse span:nth-child(2) { animation-delay: 0.15s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.3s; }
.thinking-indicator {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
}

/* Mic button — icon-based, animated listening state */
.composer-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 0;
  position: relative;
  overflow: visible;
}
.composer-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
@keyframes micPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.composer-btn.listening::before,
.composer-btn.listening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid var(--success);
  animation: micPulse 1.4s ease-out infinite;
  pointer-events: none;
}
.composer-btn.listening::after {
  animation-delay: 0.7s;
}

/* Send button — scale press */
.send-btn:active:not(:disabled) {
  transform: scale(0.92);
}

/* Quick action chips — subtle glow on hover */
.qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Chat background — subtle animated aurora */
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.chat-layout {
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(49,120,198,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 100%, rgba(49,120,198,0.07) 0%, transparent 60%),
    var(--bg);
}

/* Composer focus glow */
.chat-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 18px 40px rgba(0,0,0,0.22);
}

/* ── Persona profile additions ────────────────────────────────────────────── */

.profile-tagline {
  margin-top: 4px;
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  opacity: 0.85;
}

.profile-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.profile-trait {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(49,120,198,0.12);
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.profile-voice {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.55;
  opacity: 0.85;
}
.profile-voice-label {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #64748b);
  margin-bottom: 4px;
  opacity: 1;
}

/* Subtle persona edit button */
.persona-edit-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
  letter-spacing: 2px;
}
.persona-edit-btn:hover {
  opacity: 0.9;
  background: rgba(255,255,255,0.05);
}

/* ── Persona editor modal ─────────────────────────────────────────────────── */

.persona-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.persona-modal-overlay.open {
  display: flex;
}

.persona-modal-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(780px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

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

.persona-modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.persona-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.persona-modal-close:hover { background: rgba(255,255,255,0.07); }

.persona-modal-body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
}

.persona-modal-loading {
  color: var(--muted);
  font-size: 13px;
}

.persona-modal-editor {
  width: 100%;
  min-height: 420px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.persona-modal-editor:focus {
  border-color: var(--accent);
}

.persona-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.persona-modal-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.persona-modal-save-btn:disabled { opacity: 0.55; cursor: default; }
.persona-modal-save-btn:not(:disabled):hover { opacity: 0.85; }

/* ── ──────────────────────────── LOG VIEWER ──────────────────────────── ── */

/* Filter bar */
.log-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.log-trigger-select,
.log-date-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}
.log-trigger-select:focus,
.log-date-input:focus {
  border-color: var(--accent);
}

/* Date pills */
.log-dates-card {
  margin-bottom: 12px;
}

.log-date-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.log-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.log-date-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}
.log-date-pill.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.log-date-label {
  font-weight: 600;
}
.log-date-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--surface-3);
  border-radius: 99px;
}
.log-date-pill.active .log-date-count {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Session list */
.log-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* Session card (native <details>) */
.log-session {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.log-session[open] {
  border-color: var(--accent);
}

.log-session-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.log-session-summary::-webkit-details-marker { display: none; }
.log-session-summary:hover {
  background: var(--surface-2);
}

.log-session-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.log-session-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.log-session-time {
  font-size: 12px;
  color: var(--muted);
}

.log-session-duration {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 99px;
}

.log-session-count {
  font-size: 11px;
  color: var(--muted);
}

.log-session-ts {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Session body */
.log-session-body {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Log entries */
.log-entry {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
}
.log-entry:last-child {
  border-bottom: none;
}
.log-entry:hover {
  background: var(--surface-2);
}

.log-entry-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 68px;
}

.log-entry-event {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  color: var(--muted);
}

/* Event-type colors */
.log-event-tool_call { color: var(--accent); }
.log-event-done { color: var(--success); }
.log-event-error { color: var(--error); }
.log-event-thought { color: var(--warning); }
.log-event-session_start { color: var(--text-2); }
.log-event-prompt { color: var(--text-2); }

.log-entry-content {
  color: var(--text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Truncated notice */
.log-truncated-notice {
  padding: 12px 16px;
  background: rgba(229, 164, 69, 0.08);
  border: 1px solid rgba(229, 164, 69, 0.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--warning);
  text-align: center;
}

/* Activity widget on dashboard */
.log-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.log-activity-row:last-child {
  border-bottom: none;
}
.log-activity-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
  flex-shrink: 0;
}
.log-activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.log-activity-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* last_active in roster/hub cards */
.roster-last-active {
  color: var(--success);
  font-size: 11px;
}
.card-last-active {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PM System — Projects Tab & Dashboard Redesign
   Added: 2026-03-15
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Projects full-height container (like inbox) ────────────────────────────── */
.projects-main-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Sub-nav ─────────────────────────────────────────────────────────────────── */
.projects-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sub-nav-bar {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sub-nav-bar::-webkit-scrollbar { display: none; }

.sub-nav-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  font-family: var(--font);
}
.sub-nav-btn:hover { color: var(--text-2); }
.sub-nav-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sub-view-content {
  flex: 1;
  overflow: auto;
  padding: 24px;
}

/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
}

/* ── Kanban board ────────────────────────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  min-width: 800px;
  align-items: start;
}
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.kanban-col-header {
  padding: 12px 14px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kanban-col-header .col-count {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 99px;
}
.kanban-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Story card ──────────────────────────────────────────────────────────────── */
.story-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.story-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.story-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.story-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}
.story-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── Agent avatars ───────────────────────────────────────────────────────────── */
.agent-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.agent-avatar-md {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.agent-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-avatar-fallback.agent-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.agent-avatar-fallback.agent-avatar-md { width: 40px; height: 40px; font-size: 14px; }

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge-feature   { background: rgba(49,120,198,0.15);  color: var(--accent); }
.badge-bug       { background: rgba(224,85,85,0.15);   color: var(--error); }
.badge-chore     { background: var(--surface-2);        color: var(--muted); }

.badge-critical  { background: rgba(224,85,85,0.2);    color: var(--error);   font-weight: 800; }
.badge-high      { background: rgba(229,164,69,0.2);   color: var(--warning); }
.badge-medium    { background: rgba(229,207,69,0.15);  color: #c8b847; }
.badge-low       { background: rgba(100,130,170,0.15); color: #7a96b8; }

.badge-p1        { background: rgba(224,85,85,0.2);    color: var(--error); }
.badge-p2        { background: rgba(229,164,69,0.2);   color: var(--warning); }
.badge-p3        { background: rgba(229,207,69,0.15);  color: #c8b847; }
.badge-p4        { background: var(--surface-2);        color: var(--muted); }

.badge-not-started { background: var(--surface-2);       color: var(--muted); }
.badge-in-progress { background: rgba(49,120,198,0.15);  color: var(--accent); }
.badge-done        { background: rgba(77,187,134,0.15);  color: var(--success); }
.badge-blocked     { background: rgba(224,85,85,0.15);   color: var(--error); }

.badge-points {
  background: var(--surface-3);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}

.badge.badge-xs { font-size: 10px; padding: 1px 6px; }

/* ── Priority dot ────────────────────────────────────────────────────────────── */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.priority-dot.p1 { background: var(--error); }
.priority-dot.p2 { background: var(--warning); }
.priority-dot.p3 { background: #c8b847; }
.priority-dot.p4 { background: var(--muted); }

/* ── Table helpers ───────────────────────────────────────────────────────────── */
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.item-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text-2); }
.data-table th.sort-asc .sort-icon::after  { content: " ▲"; }
.data-table th.sort-desc .sort-icon::after { content: " ▼"; }

.cell-title {
  color: var(--text);
  font-weight: 500;
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.cell-date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.col-narrow { width: 60px; }
.col-action { width: 140px; }
.btn-xs     { font-size: 11px; padding: 3px 8px; border-radius: var(--radius-xs); }

.assignee-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}

/* ── Roadmap ─────────────────────────────────────────────────────────────────── */
.roadmap { display: flex; flex-direction: column; gap: 32px; }
.roadmap-quarter { }
.quarter-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.roadmap-product-group {
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.product-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 8px;
}
.roadmap-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roadmap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  transition: background 0.1s;
}
.roadmap-item:hover { background: var(--surface-2); }
.roadmap-item-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

/* ── Workload ─────────────────────────────────────────────────────────────────── */
.workload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.workload-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.workload-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-info { }
.agent-name { font-size: 14px; font-weight: 700; color: var(--text); }
.agent-role { font-size: 12px; color: var(--muted); }
.workload-counts {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.workload-count { display: flex; align-items: center; gap: 4px; }
.workload-story-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.workload-story-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.workload-story-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Metrics ─────────────────────────────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto auto;
  gap: 16px;
}
.metrics-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.metrics-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
  color: var(--muted);
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  opacity: 0.3;
  margin-bottom: 8px;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.empty-state-body {
  font-size: 13px;
  color: var(--muted);
  max-width: 280px;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-xs);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Dashboard layout ────────────────────────────────────────────────────────── */
.dashboard-row-1 {
  margin-bottom: 16px;
}
.dashboard-row-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.dashboard-row-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Shared dash card */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.dash-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── Active Sprint widget ────────────────────────────────────────────────────── */
.active-sprint-widget { }
.active-sprint-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sprint-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.sprint-goal {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
}
.sprint-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sprint-progress-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.sprint-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.sprint-progress-label {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.sprint-status-counts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.sprint-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.sprint-status-icon { font-size: 14px; }
.sprint-status-icon.done        { color: var(--success); }
.sprint-status-icon.in-progress { color: var(--accent); }
.sprint-status-icon.not-started { color: var(--muted); }
.sprint-status-icon.blocked     { color: var(--error); }
.sprint-status-count {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sprint-status-label { color: var(--muted); }
.view-sprint-link { text-decoration: none; white-space: nowrap; flex-shrink: 0; }

/* ── Workload snapshot (dashboard) ──────────────────────────────────────────── */
.workload-snapshot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workload-snapshot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.agent-name-sm {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workload-total-badge {
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 99px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

/* ── Bug summary (dashboard) ─────────────────────────────────────────────────── */
.bug-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bug-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bug-severity-label { font-size: 12px; min-width: 70px; }
.bug-count {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Roadmap snapshot (dashboard) ────────────────────────────────────────────── */
.roadmap-snapshot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roadmap-snapshot-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.roadmap-snapshot-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.roadmap-snapshot-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.roadmap-snapshot-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quarter-tag { font-size: 11px; color: var(--muted); }

/* ── Kanban column count badge ───────────────────────────────────────────────── */
.col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

/* ── Sortable table column headers ───────────────────────────────────────────── */
.sortable {
  cursor: pointer;
  user-select: none;
}
.sortable:hover { color: var(--accent); }
.sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.5;
}
.sortable.asc  .sort-icon,
.sortable.desc .sort-icon { opacity: 1; color: var(--accent); }

/* ── Light theme contrast overrides ─────────────────────────────────────────── */
[data-theme^="light"] .badge-medium { color: #8a7a10; }
[data-theme^="light"] .badge-low    { color: #5a76a0; }
[data-theme^="light"] .priority-dot.p3 { background: #a89400; }

/* ── Mobile responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .workload-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-row-2,
  .dashboard-row-3 { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .workload-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Fleet Inbox (agent-inbox.js)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header */
.ai-fleet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.ai-fleet-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}
.ai-fleet-back:hover { color: var(--text); border-color: var(--accent); }
.ai-fleet-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.ai-fleet-refresh {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}
.ai-fleet-refresh:hover { color: var(--text); }

/* Button in pg-header-right */
.pg-action-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.pg-action-btn:hover { opacity: 0.85; }

/* 3-column layout */
.ai-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - 160px);
  min-height: 400px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ai-main {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Sidebar */
.ai-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 8px;
}
.ai-sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 12px 8px 4px;
}
.ai-filter-group { margin-bottom: 4px; }
.ai-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  gap: 6px;
}
.ai-filter-row:hover { background: var(--surface-3); color: var(--text); }
.ai-filter-row.active { background: var(--accent-dim); color: var(--accent); font-weight: 500; }
.ai-filter-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-agent-label { font-size: 12px; }
.ai-filter-count { font-size: 11px; color: var(--muted); }
.ai-unread-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

/* Message list */
.ai-message-list {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ai-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.ai-list-count { font-size: 12px; color: var(--muted); }
.ai-mark-all-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}
.ai-mark-all-btn:hover { color: var(--text); border-color: var(--accent); }
.ai-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.ai-msg-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.ai-msg-row:hover { background: var(--surface-2); }
.ai-msg-row.selected { background: var(--accent-dim); border-left-color: var(--accent); }
.ai-msg-row.unread { border-left-color: var(--accent); }
.ai-msg-row.unread .ai-msg-subject { font-weight: 600; color: var(--text); }
.ai-msg-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.ai-msg-agent { font-size: 12px; color: var(--muted); font-family: monospace; }
.ai-msg-time { font-size: 11px; color: var(--muted); }
.ai-msg-subject {
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  overflow: hidden;
}
.ai-msg-preview {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Priority badges */
.ai-priority-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ai-priority-high { background: rgba(224,85,85,0.15); color: var(--error); }
.ai-priority-normal { background: var(--surface-3); color: var(--muted); }

/* Detail panel */
.ai-detail-panel {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ai-detail-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.ai-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.ai-detail-back {
  display: none;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0 0 8px 0;
}
.ai-detail-subject {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ai-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.ai-mark-read-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.ai-mark-read-btn:hover { opacity: 0.85; }
.ai-mark-read-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-detail-body {
  padding: 20px;
  flex: 1;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  overflow-wrap: break-word;
}
.ai-detail-body pre, .ai-detail-pre {
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--text-2);
}

/* Spinner */
.ai-spinner { color: var(--muted); font-size: 13px; padding: 16px; }
.ai-spinner-full { padding: 48px; text-align: center; font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
  .ai-layout { height: auto; flex-direction: column; }
  .ai-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .ai-main { flex-direction: column; }
  .ai-message-list { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .ai-detail-back { display: block; }
}