:root {
  /* ==========================================================================
   * Build Hub Design System v1 — Authoritative Token Block (A-TOKEN.1 ~ A-TOKEN.7)
   * ========================================================================== */

  /* 1. Surfaces & Text (Monotone Ink System — A-TOKEN.2) */
  --bh-canvas: #F8F8F8;
  --bh-sidebar: #FFFFFF;
  --bh-card: #FFFFFF;
  --bh-text: #141414;
  --bh-text-soft: #3D3D3D;
  --bh-muted: #6E6E6E;
  --bh-border: #ECECEC;
  --bh-border-soft: #F2F2F2;
  --bh-ink: #141414;
  --bh-ink-hover: #000000;
  --bh-hover: #F5F5F5;
  --bh-select: #141414;
  --bh-select-soft: #F5F5F5;

  /* 2. Desaturated Semantic Status + WCAG AA Text Variants (A-TOKEN.3, A-TOKEN.3b) */
  --bh-success: #3E7D5A;
  --bh-success-text: #3B7655;
  --bh-danger: #C0473B;
  --bh-warning: #B5862F;
  --bh-warning-text: #8A6624;

  /* 3. Garment Category Tokens (A-TOKEN.4) */
  --bh-cat-jk: #565B61;
  --bh-cat-jk-bg: #EAEBEC;
  --bh-cat-bl: #6F7A66;
  --bh-cat-bl-bg: #ECEFE9;
  --bh-cat-top: #7C6E5E;
  --bh-cat-top-bg: #F1EBE5;
  --bh-cat-pt: #5E6975;
  --bh-cat-pt-bg: #E9ECEF;
  --bh-cat-sk: #6E6573;
  --bh-cat-sk-bg: #EEEAEF;
  --bh-cat-ops: #7C6A5C;
  --bh-cat-ops-bg: #F1EAE4;
  --bh-cat-knit: #66684F;
  --bh-cat-knit-bg: #ECEDE5;

  /* 4. Operational Domain Tokens (A-TOKEN.5) */
  --bh-domain-crm-bg: #F5F3FF;
  --bh-domain-crm-border: #DDD6FE;
  --bh-domain-crm-text: #6D28D9;
  --bh-domain-product-bg: #EEF2FF;
  --bh-domain-product-border: #C7D2FE;
  --bh-domain-product-text: #4338CA;
  --bh-domain-content-bg: #F0FDFA;
  --bh-domain-content-border: #99F6E4;
  --bh-domain-content-text: #0F766E;
  --bh-domain-voc-bg: #FFFBEB;
  --bh-domain-voc-border: #FDE68A;
  --bh-domain-voc-text: #B45309;
  --bh-domain-inventory-bg: #F8FAFC;
  --bh-domain-inventory-border: #E2E8F0;
  --bh-domain-inventory-text: #334155;
  --bh-domain-competitor-bg: #F0F9FF;
  --bh-domain-competitor-border: #BAE6FD;
  --bh-domain-competitor-text: #0369A1;
  --bh-domain-operations-bg: #F7FEE7;
  --bh-domain-operations-border: #D9F99D;
  --bh-domain-operations-text: #4D7C0F;

  /* 5. Multi-series Data Tokens (A-TOKEN.5b) */
  --bh-series-1: #141414;
  --bh-series-2: #525252;
  --bh-series-3: #8A8A8A;
  --bh-series-4: #B8B8B8;
  --bh-series-5: #3E7D5A;
  --bh-series-6: #B5862F;
  --bh-series-7: #C0473B;
  --bh-series-8: #5E6975;

  /* Legacy alias mappings -> Build Hub Design System v1 */
  --bg-app: var(--bh-canvas);
  --bg-surface: var(--bh-card);
  --bg-subtle: var(--bh-hover);
  --bg-rail: var(--bh-sidebar);
  --bg-subnav: var(--bh-sidebar);
  --bg-hover: var(--bh-hover);
  --bg-active: var(--bh-select-soft);
  --border-color: var(--bh-border);
  --border-strong: #DCDCDC;
  --txt-main: var(--bh-text);
  --txt-primary: var(--bh-text);
  --txt-secondary: var(--bh-text-soft);
  --txt-muted: var(--bh-muted);
  --accent-purple: var(--bh-ink);
  --accent-purple-soft: var(--bh-select-soft);
  --accent-purple-border: var(--bh-border);
  --accent-cobalt: var(--bh-ink);
  --accent-green: var(--bh-success);
  --accent-red: var(--bh-danger);
  --accent-yellow: #FEE500;
  --note-yellow-bg: #FFFBEB;
  --note-yellow-border: #FDE68A;
  --font-sans: 'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--bh-canvas);
  color: var(--bh-text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Build Hub Korean Typography & Tabular Numbers (A-TOKEN.6, A-TOKEN.7b) */
.bh-ko-text {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* Build Hub Logo Mark (Sidebar.tsx:859-864: 27x27px, rounded-[7px], #141414 ink, white B) */
.bh-logo-mark {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--bh-ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.bh-brand-wordmark {
  font-size: 15px;
  font-weight: 700;
  color: var(--bh-text);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.bh-brand-wordmark .bh-brand-sub {
  font-weight: 500;
  color: var(--bh-muted);
}

/* Build Hub Domain & Category Badges (A-TOKEN.4, A-TOKEN.5) */
.bh-domain-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  line-height: 1.35;
}
.bh-domain-crm { background: var(--bh-domain-crm-bg); border-color: var(--bh-domain-crm-border); color: var(--bh-domain-crm-text); }
.bh-domain-product { background: var(--bh-domain-product-bg); border-color: var(--bh-domain-product-border); color: var(--bh-domain-product-text); }
.bh-domain-content { background: var(--bh-domain-content-bg); border-color: var(--bh-domain-content-border); color: var(--bh-domain-content-text); }
.bh-domain-voc { background: var(--bh-domain-voc-bg); border-color: var(--bh-domain-voc-border); color: var(--bh-domain-voc-text); }
.bh-domain-inventory { background: var(--bh-domain-inventory-bg); border-color: var(--bh-domain-inventory-border); color: var(--bh-domain-inventory-text); }
.bh-domain-competitor { background: var(--bh-domain-competitor-bg); border-color: var(--bh-domain-competitor-border); color: var(--bh-domain-competitor-text); }
.bh-domain-operations { background: var(--bh-domain-operations-bg); border-color: var(--bh-domain-operations-border); color: var(--bh-domain-operations-text); }

.bh-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bh-cat-jk { background: var(--bh-cat-jk-bg); color: var(--bh-cat-jk); }
.bh-cat-bl { background: var(--bh-cat-bl-bg); color: var(--bh-cat-bl); }
.bh-cat-top { background: var(--bh-cat-top-bg); color: var(--bh-cat-top); }
.bh-cat-pt { background: var(--bh-cat-pt-bg); color: var(--bh-cat-pt); }
.bh-cat-sk { background: var(--bh-cat-sk-bg); color: var(--bh-cat-sk); }
.bh-cat-ops { background: var(--bh-cat-ops-bg); color: var(--bh-cat-ops); }
.bh-cat-knit { background: var(--bh-cat-knit-bg); color: var(--bh-cat-knit); }

/* Build Hub Provenance & Confidence Bar (A-PATTERN.4, A-PATTERN.4b) */
.bh-provenance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed var(--bh-border);
  font-size: 11px;
  color: var(--bh-muted);
}
.bh-conf-high { color: var(--bh-text-soft); font-weight: 700; }
.bh-conf-med { color: var(--bh-muted); font-weight: 600; }
.bh-conf-low { color: var(--bh-warning-text); font-weight: 700; }

#desk-app,
#desk-root {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bh-canvas);
}

/* ==========================================================================
 * 1. TOP GLOBAL BAR (Build Hub Header Bar — 46px)
 * ========================================================================== */
.top-global-bar {
  height: 46px;
  min-height: 46px;
  background: var(--bh-sidebar);
  border-bottom: 1px solid var(--bh-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 82px; /* Space for macOS native window traffic lights */
  user-select: none;
  -webkit-user-select: none;
  z-index: 20;
}

.top-bar-left,
.top-bar-center,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.channel-pill:hover {
  background: var(--bh-hover);
}

.channel-badge-avatar {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--bh-ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}

/* Top Mode Switcher (Build Hub Segmented Control / Soft Ink Pill) */
.mode-switcher {
  display: flex;
  background: var(--bh-hover);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid var(--bh-border);
  gap: 2px;
}

.mode-tab {
  border: none;
  background: transparent;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bh-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
}
.mode-tab:hover {
  color: var(--bh-text);
}
.mode-tab.active {
  background: var(--bh-card);
  color: var(--bh-text);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge-red {
  background: var(--bh-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 8px;
  padding: 4px 10px;
  width: 190px;
  color: var(--bh-muted);
  font-size: 12px;
}
.search-pill:focus-within {
  border-color: var(--bh-ink);
  background: var(--bh-card);
}
.search-pill input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 12px;
  color: var(--bh-text);
}

/* Top Promo / Build Hub Connected Banner */
.promo-banner {
  height: 32px;
  min-height: 32px;
  background: var(--bh-canvas);
  color: var(--bh-text-soft);
  border-bottom: 1px solid var(--bh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  position: relative;
}
.promo-cta {
  background: var(--bh-ink);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.promo-cta:hover {
  background: var(--bh-ink-hover);
}
.promo-close {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--bh-muted);
}

/* ==========================================================================
 * BUILD HUB APPSHELL & SIDEBAR (Sidebar.tsx + MainContent.tsx + SurfacePanel.tsx)
 * ========================================================================== */
.bh-app-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bh-canvas);
}

#app-sidebar {
  width: 248px;
  min-width: 248px;
  height: 100vh;
  background: var(--bh-sidebar);
  border-right: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease, min-width 0.18s ease;
  z-index: 40;
  user-select: none;
  -webkit-user-select: none;
}
#app-sidebar.collapsed {
  width: 56px;
  min-width: 56px;
}

.bh-sidebar-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 14px 14px 14px; /* Extra top padding for macOS traffic lights */
  border-bottom: 1px solid var(--bh-border);
}

.bh-sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--bh-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bh-sidebar-collapse-btn:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}

