/* ============================================
   TANA-STYLE DESIGN SYSTEM
   Dark theme replicating Tana's visual language
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  /* Tana Dark Palette */
  --bg-main: #191919;
  --bg-sidebar: #1e1e1e;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(255, 255, 255, 0.08);
  --bg-surface: #222222;
  --bg-input: #2a2a2a;
  --bg-elevated: #2d2d2d;

  --border: #2d2d2d;
  --border-light: #333333;

  --text: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --text-placeholder: #555555;

  /* Accent — neon lime yellow */
  --accent: #D4F441;
  --accent-dim: rgba(212, 244, 65, 0.15);
  --accent-hover: #E0F76B;

  /* Semantic colors */
  --green: #4ade80;
  --green-dim: rgba(74, 222, 128, 0.12);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.12);
  --blue: #60a5fa;
  --blue-dim: rgba(96, 165, 250, 0.12);
  --yellow: #fbbf24;
  --yellow-dim: rgba(251, 191, 36, 0.12);
  --orange: #fb923c;
  --orange-dim: rgba(251, 146, 60, 0.12);
  --pink: #f472b6;
  --pink-dim: rgba(244, 114, 182, 0.12);
  --teal: #2dd4bf;
  --teal-dim: rgba(45, 212, 191, 0.12);

  /* Type-specific colors */
  --type-viewpoint: #f97316;
  --type-data: #3b82f6;
  --type-quote: #a855f7;
  --type-case: #10b981;
  --type-reference: #6366f1;
  --type-person: #ec4899;
  --type-book: #eab308;
  --type-topic: #06b6d4;
  --type-article: #22c55e;
  --type-voice: #f43f5e;

  --sidebar-width: 220px;
  --topbar-height: 44px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 20px;
  --transition: 120ms ease;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-main);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
}

/* ── App Shell ── */
.app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  background: var(--bg-main);
  position: relative;
}

/* ── Side Navigation Bar (horizontal buttons at top) ── */
.side-nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.snav-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  flex-shrink: 0;
  position: relative;
}

.snav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}

.snav-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent);
}

/* ── Side Panel (frosted glass, resizable, overlays graph) ── */
.side-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  min-width: 220px;
  max-width: 500px;
  overflow: hidden;
  background: rgba(30, 30, 30, 0.72);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

/* Drag resize handle on right edge */
.side-panel-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  z-index: 50;
  transition: background 0.15s;
}

.side-panel-resize:hover,
.side-panel-resize.dragging {
  background: var(--accent);
}



.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  flex-shrink: 0;
}

.sp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.sp-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.sp-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.side-panel-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  flex-shrink: 0;
}

.sp-search-icon {
  color: var(--text-faint);
  display: flex;
  flex-shrink: 0;
}

.side-panel-search input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
}

.side-panel-search input:focus {
  border-color: rgba(255, 255, 255, 0.12);
}

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ═══ Top-left Navigation Menu ═══ */
.nav-menu-trigger {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(25, 25, 25, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.nav-menu-trigger:hover {
  background: rgba(40, 40, 40, 0.90);
  color: var(--text-primary);
}

.nav-menu-trigger.active {
  background: rgba(40, 40, 40, 0.95);
  color: var(--text-primary);
}

.nav-menu-chevron {
  font-size: 10px;
  transition: transform 0.2s;
}

.nav-menu-trigger.active .nav-menu-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: fixed;
  top: 42px;
  left: 8px;
  width: 280px;
  max-height: 70vh;
  background: rgba(25, 25, 25, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 99;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: navDropIn 0.15s ease-out;
}

@keyframes navDropIn {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.nav-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.nav-dropdown-search .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.nav-dropdown-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.nav-dropdown-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: calc(70vh - 50px);
}

.nav-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: transparent;
}

/* Sidebar styles kept for nav content rendering */

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 4px;
  flex-shrink: 0;
}

.sidebar-nav-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.sidebar-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.sidebar-nav-btn:disabled:hover {
  background: none;
}

.sidebar-header .logo {
  font-size: 14px;
  color: var(--accent);
}

/* Search */
.sidebar-search {
  position: relative;
  padding: 0 10px 6px;
}

.sidebar-search input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 10px 6px 30px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border var(--transition);
}

.sidebar-search input:focus {
  border-color: var(--border-light);
}

.sidebar-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 2px 6px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.nav-section {
  margin-bottom: 2px;
  padding-bottom: 2px;
}

.nav-section+.nav-section {
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

/* Quick nav at top has no divider */
.nav-quick+.nav-section {
  border-top: none;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 8px 3px;
  user-select: none;
}

.nav-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-section-toggle:hover {
  color: var(--text-secondary);
}

.dt-section-chev {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  transition: all var(--transition);
  user-select: none;
}

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

.nav-item.active {
  background: var(--bg-active);
  color: var(--text);
}

/* SVG icon container */
.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.nav-icon svg {
  width: 15px;
  height: 15px;
}

.nav-item:hover .nav-icon {
  color: var(--text-secondary);
}

.nav-item.active .nav-icon {
  color: inherit;
}

/* Create button green accent */
.nav-create {
  color: var(--text-secondary);
}

.nav-create .nav-icon-green {
  color: var(--green);
}

/* Type SVG icons (in content areas) */
.type-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.type-svg-icon svg {
  width: 15px;
  height: 15px;
}

/* Object type icon with emoji fallback */
.nav-item .icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Right-side actions (count + dots), hidden until hover */
.nav-item .nav-right {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-item:hover .nav-right {
  display: flex;
}

.nav-item .count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
}

/* Three-dot context menu trigger */
.nav-item .nav-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.nav-item .nav-dots:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Sidebar Context Menu */
.sidebar-ctx-menu {
  position: fixed;
  z-index: 4000;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: ctxMenuIn 0.12s ease-out;
}

@keyframes ctxMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sidebar-ctx-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-ctx-menu .ctx-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.sidebar-ctx-menu .ctx-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-ctx-menu .ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.sidebar-ctx-menu .ctx-item.ctx-danger {
  color: #ef4444;
}

.sidebar-ctx-menu .ctx-item.ctx-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-footer .btn {
  width: 100%;
  justify-content: center;
}

/* ── Main Area (full screen) ── */
.main-area {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ── Workspace View (object/list editor, toggles with graph) ── */
.workspace-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
  z-index: 5;
}

.workspace-view .chrome-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  flex-shrink: 0;
  user-select: none;
  border-bottom: 1px solid var(--border);
}

.workspace-view .chrome-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.workspace-view .chrome-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.workspace-view .chrome-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.workspace-view .chrome-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.workspace-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ── Chrome Bar (sidebar toggle + nav + tabs) ── */
.chromebar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  flex-shrink: 0;
  user-select: none;
  -webkit-app-region: drag;
  position: relative;
  z-index: 12;
}

.chromebar * {
  -webkit-app-region: no-drag;
}

.chrome-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.chrome-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.chrome-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.chrome-btn:disabled:hover {
  background: none;
}

.chrome-new-tab {
  margin-left: 2px;
}

/* ── Chrome Tabs ── */
.chrome-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: 4px;
}

.chrome-tabs::-webkit-scrollbar {
  display: none;
}

.chrome-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition);
  border: none;
  flex-shrink: 0;
}

.chrome-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.chrome-tab.active {
  background: var(--bg-main);
  color: var(--text);
}

.chrome-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-tab-close {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease;
  flex-shrink: 0;
}

.chrome-tab:hover .chrome-tab-close,
.chrome-tab.active .chrome-tab-close {
  opacity: 0.5;
}

.chrome-tab-close:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Main Area (independent card panel) ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  isolation: isolate;
  position: relative;
  z-index: 11;
}

/* Topbar / Breadcrumb */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.topbar-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-link {
  cursor: pointer;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition);
}

.breadcrumb-link:hover {
  opacity: 1;
}

.breadcrumb-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

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

/* ── Workspace ── */
.workspace {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}

.workspace::-webkit-scrollbar {
  width: 5px;
}

.workspace::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ── Object Dashboard (Tana Library View) ── */
.dashboard {
  padding: 32px 40px;
  width: 100%;
  box-sizing: border-box;
  will-change: transform;
}

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

.dashboard-header .type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-header .type-icon svg {
  width: 24px;
  height: 24px;
}

.dashboard-header h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dashboard-header .obj-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* View switcher */
.view-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.view-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.view-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.view-btn.active {
  color: var(--text);
  background: var(--bg-active);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Object Card (Tana-style) */
/* Filter / Sort / Group toolbar */
.fsg-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.fsg-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.fsg-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.5;
}

.fsg-item select,
.fsg-item input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 6px;
  outline: none;
}

.fsg-item input {
  width: 80px;
}

.fsg-dir-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  transition: all var(--transition);
}

.fsg-dir-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Clear / deselect button for filter/sort/group */
.fsg-clear-btn {
  background: none;
  border: none;
  color: var(--text-placeholder);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 3px;
  transition: all 0.15s;
}

.fsg-clear-btn:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.fsg-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.fsg-group-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.obj-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
  overflow: hidden;
}

/* Card cover image */
.card-cover {
  margin: -14px -14px 10px -14px;
  height: 120px;
  overflow: hidden;
  background: var(--bg-input);
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.obj-card:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.obj-card .card-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

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

.obj-card .card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.obj-card .card-preview {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.obj-card .card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.obj-card .card-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* List View */
.list-view .list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.list-view .list-item:hover {
  background: var(--bg-hover);
}

.list-view .list-item .bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.list-view .list-item .li-title {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-view .list-item .li-meta {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Object Page (Capacities/Tana full-page editor) ── */
.object-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 40px 80px;
}

/* ── 5-Layer Entity Panel ── */
.entity-layer {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
}

.entity-layer:hover {
  border-color: var(--border-light);
}

.layer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.layer-header:hover {
  background: var(--bg-hover);
}

.layer-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.layer-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}

.layer-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.entity-layer.collapsed .layer-chevron {
  transform: rotate(-90deg);
}

.entity-layer.collapsed .layer-body {
  display: none;
}

.layer-body {
  padding: 4px 12px 12px;
}

.layer-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.layer-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.layer-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* Connection pills in L2 */
.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  transition: all 0.15s;
}

.conn-pill:hover {
  border-color: var(--conn-color, var(--border-light));
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

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

.conn-rel-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

.relation-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Type badge */
.object-page .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  cursor: default;
}

/* Title */
.object-page .page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  border: none;
  background: none;
  color: var(--text);
  width: 100%;
  outline: none;
  padding: 0;
  margin-bottom: 16px;
  resize: none;
  overflow: hidden;
}

.object-page .page-title::placeholder {
  color: var(--text-placeholder);
}

.object-page .page-title:empty::before {
  content: 'Untitled';
  color: var(--text-placeholder);
  pointer-events: none;
}

/* ── Property Rows (Node-style, Capacities-like) ── */
.prop-section {
  margin-bottom: 20px;
  padding-top: 8px;
}

.prop-row {
  display: flex;
  align-items: flex-start;
  min-height: 30px;
  padding: 4px 0;
}

.prop-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text);
  padding: 4px 0 4px 4px;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prop-field-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.prop-field-icon svg {
  width: 14px;
  height: 14px;
}

.prop-bullet {
  color: var(--text-muted);
  font-size: 10px;
  padding: 5px 8px 0 0;
  flex-shrink: 0;
  line-height: 1;
}

.prop-value {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: text;
  min-height: 26px;
  line-height: 1.5;
}

.prop-value:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
}

.prop-value:focus {
  outline: none;
  background: var(--bg-input);
}

/* Tag pills in property row */
.tag-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 0;
}

.tag-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tag-pill .remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  transition: opacity var(--transition);
}

.tag-pill:hover .remove {
  opacity: 1;
}

.tag-input {
  border: none;
  background: none;
  color: var(--text);
  font-size: 11px;
  outline: none;
  width: 70px;
  padding: 2px 4px;
}

/* ── Domain Tags ── */
.domain-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

.domain-tag-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition);
}

.domain-tag-pill .dt-icon {
  font-size: 10px;
}

.domain-tag-pill .dt-remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  margin-left: 2px;
  transition: opacity var(--transition);
}

.domain-tag-pill:hover .dt-remove {
  opacity: 1;
}

.domain-add-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.domain-add-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.domain-loading {
  font-size: 11px;
  color: var(--text-faint);
  padding: 2px 8px;
}

/* ── Coordinates ── */
.coord-domain-group {
  margin: 4px 0 8px 0;
  padding: 0;
}

.radar-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.radar-chart {
  overflow: visible;
}

.coord-domain-header {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coord-icon {
  font-size: 12px;
}

.coord-row {
  padding: 1px 0;
}

.coord-label {
  font-size: 12px !important;
}

.coord-select {
  width: 100%;
  max-width: 200px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.coord-select:hover {
  border-color: var(--accent);
}

.coord-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Domain Add Popup ── */
.domain-add-popup {
  position: fixed;
  z-index: 9999;
  width: 260px;
  max-height: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dap-title {
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px 6px;
  color: var(--text-muted);
}

.dap-search {
  margin: 0 10px 6px;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

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

.dap-list {
  overflow-y: auto;
  max-height: 200px;
  padding: 0 4px;
}

.dap-item {
  padding: 7px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--transition);
}

.dap-item:hover {
  background: var(--bg-hover);
}

.dap-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dap-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-faint);
}

.dap-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

.dap-create {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}

.dap-create:hover {
  background: var(--accent-dim);
}

/* ── Domain Management Modal ── */
.dm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-input);
  font-size: 13px;
}

