/* ============================================================
   webclipper.css — Web Clipper install modal + draggable
   bookmarklet chip. Light + dark, built on the shared tokens.
   ============================================================ */

.wc-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 11, 26, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 16px 24px;
}

.wc-modal {
  width: 480px; max-width: calc(100vw - 32px); max-height: 82vh;
}

.wc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.wc-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text);
}
.wc-close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-ctl);
  border: none; background: transparent; color: var(--text-faint);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.wc-close:hover { background: var(--bg-hover); color: var(--text); }

.wc-body {
  padding: 18px 22px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}

.wc-intro {
  font-size: 14px; line-height: 1.55; color: var(--text-light); margin: 0;
}

/* the draggable bookmarklet pill */
.wc-chip-row {
  display: flex; justify-content: center;
  padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: 14px;
  background: var(--bg-callout);
}
.wc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; user-select: none;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(91, 91, 214, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.wc-chip:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(91, 91, 214, 0.42); }
.wc-chip:active { cursor: grabbing; transform: translateY(0) scale(0.98); }

.wc-hint {
  font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: -4px;
}

.wc-copy {
  align-self: center;
  padding: 8px 16px; border-radius: var(--radius-ctl);
  border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.wc-copy:hover { border-color: var(--accent); color: var(--accent); }

.wc-steps {
  margin: 2px 0 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-light);
}
.wc-steps li { padding-left: 2px; }
.wc-steps b { color: var(--text); font-weight: 600; }

/* ---- dark theme tweaks ---- */
html[data-theme="dark"] .wc-overlay { background: rgba(0, 0, 0, 0.58); }
html[data-theme="dark"] .wc-chip {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .wc-chip:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .wc-copy:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

@media (max-width: 520px) {
  .wc-overlay { padding-top: 60px; }
  .wc-modal { width: calc(100vw - 24px); }
}