/* Sidebar Top 2-Tab Switcher (Work | AgentOS — Sidebar.tsx:669-717) */
.bh-sidebar-tablist {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--bh-border);
}
#app-sidebar.collapsed .bh-sidebar-tablist {
  flex-direction: column;
  align-items: center;
}

.bh-sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bh-sidebar-tab:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.bh-sidebar-tab.active {
  background: var(--bh-select-soft);
  color: var(--bh-select);
  font-weight: 600;
}

/* Sidebar Accordion Workspaces & Indented Items (Sidebar.tsx:570-633) */
.bh-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.bh-ws-top-row {
  position: relative;
  display: flex;
  width: calc(100% - 16px);
  align-items: center;
  gap: 10px;
  margin: 2px 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bh-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bh-ws-top-row:hover {
  background: var(--bh-hover);
}
.bh-ws-top-row.active {
  background: var(--bh-select-soft);
  color: var(--bh-text);
  font-weight: 600;
}

.bh-ws-children {
  margin-left: 18px;
  margin-right: 8px;
  padding: 2px 0 2px 11px;
  border-left: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[hidden],
.bh-ws-children[hidden],
.bh-ws-children.is-collapsed,
.bh-collapsible-body[hidden],
.bh-collapsible-body.is-collapsed {
  display: none !important;
}

.bh-ws-chevron-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--bh-muted);
  transition: background 0.12s, color 0.12s;
}
.bh-ws-top-row:hover .bh-ws-chevron-wrap {
  color: var(--bh-text);
  background: rgba(20, 20, 20, 0.05);
}

