/**
 * Debug Overlay Styles — Scoped inside Shadow DOM.
 */
export declare const debugStyles = "\n:host {\n  all: initial;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 999999;\n  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n  font-size: 12px;\n  color: #e0e0e0;\n  line-height: 1.4;\n}\n\n* { box-sizing: border-box; }\n\n.t4-debug {\n  width: 480px;\n  max-height: 420px;\n  background: #1a1a2e;\n  border: 1px solid #333;\n  border-radius: 8px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px -4px 20px rgba(0,0,0,0.5);\n}\n\n.t4-debug.collapsed {\n  max-height: none;\n}\n\n.t4-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: #16213e;\n  border-bottom: 1px solid #333;\n  border-radius: 8px 0 0 0;\n  cursor: move;\n  user-select: none;\n}\n\n.t4-logo {\n  font-weight: 700;\n  font-size: 13px;\n  color: #00d4ff;\n  letter-spacing: 0.5px;\n}\n\n.t4-badge {\n  font-size: 10px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: #0f3460;\n  color: #00d4ff;\n  margin-left: 8px;\n}\n\n.t4-header-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.t4-close {\n  background: none;\n  border: none;\n  color: #888;\n  cursor: pointer;\n  font-size: 16px;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n.t4-close:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }\n\n.t4-tabs {\n  display: flex;\n  border-bottom: 1px solid #333;\n  background: #16213e;\n}\n\n.t4-tab {\n  flex: 1;\n  padding: 6px 8px;\n  background: none;\n  border: none;\n  color: #888;\n  cursor: pointer;\n  font-size: 11px;\n  font-family: inherit;\n  border-bottom: 2px solid transparent;\n  transition: all 0.15s;\n}\n.t4-tab:hover { color: #ccc; background: rgba(255,255,255,0.03); }\n.t4-tab.active {\n  color: #00d4ff;\n  border-bottom-color: #00d4ff;\n  background: rgba(0,212,255,0.05);\n}\n\n.t4-tab-count {\n  font-size: 10px;\n  color: #666;\n  margin-left: 4px;\n}\n\n.t4-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px;\n  min-height: 200px;\n  max-height: 340px;\n}\n\n.t4-body::-webkit-scrollbar { width: 6px; }\n.t4-body::-webkit-scrollbar-track { background: transparent; }\n.t4-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }\n\n/* Panel table styles */\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth {\n  text-align: left;\n  padding: 4px 8px;\n  color: #888;\n  font-weight: 500;\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-bottom: 1px solid #2a2a3e;\n  position: sticky;\n  top: 0;\n  background: #1a1a2e;\n}\n\ntd {\n  padding: 3px 8px;\n  border-bottom: 1px solid rgba(255,255,255,0.03);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 150px;\n}\n\ntr:hover td { background: rgba(255,255,255,0.02); }\n\n/* Value displays */\n.val-string { color: #a8e6cf; }\n.val-number { color: #ffd3a5; }\n.val-boolean { color: #ff8b94; }\n.val-object { color: #b8b5ff; }\n.val-null { color: #666; font-style: italic; }\n\n/* Status badges */\n.status-ok { color: #66bb6a; }\n.status-err { color: #ff6b6b; }\n.status-pending { color: #ffa726; }\n\n/* Route pattern */\n.route-pattern { color: #b8b5ff; }\n.route-param { color: #ffd3a5; }\n\n/* Duration */\n.duration { color: #888; font-size: 11px; }\n.duration.fast { color: #66bb6a; }\n.duration.slow { color: #ffa726; }\n.duration.very-slow { color: #ff6b6b; }\n\n/* Empty state */\n.t4-empty {\n  text-align: center;\n  color: #555;\n  padding: 32px 16px;\n  font-size: 12px;\n}\n\n/* Collapsed mini-badge */\n.t4-mini {\n  position: fixed;\n  bottom: 12px;\n  right: 12px;\n  background: #1a1a2e;\n  border: 1px solid #333;\n  border-radius: 8px;\n  padding: 6px 12px;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 11px;\n  color: #00d4ff;\n  box-shadow: -2px -2px 10px rgba(0,0,0,0.3);\n  z-index: 999999;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.t4-mini:hover { background: #16213e; }\n\n.t4-mini-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #66bb6a;\n}\n";
//# sourceMappingURL=styles.d.ts.map