/* Sorbet Integrator : admin-specific components.
   Supplements static/dashboard.css (the shared v2 "Editorial Calm" brand —
   Space Grotesk + IBM Plex Mono, warm paper, navy ink, single pink accent),
   copied verbatim from sorbet/analytics. Everything here is written in that
   file's token language (--ink / --paper / --rule / --pink / --f-mono …) and
   scoped under .v2-root, so re-copying dashboard.css from analytics stays a
   drop-in. Nothing below redefines a token. */

/* — Form grid — */
.v2-root .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.v2-root .ig-grid .ig-full { grid-column: 1 / -1; }
@media (max-width: 820px) { .v2-root .ig-grid { grid-template-columns: 1fr; } }
.v2-root .ig-field { display: flex; flex-direction: column; gap: 7px; }
.v2-root .ig-hint { font-family: var(--f-sans); font-size: 11px; color: var(--ink-3);
  font-weight: 400; letter-spacing: 0; text-transform: none; }
.v2-root .ig-label a { color: var(--pink); font-weight: 500; text-transform: none;
  letter-spacing: 0; font-family: var(--f-sans); font-size: 11px; }
.v2-root textarea.v2-input { min-height: 92px; resize: vertical;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.55; }
/* Source/target-conditional fields. Hidden by default; JS sets an explicit
   display to reveal (clearing it would just fall back to this rule). */
.v2-root .src-only, .v2-root .tgt-only { display: none; }

/* — Filter/action row above a table — */
.v2-root .ig-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 18px; }
.v2-root .ig-filters .ig-field { min-width: 190px; }
.v2-root .ig-filters .v2-input, .v2-root .ig-filters .v2-select { padding: 9px 12px; font-size: 13px; }
.v2-root .ig-filters.is-tight .ig-field { min-width: 110px; }