.dm-item:hover {
  background: var(--bg-hover);
}

.dm-label {
  font-weight: 500;
  flex: 1;
}

.dm-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.tag-input::placeholder {
  color: var(--text-placeholder);
}

/* ── Content Editor (Tana node-style) ── */
.detail-content-area {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Hierarchical Node Editor */
.node-editor {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.node-editor:empty::before {
  content: '输入 / 开始编辑节点...';
  color: var(--text-placeholder);
  display: block;
  padding: 4px 0;
}

.node-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  border-radius: var(--radius-sm);
  margin: 1px 0;
}

.node-line:hover {
  background: transparent;
}

.node-bullet {
  flex-shrink: 0;
  width: 20px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 8px;
  cursor: grab;
  user-select: none;
}

/* ── Node drag-and-drop reorder ── */
.node-line.nd-dragging {
  opacity: 0.35;
}

.node-line.nd-drop-above {
  box-shadow: 0 -2px 0 0 var(--accent);
}

.node-line.nd-drop-below {
  box-shadow: 0 2px 0 0 var(--accent);
}

.node-bullet:active {
  cursor: grabbing;
}

.node-bullet::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.node-line[data-depth="0"] .node-bullet::before {
  width: 6px;
  height: 6px;
  background: var(--text-secondary);
}

.node-content {
  flex: 1;
  min-width: 0;
  outline: none;
  padding: 2px 4px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.node-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
}

.node-content:focus {
  outline: none;
}

/* Depth indentation */
.node-line[data-depth="0"] {
  padding-left: 0;
}

.node-line[data-depth="1"] {
  padding-left: 24px;
}

.node-line[data-depth="2"] {
  padding-left: 48px;
}

.node-line[data-depth="3"] {
  padding-left: 72px;
}

.node-line[data-depth="4"] {
  padding-left: 96px;
}

.node-line[data-depth="5"] {
  padding-left: 120px;
}

/* Bold heading nodes (larger bullets) */
.node-content b,
.node-content strong {
  font-weight: 600;
  color: var(--text);
}

/* Tana-style cascading vertical guide lines — one line per ancestor level */
.node-line[data-depth="1"]::before,
.node-line[data-depth="2"]::before,
.node-line[data-depth="3"]::before,
.node-line[data-depth="4"]::before,
.node-line[data-depth="5"]::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* depth 2+: add ancestor lines via box-shadow */
.node-line[data-depth="2"]::before {
  box-shadow: 24px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="3"]::before {
  box-shadow: 24px 0 0 rgba(255, 255, 255, 0.06),
    48px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="4"]::before {
  box-shadow: 24px 0 0 rgba(255, 255, 255, 0.06),
    48px 0 0 rgba(255, 255, 255, 0.06),
    72px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="5"]::before {
  box-shadow: 24px 0 0 rgba(255, 255, 255, 0.06),
    48px 0 0 rgba(255, 255, 255, 0.06),
    72px 0 0 rgba(255, 255, 255, 0.06),
    96px 0 0 rgba(255, 255, 255, 0.06);
}

/* Multi-select highlight */
.node-line.node-selected {
  background: rgba(99, 155, 255, 0.10);
  border-left: 2px solid rgba(99, 155, 255, 0.6);
  border-radius: 0;
}

.node-line.node-selected .node-bullet::before {
  background: rgba(99, 155, 255, 0.8);
}

/* ── Selection Toolbar ── */
.selection-toolbar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 0;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 1100;
  user-select: none;
  animation: selToolbarIn 0.12s ease;
}

@keyframes selToolbarIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selection-toolbar.show {
  display: flex;
}

.sel-btn {
  background: transparent;
  border: none;
  color: #b0b0b0;
  min-width: 32px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.12s ease;
  padding: 0 6px;
  white-space: nowrap;
  gap: 4px;
}

.sel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e8;
}

.sel-btn.active {
  color: #D4F441;
  background: rgba(212, 244, 65, 0.12);
}

.sel-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sel-divider {
  width: 1px;
  height: 20px;
  background: #3a3a3a;
  margin: 0 3px;
  flex-shrink: 0;
}

.sel-btn-text {
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* ── Inline Formatting Styles ── */
.node-content code {
  background: rgba(212, 244, 65, 0.12);
  color: #D4F441;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.88em;
}

.node-content mark {
  background: rgba(251, 191, 36, 0.25);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}

/* Slash command menu */
.slash-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
}

.slash-menu.show {
  display: block;
}

.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.slash-menu-item:hover,
.slash-menu-item.active {
  background: var(--bg-active);
  color: var(--text);
}

.slash-menu-item .cmd-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

/* @ mention search */
.mention-popup {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 240px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
}

.mention-popup.show {
  display: block;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition);
}

.mention-item:hover {
  background: var(--bg-active);
}

.mention-item .m-icon {
  font-size: 12px;
}

.mention-item .m-title {
  flex: 1;
  color: var(--text);
}

.mention-item .m-type {
  font-size: 10px;
  color: var(--text-muted);
}

/* Inline object reference pill */
.obj-ref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-active);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}

.obj-ref:hover {
  background: var(--accent-dim);
}

/* ── Connected Content (bottom section) ── */
.connections-section {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.connections-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.conn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.conn-item:hover {
  background: var(--bg-hover);
}

.conn-item .c-icon {
  font-size: 13px;
}

.conn-item .c-title {
  flex: 1;
  font-size: 12.5px;
  color: var(--text);
}

.conn-item .c-relation {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.conn-item .c-remove {
  opacity: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: opacity var(--transition);
}

.conn-item:hover .c-remove {
  opacity: 1;
}

/* ── Writing Mode (Article sections) ── */
.writing-mode {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

.writing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.writing-header h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.section-card:hover {
  border-color: var(--border-light);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.section-head .sec-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 20px;
}

.section-head .sec-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.section-head .sec-type {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.section-head .sec-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.sec-status.done {
  background: var(--green-dim);
  color: var(--green);
}

.sec-status.pending {
  background: var(--bg-input);
  color: var(--text-muted);
}

.section-body {
  padding: 12px 14px;
}

.section-body textarea {
  width: 100%;
  min-height: 100px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.section-placeholder {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Preview ── */
.preview-mode {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px;
}

.preview-mode h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  line-height: 1.3;
}

.preview-mode .para {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.preview-mode .divider {
  text-align: center;
  color: var(--text-muted);
  margin: 16px 0;
  font-size: 12px;
  letter-spacing: 4px;
}

/* ── Empty State ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: var(--text-muted);
  gap: 12px;
}

.empty-state .es-icon {
  font-size: 36px;
  opacity: 0.3;
}

.empty-state .es-text {
  font-size: 13px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-light);
}

.btn-primary {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-ghost:hover {
  background: var(--bg-hover);
}

.btn-sm {
  padding: 3px 8px;
  font-size: 11px;
}

.btn-danger {
  color: var(--red);
}

.btn-danger:hover {
  background: var(--red-dim);
  border-color: var(--red);
}

/* ── Modal (Tana-style) ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.modal-overlay.show {
  display: flex;
}

.modal {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

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

.modal-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

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

/* ── Domain Picker Modal (for 课题 creation) ── */
.dp-modal {
  max-width: 440px;
  max-height: 80vh;
}

.dp-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.dp-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
}

.dp-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.dp-label {
  pointer-events: none;
}

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

.modal-body label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 12px;
}

.modal-body label:first-child {
  margin-top: 0;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border var(--transition);
}

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

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

.modal-body select {
  cursor: pointer;
}

/* Custom Type Dropdown */
.type-dropdown {
  position: relative;
}

.type-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border var(--transition);
}

.type-dropdown-trigger:hover {
  border-color: var(--text-muted);
}

.type-dd-icon {
  display: flex;
  align-items: center;
}

.type-dd-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.type-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 200;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.type-dd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
}

.type-dd-option:hover {
  background: var(--bg-hover);
}

.type-dd-option.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.type-dd-option .type-svg-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

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

/* ── Toast ── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text);
  animation: toast-in 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.toast.success {
  border-left: 3px solid var(--green);
}

.toast.error {
  border-left: 3px solid var(--red);
}

.toast.info {
  border-left: 3px solid var(--blue);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Selection state ── */
::selection {
  background: var(--accent-dim);
  color: var(--text);
}

/* ── Scrollbar global ── */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* ── Article outline in editor ── */
.outline-section {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.outline-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  transition: background var(--transition);
}

.outline-item:hover {
  background: var(--bg-hover);
}

.outline-item .oi-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 18px;
}

.outline-item .oi-title {
  flex: 1;
}

.outline-item .oi-type {
  font-size: 10px;
  color: var(--text-muted);
}

.outline-item .oi-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
}

/* ============================================
   SUPERTAG SYSTEM STYLES
   ============================================ */

/* ── SuperTag Pills (multi-tag badges on object page) ── */
.supertag-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: default;
  transition: all var(--transition);
}

.st-pill .st-remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  margin-left: 2px;
  transition: opacity var(--transition);
}

.st-pill:hover .st-remove {
  opacity: 1;
}

.st-add-btn {
  background: none;
  border: 1px dashed var(--border-light);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
}

.st-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── Field Type Hints ── */
.field-type-hint {
  font-size: 9px;
  color: var(--text-placeholder);
  margin-left: 4px;
}

.inherited-badge {
  font-size: 9px;
  color: var(--teal);
  margin-left: 2px;
  opacity: 0.7;
}

/* ── Typed Field Inputs ── */
.prop-input {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: background var(--transition);
  width: auto;
}

.prop-input:focus {
  background: var(--bg-input);
}

.num-input {
  width: 100px;
}

.date-input {
  width: 160px;
  color-scheme: dark;
}

.opt-select {
  cursor: pointer;
  min-width: 120px;
}

/* Multi-select chips */
.multi-select-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--transition);
}

.ms-chip:hover {
  border-color: var(--text-secondary);
}

.ms-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

/* Relation dropdown */
.relation-field {
  position: relative;
}

.relation-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.rel-option {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
}

.rel-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.rel-option.disabled {
  color: var(--text-muted);
  cursor: default;
}

/* URL / Image / PDF fields */
.url-field,
.image-field,
.pdf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.url-preview,
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}

.url-preview:hover,
.pdf-link:hover {
  text-decoration: underline;
}

.field-img-preview {
  max-width: 200px;
  max-height: 120px;
  border-radius: var(--radius);
  margin-top: 4px;
  object-fit: cover;
}

/* Create Tag Modal form inputs */
#createTagModal .modal-body label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#createTagModal .modal-body label:first-child {
  margin-top: 0;
}

#createTagModal .modal-body input:not([type="hidden"]) {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

#createTagModal .modal-body input:focus {
  border-color: var(--accent);
}

.check-field {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
}

.check-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.option-badge {
  font-size: 11px;
  padding: 1px 6px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-pill);
}

.empty-cell {
  color: var(--text-placeholder);
}

/* ── Table View ── */
.table-view {
  overflow-x: auto;
}

.table-view table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.table-view th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.table-view th .ft-badge {
  font-size: 9px;
  color: var(--text-placeholder);
  margin-left: 4px;
  font-weight: 400;
}

.table-view td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-view tr:hover {
  background: var(--bg-hover);
}

/* ── AI Column Batch Fill Button ── */
.ai-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-placeholder);
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 4px;
  vertical-align: middle;
  transition: all 0.2s;
  font-size: 11px;
  line-height: 1;
}

.ai-col-btn:hover {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.25);
}

.ai-col-btn:active {
  transform: scale(0.92);
}

.ai-col-btn.ai-col-loading {
  color: #c084fc;
  pointer-events: none;
  font-size: 11px;
  white-space: nowrap;
}

.ai-col-btn.ai-col-loading .ai-fill-spin {
  display: inline-flex;
}

/* Active column header highlight during batch fill */
th.ai-col-active {
  background: rgba(192, 132, 252, 0.08) !important;
  border-bottom-color: rgba(192, 132, 252, 0.3) !important;
}

/* Row being processed */
.table-view tr.ai-row-filling {
  background: rgba(192, 132, 252, 0.06);
}

/* Cell being filled */
.table-view td.ai-cell-filling {
  position: relative;
  color: transparent;
}

.table-view td.ai-cell-filling::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  animation: ai-cell-pulse 0.8s ease infinite;
}

@keyframes ai-cell-pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* Cell just filled */
.table-view td.ai-cell-done {
  animation: ai-cell-flash 0.5s ease;
}

@keyframes ai-cell-flash {
  0% {
    background: rgba(74, 222, 128, 0.2);
  }

  100% {
    background: transparent;
  }
}

/* Cell error */
.table-view td.ai-cell-error {
  background: rgba(248, 113, 113, 0.1);
}

