/* ===================================================================
   SQUIDDLR D'INK — anchored contextual popover component
   Reusable across Content Studio pages (Lectures, Slides, Tools).
   Distinct from #squiddlr-helper (the bottom-left floating bubble):
   D'Ink popovers anchor NEAR a specific action/field and are triggered
   programmatically (on click, on hover, or on a UI event) rather than
   only via the floating mascot's own click-cycle.
   Visual language matches .squiddlr-tip / #squiddlr-bubble: ink-toned
   bubble, teal-700 border, teal-400 accents — so it reads as the same
   character, just placed contextually instead of docked in a corner.
   =================================================================== */

.dink-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The small D'Ink trigger icon — a mini mascot badge, sits inline next
   to a label, button, or field the same way .squiddlr-tip does, but
   opens a richer popover (title + body + optional actions) instead of
   a plain hover tooltip. */
.dink-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(79,209,197,0.14); border: 1px solid var(--teal-700);
  cursor: pointer; margin-left: 6px; padding: 0;
  transition: transform var(--transition), filter var(--transition);
  flex: none;
}
.dink-trigger img {
  height: 20px; width: auto; display: block;
  filter: drop-shadow(0 1px 3px rgba(79,209,197,0.4));
}
.dink-trigger:hover { transform: scale(1.1); filter: brightness(1.15); }
.dink-trigger.is-open { background: rgba(79,209,197,0.26); }

/* A label row that hosts a D'Ink trigger badge beside its label text.
   Squiddlr's base `label` is display:block, so a trailing .dink-anchor
   would otherwise drop onto its own line; this flex row keeps the '?'
   inline with the label and preserves the label's vertical rhythm. */
.field-tip {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; margin-bottom: 5px;
}
.field-tip > label { margin: 0; display: inline; }

/* Declarative help-note sources. .dink-note is a standalone info box
   that DInk.init() converts in place into .dink-note-row (label + '?'
   badge); it starts hidden so there is no flash of the old full-width
   note before JS runs. .dink-tip is an inline badge source (HTML body)
   converted to a .dink-anchor. The app is JS-driven, so hiding these
   until init is consistent with the rest of the admin surface. */
.dink-note { display: none; }

/* The compact row a .dink-note becomes after DInk.init(). A muted label
   (optional) + the D'Ink '?' badge, replacing the old full-width .note
   box so every page uses the same mascot-popover affordance. */
.dink-note-row {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 12px;
  font-size: 0.88em; color: var(--fog-300);
}
.dink-note-label {
  font-family: var(--f-display);
  letter-spacing: 0.02em;
}

/* Popover body typography: wrap tip text in <p> for consistent spacing,
   and style inline <code> (e.g. CSV header specs) so monospace snippets
   read cleanly inside the dark bubble without overflowing. */
.dink-popover-body p { margin: 0 0 8px; }
.dink-popover-body p:last-child { margin-bottom: 0; }
.dink-popover-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 2px 5px;
  overflow-wrap: anywhere;
}

/* When a D'Ink trigger shows a glyph (e.g. '?') instead of the mascot
   image — used by inline field/heading help badges. The mascot still
   appears in the popover header; this just keeps the trigger compact and
   consistent with the old .squiddlr-tip '?' badges it replaces. */
.dink-trigger-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.82em;
  color: var(--teal-400);
  line-height: 1;
  user-select: none;
}

/* The popover bubble itself. Positioned via inline style (top/left or
   data-placement) set by dink.js at open-time so it can anchor above,
   below, left, or right of the trigger depending on viewport space. */
.dink-popover {
  position: absolute; z-index: 300; width: 300px; max-width: min(300px, 86vw);
  background: var(--ink-100); color: var(--fog-100);
  border: 1px solid var(--teal-700); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  font-size: 0.87em; line-height: 1.5;
  opacity: 0; transform: translateY(4px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.dink-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }

.dink-popover[data-placement="top"]    { bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px) scale(0.98); }
.dink-popover[data-placement="top"].is-open    { transform: translate(-50%, 0) scale(1); }
.dink-popover[data-placement="bottom"] { top: calc(100% + 12px); left: 50%; transform: translate(-50%, -4px) scale(0.98); }
.dink-popover[data-placement="bottom"].is-open { transform: translate(-50%, 0) scale(1); }
.dink-popover[data-placement="left"]   { right: calc(100% + 12px); top: 50%; transform: translate(4px, -50%) scale(0.98); }
.dink-popover[data-placement="left"].is-open   { transform: translate(0, -50%) scale(1); }
.dink-popover[data-placement="right"]  { left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%) scale(0.98); }
.dink-popover[data-placement="right"].is-open  { transform: translate(0, -50%) scale(1); }

/* Speech-bubble tail, direction matches placement. */
.dink-popover::after {
  content: ''; position: absolute; border-style: solid;
}
.dink-popover[data-placement="top"]::after {
  bottom: -8px; left: 50%; margin-left: -8px;
  border-width: 8px 8px 0; border-color: var(--teal-700) transparent transparent;
}
.dink-popover[data-placement="bottom"]::after {
  top: -8px; left: 50%; margin-left: -8px;
  border-width: 0 8px 8px; border-color: transparent transparent var(--teal-700);
}
.dink-popover[data-placement="left"]::after {
  right: -8px; top: 50%; margin-top: -8px;
  border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--teal-700);
}
.dink-popover[data-placement="right"]::after {
  left: -8px; top: 50%; margin-top: -8px;
  border-width: 8px 8px 8px 0; border-color: transparent var(--teal-700) transparent transparent;
}

.dink-popover-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.dink-popover-head img { height: 22px; width: auto; flex: none; }
.dink-popover-head strong {
  font-family: var(--f-script); font-size: 1.15em; color: var(--teal-400);
  font-weight: 400; line-height: 1;
}
.dink-popover-close {
  margin-left: auto; background: transparent; border: none; color: var(--fog-300);
  cursor: pointer; font-size: 1em; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.dink-popover-close:hover { color: var(--fog-100); background: rgba(255,255,255,0.06); }

.dink-popover-body { color: var(--fog-100); }
.dink-popover-body a { color: var(--teal-400); }

.dink-popover-warn {
  margin-top: 10px; display: flex; gap: 8px; align-items: flex-start;
  background: var(--warn-bg); border: 1px solid var(--amber-400); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 0.92em; color: var(--amber-400);
}

.dink-popover-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

/* ---------------------------------------------------------------------
   D'Ink splash — a small playful ink-writing burst triggered on Generate.
   Renders a handful of ink droplets/comma-shapes that spring out from
   the trigger and fade, evoking a squid inking away + a quill scribbling.
   Purely decorative; safe to no-op if reduced-motion is preferred.
   --------------------------------------------------------------------- */
.dink-splash {
  position: absolute; inset: 0; pointer-events: none; overflow: visible;
  z-index: 5;
}
.dink-splash .drop {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
  border-radius: 60% 60% 60% 0;
  background: var(--teal-400);
  opacity: 0;
  animation: dink-drop-fly 700ms ease-out forwards;
}
@keyframes dink-drop-fly {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(var(--dx, -40px), var(--dy, -40px)) rotate(200deg) scale(1); }
}
.dink-splash .scribble {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 14px;
  transform: translate(-50%, -50%);
  border-bottom: 2px solid var(--teal-400);
  border-radius: 50%;
  opacity: 0;
  animation: dink-scribble 700ms ease-in-out forwards;
}
@keyframes dink-scribble {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  15%  { opacity: 0.85; }
  80%  { opacity: 0.85; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dink-splash .drop, .dink-splash .scribble { animation: none; display: none; }
}