/* Collapsed Sidebar Rail Flyout (Sidebar.tsx:783-840) */
.bh-rail-item-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.bh-rail-flyout {
  display: none;
  position: fixed;
  left: 56px;
  min-width: 196px;
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 999;
}
.bh-rail-item-wrap:hover .bh-rail-flyout {
  display: block;
}
.bh-rail-flyout-head {
  padding: 5px 12px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--bh-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--bh-muted);
  letter-spacing: 0.03em;
}
.bh-rail-flyout-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--bh-text-soft);
  text-align: left;
  cursor: pointer;
}
.bh-rail-flyout-link:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.bh-rail-flyout-link.active {
  background: var(--bh-select-soft);
  color: var(--bh-select);
  font-weight: 600;
}

.bh-ws-leaf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  color: var(--bh-muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.bh-ws-leaf:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.bh-ws-leaf.active {
  background: var(--bh-select-soft);
  color: var(--bh-select);
  font-weight: 600;
}

.bh-nav-chip {
  margin-left: 6px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--bh-border);
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--bh-muted);
  background: var(--bh-card);
}

/* Sidebar Footer (Sidebar.tsx:941-1036) */
.bh-sidebar-footer {
  border-top: 1px solid var(--bh-border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bh-sidebar);
}

/* Build Hub Main Content Area (#main-content) */
.bh-main-content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bh-canvas);
  overflow: hidden;
}

