/* styles.css - 基础样式（注入页面） */

/* 高亮框（不影响原页面布局） */
.csswatch-highlight {
  position: fixed;
  border: 1px solid #ff3e00;
  background: rgba(255, 62, 0, 0.1);
  z-index: 999999;
  pointer-events: none;
  box-sizing: border-box;
}
/* 选中元素绿色边框（侧栏模式点击后显示） */
.csswatch-selected-outline {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  border: 1px solid #22c55e;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 0 4px rgba(34, 197, 94, 0.12);
  border-radius: 2px;
}

/* 高亮辅助线（虚线，较边框更淡） */
/* 贯穿屏幕的轴线（类似 Figma，穿越显示器） */
.csswatch-axis-guide { position: fixed; pointer-events: none; z-index: 999999; }
.csswatch-axis-guide.h { left: 0; right: 0; border-top: 1px dashed rgba(255, 62, 0, 0.45); }
.csswatch-axis-guide.v { top: 0; bottom: 0; border-left: 1px dashed rgba(255, 62, 0, 0.45); }
/* 右下角对齐的第二组轴线（更淡以作区分） */
.csswatch-axis-guide.h.end { border-top: 1px dashed rgba(255, 62, 0, 0.30); }
.csswatch-axis-guide.v.end { border-left: 1px dashed rgba(255, 62, 0, 0.30); }