.td-title {
  font-weight: 500;
}

.td-date {
  color: var(--text-muted);
  font-size: 11px;
}

/* ── SuperTag Config Panel ── */
.config-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

.config-group {
  margin-bottom: 28px;
}

.config-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-left: 4px;
}

.config-tag-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.config-tag-card:hover {
  border-color: var(--border-light);
}

.ct-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}

.ct-header:hover {
  background: var(--bg-hover);
}

.ct-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.ct-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.ct-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.ct-extends {
  font-size: 10px;
  color: var(--teal);
  background: var(--teal-dim);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.ct-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.ct-body {
  padding: 14px;
  border-top: 1px solid var(--border);
}

.ct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ct-meta label {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ct-meta input,
.ct-meta select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  min-width: 80px;
}

.ct-meta input:focus,
.ct-meta select:focus {
  border-color: var(--accent);
}

.ct-fields-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-fields {
  margin-bottom: 12px;
}

.cf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.cf-row.inherited {
  opacity: 0.6;
}

.cf-name {
  min-width: 80px;
  color: var(--text);
}

.cf-name-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  width: 100px;
  font-family: inherit;
}

.cf-name-input:focus {
  border-color: var(--accent);
}

.cf-type,
.cf-inherited {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.cf-inherited {
  color: var(--teal);
  background: var(--teal-dim);
}

.cf-type-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--text);
  font-size: 11px;
  outline: none;
  cursor: pointer;
}

.cf-options-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--text);
  font-size: 11px;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.cf-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: all var(--transition);
}

.cf-row:hover .cf-del {
  opacity: 1;
}

.cf-del:hover {
  color: var(--red);
  background: var(--red-dim);
}

.cf-empty {
  font-size: 11px;
  color: var(--text-placeholder);
  padding: 4px;
}

.ct-danger {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Tag Popup (add supertag overlay) ── */
.tag-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-popup {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tag-popup-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 8px 8px;
}

.tag-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.tag-popup-item:hover {
  background: var(--bg-active);
  color: var(--text);
}

/* ── Extra button sizes ── */
.btn-xs {
  padding: 2px 6px;
  font-size: 10px;
}

/* ── Create Field Row ── */
.create-field-row {
  margin-bottom: 8px;
}

.create-field-row label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.create-field-row .ft-hint {
  font-size: 9px;
  color: var(--text-placeholder);
  font-weight: 400;
  margin-left: 3px;
}

.create-field-row input,
.create-field-row select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

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

/* ── Ref field (supertag reference) ── */
.ref-field {
  border-left: 2px solid var(--accent);
  padding-left: 10px !important;
}

/* ═══════════════════════════════════════
   INLINE POPUPS (# tag + @ mention)
   ═══════════════════════════════════════ */
.inline-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
}

.inline-popup-list {
  padding: 6px;
}

.inline-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}

.inline-popup-item:hover,
.inline-popup-item.selected {
  background: var(--surface-2);
}

.inline-popup-item.create-item {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  color: var(--accent);
}

.ipi-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.ipi-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipi-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.ipi-badge.obj {
  background: var(--surface-2);
  color: var(--text-muted);
}

.inline-popup-group {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 10px 4px;
}

.inline-popup-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Inline rendered elements ── */
.inline-tag {
  display: inline;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  vertical-align: baseline;
  margin: 0 1px;
}

.inline-ref {
  display: inline;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  padding: 0 1px;
  transition: opacity .15s;
}

.inline-ref:hover {
  opacity: .8;
}

/* ═══════════════════════════════════════
   SLASH COMMAND MENU
   ═══════════════════════════════════════ */
.slash-menu {
  position: fixed;
  z-index: 5000;
  min-width: 240px;
  max-width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  display: block;
  animation: slashMenuIn 0.12s ease-out;
}

@keyframes slashMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: background .1s, color .1s;
}

.slash-item:hover,
.slash-item.selected {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.slash-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  line-height: 0;
}

.slash-icon svg {
  display: block;
}

.slash-label {
  flex: 1;
}

.slash-shortcut {
  font-size: 11px;
  color: var(--text-faint);
  opacity: 0.5;
}

/* ═══════════════════════════════════════
   NODE CONTENT ENHANCEMENTS
   ═══════════════════════════════════════ */
/* Image wrapper with resize handle */
.node-image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 6px 0 2px;
  border-radius: var(--radius);
  overflow: visible;
  cursor: default;
}

.node-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
  image-rendering: high-quality;
  -webkit-image-rendering: -webkit-optimize-contrast;
}

.node-image-resize-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
}

.node-image-resize-handle::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

.node-image-wrapper:hover .node-image-resize-handle {
  opacity: 1;
}

/* Code block inside nodes */
.node-code-block {
  display: block;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 6px 0 2px;
  color: #c8d0e0;
  white-space: pre-wrap;
  tab-size: 2;
  min-height: 32px;
  line-height: 1.5;
}

.node-code-block:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
}

.node-code-block:focus {
  outline: none;
  border-color: var(--accent);
}

.node-code-wrapper {
  margin: 6px 0 2px;
}

.mermaid-preview {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 4px;
  overflow-x: auto;
  text-align: center;
}

.mermaid-preview svg {
  max-width: 100%;
  height: auto;
}

/* Checkbox lines */
.checkbox-line .node-bullet {
  display: none;
}

.checkbox-line .node-content {
  padding-left: 0;
}

.node-checkbox {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  accent-color: var(--accent);
  vertical-align: middle;
  cursor: pointer;
}

/* Heading style for node-content */
.node-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Node note / description */
.node-note {
  display: block;
  width: calc(100% - 22px);
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  border-left: none;
  padding: 1px 0 1px 0;
  margin: 0 0 2px 22px;
  min-height: 16px;
  outline: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.node-note:hover,
.node-note:focus {
  opacity: 1;
}

.node-note:empty::before {
  content: 'Add description';
  color: var(--text-faint);
  pointer-events: none;
}

/* Heading + note combo */
.node-heading~.node-note {
  margin-left: 22px;
  font-size: 13px;
}

/* Title note (below page title) */
.title-note {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 0;
  margin: -4px 0 4px 0;
  min-height: 18px;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.title-note:hover,
.title-note:focus {
  opacity: 1;
}

.title-note:empty::before {
  content: 'Add description';
  color: var(--text-faint);
  pointer-events: none;
}

/* L3 Definition Section */
.definition-section {
  margin: 4px 0;
}

.def-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}

.def-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.def-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.def-chevron {
  font-size: 10px;
  color: var(--text-faint);
  margin-left: auto;
}

.def-ai-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s;
}

.def-ai-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.def-body {
  padding: 0 10px 10px;
}

.def-editor {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 4px;
  outline: none;
  min-height: 36px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.def-editor:hover {
  background: rgba(255, 255, 255, 0.02);
}

.def-editor:focus {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.def-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

/* Object Image Section */
.obj-image-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 8px;
}

.obj-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: width 0.2s, height 0.2s;
}

.obj-image.expanded {
  width: 320px;
  height: 320px;
}

.obj-image-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.obj-image-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.obj-image-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Config textarea */
.cfg-textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
}

/* Reference section */
.ref-item {
  align-items: flex-start !important;
}

.ref-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ref-snippet {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.ref-loading {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
  animation: refPulse 1.2s infinite;
}

@keyframes refPulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* Divider */
.node-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* Drag-over highlight */
.node-content.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════
   CONFIG PANEL (Tana-style split layout)
   ═══════════════════════════════════════ */
.config-split {
  display: flex;
  height: 100%;
  gap: 0;
  position: relative;
}

.cfg-sidebar-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfg-sidebar-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-light);
}

.cfg-sidebar-toggle.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

/* Left: tag list */
.cfg-list {
  width: 240px;
  min-width: 240px;
  border-right: 1px solid var(--border);
  padding: 16px 0;
  overflow-y: auto;
}

.cfg-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 16px 16px 6px;
}

.cfg-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
  border-left: 3px solid transparent;
}

.cfg-tag-item:hover {
  background: var(--surface-2);
}

.cfg-tag-item.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.cfg-tag-item.create {
  color: var(--accent);
  margin-top: 8px;
}

.cfg-tag-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

/* Right: detail */
.cfg-detail {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.cfg-empty {
  color: var(--text-muted);
  text-align: center;
  margin-top: 80px;
  font-size: 14px;
}

.cfg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.cfg-big-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
}

.cfg-big-icon .type-svg-icon svg {
  width: 32px;
  height: 32px;
}

/* Icon Picker Trigger */
.icon-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-input);
  transition: all var(--transition);
}

.icon-picker-trigger:hover {
  border-color: var(--text-muted);
}

.icon-picker-trigger svg {
  width: 14px;
  height: 14px;
}

.icon-picker-label {
  opacity: 0.6;
  font-size: 11px;
}

/* Icon Picker Item (used in both modal and inline) */
.icon-picker-item {
  width: 56px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.icon-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.icon-picker-item.selected {
  background: var(--accent);
  color: #111;
}

.icon-picker-item svg {
  width: 20px;
  height: 20px;
}

.icon-picker-item .ip-label {
  font-size: 9px;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 52px;
  text-align: center;
}

.icon-picker-item:hover .ip-label {
  opacity: 0.8;
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Icon Picker Modal Overlay */
.icon-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* No background, no blur — just a transparent click-away layer */
  background: transparent;
}

.icon-picker-modal {
  position: absolute;
  width: 360px;
  max-height: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.icon-picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}

.icon-picker-search {
  margin: 8px 12px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

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

.icon-picker-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 56px);
  gap: 4px;
  padding: 8px 12px 14px;
  overflow-y: auto;
  flex: 1;
  justify-content: center;
}

/* Field Type Icons (Tana-style colored badges) */
.ft-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ft-icon svg {
  width: 14px;
  height: 14px;
}

.cff-icon {
  display: inline-flex;
  align-items: center;
  width: 20px;
}

/* Sidebar Resizer */
.sidebar-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}

.sidebar-resizer:hover,
.sidebar-resizer:active {
  background: var(--accent);
}

/* Global Search Overlay (Spotlight) — Tana style */
.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.global-search-box {
  width: 620px;
  max-height: 520px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}

.gs-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.gs-search-icon {
  color: var(--text-muted);
  display: flex;
  flex-shrink: 0;
}

.gs-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.gs-kbd {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: -apple-system, sans-serif;
}

.gs-results {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.gs-hint {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Search Result Item (Tana multi-line) ── */
.gs-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 80ms;
  border-left: 3px solid transparent;
}

.gs-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.gs-item.gs-selected {
  background: rgba(139, 92, 246, 0.10);
  border-left-color: var(--accent);
}

.gs-icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 15px;
}

.gs-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gs-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.gs-snippet {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.gs-snippet mark {
  background: rgba(212, 199, 68, 0.35);
  color: #f0e68c;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Type Badge (colored pill) ── */
.gs-type-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
  color: var(--badge-color, #888);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Match Field Indicator ── */
.gs-match-indicator {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--mi-color, #888) 15%, transparent);
  color: var(--mi-color, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Title Match Highlight ── */
.gs-title mark {
  background: rgba(212, 199, 68, 0.35);
  color: #f0e68c;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Section Label ── */
.gs-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 18px 4px;
}

/* ── Quick Create Actions ── */
.gs-actions {
  border-top: 1px solid var(--border);
  padding: 6px 0;
}

.gs-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: background 80ms;
}

.gs-action-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.gs-action-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
}

.gs-action-icon svg {
  width: 14px;
  height: 14px;
}

/* ── Keyboard Hints Footer ── */
.gs-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  font-size: 11px;
  color: rgba(140, 150, 180, 0.5);
  flex-shrink: 0;
}

.gs-footer-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-footer-key kbd {
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  font-family: -apple-system, sans-serif;
  color: rgba(200, 210, 230, 0.6);
}

.cfg-tag-name {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.cfg-extends {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Multi-inherit checkboxes */
/* ── Inherit: search-to-add ── */
.cfg-inherit-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cfg-inherit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cfg-inherit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pill-color, #888) 18%, transparent);
  color: var(--pill-color, #888);
  white-space: nowrap;
}

.cfg-inherit-pill-x {
  cursor: pointer;
  opacity: 0.5;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
}

.cfg-inherit-pill-x:hover {
  opacity: 1;
}

.cfg-inherit-input-wrap {
  position: relative;
}

.cfg-inherit-input {
  width: 100%;
  font-size: 13px;
}

.cfg-inherit-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  margin-top: 4px;
}

.cfg-inherit-dd-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 80ms;
}

.cfg-inherit-dd-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cfg-inherit-dd-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.cfg-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.cfg-section.danger {
  background: transparent;
  border-color: #ef444433;
  text-align: right;
}

.cfg-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.cfg-section-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cfg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cfg-row>label {
  width: 60px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.cfg-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}

.cfg-input.sm {
  max-width: 80px;
}

.cfg-input:focus {
  border-color: var(--accent);
  outline: none;
}

.cfg-input.ai-inst {
  min-height: 48px;
  resize: vertical;
  font-size: 12px;
}

/* Color palette */
.color-palette {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}

.cp-dot:hover {
  transform: scale(1.15);
}

.cp-dot.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Field rows in config */
.cfg-field {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
}

.cfg-field.inherited {
  opacity: .65;
}

.cfg-field-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}

.cfg-field-header:hover {
  background: var(--surface-2);
}

.cff-icon {
  font-size: 14px;
}

.cff-name {
  flex: 1;
  font-weight: 500;
}

.cff-type {
  font-size: 11px;
  color: var(--text-muted);
}

.cff-req {
  font-size: 9px;
  background: #ef444433;
  color: #ef4444;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.cff-inherited {
  font-size: 9px;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
}

.cff-arrow {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform .15s;
}

.cfg-field-body {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.cfg-field-actions {
  margin-top: 8px;
  text-align: right;
}

.cfg-inherit-badge {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 8px;
  font-weight: 600;
}

.cfg-add-field {
  padding: 10px;
  text-align: center;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
  transition: background .12s;
}

.cfg-add-field:hover {
  background: var(--surface-2);
}

.cfg-ai-gen-btn {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

.cfg-ai-gen-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Toggle switch */
.cfg-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.cfg-toggle input {
  display: none;
}

.toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface-2);
  position: relative;
  transition: background .2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s, background .2s;
}

.cfg-toggle input:checked+.toggle-track {
  background: var(--accent);
}

.cfg-toggle input:checked+.toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}