/* Top Workspace Header + UnderlineTabs + Toolbar */
.bh-workspace-topbar {
  background: var(--bh-card);
  border-bottom: 1px solid var(--bh-border);
  padding: 10px 20px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}

.bh-topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bh-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bh-muted);
}

.bh-page-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--bh-text);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Build Hub UnderlineTabs (UnderlineTabs.tsx) */
.bh-underline-tablist {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  white-space: nowrap;
}

.bh-underline-tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 6px 9px 7px;
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.bh-underline-tab:hover {
  color: var(--bh-text);
}
.bh-underline-tab.active {
  color: var(--bh-text);
  font-weight: 700;
  border-bottom-color: var(--bh-ink);
}

/* Build Hub FilterPill (Toolbar.tsx:49-127) */
.bh-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bh-border);
  background: var(--bh-card);
}

.bh-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.bh-filter-pill:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.bh-filter-pill.active {
  border-color: var(--bh-select);
  background: var(--bh-select-soft);
  color: var(--bh-select);
  font-weight: 600;
}
.bh-filter-pill.solid.active {
  border-color: var(--bh-select);
  background: var(--bh-select);
  color: #ffffff;
  font-weight: 600;
}

/* Build Hub 4-Card KPI Strip on Canvas */
.bh-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px 0 16px;
  flex-shrink: 0;
}

.bh-kpi-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 11px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}
.bh-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bh-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bh-kpi-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--bh-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.bh-kpi-sub {
  font-size: 11px;
  color: var(--bh-text-soft);
}

/* 3-Card SurfacePanel Counseling Grid */
.bh-counseling-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px 14px 16px;
  background: var(--bh-canvas);
  overflow: hidden;
}

/* Override panels inside .bh-counseling-grid to be authentic Build Hub SurfacePanels (14px radius, 1px #ECECEC border, zero shadow) */
.bh-counseling-grid .chat-list-panel,
.bh-counseling-grid .sub-sidebar {
  width: 278px;
  min-width: 278px;
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  box-shadow: none;
}

.bh-counseling-grid .chat-center-panel {
  flex: 1;
  min-width: 300px;
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  box-shadow: none;
}

.bh-counseling-grid .right-inspector {
  width: var(--bh-inspector-width, 376px);
  min-width: var(--bh-inspector-width, 376px);
  max-width: var(--bh-inspector-width, 376px);
  flex-shrink: 0;
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  box-shadow: none;
  position: relative;
}