/* 浮动面板 */
.csswatch-panel {
  position: fixed;
  width: 400px;
  max-height: 100vh;
  overflow: hidden;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
  z-index: 1000000;
  opacity: 1;
}
.csswatch-panel * { box-sizing: border-box; font-family: -apple-system, "system-ui", Roboto, sans-serif; }
.csswatch-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #0f172a;
  border-bottom: 1px solid #334155;
  cursor: move;
}
.csswatch-panel-title { font-weight: 700; color: #4adc71; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.csswatch-panel-header .title-wrap { display: flex; flex-direction: column; min-width: 0; }
.csswatch-title-tag { font-size: 16px; }
.csswatch-title-classes { font-size: 14px; }
.csswatch-panel-path { font-size: 12px; color: #9ca3af; }
.csswatch-panel-body { padding: 8px 16px; max-height: 100vh; overflow-y: auto; overflow-x: hidden; }
.csswatch-basic { display: flex; flex-direction: column; }
.csswatch-basic .metric { display: inline-flex; align-items: center; gap: 4px; font-size: 12.6px; line-height: 24px; color: #e5e7eb; opacity: 0.7; }
.csswatch-basic .metric .icon { display: inline-flex; align-items: center; justify-content: left; }
.csswatch-code { background: #111827; margin-top: 10px; font-size: 14px; white-space: pre-wrap; line-height: 24px; color: #e5e7eb; overflow-x: hidden; word-break: break-word; overflow-wrap: anywhere; }
.csswatch-code .prop { color: #93c5fd; }
.csswatch-code .val { color: #b8cdd1; }
.csswatch-code .punct { color: #94a3b8; }
.csswatch-code .selector { color: #a7f3d0; font-weight: 600; }
.csswatch-code .num { color: #bd93f9; }
.csswatch-code .unit { color: #bd93f9; }
.csswatch-code .hex { color: #f472b6; }
.csswatch-code .func { color: #60a5fa; }
.csswatch-code .str { color: #c4b5fd; }
.csswatch-code .url { color: #34d399; }
.csswatch-code .important { color: #fb7185; font-weight: 700; }

/* highlight.js 兼容类名映射到现有主题色 */
.csswatch-code.hljs { /* 维持暗背景，与面板一致 */ color: #e5e7eb; background: none; }
.csswatch-code .hljs-attr { color: #61CBE0; }
.csswatch-code .hljs-value { color: #b8cdd1; }
.csswatch-code .hljs-number { color: #bd93f9; }
.csswatch-code .hljs-literal { color: #bd93f9; }
.csswatch-code .hljs-built_in { color: #60a5fa; }
.csswatch-code .hljs-string { color: #c4b5fd; }
.csswatch-code .hljs-link { color: #34d399; text-decoration: underline dotted; }
.csswatch-code .hljs-keyword { color: #fb7185; font-weight: 700; }
.csswatch-color-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset; }
.csswatch-actions { display: flex; gap: 8px; padding: 8px; border-top: 1px solid #334155; }
.csswatch-button { padding: 6px 10px; border: none; border-radius: 6px; cursor: pointer; background: #2563eb; color: #fff; font-weight: 600; font-size: 12px; }
.csswatch-button.secondary { background: #6b7280; }
.csswatch-button.icon { background: transparent; color: #e5e7eb; font-size: 16px; padding: 0 8px; }
.csswatch-icon-button { background: transparent; border: none; padding: 6px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.csswatch-icon-button:hover { background: rgba(255,255,255,0.06); }
.csswatch-icon { width: 12px; height: 12px; display: block; filter: invert(90%) sepia(2%) saturate(300%) hue-rotate(180deg) brightness(95%) contrast(90%); }
.csswatch-icon-svg { width: 12px; height: 12px; display: block; stroke: #e5e7eb; }
.csswatch-button:hover { filter: brightness(0.95); }
.csswatch-source-list { margin-top: 8px; font-size: 12px; color: #9ca3af; }
.csswatch-source-list a { color: #60a5fa; text-decoration: none; }
.csswatch-source-list a:hover { text-decoration: underline; }

/* 文本内容模块（仅侧边栏显示） */
.csswatch-text-content { display: none; margin-top: 12px; }
.csswatch-text-title { font-size: 12px; color: #9ca3af; margin-top: 20px; margin-bottom: 6px; display:flex; align-items:center; justify-content: space-between; gap: 8px; }
.csswatch-text-label { display: inline-flex; align-items: center; }
.csswatch-text-actions { display: inline-flex; align-items: center; gap: 6px; }
.csswatch-text-copy-btn { appearance: none; border: none; outline: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: transparent; cursor: pointer; color: #9ca3af; }
.csswatch-text-copy-btn:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; }
.csswatch-text-copy-btn.success { color: #22c55e; }
.csswatch-copy-tip { font-size: 12px; color: #60a5fa; opacity: 0; transition: opacity 0.15s ease; }
.csswatch-copy-tip.show { opacity: 1; }
.csswatch-text-body { font-size: 12px; color: #e5e7eb; background: #0b1324; padding: 8px; border: 1px solid #334155; border-radius: 6px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; }
.csswatch-panel.sidebar .csswatch-text-content.has-text { display: block; }

/* 侧栏停靠：全高、固定在左/右侧，可切换 */
.csswatch-panel.sidebar {
  top: 0;
  bottom: 0;
  height: 100vh;
  max-height: 100vh;
  width: 420px;
  max-width: 420px;
  border-radius: 0;
}
.csswatch-panel.sidebar.left { left: 0; right: auto; }
.csswatch-panel.sidebar.right { right: 0; left: auto; }
.csswatch-panel.sidebar .csswatch-panel-body {
  max-height: 100vh;
}

/* 面板内鼠标光标使用默认样式，覆盖页面级 crosshair */
.csswatch-panel { cursor: default; }

/* 复制成功提示（面板底部居中） */
.csswatch-copy-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  background: rgba(40, 160, 80, 0.95);
  color: #fff;
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease-out;
}
.csswatch-copy-toast.show { opacity: 1; }

/* 资源模块样式 */
.csswatch-resources { display: none; margin-top: 12px; }
.csswatch-resources.has-resources { display: block; }
.csswatch-res-title { font-size: 12px; color: #9ca3af; margin-bottom: 6px; }
.csswatch-res-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.csswatch-res-item { display: flex; gap: 8px; align-items: center; background: #0b1324; border: 1px solid #334155; border-radius: 6px; padding: 6px; }
.csswatch-res-thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: #111827; display: flex; align-items: center; justify-content: center; }
.csswatch-res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 48px; max-height: 48px; }
.csswatch-res-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.csswatch-res-svg svg { width: 100%; height: 100%; max-width: 48px; max-height: 48px; }
.csswatch-res-meta { display: flex; flex-direction: column; gap: 2px; }
.csswatch-res-origin { font-size: 12px; color: #9ca3af; }
.csswatch-res-meta { min-width: 0; flex: 1 1 auto; }
.csswatch-res-name { max-width: 240px; font-size: 12px; color: #e5e7eb; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csswatch-res-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.csswatch-res-download { font-size: 12px; color: #60a5fa; text-decoration: none; padding: 4px 8px; border-radius: 6px; background: transparent; border: 1px solid #334155; }
.csswatch-res-download:hover { background: rgba(255,255,255,0.06); }
.csswatch-panel:not(.sidebar) .csswatch-resources { display: none; }

/* 头部开关（参考截图样式） */
.csswatch-toggle { display: flex; align-items: center; gap: 8px; }
.csswatch-toggle input { display: none; }
.csswatch-toggle .switch {
  position: relative; width: 36px; height: 20px; border-radius: 20px;
  background: #e5e7eb; transition: background 0.2s ease; cursor: pointer;
}
.csswatch-toggle .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.csswatch-toggle input:checked + .switch { background: #8b5cf6; }
.csswatch-toggle input:checked + .switch::after { transform: translateX(16px); }
.csswatch-toggle .text { font-size: 12px; color: #e5e7eb; user-select: none; }

/* 顶部工具条样式（参考截图） */
.csswatch-toolbar {
  position: fixed;
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0;
  z-index: 1000002; /* 高于 .csswatch-panel 的 1000000 */
}
.csswatch-toolbar-group { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f2f3f6; border-radius: 16px; }
.csswatch-toolbar-group.left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.csswatch-toolbar-group.right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.csswatch-pill {
  appearance: none;
  border: none;
  outline: none;
  padding: 8px;
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.csswatch-pill:hover { background: #eef1f6; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.csswatch-pill:active { transform: translateY(1px); }
.csswatch-pill.active { background: #e0f0ff; color: #0b5bd3; }
.csswatch-pill .icon { display: inline-flex; width: 14px; height: 14px; }
.csswatch-pill .text { display: none; }
.csswatch-icon-svg { width: 14px; height: 14px; display: block; stroke: currentColor; }

/* 组件预览样式 */
.csswatch-component-preview { background: #0b1324; padding: 8px; border: 1px solid #334155; border-radius: 6px; max-height: 300px; overflow: auto; }
.csswatch-component-preview-inner {
  pointer-events: none;
  /* 渲染真实 DOM：不强制代码字体与换行 */
}
.csswatch-component-preview-frame {
  width: 100%;
  border: 0;
  display: block;
}
.csswatch-icon-label { margin-left: 6px; font-size: 12px; color: inherit; }

/* 浮动模式隐藏组件模块（仅侧栏显示） */
.csswatch-panel:not(.sidebar) .csswatch-html-actions { display: none; }
/* 未选中元素时隐藏组件模块（侧栏/浮动均适用） */
.csswatch-panel.no-selection .csswatch-html-actions { display: none; }

/* 组件预览下方按钮样式 */
.csswatch-component-actions { width: 380px; margin-top: 12px; }
.csswatch-component-copy-btn { width: 100%; background: #00AC6B; color: #fff; }
.csswatch-component-copy-btn:hover { filter: brightness(0.95); }

/* DOM Tree（仅浮动模式） */
.csswatch-dom-tree {
  position: relative;
  margin-bottom: 12px;
  border-bottom: 1px solid #334155;
  padding-bottom: 10px;
  padding-right: 30px; /* 为右侧箭头按钮留出空间 */
}
.csswatch-panel.sidebar .csswatch-dom-tree { display: none; }

/* DOM Tree Header 容器 */
.csswatch-dom-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.csswatch-dom-parent {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 0;
}

/* DOM Tree 控制按钮容器 */
.csswatch-dom-controls {
  position: absolute;
  top: 5px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 箭头按钮样式 */
.csswatch-arrow-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.csswatch-arrow-btn svg {
  width: 12px;
  height: 12px;
  color: #9ca3af;
  transition: color 0.15s ease;
}

.csswatch-arrow-btn:hover svg {
  color: #e5e7eb;
}

/* 按键激活状态 */
.csswatch-arrow-btn.active svg {
  color: #60a5fa;
}

.csswatch-dom-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.csswatch-dom-item {
  font-size: 13px;
  line-height: 20px;
  padding-left: 12px;
  /* 移除左侧边框，改用前缀符号 ↳ 表示层级 */
  cursor: pointer;
  color: #e5e7eb;
}
.csswatch-dom-item:hover { background: rgba(255,255,255,0.05); }
.csswatch-dom-item.selected {
  color: #4adc71;
  /* 不再使用左侧边框颜色 */
}

/* 操作提示信息样式 */
.css-copy {
  margin: 16px 0 8px 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #9ca3af;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.css-copy svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: #60a5fa;
}

.css-copy .margin-right {
  margin-right: 6px;
}