/* Button helpers */
.btn-ghost {
  background: transparent !important;
  border: none;
}

.btn-ghost:hover {
  opacity: .8;
}

.btn-danger {
  background: transparent !important;
  color: var(--text-muted) !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--red) !important;
}

/* ══════════════════════════════════════════
   GRAPH PANEL (right sidebar)
   ══════════════════════════════════════════ */

/* DEPRECATED: old graph panel replaced by unified Research Canvas */
.graph-panel {
  display: none !important;
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  margin-left: 6px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
  isolation: isolate;
  transform: translateZ(0);
}

.graph-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  transition: background 0.15s;
}

.graph-resizer:hover,
.graph-resizer:active {
  background: var(--accent);
}

.graph-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.graph-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(140, 150, 180, 0.7);
  flex-shrink: 0;
}

.graph-header-icon {
  display: flex;
  color: var(--text-muted);
}

#graphCanvas {
  flex: 1;
  width: 100%;
  cursor: crosshair;
}

#graphCanvas:active {
  cursor: grabbing;
}

/* ── Graph Cards Container ── */
.graph-cards-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  gap: 6px;
  display: flex;
  flex-direction: column;
}

.graph-cards-container::-webkit-scrollbar {
  width: 4px;
}

.graph-cards-container::-webkit-scrollbar-track {
  background: transparent;
}

.graph-cards-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.graph-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.2s, flex 0.3s ease;
  display: flex;
  flex-direction: column;
}

.graph-card:hover {
  border-color: rgba(255, 255, 255, 0.10);
}

/* Fullscreen: card fills entire container viewport, other cards pushed below scroll */
.graph-card.gc-full {
  min-height: 100%;
  flex-shrink: 0;
}

.graph-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  flex-shrink: 0;
}

.graph-card-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.gc-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.gc-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.graph-card.gc-mini .gc-title,
.graph-card.gc-full .gc-title {
  color: var(--text);
}

.gc-badge {
  font-size: 9px;
  color: var(--text-faint);
}

/* ── Mode toggle buttons ── */
.gc-mode-btns {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}

.gc-mode-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-faint);
  transition: all 0.15s;
  background: none;
  border: none;
  padding: 0;
}

.gc-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.gc-mode-btn.active {
  color: var(--accent);
}

.gc-chevron {
  display: flex;
  color: var(--text-faint);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.graph-card.gc-mini .gc-chevron,
.graph-card.gc-full .gc-chevron {
  transform: rotate(180deg);
}

/* ── Card body: visible in mini & full modes ── */
.graph-card-body {
  display: none;
  flex-direction: column;
  min-height: 0;
}

.graph-card.gc-mini .graph-card-body,
.graph-card.gc-full .graph-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Canvas wrapper ── */
.gc-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 0;
}

/* Mini mode: compact fixed height */
.graph-card.gc-mini .gc-canvas-wrap {
  height: 220px;
  flex: none;
}

/* Full mode: fill remaining space */
.graph-card.gc-full .gc-canvas-wrap {
  flex: 1;
  height: auto;
}

.gc-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.gc-canvas-wrap canvas:active {
  cursor: grabbing;
}

/* Override old #graphCanvas flex behavior inside card */
#gc-network #graphCanvas {
  flex: unset;
}

.gc-empty-hint {
  padding: 24px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* ── Knowledge Space: Mode Bar ── */
.space-mode-bar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  align-items: center;
}

.space-layout-tabs {
  display: flex;
  gap: 2px;
}

.space-layout-btn {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.5;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  gap: 3px;
}

.space-layout-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.8;
}

.space-layout-btn.active {
  background: var(--accent-dim);
  border-color: rgba(110, 90, 255, 0.3);
  opacity: 1;
  color: var(--text);
  box-shadow: 0 0 6px rgba(110, 90, 255, 0.3);
  font-weight: 600;
}

.space-tool-btns {
  display: flex;
  gap: 2px;
}

.space-tool-btn {
  width: 26px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.4;
  padding: 0;
}

.space-tool-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-tool-btn.active {
  background: rgba(110, 200, 160, 0.15);
  border-color: rgba(110, 200, 160, 0.3);
  opacity: 1;
  color: rgba(110, 200, 160, 1);
  box-shadow: 0 0 6px rgba(110, 200, 160, 0.2);
}

.space-bar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 3px;
  flex-shrink: 0;
}

.space-lens-btns {
  display: flex;
  gap: 2px;
}

.space-lens-btn {
  width: 24px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.35;
  padding: 0;
}

.space-lens-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-lens-btn.active {
  background: var(--accent-dim);
  border-color: rgba(110, 90, 255, 0.3);
  opacity: 1;
  box-shadow: 0 0 6px rgba(110, 90, 255, 0.3);
}

.space-depth-selector {
  display: flex;
  align-items: center;
  gap: 1px;
  color: var(--text-muted);
}

.space-depth-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.35;
  padding: 0;
}

.space-depth-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-depth-btn.active {
  background: rgba(110, 200, 160, 0.2);
  border-color: rgba(110, 200, 160, 0.3);
  color: rgba(110, 200, 160, 1);
  opacity: 1;
}

/* ── Axis Picker Popup ── */
.space-axis-picker {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 28, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.space-axis-picker-title {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.space-axis-picker-item {
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.space-axis-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.space-axis-picker-item .axis-type-badge {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0.6;
}

.space-axis-picker-item .axis-type-badge.date {
  background: rgba(255, 150, 50, 0.2);
  color: #fa3;
}

.space-axis-picker-item .axis-type-badge.number {
  background: rgba(80, 180, 255, 0.2);
  color: #5bf;
}

.space-axis-picker-item .axis-type-badge.category {
  background: rgba(180, 120, 255, 0.2);
  color: #b8f;
}

/* ── Active Axes Strip ── */
.space-active-axes {
  display: flex;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.space-axis-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.space-axis-tag .axis-dir {
  font-weight: 700;
  opacity: 0.7;
}

.space-axis-tag .axis-name {
  opacity: 0.9;
}

.space-axis-tag .axis-remove {
  cursor: pointer;
  opacity: 0.4;
  font-size: 10px;
  margin-left: 2px;
}

.space-axis-tag .axis-remove:hover {
  opacity: 1;
}

.space-axis-tag.x {
  color: rgba(255, 80, 80, 0.9);
  border-color: rgba(255, 80, 80, 0.2);
}

.space-axis-tag.y {
  color: rgba(80, 220, 120, 0.9);
  border-color: rgba(80, 220, 120, 0.2);
}

.space-axis-tag.z {
  color: rgba(80, 150, 255, 0.9);
  border-color: rgba(80, 150, 255, 0.2);
}

/* ── Knowledge Space: Axis Selector ── */
.space-axis-bar {
  display: flex;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
  flex-shrink: 0;
}

.space-axis-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.space-axis-item label {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  min-width: 12px;
  text-align: center;
}

.space-axis-item select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  max-width: 140px;
  cursor: pointer;
  outline: none;
}

.space-axis-item select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.space-axis-item select:focus {
  border-color: var(--accent);
}

/* Trend view dimension selectors */
.gc-trend-controls {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gc-trend-axis {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gc-trend-axis label {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  min-width: 12px;
  text-align: center;
}

.gc-trend-axis select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  max-width: 120px;
}

/* ── 2D/3D Toggle ── */
.graph-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 4px;
}

.graph-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
}

.graph-mode-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.graph-mode-toggle.active-3d {
  background: rgba(110, 90, 255, 0.15);
  border-color: rgba(110, 90, 255, 0.4);
}

/* ── 3D Container ── */
#graph3dContainer {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#graph3dContainer canvas {
  display: block;
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: rgba(12, 14, 20, 0.8);
}

.graph-legend {
  text-align: right;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(140, 150, 180, 0.5);
}

/* Topbar graph toggle button */
.topbar-graph-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.topbar-graph-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.topbar-graph-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
}

.graph-btn-label {
  font-size: 11px;
}

/* ── Graph Depth Selector ── */
.graph-depth-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}

.depth-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(140, 150, 180, 0.5);
}

.depth-buttons {
  display: flex;
  gap: 2px;
}

.depth-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(140, 150, 180, 0.5);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.depth-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(200, 210, 230, 0.8);
}

.depth-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

/* ── Dimension Controls ── */
.dim-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.dim-toggle-btn {
  font-size: 12px !important;
  width: 24px !important;
  height: 22px !important;
}

.dim-toggle-btn.active {
  background: rgba(176, 124, 232, 0.18);
  color: #b07ce8;
}

.dim-axis-panel {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dim-axis-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dim-axis-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(176, 124, 232, 0.6);
  width: 10px;
  text-align: right;
}

.dim-axis-select {
  font-size: 9px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 210, 230, 0.7);
  outline: none;
  min-width: 50px;
  max-width: 80px;
  cursor: pointer;
}

.dim-axis-select:hover {
  border-color: rgba(176, 124, 232, 0.3);
}

.dim-axis-select:focus {
  border-color: rgba(176, 124, 232, 0.5);
}

/* ── Today View ── */
/* ============================================
   TIMELINE VIEW
   ============================================ */
.tl-view {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.tl-sidebar {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.tl-cal {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tl-sidebar-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.tl-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.tl-stat-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'SF Mono', 'Menlo', monospace;
}

/* Main Area */
.tl-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Controls Bar */
.tl-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 16px;
  flex-shrink: 0;
}

.tl-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.tl-range-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

.tl-range-select:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tl-type-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}

.tl-type-chips::-webkit-scrollbar {
  display: none;
}

.tl-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms;
  flex-shrink: 0;
}

.tl-type-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.tl-type-chip.active {
  color: var(--text);
}

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

.tl-chip-count {
  color: var(--text-muted);
  font-size: 10px;
}

/* Zoom Toggle */
.tl-zoom-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.tl-zoom-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 150ms;
}

.tl-zoom-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.tl-zoom-btn.active {
  background: var(--accent);
  color: #111;
}

/* Timeline Content */
.tl-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 24px 48px;
}

/* Vertical Track */
.tl-track {
  position: relative;
  padding-left: 28px;
}

.tl-track::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 0.5px;
}

/* Date Headers */
.tl-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  position: relative;
}

.tl-date-dot {
  position: absolute;
  left: -23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  z-index: 1;
}

.tl-date-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.tl-date-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.tl-date-count {
  font-size: 10px;
  color: var(--text-faint, rgba(255, 255, 255, 0.3));
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  margin-left: auto;
}

/* Event Items — clean info display (no card box) */
.tl-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  transition: background 120ms;
  border-radius: 6px;
}

.tl-event:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tl-event.tl-selected {
  background: rgba(255, 255, 255, 0.06);
}

.tl-event-dot {
  position: absolute;
  left: -22px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  z-index: 1;
  flex-shrink: 0;
}

.tl-event-dot.green {
  background: #4ade80;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.2);
}

.tl-event-dot.blue {
  background: #60a5fa;
  box-shadow: 0 0 4px rgba(96, 165, 250, 0.2);
}

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

.tl-event-card {
  flex: 1;
  background: none;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 2px 0;
  transition: none;
}

.tl-event:hover .tl-event-card {
  background: none;
  border-color: transparent;
  transform: none;
}

.tl-event-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-event-time {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Menlo', monospace;
  flex-shrink: 0;
}

.tl-event-icon {
  flex-shrink: 0;
  font-size: 12px;
}

.tl-event-icon svg {
  width: 12px;
  height: 12px;
}

.tl-event-title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tl-event-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.tl-event-type {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.tl-event-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  color: var(--text-faint, rgba(255, 255, 255, 0.3));
}