/* Interactive Drag Splitter Handle for Right Customer CRM Detail Panel */
.bh-inspector-resizer {
  width: 12px;
  margin-left: -12px;
  margin-right: -12px;
  position: relative;
  z-index: 35;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.bh-inspector-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  right: -7px;
  cursor: col-resize;
}
.bh-inspector-resizer::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: transparent;
  transition: background 0.14s ease;
}
.bh-inspector-resizer:hover::after,
.bh-inspector-resizer.is-active::after {
  background: rgba(20, 20, 20, 0.22);
}
.bh-inspector-resizer-grip {
  width: 5px;
  height: 44px;
  border-radius: 999px;
  background: #d8d8d5;
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 2;
  transition: background 0.14s ease, height 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.bh-inspector-resizer:hover .bh-inspector-resizer-grip,
.bh-inspector-resizer.is-active .bh-inspector-resizer-grip {
  background: var(--bh-ink);
  height: 64px;
  transform: scaleX(1.15);
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.18);
}
.bh-inspector-resizer-tooltip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bh-ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 50;
}
.bh-inspector-resizer:hover .bh-inspector-resizer-tooltip,
.bh-inspector-resizer.is-active .bh-inspector-resizer-tooltip {
  opacity: 1;
  transform: translateY(0);
}
body.is-resizing-inspector,
body.is-resizing-inspector * {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ==========================================================================
 * 2. MAIN WORKSPACE 5-COLUMN BODY (Build Hub Surface System)
 * ========================================================================== */
.workspace-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--bh-canvas);
}

/* Column 1: Primary Left Rail (54px — Build Hub Sidebar Surface) */
.primary-rail {
  width: 54px;
  min-width: 54px;
  background: var(--bh-sidebar);
  border-right: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  z-index: 10;
}

.rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* A-SIDEBAR.3 ~ A-SIDEBAR.5 & A-DEPRECATED.1: Soft selection, no left black border bar */
.rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bh-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  transition: background 0.12s, color 0.12s;
}
.rail-btn:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.rail-btn.active {
  background: var(--bh-select-soft);
  color: var(--bh-select);
  border-color: var(--bh-border);
  font-weight: 700;
}
.rail-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bh-ink);
}

/* Column 2: Sub-Navigation Sidebar (210px — Build Hub Sidebar) */
.sub-sidebar {
  width: 210px;
  min-width: 210px;
  background: var(--bh-sidebar);
  border-right: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.sub-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
}

.sub-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px 10px;
  color: var(--bh-text);
  letter-spacing: -0.01em;
}

.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bh-muted);
  letter-spacing: 0.01em;
}

/* Build Hub Sidebar Tree Group Guide Line (A-SIDEBAR.3: border-l border-[var(--bh-border)]) */
.nav-tree-children {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--bh-muted);
  cursor: pointer;
  margin-bottom: 1px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.nav-item.active {
  background: var(--bh-select-soft);
  color: var(--bh-select);
  font-weight: 600;
}
.nav-item-left {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-divider {
  height: 1px;
  background: var(--bh-border);
  margin: 8px 4px;
}

.seat-footer {
  height: 44px;
  border-top: 1px solid var(--bh-border);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bh-sidebar);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.seat-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bh-hover);
  color: var(--bh-muted);
  border: 1px solid var(--bh-border);
}
.seat-status.ready {
  background: #ECFDF5;
  color: var(--bh-success-text);
  border-color: #A7F3D0;
}

/* Column 3: Chat List Panel (296px — Build Hub Surface) */
.chat-list-panel {
  width: 296px;
  min-width: 296px;
  background: var(--bh-card);
  border-right: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-list-header {
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bh-border-soft);
}
.chat-list-header h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--bh-text);
}

/* Build Hub UnderlineTabs (P-2b: View/State Switching Tabs MUST use 2px solid --bh-ink underline) */
.state-tabs {
  display: flex;
  padding: 0 10px;
  gap: 4px;
  border-bottom: 1px solid var(--bh-border);
  background: var(--bh-card);
}
.state-tab {
  flex: 1;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 9px 4px 8px;
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-muted);
  cursor: pointer;
  text-align: center;
  transition: color 0.12s, border-color 0.12s;
}
.state-tab:hover {
  color: var(--bh-text);
}
.state-tab.active {
  color: var(--bh-text);
  font-weight: 700;
  border-bottom-color: var(--bh-ink);
}

.chat-items-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