/* — Source / destination chips — */
.v2-root .ig-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; }
.v2-root .ig-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule-strong); flex-shrink: 0; }
.v2-root .ig-chip.src-wordpress::before { background: #5B8CFF; }
.v2-root .ig-chip.src-google_ads::before { background: var(--warn); }
.v2-root .ig-chip.src-meta_ads::before { background: #7D6CFF; }
.v2-root .ig-chip.src-wix::before { background: var(--teal); }
.v2-root .ig-chip.src-website::before { background: var(--ink-3); }
.v2-root .ig-chip.tgt-brevo::before { background: var(--success); }
.v2-root .ig-chip.tgt-sorbet::before { background: var(--pink); }
.v2-root .ig-arrow { color: var(--ink-3); font-family: var(--f-mono); margin: 0 3px; }

/* — Copyable URL row — */
.v2-root .ig-url { display: flex; gap: 7px; align-items: center; margin: 3px 0; }
.v2-root .ig-url-k { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.v2-root .ig-url code { background: var(--paper); border: 1px solid var(--rule);
  padding: 3px 8px; border-radius: 6px; max-width: 330px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono);
  font-size: 11.5px; color: var(--ink); }
.v2-root .ig-copy { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); padding: 3px 7px; border-radius: 5px;
  border: 1px solid transparent; transition: color .12s ease, border-color .12s ease; }
.v2-root .ig-copy:hover { color: var(--pink); border-color: var(--rule); }

/* — Table scroll container —
   Webhook URLs make these tables wider than the content column. They scroll
   inside their own card; the page itself must never scroll sideways. */
.v2-root .ig-tablewrap { overflow-x: auto; }
.v2-root .ig-tablewrap .v2-table { min-width: 620px; }
.v2-root .v2-content { overflow-x: hidden; }

/* Wide screens: the left rail is the nav, so the tab strip stays hidden.
   Declared BEFORE the media query below — same specificity, so source order is
   what decides, and a later `display:none` would otherwise always win. */
.v2-root .ig-nav-narrow { display: none; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.v2-root .ig-nav-narrow .ig-navbtn { font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px;
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2);
  background: var(--surface); transition: border-color .12s ease, color .12s ease; }
.v2-root .ig-nav-narrow .ig-navbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.v2-root .ig-nav-narrow .ig-navbtn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Narrow screens: give the content column its width back by collapsing the rail
   to icons (reusing dashboard.css's collapsed look). That hides the rail's
   links, so the tab strip above has to take over as the nav — without it there
   is no way to leave the Flows tab. */
@media (max-width: 1000px) {
  .v2-root .v2-left { width: 62px; }
  .v2-root .v2-left .v2-left-label, .v2-root .v2-left .v2-left-rows { display: none; }
  .v2-root .v2-left .v2-left-head { justify-content: center; padding: 0; }
  .v2-root .v2-left .v2-left-section { padding: 15px 0 0; margin: 15px 0; }
  .v2-root .v2-left .v2-left-section:first-of-type { margin-top: 0; padding-top: 0; }
  .v2-root .v2-pad { padding: 28px 20px 48px; }
  .v2-root .ig-nav-narrow { display: flex; }
  .v2-root .ig-grid { grid-template-columns: 1fr; }
}

/* — Row actions — */
.v2-root .ig-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-root .ig-mono { font-family: var(--f-mono); font-size: 11.5px; }
.v2-root .ig-muted { color: var(--ink-3); }
.v2-root .v2-table td .ig-sub { font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3); margin-top: 4px; }

/* — Payload / code blocks — */
.v2-root .ig-payload { margin: 6px 0 0; max-width: 460px; white-space: pre-wrap;
  word-break: break-word; font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 7px; padding: 10px 12px; }
.v2-root details > summary { cursor: pointer; font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; list-style: none; }
.v2-root details > summary::-webkit-details-marker { display: none; }
.v2-root details > summary::before { content: '+ '; color: var(--pink); }
.v2-root details[open] > summary::before { content: '– '; }
.v2-root details > summary:hover { color: var(--ink); }

/* — "Created" result box — */
.v2-root .ig-created { background: var(--paper); border: 1px solid var(--rule);
  border-left: 2px solid var(--pink); border-radius: 8px; padding: 16px 18px; margin-top: 18px; }
.v2-root .ig-created b { font-weight: 500; }

/* — Prose (Setup tab) — */
.v2-root .ig-prose { font-size: 13.5px; color: var(--ink-2); max-width: 78ch; }
.v2-root .ig-prose h3 { font-family: var(--f-sans); font-size: 15px; font-weight: 500;
  color: var(--ink); margin: 24px 0 6px; letter-spacing: -0.01em; }
.v2-root .ig-prose h3:first-child { margin-top: 0; }
.v2-root .ig-prose p { margin: 0 0 4px; }
.v2-root .ig-prose code { font-family: var(--f-mono); font-size: 12px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.v2-root .ig-prose b { color: var(--ink); font-weight: 500; }

/* — Signed-out gate — */
.v2-root .ig-gate { display: grid; place-items: center; min-height: 58vh; text-align: center; }
.v2-root .ig-gate-inner { max-width: 42ch; }
.v2-root .ig-gate h1 { font-family: var(--f-sans); font-size: 34px; font-weight: 500;
  letter-spacing: -0.025em; margin: 12px 0 10px; color: var(--ink); }
.v2-root .ig-gate h1 em { font-style: italic; font-weight: 400; color: var(--pink); }
.v2-root .ig-gate p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 22px; }

/* — Top-rail tenant tag — */
.v2-root .ig-tenant { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ── Field-map editor: two columns, one row per field ──────────────────────
   Replaces a raw JSON textarea. The JSON was the honest shape of the data but a
   hostile way to type it: one stray comma and the whole flow fails to save. */
.v2-root .ig-map { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.v2-root .ig-map-head, .v2-root .ig-map-row { display: grid;
  grid-template-columns: 1fr 24px 1fr 34px; align-items: center; gap: 8px;
  padding: 8px 10px; }
.v2-root .ig-map-head { background: var(--paper); border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); padding-top: 9px; padding-bottom: 9px; }
.v2-root .ig-map-row { border-bottom: 1px solid var(--rule); background: var(--surface); }
.v2-root .ig-map-row:last-child { border-bottom: 0; }
.v2-root .ig-map-row input, .v2-root .ig-map-row select {
  width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px;
  background: var(--paper); font-family: var(--f-mono); font-size: 12px;
  color: var(--ink); outline: none; transition: border-color .12s ease; }
.v2-root .ig-map-row input:focus, .v2-root .ig-map-row select:focus { border-color: var(--ink); background: var(--surface); }
.v2-root .ig-map-arrow { text-align: center; color: var(--ink-3); font-family: var(--f-mono); font-size: 12px; }
.v2-root .ig-map-rm { width: 26px; height: 26px; border-radius: 6px; color: var(--ink-3);
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; transition: color .12s ease, background .12s ease; }
.v2-root .ig-map-rm:hover { color: var(--danger); background: var(--danger-light); }
.v2-root .ig-map-foot { display: flex; gap: 10px; align-items: center;
  padding: 9px 10px; background: var(--paper); border-top: 1px solid var(--rule); }
.v2-root .ig-map-add { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--pink); font-weight: 500; }
.v2-root .ig-map-add:hover { text-decoration: underline; }
.v2-root .ig-map-empty { padding: 14px 12px; color: var(--ink-3); font-size: 12.5px;
  background: var(--surface); }
.v2-root .ig-map-note { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.v2-root .ig-map-row.is-email input:first-child { border-left: 2px solid var(--pink); border-radius: 6px; }
/* An invalid target is silently ignored at delivery, so it has to be loud here. */
.v2-root .ig-map-row.is-bad input[data-k="target"] { border-color: var(--danger); background: var(--danger-light); }
.v2-root .ig-map-bad { font-size: 11.5px; color: var(--danger); padding: 8px 10px;
  background: var(--danger-light); border-top: 1px solid var(--rule); }

/* — Connected-account picker — */
.v2-root .ig-acct-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px dashed var(--rule-strong); border-radius: 8px;
  background: var(--paper); font-size: 12.5px; color: var(--ink-2); }
.v2-root .ig-acct-empty a { color: var(--pink); font-weight: 500; }
.v2-root .ig-warn { font-size: 12px; color: #9A6420; background: var(--warn-light);
  border: 1px solid rgba(217,145,58,0.28); border-radius: 6px; padding: 7px 10px;
  margin-top: 7px; }

/* ══ Assistant: a 40% panel beside the app, mirroring sorbet/mcp's split ══
   Floating bubble + panel since 2026-07-20, matching the CRM (which matches
   what csi/dashboard renders): the 40% column paid nearly half the viewport
   for a panel most sessions never used, and the flow form got it back.

   Launcher idle state is FULLY TRANSPARENT on purpose — the approved look is
   the shadow's halo over untouched content, not a fill (see crm.css for the
   full story of how CSI arrives at this via a specificity accident). The
   button.* prefixes beat the shared .v2-root button reset (0,1,1) that would
   otherwise strip the hover/open chrome. */
.v2-root .v2-body { display: flex; }
button.ig-cw-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%;
  background: transparent; color: var(--ink); border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(16, 29, 66, .22);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
button.ig-cw-launcher:hover {
  background: var(--pink-hover); color: #fff; transform: translateY(-1px);
}
button.ig-cw-launcher.is-open { background: var(--ink); color: #fff; }
button.ig-cw-launcher .ig-cw-ico-close { display: none; }
button.ig-cw-launcher.is-open .ig-cw-ico-open { display: none; }
button.ig-cw-launcher.is-open .ig-cw-ico-close { display: block; }

.ig-cw-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16, 29, 66, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: ig-cw-fade .18s ease-out;
}
.v2-root .ig-chat {
  position: fixed; right: 24px; bottom: 88px; z-index: 1001;
  width: 460px; max-width: calc(100vw - 32px);
  height: 640px; max-height: calc(100vh - 120px);
  background: rgba(251, 248, 242, .68);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 29, 66, .26);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  animation: ig-cw-rise .16s ease-out;
}
@keyframes ig-cw-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ig-cw-fade { from { opacity: 0; } to { opacity: 1; } }
.v2-root .ig-chat.is-expanded {
  top: 3vh; bottom: 3vh; left: 7vw; right: 7vw;
  width: auto; height: 94vh; max-height: none; z-index: 1002;
  animation: ig-cw-fade .18s ease-out;
}
.v2-root .ig-chat.is-expanded .ig-chat-log,
.v2-root .ig-chat.is-expanded .ig-chat-input { width: 90%; margin-left: auto; margin-right: auto; }
.v2-root .ig-chat-head { display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--rule); flex: none;
  background: rgba(255, 255, 255, .55); }