.badge-created {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.badge-updated {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

/* Week Mode Cards */
.tl-week-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  position: relative;
  cursor: pointer;
}

.tl-week-dot {
  position: absolute;
  left: -22px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
}

.tl-week-body {
  flex: 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: all 150ms;
}

.tl-week-card:hover .tl-week-body {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.tl-week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tl-week-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tl-week-total {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.tl-week-counts {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.tl-week-created {
  font-size: 12px;
  color: #4ade80;
}

.tl-week-updated {
  font-size: 12px;
  color: #60a5fa;
}

.tl-week-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tl-week-type-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Month Mode (Heatmap) */
.tl-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: 8px 0;
}

.tl-month-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 150ms;
  gap: 2px;
  border: 1px solid transparent;
}

.tl-month-cell:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.tl-month-cell.level-1 {
  background: rgba(74, 222, 128, 0.08);
}

.tl-month-cell.level-2 {
  background: rgba(74, 222, 128, 0.18);
}

.tl-month-cell.level-3 {
  background: rgba(74, 222, 128, 0.3);
}

.tl-month-cell.level-4 {
  background: rgba(74, 222, 128, 0.45);
}

.tl-month-cell.today {
  border: 2px solid var(--accent);
}

.tl-month-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.tl-month-count {
  font-size: 10px;
  color: var(--text-muted);
}

.tl-month-summary {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  justify-content: center;
}

.tl-month-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

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

.tl-dot.green {
  background: #4ade80;
}

.tl-dot.blue {
  background: #60a5fa;
}

/* Load More */
.tl-load-more {
  text-align: center;
  padding: 16px;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 150ms;
}

.tl-load-more:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Empty State */
.tl-empty {
  text-align: center;
  padding: 60px 0;
}

.tl-empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.tl-empty-text {
  font-size: 14px;
  color: var(--text-muted);
}

/* Calendar Grid (used in Timeline sidebar) */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
}

.cal-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cal-nav {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}

.cal-nav:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day-header {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms;
  position: relative;
  gap: 2px;
}

.cal-cell.empty {
  cursor: default;
}

.cal-cell:not(.empty):hover {
  background: rgba(255, 255, 255, 0.06);
}

.cal-day-num {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

.cal-cell.today .cal-day-num {
  color: var(--accent);
  font-weight: 600;
}

.cal-cell.selected {
  background: var(--accent);
}

.cal-cell.selected .cal-day-num {
  color: #111;
  font-weight: 600;
}

.cal-cell.selected.today {
  background: var(--accent);
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.cal-cell.selected .cal-dot {
  background: rgba(255, 255, 255, 0.7);
}

/* ============================================
   IMPORT MODAL
   ============================================ */
.import-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 720px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.import-header h2 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.import-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.import-loading,
.import-error {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
}

.import-error {
  color: #f87171;
}

.import-vault-path {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.import-vault-path svg {
  width: 12px;
  height: 12px;
}

/* Type Picker Grid */
.import-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.import-type-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.import-type-card:hover:not(.disabled) {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.import-type-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.itc-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

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

.itc-map {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Import Toolbar */
.import-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.import-tb-title {
  font-size: 13px;
  font-weight: 600;
  margin-right: auto;
}

.import-search {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  width: 120px;
  outline: none;
}

/* Import Table */
.import-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  text-align: left;
  padding: 6px 8px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.import-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
}

.import-table tbody tr:hover {
  background: var(--bg-hover);
}

.import-title {
  font-weight: 500;
}

.import-preview {
  color: var(--text-muted);
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-props {
  text-align: center;
  color: var(--text-faint);
}

.import-check {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

/* Import Result */
.import-result {
  text-align: center;
  padding: 40px 20px;
}

.import-result-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.import-result-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.import-result-stats {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 13px;
}

.irs-imported {
  color: #4ade80;
}

.irs-skipped {
  color: var(--text-muted);
}

/* ── Type Change Popup ── */
.type-change-popup {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(30, 32, 42, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  animation: fadeInPopup 0.15s ease-out;
}

@keyframes fadeInPopup {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.type-change-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}

.type-change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.12s;
}

.type-change-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.type-change-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.type-change-item .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Custom Field Type Dropdown ── */
.cfg-field-type-dropdown {
  position: relative;
}

.cfg-field-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s;
}

.cfg-field-type-btn:hover {
  border-color: var(--accent);
}

.cfg-field-type-btn .ft-icon {
  display: flex;
  align-items: center;
}

.cff-arrow-sm {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.5;
}

.cfg-ft-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  animation: fadeInPopup 0.12s ease-out;
}

.cfg-ft-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.cfg-ft-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.cfg-ft-option.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.cfg-ft-option .ft-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Enhanced Relation Picker Options ── */
.rel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  font-size: 13px;
  color: var(--text-secondary);
}

.rel-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.rel-option.disabled {
  cursor: default;
  opacity: 0.4;
}

.rel-option-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.rel-option-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rel-option-type {
  font-size: 11px;
  opacity: 0.45;
  flex-shrink: 0;
}

.rel-option-create {
  border-top: 1px solid var(--border-color);
  margin-top: 2px;
  padding-top: 8px;
}

.rel-option-create .rel-option-title {
  color: #4ade80;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   TABLE EDITOR — Notion-like inline database
   ═══════════════════════════════════════════ */
.table-editor {
  margin: 16px 0;
}

.te-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.te-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.te-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-primary);
  table-layout: auto;
}

/* Header */
.te-th {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0;
  font-weight: 500;
  text-align: left;
  min-width: 140px;
  position: relative;
}

.te-th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
}

.te-th-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.te-th-name {
  flex: 1;
  outline: none;
  cursor: text;
  border-radius: 3px;
  padding: 1px 3px;
  transition: background 0.12s;
}

.te-th-name:focus {
  background: rgba(255, 255, 255, 0.08);
}

.te-th-menu {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s;
}

.te-th:hover .te-th-menu {
  opacity: 1;
}

.te-th-menu:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Row number column */
.te-row-num {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  position: relative;
  padding: 0 4px;
}

thead .te-row-num {
  border-bottom: 2px solid var(--border-color);
}

.te-rn {
  display: block;
}

.te-row-del {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(248, 113, 113, 0.1);
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}

.te-row:hover .te-row-del {
  display: flex;
}

.te-row:hover .te-rn {
  display: none;
}

/* Data cells */
.te-cell {
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0;
  vertical-align: middle;
}

.te-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 7px 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.te-input:focus {
  background: rgba(99, 102, 241, 0.06);
}

.te-number {
  font-variant-numeric: tabular-nums;
}

.te-date {
  color-scheme: dark;
}

.te-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 8px center;
  padding-right: 24px;
}

.te-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
}

.te-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.te-pad {
  border: none;
  width: 0;
}

/* Add column / row */
.te-add-col {
  min-width: 44px;
  width: 44px;
  text-align: center;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.12s;
  padding: 7px 0;
}

.te-add-col:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

.te-add-icon {
  display: inline-flex;
  align-items: center;
}

.te-add-row {
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  transition: color 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.te-add-row:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

/* Column context menu */
.te-col-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  min-width: 180px;
  animation: fadeInPopup 0.12s ease-out;
}

.te-menu-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 8px 2px;
  margin-top: 2px;
}

.te-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.te-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.te-menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.te-menu-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.te-menu-danger {
  color: #f87171;
}

.te-menu-danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

