/* Glass topbar + card refinement + button polish */
    /* ── Glass topbar (Apple Liquid Glass principles) ── */
    .app-topbar{
      background:var(--glass-tint)!important;
      backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))!important;
      -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))!important;
      border-bottom:1px solid var(--glass-border)!important;
      box-shadow:var(--glass-specular),var(--glass-rim),var(--glass-drop)!important;
    }

    /* ── Card refinement ── */
    .item{
      border-radius:var(--radius-card)!important;
      border:1px solid var(--card-border)!important;
      background:rgba(255,255,255,0.015)!important;
      position:relative;
      transition:
        border-color var(--dur-fast) var(--ease-hover),
        box-shadow var(--dur-base) var(--ease-card-exit),
        transform var(--dur-base) var(--ease-card-exit)!important;
    }
    .item:hover{
      border-color:var(--card-border-hover)!important;
      box-shadow:0 8px 32px rgba(0,0,0,0.16),0 0 24px rgba(157,193,255,0.06)!important;
    }
    .item.is-clickable:hover{transform:translateY(-2px)}

    /* Gradient edge border on cards (specular highlight) */
    .item.is-clickable::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(180deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.08) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      mask-composite:exclude;
      pointer-events:none;
      opacity:0;
      transition:opacity var(--dur-fast) var(--ease-hover);
    }
    .item.is-clickable:hover::before{opacity:1}

    /* ── Button polish — asymmetric timing ── */
    .button,.ghost-button{
      border-radius:var(--radius-control)!important;
      font-weight:550!important;
      transition:transform var(--dur-micro) var(--ease-hover),box-shadow var(--dur-base) var(--ease-card-exit)!important;
    }
    .button:hover,.ghost-button:hover{
      transform:translateY(-1px);
      box-shadow:0 4px 16px rgba(0,0,0,0.18)!important;
    }
    .button:active,.ghost-button:active{
      transform:scale(0.97);
      transition:transform 80ms ease-out!important;
    }

/* ── Card left-edge status bar (colorblind-safe: color + glyph, never color alone) ── */
.item[data-status="ok"] {
  border-left: 3px solid var(--ok, #69d6a3) !important;
}
.item[data-status="warn"] {
  border-left: 3px solid var(--warn, #f0c36b) !important;
}
.item[data-status="bad"] {
  border-left: 3px solid var(--bad, #ee8799) !important;
}
.item[data-status="idle"] {
  border-left: 3px solid rgba(255, 255, 255, 0.12) !important;
}
/* Control rows use .control-row class, not .item */
.control-row[data-status="idle"] {
  border-left: 3px solid rgba(255, 255, 255, 0.12) !important;
}
/* High-contrast mode: thicker, brighter */
html[data-high-contrast="true"] .item[data-status="ok"],
body.high-contrast-active .item[data-status="ok"] {
  border-left: 4px solid #69d6a3 !important;
}
html[data-high-contrast="true"] .item[data-status="warn"],
body.high-contrast-active .item[data-status="warn"] {
  border-left: 4px solid #fde047 !important;
}
html[data-high-contrast="true"] .item[data-status="bad"],
body.high-contrast-active .item[data-status="bad"] {
  border-left: 4px solid #fda4af !important;
}
html[data-high-contrast="true"] .item[data-status="idle"],
body.high-contrast-active .item[data-status="idle"],
html[data-high-contrast="true"] .control-row[data-status="idle"],
body.high-contrast-active .control-row[data-status="idle"] {
  border-left: 4px solid #71717a !important;
}

/* ── Empty-state component (shared across all lanes) ── */
.empty-state {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--card-border, rgba(255,255,255,0.05));
  border-radius: var(--radius-card, 8px);
  background: rgba(255,255,255,0.01);
}
.empty-state-icon {
  font-size: 1.4rem;
  opacity: 0.3;
  font-family: var(--font-mono, monospace);
}
.empty-state-title {
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--text-secondary, rgba(238,244,252,0.72));
}
.empty-state-desc {
  font-size: 0.82rem;
  color: var(--text-tertiary, rgba(238,244,252,0.48));
  max-width: 280px;
}
/* High-contrast */
html[data-high-contrast="true"] .empty-state,
body.high-contrast-active .empty-state {
  border: 2px dashed #71717a !important;
  background: #09090b !important;
}
html[data-high-contrast="true"] .empty-state-title,
body.high-contrast-active .empty-state-title {
  color: #f4f4f5 !important;
}
html[data-high-contrast="true"] .empty-state-desc,
body.high-contrast-active .empty-state-desc {
  color: #e4e4e7 !important;
}

/* ── Apple Liquid Glass refinement: lane specular edges, focused card glow, drawer glass ── */

/* Lane specular edge — depth between lanes */
.agent-lane {
  position: relative;
}
.agent-lane::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* Focused card glow — replaces harsh outline with soft glass glow */
.item[data-app-nav-selected="true"] {
  border-color: rgba(157,193,255,0.42) !important;
  box-shadow:
    0 0 0 1px rgba(157,193,255,0.18),
    0 0 24px rgba(157,193,255,0.08),
    0 8px 32px rgba(0,0,0,0.16) !important;
}

/* Topbar specular highlight (top edge) */
.app-topbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.12) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Drawer glass — detail panel */
.detail-drawer {
  background: rgba(13,20,34,0.85) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.detail-header {
  background: rgba(17,24,39,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}