.ig-cw-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
button.ig-cw-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--rule-strong);
  border-radius: 7px; color: var(--ink-2); background: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
button.ig-cw-icon:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-3); }
button.ig-cw-icon .ig-cw-ico-shrink { display: none; }
.ig-chat.is-expanded button.ig-cw-icon .ig-cw-ico-grow { display: none; }
.ig-chat.is-expanded button.ig-cw-icon .ig-cw-ico-shrink { display: block; }
.v2-root .ig-chat-badge { width: 26px; height: 26px; border-radius: 7px;
  background: var(--pink-light); border: 1px solid var(--rule); color: var(--pink);
  display: flex; align-items: center; justify-content: center; flex: none; }
.v2-root .ig-chat-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.v2-root .ig-chat-sub { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); margin-top: 2px; }
.v2-root .ig-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; }
.v2-root .ig-msg { font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; border-radius: 12px; padding: 9px 12px; max-width: 92%; }
.v2-root .ig-msg.rendered { white-space: normal; }
.v2-root .ig-msg.user { align-self: flex-end; background: var(--ink); color: #fff;
  border-bottom-right-radius: 4px; }
.v2-root .ig-msg.bot { align-self: flex-start; background: var(--paper);
  border: 1px solid var(--rule); color: var(--ink-2); border-bottom-left-radius: 4px; }
