/* ================================================================
   AgentCPQ — Swiss-Industrial Light Theme
   SAP Blue (#0070F2) on warm ivory. Precision grid. Zero noise.
   ================================================================ */

:root, [data-theme="light"] {
  --sap-blue: #0070F2;
  --sap-blue-hover: #0058C1;
  --sap-blue-soft: rgba(0, 112, 242, 0.08);
  --sap-blue-ring: rgba(0, 112, 242, 0.25);

  --bg: #F0F1F3;
  --panel: #F7F8F9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;

  --text: #1D2D3E;
  --text-secondary: #6A7A8C;
  --text-muted: #92A0AE;

  --border: #E5E5E5;
  --border-strong: #D1D1D6;
  --border-soft: #EEF0F3;
  --hover-bg: #EEF1F5;

  --success: #188918;
  --success-bg: rgba(24, 137, 24, 0.09);
  --error: #CC1919;
  --error-bg: rgba(204, 25, 25, 0.08);
  --warning: #E76500;
  --warning-bg: rgba(231, 101, 0, 0.09);
  --info: #0070F2;
  --info-bg: rgba(0, 112, 242, 0.08);

  /* Syntax-highlight tokens — reference the palette so they theme automatically
     (single source of truth instead of hardcoded hex per language). */
  --syn-keyword: var(--sap-blue);
  --syn-string: var(--success);
  --syn-number: var(--warning);
  --syn-error: var(--error);
  --syn-fn: var(--sap-blue-hover);
  --syn-punct: var(--text-secondary);
  --syn-builtin: #9B4DCA;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  /* Universal mono UI — JetBrains Mono with Plex Mono fallback. --sans is an alias for backwards-compat with selectors that still reference it. */
  --mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --sans: var(--mono);

  /* Type scale (post-mono retrofit). Use these tokens for new selectors; legacy values stay until migrated. */
  --text-display:  20px;   /* page + dialog titles, weight 600, letter-spacing -0.015em */
  --text-title:    14px;   /* panel + group headers, weight 600 */
  --text-body:     13px;   /* chat prose, lists, weight 400 */
  --text-ui:       12px;   /* buttons, labels, weight 500 */
  --text-caption:  11px;   /* metadata, timestamps, weight 400, +0.01em */
  --text-code:   12.5px;   /* code blocks, weight 400, line-height 1.65 */

  --diff-w: 380px;
  --diff-w-min: 200px;
  --workspace-min: 280px;
  --chat-max-w: clamp(520px, 70%, 860px);

  /* Zone layout variables */
  --zone-left-w: 260px;
  --zone-right-w: 300px;
  --zone-bottom-h: 0px;
  --top-nav-h: 40px;
  --status-bar-h: 24px;

  /* Dev-console chrome — unified dark code surface (both themes) + agent transcript card. */
  --code-bg:        #1E2228;
  --code-fg:        #DCE0E6;
  --code-border:    #2A3038;
  --surface-agent:  #F5F7FB;
  --rail-agent:     var(--sap-blue);
  --prompt-glyph:   var(--sap-blue);
  /* Dark-surface syntax tokens (scoped to .code-body) */
  --syn-keyword-dk: #6FB3FB;
  --syn-string-dk:  #98C379;
  --syn-number-dk:  #E5C07B;
  --syn-builtin-dk: #C678DD;
  --syn-fn-dk:      #61AFEF;
  --syn-comment-dk: #7F8B99;
  --syn-error-dk:   #FF7676;
  --syn-punct-dk:   #A9B4C0;

  /* Select / dropdown chevron — extracted from inline data-URIs so themes can override */
  --chevron-light: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236A7A8C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --chevron-mute:  url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A9B4C0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- Reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Shared Panel Primitives ---- */

/* Indeterminate progress bar — thin line at top of any panel */
.panel-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.panel-loading-bar.active {
  opacity: 1;
}
.panel-loading-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--sap-blue);
  border-radius: 1px;
  animation: panel-loading-slide 1.2s ease-in-out infinite;
}
@keyframes panel-loading-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(-100%); }
}

/* Expand/collapse caret — used by Explorer, Pipeline, Sync Status */
.panel-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.panel-caret.open { transform: rotate(90deg); }

/* Collapsible group header — used by Pipeline, Sync Status */
.panel-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.panel-group-header:hover { background: rgba(0,0,0,0.04); }

/* Group item count — right-aligned muted badge */
.panel-group-count {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 10px;
}

/* ---- App Shell ---- */

.app-shell {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-areas:
    "topnav topnav  topnav  topnav  topnav"
    "ab     rail    left    center  right"
    "ab     rail    left    bottom  bottom"
    "status status  status  status  status";
  grid-template-columns: 44px var(--session-rail-w) var(--zone-left-w) 1fr var(--zone-right-w);
  grid-template-rows: var(--top-nav-h) 1fr var(--zone-bottom-h) var(--status-bar-h);
  overflow: hidden;
}

.app-shell.animating {
  transition: grid-template-columns 0.25s ease;
}

.app-shell.left-collapsed {
  grid-template-columns: 44px var(--session-rail-w) 0px 1fr var(--zone-right-w);
}

.app-shell.right-collapsed {
  grid-template-columns: 44px var(--session-rail-w) var(--zone-left-w) 1fr 0px;
}

.app-shell.left-collapsed.right-collapsed {
  grid-template-columns: 44px var(--session-rail-w) 0px 1fr 0px;
}

.app-shell.rail-collapsed {
  grid-template-columns: 44px 0px var(--zone-left-w) 1fr var(--zone-right-w);
}

.app-shell.rail-collapsed.left-collapsed {
  grid-template-columns: 44px 0px 0px 1fr var(--zone-right-w);
}

.app-shell.rail-collapsed.right-collapsed {
  grid-template-columns: 44px 0px var(--zone-left-w) 1fr 0px;
}

.app-shell.rail-collapsed.left-collapsed.right-collapsed {
  grid-template-columns: 44px 0px 0px 1fr 0px;
}