.te-menu-sep {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.te-menu-input {
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

.te-menu-input:focus {
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════
   CUSTOM DARK DATE PICKER
   ═══════════════════════════════════════════ */

/* Trigger button */
.dark-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 8px;
  min-height: 26px;
}

.dark-date-display {
  flex: 1;
  font-size: 13px;
}

.dark-date-placeholder {
  color: var(--text-placeholder);
}

.dark-date-icon {
  display: flex;
  align-items: center;
  opacity: 0.4;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.dark-date-trigger:hover .dark-date-icon {
  opacity: 0.9;
}

/* Calendar popup */
.dark-dp {
  background: var(--bg-elevated, #2d2d2d);
  border: 1px solid var(--border-light, #333);
  border-radius: 12px;
  padding: 12px;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  user-select: none;
}

.dark-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.dark-dp-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8e8e8);
}

.dark-dp-nav {
  display: flex;
  gap: 4px;
}

.dark-dp-btn {
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, #2d2d2d);
  color: var(--text-secondary, #a0a0a0);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.dark-dp-btn:hover {
  background: var(--bg-active, rgba(255, 255, 255, 0.08));
  color: var(--text, #e8e8e8);
}

.dark-dp-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.dark-dp-day-name {
  font-size: 11px;
  color: var(--text-muted, #666);
  padding: 4px 0;
  font-weight: 500;
}

.dark-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dark-dp-cell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.dark-dp-cell:hover {
  background: var(--accent-dim, rgba(212, 244, 65, 0.15));
  color: var(--text, #e8e8e8);
}

.dark-dp-empty {
  cursor: default;
}

.dark-dp-today {
  color: var(--accent, #D4F441);
  font-weight: 700;
  position: relative;
}

.dark-dp-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #D4F441);
}

.dark-dp-selected {
  background: var(--accent, #D4F441) !important;
  color: #fff !important;
  font-weight: 600;
}

.dark-dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2d2d2d);
}

.dark-dp-clear,
.dark-dp-today-btn {
  width: auto;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.dark-dp-today-btn {
  color: var(--accent, #D4F441);
}

.dark-dp-today-btn:hover {
  background: var(--accent-dim, rgba(212, 244, 65, 0.15));
}

/* Hide native date inputs if any remain */
input[type="date"] {
  color-scheme: dark;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════
   TABLE INSERT / REMOVE BUTTONS
   ═══════════════════════════════════════════ */
.te-insert-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px dashed var(--border-color);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.te-insert-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.04);
}

.te-remove-btn {
  display: inline-block;
  padding: 4px 10px;
  margin: 6px 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}

.te-remove-btn:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

/* ═══════════════════════════════════════════
   SIDEBAR NEW TYPE BUTTON
   ═══════════════════════════════════════════ */
.nav-add-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: var(--radius-sm);
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.12s;
}

.nav-add-type:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.nav-add-type svg {
  width: 11px;
  height: 11px;
}

/* ═══════════════════════════════════════════
   NEW TYPE DIALOG
   ═══════════════════════════════════════════ */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.nt-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nt-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}

.nt-color-swatch:hover {
  transform: scale(1.15);
}

.nt-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════
   INLINE TABLE (inside node content)
   ═══════════════════════════════════════════ */
.node-inline-table {
  margin: 8px 0 4px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  outline: none;
  transition: border-color 0.15s;
}

.node-inline-table:focus {
  outline: none;
}

.node-inline-table.it-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.inline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.inline-table th,
.inline-table td {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  min-width: 60px;
  vertical-align: top;
  outline: none;
}

.inline-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inline-table td {
  color: var(--text-primary);
}

.inline-table td:focus,
.inline-table th:focus {
  background: rgba(99, 102, 241, 0.06);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.it-col-add {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.12s, background 0.12s;
  user-select: none;
}

.it-col-add:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.it-row-del {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center;
  cursor: pointer;
  color: transparent;
  font-size: 14px;
  transition: color 0.12s;
  user-select: none;
  border: none !important;
}

tr:hover .it-row-del {
  color: var(--text-muted);
}

.it-row-del:hover {
  color: #f87171 !important;
}

.it-toolbar {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  border-top: 1px solid var(--border-color);
}

.it-btn {
  font-size: 11px;
  padding: 3px 8px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  user-select: none;
}

.it-btn:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

.it-btn-danger:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.06);
}

/* ============================================ */
/*  MANUSCRIPT MODAL                            */
/* ============================================ */
.ms-modal {
  width: min(1100px, 96vw);
  height: min(700px, 88vh);
  background: rgba(28, 28, 35, 0.92);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Manuscript-specific overlay: heavier frosted glass */
#msOverlay {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

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

.ms-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.ms-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ms-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.ms-left textarea {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  font-family: inherit;
}

.ms-left textarea:focus {
  outline: none;
}

.ms-left textarea::placeholder {
  color: var(--text-muted);
}

.ms-left-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

.ms-right {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ms-empty,
.ms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Summary */
.ms-summary {
  padding: 10px 14px;
  background: var(--accent-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
}

/* Toolbar */
.ms-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px;
}

.ms-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Cards */
.ms-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ms-card {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}

.ms-card:hover {
  border-color: var(--accent);
}

.ms-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ms-card-icon {
  font-size: 14px;
  display: flex;
}

.ms-card-type {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ms-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: auto;
}

.ms-badge-new {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.ms-badge-exists {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.ms-badge-dup {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.ms-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ms-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Connections */
.ms-conn-section {
  margin-bottom: 16px;
}

.ms-conn-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ms-conn-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-conn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.ms-conn-from,
.ms-conn-to {
  color: var(--text-primary);
  font-weight: 500;
}

.ms-conn-arrow {
  color: var(--text-muted);
  white-space: nowrap;
}

.ms-conn-arrow em {
  color: var(--accent);
  font-style: normal;
}

/* Import actions */
.ms-import-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ms-save-raw {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Spinner for parse loading */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* Duplicate confirmation */
.ms-card-dup {
  border-color: rgba(251, 191, 36, 0.4);
}

.ms-card-resolved {
  opacity: 0.7;
}

.ms-dup-panel {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
}

.ms-dup-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ms-dup-existing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.ms-dup-existing-icon {
  display: flex;
  align-items: center;
}

.ms-dup-existing-icon svg {
  width: 14px;
  height: 14px;
}

.ms-dup-existing-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.ms-dup-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ms-dup-btn-use {
  background: rgba(156, 163, 175, 0.15) !important;
  color: #9ca3af !important;
  border: 1px solid rgba(156, 163, 175, 0.3) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.ms-dup-btn-use:hover {
  background: rgba(156, 163, 175, 0.25) !important;
}

.ms-dup-btn-new {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.ms-dup-btn-new:hover {
  background: rgba(34, 197, 94, 0.25) !important;
}

/* Icon sizing in cards */
.ms-card-icon svg {
  width: 14px;
  height: 14px;
}

/* SVG checkbox */
.ms-chk,
.ms-select-all>span,
.ms-save-raw>span {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
}

.ms-svg-check {
  display: block;
}

.ms-select-all,
.ms-save-raw {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Unknown type */
.ms-card-unknown {
  border-color: rgba(239, 68, 68, 0.4);
}

.ms-badge-unknown {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ms-unknown-panel {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
}

.ms-unknown-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ms-unknown-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-unknown-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-unknown-opt-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ms-type-select {
  flex: 1;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
}

.ms-type-select:focus {
  border-color: var(--accent);
}

.ms-unknown-divider {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}

.ms-unknown-btn-create {
  background: rgba(212, 244, 65, 0.15) !important;
  color: #D4F441 !important;
  border: 1px solid rgba(212, 244, 65, 0.3) !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ms-unknown-btn-create:hover {
  background: rgba(212, 244, 65, 0.25) !important;
}

/* ── Quick Create Object Modal ── */
.qc-modal {
  width: min(480px, 92vw);
  background: rgba(28, 28, 35, 0.95);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  animation: modalSlideIn 0.2s ease;
}

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

.qc-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.qc-header h3 svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.qc-body {
  padding: 16px 20px;
}

/* ── Kind / Strength Selector Button Group (M1) ── */
.qc-kind-group {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.qc-kind-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.qc-kind-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.18);
}

.qc-kind-btn.active {
  background: rgba(212, 244, 65, 0.12);
  border-color: rgba(212, 244, 65, 0.35);
  color: #D4F441;
}

/* ── M2: Profile Panel (L3 属性层) ── */
.profile-panel {
  margin: 8px 0;
  padding: 0 8px;
}

.profile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.profile-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.profile-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-panel-title .chevron {
  transition: transform 0.2s;
  font-size: 10px;
  color: var(--text-muted);
}

.profile-panel-title .chevron.collapsed {
  transform: rotate(-90deg);
}

.profile-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  transition: background 0.15s;
}

.profile-dim-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.profile-dim-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.profile-dim-value input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.profile-dim-value input:hover {
  border-color: rgba(255, 255, 255, 0.10);
}

.profile-dim-value input:focus {
  border-color: rgba(212, 244, 65, 0.35);
  outline: none;
  background: rgba(255, 255, 255, 0.03);
}

.profile-scale-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.profile-scale-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-scale-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}

.profile-scale-btn.active {
  background: rgba(212, 244, 65, 0.10);
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
}

.profile-empty-hint {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.profile-add-dim-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.profile-add-dim-btn:hover {
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
  background: rgba(212, 244, 65, 0.05);
}

/* ── Dynamics Timeline (AI 研究动态) ── */
.dynamics-panel {
  margin: 16px 0 8px;
  padding: 0 8px;
}

.dynamics-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.dynamics-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.dynamics-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.dynamics-count {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 8px;
}

.dynamics-timeline {
  position: relative;
  padding: 4px 0 8px 22px;
}

.dynamics-item {
  position: relative;
  padding: 8px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}

.dynamics-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dynamics-dot {
  position: absolute;
  left: -16px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #5b7fff);
  border: 2px solid var(--bg-card, #1a1c20);
  z-index: 1;
}

.dynamics-line {
  position: absolute;
  left: -13px;
  top: 22px;
  bottom: -4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.dynamics-item:last-child .dynamics-line {
  display: none;
}

.dynamics-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.dynamics-topic {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.dynamics-phase {
  font-size: 10px;
  color: var(--accent, #5b7fff);
  margin-top: 2px;
  opacity: 0.8;
}

/* ── M2: Process Timeline (L4 动态层) ── */
.process-panel {
  margin: 16px 0 8px;
  padding: 0 8px;
}

.process-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.process-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.process-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.process-card {
  margin: 6px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: border-color 0.15s;
}

.process-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.process-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.process-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.process-card-name .cyclic-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  font-weight: 500;
}

.process-card-actions {
  display: flex;
  gap: 4px;
}

.process-card-actions button {
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.process-card-actions button:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
}

.process-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 4px;
  overflow-x: auto;
  position: relative;
}

.process-state-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
}

.process-state-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(212, 244, 65, 0.40);
  background: rgba(212, 244, 65, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #D4F441;
  cursor: pointer;
  transition: all 0.15s;
}

.process-state-circle:hover {
  border-color: #D4F441;
  background: rgba(212, 244, 65, 0.15);
  transform: scale(1.1);
}

.process-state-circle.form-type {
  border-radius: 6px;
  border-color: rgba(168, 85, 247, 0.40);
  background: rgba(168, 85, 247, 0.08);
  color: #a855f7;
}

.process-state-circle.form-type:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
}

.process-state-label {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 60px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  flex-shrink: 0;
}

.process-arrow-line {
  width: 40px;
  height: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.15);
  position: relative;
}

.process-arrow-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  border: 4px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.25);
}

.process-arrow-trigger {
  font-size: 9px;
  color: var(--text-muted);
  max-width: 50px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

/* ── Unified L-Section Styles (DEFINITION / DYNAMICS / CATEGORY) ── */

/* 5-Layer Completeness Indicator */
.layer-completeness {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  margin: 0 0 4px;
}

.layer-completeness-label {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  margin-right: 4px;
  text-transform: uppercase;
}

.lc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s;
  cursor: default;
  position: relative;
}

.lc-dot.done {
  background: rgba(52, 211, 153, 0.3);
  border-color: #34d399;
}

.lc-dot.missing {
  cursor: pointer;
}

.lc-dot.missing:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.3);
}

.lc-score {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}

.process-panel-title .chevron,
.def-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
  color: var(--text-muted);
}

.process-panel-title .chevron.collapsed,
.def-chevron.collapsed {
  transform: rotate(-90deg);
}

/* Section divider between L-sections */
.process-panel+.process-panel,
.definition-section+.process-panel,
.process-panel:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* DYNAMICS Timeline */
.dynamics-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 4px;
  overflow-x: auto;
}

.dynamics-timeline::-webkit-scrollbar {
  height: 3px;
}

.dynamics-timeline::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.dyn-state-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  flex-shrink: 0;
}

.dyn-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--bg-main);
  transition: all 0.2s;
}

.dyn-state-dot.initial {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.2);
}

.dyn-state-dot.terminal {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.2);
}

.dyn-state-dot.functional {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}

.dyn-state-name {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyn-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
  flex-shrink: 0;
  position: relative;
}

.dyn-arrow-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}

.dyn-arrow-line::after {
  content: '›';
  position: absolute;
  right: -2px;
  top: -7px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}

.dyn-arrow-trigger {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
  text-align: center;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state with AI trigger */
.process-empty-hint {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.l-section-ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.l-section-ai-trigger:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.process-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
}

.process-add-btn:hover {
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
  background: rgba(212, 244, 65, 0.05);
}

/* Process create/edit modal overlay */
.process-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-modal {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  min-width: 340px;
  max-width: 420px;
}

.process-modal h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.process-modal label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 10px;
}

.process-modal input[type="text"],
.process-modal textarea,
.process-modal select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.process-modal input:focus,
.process-modal textarea:focus,
.process-modal select:focus {
  outline: none;
  border-color: rgba(212, 244, 65, 0.35);
}

.process-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.process-modal-actions .btn-cancel {
  padding: 5px 14px;
  font-size: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}

.process-modal-actions .btn-save {
  padding: 5px 14px;
  font-size: 12px;
  background: rgba(212, 244, 65, 0.15);
  border: 1px solid rgba(212, 244, 65, 0.30);
  border-radius: 6px;
  color: #D4F441;
  cursor: pointer;
  font-weight: 600;
}

.process-modal-actions .btn-save:hover {
  background: rgba(212, 244, 65, 0.25);
}

/* ── Sidebar group toggle ── */
.nav-group-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-group-toggle:hover {
  color: var(--text);
}

/* ── Quick Create grouped layout ── */
.qc-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 10px 0 4px;
  padding: 0 2px;
  letter-spacing: 0.03em;
}

.qc-group-label:first-child {
  margin-top: 0;
}

.qc-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.qc-type-grid {
  max-height: 340px;
  overflow-y: auto;
}


.qc-type-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
}

.qc-type-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.qc-type-item.selected {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.12);
  color: var(--text);
}

.qc-type-item .type-svg-icon {
  flex-shrink: 0;
}

.qc-title-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  margin-top: 6px;
}

.qc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.qc-new-type-link {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.qc-new-type-link:hover {
  color: var(--purple);
}

.qc-create-btn {
  min-width: 80px;
}

.qc-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================ */
/*  DOMAIN RESEARCH MODAL                       */
/* ============================================ */
#researchOverlay {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.rs-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 12px 0 8px;
}

.rs-group {
  margin-bottom: 8px;
}

.rs-group-header {
  font-size: 12px;
  padding: 4px 0;
  margin-bottom: 4px;
}

.rs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  margin-bottom: 4px;
  transition: border-color 0.12s;
}

.rs-item:hover {
  border-color: var(--accent);
}

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

.rs-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-item-brief {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-conn-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rs-conn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.rs-detail-card {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.rs-detail-card:hover {
  border-color: var(--accent);
}

.rs-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rs-detail-type {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}

.rs-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.rs-detail-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-line;
}

/* ============================================
   KNOWLEDGE PANEL (right sidebar)
   ============================================ */

.kp-panel {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  margin-left: 6px;
  overflow: hidden;
  position: relative;
  z-index: 15;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.kp-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  transition: background 0.15s;
}

.kp-resizer:hover,
.kp-resizer:active {
  background: var(--accent);
}

.kp-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
}

.kp-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(140, 150, 180, 0.7);
  flex-shrink: 0;
}

.kp-header-icon {
  font-size: 14px;
}

/* ── History Toggle Button ── */
.kp-history-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.kp-history-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.kp-header-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Mode Toggle (segmented control) ── */
.kp-mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
  flex-shrink: 0;
}

.kp-mode-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.kp-mode-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.kp-mode-btn.active {
  background: rgba(212, 244, 65, 0.2);
  color: #D4F441;
}

/* ── Prompt Suggestion Chips ── */
.kp-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
}

.kp-prompt-chip {
  background: rgba(212, 244, 65, 0.08);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 11px;
  color: #D4F441;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.kp-prompt-chip:hover {
  background: rgba(212, 244, 65, 0.18);
  border-color: rgba(212, 244, 65, 0.4);
  color: #E0F76B;
}

/* ── History Panel ── */
.kp-history {
  position: absolute;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 100%;
  background: #1a1b20;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: kpHistorySlideIn 0.15s ease-out;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
}

@keyframes kpHistorySlideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.kp-history-header {
  padding: 10px 12px 6px;
  flex-shrink: 0;
}

.kp-history-new {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kp-history-new:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--text-muted);
}

.kp-history-search {
  padding: 0 12px 8px;
  flex-shrink: 0;
}

.kp-history-search input {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text);
  outline: none;
}

.kp-history-search input:focus {
  border-color: var(--accent);
}

.kp-history-search input::placeholder {
  color: var(--text-faint);
}

.kp-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.kp-history-group {
  margin-bottom: 4px;
}

.kp-history-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 6px 4px;
  letter-spacing: 0.05em;
}

/* ── History Item (flex row) ── */
.kp-history-item {
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}

.kp-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.kp-history-item.active {
  background: rgba(212, 244, 65, 0.15);
}

.kp-hi-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kp-hi-text {
  flex: 1;
  min-width: 0;
}