.v2-root .ig-msg.bot b { color: var(--ink); font-weight: 600; }
.v2-root .ig-msg.bot em { color: var(--ink-3); font-style: italic; }
.v2-root .ig-msg.bot code { font-family: var(--f-mono); font-size: 0.85em;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; }
.v2-root .ig-msg.bot pre { background: var(--ink); color: #e8e8ec; border-radius: 8px;
  padding: 10px 11px; overflow-x: auto; font-family: var(--f-mono); font-size: 0.82em; margin: 6px 0; }
.v2-root .ig-msg.bot ul { margin: 5px 0; padding-left: 18px; }
.v2-root .ig-msg.bot li { margin: 2px 0; }
.v2-root .ig-chat-note { margin-top: 8px; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.03em; color: var(--success); }
.v2-root .ig-dots { display: inline-block; color: var(--ink-3); letter-spacing: 0.15em;
  animation: ig-blink 1.2s infinite; }
@keyframes ig-blink { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.v2-root .ig-chat-input { display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--rule); align-items: flex-end; flex: none;
  background: rgba(255, 255, 255, .55); /* solid-ish base over the frosted panel */ }
.v2-root .ig-chat-input textarea { flex: 1; resize: none; background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 10px; padding: 9px 11px;
  font-family: var(--f-sans); font-size: 13px; line-height: 1.4; color: var(--ink);
  outline: none; max-height: 140px; }
.v2-root .ig-chat-input textarea:focus { border-color: var(--pink); }
.v2-root .ig-chat-send { padding: 9px 15px; border-radius: 10px; background: var(--ink);
  color: #fff; font-size: 13px; font-weight: 500; flex: none; }
.v2-root .ig-chat-send:hover { background: var(--pink); }
.v2-root .ig-chat-send:disabled { opacity: .45; cursor: default; }
.v2-root .ig-chat-off { padding: 16px; color: var(--ink-3); font-size: 12.5px; }

/* Narrow screens: a 460px panel inset 24px from both edges stops fitting, so
   it opens near-full-screen. The panel floats, so the form is never squeezed. */
@media (max-width: 560px) {
  .v2-root .ig-chat { right: 12px; left: 12px; bottom: 84px; width: auto;
    max-width: none; height: auto; top: 12px; max-height: none; }
  button.ig-cw-launcher { right: 16px; bottom: 16px; }
}