/* Video Downloader contextual panel — tokens come from landings.css (:host). */

.vdl-panel {
  font-family: var(--font-body);
  color: var(--ink-900);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ---------- insight card ---------- */
.vdl-insight {
  border: 1px solid var(--line-panel, #E8EAF4);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.vdl-insight-head { display: flex; align-items: center; gap: 12px; }
.vdl-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, #C9D3F5, #8FA2EC);
  object-fit: cover; flex-shrink: 0; display: block;
}
.vdl-author-name { font-weight: var(--fw-semi); font-size: var(--text-sm); color: var(--ink-900); }
.vdl-author-meta { font-size: var(--text-xs); color: var(--ink-300); margin-top: 2px; }
.vdl-in-badge { margin-left: auto; width: 22px; height: 22px; border-radius: 4px; }
.vdl-divider { height: 1px; background: var(--line-100); margin: 13px 0; }

.vdl-statline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vdl-reactions { display: inline-flex; align-items: center; }
.vdl-reactions img {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  border: 2px solid var(--surface-0); display: block; background: var(--surface-0);
}
.vdl-reactions img + img { margin-left: -9px; }
.vdl-likes {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 26px; line-height: 1;
  color: var(--ink-900);
}
.vdl-unit { font-size: var(--text-sm); color: var(--ink-400); font-weight: var(--fw-medium); }
.vdl-sep { color: var(--ink-200); }
.vdl-comments {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--ink-400); font-weight: var(--fw-medium);
}

/* ---------- heading ---------- */
.vdl-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}
.vdl-subcopy {
  font-size: var(--text-sm); color: var(--ink-400);
  line-height: var(--lh-loose); margin: 0;
}

/* ---------- composer ---------- */
.vdl-composer {
  border: 1px solid var(--line-panel, #E8EAF4);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.vdl-composer-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-25);
  border-bottom: 1px solid var(--line-panel, #E8EAF4);
  padding: 10px 14px;
}
.vdl-composer-bar .vdl-mark { width: 16px; height: 16px; border-radius: 4px; display: block; }
.vdl-composer-label {
  font-family: var(--font-feature);
  font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-600);
}
.vdl-composer-body { padding: 14px 16px 18px; position: relative; }
.vdl-caption {
  font-size: var(--text-sm); line-height: var(--lh-loose);
  color: var(--ink-700); margin: 0; white-space: pre-line;
}
.vdl-caret {
  display: inline-block; width: 2px; height: 14px; background: var(--brand-600);
  vertical-align: -2px; margin-left: 2px;
  animation: vdl-blink 1.1s steps(2) infinite;
}
@keyframes vdl-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
.vdl-blurwrap { position: relative; margin-top: 10px; }
.vdl-blurline {
  height: 11px; border-radius: 6px; background: #C9D3EE; opacity: 0.65;
  margin-top: 9px; filter: blur(2.5px);
}
.vdl-blurline.w85 { width: 85%; }
.vdl-blurline.w65 { width: 65%; }
.vdl-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9));
}
.vdl-lockrow {
  position: absolute; right: 12px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-0); border: 1px solid var(--line-200);
  border-radius: var(--radius-full); padding: 5px 11px;
  font-size: 11px; font-weight: var(--fw-semi); color: var(--ink-400);
}

/* ---------- CTAs ---------- */
.vdl-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px;
  border-radius: var(--radius-md);
  background: var(--brand-600); color: #fff;
  font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--text-md);
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,28,80,0.16), 0 4px 12px rgba(53,86,230,0.26);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.vdl-cta:hover { background: var(--brand-700); box-shadow: 0 1px 2px rgba(20,28,80,0.18), 0 6px 16px rgba(53,86,230,0.30); }

.vdl-download {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--ink-400); cursor: pointer; padding: 4px;
  background: none; border: none; font-family: var(--font-body);
  transition: color 150ms ease-out;
}
.vdl-download:hover { color: var(--ink-900); }

.vdl-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--text-xs); color: var(--ink-300);
}
.vdl-stars { color: #F5B301; letter-spacing: 1px; }

/* ---------- fallback (post meta absent) ---------- */
.vdl-fallback-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--brand-600); cursor: pointer; padding: 4px;
  background: none; border: none; font-family: var(--font-body);
  text-decoration: none;
}
.vdl-fallback-cta:hover { text-decoration: underline; }

/* ---------- root grid : panel + built-in player ---------- */
.vdl-root {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  gap: 28px;
  align-items: start;
  width: 100%;
  margin-top: 24px;
}
.vdl-root.no-player { grid-template-columns: 1fr; }
.vdl-video-wrap {
  position: relative;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.vdl-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
}
@media (max-width: 900px) {
  .vdl-root { grid-template-columns: 1fr; }
  .vdl-video-wrap { order: -1; min-height: 220px; }
}