.kp-history-item-title {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-history-item.active .kp-history-item-title {
  color: var(--text);
  font-weight: 500;
}

.kp-history-item-meta {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Star badge */
.kp-hi-star {
  color: #f5a623;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Three-dot button */
.kp-hi-dots {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kp-history-item:hover .kp-hi-dots {
  opacity: 1;
}

.kp-hi-dots:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ── Context Menu ── */
.kp-hi-menu {
  background: #2a2b32;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: kpHiMenuIn 0.1s ease-out;
}

@keyframes kpHiMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-hi-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.kp-hi-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.kp-hi-menu-icon {
  display: flex;
  align-items: center;
  width: 16px;
  justify-content: center;
}

.kp-hi-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.kp-hi-menu-danger {
  color: #e85d5d;
}

.kp-hi-menu-danger:hover {
  background: rgba(232, 93, 93, 0.1);
  color: #f06;
}

/* ── Categorize Modal ── */
.kp-hi-cat-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.kp-hi-cat-box {
  background: #2a2b32;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.kp-hi-cat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.kp-hi-cat-search {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.kp-hi-cat-search:focus {
  border-color: var(--accent);
}

.kp-hi-cat-search::placeholder {
  color: var(--text-faint);
}

.kp-hi-cat-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
}

.kp-hi-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.kp-hi-cat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.kp-hi-cat-item.kp-hi-cat-active {
  background: rgba(212, 244, 65, 0.15);
  color: var(--text);
  font-weight: 500;
}

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

.kp-hi-cat-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
}

.kp-hi-cat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.kp-history-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* Keep old select hidden for backward compat */
.kp-session-select select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 140px;
  cursor: pointer;
}

.kp-session-select select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Phase Progress ── */
.kp-progress {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  min-height: 24px;
}

.kp-progress-step {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.kp-progress-step.active {
  color: var(--accent);
  font-weight: 600;
}

.kp-progress-step.completed {
  color: var(--accent);
}

.kp-progress-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
  min-width: 8px;
}

.kp-progress-line.completed {
  background: var(--accent);
}

.kp-progress-line.active {
  background: var(--accent);
}

.kp-progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.kp-progress-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(212, 244, 65, 0.4);
}

.kp-progress-dot.completed {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(212, 244, 65, 0.3);
}

/* ── Chat ── */
.kp-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kp-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  animation: kpSlideIn 0.25s ease;
}

@keyframes kpSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-msg.user {
  align-self: flex-end;
  background: var(--accent-dim);
  color: var(--text);
  border-bottom-right-radius: 3px;
}

.kp-msg.assistant {
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 3px;
}

.kp-msg.system {
  align-self: center;
  background: var(--green-dim);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: var(--green);
  font-size: 11px;
  text-align: center;
  max-width: 300px;
}

/* Markdown in messages */
.kp-msg p {
  margin-bottom: 6px;
}

.kp-msg p:last-child {
  margin-bottom: 0;
}

.kp-msg strong {
  color: var(--text);
  font-weight: 600;
}

.kp-msg em {
  color: var(--accent);
  font-style: normal;
}

.kp-msg code {
  background: var(--bg-input);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
}

.kp-msg ul,
.kp-msg ol {
  padding-left: 16px;
  margin-bottom: 6px;
}

.kp-msg li {
  margin-bottom: 2px;
}

.kp-msg h3,
.kp-msg h4 {
  margin: 8px 0 4px;
  color: var(--accent);
  font-size: 12px;
}

/* Typing indicator */
.kp-typing {
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  gap: 3px;
}

.kp-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: kpBounce 1.4s infinite;
}

.kp-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.kp-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes kpBounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ── Search bar ── */
.kp-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.kp-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.kp-search-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  font-family: inherit;
  min-width: 0;
}

.kp-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-search-input::placeholder {
  color: var(--text-placeholder);
}

.kp-search-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 48px;
  text-align: center;
}

.kp-search-nav {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.kp-search-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.kp-search-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  transition: color 0.15s;
}

.kp-search-close:hover {
  color: var(--text);
}

/* Search highlight */
mark.kp-search-hl {
  background: rgba(255, 200, 50, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.kp-msg.kp-search-current mark.kp-search-hl {
  background: rgba(255, 200, 50, 0.65);
}

.kp-msg.kp-search-current {
  outline: 1px solid rgba(255, 200, 50, 0.3);
  outline-offset: -1px;
  border-radius: 6px;
}

/* ── Chat Empty State ── */
.kp-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.kp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 16px;
}

.kp-empty-greeting {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.kp-empty-hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.kp-hint-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.kp-hint-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}

.kp-hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
}

.kp-empty-tip {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Input ── */
.kp-input-area {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.kp-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

/* ── Attach / image upload button ── */
.kp-attach-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.kp-attach-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Plus (+) button and popup menu ── */
.kp-plus-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.kp-plus-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.kp-plus-menu {
  position: absolute;
  bottom: 40px;
  left: 0;
  min-width: 140px;
  background: rgba(25, 25, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.kp-plus-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}

.kp-plus-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

/* ── Dark send button variant ── */
.kp-send.kp-send-dark {
  background: #1a1a1a;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
}

.kp-send.kp-send-dark:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: #222;
}

/* ── Image preview strip ── */
.kp-img-preview {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.kp-img-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.kp-img-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.kp-img-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(220, 50, 50, 0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.kp-img-remove:hover {
  transform: scale(1.15);
}

/* ── Inline images in messages ── */
.kp-msg-images {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.kp-msg-img {
  max-width: 120px;
  max-height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.kp-msg-img:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

.kp-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

.kp-input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-input::placeholder {
  color: var(--text-placeholder);
}

.kp-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.kp-send:hover {
  opacity: 0.85;
}

.kp-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.kp-finalize {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.kp-finalize:hover {
  opacity: 0.85;
}

.kp-finalize:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── New Session Prompt ── */
.kp-new-prompt {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.kp-new-prompt input {
  width: 100%;
  max-width: 260px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 12px;
  text-align: center;
}

.kp-new-prompt input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-new-start {
  padding: 6px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.kp-new-start:hover {
  opacity: 0.9;
}

/* ── Import button in system messages ── */
.kp-import-btn {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--green-dim);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: var(--green);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
}

.kp-import-btn:hover {
  background: rgba(74, 222, 128, 0.2);
}

/* ── Thinking Indicator ── */
.kp-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(212, 244, 65, 0.08);
  border: 1px solid rgba(212, 244, 65, 0.15);
  border-radius: 10px;
  font-size: 12px;
  color: var(--accent);
  width: fit-content;
}

.kp-thinking-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 244, 65, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(212, 244, 65, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: kpAvatarPulse 2s ease-in-out infinite;
}

.kp-thinking-avatar svg {
  stroke: var(--accent);
}

@keyframes kpAvatarPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 244, 65, 0.15);
  }

  50% {
    box-shadow: 0 0 8px 3px rgba(212, 244, 65, 0.2);
  }
}

.kp-thinking-timer {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: right;
  letter-spacing: 0.5px;
}

.kp-thinking-icon {
  display: flex;
  animation: kpThinkSpin 2s linear infinite;
}

.kp-thinking-icon svg {
  stroke: var(--accent);
}

.kp-thinking-text {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.kp-thinking-dots {
  display: flex;
  gap: 0;
}

.kp-thinking-dots span {
  animation: kpDotBlink 1.4s infinite;
  font-weight: bold;
}

.kp-thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.kp-thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes kpThinkSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes kpDotBlink {

  0%,
  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ── Thinking Summary (collapsible in AI message) ── */
.kp-thinking-summary {
  margin-bottom: 8px;
}

.kp-thinking-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(212, 244, 65, 0.06);
  border: 1px solid rgba(212, 244, 65, 0.12);
  border-radius: 6px;
  font-size: 11px;
  color: rgba(212, 244, 65, 0.7);
  cursor: pointer;
  transition: all 0.15s;
  width: fit-content;
}

.kp-thinking-toggle:hover {
  background: rgba(212, 244, 65, 0.12);
  color: rgba(212, 244, 65, 0.9);
}

.kp-thinking-toggle svg {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.kp-thinking-toggle.open svg {
  transform: rotate(90deg);
}

.kp-thinking-content {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(212, 244, 65, 0.04);
  border-left: 2px solid rgba(212, 244, 65, 0.2);
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.kp-thinking-content.open {
  display: block;
}

/* ── AI Choice Options ── */
.kp-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.kp-choice-btn {
  background: rgba(212, 244, 65, 0.06);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.kp-choice-btn:hover {
  background: rgba(212, 244, 65, 0.15);
  border-color: rgba(212, 244, 65, 0.4);
  color: var(--text);
}

.kp-choice-btn svg {
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Action Bar on AI Messages ── */
.kp-action-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.kp-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.kp-act-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.kp-act-btn.active {
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  border-color: rgba(212, 244, 65, 0.2);
}

.kp-act-btn svg {
  flex-shrink: 0;
}

.kp-act-btn.saving {
  pointer-events: none;
  opacity: 0.6;
}

.kp-spin {
  animation: kpSaveSpin 0.8s linear infinite;
}

@keyframes kpSaveSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Bi-Link Inline Annotation ── */
.kp-bilink {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.15s;
  border-bottom: 1px dashed rgba(212, 244, 65, 0.3);
}

.kp-bilink:hover {
  background: rgba(212, 244, 65, 0.1);
  border-bottom-color: var(--accent);
  border-radius: 2px;
}

/* ── Session Management ── */
.kp-sess-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.kp-sess-edit-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.kp-sess-menu {
  background: rgba(25, 25, 35, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 10px;
  min-width: 320px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: kpMenuSlide 0.15s ease;
  overflow: hidden;
}

@keyframes kpMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-sess-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-sess-menu-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}

.kp-sess-menu-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 6px;
}

.kp-sess-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: default;
  transition: background 0.15s;
}

.kp-sess-menu-item:hover {
  background: rgba(212, 244, 65, 0.08);
}

.kp-sess-menu-item.active {
  background: rgba(212, 244, 65, 0.12);
  border-left: 2px solid var(--accent);
}

.kp-sess-cb {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.kp-sess-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text);
}

.kp-sess-menu-label:hover {
  color: var(--accent);
}

.kp-sess-domain-badge {
  font-size: 10px;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.kp-sess-unlinked {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
  font-style: italic;
}

.kp-sess-unlink {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
  font-style: normal;
}

.kp-sess-unlink:hover {
  opacity: 1;
}

.kp-sess-menu-act {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.kp-sess-menu-item:hover .kp-sess-menu-act {
  opacity: 0.7;
}

.kp-sess-menu-act:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.08);
}

.kp-sess-del:hover {
  background: rgba(240, 80, 80, 0.15) !important;
}

/* Batch assign */
.kp-sess-assign-section {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-sess-assign-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kp-sess-assign-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.kp-sess-assign-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
}

.kp-sess-assign-select:focus {
  border-color: var(--accent);
}

.kp-sess-assign-btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.kp-sess-assign-btn:hover {
  background: #9333ea;
}

/* Sidebar domain-linked sessions */
.kp-sess-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 1px 5px;
  transition: color 0.15s;
}

.kp-sess-count:hover {
  color: var(--accent) !important;
}

/* ── Domain Tag Tree (collapsible hierarchy) ── */
.dt-tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  font-size: 12.5px;
}

.dt-tree-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-faint);
  transition: color 0.15s, background 0.15s;
}

.dt-tree-chev:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.dt-tree-chev-spacer {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dt-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.dt-desc-count {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}

.dt-tree-children {
  animation: dtSlideDown 0.15s ease;
}

@keyframes dtSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-domain-sessions {

  padding: 2px 0 4px 24px;
  animation: kpMenuSlide 0.15s ease;
}

.kp-domain-sess-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kp-domain-sess-item:hover {
  background: rgba(212, 244, 65, 0.08);
  color: var(--text);
}

.kp-domain-sess-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.kp-domain-sess-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-domain-sess-phase {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── Entity Confirm Panel ── */
.kp-entity-confirm {
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(212, 244, 65, 0.25);
  border-radius: 10px;
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  animation: kpEntitySlide 0.3s ease;
}

@keyframes kpEntitySlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 8px;
}

.kp-entity-dismiss {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}

.kp-entity-dismiss:hover {
  color: #fff;
}

.kp-entity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.kp-entity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s;
}

.kp-entity-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.kp-entity-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kp-entity-icon {
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.kp-entity-title {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.kp-entity-type {
  color: #888;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.kp-entity-brief {
  color: #999;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.kp-entity-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

.kp-entity-confirm-btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.kp-entity-confirm-btn:hover {
  opacity: 0.85;
}

.kp-entity-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-entity-cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.kp-entity-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.kp-entity-done {
  text-align: center;
  color: #8f8;
  font-size: 12px;
  padding: 8px;
}

.kp-entity-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.kp-entity-badge.new {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.kp-entity-badge.existing {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.kp-entity-conn-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-entity-conn-title {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 4px;
  font-weight: 500;
}

.kp-entity-conn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 100px;
  overflow-y: auto;
}

.kp-entity-conn-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #bbb;
  padding: 2px 6px;
}

.kp-entity-conn-item span:first-child,
.kp-entity-conn-item span:last-child {
  color: var(--accent);
  font-weight: 500;
}

.kp-conn-arrow {
  color: #777;
  font-size: 10px;
}

.kp-conn-arrow em {
  color: #06b6d4;
  font-style: normal;
}

/* ── Markdown Table ── */
.kp-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.5;
}

.kp-table th,
.kp-table td {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.kp-table th {
  background: rgba(212, 244, 65, 0.1);
  font-weight: 600;
  color: var(--text-primary);
}

.kp-table td {
  background: rgba(255, 255, 255, 0.02);
}

.kp-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* ── ASCII Diagram / Structure ── */
.kp-diagram {
  margin: 8px 0;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow-x: auto;
}

.kp-diagram pre {
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  white-space: pre;
}

/* ── Blockquote ── */
.kp-msg blockquote {
  margin: 6px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent);
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 11.5px;
}

/* ── Import button with SVG icon ── */
.kp-import-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Domain Detail Page: AI Session Blocks ── */
.domain-session-block {
  margin: 8px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.domain-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.domain-session-phase {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.domain-session-meta {
  font-size: 11px;
  color: var(--text-faint);
}

/* Framework tag pills */
.domain-fw-section {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.domain-fw-label {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 50px;
}

.domain-fw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.domain-fw-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(212, 244, 65, 0.1);
  color: var(--accent);
  border: 1px solid rgba(212, 244, 65, 0.15);
}

.domain-fw-tag.type {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.15);
}

/* Chat history in domain view */
.domain-chat-history {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}

.domain-chat-msg {
  margin-bottom: 10px;
  padding: 6px 0;
}

.domain-chat-msg+.domain-chat-msg {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 10px;
}

.domain-chat-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--text-faint);
}

.domain-chat-msg.assistant .domain-chat-role {
  color: var(--accent);
}

.domain-chat-msg.user .domain-chat-role {
  color: #4ade80;
}

.domain-chat-content {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.domain-chat-content h3,
.domain-chat-content h4 {
  font-size: 13px;
  margin: 8px 0 4px;
  color: var(--text-primary);
}

.domain-chat-content ul {
  padding-left: 16px;
  margin: 4px 0;
}

.domain-chat-content li {
  margin-bottom: 2px;
}

.domain-chat-content .kp-table-wrap {
  margin: 6px 0;
}

.domain-chat-content .kp-diagram {
  margin: 6px 0;
}

.domain-chat-content blockquote {
  margin: 6px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 11.5px;
}

/* ── AI Fill Button ── */
.ai-fill-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(212, 244, 65, 0.2);
  color: var(--accent);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-fill-btn:hover {
  background: rgba(212, 244, 65, 0.25);
  border-color: var(--accent);
}

.ai-fill-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-fill-spin {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  animation: aiFillSpin 0.8s linear infinite;
}

@keyframes aiFillSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Per-field AI generate button */
.ai-field-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-top: 1px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s;
}

.ai-field-btn:hover {
  opacity: 1;
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(212, 244, 65, 0.3);
}

.ai-field-btn:active {
  transform: scale(0.9);
}

.ai-field-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

.ai-field-btn.ai-field-loading {
  opacity: 1;
  color: var(--accent);
  animation: aiFieldPulse 1.2s ease-in-out infinite;
}

.ai-field-btn.ai-field-done {
  opacity: 1;
  color: var(--green);
  border-color: var(--green);
  background: rgba(52, 199, 89, 0.1);
}

@keyframes aiFieldPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* Relation Field Sub-components */
.relation-edit-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
}

.relation-link:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.05);
}