/* A-FIX.2: List item cards use --bh-select-soft on active, no heavy black border */
.chat-card {
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.chat-card:hover {
  background: var(--bh-hover);
}
.chat-card.active {
  background: var(--bh-select-soft);
  border-color: var(--bh-border);
}

.chat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.chat-card-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--bh-text);
}
.chat-card-time {
  font-size: 11px;
  color: var(--bh-muted);
  font-variant-numeric: tabular-nums;
}
.chat-card-preview {
  font-size: 12px;
  color: var(--bh-text-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.medium-dot {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.medium-kakao { background: #FEE500; color: #191919; }
.medium-native { background: var(--bh-ink); color: #ffffff; }
.medium-phone { background: var(--bh-success); color: #ffffff; }
.medium-email { background: #5E6975; color: #ffffff; }
.medium-cafe24 { background: #3D3D3D; color: #ffffff; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bh-hover);
  color: var(--bh-text-soft);
  border: 1px solid var(--bh-border);
  margin-right: 4px;
  margin-top: 4px;
}
.tag-pill.cobalt { background: var(--bh-domain-product-bg); color: var(--bh-domain-product-text); border-color: var(--bh-domain-product-border); }
.tag-pill.emerald { background: #ECFDF5; color: var(--bh-success-text); border-color: #A7F3D0; }
.tag-pill.crimson { background: #FEF2F2; color: var(--bh-danger); border-color: #FECACA; }
.tag-pill.orange { background: var(--bh-domain-voc-bg); color: var(--bh-domain-voc-text); border-color: var(--bh-domain-voc-border); }

/* Column 4: Center Chat Timeline & Composer */
.chat-center-panel {
  flex: 1;
  min-width: 360px;
  background: var(--bh-canvas);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.ai-banner {
  margin: 10px 14px 0;
  padding: 9px 14px;
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--bh-text-soft);
}

.chat-header {
  min-height: 50px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bh-border);
  background: var(--bh-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bh-text);
  white-space: nowrap;
}
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.icon-btn {
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bh-text-soft);
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.icon-btn:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}

.action-chip {
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bh-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.action-chip:hover {
  background: var(--bh-hover);
}
/* Build Hub Solid Ink Primary Action Chip */
.action-chip.purple,
.action-chip.ink {
  background: var(--bh-ink);
  border-color: var(--bh-ink);
  color: #ffffff;
}
.action-chip.purple:hover,
.action-chip.ink:hover {
  background: var(--bh-ink-hover);
}

/* Live WebRTC Meet Banner */
.live-meet-bar {
  background: var(--bh-ink);
  color: #fff;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
}
.live-meet-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bh-success);
}

.timeline-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bh-canvas);
}

.collapsed-log {
  align-self: center;
  font-size: 11.5px;
  color: var(--bh-muted);
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Summary Bot Card (`요약봇 BOT 🔒` — Build Hub SurfacePanel + Provenance A-PATTERN.4) */
.summary-bot-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: none;
}
.summary-bot-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bh-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.summary-bot-body {
  flex: 1;
  min-width: 0;
}
.summary-bot-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bh-text);
  margin-bottom: 6px;
}
.bot-badge {
  background: var(--bh-ink);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.summary-bot-headline {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--bh-text);
}
.summary-bot-list {
  padding-left: 16px;
  font-size: 12.5px;
  color: var(--bh-text-soft);
  line-height: 1.55;
}

/* Message Rows */
.msg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
}
.msg-row.manager {
  align-self: flex-end;
  align-items: flex-end;
}
.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bh-text);
}
.msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bh-card);
  color: var(--bh-text);
  border: 1px solid var(--bh-border);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: none;
}
.msg-row.manager .msg-bubble {
  background: var(--bh-ink);
  color: #ffffff;
  border-color: var(--bh-ink);
}
.msg-row.private-note .msg-bubble {
  background: var(--note-yellow-bg);
  color: #78350F;
  border-color: var(--note-yellow-border);
}

