@tailwind base;
@tailwind components;
@tailwind utilities;

.react-flow__background { background-color: #0f172a !important; }
.react-flow__minimap { background-color: #111827 !important; border: 1px solid #374151 !important; border-radius: 8px !important; }
.react-flow__controls button { background-color: #111827 !important; border: 1px solid #374151 !important; color: #9ca3af !important; fill: #9ca3af !important; }
.react-flow__controls button:hover { background-color: #1f2937 !important; }
.react-flow__attribution { display: none !important; }

.workflow-node {
  background: #111827; border: 2px solid #374151; border-radius: 8px;
  width: 280px !important; height: auto; min-height: 90px;
  box-sizing: border-box;
  font-size: 13px; color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: border-color .15s, box-shadow .15s;
}
.workflow-node:hover { border-color: #4b5563; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.workflow-node.selected { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.3); }

.node-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 12px; }
.node-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.node-header-control { flex: 0 0 auto; display: flex; align-items: center; }
.node-header-input, .node-header-select { width: 112px; min-width: 0; height: 22px; padding: 2px 6px; background: #374151; border: 1px solid #4b5563; border-radius: 5px; color: #e5e7eb; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; outline: none; }
.node-header-input:focus, .node-header-select:focus { border-color: #60a5fa; }
.node-header-select { width: 82px; font-family: ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.node-body { padding: 5px 10px 8px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.node-port { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94a3b8; }
.node-port span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.react-flow__handle { width: 10px !important; height: 10px !important; border: 2px solid #475569 !important; background: #1e293b !important; }
.react-flow__handle:hover { background: #3b82f6 !important; border-color: #3b82f6 !important; }
.react-flow__handle-connecting { background: #f59e0b !important; border-color: #f59e0b !important; }
.react-flow__handle-valid { background: #22c55e !important; border-color: #22c55e !important; }

/* 深色界面的滚动条 —— 浏览器默认是浅色粗条，配深色面板非常突兀。
   默认做成接近隐藏的细条，悬停/滚动时才明显一点。 */
.dark-scroll { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.dark-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.dark-scroll::-webkit-scrollbar-track { background: transparent; }
.dark-scroll::-webkit-scrollbar-thumb {
  background: #334155; border-radius: 4px;
  /* 用透明边框把滑块"缩"进去，视觉上更细，且不占额外宽度 */
  border: 2px solid transparent; background-clip: content-box;
}
.dark-scroll::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: content-box; }
.dark-scroll::-webkit-scrollbar-corner { background: transparent; }

/* 弹窗挂到 document.body —— 脱离 React Flow 的缩放/平移容器。
   见 DeviceQualityModal 顶部注释：transform 会给后代创建新的包含块，
   导致 position:fixed 的弹窗跟着画布缩放，在画布外还会偏出屏幕。 */
.modal-portal { position: fixed; inset: 0; z-index: 100; }