/* InlineNote (wc-feedback-inline-note) — in- 命名空间隔离
   主题：基于 --dt-* 变量；tint 底色随 tone 的语义色派生。 */

.in-scope {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dt-radius-md, 9px);
  border: 1px solid var(--in-border, var(--dt-border-subtle, rgba(255, 255, 255, 0.08)));
  background: var(--in-bg, var(--dt-bg-surface, #0f172a));
}

.in-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--in-fg, var(--dt-text-secondary, #94a3b8));
}

.in-body { min-width: 0; }

.in-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--in-fg, var(--dt-text-primary, #e2e8f0));
}

.in-detail {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dt-text-muted, #64748b);
}

/* 三态：语义色经 color-mix 派生淡染底与边 */
.in-tone-info {
  --in-fg: var(--dt-info, #4f8cff);
  --in-bg: color-mix(in srgb, var(--dt-info, #4f8cff) 8%, transparent);
  --in-border: color-mix(in srgb, var(--dt-info, #4f8cff) 30%, transparent);
}

.in-tone-success {
  --in-fg: var(--dt-success, #22c55e);
  --in-bg: color-mix(in srgb, var(--dt-success, #22c55e) 9%, transparent);
  --in-border: color-mix(in srgb, var(--dt-success, #22c55e) 32%, transparent);
}

.in-tone-warning {
  --in-fg: var(--dt-warning, #f59e0b);
  --in-bg: color-mix(in srgb, var(--dt-warning, #f59e0b) 9%, transparent);
  --in-border: color-mix(in srgb, var(--dt-warning, #f59e0b) 32%, transparent);
}