/* Unassigned Box (`[나에게 배정]` CTA Card — Build Hub SurfacePanel) */
.unassigned-box {
  margin: 0 16px 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  box-shadow: none;
}
.unassigned-box h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bh-text);
}
.unassigned-box p {
  font-size: 12px;
  color: var(--bh-muted);
  margin-bottom: 6px;
}
.btn-assign-me {
  background: var(--bh-ink);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-assign-me:hover {
  background: var(--bh-ink-hover);
}

/* Rich Composer (대화 / 내부 대화 — Build Hub SurfacePanel) */
.composer-box {
  margin: 0 16px 14px;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  background: var(--bh-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
}
.composer-box.private-mode {
  background: var(--note-yellow-bg);
  border-color: var(--note-yellow-border);
}
.composer-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--bh-border-soft);
}
.composer-mode-group {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.composer-mode-btn {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 8px 2px 7px;
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bh-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.composer-mode-btn.active {
  color: var(--bh-text);
  font-weight: 700;
  border-bottom-color: var(--bh-ink);
}
.composer-textarea {
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  min-height: 62px;
  resize: none;
  outline: none;
  color: var(--bh-text);
}
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--bh-border-soft);
}
.macro-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.macro-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--bh-border);
  background: var(--bh-hover);
  cursor: pointer;
  color: var(--bh-text-soft);
  white-space: nowrap;
  font-weight: 500;
}
.macro-chip:hover {
  border-color: var(--bh-ink);
  color: var(--bh-text);
}
.btn-send {
  background: var(--bh-ink);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}
.btn-send:hover {
  background: var(--bh-ink-hover);
}

/* Column 5: Right CRM & Build Hub Inspector (Resizable per user — Build Hub Sidebar Surface) */
.right-inspector {
  width: var(--bh-inspector-width, 376px);
  min-width: var(--bh-inspector-width, 376px);
  max-width: var(--bh-inspector-width, 376px);
  flex-shrink: 0;
  background: var(--bh-sidebar);
  border-left: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Build Hub UnderlineTabs in Right Inspector (P-2b) */
.inspector-tabs {
  height: 48px;
  padding: 0 10px;
  border-bottom: 1px solid var(--bh-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.inspector-tab-group {
  display: flex;
  gap: 10px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  flex: 1;
}
.inspector-tab-group::-webkit-scrollbar {
  display: none;
}
.inspector-tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-muted);
  cursor: pointer;
  padding: 0 2px;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.inspector-tab:hover {
  color: var(--bh-text);
}
.inspector-tab.active {
  color: var(--bh-text);
  font-weight: 700;
  border-bottom-color: var(--bh-ink);
}

.inspector-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

.inspector-section {
  border-bottom: 1px solid var(--bh-border-soft);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.inspector-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bh-muted);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.inspector-section-title[onclick] {
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px 8px -6px;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.inspector-section-title[onclick]:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}

.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
}
.kv-label {
  color: var(--bh-muted);
  min-width: 82px;
}
.kv-value {
  color: var(--bh-text);
  font-weight: 500;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-input,
.kv-select {
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  color: var(--bh-text);
  padding: 3px 6px;
  border-radius: 6px;
  text-align: right;
  font-family: inherit;
}
.kv-input:hover,
.kv-input:focus,
.kv-select:hover,
.kv-select:focus {
  border-color: var(--bh-border);
  background: var(--bh-hover);
  outline: none;
}

.customer-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.customer-avatar-lg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bh-hover);
  border: 1px solid var(--bh-border);
  color: var(--bh-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.tier-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bh-select-soft);
  color: var(--bh-text);
  border: 1px solid var(--bh-border);
}

/* Secondary Module Views (Workflows, Campaigns, Analytics, Contacts, Team Chat, Build Hub) */
.full-module-view {
  flex: 1;
  background: var(--bh-canvas);
  overflow-y: auto;
  padding: 24px 28px;
}
.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.module-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--bh-text);
  letter-spacing: -0.02em;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
/* Build Hub SurfacePanel (A-PRIM.1: 14px radius, 1px #ECECEC border, shadow 0) */
.surface-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: none;
}
.surface-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--bh-text);
}

/* Node Graph Step Pill in Workflow Builder */
.node-step-pill {
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  margin-top: 6px;
}

/* File Attachments, Image Thumbnails & Lightbox */
.composer-attachments-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 0;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bh-hover);
  color: var(--bh-text);
  border: 1px solid var(--bh-border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
}
.attachment-remove {
  cursor: pointer;
  font-weight: 800;
  color: var(--bh-danger);
}
.msg-files-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.msg-img-thumb {
  position: relative;
  max-width: 240px;
  max-height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bh-border);
  cursor: zoom-in;
  background: #fff;
}
.msg-img-thumb img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  object-fit: cover;
}
.msg-img-thumb .file-name-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 20, 0.65);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-file-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  color: var(--bh-text);
  text-decoration: none;
  font-size: 12px;
}
.msg-file-card:hover {
  background: var(--bh-hover);
}