/* ---- ACTIVITY BAR ---- */
.activity-bar {
  grid-area: ab;
  display: flex;
  flex-direction: column;
  width: 44px;
  background: rgba(247, 248, 249, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-right: 0.5px solid rgba(0, 0, 0, 0.06);
  padding-top: 8px;
  gap: 2px;
  align-items: center;
  cursor: default;
}
.ab-spacer { flex: 1; }
.ab-btn {
  width: 36px; height: 36px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
}
.ab-btn:hover { color: var(--text); background: rgba(0,0,0,0.04); }
.ab-btn.active { color: var(--sap-blue); }
.ab-btn.active::before {
  content: "";
  position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px;
  background: var(--sap-blue); border-radius: 2px;
}

/* ---- SESSION RAIL ---- */

:root {
  --session-rail-w: 160px;
}

.session-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  width: var(--session-rail-w);
  background: rgba(247, 248, 249, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-right: 0.5px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  min-width: 0;
}

.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  height: 32px;
  min-height: 32px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  background: rgba(247, 248, 249, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.rail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.rail-new-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.rail-new-btn:hover {
  color: var(--sap-blue);
  background: var(--sap-blue-soft);
}

.rail-rows {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.rail-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px 6px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  min-width: 0;
}
.rail-row:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.rail-row--active {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  border-left-color: var(--sap-blue);
  font-weight: 500;
}

.rail-row-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rail-row-cost {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Status dot — the .ic element used as a small dot via mask-image */
.rail-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  font-size: 12px;   /* drives mask-image size for .ic approach */
}

/* Colour tinting per status */
.rail-dot--running    { color: var(--sap-blue); }
.rail-dot--waiting    { color: var(--warning); }
.rail-dot--idle       { color: var(--success); }
.rail-dot--unknown    {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  margin: 2px 2.5px;
}

/* Spin animation for the loader icon */
@keyframes rail-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rail-dot--running.ic-loader {
  animation: rail-spin 1s linear infinite;
}

/* ---- TOP NAV BAR ---- */
.top-nav {
  grid-area: topnav;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top-nav-h);
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-brand .brand-mark {
  width: 26px;
  height: 26px;
  font-size: 8px;
}
.nav-brand .brand-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-dropdown {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: var(--chevron-light);
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.nav-tenant-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  max-width: 180px;
  min-width: 80px;
  overflow: hidden;
  background-image: none; /* chevron via explicit <i> */
}
.nav-tenant-btn #tenantName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-tenant-wrap { display: flex; align-items: center; }

.sync-badges {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sync-badge-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
}
.sync-badge-nav.in_sync     { background: var(--success-bg); color: var(--success); }
.sync-badge-nav.local_only  { background: var(--info-bg);    color: var(--info); }
.sync-badge-nav.remote_only { background: var(--warning-bg);  color: var(--warning); }
.sync-badge-nav.conflict    { background: var(--error-bg);    color: var(--error); }

.nav-spacer { flex: 1; }

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-conn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-conn .health-dot {
  width: 8px;
  height: 8px;
}

/* ---- ZONES ---- */
.zone {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.zone-left {
  grid-area: left;
  background: rgba(245, 245, 247, 0.85);
  border-right: 0.5px solid rgba(0, 0, 0, 0.06);
}

.zone-center {
  grid-area: center;
  background: var(--surface);
}
.zone-center .panel-container {
  background: var(--surface);
}

.zone-right {
  grid-area: right;
  background: rgba(250, 251, 252, 0.9);
  border-left: 0.5px solid rgba(0, 0, 0, 0.06);
}

.zone-bottom {
  grid-area: bottom;
  background: rgba(250, 251, 252, 0.9);
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

.zone-tabs {
  display: flex;
  align-items: center;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  gap: 2px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  background: rgba(247, 248, 249, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  flex-shrink: 0;
}

.zone-tabs:empty {
  display: none;
}

/* Left zone uses activity bar for switching — hide its tab bar */
.zone-left > .zone-tabs {
  display: none;
}

.zone-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Zone tab buttons */
.zone-tab {
  padding: 4px 12px;
  font-size: 11px;
  font-family: var(--sans);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
}
.zone-tab:hover { color: var(--text); background: var(--sap-blue-soft); }
.zone-tab.active { color: var(--sap-blue); background: var(--surface); border-bottom-color: var(--sap-blue); font-weight: 500; }

/* Drag & drop indicators */
.zone-tab.dragging { opacity: 0.4; }
.zone-tabs.drop-target {
  background: var(--sap-blue-soft);
  outline: 2px dashed var(--sap-blue);
  outline-offset: -2px;
}
.zone-content.drop-target {
  outline: 2px dashed var(--sap-blue);
  outline-offset: -2px;
}

/* Drop targets are indicated by tab bar highlight only (no overlay) */

/* Edge drop strips — visible only during a panel drag, so the user
   can drop a panel back into a collapsed (0-height/0-width) zone. */
.zone-edge-strip {
  position: fixed;
  z-index: 100;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}
.zone-edge-strip.zone-edge-bottom {
  bottom: var(--status-bar-h, 24px);
  left: 44px;  /* right of activity bar */
  right: 0;
  height: 20px;
}
.zone-edge-strip.zone-edge-left {
  top: var(--top-nav-h, 40px);
  left: 44px;
  bottom: var(--status-bar-h, 24px);
  width: 20px;
}
.zone-edge-strip.zone-edge-right {
  top: var(--top-nav-h, 40px);
  right: 0;
  bottom: var(--status-bar-h, 24px);
  width: 20px;
}
.zone-edge-strip.active {
  background: rgba(0, 112, 242, 0.15);
  border: 2px dashed rgba(0, 112, 242, 0.4);
}

/* Editor panel — fills the center zone */
.editor-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.editor-panel > .file-viewer {
  flex: 1;
  min-height: 0;
}

/* Center zone: file tabs in zone-tabs bar */
.zone-center > .zone-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Panel containers */
.panel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* ---- Explorer Panel ---- */
.explorer-panel { display: flex; flex-direction: column; height: 100%; background: var(--panel); }
.explorer-header { display: flex; align-items: center; padding: 8px 10px 4px; font-weight: 600; font-size: 12px; }
.explorer-header .explorer-title { flex: 1; }
.explorer-search { padding: 0 10px 6px; }
.explorer-filter-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; font-size: 11px; font-family: var(--sans);
  color: var(--text); outline: none;
}
.explorer-filter-input:focus { border-color: var(--sap-blue); box-shadow: 0 0 0 2px var(--sap-blue-ring); }
/* explorer-toolbar removed — sync actions consolidated into diff panel */

/* Zone resize handles */
.zone-resize-handle {
  position: absolute;
  z-index: 10;
}

.zone-resize-right {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.zone-resize-left {
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.zone-resize-top {
  top: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: row-resize;
}

.zone-resize-handle::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: transparent;
  transition: background 0.15s;
}

.zone-resize-right::after {
  top: 0; left: 2px; width: 2px; height: 100%;
}

.zone-resize-left::after {
  top: 0; right: 2px; width: 2px; height: 100%;
}

.zone-resize-top::after {
  left: 0; top: 2px; height: 2px; width: 100%;
}

.zone-resize-handle:hover::after {
  background: var(--sap-blue);
}

/* ---- STATUS BAR ---- */
.status-bar {
  grid-area: status;
  display: flex;
  align-items: center;
  height: var(--status-bar-h);
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--mono);
  gap: 2px;
  overflow: hidden;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.sb-segment {
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-btn {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 2px;
}
.sb-btn:hover {
  background: rgba(0,0,0,0.06);
}
.sb-btn.active {
  background: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

.sb-spacer { flex: 1; }

/* (Old .sidebar-mode rules removed — panel-registry handles panel visibility) */

/* ---- SIDEBAR SEARCH PANEL ---- */
.sb-search-bar {
  flex-shrink: 0;
  padding: 12px 12px 0;
  border-bottom: 1px solid var(--border);
}

.sb-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sb-search-input-wrap:focus-within {
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 3px var(--sap-blue-ring);
}

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

.sb-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 6px 0;
  color: var(--text);
  min-width: 0;
}

.sb-search-input::placeholder {
  color: var(--text-muted);
}

.sb-search-toggles {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}

.sb-search-scopes {
  display: flex;
  gap: 0;
  padding: 8px 0 0;
}

.sb-scope {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 8px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.sb-scope:hover {
  color: var(--text-secondary);
}

.sb-scope.active {
  color: var(--sap-blue);
  border-bottom-color: var(--sap-blue);
}

.sb-search-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sb-search-stats {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  min-height: 28px;
}

.sb-search-stats:empty {
  display: none;
}

/* File group */
.sb-file-group {
  border-bottom: 1px solid var(--border);
}

.sb-file-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

.sb-file-header:hover {
  background: var(--sap-blue-soft);
}

.sb-caret {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.12s;
}

.sb-file-header.collapsed .sb-caret {
  transform: rotate(-90deg);
}

.sb-file-header svg.ws-tab-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sb-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-file-count {
  font-weight: 400;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 8px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Match rows */
.sb-match-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 10px 2px 24px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: var(--mono);
  line-height: 1.5;
  transition: background 0.06s;
}

.sb-match-row:hover {
  background: var(--sap-blue-soft);
}

.sb-match-row.active {
  background: var(--sap-blue-soft);
  outline: 1px solid var(--sap-blue-ring);
  outline-offset: -1px;
  border-radius: 2px;
}

.sb-match-num {
  color: var(--text-muted);
  font-size: 10px;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
  user-select: none;
}

.sb-match-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.sb-match-text mark {
  background: rgba(0, 112, 242, 0.18);
  color: var(--sap-blue);
  border-radius: 2px;
  padding: 0 1px;
}

.sb-searching {
  padding: 16px;
}

/* ---- PIPELINE PANEL ---- */
.pipeline-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px; gap: 8px;
}
.pipeline-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pipeline-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 0;
}
.pipeline-scope {
  display: flex; gap: 0; padding: 0 12px 8px;
  border-bottom: 1px solid #E0E2E6;
}
.pipeline-scope .tab {
  font-size: 11px; padding: 4px 10px;
}
.pipeline-body {
  flex: 1; overflow-y: auto; padding: 8px 0;
}

/* ---- HISTORY PANEL ---- */
.history-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px; gap: 8px;
}
.history-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 0;
}
#modeHistory .conversations {
  flex: 1; overflow-y: auto;
}
/* ── Knowledge panel ────────────────────────────────────────── */
.kb-header {
  padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 6px;
  border-bottom: none;
}
.kb-tabs {
  display: flex; gap: 2px;
}
.kb-tab-btn {
  flex: 1; padding: 5px 0; border: none; background: transparent;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-sm); transition: all 0.15s;
}
.kb-tab-btn:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.kb-tab-btn.active { color: var(--sap-blue); background: var(--sap-blue-soft); }
.kb-search {
  width: 100%; box-sizing: border-box; padding: 5px 8px;
  border: 1px solid var(--border-soft, #e0e2e6); border-radius: var(--radius-sm);
  font-size: 12px; outline: none; background: var(--bg);
}
.kb-search:focus { border-color: var(--sap-blue); }
.kb-tab-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kb-tab-body[hidden] { display: none !important; }
.kb-filters { padding: 6px 12px; }
.kb-filter-select {
  width: 100%; padding: 4px 6px; font-size: 11px;
  border: 1px solid var(--border-soft, #e0e2e6); border-radius: var(--radius-sm);
  background: var(--bg); outline: none;
}
.kb-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.kb-empty { padding: 24px 16px; color: var(--text-muted); font-size: 12px; text-align: center; }
.kb-loading { padding: 12px 16px; color: var(--text-muted); font-size: 11px; }
.kb-item { border-bottom: 1px solid rgba(0,0,0,0.04); }
.kb-item-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; cursor: pointer; font-size: 12px;
}
.kb-item-header:hover { background: rgba(0,0,0,0.03); }
.kb-item-name { font-weight: 500; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-counts { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.kb-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  flex-shrink: 0;
}
.kb-badge-class { background: #FFF3E0; color: #E65100; }
.kb-badge-enum { background: #F3E5F5; color: #7B1FA2; }
.kb-badge-event { background: #E8F5E9; color: #2E7D32; }
.kb-badge-pattern { background: #FFF8E1; color: #F57F17; }
.kb-insert-btn {
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 14px; font-weight: 700; padding: 0 4px;
  border-radius: 3px; line-height: 1;
}
.kb-insert-btn:hover { color: var(--sap-blue); background: var(--sap-blue-soft); }
.kb-item-detail {
  padding: 0 12px 8px; font-size: 11px; max-height: 400px; overflow-y: auto;
}
.kb-desc { color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.kb-section-label {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-top: 8px; margin-bottom: 4px;
}
.kb-prop-list, .kb-method-list { display: flex; flex-direction: column; gap: 1px; }
.kb-prop, .kb-method {
  display: flex; align-items: baseline; gap: 6px; padding: 2px 4px;
  border-radius: 2px;
}
.kb-prop:hover, .kb-method:hover { background: rgba(0, 112, 242, 0.05); }
.kb-prop-name, .kb-method-name { font-weight: 500; color: var(--text); font-family: var(--mono); font-size: 11px; }
.kb-prop-type, .kb-method-sig { color: var(--text-muted); font-size: 10px; font-family: var(--mono); }
.kb-rw { font-size: 9px; color: #2E7D32; font-weight: 600; }
.kb-more { padding: 4px; color: var(--text-muted); font-size: 10px; font-style: italic; }
.kb-group-label {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 8px 12px 4px; margin-top: 4px;
}
.kb-event-desc, .kb-pattern-desc {
  padding: 0 12px 4px 42px; font-size: 11px; color: var(--text-secondary); line-height: 1.3;
}
.kb-pattern-kws {
  padding: 0 12px 6px 42px; font-size: 10px; color: var(--text-muted); font-style: italic;
}
/* Custom pattern badge */
.kb-badge-custom { background: #E3F2FD; color: #1565C0; }
/* Event note text */
.kb-event-note {
  color: var(--text-secondary); font-size: 11px; line-height: 1.4;
  margin-bottom: 4px; white-space: pre-wrap;
}
/* Add pattern bar */
.kb-add-bar { padding: 8px 12px; }
.kb-add-btn {
  width: 100%; padding: 5px 0; border: 1px dashed var(--border-soft, #d0d3d8);
  background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius-sm); transition: all 0.15s;
}
.kb-add-btn:hover { border-color: var(--sap-blue); color: var(--sap-blue); background: rgba(0, 112, 242, 0.04); }
/* Pattern form */
.kb-pattern-form {
  padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--border-soft, #e8e8e8);
}
.kb-form-input, .kb-form-select, .kb-form-textarea {
  width: 100%; box-sizing: border-box; padding: 5px 8px;
  border: 1px solid var(--border-soft, #e0e2e6); border-radius: var(--radius-sm);
  font-size: 12px; outline: none; background: var(--bg); font-family: inherit;
}
.kb-form-textarea { font-family: var(--mono); font-size: 11px; resize: vertical; min-height: 80px; }
.kb-form-input:focus, .kb-form-select:focus, .kb-form-textarea:focus { border-color: var(--sap-blue); }
.kb-form-buttons { display: flex; gap: 6px; justify-content: flex-end; }
.kb-form-btn {
  padding: 4px 12px; border: none; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.kb-form-save { background: var(--sap-blue); color: #fff; }
.kb-form-save:hover { background: #0b5a94; }
.kb-form-cancel { background: transparent; color: var(--text-muted); border: 1px solid var(--border-soft, #d0d3d8); }
.kb-form-cancel:hover { background: rgba(0,0,0,0.04); }
/* Pattern action icons (edit/delete) */
.kb-pattern-actions { display: none; gap: 2px; margin-left: auto; flex-shrink: 0; }
.kb-pattern-item:hover .kb-pattern-actions { display: flex; }
.kb-action-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; padding: 0 3px; color: var(--text-muted); border-radius: 3px; line-height: 1;
}
.kb-action-btn:hover { background: rgba(0,0,0,0.06); }
.kb-edit-btn:hover { color: var(--sap-blue); }
.kb-delete-btn:hover { color: #c62828; }

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

/* Pipeline groups */
.pl-group { margin-bottom: 4px; }
/* pl-group-header extends .panel-group-header — pipeline adds uppercase */
.pl-group-header {
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* Pipeline toggles .open on parent — rotate caret via ancestry */
.pl-group.open > .panel-group-header > .panel-caret { transform: rotate(90deg); }
.pl-group-items { display: none; }
.pl-group.open .pl-group-items { display: block; }

/* Pipeline items */
.pl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 4px 28px;
  font-size: 12px; color: var(--text);
  cursor: default;
}
.pl-item:hover { background: rgba(0,0,0,0.02); }
.pl-item.inactive { opacity: 0.45; }
.pl-rank {
  min-width: 24px; text-align: right;
  font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); font-weight: 500;
}
.pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-modules {
  display: block; font-size: 10px; color: var(--text-muted);
  font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px;
  flex-shrink: 0;
}
.pl-badge.sys { background: #E8E9EB; color: var(--text-secondary); }
.pl-badge.usr { background: var(--sap-blue-soft); color: var(--sap-blue); }
.pl-badge.script { background: rgba(24, 137, 24, 0.09); color: #188918; }
.pipeline-stats {
  padding: 12px 16px; font-size: 11px; color: var(--text-muted);
  border-top: 1px solid #E0E2E6; margin-top: 8px;
}

/* Fields Tree — Level 2: fields */
.pl-field-wrap { }
.pl-field {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 28px;
  cursor: pointer; font-size: 12px; color: var(--text);
  transition: background 0.15s;
}
.pl-field:hover { background: rgba(0,0,0,0.02); }
/* pl-field-caret inherits .panel-caret — smaller for nested items */
.pl-field-caret { font-size: 7px; width: 10px; }
.pl-field-wrap.open .pl-field-caret { transform: rotate(90deg); }
.pl-field-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-field-count {
  font-size: 10px; color: var(--text-muted); font-family: var(--mono); flex-shrink: 0;
}
.pl-field-calcs { display: none; }
.pl-field-wrap.open .pl-field-calcs { display: block; }
.pl-field-loading {
  padding: 4px 12px 4px 44px; font-size: 11px; color: var(--text-muted);
}
.pl-field-spinner {
  display: inline-block; width: 10px; height: 10px;
  border: 1.5px solid var(--border); border-top-color: var(--sap-blue);
  border-radius: 50%; animation: pl-spin 0.6s linear infinite;
  vertical-align: middle; margin-right: 4px;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* Fields Tree — Level 3: draggable calculations */
.pl-calc {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 44px;
  font-size: 12px; color: var(--text); cursor: default;
  transition: opacity 0.15s, background 0.15s;
}
.pl-calc:hover { background: rgba(0,0,0,0.02); }
.pl-drag-handle {
  cursor: grab; color: var(--text-muted); font-size: 14px;
  flex-shrink: 0; user-select: none; line-height: 1;
}
.pl-drag-handle:active { cursor: grabbing; }
.pl-calc.dragging { opacity: 0.35; }
.pl-calc.drag-over-above { box-shadow: inset 0 2px 0 0 var(--sap-blue); }
.pl-calc.drag-over-below { box-shadow: inset 0 -2px 0 0 var(--sap-blue); }

/* Formula info button on SYS calculations */
.pl-formula-btn {
  all: unset;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  line-height: 1.2;
  flex-shrink: 0;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pl-formula-btn:hover {
  color: var(--sap-blue);
  border-color: var(--sap-blue);
  background: var(--sap-blue-soft);
}

/* Formula popup dialog */
.formula-dialog { max-width: 480px; }
.formula-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.formula-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.formula-close-btn {
  all: unset;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.formula-close-btn:hover {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}
.formula-detail {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.formula-detail[hidden],
.formula-row[hidden],
.formula-loading[hidden],
.formula-error[hidden] { display: none; }
.formula-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.formula-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.formula-value {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.formula-code {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Formula dialog — loading and error states */
.formula-loading {
  padding: 16px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.formula-error {
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--error);
  background: var(--error-bg);
  border-radius: var(--radius-sm);
}

/* Formula dialog — script preview */
.formula-script-preview {
  max-height: 220px;
  overflow-y: auto;
  font-size: 11px;
  tab-size: 4;
}

/* Formula dialog — attached fields list */
.formula-field-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.formula-field-list li {
  font-size: 12px;
  color: var(--text);
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 3px;
  font-family: var(--mono);
}

/* Formula dialog — execution flags */
.formula-flags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.formula-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.formula-flag-icon {
  font-size: 11px;
  width: 14px;
  text-align: center;
}
.formula-flag-icon.on { color: var(--success); }
.formula-flag-icon.off { color: var(--text-muted); }

/* Formula dialog — open in editor link */
.formula-editor-link {
  font-size: 12px;
  color: var(--sap-blue);
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
}
.formula-editor-link:hover { text-decoration: underline; }
.formula-editor-notfound {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
  pointer-events: none;
}
.formula-pull-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* Inline toast for script open failures */
.pl-script-toast {
  font-size: 10px;
  color: var(--error);
  margin-left: 6px;
  white-space: nowrap;
}

/* Formula dialog — muted text */
.formula-muted {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Formula dialog — imports */
.formula-imports {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.formula-import-tag {
  font-size: 11px;
  font-family: var(--mono);
  padding: 2px 6px;
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  border-radius: 3px;
}

/* Save feedback flashes */
.pl-field.pl-save-ok { background: var(--success-bg); transition: background 0.3s; }
.pl-field.pl-save-err { background: var(--error-bg); transition: background 0.3s; }

/* Legacy sidebar-collapsed rules removed — zone layout uses .left-collapsed / .right-collapsed */

/* ---- BRAND (used in top-nav) ---- */

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sap-blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* Tenant dropdown */
.tenant-dropdown {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
}

.td-list { padding: 4px 0; }

.td-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.1s;
}
.td-item:hover { background: var(--sap-blue-soft); }
.td-item.active { background: var(--sap-blue-soft); }
.td-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.td-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.td-group-header {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); padding: 8px 12px 4px; font-weight: 700;
}
.td-env { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-left: auto; flex-shrink: 0; }
.td-env-dev { color: #2563eb; background: #eef4ff; }
.td-env-test { color: #d97706; background: #fff7ea; }
.td-env-prod { color: #16a34a; background: #eefaf1; }
.td-lineage-btn { background: none; border: none; cursor: pointer; opacity: .6; color: var(--text-muted); padding: 0 4px; flex-shrink: 0; }
.td-lineage-btn:hover { opacity: 1; }
.td-item:hover .td-lineage-btn { opacity: .8; }
.td-lineage-editor { display: flex; gap: 6px; padding: 6px 12px 10px; align-items: center; }
.td-lineage-editor[hidden] { display: none; }
.td-fam-input, .td-env-select { font-size: 12px; padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-sidebar, #f6f7f9); color: var(--text); }
.td-lineage-save { font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: none; color: var(--sap-blue); }
.td-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.td-dot.connected { background: var(--success); }
.td-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.td-name {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-user {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-unsaved {
  font-size: 14px;
  color: var(--warning);
  margin-left: 4px;
}
.td-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s;
}
.td-item:hover .td-remove { opacity: 1; }
.td-remove:hover { color: var(--error); }
.td-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.td-add-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--sap-blue);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.td-add-btn:hover { background: var(--sap-blue-soft); }

/* Login dialog */
.login-dialog .confirm-body { max-width: 400px; }
.scaffold-dialog .confirm-body { max-width: 440px; }
.scaffold-desc { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; }
.scaffold-preview { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin: 4px 0 0; padding: 6px 8px; background: var(--bg-sidebar); border-radius: var(--radius-sm); }
.system-badge { font-size: 10px; color: var(--text-muted); background: var(--bg-sidebar); padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.login-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.login-input {
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--text);
  background: rgba(255, 255, 255, 0.6);
  outline: none;
  transition: border-color 0.15s;
}
.login-input:focus {
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 2px var(--sap-blue-ring);
}
.login-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.login-checkbox input { cursor: pointer; }
.login-error {
  font-size: 12px;
  color: var(--error);
  margin: 0;
  padding: 6px 8px;
  background: var(--error-bg);
  border-radius: var(--radius-sm);
}

.conn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.3s;
  cursor: help;
}

.conn-dot.connected {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-bg);
}

/* Tabs (used by pipeline scope switcher, etc.) */

.tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--sap-blue); border-bottom-color: var(--sap-blue); }

/* Sync toolbar */

.sync-toolbar {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.sync-summary {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--mono);
}
.sync-summary.has-conflicts {
  cursor: pointer;
  color: var(--error);
}
.sync-summary.has-conflicts:hover { text-decoration: underline; }
.sync-conflict-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
}

/* File tree */

.file-tree {
  padding: 4px 8px 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

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

.tree-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-ul .tree-ul {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  min-height: 28px;
  position: relative;
  transition: background 0.1s;
}

.tree-row:hover { background: var(--sap-blue-soft); }
.tree-row.active-file { background: var(--sap-blue-soft); }
.tree-row.selected {
  background: var(--sap-blue-soft);
  box-shadow: inset 2px 0 0 var(--sap-blue);
}
.tree-row.selected:hover { filter: brightness(0.97); }
.file-tree-multiselect .tree-row .tree-actions { display: none !important; }

/* tree-caret inherits from .panel-caret — only overrides needed here */
.tree-caret { height: 14px; }

.tree-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tree-icon svg {
  width: 16px;
  height: 16px;
}

.tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* Sync badges */

.sync-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
}

.sync-badge svg { width: 12px; height: 12px; }

.sync-badge.in_sync { background: var(--success-bg); color: var(--success); }
.sync-badge.local_only { background: var(--info-bg); color: var(--info); }
.sync-badge.remote_only { background: var(--warning-bg); color: var(--warning); }
.sync-badge.conflict { background: var(--error-bg); color: var(--error); }
.sync-badge.sync-error { background: #FFF3CD; color: #856404; cursor: help; }
.sync-badge.local { background: var(--panel); color: var(--text-muted); }
.sync-badge.loading { background: var(--panel); }

.sync-spinner-sm {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--border);
  border-top-color: var(--text-muted);
  border-radius: 50%;
  animation: spin-sm 0.8s linear infinite;
}

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

/* Hover actions on tree rows */

.tree-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.tree-row:hover .tree-actions { display: flex; }
.tree-row:hover .sync-badge { display: none; }

.tree-actions .btn-icon {
  width: 22px;
  height: 22px;
  padding: 0;
}

/* Conversations */

.conversations { padding: 8px; }

.conv-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  margin-bottom: 4px;
  transition: border-color 0.12s, background 0.12s;
}

.conv-card:hover { border-color: var(--border); background: var(--surface); }
.conv-card.active { border-color: var(--sap-blue-ring); background: var(--sap-blue-soft); }

.conv-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

/* Conversation actions bar */
.conv-actions {
  display: flex;
  gap: 6px;
  padding: 8px 8px 4px;
}
.conv-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.conv-actions .btn svg {
  flex-shrink: 0;
}

/* Conversation card header with delete button */
.conv-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
}
.conv-card-header .conv-title {
  flex: 1;
  min-width: 0;
}
.conv-delete {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.conv-card:hover .conv-delete { display: block; }
.conv-delete:hover { color: var(--error); }

/* Save dialog */
.save-dialog .save-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.save-dialog .save-remember input {
  margin: 0;
}

/* Template picker dialog */
.template-picker-dialog { max-width: 500px; }
.template-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 16px;
}
.template-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.template-card:last-child { border-bottom: none; }
.template-card:hover { background: var(--sap-blue-soft); }
.template-card.selected {
  background: var(--info-bg, rgba(0,112,242,0.06));
  border-left: 3px solid var(--sap-blue);
  padding-left: 11px;
}
.template-card-name { font-weight: 500; font-size: 13px; }
.template-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---- WORKSPACE ---- */

.workspace {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* (Old .topbar, .topbar-left, .topbar-right, .topbar-title removed — replaced by .top-nav) */

.select-model {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: var(--chevron-light);
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.select-model:focus-visible {
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: 1px;
}

.health-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.3s;
}

.health-chip.ok .health-dot { background: var(--success); }
.health-chip.ok { border-color: rgba(24, 137, 24, 0.25); color: var(--success); }

/* Chat stream */

.chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0;
  scroll-behavior: smooth;
}

.chat-welcome {
  text-align: center;
  padding: 60px 24px 40px;
  animation: fadeUp 0.4s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-icon {
  margin-bottom: 16px;
  opacity: 0.6;
}

.chat-welcome h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.chat-welcome p {
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 14px;
}

.welcome-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}

.chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.chip:hover {
  border-color: var(--sap-blue);
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
}

/* Chat messages */

.chat-msg {
  max-width: var(--chat-max-w);
  margin: 0 auto 20px;
  padding: 0 24px;
  display: flex;
  gap: 12px;
  animation: fadeUp 0.2s ease both;
}

/* Code blocks */

.code-card {
  margin: 12px 0 8px;
  max-width: 100%;
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--code-bg);
  border-bottom: 1px solid var(--code-border);
  color: var(--code-fg);
}

.code-filename {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--code-fg);
  opacity: 0.85;
}

.code-actions {
  display: flex;
  gap: 4px;
}

.code-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.code-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.code-tab {
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.1s, color 0.1s;
}

.code-tab:hover { color: var(--text-secondary); }
.code-tab.active { background: var(--sap-blue-soft); color: var(--sap-blue); }
.code-tab + .code-tab { border-left: 1px solid var(--border); }

.code-actions .btn-xs {
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
  gap: 4px;
}

.code-actions .btn-success { color: #2E7D32; border-color: #2E7D32; }
.code-actions .btn-danger { color: #C62828; border-color: #C62828; }
.code-validation-errors {
  padding: 8px 16px; background: #FFF3F3; border-top: 1px solid #FFCDD2;
  font-size: 11px; font-family: var(--mono); color: #C62828;
  max-height: 120px; overflow-y: auto;
}
.code-val-error { padding: 2px 0; line-height: 1.4; }
.code-val-error + .code-val-error { border-top: 1px solid rgba(198,40,40,0.1); }

.code-body {
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--code-bg);
  color: var(--code-fg);
  font-feature-settings: 'calt' 0, 'liga' 0, 'zero' 1;
}

.code-body pre {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-code);
  line-height: 1.7;
  color: var(--code-fg);
  white-space: pre;
  tab-size: 4;
}

/* Dark-surface syntax tokens — scoped overrides so .code-body looks right on both themes. */
.code-body .py-kw      { color: var(--syn-keyword-dk); font-weight: 600; }
.code-body .py-str     { color: var(--syn-string-dk); }
.code-body .py-num     { color: var(--syn-number-dk); }
.code-body .py-comment { color: var(--syn-comment-dk); font-style: italic; }
.code-body .py-builtin { color: var(--syn-builtin-dk); }
.code-body .py-self    { color: var(--syn-error-dk); font-weight: 500; }
.code-body .py-fn      { color: var(--syn-fn-dk); }
.code-body .hl-tag     { color: var(--syn-error-dk); font-weight: 500; }
.code-body .hl-attr    { color: var(--syn-number-dk); }
.code-body .hl-ko-attr { color: var(--syn-builtin-dk); font-weight: 500; }
.code-body .hl-str     { color: var(--syn-string-dk); }
.code-body .hl-bracket { color: var(--syn-punct-dk); }
.code-body .jn-key     { color: var(--syn-keyword-dk); font-weight: 500; }
.code-body .jn-str     { color: var(--syn-string-dk); }
.code-body .jn-num     { color: var(--syn-number-dk); }
.code-body .dt-add     { color: var(--syn-string-dk); }
.code-body .dt-del     { color: var(--syn-error-dk); }

/* Python syntax highlighting */
.py-kw { color: var(--syn-keyword); font-weight: 600; }
.py-str { color: var(--syn-string); }
.py-num { color: var(--syn-number); }
.py-comment { color: var(--text-muted); font-style: italic; }
.py-builtin { color: var(--syn-builtin); }
.py-self { color: var(--syn-error); font-weight: 500; }
.py-fn { color: var(--syn-fn); }

/* HTML / Razor syntax highlighting */
.hl-tag { color: var(--syn-error); font-weight: 500; }
.hl-attr { color: var(--syn-number); }
.hl-ko-attr { color: var(--syn-builtin); font-weight: 500; }
.hl-str { color: var(--syn-string); }
.hl-bracket { color: var(--syn-punct); }
.hl-comment { color: var(--text-muted); font-style: italic; }
.hl-entity { color: var(--syn-number); }
.hl-razor { color: var(--syn-builtin); font-weight: 500; }

/* JSON syntax highlighting */
.jn-key { color: var(--syn-keyword); font-weight: 500; }
.jn-str { color: var(--syn-string); }
.jn-num { color: var(--syn-number); }
.jn-bool { color: var(--syn-builtin); font-weight: 500; }
.jn-null { color: var(--text-muted); font-style: italic; }
.jn-punct { color: var(--syn-punct); }

/* Document tag syntax highlighting */
.dt-tag { color: var(--syn-keyword); font-weight: 600; }
.dt-param { color: var(--syn-string); }
.dt-mod { color: var(--syn-number); }
.dt-ctx { color: var(--syn-string); font-weight: 500; }
.dt-fn { color: var(--syn-builtin); }
.dt-cond { color: var(--syn-error); font-weight: 500; }

/* Code card IDE button */
.code-actions .ico {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  vertical-align: -2px;
  margin-right: 2px;
}

/* Code diff (inline in chat code blocks) */

.code-diff-body {
  padding: 0;
  overflow-x: auto;
  background: #FAFBFC;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
}

.cd-hunk {
  padding: 3px 12px;
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-size: 11px;
  font-weight: 500;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cd-line {
  display: flex;
  min-height: 22px;
  padding-right: 12px;
}

.cd-num {
  width: 36px;
  min-width: 36px;
  text-align: right;
  padding: 0 4px;
  color: var(--text-muted);
  user-select: none;
  font-size: 11px;
  flex-shrink: 0;
}

.cd-num-new { border-right: 1px solid var(--border); }

.cd-marker {
  width: 18px;
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}

.cd-content {
  flex: 1;
  white-space: pre;
  padding-left: 6px;
  min-width: 0;
}

.cd-line.addition {
  background: var(--success-bg);
  border-left: 3px solid var(--success);
}
.cd-line.addition .cd-marker { color: var(--success); }
.cd-line.addition .cd-num { color: var(--success); }

.cd-line.removal {
  background: var(--error-bg);
  border-left: 3px solid var(--error);
}
.cd-line.removal .cd-marker { color: var(--error); }
.cd-line.removal .cd-num { color: var(--error); }
.cd-line.removal .cd-content {
  text-decoration: line-through;
  opacity: 0.7;
}

.cd-line.context {
  border-left: 3px solid transparent;
}
.cd-line.context .cd-content {
  color: var(--text-secondary);
}

/* Word-level diff highlighting (Enhancement #6) */
.cd-word-add {
  background: rgba(46, 160, 67, 0.3);
  border-radius: 2px;
  padding: 0 1px;
}
.cd-word-del {
  background: rgba(248, 81, 73, 0.3);
  border-radius: 2px;
  padding: 0 1px;
}

/* Side-by-side diff mode */
.cd-sbs-toggle {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  font-size: 11px;
}
.cd-sbs-toggle button {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
}
.cd-sbs-toggle button.active {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  border-color: var(--sap-blue);
}
.cd-sbs-container {
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.cd-sbs-pane {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.cd-sbs-pane:first-child {
  border-right: 1px solid var(--border);
}
.cd-sbs-pane .cd-line {
  padding-right: 8px;
}
.cd-sbs-pane .cd-num-new,
.cd-sbs-pane .cd-num-old:not(:first-child) {
  display: none;
}
.cd-sbs-pane .cd-num {
  width: 28px;
  min-width: 28px;
}
.cd-sbs-label {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

/* Tool result blocks */

.tool-result {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tool-result-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.tool-result-header::before {
  content: '>';
  font-family: var(--mono);
  font-size: 10px;
  transition: transform 0.15s;
}

.tool-result-header.expanded::before {
  transform: rotate(90deg);
}

.tool-result-body {
  display: none;
  padding: 8px 12px;
  background: #FAFBFC;
  max-height: clamp(180px, 35vh, 480px);
  overflow: auto;
}

.tool-result-body.expanded { display: block; }

.tool-result-body pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}

/* Test result formatting */
.tr-label { font-weight: 600; }
.tr-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 500;
}
.tr-badge-existing_test { background: var(--sap-blue-soft); color: var(--sap-blue); }
.tr-badge-generated { background: rgba(24,137,24,0.1); color: #188918; }
.tr-badge-direct { background: rgba(103,80,164,0.1); color: #6750A4; }

.tr-traces { font-family: var(--mono); font-size: 11px; line-height: 1.7; }
.tr-trace { padding: 2px 0; border-bottom: 1px solid var(--border-light); }
.tr-trace:last-child { border-bottom: none; }
.tr-ts { color: var(--text-muted); margin-right: 8px; font-size: 10px; }
.tr-meta { font-size: 11px; color: var(--text-secondary); margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--border-light); }
.tr-error { font-family: var(--mono); font-size: 11px; color: #CC1919; white-space: pre-wrap; }

/* Legacy Configurator table (fallback) */
.cfg-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.cfg-table th { text-align: left; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 4px 8px; border-bottom: 2px solid var(--border); }
.cfg-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.cfg-name { font-weight: 500; white-space: nowrap; }
.cfg-req { color: #CC1919; margin-left: 2px; }
.cfg-type { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.cfg-value { max-width: 300px; }
.cfg-current { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); }
.cfg-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.cfg-opt { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; background: var(--surface-elevated); border: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s; }
.cfg-opt:hover { border-color: var(--accent); color: var(--accent); }
.cfg-opt-selected { background: rgba(0,112,242,0.1); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.cfg-disabled td { opacity: 0.45; }
.cfg-price { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.cfg-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-light); }
.cfg-hint code { font-family: var(--mono); background: var(--surface-elevated); padding: 1px 4px; border-radius: 2px; font-size: 10px; }

/* ---- Embedded CPQ Configurator (iframe) ---- */

.cfg-embed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: opacity 0.3s;
}

.cfg-embed.done {
  border: none;
  box-shadow: none;
}

.cfg-embed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.cfg-embed-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cfg-embed-title strong {
  font-size: 14px;
  font-weight: 700;
}

.cfg-embed-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cfg-iframe {
  width: 100%;
  height: clamp(360px, 50vh, 640px);
  border: none;
  display: block;
  background: var(--bg);
}

.cfg-embed:not(.loaded) .cfg-iframe {
  background:
    var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23DDE1E6' stroke-width='3' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E")
    center center no-repeat;
}

/* ---- Interactive Configurator Card ---- */

.cfg-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  max-width: 640px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s;
}

.cfg-card.done {
  opacity: 0.85;
}

/* Card header */
.cfg-card-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.cfg-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cfg-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cfg-header-title strong {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.cfg-part-number {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.cfg-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cfg-header-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.cfg-header-progress {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Progress bar */
.cfg-progress-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.cfg-progress-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Tabs */
.cfg-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  background: var(--panel);
}

.cfg-tab-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.cfg-tab-btn:hover { color: var(--text-secondary); }
.cfg-tab-btn.active { color: var(--sap-blue); border-bottom-color: var(--sap-blue); }

/* Card body (attribute rows) */
.cfg-card-body {
  padding: 8px 0;
  max-height: clamp(280px, 45vh, 560px);
  overflow-y: auto;
}

/* Attribute row */
.cfg-attr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}

.cfg-attr-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

.cfg-attr-row.incomplete {
  border-left-color: var(--error);
}

.cfg-attr-row.conflict {
  border-left-color: var(--warning);
}

.cfg-attr-row.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.cfg-attr-row.updating {
  background: var(--sap-blue-soft);
  animation: cfgPulse 1s infinite;
}

.cfg-attr-row.changed {
  animation: cfgFlash 0.6s ease;
}

@keyframes cfgPulse {
  0%, 100% { background: var(--sap-blue-soft); }
  50% { background: rgba(0, 112, 242, 0.04); }
}

@keyframes cfgFlash {
  0% { background: var(--success-bg); }
  100% { background: transparent; }
}

/* Attribute label */
.cfg-attr-label {
  width: 160px;
  min-width: 120px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Control area */
.cfg-control {
  flex: 1;
  min-width: 0;
}

/* Select */
.cfg-select {
  font: inherit;
  font-size: 13px;
  width: 100%;
  max-width: 280px;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: var(--chevron-light);
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.cfg-select:focus {
  outline: none;
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 2px var(--sap-blue-ring);
}

.cfg-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Radio group */
.cfg-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.cfg-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.cfg-radio-label.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cfg-radio-label input[type="radio"] {
  accent-color: var(--sap-blue);
  cursor: inherit;
}

/* Checkbox group */
.cfg-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.cfg-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.cfg-checkbox-label.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cfg-checkbox-label input[type="checkbox"] {
  accent-color: var(--sap-blue);
  cursor: inherit;
}

/* Image button tiles */
.cfg-tile-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cfg-tile {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cfg-tile:hover {
  border-color: var(--sap-blue);
  background: var(--sap-blue-soft);
}

.cfg-tile.selected {
  border-color: var(--sap-blue);
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-weight: 600;
}

.cfg-tile.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Text input */
.cfg-text-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  max-width: 280px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}

.cfg-text-input:focus {
  outline: none;
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 2px var(--sap-blue-ring);
}

.cfg-text-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Option price indicator */
.cfg-option-price {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* Read-only value */
.cfg-readonly-value {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* Row spinner (loading overlay) */
.cfg-row-spinner {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.cfg-attr-row.updating .cfg-row-spinner {
  display: block;
}

.cfg-spinner-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--sap-blue);
  border-radius: 50%;
  animation: cfgSpin 0.6s linear infinite;
}

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

/* Messages */
.cfg-messages {
  padding: 0 16px;
}

.cfg-messages:empty {
  display: none;
}

.cfg-msg {
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}

.cfg-msg-error {
  background: var(--error-bg);
  color: var(--error);
}

.cfg-msg-incomplete {
  background: var(--warning-bg);
  color: var(--warning);
}

.cfg-msg-invalid {
  background: var(--error-bg);
  color: var(--error);
}

.cfg-msg-conflict {
  background: var(--warning-bg);
  color: var(--warning);
}

.cfg-msg-info {
  background: var(--info-bg);
  color: var(--info);
}

/* Footer */
.cfg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.cfg-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Done state */
.cfg-done-msg {
  padding: 24px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--success);
}

.cfg-done-msg.cfg-cancelled {
  color: var(--text-muted);
}

/* ---- Trace Panel (Dev Console) ---- */

.cfg-trace-panel {
  border-top: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.cfg-trace-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 12px;
}

.cfg-trace-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.cfg-trace-toggle-btn:hover {
  color: var(--sap-blue);
}

.cfg-trace-toggle-btn svg {
  flex-shrink: 0;
}

.cfg-trace-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--sap-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--sans);
  line-height: 1;
}

.cfg-trace-badge.pulse {
  animation: cfgTraceBadgePulse 0.4s ease-out;
}

@keyframes cfgTraceBadgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.cfg-trace-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfg-trace-filter-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cfg-trace-filter-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.cfg-trace-filter-btn:last-child {
  border-right: none;
}

.cfg-trace-filter-btn.active {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-weight: 600;
}

.cfg-trace-filter-btn:hover:not(.active) {
  background: var(--sap-blue-soft);
}

.cfg-trace-clear-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.cfg-trace-clear-btn:hover {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error);
}

/* Label filter dropdown */
.cfg-label-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cfg-label-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.cfg-label-filter-btn:hover,
.cfg-label-filter-btn.active {
  background: var(--sap-blue-soft);
  border-color: var(--sap-blue);
  color: var(--sap-blue);
}

.cfg-label-filter-text {
  font-size: 11px;
}

.cfg-label-filter-arrow {
  font-size: 8px;
  opacity: 0.6;
  line-height: 1;
}

.cfg-label-filter-panel {
  position: fixed;
  min-width: 150px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  z-index: 9999;
  padding: 3px 0;
}

.cfg-label-filter-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-secondary);
  transition: background 0.1s;
}

.cfg-label-filter-opt:hover {
  background: var(--sap-blue-soft);
}

.cfg-label-filter-opt.active {
  background: rgba(0, 112, 242, 0.06);
  color: var(--text);
  font-weight: 500;
}

.cfg-trace-body {
  max-height: clamp(200px, 30vh, 400px);
  overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

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

.cfg-trace-action {
  border-bottom: 1px solid var(--border);
}

.cfg-trace-action:last-child {
  border-bottom: none;
}

/* New trace arrival animation — brief shimmer highlight */
.cfg-trace-action.cfg-trace-new {
  animation: trace-arrive 1.2s ease-out;
}

@keyframes trace-arrive {
  0% {
    background: linear-gradient(90deg, transparent 0%, rgba(0,112,242,0.15) 30%, rgba(0,112,242,0.25) 50%, rgba(0,112,242,0.15) 70%, transparent 100%);
    background-size: 200% 100%;
    background-position: -100% 0;
  }
  40% {
    background: linear-gradient(90deg, transparent 0%, rgba(0,112,242,0.15) 30%, rgba(0,112,242,0.25) 50%, rgba(0,112,242,0.15) 70%, transparent 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
  }
  100% {
    background: transparent;
  }
}

.cfg-trace-action-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  transition: background 0.1s;
}

.cfg-trace-action-header:hover {
  background: var(--sap-blue-soft);
}

.cfg-trace-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

.cfg-trace-action.expanded .cfg-trace-chevron {
  transform: rotate(90deg);
}

.cfg-trace-action-name {
  font-weight: 600;
  color: var(--sap-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfg-trace-action-meta {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.cfg-trace-action-body {
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.cfg-trace-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  animation: cfgTraceLineIn 0.15s ease-out;
}

.cfg-trace-line:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

@keyframes cfgTraceLineIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cfg-trace-level {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.cfg-trace-level-h {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
}

.cfg-trace-level-l {
  background: rgba(106, 122, 140, 0.1);
  color: var(--text-secondary);
}

.cfg-trace-level-error {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.cfg-trace-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  background: rgba(106, 122, 140, 0.08);
  color: var(--text-muted);
}

.cfg-trace-label-script,
.cfg-trace-label-scriptevent {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.cfg-trace-label-scripterror {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.cfg-trace-label-ruleengine {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.cfg-trace-label-database {
  background: rgba(6, 182, 212, 0.1);
  color: #0891b2;
}

.cfg-trace-msg {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: var(--text);
}

.cfg-trace-dur {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
  min-width: 40px;
}

.cfg-trace-empty-action {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

/* ---- Trace Groups (hierarchical) ---- */

.cfg-trace-group {
  /* No margin/border — aligns flush with leaf lines at same depth */
}

.cfg-trace-group-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 12px;     /* identical to .cfg-trace-line */
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.cfg-trace-group-header:hover {
  background: var(--sap-blue-soft);
}

.cfg-trace-group.expanded > .cfg-trace-group-header {
  background: rgba(0, 112, 242, 0.04);
  color: var(--text);
}

.cfg-trace-group.expanded > .cfg-trace-group-header .cfg-trace-chevron {
  transform: rotate(90deg);
}

.cfg-trace-group-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.cfg-trace-group-meta {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.cfg-trace-group-dur {
  color: var(--text-muted);
  font-size: 10px;
}

/* Children sit indented under the message content area (past chevron + gap) */
.cfg-trace-group-body {
  padding-left: 18px;  /* chevron 12px + gap 6px */
}

/* Nested groups: no extra margin — indentation comes from body padding only */
.cfg-trace-group .cfg-trace-group {
  margin-left: 0;
}

/* Synthetic container nodes (missing parents synthesized for tree integrity) */
.cfg-trace-synthetic > .cfg-trace-group-header {
  opacity: 0.55;
  font-style: italic;
}
.cfg-trace-line.cfg-trace-synthetic {
  opacity: 0.4;
  font-style: italic;
}

/* Embed — trace panel below iframe */
.cfg-embed .cfg-trace-panel {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Composer */

.composer {
  position: relative;  /* anchors .at-autocomplete via bottom: 100% */
  padding: 14px 16px 16px 16px;
  background: var(--surface, transparent);
  border-top: 1px solid var(--border, #e5e7eb);
}

.composer-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fafafa;
  max-width: var(--chat-max-w);
  margin: 0 auto;
  transition: border-color 120ms, background 120ms;
}

.composer-inner:focus-within {
  border-color: #1f2937;
  background: #fff;
}
[data-theme="dark"] .composer-inner {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .composer-inner:focus-within {
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.06);
}
.composer-inner.drag-over {
  border-color: var(--sap-blue);
  background: var(--sap-blue-soft);
}

.composer-inner textarea {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 4px 0; resize: none;
  font: inherit; font-size: 13.5px; line-height: 1.4;
  color: inherit;
}

.composer-inner textarea::placeholder { color: var(--text-muted); }
.composer-inner textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Attach button */
.btn-attach {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.btn-attach:hover { color: var(--sap-blue); background: var(--sap-blue-soft); }

/* Attachment chips */
.composer-attachments {
  max-width: var(--chat-max-w);
  margin: 0 auto 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
  color: var(--text);
  max-width: 280px;
}
.attach-chip.uploading {
  color: var(--text-muted);
  font-style: italic;
}
.attach-chip svg { flex-shrink: 0; color: var(--sap-blue); }
.attach-chip.image { padding-left: 4px; }
.attach-chip.text { padding-left: 6px; }
.attach-text-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--sap-blue-soft, rgba(13, 110, 253, 0.1));
  color: var(--sap-blue);
  border: 1px solid var(--sap-blue);
  line-height: 1;
}
.attach-thumb {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-2, var(--panel));
}
.attach-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.attach-meta { color: var(--text-muted); }
.attach-remove {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 2px;
}
.attach-remove:hover { color: var(--error); }

.composer-inner .btn-send {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1f2937; color: #fff;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.composer-inner .btn-send:disabled {
  background: #d1d5db; cursor: default;
}
.composer-inner .btn-send svg { width: 14px; height: 14px; }
[data-theme="dark"] .composer-inner .btn-send { background: #e5e7eb; color: #111827; }
[data-theme="dark"] .composer-inner .btn-send:disabled { background: rgba(255,255,255,0.10); color: #9ca3af; }

/* @ Autocomplete dropdown */

.at-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--chat-max-w);
  max-height: 220px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  z-index: 20;
  padding: 4px;
}

.at-autocomplete[hidden] { display: none; }

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

.at-item:hover,
.at-item.active {
  background: var(--sap-blue-soft);
}

.at-item.active {
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: -2px;
}

.at-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sap-blue);
}

.at-item-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  flex: 1;
}

.at-item-path {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
}

.at-item-name mark {
  background: rgba(0, 112, 242, 0.15);
  color: var(--sap-blue);
  border-radius: 2px;
  padding: 0 1px;
}

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

.composer-hint {
  max-width: var(--chat-max-w);
  margin: 6px auto 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ---- CHAT PANEL (right zone) ---- */

#panel-chat { overflow: hidden; }
.chat-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-panel-header {
  display: flex; align-items: center; padding: 6px 12px;
  background: rgba(247, 248, 249, 0.72);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  gap: 6px; flex-shrink: 0; position: relative; font-size: 12px;
}
.chat-panel-icon { color: var(--sap-blue); font-size: 14px; }
.chat-panel-title { font-weight: 600; font-size: 12px; flex: 1; }
.chat-panel-actions { display: flex; gap: 4px; align-items: center; }

/* Backend picker — header dropdown that switches the coding-agent backend */
.backend-picker {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 3px 9px;
  font: inherit; font-size: 11.5px;
  color: var(--text, #1f2937);
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
  margin-right: 4px;
  max-width: 180px;
}
.backend-picker:hover {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.15);
}
.backend-picker svg { opacity: 0.55; flex: 0 0 auto; }
.backend-picker-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 140px;
}
[data-theme="dark"] .backend-picker {
  border-color: rgba(255,255,255,0.12);
  color: var(--text, #e5e7eb);
}
[data-theme="dark"] .backend-picker:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.20);
}

.backend-menu {
  position: absolute; top: 100%; right: 8px; width: 280px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.04);
  z-index: 50;
  padding: 4px;
}
.backend-menu[hidden] { display: none; }
[data-theme="dark"] .backend-menu {
  background: rgba(30, 30, 33, 0.94);
  border-color: rgba(255,255,255,0.12);
}

.backend-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0; background: transparent;
  border-radius: 6px;
  font: inherit; color: inherit;
  cursor: pointer;
  text-align: left;
}
.backend-menu-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .backend-menu-item:hover { background: rgba(255,255,255,0.06); }
.backend-menu-item.active { background: rgba(75,142,251,0.08); }
[data-theme="dark"] .backend-menu-item.active { background: rgba(75,142,251,0.14); }
.backend-menu-label {
  font-size: 13px; font-weight: 500;
  color: var(--text, #1f2937);
}
.backend-menu-hint {
  grid-column: 1 / 2;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 1px;
}
.backend-menu-check {
  grid-column: 2 / 3; grid-row: 1 / 2;
  color: #16a34a;
  font-size: 13px;
  align-self: center;
}

/* History dropdown */
.history-dropdown {
  position: absolute; top: 100%; right: 8px; width: 280px; max-height: 320px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  overflow: auto; z-index: 20; padding: 4px 0;
}
.history-item {
  display: flex; flex-direction: column; width: 100%; padding: 8px 12px;
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: var(--sans); gap: 2px;
}
.history-item:hover { background: var(--sap-blue-soft); }
.history-item-title { font-size: 12px; color: var(--text); font-weight: 500; }
.history-item-date { font-size: 10px; color: var(--text-muted); }
.history-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* ---- DIFF PANEL (rendered inside center-zone panel container) ---- */
.diff-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

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

.diff-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diff-bulk-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.diff-file-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

/* ---- Sublime-Merge style file cards (replaces .diff-file-row + .diff-view layout) ---- */
.diff-file-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
  background: var(--surface);
}

.diff-file-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}

.diff-file-card-header:hover { background: var(--sap-blue-soft); }
.diff-file-card.expanded > .diff-file-card-header {
  background: var(--sap-blue-soft);
  border-bottom: 1px solid var(--border);
}

.diff-card-caret {
  font-size: 9px;
  width: 12px;
  color: var(--text-muted);
  transition: transform 0.12s;
  flex-shrink: 0;
}
.diff-card-caret.open { transform: rotate(90deg); }

.diff-card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.diff-file-card-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  max-height: 480px;
  overflow: auto;
}
.diff-file-card:not(.expanded) > .diff-file-card-body {
  display: none;
}

.diff-empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.diff-error { color: var(--error); }

.diff-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.diff-file-row:hover { background: var(--sap-blue-soft); }
.diff-file-row.active { background: var(--sap-blue-soft); font-weight: 600; }

.diff-file-name {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diff-file-dir {
  font-size: 10px;
  color: var(--text-muted);
}
.diff-file-actions {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-top: 2px;
}

.diff-view {
  flex: 1;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
}

.diff-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 13px;
}

.diff-hunk-header {
  padding: 4px 12px;
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-size: 11px;
  font-weight: 500;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.diff-line {
  display: flex;
  padding: 0 12px;
  min-height: 22px;
}

.diff-line-marker {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  user-select: none;
  font-weight: 600;
}

.diff-line-content {
  flex: 1;
  white-space: pre;
  padding-left: 8px;
}

.diff-line.addition {
  background: var(--success-bg);
  border-left: 3px solid var(--success);
}

.diff-line.addition .diff-line-marker { color: var(--success); }

.diff-line.removal {
  background: var(--error-bg);
  border-left: 3px solid var(--error);
}

.diff-line.removal .diff-line-marker { color: var(--error); }

.diff-line.context {
  border-left: 3px solid transparent;
  color: var(--text-muted);
}

.diff-actions {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---- SHARED COMPONENTS ---- */

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 14px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
}

.btn:hover { border-color: var(--border-strong); background: var(--panel); }
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: 1px;
}

.chip:focus-visible,
.cfg-tab-btn:focus-visible,
.tree-row:focus-visible,
.cfg-tile:focus-visible,
.tab:focus-visible,
.td-item:focus-visible,
.at-item:focus-visible {
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: 1px;
}

.btn-primary {
  background: var(--sap-blue);
  border-color: var(--sap-blue);
  color: #fff;
  font-weight: 600;
}

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

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  font-weight: 600;
}

.btn-success:hover { background: #147014; border-color: #147014; }

.btn-danger {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  font-weight: 600;
}

.btn-xs {
  font-size: 11px;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  gap: 4px;
}

.btn-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}

.btn-icon:hover { color: var(--text); background: var(--sap-blue-soft); }

.ico {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Confirm dialog */

/* iOS Tahoe glass morphism dialogs */
.confirm-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 420px;
  width: 90vw;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 8px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

.confirm-body {
  padding: 24px 24px 20px;
}

.confirm-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.confirm-body p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Scrollbar */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  :root {
    --sidebar-w: 240px;
    --diff-w: min(320px, 35vw);
  }
}

@media (max-width: 960px) {
  /* Diff panel is now a center-zone tab — no grid override needed. */
  .diff-file-dir { display: none; }
  .health-label { display: none; }
}

@media (max-width: 820px) {
  /* Compact workspace on small screens */
  :root { --chat-max-w: 100%; }
  .chat-msg { padding: 0 12px; }
  .composer { padding: 10px 12px 8px; }
  .top-nav { padding: 0 8px; gap: 6px; }
  .select-model { display: none; }
  .activity-bar { display: none; }
  /* Compact diff panel */
  .diff-title { font-size: 11px; }
  .diff-file-list { max-height: 120px; padding: 4px; }
  .diff-file-row { padding: 4px 6px; font-size: 11px; }
  .diff-file-name { font-size: 11px; }
  .diff-file-dir { display: none; }
  .diff-hunk-header { font-size: 10px; padding: 3px 8px; }
  .diff-line { padding: 0 6px; }
  .diff-line-marker { width: 14px; }
  .diff-actions { padding: 8px 10px; }
  .diff-header { padding: 10px 12px; }
}

@media (max-width: 680px) {
  :root {
    --diff-w: 200px;
    --diff-w-min: 160px;
    --workspace-min: 240px;
  }
  .chat-msg { padding: 0 8px; gap: 8px; }
  .msg-content { font-size: 13px; }
  .composer-hint { display: none; }
  .diff-header { padding: 8px; }
  .diff-view { font-size: 11px; line-height: 1.5; }
  .diff-actions { padding: 6px 8px; }
}

/* ---- Initial sync banner ---- */

.initial-sync-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 8px 40px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  max-width: 480px;
}

.sync-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 2px;
}

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

.sync-text {
  flex: 1;
  min-width: 0;
}

.sync-msg {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.sync-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ================================================================
   SEARCH DIALOG — Find in Files
   ================================================================ */

.search-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 800px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  background: var(--surface);
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 16px 48px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Non-modal — no backdrop at all, background is fully visible */
.search-dialog::backdrop { display: none; }

/* When being dragged, disable transition for smoothness */
.search-dialog-dragging {
  transform: none !important;
  transition: none !important;
}

/* Header gets grab cursor, body gets default */
.search-dialog .search-header { cursor: move; }
.search-dialog .search-body { cursor: default; }

.search-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-height: 80vh;
}

/* ---- Search header ---- */

.search-header {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: var(--surface);
  transition: border-color 0.15s;
}

.search-input-wrap:focus-within {
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 3px var(--sap-blue-ring);
}

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

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 14px;
  padding: 8px 0;
  color: var(--text);
}

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

.search-toggles {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.search-toggle {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}

.search-toggle:hover {
  background: var(--panel);
  color: var(--text-secondary);
}

.search-toggle.active {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
}

.search-close-btn {
  flex-shrink: 0;
}

/* ---- Scope & filters ---- */

.search-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
}

.search-scope-tabs {
  display: flex;
  gap: 0;
}

.search-scope-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.search-scope-tab:hover {
  color: var(--text-secondary);
}

.search-scope-tab.active {
  color: var(--sap-blue);
  border-bottom-color: var(--sap-blue);
}

.search-file-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.search-filter-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.search-filter-check input[type="checkbox"] {
  accent-color: var(--sap-blue);
}

/* ---- Search body (split pane) ---- */

.search-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
}

.search-split-handle {
  height: 4px;
  background: var(--border);
  cursor: row-resize;
  flex-shrink: 0;
  transition: background 0.1s;
}

.search-split-handle:hover,
.search-dialog.split-resizing .search-split-handle {
  background: var(--sap-blue);
}

.search-dialog.split-resizing {
  cursor: row-resize;
  user-select: none;
}

.search-preview {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  border-top: 1px solid var(--border);
}

.search-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
  min-height: 32px;
}

.search-preview-filename {
  font-weight: 600;
  color: var(--text);
}

.search-preview-path {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.search-preview-body {
  flex: 1;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
}

/* ---- Results list ---- */

.search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.search-file-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.search-file-group-header:hover { background: var(--sap-blue-soft); }
.search-file-chevron {
  display: inline-block;
  width: 10px;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.search-file-group.collapsed .search-file-group-rows { display: none; }

.search-file-group-header svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

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

.search-match-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 14px 3px 28px;
  cursor: pointer;
  transition: background 0.08s;
  font-size: 12.5px;
  font-family: var(--mono);
  line-height: 1.6;
}

.search-match-row:hover {
  background: var(--sap-blue-soft);
}

.search-match-row.active {
  background: var(--sap-blue-soft);
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: -2px;
  border-radius: 3px;
}

.search-match-line-num {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
  user-select: none;
}

.search-match-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.search-match-text mark {
  background: rgba(0, 112, 242, 0.15);
  color: var(--sap-blue);
  border-radius: 2px;
  padding: 0 1px;
}

/* ---- Shared code lines (file viewer + search preview) ---- */

.code-line {
  display: flex;
  padding: 0 14px;
  min-height: 21px;
  width: fit-content;
  min-width: 100%;
}

.code-line.highlight {
  background: var(--sap-blue-soft);
  border-left: 3px solid var(--sap-blue);
  padding-left: 11px;
}

.code-num {
  width: 44px;
  text-align: right;
  padding-right: 12px;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
  font-size: 11px;
}

.code-content {
  flex: 1;
  white-space: pre;
  overflow-x: auto;
}

/* ---- Footer ---- */

.search-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--panel);
}

.search-footer-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.search-footer-check input[type="checkbox"] {
  accent-color: var(--sap-blue);
}

.search-footer-stats {
  color: var(--text-muted);
  font-family: var(--mono);
}

/* ================================================================
   WORKSPACE TABS — IDE-style file viewer tabs in topbar
   ================================================================ */

/* -- Outer bar wrapper -- */
.workspace-tabs-bar {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
  min-width: 0;
  gap: 0;
}
.workspace-tabs-bar[hidden] { display: none; }

/* -- Scroll zone (arrows + scrollable tabs) -- */
.ws-tabs-scroll-zone {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
}

/* Fade masks on scroll edges */
.ws-tabs-scroll-zone::before,
.ws-tabs-scroll-zone::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.ws-tabs-scroll-zone::before {
  left: 24px;
  background: linear-gradient(to right, var(--surface), transparent);
}
.ws-tabs-scroll-zone::after {
  right: 24px;
  background: linear-gradient(to left, var(--surface), transparent);
}
.ws-tabs-scroll-zone.fade-left::before { opacity: 1; }
.ws-tabs-scroll-zone.fade-right::after { opacity: 1; }

/* -- Scroll arrow buttons -- */
.ws-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  z-index: 2;
  transition: color 0.12s;
}
.ws-scroll-btn:hover { color: var(--sap-blue); }
.ws-scroll-btn[hidden] { display: none; }
.ws-scroll-btn svg { width: 10px; height: 10px; }

/* -- Scrollable tab container -- */
.workspace-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.workspace-tabs::-webkit-scrollbar { display: none; }

/* -- Individual tab -- */
.ws-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 100%;
  max-width: 160px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  position: relative;
}
.ws-tab:hover { color: var(--text); }

.ws-tab.active {
  color: var(--sap-blue);
  border-bottom-color: var(--sap-blue);
  font-weight: 600;
  background: var(--surface);
}

/* -- Pinned chat tab -- */
.ws-tab.ws-tab-pinned {
  padding: 0 10px;
  border-right: 1px solid var(--border);
  margin-right: 2px;
  max-width: none;
  flex-shrink: 0;
}
.ws-tab.ws-tab-pinned .ws-tab-icon { color: var(--sap-blue); }
.ws-tab.ws-tab-pinned.active { background: none; }

/* -- Tab label (ellipsis for long names) -- */
.ws-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Close button (uses ::before for x/dot toggling) -- */
.ws-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  padding: 0;
}
.ws-tab-close::before { content: '\00d7'; }
.ws-tab:hover .ws-tab-close { opacity: 0.6; }
.ws-tab-close:hover { opacity: 1 !important; background: var(--border); }

/* Dirty tab: show dot instead of x */
.ws-tab.dirty .ws-tab-close { opacity: 1; }
.ws-tab.dirty .ws-tab-close::before { content: '\25CF'; font-size: 9px; color: var(--text-muted); }
.ws-tab.dirty:hover .ws-tab-close::before { content: '\00d7'; font-size: 14px; color: var(--text-muted); }
.ws-tab.dirty .ws-tab-close:hover { background: var(--border); }

/* -- Tab icon -- */
.ws-tab-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* -- Tab sync badge (small inline dot) -- */
.ws-tab-sync {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-left: -2px;
}
.ws-tab-sync svg { width: 10px; height: 10px; }

/* -- Tab count badge -- */
.ws-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
  flex-shrink: 0;
  margin-left: 4px;
}
.ws-tab-count[hidden] { display: none; }

/* -- Overflow dropdown button -- */
.ws-overflow-btn {
  width: 24px;
  height: 28px;
  min-width: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  transition: color 0.12s, background 0.12s;
}
.ws-overflow-btn:hover { color: var(--text); background: var(--sap-blue-soft); }
.ws-overflow-btn.active { color: var(--sap-blue); background: var(--sap-blue-soft); }
.ws-overflow-btn[hidden] { display: none; }
.ws-overflow-btn svg { width: 12px; height: 12px; }

/* -- Overflow dropdown panel -- */
.ws-overflow-panel {
  position: fixed;
  min-width: 200px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  padding: 4px 0;
}
.ws-overflow-panel[hidden] { display: none; }

.ws-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ws-overflow-item:hover { background: var(--sap-blue-soft); }
.ws-overflow-item.active {
  background: rgba(0, 112, 242, 0.06);
  color: var(--sap-blue);
  font-weight: 600;
}
.ws-overflow-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-overflow-item .ws-tab-icon { flex-shrink: 0; }

/* -- Context menu -- */
.ws-ctx-menu {
  position: fixed;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 10000;
  padding: 4px 0;
}
.ws-ctx-menu[hidden] { display: none; }

.ws-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}
.ws-ctx-item:hover { background: var(--sap-blue-soft); }
.ws-ctx-item.danger { color: var(--error); }
.ws-ctx-item.danger:hover { background: var(--error-bg); }

.ws-ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}

/* Settings menu (gear icon dropdown) */
.settings-menu {
  position: fixed;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  z-index: 10000;
  padding: 4px 0;
}
.settings-menu[hidden] { display: none; }
.settings-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}
.settings-menu-item:hover { background: var(--sap-blue-soft); }

/* -- Responsive -- */
@media (max-width: 960px) {
  .ws-tab-count { display: none; }
  .ws-tab { max-width: 120px; }
}
@media (max-width: 680px) {
  .ws-tab { max-width: 90px; font-size: 10px; }
}

/* ---- File viewer container ---- */

.file-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  min-width: 0;
}

.file-viewer[hidden] { display: none; }

/* ── Editor toolbar — left rail + minimal header ───────────── */

.fv-shell { display: flex; flex: 1; min-height: 0; }
.fv-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Rail — 34px vertical strip on the left edge of the editor pane */
.fv-rail {
  width: 34px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-soft, #eef0f3);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
}
.fv-rail-spacer { flex: 1; }
.fv-rail-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-muted, #6f7785);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.fv-rail-btn:hover { background: var(--hover-bg, #eef1f5); color: var(--text); }
.fv-rail-btn[disabled] { opacity: 0.35; cursor: default; }
.fv-rail-btn[disabled]:hover { background: transparent; color: var(--text-muted); }
.fv-rail-btn:focus-visible,
.fv-sync-icon:focus-visible,
.fv-overflow-row:focus-visible,
.shortcuts-dialog .sd-close:focus-visible,
.statusbar-shortcuts-btn:focus-visible {
  outline: 2px solid var(--sap-blue-ring);
  outline-offset: 1px;
}
/* Color modifiers — intentionally keep their semantic hue on hover
   (matches PyCharm's behavior for colored primary actions) */
.fv-rail-btn.run     { color: #2E8B2E; }
.fv-rail-btn.accent  { color: var(--sap-blue, #0070F2); }
.fv-rail-btn.warn    { color: #C55400; }
.fv-rail-btn.danger  { color: #C62828; }
.fv-rail-btn.muted   { color: #b6bdc8; }
.fv-rail-btn .conflict-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #C62828;
  border: 1.5px solid var(--panel, #fbfbfc);
}

/* Header — filename + kind chip + path + sync indicator */
.file-viewer-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-soft, #eef0f3);
  background: var(--panel);
  font-size: 12px;
  flex-shrink: 0;
}
.fv-kind-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  border: 1px solid;
  flex-shrink: 0;
  font-family: var(--mono);
}
.fv-kind-chip[data-kind="script"]      { color: #0070F2; background: rgba(0,112,242,0.10);  border-color: rgba(0,112,242,0.28); }
.fv-kind-chip[data-kind="calculation"] { color: #7A36A8; background: rgba(155,77,202,0.10); border-color: rgba(155,77,202,0.30); }
.fv-kind-chip[data-kind="template"]    { color: #C55400; background: rgba(231,101,0,0.10); border-color: rgba(231,101,0,0.32); }
.fv-kind-chip[data-kind="quote-table"] { color: #0E6B0E; background: rgba(24,137,24,0.10); border-color: rgba(24,137,24,0.30); }
.fv-kind-chip[data-kind="properties"]  { color: var(--text-muted); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }

.fv-filename { font-weight: 600; color: var(--text); font-size: 12.5px; flex-shrink: 0; }
.fv-path {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.fv-grow { flex: 1; min-width: 0; }

/* Sync status icon — cloud silhouette + colored status dot */
.fv-sync-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px;
  border: none; background: transparent;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.fv-sync-icon:hover { background: var(--hover-bg, #eef1f5); }
.fv-sync-icon svg { color: var(--text-muted); }
.fv-sync-icon[data-status="in_sync"]    svg { color: var(--text-muted); }
.fv-sync-icon[data-status="local_only"] svg { color: var(--sap-blue, #0070F2); }
.fv-sync-icon[data-status="remote_only"] svg { color: #C55400; }
.fv-sync-icon[data-status="conflict"]   svg { color: #C62828; }
.fv-sync-icon .status-dot {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--panel, #ffffff);
}
.fv-sync-icon[data-status="in_sync"]    .status-dot { background: #2E8B2E; }
.fv-sync-icon[data-status="local_only"] .status-dot { background: var(--sap-blue, #0070F2); }
.fv-sync-icon[data-status="remote_only"] .status-dot { background: #C55400; }
.fv-sync-icon[data-status="conflict"]   .status-dot { background: #C62828; }

/* Overflow menu — anchored next to the ⋯ button */
.fv-overflow-menu {
  position: absolute;
  z-index: 60;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #d8dde3);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 4px;
  font-size: 12px;
  color: var(--text);
  min-width: 200px;
}
.fv-overflow-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
}
.fv-overflow-row:hover { background: var(--hover-bg, #eef1f5); }
.fv-overflow-row .fv-overflow-ico {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.fv-overflow-sep { height: 1px; background: var(--border-soft, #eef0f3); margin: 4px 2px; }

/* Keyboard shortcuts dialog */
.shortcuts-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 22, 36, 0.32);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.shortcuts-dialog {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #d8dde3);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: 22px 26px 24px;
  width: min(640px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  position: relative;
  font-family: var(--mono);
}
.shortcuts-dialog h3 { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.shortcuts-dialog .sd-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 18px; }
.shortcuts-dialog .sd-close {
  position: absolute; top: 12px; right: 14px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted); font-size: 18px; cursor: pointer; border-radius: 4px;
}
.shortcuts-dialog .sd-close:hover { background: var(--hover-bg, #eef1f5); color: var(--text); }
.shortcuts-dialog .sd-group { margin-bottom: 16px; }
.shortcuts-dialog .sd-group h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px;
}
.shortcuts-dialog .sd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 12.5px; color: var(--text);
}
.shortcuts-dialog .sd-row + .sd-row { border-top: 1px solid var(--border-soft, #eef0f3); }
.shortcuts-dialog .sd-keys { display: inline-flex; gap: 4px; align-items: center; }
.shortcuts-dialog .sd-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--bg, #f5f6f8);
  border: 1px solid var(--border, #d8dde3);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px; color: var(--text-secondary, #4a5260);
}
.shortcuts-dialog .sd-plus { color: var(--text-muted); padding: 0 2px; font-size: 11px; }

/* Status bar shortcut button */
.statusbar-shortcuts-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; border-radius: 3px;
  font-size: 12px;
}
.statusbar-shortcuts-btn:hover { background: var(--hover-bg, #eef1f5); color: var(--text); }

.file-viewer-body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  position: relative;
}
/* When Monaco is mounted, it fills the container */
.file-viewer-body .monaco-editor { height: 100% !important; }
/* Fallback: read-only view with padding */
.file-viewer-body > .code-lines { padding: 4px 0; overflow: auto; height: 100%; }

/* ── File viewer: editor + structure side-by-side ───────────── */
.file-viewer-main {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.file-viewer-main > .file-viewer-body { flex: 1; min-width: 0; }

/* ── Structure panel ────────────────────────────────────────── */
.structure-panel {
  width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border-soft, #e0e2e6);
  background: var(--panel);
  overflow: hidden;
  position: relative;
}
.structure-panel[hidden] { display: none !important; }
.sp-resize-handle {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 5;
}
.sp-resize-handle:hover,
.sp-resize-handle:active { background: var(--sap-blue); opacity: 0.3; }
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid var(--border-soft, #e0e2e6);
  flex-shrink: 0;
}
.sp-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.sp-close { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.sp-close:hover { color: var(--text); }
.sp-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.sp-empty { padding: 20px 12px; text-align: center; color: var(--text-muted); font-size: 11px; }
.sp-tree { list-style: none; margin: 0; padding: 0; }
.sp-nested { padding-left: 16px; }
.sp-row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; cursor: pointer; font-size: 12px;
  color: var(--text); white-space: nowrap; overflow: hidden;
  border-radius: 2px; margin: 0 4px;
}
.sp-row:hover { background: rgba(0,0,0,0.04); }
.sp-row.active { background: var(--sap-blue-soft); }
.sym-ico { width: 16px; height: 16px; flex-shrink: 0; }
/* Python symbol-outline badges — color follows class so dark theme can override. */
.sym-class   { color: #0D6AA8; }
.sym-method  { color: #7B1FA2; }
.sym-private { color: #9E9E9E; }
.sym-dunder  { color: #E65100; }
.sym-func    { color: #2E7D32; }
.sym-const   { color: #F57F17; }
.sym-var     { color: #78909C; }
.sym-prop    { color: #00897B; }
[data-theme="dark"] .sym-class   { color: #5BB1F0; }
[data-theme="dark"] .sym-method  { color: #C57FF5; }
[data-theme="dark"] .sym-private { color: #C7C7CB; }
[data-theme="dark"] .sym-dunder  { color: #FFAE5C; }
[data-theme="dark"] .sym-func    { color: #7CD68A; }
[data-theme="dark"] .sym-const   { color: #FFC95C; }
[data-theme="dark"] .sym-var     { color: #B7C2CC; }
[data-theme="dark"] .sym-prop    { color: #5FCBB8; }
.sp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 12px; }
.sp-params { color: var(--text-muted); font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.sp-line { margin-left: auto; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

/* ---- TEMPLATE PREVIEW PANEL ---- */

:root {
  --preview-w: 420px;
  --preview-w-min: 250px;
  --preview-h: 300px;
  --preview-h-min: 150px;
}

.preview-panel {
  background: var(--panel);
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Preview panel — legacy grid rules removed; will be mounted inside zones in later tasks */
.preview-panel.visible {
  display: flex;
}

/* --- Header --- */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
  flex-shrink: 0;
}

.preview-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- Dock position toggle --- */
.preview-dock-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.preview-dock-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.preview-dock-btn + .preview-dock-btn {
  border-left: 1px solid var(--border);
}
.preview-dock-btn.active {
  background: var(--sap-blue);
  color: #fff;
}
.preview-dock-btn:hover:not(.active) {
  background: var(--bg-hover);
}

/* --- Iframe --- */
.preview-iframe {
  flex: 1;
  border: none;
  width: 100%;
  min-height: 0;
  background: #fff;
}

/* Legacy topbar-preview-btn rules removed */

/* ================================================================
   Conflict Resolution Dialog
   ================================================================ */
.conflict-dialog { max-width: 820px; width: 90vw; }
.conflict-dialog .confirm-body { max-width: none; }
.conflict-desc { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.conflict-list {
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.conflict-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.conflict-item:last-child { border-bottom: none; }
.conflict-item.resolved { opacity: 0.45; }
.conflict-item-name {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conflict-item-kind {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.conflict-item-actions-hint {
  font-size: 10px;
  color: var(--text-muted);
  flex-basis: 100%;
  margin-left: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conflict-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.conflict-item-status {
  font-size: 11px;
  color: var(--success);
  font-weight: 600;
  flex-shrink: 0;
}
.conflict-remember {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  margin-bottom: 12px;
}
.conflict-remember input { margin: 0; }
.conflict-btns { gap: 6px; }
.conflict-diff-inline {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
}
.conflict-diff-content {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  max-height: 240px;
  overflow: auto;
  background: var(--bg);
  border-radius: var(--radius-sm, 6px);
  padding: 8px;
  margin: 4px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.conflict-diff-content .diff-add {
  display: inline-block; width: 100%;
  background: rgba(24, 137, 24, 0.12); color: #166416;
}
.conflict-diff-content .diff-del {
  display: inline-block; width: 100%;
  background: rgba(204, 25, 25, 0.10); color: #a31515;
}
.conflict-diff-content .diff-hunk {
  display: inline-block; width: 100%;
  color: var(--sap-blue);
}
.conflict-diff-content .diff-file {
  display: inline-block; width: 100%;
  color: var(--text-muted); font-weight: 600;
}

/* Both panels default hidden; only one shows at a time */

/* ================================================================
   Console Panel (bottom zone)
   ================================================================ */
.console-panel { display: flex; flex-direction: column; height: 100%; }
.console-header { display: flex; align-items: center; padding: 6px 12px; background: rgba(247, 248, 249, 0.72); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; font-size: 12px; }
.console-title { font-weight: 600; font-size: 11px; flex: 1; }
.console-actions { display: flex; gap: 4px; }
.console-tabs { display: flex; height: 28px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); background: rgba(247, 248, 249, 0.6); flex-shrink: 0; }
.console-tab {
  padding: 0 12px; font-size: 10px; border: none; background: none;
  border-bottom: 2px solid transparent; color: var(--text-secondary);
  cursor: pointer; font-family: var(--sans);
}
.console-tab.active { color: var(--sap-blue); border-bottom-color: var(--sap-blue); font-weight: 500; }
.console-body {
  flex: 1; overflow: auto; padding: 6px 10px;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
}

/* Console line entries */
.console-line { white-space: pre-wrap; word-break: break-all; }
.console-time { color: var(--text-muted); }
.console-level { font-weight: 500; }
.console-level-error { color: var(--error); }
.console-level-log { color: var(--success); }
.console-level-trace { color: var(--warning); }
.console-level-info { color: var(--info); }

/* ================================================================
   Quote Frame Panel (bottom zone)
   ================================================================ */
.quote-frame-panel { display: flex; flex-direction: column; height: 100%; }
.quote-frame-header { display: flex; align-items: center; padding: 6px 12px; background: rgba(247, 248, 249, 0.72); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; font-size: 12px; }
.quote-frame-title { font-weight: 600; font-size: 11px; flex: 1; }
.quote-frame-actions { display: flex; gap: 4px; }
.quote-frame-body { flex: 1; overflow: hidden; position: relative; }
.quote-frame-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 12px; }
.quote-iframe { width: 100%; height: 100%; border: none; }

/* ================================================================
   Bottom zone split layout
   ================================================================ */
.zone-bottom > .zone-content {
  display: flex; flex-direction: row;
}
.zone-bottom .panel-container {
  flex: 1; min-width: 0;
}
.zone-bottom .panel-container + .panel-container {
  border-left: 1px solid var(--border);
}

/* ================================================================
   Apple/macOS Minimalism — subtle depth through shadows
   ================================================================ */

/* Panel headers — subtle bottom shadow instead of hard border */
.console-header,
.quote-frame-header,
.chat-panel-header,
.explorer-header,
.pipeline-header,
.kb-header,
.diff-header {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Composer — more depth */
.composer-inner {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Zone tab transitions */
.zone-tab {
  transition: all 0.15s ease;
}

/* Zone resize handles — barely visible until hover */
.zone-resize-handle { background: transparent; }
.zone-resize-handle:hover {
  background: rgba(0, 112, 242, 0.15);
  transition: background 0.2s ease;
}
.zone-resize-handle:active {
  background: rgba(0, 112, 242, 0.3);
}

/* Draggable panel headers — visual cue */
[draggable="true"].console-header,
[draggable="true"].quote-frame-header,
[draggable="true"].chat-panel-header,
[draggable="true"].explorer-header,
[draggable="true"].pipeline-header,
[draggable="true"].kb-header,
[draggable="true"].diff-header {
  user-select: none;
}

/* ---- Validation bar ---- */

.validation-bar {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 11px;
  font-family: var(--mono);
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.validation-bar-valid      { background: var(--success-bg); color: var(--success); }
.validation-bar-errors     { background: var(--error-bg);   color: var(--error); }
.validation-bar-stale      { background: var(--panel);      color: var(--text-muted); }
.validation-bar-validating { background: var(--panel);      color: var(--text-muted); }

.validation-bar-icon { font-weight: 700; min-width: 14px; text-align: center; }
.validation-bar-message { flex: 1; }
.validation-bar-close {
  border: none; background: none; cursor: pointer;
  color: inherit; opacity: 0.5; font-size: 14px; padding: 0 4px;
  font-family: var(--sans);
}
.validation-bar-close:hover { opacity: 1; }

.validation-bar-validating .validation-bar-icon {
  display: inline-block;
  animation: validation-spin 1s linear infinite;
}
@keyframes validation-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   DB Inspector — sidebar panel
   ========================================================================== */

.db-inspector-panel {
  display: flex; flex-direction: column; height: 100%;
  font-family: var(--sans); font-size: 12px;
}
.db-inspector-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px; flex-shrink: 0;
}
.db-inspector-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 0; }
.db-search-input {
  margin: 4px 8px 8px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px; font-family: var(--sans);
  background: var(--bg-input); outline: none;
}
.db-search-input:focus { border-color: var(--sap-blue); }

.db-recent-section { padding: 0 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.db-recent-header { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 4px 8px 2px; }

.db-tables-list { flex: 1; overflow-y: auto; padding: 0 4px; }
.db-tables-placeholder { padding: 16px 12px; color: var(--text-muted); text-align: center; font-size: 12px; }
.db-error { color: var(--danger); }

.db-table-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-table-row:hover { background: rgba(0,0,0,0.04); }
.db-table-icon { font-size: 13px; opacity: 0.5; flex-shrink: 0; }
.db-table-name { font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.db-table-recent .db-table-name { font-weight: 500; }

/* ==========================================================================
   Data Wrangler — table tab content
   ========================================================================== */

.data-wrangler {
  display: flex; flex-direction: column; height: 100%;
  font-family: var(--sans); font-size: 13px;
}

.dw-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dw-table-name { font-weight: 600; font-family: var(--mono); font-size: 13px; }
.dw-row-count { font-size: 11px; color: var(--text-muted); }
.dw-toolbar { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dw-page-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.dw-page-select {
  padding: 2px 4px; font-size: 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-input); font-family: var(--sans);
}

.dw-grid { flex: 1; overflow: hidden; }
.dw-loading { padding: 24px; text-align: center; color: var(--text-muted); }
.dw-error { color: var(--danger); }

/* Column header with inline stats */
.dw-col-header { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.dw-col-name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-col-type {
  font-size: 9px; font-weight: 500; text-transform: uppercase;
  color: var(--sap-blue); background: var(--sap-blue-soft);
  padding: 1px 4px; border-radius: 3px; width: fit-content;
}
/* Distribution bar (null/valid ratio) */
.dw-col-stats { margin-top: 3px; }
.dw-dist-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--border); width: 100%;
}
.dw-dist-fill { background: var(--sap-blue); height: 100%; }
.dw-dist-null { background: rgba(0,0,0,0.12); height: 100%; }
.dw-stat-line {
  font-size: 9px; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  font-family: var(--mono);
}

/* Pagination */
.dw-pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.dw-page-btn {
  border: 1px solid var(--border); background: var(--bg-input);
  border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer;
  font-size: 11px; font-family: var(--sans);
}
.dw-page-btn:disabled { opacity: 0.4; cursor: default; }
.dw-page-btn:not(:disabled):hover { background: rgba(0,0,0,0.04); }
.dw-page-info { font-size: 11px; color: var(--text-muted); }

/* Tabulator overrides for glass morphism consistency */
.dw-grid .tabulator {
  border: none; background: transparent; font-family: var(--sans); font-size: 12px;
}
.dw-grid .tabulator-header { background: rgba(247,248,249,0.72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.dw-grid .tabulator-col { border-right: 1px solid var(--border); }
.dw-grid .tabulator-row { border-bottom: 1px solid rgba(0,0,0,0.04); }
.dw-grid .tabulator-row:hover { background: rgba(0, 112, 242, 0.04); }
.dw-grid .tabulator-cell { font-family: var(--mono); font-size: 12px; padding: 4px 8px; }
.dw-grid .tabulator-header-filter input {
  font-size: 11px; padding: 2px 6px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--sans);
}

/* ---- SYNC STATUS PANEL ---- */
.sync-status-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 12px;
}
.sync-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.sync-status-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 0;
}
/* sync-status-summary removed — counts shown as badges in group headers */
.sps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
}
.sps-badge.sps-ok       { background: var(--success-bg); color: var(--success); }
.sps-badge.sps-local    { background: var(--info-bg);    color: var(--info); }
.sps-badge.sps-remote   { background: var(--warning-bg); color: var(--warning); }
.sps-badge.sps-conflict { background: var(--error-bg);   color: var(--error); }
.sps-group-header .sps-badge { margin-left: auto; }
.sps-empty { color: var(--text-muted); font-style: italic; }

.sync-status-groups {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.sps-group { margin-bottom: 2px; }
/* sps-group-header and sps-caret inherit from .panel-group-header and .panel-caret */

.sps-file-list { padding-left: 6px; }
.sps-file-row {
  display: flex;
  align-items: center;
  padding: 3px 10px 3px 16px;
  gap: 6px;
  border-radius: 3px;
  transition: background 0.15s;
}
.sps-file-row:hover { background: rgba(0,0,0,0.04); }
.sps-file-row.sps-resolved {
  background: var(--success-bg);
  transition: background 0.5s;
}
.sps-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
}
.sps-file-kind {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sps-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.sps-file-row:hover .sps-actions { opacity: 1; }
.sps-action-btn {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 3px;
}
.sps-action-btn:hover { background: rgba(0,0,0,0.08); }
.sps-action-btn .ico {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.sync-status-footer {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.sync-status-footer:empty { display: none; }

/* ---- STATUS BAR SYNC SEGMENT ---- */
.sb-sync {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.sb-sync:hover { background: rgba(0,0,0,0.06); }
.sb-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sb-sync.sb-sync-ok       .sb-sync-dot { background: var(--success); }
.sb-sync.sb-sync-local    .sb-sync-dot { background: var(--info); }
.sb-sync.sb-sync-remote   .sb-sync-dot { background: var(--warning); }
.sb-sync.sb-sync-conflict .sb-sync-dot { background: var(--error); }
.sb-sync.sb-sync-syncing  .sb-sync-dot { background: var(--warning); animation: sb-pulse 1.2s ease-in-out infinite; }
.sb-sync.sb-sync-offline  .sb-sync-dot { background: var(--border-strong); }
.sb-sync.sb-sync-error    .sb-sync-dot { background: var(--error); }

@keyframes sb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.sb-sync-flash {
  animation: sb-flash 0.5s ease-out;
}
@keyframes sb-flash {
  0% { background: rgba(0,112,242,0.15); }
  100% { background: transparent; }
}

/* ======================================================================
   Tenant switch loading overlay
   ====================================================================== */

.tenant-loader-overlay {
  position: fixed;
  top: var(--top-nav-h);
  left: 44px;                /* clear the activity bar */
  right: 0;
  bottom: 0;
  z-index: 900;              /* below modals (>=1000), above panels */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.tenant-loader-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.tenant-loader-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 280px;
  max-width: 360px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

.tenant-loader-card.error {
  border-color: rgba(220, 38, 38, 0.25);
}

.tenant-loader-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--sap-blue, #0a6ed1);
}

.tenant-loader-card.error .tenant-loader-icon {
  color: rgb(220, 38, 38);
}

.tenant-loader-spinner {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(10, 110, 209, 0.2);
  border-top-color: var(--sap-blue, #0a6ed1);
  border-radius: 50%;
  animation: tenant-loader-spin 0.8s linear infinite;
}

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

.tenant-loader-body {
  flex: 1 1 auto;
  min-width: 0;
}

.tenant-loader-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #1d1d1f);
  line-height: 1.3;
}

.tenant-loader-title strong {
  font-weight: 600;
}

.tenant-loader-phase {
  font-size: 12px;
  color: var(--text-muted, #6e6e73);
  margin-top: 4px;
  line-height: 1.4;
  word-break: break-word;
}

.tenant-loader-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.tenant-loader-actions[hidden] { display: none; }

.tenant-loader-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text, #1d1d1f);
  cursor: pointer;
  transition: background 100ms ease;
}

.tenant-loader-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tenant-loader-btn.primary {
  background: var(--sap-blue, #0a6ed1);
  color: #fff;
  border-color: var(--sap-blue, #0a6ed1);
}

.tenant-loader-btn.primary:hover {
  background: #0857a8;
}

/* ---------------------------------------------------------------------------
   Toast notifications — glass card stack in the top-right corner.
   --------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(var(--top-nav-h) + 12px);
  right: 16px;
  z-index: 1100;            /* above modals so acknowledgements are visible */
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 6px 18px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: var(--text, #1d1d1f);
  transform: translateX(16px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sap-blue, #0070F2);
}

.toast-message {
  flex: 1 1 auto;
  line-height: 1.3;
  word-break: break-word;
}

.toast-progress .toast-icon { color: var(--sap-blue, #0070F2); }
.toast-info     .toast-icon { color: var(--info, #0070F2); }
.toast-success  .toast-icon { color: var(--success, #188918); }
.toast-error    .toast-icon { color: var(--error, #CC1919); }

.toast-error {
  border-color: rgba(204, 25, 25, 0.25);
}
.toast-success {
  border-color: rgba(24, 137, 24, 0.25);
}

.toast-spinner {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 112, 242, 0.2);
  border-top-color: var(--sap-blue, #0070F2);
  border-radius: 50%;
  animation: toast-spin 0.8s linear infinite;
}

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

/* ---------------------------------------------------------------------------
   File-tree right-click context menu + file viewer sync action buttons.
   --------------------------------------------------------------------------- */
.tree-ctx-menu {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tree-ctx-menu[hidden] { display: none; }

.tree-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--text, #1d1d1f);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 80ms ease;
}

.tree-ctx-item:hover {
  background: var(--sap-blue-soft, rgba(0, 112, 242, 0.08));
}

.tree-ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary, #6A7A8C);
}

.tree-ctx-icon .ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
}

.tree-ctx-label {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Dark theme — SAP Fiori Evening Horizon-inspired palette.
   Activated by data-theme="dark" on <html>.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --sap-blue: #4F9CFF;
  --sap-blue-hover: #3E7CE0;
  --sap-blue-soft: rgba(79, 156, 255, 0.14);
  --sap-blue-ring: rgba(79, 156, 255, 0.35);

  --bg: #12171C;
  --panel: #1C2530;
  --surface: #232F3E;
  --surface-raised: #2B384A;

  --text: #EAECEE;
  --text-secondary: #A9B4C0;
  --text-muted: #6A7A8C;

  --border: #2E3B4B;
  --border-strong: #3F4D5F;
  --border-soft: #253040;
  --hover-bg: rgba(255, 255, 255, 0.05);

  --success: #5CB85C;
  --success-bg: rgba(92, 184, 92, 0.14);
  --error: #FF5858;
  --error-bg: rgba(255, 88, 88, 0.14);
  --warning: #FFB84D;
  --warning-bg: rgba(255, 184, 77, 0.14);
  --info: #5B9BFF;
  --info-bg: rgba(91, 155, 255, 0.14);

  /* Dev-console chrome — code surface stays dark in both themes; agent card shifts. */
  --code-bg:       #16191E;
  --code-border:   #232830;
  --surface-agent: #1A222D;
  --text-muted:    #7A8694;  /* WCAG AA fix for mono at 13px */
}

/* Dark theme — fallback syntax highlighter (highlight.js) tokens.
   Monaco handles its own theme via monaco-editor.js. */
[data-theme="dark"] .py-kw       { color: #4F9CFF; }
[data-theme="dark"] .py-str      { color: #8BDD8B; }
[data-theme="dark"] .py-num      { color: #FFAD66; }
[data-theme="dark"] .py-builtin  { color: #D69AFF; }
[data-theme="dark"] .py-self     { color: #FF7A7A; }
[data-theme="dark"] .py-fn       { color: #5B9BFF; }
[data-theme="dark"] .py-comment  { color: #8D9AAA; }

/* Dark theme — tweak glass overlays (toasts, loader, ctx menu) that
   otherwise show a light-mode backdrop behind blur. */
[data-theme="dark"] .toast {
  background: rgba(35, 47, 62, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .toast.toast-error   { border-color: rgba(255, 88, 88, 0.45); }
[data-theme="dark"] .toast.toast-success { border-color: rgba(92, 184, 92, 0.45); }
[data-theme="dark"] .tenant-loader-overlay {
  background: rgba(18, 23, 28, 0.55);
}
[data-theme="dark"] .tenant-loader-card {
  background: rgba(35, 47, 62, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .tenant-loader-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
[data-theme="dark"] .tenant-loader-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tree-ctx-menu {
  background: rgba(35, 47, 62, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .tree-ctx-item:hover {
  background: var(--sap-blue-soft);
}

/* ---- Dark theme: translucent chrome surfaces ---- */
/* Top nav, status bar, activity bar, panel headers, zone tab bars — all
   originally tinted with rgba(255,255,255,X) or rgba(247,248,249,X) for
   light-glass effect. Recolor them with dark-tinted translucency so the
   blur reads correctly against a dark background. */
[data-theme="dark"] .top-nav             { background: rgba(28, 37, 48, 0.78); border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .activity-bar        { background: rgba(18, 23, 28, 0.72); border-right-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .status-bar          { background: rgba(18, 23, 28, 0.72); border-top-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .chat-panel-header   { background: rgba(28, 37, 48, 0.72); border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .console-header      { background: rgba(28, 37, 48, 0.72); border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .quote-frame-header  { background: rgba(28, 37, 48, 0.72); border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .console-tabs        { background: rgba(28, 37, 48, 0.6);  border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .zone-tabs           { background: rgba(28, 37, 48, 0.6);  border-bottom-color: rgba(255, 255, 255, 0.06); }

/* Dropdowns + settings menu (top-nav gear) */
[data-theme="dark"] .settings-menu       { background: rgba(35, 47, 62, 0.88); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .history-dropdown    { background: rgba(35, 47, 62, 0.88); border-color: rgba(255, 255, 255, 0.08); }

/* Confirm / modal dialogs using the same glass card */
[data-theme="dark"] .confirm-dialog      { background: rgba(35, 47, 62, 0.78); }
[data-theme="dark"] dialog               { color: var(--text); }

/* Chat bubble background fallback — .py-* syntax blocks fall back to --panel */
[data-theme="dark"] pre, [data-theme="dark"] code { background: var(--panel); }

/* Legacy plain hex fills used by a few small widgets (knowledge badges,
   warning banners) — make them readable on dark. */
[data-theme="dark"] .kb-badge-class       { background: rgba(255, 152, 0, 0.18);  color: #FFB84D; }
[data-theme="dark"] .kb-badge-enum        { background: rgba(155, 77, 202, 0.22); color: #D69AFF; }
[data-theme="dark"] .kb-badge-pattern     { background: rgba(255, 193, 7, 0.18);  color: #FFD360; }
[data-theme="dark"] .sync-badge.sync-error { background: rgba(255, 193, 7, 0.18); color: #FFD360; }

/* Raw #FAFBFC surfaces used by a few panels (traces footer, etc.) */
[data-theme="dark"] [style*="#FAFBFC"],
[data-theme="dark"] [style*="#fafbfc"] {
  background: var(--surface) !important;
}

/* Form controls (color pickers, selects, inputs) — inherit surface */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .nav-dropdown {
  background-color: var(--surface);
  color: var(--text);
  background-image: var(--chevron-mute);
}

/* The activity-bar hover uses rgba(0,0,0,0.04) which disappears on dark — brighten it */
[data-theme="dark"] .ab-btn:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------------------------------------------------------------------------
   Settings panel layout.
   --------------------------------------------------------------------------- */
.settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  color: var(--text);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.settings-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.settings-close-btn:hover {
  color: var(--text);
  background: var(--sap-blue-soft);
}

/* Settings dialog (modal popup wrapper) */
.settings-dialog {
  width: min(720px, 92vw);
  max-width: 92vw;
  height: min(560px, 80vh);
  padding: 0;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
}
.settings-dialog-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.settings-dialog .settings-panel {
  height: 100%;
  border-radius: 12px;
}
.settings-body {
  display: grid;
  grid-template-columns: 140px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  border-right: 0.5px solid var(--border);
  overflow-y: auto;
}
.settings-nav-item {
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 80ms ease;
}
.settings-nav-item:hover { background: var(--sap-blue-soft); }
.settings-nav-item.active {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  font-weight: 600;
}
.settings-content {
  padding: 14px 18px;
  overflow-y: auto;
  font-size: 13px;
}
.settings-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-hint {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 6px 0 12px;
}
.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 12px;
}
.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--text);
}
.settings-radio input[type="radio"] {
  accent-color: var(--sap-blue);
}
.settings-editor-colors {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.settings-editor-colors th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 4px;
  border-bottom: 0.5px solid var(--border);
}
.settings-editor-colors td {
  padding: 6px 4px;
  border-bottom: 0.5px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
}
.settings-editor-colors td.ec-label { width: 38%; }
.settings-editor-colors td.ec-sample { width: 44%; }
.settings-editor-colors td.ec-sample code {
  background: var(--sap-blue-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.settings-editor-colors td.ec-color {
  width: 18%;
  text-align: right;
}
.ec-picker {
  width: 36px;
  height: 22px;
  padding: 0;
  border: 0.5px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* -- Zone-tab "+" reopen button (appears only when a compatible panel is hidden) -- */
.zone-tab-menu-btn {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
}
.zone-tab-menu-btn:hover {
  color: var(--text);
  background: var(--sap-blue-soft);
}

[data-theme="dark"] .zone-tab-menu-btn { color: var(--text-secondary); }
[data-theme="dark"] .zone-tab-menu-btn:hover { background: rgba(0, 112, 242, 0.22); color: var(--text); }

/* Context menu variant used by zone tabs — inherits .ws-ctx-menu look, slightly wider to fit "Dock to X" items */
.ws-ctx-menu.zone-tab-ctx-menu {
  min-width: 160px;
}
.ws-ctx-item[disabled] {
  opacity: 0.45;
  cursor: default;
}
.ws-ctx-item[disabled]:hover {
  background: none;
}


/* View menu (header dropdown) */
.view-menu { min-width: 240px; padding: 4px 0; }
.view-menu-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 6px 12px 4px;
  text-transform: uppercase;
}
.view-menu-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.view-menu-item:hover:not(:disabled) { background: var(--sap-blue-soft); }
.view-menu-item:disabled { opacity: 0.5; cursor: default; }
.view-menu-item .vm-check { width: 18px; text-align: center; color: var(--sap-blue); }
.view-menu-item .vm-label { white-space: nowrap; }

/* ---- Explorer artifact-aware row chrome ---- */

/* Tiny type indicator dot on the file icon (E=event, M=module, R=REST).
   Replaces the old standalone .script-glyph chip — same info, half the noise. */
.tree-icon[data-script-type] {
  position: relative;
}
.tree-icon[data-script-type]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-base, #fff);
  box-sizing: border-box;
  pointer-events: none;
}
.tree-icon[data-script-type="E"]::after { background: #2563eb; }
.tree-icon[data-script-type="M"]::after { background: #6b7280; }
.tree-icon[data-script-type="R"]::after { background: #dc2626; }
[data-theme="dark"] .tree-icon[data-script-type]::after { border-color: var(--bg-base, #1e1e1e); }
[data-theme="dark"] .tree-icon[data-script-type="E"]::after { background: #60a5fa; }
[data-theme="dark"] .tree-icon[data-script-type="M"]::after { background: #9ca3af; }
[data-theme="dark"] .tree-icon[data-script-type="R"]::after { background: #f87171; }

.template-slot-chip {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-sidebar, rgba(0,0,0,0.04));
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: default;
}
.template-override {
  font-size: 11px;
  margin-left: 6px;
  color: var(--text-muted);
  flex: 0 0 auto;
  cursor: default;
}
.template-override-modifies { color: #2563eb; }
.template-override-pure     { color: #16a34a; }
.template-override-sys {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  background: var(--bg-sidebar, rgba(0,0,0,0.04));
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
}
[data-theme="dark"] .template-override-modifies { color: #60a5fa; }
[data-theme="dark"] .template-override-pure     { color: #4ade80; }

.section-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.section-rollup {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
  opacity: 0.85;
}

/* Artifact details dialog rows */
.art-row { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; }
.art-row .art-label { width: 160px; color: var(--text-muted); flex: 0 0 auto; }
.art-row .art-value { color: var(--text); flex: 1 1 auto; word-break: break-word; }

.pinned-divider {
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,0.12));
  margin: 4px 12px;
}

.artifact-hover-popover {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--bg-elevated, #fff);
  color: var(--text);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.16));
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.artifact-hover-popover[hidden] { display: none; }
.artifact-hover-popover .hover-title { font-weight: 600; margin-bottom: 4px; }
.artifact-hover-popover .hover-line { margin-top: 2px; }
.artifact-hover-popover .hover-muted { color: var(--text-muted); margin-top: 4px; }
[data-theme="dark"] .artifact-hover-popover { background: var(--bg-elevated, #1f2937); border-color: rgba(255,255,255,0.12); }

/* ============================================================
   Agent bubble — live in-flight chat UI (status, tool cards,
   streaming text, markdown summary, action footer).
   Modeled on Claude desktop / Codex desktop.
   ============================================================ */



.tool-card-permission {
  margin: 8px 0;
  border: 1px solid #f5d0a3;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
}
[data-theme="dark"] .tool-card-permission {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.35);
}
.permission-body { background: transparent !important; }
.permission-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}

.tool-card-question {
  margin: 8px 0;
  border: 1px solid #c7d7ff;
  border-left: 3px solid #4b8efb;
  border-radius: 6px;
  background: #f5f9ff;
}
[data-theme="dark"] .tool-card-question {
  background: rgba(75,142,251,0.10);
  border-color: rgba(75,142,251,0.35);
}
.question-body { background: transparent !important; padding: 10px 12px 12px 12px; }
.question-block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.question-block:last-of-type {
  border-bottom: 0;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.question-header {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  margin-bottom: 4px;
}
.question-text {
  font-size: 13.5px;
  color: var(--text, #1f2937);
  margin-bottom: 8px;
  line-height: 1.4;
}
.question-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.question-option:hover { background: rgba(0,0,0,0.04); }
.question-option input { flex: 0 0 auto; }
.question-option-label { font-weight: 500; }
.question-option-desc {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  margin-left: 4px;
}
.question-option-other { font-style: italic; }
.question-other-input {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
.question-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.question-actions button:disabled,
.question-block input:disabled,
.question-other-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.action-btn-danger {
  background: transparent;
  color: var(--error, #b42a2a);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.action-btn-danger:hover { background: var(--error-bg, #fde2e2); }
[data-theme="dark"] .action-btn-danger { color: #f5a3a3; border-color: rgba(220, 38, 38, 0.45); }

/* Inline streaming text between tool calls */
.agent-inline-text {
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #1f2937);
  white-space: pre-wrap;
}

/* Final markdown summary */
.agent-summary.md {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #1f2937);
}
.agent-summary.md > :first-child { margin-top: 0; }
.agent-summary.md > :last-child { margin-bottom: 0; }
.md-h { margin: 14px 0 4px; line-height: 1.3; font-weight: 600; }
.md-h1 { font-size: 17px; }
.md-h2 { font-size: 15.5px; }
.md-h3 { font-size: 14px; color: var(--text-muted, #6b7280); }
.md-p  { margin: 6px 0; }
.md-ul, .md-ol { margin: 4px 0 4px 18px; padding: 0; }
.md-ul li, .md-ol li { margin: 2px 0; }
.md-code-inline {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 5px;
  background: var(--panel, rgba(0,0,0,0.05));
  border-radius: 3px;
}
.md-code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel, #f4f4f7);
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 8px 0;
}
.md-table-wrap {
  overflow-x: auto;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
}
.md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.md-table th, .md-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  vertical-align: top;
}
.md-table th {
  background: var(--panel, #f4f4f7);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}
.md-table tr:last-child td { border-bottom: 0; }
[data-theme="dark"] .md-table-wrap { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .md-table th { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .md-table th, [data-theme="dark"] .md-table td { border-bottom-color: rgba(255,255,255,0.06); }
/* Action footer */
.agent-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.05));
}
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 120ms, background 120ms;
}
.action-btn-primary {
  background: var(--sap-blue, #4b8efb);
  color: white;
  border-color: var(--sap-blue, #4b8efb);
}
.action-btn-primary:hover { filter: brightness(1.05); }
.action-btn-ghost {
  background: transparent;
  color: var(--text, #1f2937);
  border-color: var(--border, rgba(0,0,0,0.12));
}
.action-btn-ghost:hover { background: var(--panel, #f4f4f7); }
.action-icon { font-size: 12px; }

/* Error state */
.agent-error-box {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.agent-error-banner {
  padding: 8px 12px;
  background: var(--error-bg, #fde2e2);
  color: var(--error, #8a1a1a);
  border-radius: 6px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  font-size: 13px;
  white-space: pre-wrap;
}

/* Dark theme overrides */
[data-theme="dark"] .md-code, [data-theme="dark"] .md-code-inline { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .action-btn-ghost { color: #e5e7eb; border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .action-btn-ghost:hover { background: rgba(255,255,255,0.05); }

/* ========================================================================
 * Chat — Codex redesign (2026-05-12)
 * Replaces avatars/role labels with alignment + background.
 * ====================================================================== */

/* User message — right-aligned soft gray pill bubble */
.chat-msg-user {
  display: flex; justify-content: flex-end;
  margin: 14px 0; padding: 0 12px;
}
.chat-msg-user .msg-bubble {
  background: #f3f4f6;
  color: #1f2937;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 75%;
  line-height: 1.45;
  font-size: 13.5px;
}
[data-theme="dark"] .chat-msg-user .msg-bubble {
  background: rgba(255,255,255,0.07);
  color: #e5e7eb;
}

/* Assistant message — dev-console transcript signature:
   - faint cool-tinted card
   - 2px SAP-blue left rail
   - leading ❯ prompt glyph (CSS ::before, not in markup so it stays out of conversation history) */
.chat-msg-asst {
  position: relative;
  margin: 14px 12px;
  padding: 12px 16px 12px 30px;
  background: var(--surface-agent);
  border: 1px solid var(--border);
  border-left: 2px solid var(--rail-agent);
  border-radius: var(--radius-sm);
}
.chat-msg-asst::before {
  content: "\276F";  /* ❯ */
  position: absolute;
  left: 12px; top: 12px;
  color: var(--prompt-glyph);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
}
.chat-msg-asst .msg-prose {
  color: var(--text);
  line-height: 1.6;
  font-size: 13.5px;
  max-width: 92%;
  opacity: 0.95;
}
[data-theme="dark"] .chat-msg-asst .msg-prose {
  color: var(--text);
}

/* Inline shimmer thinking line (replaces the agent-badge header) */
.agent-thinking {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 10px 0;
  color: #6b7280; font-size: 13px;
}
.agent-thinking-label {
  display: inline-block; color: transparent;
  background: linear-gradient(90deg, #d1d5db 0%, #6b7280 50%, #d1d5db 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: codex-shimmer 1.4s linear infinite;
  font-weight: 500;
}
[data-theme="dark"] .agent-thinking-label {
  background: linear-gradient(90deg, #4b5563 0%, #d1d5db 50%, #4b5563 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes codex-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.agent-thinking-cancel {
  font: inherit; font-size: 12px;
  background: transparent; border: 0; padding: 0;
  color: #6b7280; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(107,114,128,0.4);
}
.agent-thinking-cancel:hover { color: #dc2626; text-decoration-color: #dc2626; }

/* Activity row — compact "verb target ✓" */
.agent-stream { margin: 4px 0; }
.activity-row {
  display: block;
  margin: 0;
  font-size: 13px;
}
.activity-row-head {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 3px 0;
  font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.activity-row-head:hover { background: rgba(0,0,0,0.025); }
[data-theme="dark"] .activity-row-head:hover { background: rgba(255,255,255,0.04); }
.activity-verb {
  color: #6b7280; font-weight: 500; min-width: 56px;
  flex: 0 0 auto;
}
.activity-target {
  font-family: var(--mono);
  font-size: 12.5px; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
[data-theme="dark"] .activity-target { color: #e5e7eb; }
.activity-check {
  font-size: 11.5px; flex: 0 0 auto;
  font-family: var(--mono);
}
.activity-check-ok  { color: #16a34a; }
.activity-check-err { color: #dc2626; }

/* In-flight row shimmer + trailing ellipsis */
.activity-row-running .activity-target {
  background: linear-gradient(90deg, transparent 0%, rgba(75,142,251,0.10) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: codex-shimmer 1.4s linear infinite;
  padding: 0 4px; margin: 0 -4px; border-radius: 3px;
}
.activity-row-running .activity-row-head::after {
  content: "…"; color: #9ca3af;
  font-family: var(--mono);
  flex: 0 0 auto;
}

/* Activity row expand details */
.activity-row-detail {
  display: none;
  padding: 6px 8px 10px 66px;
  font-size: 12px;
}
.activity-row.open .activity-row-detail { display: block; }
.activity-detail-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #9ca3af; margin: 4px 0 2px 0;
}
.activity-detail-pre {
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-wrap; word-break: break-all;
  background: rgba(0,0,0,0.025); padding: 6px 8px; border-radius: 4px;
  color: #374151; margin: 0 0 6px 0;
}
[data-theme="dark"] .activity-detail-pre {
  background: rgba(255,255,255,0.04); color: #d1d5db;
}

/* Script-sanitiser activity card — summary chip + diff toggle + before/after */
.script-sanitized-row .sanitize-head { cursor: default; }
.sanitize-summary {
  color: #6b7280; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
}
[data-theme="dark"] .sanitize-summary { color: #9ca3af; }
.sanitize-diff-toggle {
  background: transparent; border: 0; padding: 0 2px;
  color: #4b8efb; font: inherit; font-size: 11.5px;
  cursor: pointer; flex: 0 0 auto;
}
.sanitize-diff-toggle:hover { text-decoration: underline; }
.sanitize-diff {
  display: flex; flex-direction: column; gap: 6px;
}
.sanitize-diff-pane { min-width: 0; }
.activity-detail-pre.sanitize-before {
  border-left: 3px solid #dc2626;
}
.activity-detail-pre.sanitize-after {
  border-left: 3px solid #16a34a;
}

/* Worked-for divider */
.agent-worked {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  color: #9ca3af; font-size: 12px;
  text-align: center;
}
.agent-worked::before, .agent-worked::after {
  content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
[data-theme="dark"] .agent-worked { color: #6b7280; }
[data-theme="dark"] .agent-worked::before, [data-theme="dark"] .agent-worked::after {
  background: rgba(255,255,255,0.08);
}

/* R1 dedup — per-run tool transcript migrated into the bubble on finalize.
   The live tool stream renders once (in the dock); this is the persisted record. */
.agent-transcript { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.agent-transcript-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; line-height: 1.5; padding: 2px 8px; border-radius: 6px;
}
.agent-transcript-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .agent-transcript-row:hover { background: rgba(255,255,255,0.04); }
.agent-transcript-row .att-verb { color: #6b7280; font-weight: 600; flex: none; }
.agent-transcript-row .att-target {
  color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
[data-theme="dark"] .agent-transcript-row .att-target { color: #d1d5db; }
.agent-transcript-row .att-ms { color: #9ca3af; flex: none; font-variant-numeric: tabular-nums; }
.agent-transcript-row.err .att-verb { color: #dc2626; }

/* Inline file links in prose (replaces .md-pill.md-file) */
.md-flink {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(37,99,235,0.4);
  cursor: pointer;
}
.md-flink:hover { text-decoration-color: #2563eb; }
[data-theme="dark"] .md-flink { color: #93c5fd; text-decoration-color: rgba(147,197,253,0.4); }
[data-theme="dark"] .md-flink:hover { text-decoration-color: #93c5fd; }

/* ----- Changed-files block ----- */
.changed-files {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}
[data-theme="dark"] .changed-files {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.changed-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12.5px;
}
[data-theme="dark"] .changed-header {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.changed-title { font-weight: 600; color: #1f2937; }
[data-theme="dark"] .changed-title { color: #e5e7eb; }
.changed-stats {
  color: #6b7280;
  font-family: var(--mono);
  font-size: 12px;
}
.changed-bulk { margin-left: auto; display: flex; gap: 6px; }

/* Per-file rows (<details>/<summary>) */
.changed-file { border-bottom: 1px solid #f0f1f3; }
[data-theme="dark"] .changed-file { border-color: rgba(255,255,255,0.06); }
.changed-file:last-child { border-bottom: 0; }
.changed-file[open] { background: #fff; }
[data-theme="dark"] .changed-file[open] { background: rgba(255,255,255,0.02); }

.changed-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  list-style: none;
  cursor: pointer;
}
.changed-summary::-webkit-details-marker { display: none; }
.changed-summary::marker { content: ""; }
.changed-file-no-diff .changed-summary { cursor: default; }
.changed-summary:hover { background: rgba(75,142,251,0.04); }
[data-theme="dark"] .changed-summary:hover { background: rgba(75,142,251,0.06); }

.changed-path {
  color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
  cursor: pointer;
}
[data-theme="dark"] .changed-path { color: #e5e7eb; }
.changed-path:hover { text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(31,41,55,0.4); }

.changed-kind {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  background: rgba(0,0,0,0.04);
  color: #6b7280;
  flex: 0 0 auto;
}
.changed-kind-new { color: #16a34a; background: rgba(22,163,74,0.10); }

.changed-row-stats {
  font-family: var(--mono);
  font-size: 12px;
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
}
.stat-add { color: #16a34a; }
.stat-rem { color: #dc2626; }

.changed-actions { display: flex; gap: 4px; flex: 0 0 auto; }

/* Scoped to .changed-files so the new dark/ghost button design doesn't
   clobber the pre-existing global .btn-primary (SAP blue) used by modals,
   configurator, chat code cards, etc. */
.changed-files .btn-primary,
.changed-files .btn-ghost {
  font: inherit; font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
}
.changed-files .btn-primary {
  background: #1f2937; border-color: #1f2937; color: #fff; font-weight: 500;
}
.changed-files .btn-primary:hover {
  background: #111827; border-color: #111827;
}
.changed-files .btn-ghost { background: transparent; }
.changed-files .btn-ghost:hover {
  color: #dc2626; border-color: rgba(220,38,38,0.35);
}
.changed-files .btn-icon { padding: 3px 7px; }
.changed-files .btn-primary:disabled,
.changed-files .btn-ghost:disabled {
  opacity: 0.55; cursor: default;
}
.changed-files .btn-pushed {
  background: #16a34a !important;
  border-color: #16a34a !important;
}
[data-theme="dark"] .changed-files .btn-primary {
  background: #e5e7eb; border-color: #e5e7eb; color: #111827;
}
[data-theme="dark"] .changed-files .btn-primary:hover {
  background: #fff; border-color: #fff;
}
[data-theme="dark"] .changed-files .btn-ghost { color: #e5e7eb; }

.changed-file-discarded .changed-path {
  text-decoration: line-through;
  text-decoration-color: rgba(31,41,55,0.4);
  color: #9ca3af;
}

/* Expanded diff body */
.changed-diff {
  padding: 8px 12px 10px 12px;
  border-top: 1px solid #f0f1f3;
  font-family: var(--mono);
  font-size: 12px;
  background: #fcfcfd;
}
[data-theme="dark"] .changed-diff {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.diff-line { padding: 1px 4px; white-space: pre-wrap; word-break: break-all; }
.diff-add  { background: rgba(22,163,74,0.10); color: #14532d; }
.diff-rem  { background: rgba(220,38,38,0.10); color: #7f1d1d; }
.diff-ctx  { color: #6b7280; }
[data-theme="dark"] .diff-add { color: #86efac; background: rgba(22,163,74,0.18); }
[data-theme="dark"] .diff-rem { color: #fca5a5; background: rgba(220,38,38,0.18); }
.diff-more {
  display: block; width: 100%;
  margin-top: 6px;
  background: transparent; border: 0;
  color: #2563eb; font: inherit; font-size: 11.5px;
  text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(37,99,235,0.4);
}
.diff-more:hover { text-decoration-color: #2563eb; }
.changed-diff-empty { color: #9ca3af; font-style: italic; font-size: 12px; }

/* ========================================================================
 * Rewind change-chip — inline summary on agent final message
 * ====================================================================== */
.rw-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fafafa;
  font-size: 12px;
  color: #374151;
  font-family: inherit;
}
[data-theme="dark"] .rw-chip {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #d1d5db;
}
.rw-chip-lead {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  color: #111827;
}
[data-theme="dark"] .rw-chip-lead { color: #f3f4f6; }
.rw-chip-sp {
  margin-left: auto;
}
.rw-chip-undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ========================================================================
 * Permission + question cards — inner-class styling
 * Scoped versions of the deleted generic tool-card-* helpers, kept only
 * for the interactive cards (Allow/Deny, AskUserQuestion) whose JS still
 * emits these class names. New activity rows use .activity-row-* instead.
 * ====================================================================== */
.tool-card-permission .tool-card-head,
.tool-card-question .tool-card-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 7px 10px;
  font: inherit; color: inherit;
  text-align: left;
  cursor: pointer;
}
.tool-card-permission .tool-card-head:hover,
.tool-card-question .tool-card-head:hover {
  background: rgba(0,0,0,0.025);
}
[data-theme="dark"] .tool-card-permission .tool-card-head:hover,
[data-theme="dark"] .tool-card-question .tool-card-head:hover {
  background: rgba(255,255,255,0.04);
}
.tool-card-permission.open .tool-card-head,
.tool-card-question.open .tool-card-head {
  background: rgba(0,0,0,0.025);
}

.tool-card-permission .tool-icon,
.tool-card-question .tool-icon {
  font-size: 14px; line-height: 1;
  flex: 0 0 18px; text-align: center;
}
.tool-card-permission .tool-label,
.tool-card-question .tool-label {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.tool-card-permission .tool-name,
.tool-card-question .tool-name {
  font-weight: 500; font-size: 13px;
  color: var(--text, #1f2937);
  flex: 0 0 auto;
}
.tool-card-permission .tool-args,
.tool-card-question .tool-args {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto;
}
.tool-card-permission .tool-status,
.tool-card-question .tool-status {
  font-family: var(--mono);
  font-size: 11.5px;
  flex: 0 0 auto;
  color: var(--text-muted, #6b7280);
  padding: 1px 6px; border-radius: 4px;
}
.tool-card-permission .tool-status-pending,
.tool-card-question .tool-status-pending { opacity: 0.6; }
.tool-card-permission .tool-status-ok,
.tool-card-question .tool-status-ok {
  color: #16a34a; background: rgba(34,197,94,0.08);
}
.tool-card-permission .tool-status-err,
.tool-card-question .tool-status-err {
  color: #dc2626; background: rgba(220,38,38,0.08);
}

.tool-card-permission .tool-card-body,
.tool-card-question .tool-card-body {
  display: none;
  padding: 8px 12px 12px 12px;
}
.tool-card-permission.open .tool-card-body,
.tool-card-question.open .tool-card-body {
  display: block;
}
.tool-card-permission .tool-detail-label,
.tool-card-question .tool-detail-label {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af; margin: 4px 0 2px 0;
}
.tool-card-permission .tool-detail-pre,
.tool-card-question .tool-detail-pre {
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-wrap; word-break: break-all;
  background: rgba(0,0,0,0.025);
  padding: 6px 8px; border-radius: 4px;
  color: #374151; margin: 0 0 6px 0;
}
[data-theme="dark"] .tool-card-permission .tool-detail-pre,
[data-theme="dark"] .tool-card-question .tool-detail-pre {
  background: rgba(255,255,255,0.04); color: #d1d5db;
}

/* Resolved-state accents on the outer card (post-Allow/Deny / answered) */
.tool-card-permission.tool-card-ok,
.tool-card-question.tool-card-ok {
  border-left-color: #16a34a !important;
  background: rgba(22,163,74,0.06);
}
.tool-card-permission.tool-card-err,
.tool-card-question.tool-card-err {
  border-left-color: #dc2626 !important;
  background: rgba(220,38,38,0.06);
}
[data-theme="dark"] .tool-card-permission.tool-card-ok,
[data-theme="dark"] .tool-card-question.tool-card-ok {
  background: rgba(22,163,74,0.10);
}
[data-theme="dark"] .tool-card-permission.tool-card-err,
[data-theme="dark"] .tool-card-question.tool-card-err {
  background: rgba(220,38,38,0.10);
}

/* ================================================================
   Timeline panel — change history, reversibility badges, grouped view
   ================================================================ */

/* Panel header */
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.tl-head span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Checkpoint button */
#tlCheckpoint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
  border: 1px solid var(--sap-blue-ring);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s;
}
#tlCheckpoint:hover {
  background: var(--sap-blue);
  color: #fff;
}

/* Scrollable body */
#timelineBody {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Empty state */
.tl-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Group wrapper */
.tl-group {
  border-bottom: 1px solid var(--border-soft);
}

/* Group header row */
.tl-ghead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
}

.tl-nm {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.tl-cnt {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Undo task button */
.tl-undo-task {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.tl-undo-task:hover {
  background: var(--hover-bg);
  color: var(--text);
}

/* Entry row */
.tl-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  min-height: 30px;
  transition: background 0.1s;
}
.tl-row:hover {
  background: var(--hover-bg);
}
.tl-row:last-child {
  border-bottom: none;
}

/* Target description */
.tl-tgt {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-tgt b {
  color: var(--text);
  font-weight: 500;
}

/* "undone" pill */
.tl-done {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--border-soft);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Row action icons */
.tl-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}
.tl-row:hover .tl-acts {
  opacity: 1;
}

.tl-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.tl-a:hover {
  background: var(--sap-blue-soft);
  color: var(--sap-blue);
}

/* ---- Rewind undo dialog (.rw-*) ---- */

.rw-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 520px;
  width: 92vw;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 8px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-family: var(--mono);
}

.rw-dialog::backdrop {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* Header */
.rw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
  gap: 12px;
}

.rw-head-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Close button in header — reuse existing btn-icon style */
.rw-x {
  flex-shrink: 0;
}

/* Sub-title / instruction line */
.rw-sub {
  padding: 5px 20px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Step list */
.rw-steps {
  margin: 12px 20px 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.rw-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}

.rw-step:last-child {
  border-bottom: none;
}

.rw-t {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.rw-t b {
  color: var(--text);
  font-weight: 500;
}

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

/* Options (checkboxes) */
.rw-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px 0;
}

.rw-ck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.rw-ck input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--sap-blue);
  flex-shrink: 0;
}

.rw-dis {
  color: var(--text-muted);
  cursor: default;
}

.rw-dis input[type="checkbox"] {
  cursor: default;
}

/* Footer */
.rw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 16px;
  gap: 10px;
  flex-wrap: wrap;
}

.rw-foot-end {
  justify-content: flex-end;
}

.rw-sum {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.rw-sp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Partial result note */
.rw-partial {
  padding: 4px 20px 0;
}

/* Inline error strip */
.rw-err {
  margin: 8px 20px 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(200, 30, 30, 0.08);
  border: 1px solid rgba(200, 30, 30, 0.18);
  font-size: 12px;
  color: #c0392b;
  line-height: 1.5;
}

.rw-err-text {
  color: #c0392b;
}

/* Loading state */
.rw-loading {
  padding: 28px 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* Dark mode */
[data-theme="dark"] .rw-dialog {
  background: rgba(35, 47, 62, 0.78);
}

[data-theme="dark"] .rw-err {
  background: rgba(200, 50, 50, 0.15);
  border-color: rgba(200, 80, 80, 0.25);
  color: #e57373;
}

[data-theme="dark"] .rw-err-text {
  color: #e57373;
}

/* --- Agent autonomy chip (composer) -------------------------------------- */
/* Always in the user's eyeline: shows whether the agent edits locally (you
   approve each push) or pushes to the live SAP CPQ cloud directly. */
.composer-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.autonomy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.autonomy-chip:hover { background: var(--sap-blue-soft); }
.autonomy-chip:focus-visible {
  outline: 2px solid var(--sap-blue-ring, rgba(0,112,242,0.25));
  outline-offset: 1px;
}
.autonomy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted, #92A0AE);
  flex: 0 0 auto;
}
/* Calm = local-only (default, safe): nothing reaches the cloud without a push. */
.autonomy-chip.tone-calm { border-color: var(--border-strong, #D1D1D6); color: var(--text-secondary); }
.autonomy-chip.tone-calm .autonomy-dot,
.autonomy-dot.dot-calm { background: var(--success); }
/* Armed = autopilot: the agent pushes to the live tenant. Warning accent so
   the higher-stakes mode is unmistakable at a glance. */
.autonomy-chip.tone-armed {
  border-color: var(--warning);
  background: rgba(231, 101, 0, 0.10);
  color: var(--warning);
}
.autonomy-chip.tone-armed:hover { background: rgba(231, 101, 0, 0.16); }
.autonomy-chip.tone-armed .autonomy-dot,
.autonomy-dot.dot-armed { background: var(--warning); }
/* Neutral = loading / unknown (fail safe — never styled as autopilot). */
.autonomy-chip.tone-neutral { color: var(--text-muted, #92A0AE); }
.autonomy-dot.dot-neutral { background: var(--text-muted, #92A0AE); }

/* --- Agent dock (live plan + tool timeline, above the composer) ---------- */
.agent-dock {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--panel, var(--surface));
  margin: 0 0 8px;
  font-size: 12px;
  overflow: hidden;
}
.agent-dock.idle { /* thin banner-only bar */ }
.dock-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.dock-banner-spacer { flex: 1 1 auto; }
.dock-banner.tone-calm { border-left-color: var(--success); }
.dock-banner.tone-armed { border-left-color: var(--warning); color: var(--warning); }
.dock-banner.tone-neutral { border-left-color: var(--border-strong, #D1D1D6); color: var(--text-secondary); }
.dock-cancel {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--error, #CC1919);
  color: var(--error, #CC1919);
  background: transparent;
  cursor: pointer;
}
.dock-cancel:hover { background: rgba(204, 25, 25, 0.08); }

.dock-section { padding: 6px 10px; border-top: 1px solid var(--border-soft, var(--border)); }
.dock-section-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #92A0AE);
  margin-bottom: 4px;
}

/* Plan (TodoWrite checklist) */
.dock-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dock-plan-item { display: flex; align-items: baseline; gap: 6px; color: var(--text-secondary); }
.dock-plan-glyph { flex: 0 0 auto; font-size: 11px; }
.dock-plan-item.st-completed { color: var(--text-muted, #92A0AE); text-decoration: line-through; }
.dock-plan-item.st-in_progress { color: var(--text); font-weight: 600; }
.dock-plan-item.st-in_progress .dock-plan-glyph { color: var(--sap-blue); }

/* Tool timeline */
.dock-timeline { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dock-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  border-left: 2px solid transparent;
  padding-left: 6px;
}
.dock-step-glyph { flex: 0 0 auto; color: var(--text-muted, #92A0AE); }
.dock-step.st-ok .dock-step-glyph { color: var(--success); }
.dock-step.st-err .dock-step-glyph { color: var(--error, #CC1919); }
.dock-step.st-running .dock-step-glyph { color: var(--sap-blue); }
.dock-step-verb { font-weight: 600; color: var(--text); white-space: nowrap; }
.dock-step-target { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-step-why { color: var(--text-muted, #92A0AE); font-size: 11px; }
.dock-step-ms { margin-left: auto; flex: 0 0 auto; color: var(--text-muted, #92A0AE); font-size: 10.5px; font-family: var(--mono); }
/* Cloud-touching steps are unmistakable, even mid-run. */
.dock-step.risk-destructive { border-left-color: var(--warning); }
.dock-step.risk-destructive .dock-step-verb { color: var(--warning); }
.dock-step.risk-mutate { border-left-color: var(--sap-blue-soft); }

/* Now-line */
.dock-now {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-top: 1px solid var(--border-soft, var(--border));
  color: var(--text-secondary);
  font-style: italic;
}
.dock-spinner {
  width: 11px; height: 11px; flex: 0 0 auto;
  border: 2px solid var(--sap-blue-soft);
  border-top-color: var(--sap-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* File-write steps: clickable, with an expandable inline diff (reviewable). */
.dock-step.file-write { cursor: pointer; }
.dock-step.file-write:hover { background: var(--sap-blue-soft); }
.dock-step-diff-toggle { margin-left: auto; flex: 0 0 auto; color: var(--text-muted, #92A0AE); font-size: 10.5px; }
.dock-step-diff {
  margin: 2px 0 5px 18px;
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  max-height: 220px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11px;
}
.dock-step-diff .diff-line { padding: 0 6px; white-space: pre-wrap; }
.dock-step-diff .diff-hunk-header { padding: 1px 6px; color: var(--text-muted, #92A0AE); }

/* Inline sync-panel diffs (co-located review — no bounce to the diff panel). */
.sps-caret { display: inline-block; width: 12px; font-size: 9px; color: var(--text-muted, #92A0AE); transition: transform 0.12s ease; }
.sps-caret.open { transform: rotate(90deg); }
.sps-file-row { cursor: pointer; }
.sps-diff-body {
  margin: 0 0 4px 18px;
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  max-height: 240px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11px;
}
.sps-diff-body .diff-line { padding: 0 6px; white-space: pre-wrap; }
.sps-diff-body .diff-hunk-header { padding: 1px 6px; color: var(--text-muted, #92A0AE); }

/* trace→code: an "open in editor" glyph on resolvable trace lines (shown on
   hover so it doesn't clutter), and the transient line highlight in Monaco. */
.cfg-trace-open {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sap-blue);
  font-family: var(--mono);
  font-size: 10px;
  padding: 0 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.cfg-trace-linkable:hover .cfg-trace-open,
.cfg-trace-open:focus-visible { opacity: 1; }
.cfg-trace-open:hover { background: var(--sap-blue-soft); }
.trace-jump-line { background: rgba(231, 101, 0, 0.18); transition: background 1s ease; }
.trace-jump-glyph { background: var(--warning); width: 3px !important; margin-left: 2px; }

/* Non-blocking formula reference: the formula popup is now a non-modal dialog
   docked to the side, so the editor stays usable while reading a formula. */
.formula-dialog[open] {
  position: fixed;
  top: 56px;
  right: 16px;
  bottom: 16px;
  left: auto;
  margin: 0;
  width: 380px;
  max-width: 92vw;
  max-height: none;
  transform: none;
}

/* Configurator opened in its own panel — chat shows a breadcrumb instead of a
   zone-eating iframe. */
.tr-cfg-breadcrumb { padding: 8px 10px; color: var(--text-secondary); font-size: 13px; }
.tr-cfg-breadcrumb strong { color: var(--text); }

/* Reversibility badge language — migrated from rewind-icons.css (icons live in icons.css). */
.rev-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 7px; border-radius: 6px; font-weight: 500; font-family: inherit; }
.rev-badge .rev-dot { width: 6px; height: 6px; border-radius: 50%; }
.rev-ok    { background: rgba(35, 160, 90, .14); color: #2ea96a; }
.rev-ok    .rev-dot { background: #2ea96a; }
.rev-risk  { background: rgba(214, 150, 40, .16); color: #d6962f; }
.rev-risk  .rev-dot { background: #d6962f; }
.rev-no    { background: rgba(140, 140, 150, .16); color: #8c8c96; }
.rev-no    .rev-dot { background: #8c8c96; }
.rev-drift { background: rgba(214, 110, 40, .16); color: #d66e28; }
.rev-drift .rev-dot { background: #d66e28; }

/* Chat welcome screen — large file-text glyph in SAP blue. */
.welcome-glyph { font-size: 40px; color: var(--sap-blue); }

/* File-type icon coloring — single Lucide glyph (.ic-file-code), tinted by language. */
.file-icon-py      { color: #0070F2; }
.file-icon-json    { color: #E76500; }
.file-icon-html    { color: #CC1919; }
.file-icon-generic { color: #92A0AE; }
.file-icon-folder  { color: #6A7A8C; }
[data-theme="dark"] .file-icon-py      { color: #5B9BFF; }
[data-theme="dark"] .file-icon-json    { color: #FFB14C; }
[data-theme="dark"] .file-icon-html    { color: #FF7676; }
[data-theme="dark"] .file-icon-generic { color: #A9B4C0; }
[data-theme="dark"] .file-icon-folder  { color: #A9B4C0; }

/* Accessibility floor — visible focus ring on all interactive surfaces and
   respect prefers-reduced-motion. */
:focus-visible {
  outline: 2px solid var(--sap-blue);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard-cap glyphs (⌘ ⇧ ⏎ ⌥ ⎋ ↑ ↓ ⌫) — typographic, not iconographic. */
.kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  vertical-align: 1px;
}

/* ============================================================================
 * agent-parts.js rendering layer
 * Classes for: agent-part, agent-part-text, agent-part-tool, tool-head,
 * tool-body, tool-verb, tool-target, tool-dur, tool-check,
 * agent-part-reasoning, reasoning-head, reasoning-body,
 * agent-part-plan, plan-list, plan-item, md-block.
 * Reuses existing design tokens and mirrors .activity-row / .tool-card rules.
 * ============================================================================ */

/* -- shared part container -------------------------------------------------- */
.agent-part {
  margin: 2px 0;
  font-size: var(--text-body, 13px);
}

/* -- text part -------------------------------------------------------------- */
.agent-part-text.md-block {
  /* Prose content; inherits markdown styles (.md-p, .md-ul, etc.) */
  line-height: 1.6;
}

/* -- reasoning part (collapsed summary + expandable body) ------------------- */
.agent-part-reasoning {
  margin: 4px 0;
}
.reasoning-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 3px 0;
  font: inherit; color: var(--text-secondary, #6A7A8C);
  font-size: var(--text-ui, 12px);
  cursor: pointer; text-align: left;
}
.reasoning-head:hover { color: var(--text, #1D2D3E); }
.reasoning-label {
  flex: 1 1 auto;
}
.reasoning-body {
  display: none;
  padding: 6px 8px 8px 24px;
  color: var(--text-secondary, #6A7A8C);
  font-size: var(--text-ui, 12px);
  line-height: 1.55;
  border-left: 2px solid var(--border, #E5E5E5);
  margin-left: 8px;
}
.agent-part-reasoning.open .reasoning-body { display: block; }

/* -- tool part (mirrors .activity-row) -------------------------------------- */
.agent-part-tool {
  display: block;
  margin: 0;
}
.tool-head {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 3px 0;
  font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.tool-head:hover { background: rgba(0,0,0,0.025); }
[data-theme="dark"] .tool-head:hover { background: rgba(255,255,255,0.04); }
.tool-verb {
  color: #6b7280; font-weight: 500;
  min-width: 56px; flex: 0 0 auto;
}
.tool-target {
  font-family: var(--mono);
  font-size: 12.5px; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
[data-theme="dark"] .tool-target { color: #e5e7eb; }
.tool-dur {
  font-family: var(--mono);
  font-size: var(--text-caption, 11px);
  color: var(--text-muted, #92A0AE);
  flex: 0 0 auto;
}
.tool-check {
  font-size: 11.5px; flex: 0 0 auto;
  font-family: var(--mono);
}
.agent-part-tool.st-ok    .tool-check { color: #16a34a; }
.agent-part-tool.st-err   .tool-check { color: #dc2626; }
/* Running shimmer — mirrors .activity-row-running */
.agent-part-tool.st-running .tool-target {
  background: linear-gradient(90deg, transparent 0%, rgba(75,142,251,0.10) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: codex-shimmer 1.4s linear infinite;
  padding: 0 4px; margin: 0 -4px; border-radius: 3px;
}
.agent-part-tool.st-running .tool-head::after {
  content: "…"; color: #9ca3af;
  font-family: var(--mono); flex: 0 0 auto;
}
/* Tool body (expandable detail) */
.tool-body {
  display: none;
  padding: 6px 8px 10px 66px;
  font-size: var(--text-caption, 11px);
}
.agent-part-tool.open .tool-body { display: block; }
.tool-body-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #9ca3af; margin: 4px 0 2px 0;
}
.tool-body-pre {
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-wrap; word-break: break-all;
  background: rgba(0,0,0,0.025); padding: 6px 8px; border-radius: 4px;
  color: #374151; margin: 0 0 6px 0;
}
[data-theme="dark"] .tool-body-pre {
  background: rgba(255,255,255,0.04); color: #d1d5db;
}
/* Risk-level left-border accents */
.agent-part-tool.risk-mutate .tool-head { border-left: 2px solid #f59e0b; padding-left: 6px; }
.agent-part-tool.risk-delete .tool-head,
.agent-part-tool.risk-destructive .tool-head { border-left: 2px solid #dc2626; padding-left: 6px; }

/* -- plan part -------------------------------------------------------------- */
.agent-part-plan {
  margin: 4px 0;
}
.plan-title {
  font-size: var(--text-ui, 12px); font-weight: 600;
  color: var(--text-muted, #92A0AE);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.plan-list {
  list-style: none; margin: 0; padding: 0;
}
.plan-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 2px 0;
  font-size: var(--text-body, 13px);
  color: var(--text, #1D2D3E);
}
.plan-glyph {
  flex: 0 0 auto;
  color: var(--text-muted, #92A0AE);
  font-family: var(--mono);
  font-size: 13px; line-height: 1.4;
}
.plan-text { flex: 1 1 auto; line-height: 1.4; }
.plan-item.st-completed .plan-glyph { color: #16a34a; }
.plan-item.st-completed .plan-text  { text-decoration: line-through; color: var(--text-muted, #92A0AE); }
.plan-item.st-in_progress .plan-glyph { color: var(--sap-blue, #0070F2); }

/* -- md-block (shared markdown container class) ----------------------------- */
.md-block { }  /* no extra styling; markdown child classes (.md-p etc.) do the work */

/* -- rollup row (collapsed read-batch summary) ---------------------- */
.agent-rollup {
  margin: 0;
}
.rollup-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 3px 0;
  font: inherit; color: var(--text-secondary, #6A7A8C);
  font-size: var(--text-ui, 12px);
  cursor: pointer; text-align: left;
}
.rollup-head:hover { background: rgba(0,0,0,0.025); color: var(--text, #1D2D3E); }
[data-theme="dark"] .rollup-head:hover { background: rgba(255,255,255,0.04); }
.rollup-label {
  flex: 1 1 auto;
  font-weight: 500;
  color: #6b7280;
}
.rollup-chevron {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--text-muted, #92A0AE);
  transition: transform 0.15s;
}
.agent-rollup.open .rollup-chevron { transform: rotate(90deg); }
.rollup-body {
  padding-left: 24px;
}
.rollup-body[hidden] { display: none; }

/* ================================================================
   Pipelines board (promotion pipeline panel)
   ================================================================ */
.pl-board { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.pl-loading, .pl-empty, .pl-error { padding: 24px; color: var(--text-muted, #8a929b); font-size: 13px; }
.pl-error { color: var(--danger, #e5484d); }
.pl-strip { border: 1px solid var(--border, #e7ebef); border-radius: 10px; padding: 12px 14px; background: var(--bg-elevated, #fff); }
.pl-fam { font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.pl-fam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sap-blue, #2563eb); display: inline-block; }
.pl-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.pl-node { min-width: 130px; border: 1px solid var(--border, #e2e8f0); border-radius: 9px; padding: 9px 10px; background: var(--bg-sidebar, #fbfcfd); align-self: center; }
.pl-node-active { box-shadow: 0 0 0 2px var(--sap-blue, #2563eb) inset; }
.pl-node-env { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pl-env-dev { color: #2563eb; } .pl-env-test { color: #d97706; } .pl-env-prod { color: #16a34a; }
.pl-node-tenant { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: 3px 0 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pl-node-status { font-size: 10px; color: var(--text-muted, #8a929b); display: flex; align-items: center; gap: 5px; }
.pl-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa4ad; display: inline-block; }
.pl-dot-on { background: #16a34a; }
.pl-conduit { min-width: 56px; align-self: center; display: flex; align-items: center; padding: 0 6px; }
.pl-conduit-pipe { height: 14px; width: 100%; border-radius: 7px; border: 1px solid #e0e6ec;
  background-image: repeating-linear-gradient(115deg, #e6ebf0 0 7px, #eef2f6 7px 14px); }
.pl-ungrouped { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-ungrouped-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #8a929b); font-weight: 700; }
.pl-chip { font-family: ui-monospace, Menlo, monospace; font-size: 11px; border: 1px solid var(--border, #e7ebef); border-radius: 6px; padding: 2px 7px; color: var(--text-muted, #8a929b); }
/* Permanent drag header for Pipelines panel — mirrors .tl-head */
.pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.pl-head span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.pl-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.pl-close:hover {
  color: var(--text);
  background: var(--sap-blue-soft);
}
/* Scrollable body shell */
.pl-board-shell {
  flex: 1;
  overflow-y: auto;
}

/* Conduit click affordance */
.pl-conduit { cursor: pointer; }
.pl-conduit:hover .pl-conduit-pipe { outline: 2px solid var(--sap-blue, #0070F2); outline-offset: 1px; }

/* Level-2 promotion preview */
.pl-preview { padding: 14px 16px; }
.pl-prev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pl-back {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 7px;
  padding: 4px 10px;
  background: var(--surface, #fff);
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.pl-back:hover { background: var(--hover-bg, #EEF1F5); }
.pl-prev-route { font-size: 12px; }
.pl-mono { font-family: var(--mono); }
.pl-prev-count { font-size: 11px; font-weight: 700; color: var(--text-muted, #92A0AE); margin-bottom: 8px; }
.pl-prev-blocked {
  color: var(--error, #CC1919);
  font-size: 13px;
  padding: 10px;
  background: var(--error-bg, rgba(204, 25, 25, 0.08));
  border: 1px solid var(--error, #CC1919);
  border-radius: 8px;
}
.pl-prev-empty { color: var(--text-muted, #92A0AE); font-size: 13px; padding: 12px; }
.pl-prev-group { margin-bottom: 10px; }
.pl-prev-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #92A0AE);
  font-weight: 700;
  margin-bottom: 4px;
}
.pl-prev-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 7px; font-size: 12.5px; }
.pl-prev-row:hover { background: var(--hover-bg, #EEF1F5); }
.pl-prev-glyph { flex: none; }
.pl-prev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-prev-action { font-size: 11px; color: var(--text-muted, #92A0AE); flex-shrink: 0; }
.pl-act-create .pl-prev-glyph { color: var(--sap-blue, #0070F2); }
.pl-act-update .pl-prev-glyph { color: var(--warning, #E76500); }
.pl-act-delete .pl-prev-glyph { color: var(--error, #CC1919); }
.pl-act-in_sync .pl-prev-glyph { color: var(--success, #188918); }

/* ── Promotion opt-in checkboxes (.pl-optin-*) ──────────────────────────────── */
.pl-optin-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; padding: 7px 9px; background: var(--bg-sidebar, #fbfcfd); border: 1px dashed var(--border, #e2e8f0); border-radius: 8px; }
.pl-optin-label { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-muted, #6b7280); }
.pl-optin-label input { cursor: pointer; }
/* pl-advisory — formula-risk marker in the plan preview row */
.pl-advisory { color: var(--warning, #E76500); flex-shrink: 0; cursor: default; }

/* ── Promotion run drawer (.prd-*) ─────────────────────────────────────────── */
.prd-drawer { padding: 14px 16px; }
.prd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prd-route { font-size: 12px; }
.prd-arrow { color: var(--text-muted, #92A0AE); }
.prd-prog { font-size: 11px; color: var(--text-muted, #92A0AE); margin-left: auto; }

/* Status pills */
.prd-pill { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 1px 7px; }
.prd-pill-ok   { color: #16a34a; background: #eefaf1; }
.prd-pill-warn { color: #d97706; background: #fff7ea; }
.prd-pill-err  { color: #e5484d; background: #fdeced; }
.prd-pill-muted { color: #8a929b; background: #f1f3f5; }
.prd-pill-run  { color: #2563eb; background: #eef4ff; }

/* Gate/error banner — separate class to avoid collision with .prd-blocked row */
.prd-gate-err {
  color: #e5484d;
  font-size: 13px;
  padding: 8px 10px;
  background: #fdeced;
  border: 1px solid #f6cdd0;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Asset log */
.prd-log { display: flex; flex-direction: column; gap: 2px; }
.prd-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; padding: 5px 6px; border-radius: 7px; font-size: 12.5px; }
.prd-glyph { flex: none; align-self: center; }
.prd-name { font-family: ui-monospace, Menlo, monospace; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prd-type   { font-size: 11px; color: var(--text-muted, #8a929b); }
.prd-status { font-size: 11px; color: var(--text-muted, #8a929b); }

/* Per-status glyph colors */
.prd-applied .prd-glyph  { color: #16a34a; }
.prd-in_sync .prd-glyph  { color: #16a34a; }
.prd-failed  .prd-glyph  { color: #e5484d; }
.prd-blocked .prd-glyph  { color: #e5484d; }
.prd-skipped .prd-glyph  { color: #e5484d; }
.prd-running .prd-glyph  { color: #d97706; }

/* Per-asset inline error */
.prd-err {
  flex-basis: 100%;
  margin-left: 33px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #9b1c1c;
  background: #fef5f5;
  border: 1px solid #f6d4d4;
  border-radius: 6px;
  padding: 6px 8px;
}

/* Empty / loading states */
.prd-loading,
.prd-empty { color: var(--text-muted, #8a929b); font-size: 13px; padding: 12px; }

/* Retry + Fix-with-agent footer */
.prd-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.prd-retry { font-size: 12px; font-weight: 600; border: 1px solid var(--sap-blue, #2563eb); color: var(--sap-blue, #2563eb); background: var(--bg-elevated, #fff); border-radius: 7px; padding: 5px 12px; cursor: pointer; }
.prd-retry:hover { background: #eef4ff; }
.prd-retry-emphasis { background: var(--sap-blue, #2563eb); color: #fff; box-shadow: 0 0 0 2px #bfdbfe; }
.prd-retry-emphasis:hover { background: #1d4ed8; }
.prd-fix { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border, #e7ebef); color: var(--text-secondary, #4a5568); background: var(--bg-elevated, #fff); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.prd-fix:hover { background: #f0f4ff; border-color: var(--sap-blue, #2563eb); color: var(--sap-blue, #2563eb); }
.prd-fix:disabled { opacity: .5; cursor: not-allowed; }
.prd-fix-note { font-size: 11px; color: var(--text-muted, #8a929b); flex: 1; min-width: 0; }
.prd-ask { margin-left: 4px; border: 1px solid var(--border, #e7ebef); background: var(--bg-elevated, #fff); border-radius: 6px; padding: 2px 6px; cursor: pointer; color: var(--sap-blue, #2563eb); flex: none; }
.prd-ask:hover { background: #eef4ff; }
.prd-fixmanual { margin-left: 8px; border: 1px solid var(--border, #e7ebef); background: var(--bg-elevated, #fff); border-radius: 6px; padding: 2px 6px; cursor: pointer; color: var(--text-secondary, #4a5568); flex: none; }
.prd-fixmanual:hover { background: #f5f5f5; border-color: var(--text-secondary, #4a5568); }
.prd-dl { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border, #e7ebef); color: var(--text-secondary, #4a5568); background: var(--bg-elevated, #fff); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.prd-dl:hover { background: #f0f4ff; border-color: var(--sap-blue, #2563eb); color: var(--sap-blue, #2563eb); }
.prd-dl-foot { justify-content: flex-end; padding-top: 6px; }
.prd-reverse { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border, #e7ebef); color: var(--text-secondary, #4a5568); background: var(--bg-elevated, #fff); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.prd-reverse:hover { background: #f0f4ff; border-color: var(--sap-blue, #2563eb); color: var(--sap-blue, #2563eb); }
.prd-reverse:disabled { opacity: .5; cursor: not-allowed; }
.prd-rev-foot { justify-content: flex-start; border-top: 1px solid var(--border, #e7ebef); margin-top: 6px; padding-top: 8px; }
.prd-rev-label { font-size: 11px; color: var(--text-muted, #8a929b); }
.prd-rev-input { font-size: 12px; border: 1px solid var(--border, #e7ebef); border-radius: 6px; padding: 4px 8px; outline: none; width: 90px; }
.prd-rev-input:focus { border-color: var(--sap-blue, #2563eb); }
.prd-rev-confirm { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border, #e7ebef); color: var(--text-secondary, #4a5568); background: var(--bg-elevated, #fff); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.prd-rev-confirm:not(:disabled):hover { background: #fdeced; border-color: #e5484d; color: #e5484d; }
.prd-rev-confirm:disabled { opacity: .5; cursor: not-allowed; }
.prd-rev-cancel { font-size: 12px; border: none; background: none; color: var(--text-muted, #8a929b); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.prd-rev-cancel:hover { background: var(--bg-hover, #f1f3f5); }
.prd-rev-note { font-size: 12px; color: var(--text-secondary, #4a5568); }

/* Per-step delete controls in reverse-run result */
.prd-delitem-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.prd-delitem-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; }
.prd-delitem-glyph { flex: none; color: var(--text-muted, #8a929b); }
.prd-delitem-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, #4a5568); }
.prd-delitem-status { font-size: 11px; color: var(--text-muted, #8a929b); flex: none; }
.prd-delitem-badge { font-size: 11px; color: var(--text-muted, #8a929b); flex: none; font-style: italic; }
.prd-delitem-errmsg { font-size: 11px; color: #e5484d; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prd-delitem-done .prd-delitem-glyph { color: #16a34a; }
.prd-delitem-done .prd-delitem-name { text-decoration: line-through; color: var(--text-muted, #8a929b); }
.prd-delitem-done .prd-delitem-badge { color: #16a34a; }
.prd-delitem { flex: none; border: 1px solid var(--border, #e7ebef); background: var(--bg-elevated, #fff); border-radius: 5px; padding: 2px 6px; cursor: pointer; color: var(--text-muted, #8a929b); display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.prd-delitem:hover { background: #fdeced; border-color: #e5484d; color: #e5484d; }
.prd-delitem-confirming { background: var(--bg-hover, #f1f3f5); border-radius: 5px; padding: 3px 6px; }
.prd-delitem-ok { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; border: 1px solid #e5484d; color: #e5484d; background: #fdeced; border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.prd-delitem-ok:hover { background: #fca5a5; }
.prd-delitem-cancel { font-size: 11px; border: none; background: none; color: var(--text-muted, #8a929b); cursor: pointer; padding: 2px 5px; border-radius: 5px; }
.prd-delitem-cancel:hover { background: var(--bg-hover, #f1f3f5); }