/* ── AI Fill Progressive Animations ── */
.prop-row.ai-filling {
  background: rgba(212, 244, 65, 0.06);
  border-left: 2px solid var(--accent);
  animation: aiFillPulse 1.2s ease-in-out infinite;
}

.prop-row.ai-done {
  background: rgba(34, 197, 94, 0.08);
  border-left: 2px solid #22c55e;
  animation: aiFillFlash 0.4s ease;
}

.prop-row.ai-skipped {
  opacity: 0.6;
}

.prop-row.ai-error {
  border-left: 2px solid #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

@keyframes aiFillPulse {

  0%,
  100% {
    background: rgba(212, 244, 65, 0.04);
  }

  50% {
    background: rgba(212, 244, 65, 0.12);
  }
}

@keyframes aiFillFlash {
  0% {
    background: rgba(34, 197, 94, 0.2);
  }

  100% {
    background: rgba(34, 197, 94, 0.08);
  }
}

/* ============================================
   AUTH OVERLAY
   ============================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
}

.auth-card {
  width: 360px;
  padding: 48px 36px;
  text-align: center;
}

.auth-logo {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field {
  text-align: left;
}

.auth-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.auth-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border var(--transition);
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-pw-wrap {
  position: relative;
}

.auth-pw-wrap input {
  padding-right: 38px;
}

.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}

.auth-pw-toggle:hover {
  opacity: 1;
}

.auth-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 4px;
}

.auth-btn:hover {
  background: var(--accent-hover);
}

.auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-error {
  font-size: 12px;
  color: var(--red);
  min-height: 18px;
}

.auth-switch {
  font-size: 12px;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ── User menu (bottom of sidebar) ── */
.user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.user-bar:hover {
  background: var(--bg-hover);
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-logout {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}

.user-bar:hover .user-logout {
  opacity: 1;
}

.user-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--red);
}

/* ═══ Graph Main (center canvas, always visible) ═══ */
.graph-main {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--bg-main);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.graph-main canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.graph-main canvas:active {
  cursor: grabbing;
}

/* ═══ Graph Breadcrumb Navigation ═══ */
.graph-breadcrumb {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  background: rgba(25, 25, 25, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.graph-breadcrumb .bc-home {
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.15s;
}

.graph-breadcrumb .bc-home:hover {
  opacity: 0.7;
}

.graph-breadcrumb .bc-home.active {
  cursor: default;
  color: var(--text-primary);
}

.graph-breadcrumb .bc-sep {
  margin: 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.graph-breadcrumb .bc-item {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.graph-breadcrumb .bc-item:hover {
  color: var(--text-primary);
}

.graph-breadcrumb .bc-item.active {
  cursor: default;
  color: var(--text-primary);
  font-weight: 500;
}

/* ═══ Right Panel → now AI Float Panel ═══ */
.ai-float-panel {
  position: absolute;
  left: 6px;
  top: 40px;
  bottom: 6px;
  width: 360px;
  min-width: 260px;
  max-width: 45vw;
  display: flex;
  flex-direction: column;
  background: rgba(25, 25, 25, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.ai-float-resizer {
  position: absolute;
  right: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 25;
  transition: background 0.15s;
}

.ai-float-resizer:hover,
.ai-float-resizer:active {
  background: var(--accent);
}

.ai-float-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ═══ Object Panel (right-side drawer, fixed overlay) ═══ */
.object-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 480px;
  max-width: 60vw;
  background: rgba(30, 30, 30, 0.72);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: none;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
  transform: translateX(calc(100% + 20px));
  transition: transform 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.object-panel.open {
  transform: translateX(0);
}

/* Resize handle on left edge */
.op-resizer {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}

.op-resizer:hover,
.op-resizer:active {
  background: var(--accent);
}

.op-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.op-icon {
  font-size: 16px;
  color: var(--accent);
}

.op-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.op-action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.op-action-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.op-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}

.op-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.op-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.op-body::-webkit-scrollbar {
  width: 5px;
}

.op-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ═══ Object Drawer (slides out left of AI panel) ═══ */
.object-drawer {
  position: absolute;
  right: 406px;
  /* right-panel width + gap */
  top: 6px;
  bottom: 6px;
  width: 340px;
  background: rgba(25, 25, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  z-index: 19;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: drawerSlideIn 0.25s ease-out;
}

@keyframes drawerSlideIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.od-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.od-icon {
  font-size: 16px;
  color: var(--accent);
}

.od-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.od-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.od-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.od-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

.right-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ═══ Object Card (collapsible top section in right panel) ═══ */
.rp-object-card {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.rp-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.rp-card-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.rp-card-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.rp-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-card-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.rp-card-chevron.expanded {
  transform: rotate(90deg);
}

.rp-card-body {
  padding: 0 14px 12px;
  max-height: 300px;
  overflow-y: auto;
}

.rp-card-body::-webkit-scrollbar {
  width: 3px;
}

.rp-card-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.rp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.rp-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rp-card-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.rp-card-desc a,
.rp-card-desc .obj-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

.rp-card-desc a:hover,
.rp-card-desc .obj-link:hover {
  text-decoration: underline;
}

.rp-card-attrs,
.rp-card-content {
  margin-top: 6px;
}

.rp-card-section-toggle {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.rp-card-section-toggle:hover {
  color: var(--text-secondary);
}

/* ═══ Research Section (always visible below card) ═══ */
.rp-research-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rp-research-section .kp-inner {
  height: 100%;
}

/* ═══ Research Canvas (legacy compat — now graph-main is primary) ═══ */
.research-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  perspective: 1200px;
  overflow: hidden;
}

.research-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.research-canvas canvas:active {
  cursor: grabbing;
}

/* ── Depth bar overlay (unified graph) ── */
.rc-depth-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 22, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 5px 14px;
  pointer-events: auto;
}

.rc-depth-bar .graph-depth-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-depth-bar .depth-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 500;
}

.rc-depth-bar .depth-buttons {
  display: flex;
  gap: 2px;
}

.rc-depth-bar .depth-btn {
  min-width: 22px;
  height: 22px;
  font-size: 10px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.rc-depth-bar .depth-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.rc-depth-bar .depth-btn.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
  font-weight: 600;
}

.rc-node-count {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.rc-overlay-info {
  display: none;
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.rc-overlay-info .rc-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-overlay-info .rc-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rc-outline {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 200px;
  max-height: 60%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6px 14px 10px;
  z-index: 2;
  pointer-events: auto;
  border-radius: 0 8px 8px 0;
}

.rc-outline-inner {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.rc-outline-inner .rc-phase-label {
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-outline-inner .rc-phase-label:first-child {
  margin-top: 0;
}

.rc-outline-inner .rc-phase-label svg {
  opacity: 0.7;
}

.rc-outline-inner .rc-item {
  padding-left: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: rcItemIn 0.3s ease;
}

.rc-outline-inner .rc-item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.6;
}

@keyframes rcItemIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* New node flash highlight in tree outline */
.rc-outline-inner .rc-item.rc-item-flash {
  animation: rcFlashGlow 2s ease-out;
}

@keyframes rcFlashGlow {
  0% {
    background: rgba(76, 175, 80, 0.25);
    color: #fff;
  }

  100% {
    background: transparent;
  }
}

.rc-outline-inner .rc-tree-children {
  transition: all 0.2s ease;
}

.rc-outline-inner .rc-tree-chevron {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.rc-outline-inner .rc-tree-chevron:hover {
  opacity: 1;
}

/* ── Node hover tooltip ── */
.rc-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 244, 65, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  max-width: 200px;
  animation: rcTooltipIn 0.15s ease;
}

.rc-tooltip-name {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
}

.rc-tooltip-meta {
  font-size: 10px;
  color: var(--text-muted);
}

@keyframes rcTooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Node detail panel ── */
.rc-detail-panel {
  position: absolute;
  z-index: 25;
  width: 280px;
  background: rgba(18, 18, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 244, 65, 0.12);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: rcDetailIn 0.2s ease;
  pointer-events: auto;
}

@keyframes rcDetailIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rc-detail-type {
  font-size: 10px;
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rc-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.rc-detail-close:hover {
  opacity: 1;
  color: #fff;
}

.rc-detail-name {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}

.rc-detail-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.rc-detail-connections {
  margin-bottom: 14px;
}

.rc-detail-connections .rc-conn-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rc-detail-connections .rc-conn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rc-detail-connections .rc-conn-tag {
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.rc-detail-connections .rc-conn-tag:hover {
  background: rgba(212, 244, 65, 0.12);
  color: var(--accent);
}

.rc-detail-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.rc-detail-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.rc-detail-btn:hover {
  background: rgba(212, 244, 65, 0.1);
  border-color: rgba(212, 244, 65, 0.2);
  color: var(--accent);
}

.rc-detail-btn svg {
  flex-shrink: 0;
}

/* ── Entity links in chat ── */
.kp-entity-link {
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted rgba(212, 244, 65, 0.3);
  transition: all 0.15s;
}

.kp-entity-link:hover {
  color: #fff;
  border-bottom-color: var(--accent);
  text-shadow: 0 0 8px rgba(212, 244, 65, 0.3);
}

/* ── Global entity popup ── */
.kp-entity-popup {
  position: fixed !important;
  z-index: 9999 !important;
}

/* ============================================
   KNOWLEDGE OVERVIEW DASHBOARD
   ============================================ */
.ko-dashboard {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

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

.ko-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.ko-card-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.ko-card-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.ko-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.ko-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.ko-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* 5-Layer bar chart */
.ko-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ko-bar-label {
  width: 56px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ko-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.ko-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.ko-bar-pct {
  width: 32px;
  font-size: 11px;
  color: #fff;
  text-align: right;
  flex-shrink: 0;
}

.ko-bar-count {
  width: 50px;
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
  flex-shrink: 0;
}

/* Domain distribution */
.ko-domain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

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

.ko-domain-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}

.ko-domain-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Type distribution grid */
.ko-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ko-type-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.ko-type-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ko-type-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Incomplete list */
.ko-incomplete-list {
  max-height: 400px;
  overflow-y: auto;
}

.ko-incomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.15s;
}

.ko-incomplete-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ko-inc-score {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ko-inc-title {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko-inc-type {
  font-size: 10px;
  flex-shrink: 0;
}

.ko-inc-missing {
  font-size: 9px;
  color: var(--text-faint);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .ko-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .ko-row2 {
    grid-template-columns: 1fr;
  }
}