/* Lightbox Overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox-content {
  max-width: 88vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.lightbox-content img {
  max-width: 85vw;
  max-height: 78vh;
  border-radius: 12px;
}
.lightbox-caption {
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lightbox-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
}

/* Cafe24 × Build Hub Order History Card in Right CRM Inspector */
.order-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  box-shadow: none;
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.order-no {
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bh-text);
  cursor: pointer;
}
.order-status-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bh-hover);
  color: var(--bh-text-soft);
  border: 1px solid var(--bh-border);
}
.order-status-badge.shipping {
  background: var(--bh-domain-voc-bg);
  color: var(--bh-domain-voc-text);
  border-color: var(--bh-domain-voc-border);
}
.order-status-badge.delivered {
  background: #ECFDF5;
  color: var(--bh-success-text);
  border-color: #A7F3D0;
}
.order-status-badge.return {
  background: #FEF2F2;
  color: var(--bh-danger);
  border-color: #FECACA;
}
.order-item-row {
  display: flex;
  justify-content: space-between;
  color: var(--bh-text-soft);
  font-size: 11.5px;
  padding: 3px 0;
}
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--bh-border);
  margin-top: 6px;
  padding-top: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Modal Overlay (Build Hub SurfacePanel) */
.builder-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.builder-modal {
  background: var(--bh-card);
  width: 780px;
  max-width: 94vw;
  max-height: 88vh;
  border-radius: 14px;
  border: 1px solid var(--bh-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.builder-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bh-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.builder-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bh-text);
}
.builder-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.builder-node-card {
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.builder-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 700;
}
.builder-button-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

/* =========================================================================
   Phone / Call Center, Call Detail Timeline, Analytics & Marketing Recipes
   ========================================================================= */
.bh-subtab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bh-border);
}

.bh-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--bh-border);
  background: var(--bh-card);
  color: var(--bh-text-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}
.bh-subtab-btn:hover {
  background: var(--bh-hover);
  color: var(--bh-text);
}
.bh-subtab-btn.active {
  background: var(--bh-ink);
  color: #ffffff;
  border-color: var(--bh-ink);
  font-weight: 700;
}

/* Softphone Dialpad & Call Center Grid */
.call-center-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.dialpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.dialpad-key {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--bh-border);
  background: var(--bh-canvas);
  color: var(--bh-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.dialpad-key:hover {
  background: var(--bh-hover);
  border-color: #d4d4d4;
}
.dialpad-key:active {
  transform: scale(0.97);
}
.dialpad-digit {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}
.dialpad-sub {
  font-size: 9px;
  color: var(--bh-muted);
  letter-spacing: 0.06em;
}

/* Audio Waveform Player */
.call-audio-player {
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.call-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bh-ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.call-waveform-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 30px;
  cursor: pointer;
}
.call-wave-bar {
  flex: 1;
  border-radius: 2px;
  background: #d4d4d8;
  transition: background 0.15s ease, height 0.15s ease;
}
.call-wave-bar.played {
  background: var(--bh-ink);
}

/* Call Timeline Stepper */
.call-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 14px;
  border-left: 2px solid var(--bh-border);
  margin-left: 6px;
}
.call-timeline-step {
  position: relative;
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
.call-timeline-step::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bh-ink);
  border: 2px solid #ffffff;
}

/* Timeline Call Message Bubble Card inside Inbox */
.timeline-call-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 8px 0;
  max-width: 560px;
}

/* Marketing Recipe & Case Study Cards */
.recipe-card {
  background: var(--bh-card);
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.15s ease;
}
.recipe-card:hover {
  border-color: #bcbcbc;
}
.recipe-preview-box {
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 12px;
  color: var(--bh-text);
  line-height: 1.5;
}
.funnel-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.funnel-step-card {
  background: var(--bh-canvas);
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
}