style.css

:root { --bg:#0b0c10; --card:#14161d; --text:#e8e8ea; --muted:#a7a7b2; --line:#242735; --accent:#6ea8fe; --leftW: 30%; --splitW: 6px; --labelW: 170px; --uiScale: 0.80; --btnOutline: rgba(255,255,255,0.10); --btnOutline2: rgba(255,255,255,0.06); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { overflow: clip; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  height: 100%;
  overflow: clip; /* no global page scroll */
  display: flex;
  flex-direction: column;
  /* NOTE: Do NOT use transform/zoom scaling here — it breaks CodeMirror cursor mapping. */
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.container { max-width: 1600px; margin: 0 auto; padding: 11px; }
.header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
/* Header uses full page width (no centered max-width). */
.header .container {
  max-width: none;
  width: 100%;
}
.headerBar {
  display: flex;
  align-items: flex-end; /* buttons sit closer to header bottom */
  gap: 12px;
}
.headerText { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.headerText h1 { margin: 0; }
.headerText p { margin: 0; }
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.toolbar button { 
  padding: 5px 10px; 
  min-height: 24px;
}
.grid { display:flex; gap: 12px; align-items: stretch; min-width: 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding: 11px; }
.panelRight { padding-top: 8px; }

/* main area should fill remaining viewport height */
#mainGrid {
  flex: 1 1 auto;
  min-height: 0; /* allow children to shrink for inner scroll */
  overflow: clip; /* panels handle their own scroll */
  contain: layout;
}
/* Use full available page width for workspace (like jsoneditoronline). */
#mainGrid.container {
  max-width: none;
  width: 100%;
}
h1 { margin: 6px 0 4px; font-size: 15px; }
h2 { margin: 6px 0 6px; font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 10px; }
.panelLeft, .panelRight { min-width: 0; min-height: 0; }
.panelLeft {
  /* Slightly tighter labels in Settings area */
  --labelW: 160px;
  flex: 0 0 var(--leftW);
  max-width: calc(100% - var(--splitW) - 24px - 360px); /* keep room for right panel */
  padding: 0;            /* padding moved to inner scroller */
  overflow: clip;        /* clip scrollbars to rounded corners */
  contain: layout paint;
}
/* Extra safety: even if JS clamp fails, don't let left panel collapse too far (desktop only). */
@media (min-width: 981px) {
  .panelLeft { min-width: 440px; }
}
.panelLeft .panelScroll{
  height: 100%;
  overflow: auto;
  padding: 11px;         /* same as .card default padding */
  scrollbar-color: rgba(232,232,234,0.28) transparent;
  scrollbar-width: thin;
}
.panelLeft .panelScroll::-webkit-scrollbar { width: 6px; height: 6px; }
.panelLeft .panelScroll::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
.panelLeft .panelScroll::-webkit-scrollbar-thumb { background: rgba(232,232,234,0.22); border-radius: 999px; border: 0; }
.panelLeft .panelScroll::-webkit-scrollbar-thumb:hover { background: rgba(232,232,234,0.32); }
.panelRight {
  overflow: clip; /* avoid double scroll with CodeMirror */
  display: flex;
  flex-direction: column;
  min-width: 360px; /* prevent width collapse during CodeMirror relayout (fold/unfold) */
  flex: 1 1 0;
  contain: layout paint;
}
.panelRight .editorBar,
.panelRight .jsonNav,
.panelRight .errors { flex: 0 0 auto; }
.panelLeft.dimmed {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.splitter {
  width: var(--splitW);
  flex: 0 0 var(--splitW);
  height: 100%;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: col-resize;
  user-select: none;
  position: relative;
}
.splitter::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}
.splitter:hover::after { background: rgba(110,168,254,0.35); }
.splitter.dragging::after { background: rgba(110,168,254,0.55); }
.row { display:flex; align-items:center; gap:8px; margin: 4px 0; min-width: 0; }
.row label { width: var(--labelW); color: var(--muted); font-size: 11px; flex-shrink: 0; }
.row input, .row select, .row textarea {
  flex: 1; padding: 5px 7px; border-radius: 10px; border:1px solid var(--line);
  background:#0f1117; color:var(--text);
  min-width: 0;
  scrollbar-color: rgba(232,232,234,0.22) transparent;
  scrollbar-width: thin;
}
.row textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.row textarea::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
.row textarea::-webkit-scrollbar-thumb { background: rgba(232,232,234,0.22); border-radius: 999px; border: 0; }
.row textarea::-webkit-scrollbar-thumb:hover { background: rgba(232,232,234,0.32); }
.row textarea::-webkit-resizer { background: transparent; }
.row select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23A7A7B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.row textarea { min-height: 64px; resize: vertical; }
.row input:focus,
.row select:focus,
.row textarea:focus {
  /* Match segmented control "selected" outline: crisp border, no outer glow/offset */
  outline: none;
  border-color: rgba(110,168,254,0.35);
  box-shadow: inset 0 0 0 2px rgba(110,168,254,0.55);
}

/* Make number inputs match the design (native spinners are hard to theme) */
.row input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.row input[type="number"]::-webkit-outer-spin-button,
.row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.row.sectionTitle { align-items: center; gap: 10px; }
.row.sectionTitle h2 { margin: 0; }
.spacer { flex: 1; }
.hint { color: var(--muted); font-size: 11px; white-space: nowrap; }
.commentHint { font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity: 0.9; }
.commentHint::before { content: ""; opacity: 0.9; }
.monoHint { font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity: 0.9; }
.hintRow .hint { flex: 1; white-space: normal; }
.hintLine { display: flex; align-items: center; gap: 6px; }
.hintLine .hint { flex: 1; white-space: normal; }
.hintCard .hintLine .hint { flex: 0 0 auto; }
.hintCard {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hintTitle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(232,232,234,0.82);
}
.hintCode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.hintCopyBtn {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 8px;
  font-size: 10px;
  opacity: 0.6;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hintCopyBtn:hover { opacity: 0.9; }
.hintCopyBtn svg { width: 12px; height: 12px; display: block; }
.targetingList { display: flex; flex-direction: column; gap: 0; }
.targetingItem { display: block; }
.targetingItem.targetingMulti {
  border-left: 3px solid var(--targetingColor);
  padding-left: 8px;
}
.targetingActions .fieldGroup { gap: 6px; }
.removeTargetBtn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; min-width: 24px; min-height: 24px; }
.targetingModeRow .segmented--sm {
  width: var(--targetingControlW);
  flex: 0 0 var(--targetingControlW);
}
.segmented--sm label { min-height: 24px; font-size: 10px; padding: 0 8px; }
.targetingModeRow { margin: 4px 0; }
.targetingActions button[data-action="add_targeting"] { width: var(--targetingControlW); }
.payloadJsonHint { display: none; font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity: 0.9; }
.payloadJsonHint::before { content: ""; }
.inappCard.payloadIsJson .payloadJsonHint { display: inline; }
.inappCard textarea[data-f="payload"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
}
.actions { justify-content:flex-end; }
button {
  padding: 5px 10px; 
  border-radius: 10px; 
  border: 1px solid var(--btnOutline);
  /* Subtle always-visible outline so buttons read as clickable */
  box-shadow: inset 0 0 0 1px var(--btnOutline2);
  background: #0f1117; 
  color: var(--text); 
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.primary { 
  background: rgba(110,168,254,0.15); 
  border-color: rgba(110,168,254,0.35); 
}
button.primary:hover {
  background: rgba(110,168,254,0.22);
  border-color: rgba(110,168,254,0.45);
}
button.ghost { 
  background: transparent; 
}
button.danger { 
  border-color: rgba(255, 154, 162, 0.35); 
  background: rgba(255, 154, 162, 0.10); 
}
button.danger.ghost { 
  background: rgba(255, 154, 162, 0.08); 
}
button:active { 
  transform: translateY(1px); 
}
button:focus-visible { 
  outline: 2px solid rgba(110,168,254,0.45); 
  outline-offset: 2px; 
}
button:hover { 
  border-color: rgba(110,168,254,0.35); 
  background: rgba(110,168,254,0.08); 
}
button:disabled,
button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}
button.danger:hover { 
  border-color: rgba(255, 154, 162, 0.55); 
  background: rgba(255, 154, 162, 0.16); 
}
.divider { height:1px; background:var(--line); margin: 10px 0; }
.code { background:#0f1117; border:1px solid var(--line); border-radius: 14px; padding: 10px; overflow:hidden; min-height: 540px; min-width: 0; }
.codeEditor {
  width: 100%;
  height: 100%;
  min-height: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text);
  padding: 0 !important;
  overflow: clip;
  position: relative;
  flex: 1 1 auto; /* fill remaining right panel height */
}

/* scrollbar (Cursor-like, consistent with design) */
.codeEditor .CodeMirror,
.codeEditor .CodeMirror-scroll,
.codeEditor .CodeMirror-sizer,
.codeEditor .CodeMirror-vscrollbar,
.codeEditor .CodeMirror-hscrollbar {
  scrollbar-color: rgba(232,232,234,0.30) transparent !important;
  scrollbar-width: thin !important;
}
.codeEditor .CodeMirror::-webkit-scrollbar,
.codeEditor .CodeMirror-scroll::-webkit-scrollbar,
.codeEditor .CodeMirror-sizer::-webkit-scrollbar,
.codeEditor .CodeMirror-vscrollbar::-webkit-scrollbar,
.codeEditor .CodeMirror-hscrollbar::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.codeEditor .CodeMirror::-webkit-scrollbar-track,
.codeEditor .CodeMirror-scroll::-webkit-scrollbar-track,
.codeEditor .CodeMirror-sizer::-webkit-scrollbar-track,
.codeEditor .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.codeEditor .CodeMirror-hscrollbar::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px !important;
}
.codeEditor .CodeMirror::-webkit-scrollbar-thumb,
.codeEditor .CodeMirror-scroll::-webkit-scrollbar-thumb,
.codeEditor .CodeMirror-sizer::-webkit-scrollbar-thumb,
.codeEditor .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.codeEditor .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
  background: rgba(232,232,234,0.24) !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.codeEditor .CodeMirror::-webkit-scrollbar-thumb:hover,
.codeEditor .CodeMirror-scroll::-webkit-scrollbar-thumb:hover,
.codeEditor .CodeMirror-sizer::-webkit-scrollbar-thumb:hover,
.codeEditor .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.codeEditor .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(232,232,234,0.34) !important;
}

/* CodeMirror theme overrides (match our dark UI) */
.codeEditor .CodeMirror {
  height: 100%;
  width: 100%;
  min-width: 100%;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
  /* Clip CM internal scrollbars/fillers to rounded container */
  border-radius: 14px;
  overflow: hidden;
}
.codeEditor .CodeMirror-scroll { width: 100% !important; }
/* Keep layout stable when scrollbars appear/disappear (fold/unfold) */
/* Avoid forcing scrollbars / tiny overflows that create horizontal scroll. */
.codeEditor .CodeMirror-scroll { scrollbar-gutter: auto; }
.codeEditor .CodeMirror-sizer {
  min-width: 100% !important;
  /* CodeMirror default: `border-right: 50px solid transparent` on the sizer.
     In our styling it turns into a small "phantom" horizontal scroll area
     (you can scroll a bit even when lines fit), which looks like an empty zone. */
  border-right: 0 !important;
}
.codeEditor .CodeMirror-scroll { padding: 10px 10px 10px 8px; }
/* Slightly tighter gap between gutter and code */
.codeEditor .CodeMirror pre.CodeMirror-line,
.codeEditor .CodeMirror pre.CodeMirror-line-like {
  padding: 0 3px;
}
.codeEditor .CodeMirror-scrollbar-filler,
.codeEditor .CodeMirror-gutter-filler {
  background: transparent !important; /* no corner background */
  border-bottom-right-radius: 14px;
}
.codeEditor .CodeMirror-vscrollbar,
.codeEditor .CodeMirror-hscrollbar {
  background: transparent !important; /* avoid light bars behind scrollbars */
}
.codeEditor .CodeMirror-vscrollbar { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.codeEditor .CodeMirror-hscrollbar { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.codeEditor .CodeMirror-gutters {
  /* Keep gutter visually solid so code can't "slide under" line numbers area on horizontal scroll */
  background: #0f1117;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
/* CodeMirror places gutter background in separate layers — make them solid too */
.codeEditor .CodeMirror-gutter-background { background: #0f1117 !important; }
.codeEditor .CodeMirror-gutter-wrapper { background: #0f1117 !important; }
/* Make left gutter more compact (line numbers + fold chevrons) */
.codeEditor .CodeMirror-linenumber {
  color: rgba(232,232,234,0.38);
  min-width: 14px;
  padding: 0 1px 0 3px;
}
.codeEditor .CodeMirror-cursor { border-left-color: var(--text); }
.codeEditor .CodeMirror-selected { background: rgba(110,168,254,0.16) !important; }
.codeEditor .CodeMirror-focused .CodeMirror-selected { background: rgba(110,168,254,0.22) !important; }
.codeEditor .CodeMirror-matchingbracket { outline: 1px solid rgba(110,168,254,0.45); color: inherit !important; }
.codeEditor .CodeMirror-foldgutter-open:after,
.codeEditor .CodeMirror-foldgutter-folded:after { color: rgba(232,232,234,0.55); }
.codeEditor .CodeMirror-foldgutter { width: 18px; }
.codeEditor .CodeMirror-foldgutter-open:hover:after,
.codeEditor .CodeMirror-foldgutter-folded:hover:after { color: rgba(110,168,254,0.75); }
.codeEditor .CodeMirror-foldmarker { color: rgba(232,232,234,0.55); }
.codeEditor .CodeMirror-foldgutter-open:after,
.codeEditor .CodeMirror-foldgutter-folded:after {
  /* Minimalistic chevrons (override vendor foldgutter.css triangles) */
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  display: inline-block;
  transform: translateY(-0.5px);
  opacity: 0.75;
  transition: opacity 120ms ease;
}
.codeEditor .CodeMirror-foldgutter-open:after { content: "⌄"; }   /* open */
.codeEditor .CodeMirror-foldgutter-folded:after { content: "›"; } /* folded */
.codeEditor.isUpdating .CodeMirror-foldgutter-open:after,
.codeEditor.isUpdating .CodeMirror-foldgutter-folded:after {
  opacity: 0;
}
/* Focus ring should wrap the whole JSON area (including gutter). */
.codeEditor:focus-within {
  /* Stronger OUTER focus ring (consistent all around, including gutter) */
  border-color: rgba(110,168,254,0.35);
  box-shadow: 0 0 0 2px rgba(110,168,254,0.55);
}
/* Disable inner CM outline to avoid partial/double borders. */
.codeEditor .CodeMirror-focused { outline: none; }

/* token colors (Cursor-like JSON) */
.codeEditor .cm-s-default .cm-property { color: rgba(110,168,254,0.95) !important; } /* keys */
.codeEditor .cm-s-default .cm-string { color: rgba(124, 195, 255, 0.92) !important; } /* strings */
.codeEditor .cm-s-default .cm-number { color: rgba(255, 207, 122, 0.95) !important; } /* numbers */
/* true/false/null only: soft red + italic */
.codeEditor .cm-s-default .cm-atom { color: rgba(255, 154, 162, 0.92) !important; font-style: italic; }
.codeEditor .cm-s-default .cm-comment { color: rgba(167,167,178,0.70) !important; }
.codeEditor .cm-s-default .cm-bracket { color: rgba(250,250,252,0.96) !important; }
.codeEditor .cm-s-default .cm-error { color: #ff9aa2 !important; text-decoration: underline; }

/* subtle active line */
.codeEditor .CodeMirror-activeline-background { background: rgba(255,255,255,0.03); }

/* JSON error highlighting */
.codeEditor .jsonErrorLine .CodeMirror-line,
.codeEditor .CodeMirror-line-wrapper.jsonErrorLine .CodeMirror-line,
.codeEditor .CodeMirror-line.jsonErrorLine {
  background: rgba(255,154,162,0.12) !important; 
}
/* CodeMirror addLineClass(..., "background", ...) attaches to `.CodeMirror-linebackground` */
.codeEditor .CodeMirror-linebackground.jsonErrorLine {
  background: rgba(255,154,162,0.12) !important;
}
.codeEditor .jsonErrorLine .CodeMirror-linenumber,
.codeEditor .CodeMirror-line-wrapper.jsonErrorLine .CodeMirror-linenumber {
  color: #ff9aa2 !important; 
}

/* CodeMirror search dialog (theme) */
.CodeMirror-dialog {
  background: rgba(20,22,29,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
}
.CodeMirror-dialog input {
  background: #0f1117;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 5px 8px;
}
.CodeMirror-dialog button {
  /* Match global button style */
  padding: 5px 10px;
  min-height: 24px;
  border-radius: 10px;
  border: 1px solid var(--btnOutline);
  box-shadow: inset 0 0 0 1px var(--btnOutline2);
  background: #0f1117;
  color: var(--text);
}

.errors,
#errors {
  /* Collapsed by default; expands when error appears */
  flex: 0 0 auto;
  max-height: 0;
  margin-top: 0;
  padding: 0 10px;
  border-radius: 10px;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: max-height 160ms ease, padding 160ms ease, margin-top 160ms ease, opacity 120ms ease;
}
.errors.isActive,
#errors.isActive {
  opacity: 1;
  pointer-events: auto;
  max-height: 96px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 154, 162, 0.16);
  border: 1px solid rgba(255, 154, 162, 0.35);
  color: #ff9aa2;
}
.editorBar { margin: 0 0 6px; }
#editorStatus.isError { color: #ff9aa2; }
#editorStatus {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.jsonNav {
  position: relative;
  margin: 0 0 8px;
  min-height: 24px; /* stable top zone height (matches buttons) */
  /* Use same typography as other UI buttons (not monospace). */
  font-family: inherit;
}
.jsonNavTags,
.jsonNavActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.jsonNavActions {
  position: absolute;
  inset: 0;
  justify-content: flex-start;
  opacity: 0;
  align-items: flex-start; /* keep baseline identical to tags */
  pointer-events: none;
  transition: opacity 160ms ease;
}
.jsonNavTags {
  transition: opacity 160ms ease;
  opacity: 1;
}
.jsonNav--manual .jsonNavTags {
  opacity: 0;
  pointer-events: none;
}
.jsonNav--manual .jsonNavActions {
  opacity: 1;
  pointer-events: auto;
}
/* Keep jsonNav buttons consistent with global `button` styles. */
.jsonNav button { min-height: 24px; }
.inappCard { 
  /* Much tighter label column inside in-app cards */
  --labelW: 132px;
  --targetingControlW: 110px;
  border: 2px solid rgba(110,168,254,0.25); 
  border-radius: 12px; 
  padding: 10px; 
  margin: 8px 0; 
  background: rgba(110,168,254,0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.inappCard:hover {
  border-color: rgba(110,168,254,0.40);
  background: rgba(110,168,254,0.05);
}
.inappCard[open] {
  border-color: rgba(110,168,254,0.35);
}
.inappCard summary { 
  list-style: none; 
  cursor: pointer;
}
.inappCard summary::-webkit-details-marker { display: none; }
.inappSummary { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap: 8px; 
  cursor: pointer; 
  padding: 6px 0; /* stable when collapsed */
  user-select: none;
  width: 100%;
}
.inappCard[open] .inappSummary {
  padding-bottom: 10px; /* a bit more space before first field when expanded */
}

/* Align "Add in-app" button with card action buttons (slightly inset). */
#addInappBtn { margin-right: 6px; }
.inappSummary::before {
  content: "▶";
  display: inline-block;
  color: rgba(110,168,254,0.60);
  font-size: 10px;
  margin-right: 6px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.inappCard[open] > .inappSummary::before {
  transform: rotate(90deg);
}
.inappTitle { 
  display:flex; 
  align-items:center; 
  gap: 6px; 
  flex: 1;
  min-width: 0;
}
.dragHandle {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 10px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  /* Make it clearly interactive (accent outline like other buttons) */
  background: rgba(110,168,254,0.08);
  border-color: rgba(110,168,254,0.35);
  box-shadow: inset 0 0 0 1px rgba(110,168,254,0.14);
  color: rgba(232,232,234,0.85);
}
.dragHandle:hover { border-color: rgba(110,168,254,0.50); background: rgba(110,168,254,0.14); }
.dragHandle:active { cursor: grabbing; transform: none; }
.inappCard.dragging {
  opacity: 0.95;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.inappDragPlaceholder {
  border: 1px dashed rgba(110,168,254,0.35);
  background: rgba(110,168,254,0.05);
  border-radius: 14px;
  margin: 8px 0;
}
.inappTitle strong { 
  color: rgba(110,168,254,0.85);
  font-weight: 600;
}
.inappActions { 
  display:flex; 
  gap: 6px; 
  flex-shrink: 0;
}
.inappActions button { 
  padding: 5px 10px; 
  border-radius: 10px; 
  font-size: 11px; 
  min-width: 70px;
  text-align: center;
}
.badge { font-size: 12px; color: var(--muted); }
.section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Keep spacing consistent between all field blocks inside a card. */
.section + .section {
  margin-top: 6px; /* slightly more space BEFORE the divider line */
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 6px; /* spacing AFTER the divider line */
}
.section > .row:first-child { margin-top: 0; }
.section > .row:last-child { margin-bottom: 0; }
.sectionHeader { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

/* input + small button */
.fieldGroup { display:flex; gap: 8px; flex: 1; min-width: 0; align-items: center; }
.fieldGroup .segmented { width: auto; }
.segmented {
  /* Use grid to guarantee strict equal columns (avoids flex rounding/jitter). */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--btnOutline);
  box-shadow: inset 0 0 0 1px var(--btnOutline2);
  border-radius: 10px;
  overflow: hidden;
  background: #0f1117;
  width: 100%;
  flex: 1;
  min-width: 0;
}
.segmented > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented label {
  padding: 0 10px; /* fixed height; no vertical padding */
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(232,232,234,0.68); /* muted for unselected */
  cursor: pointer;
  user-select: none;
  min-width: 0;
  position: relative;
  border-radius: 0;
  line-height: 1;
  width: 100%;
}
.segmented label .hint { color: inherit; }
.segmented label .hint,
.segmented label .monoHint { opacity: 1; }
.segmented > label:first-of-type { border-radius: 10px 0 0 10px; }
.segmented > label:last-of-type { border-radius: 0 10px 10px 0; }
.segmented label > * { position: relative; z-index: 1; }
.segmented > label:not(:first-of-type) { border-left: 1px solid rgba(255,255,255,0.08); }
.segmented > input:focus-visible + label {
  outline: 2px solid rgba(110,168,254,0.45);
  outline-offset: -2px;
}
.segmented > input:checked + label {
  background: rgba(110,168,254,0.16);
  border-color: rgba(110,168,254,0.35);
  color: var(--text);
}
.segmented > input:checked + label::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(110,168,254,0.55);
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

/* delayTime segmented: second segment contains a number input */
.segmented--delay .delaySecSeg { gap: 8px; }
.segmented--delay > label.delaySecSeg {
  /* keep same height as other segmented controls */
  padding: 0 8px;
  min-height: 24px;
}
.segmented--delay .delaySecInput {
  width: 60px;
  flex: 0 0 60px;
  height: 24px;
  padding: 0 10px;
  border-radius: 10px;
  color: inherit; /* don't force white from .row input; follow segment state */
}
.segmented--delay > input:not(:checked) + label.delaySecSeg .delaySecInput {
  /* make unselected segment equally muted (input has its own default styles) */
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.01); /* thinner, more "embedded" */
  box-shadow: none;
}
.segmented--delay > input:checked + label.delaySecSeg .delaySecInput {
  border-color: rgba(110,168,254,0.35);
  background: #0f1117;
  box-shadow: none;
}
.segmented--delay .delaySecInput:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.segmented--delay .delaySecInput:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(110,168,254,0.35);
  border-color: rgba(110,168,254,0.45);
}

/* frequency segmented: third segment contains a number input */
.segmented--freq > label.freqSecSeg { padding: 0 8px; min-height: 24px; gap: 8px; }
.segmented--freq .freqSecInput {
  width: 60px;
  flex: 0 0 60px;
  height: 24px;
  padding: 0 10px;
  border-radius: 10px;
  color: inherit;
}
.segmented--freq > input:not(:checked) + label.freqSecSeg .freqSecInput {
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.01);
  box-shadow: none;
}
.segmented--freq > input:checked + label.freqSecSeg .freqSecInput {
  border-color: rgba(110,168,254,0.35);
  background: #0f1117;
  box-shadow: none;
}
.segmented--freq .freqSecInput:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(110,168,254,0.35);
  border-color: rgba(110,168,254,0.45);
}
.inappCard select[data-f="payloadMode"] { flex: 0 0 180px; max-width: 180px; }
.iconBtn { 
  /* Match global button size */
  padding: 5px 10px; 
  border-radius: 10px; 
  line-height: 1; 
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: 0.18s ease;
  border-radius: 999px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  background: rgba(232,232,234,0.92);
  transition: 0.18s ease;
  border-radius: 999px;
}
.switch input:checked + .slider {
  background: rgba(110,168,254,0.22);
  border-color: rgba(110,168,254,0.40);
}
.switch input:checked + .slider:before {
  transform: translate(20px, -50%);
}
.switch input:focus-visible + .slider {
  outline: 2px solid rgba(110,168,254,0.45);
  outline-offset: 2px;
}

/* compact switch (for snackbar margins) */
.switch.switch--sm { width: 34px; height: 18px; }
.switch.switch--sm .slider:before { width: 14px; height: 14px; left: 2px; }
.switch.switch--sm input:checked + .slider:before { transform: translate(16px, -50%); }
.iconBtn.tiny { 
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
  min-height: 24px;
  text-align: center;
}
.iconBtn svg { display: block; }
.iconBtn.openBtn { 
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
  min-height: 24px;
}
.iconBtn.openBtn svg { width: 12px; height: 12px; }

.flash { box-shadow: 0 0 0 2px rgba(110,168,254,0.25); border-color: rgba(110,168,254,0.45) !important; }
.flashError { box-shadow: 0 0 0 2px rgba(255, 154, 162, 0.20); border-color: rgba(255, 154, 162, 0.55) !important; }

/* Conditional fields */
.onlySnackbar, .onlyPeriodic, .onlyGeo, .onlySegment, .onlyProductId, .onlyProductSegment, .onlyOperation, .onlyVisit, .onlyCategoryId, .onlyCategorySegment, .onlyProductIdHint, .onlyCategoryIdHint, .onlyProductSegmentHint, .onlyCategorySegmentHint { display: none; }
.inappCard.isSnackbar .onlySnackbar { display: flex; }
.inappCard.isPeriodic .onlyPeriodic { display: flex; }
.periodicInline, .periodicInlineHint { display: none; }
.inappCard.isPeriodic .periodicInline { display: block; }
.inappCard.isPeriodic .periodicInlineHint { display: inline; }
.periodicInline { flex: 1 1 0 !important; min-width: 0; }
.delaySecInput { min-width: 0; }
.targetingItem.tGeo .onlyGeo { display: flex; }
.targetingItem.tSegment .onlySegment { display: flex; }
.targetingItem.tProductId .onlyProductId { display: flex; }
.targetingItem.tProductId .onlyProductIdHint { display: flex; }
.targetingItem.tProductSegment .onlyProductSegment { display: flex; }
.targetingItem.tProductSegment .onlyProductSegmentHint { display: flex; }
.targetingItem.tOperation .onlyOperation { display: flex; }
.targetingItem.tVisit .onlyVisit { display: flex; }
.targetingItem.tCategoryId .onlyCategoryId { display: flex; }
.targetingItem.tCategoryId .onlyCategoryIdHint { display: flex; }
.targetingItem.tCategorySegment .onlyCategorySegment { display: grid; }
.targetingItem.tCategorySegment .onlyCategorySegmentHint { display: flex; }

/* Conditional rows with 2 controls: enforce strict 50/50 only when visible. */
.targetingItem.tSegment .row.onlySegment,
.targetingItem.tProductId .row.onlyProductId,
.targetingItem.tProductSegment .row.onlyProductSegment,
.targetingItem.tOperation .row.onlyOperation,
.targetingItem.tVisit .row.onlyVisit,
.targetingItem.tCategoryId .row.onlyCategoryId {
  display: grid;
  grid-template-columns: var(--labelW) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}
.targetingItem.tSegment .row.onlySegment label,
.targetingItem.tProductId .row.onlyProductId label,
.targetingItem.tProductSegment .row.onlyProductSegment label,
.targetingItem.tOperation .row.onlyOperation label,
.targetingItem.tVisit .row.onlyVisit label,
.targetingItem.tCategoryId .row.onlyCategoryId label { width: auto; }
.targetingItem.tSegment .row.onlySegment .fieldGroup,
.targetingItem.tProductId .row.onlyProductId .fieldGroup,
.targetingItem.tProductSegment .row.onlyProductSegment .fieldGroup,
.targetingItem.tOperation .row.onlyOperation .fieldGroup,
.targetingItem.tVisit .row.onlyVisit .fieldGroup,
.targetingItem.tCategoryId .row.onlyCategoryId .fieldGroup { width: 100%; min-width: 0; }

.targetingItem.tCategorySegment .row.onlyCategorySegment {
  display: grid;
  grid-template-columns: var(--labelW) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}
.targetingItem.tCategorySegment .row.onlyCategorySegment label { width: auto; }
.targetingItem.tCategorySegment .row.onlyCategorySegment .fieldGroup { width: 100%; min-width: 0; }

/* Hide redirect/payload for push reactivation (pushPermission action) */
.inappCard.isPushReactivation .onlyRedirect { display: none; }
.inappCard.closeHidden button[data-action="random_close"] { opacity: 0.45; pointer-events: none; }
/* Snackbar close visibility toggle: keep it consistent with other buttons */
.inappCard .closeVisBtn {
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 9px;
  line-height: 1;
}
.inappCard .closeVisBtn svg { width: 16px; height: 16px; }
.inappCard.closeHidden .closeVisBtn {
  /* "hidden" state: slightly more muted, but still same button style */
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.fieldError { border-color: rgba(255, 154, 162, 0.65) !important; box-shadow: 0 0 0 2px rgba(255, 154, 162, 0.15); }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .row { flex-wrap: wrap; }
  .row label { width: 100%; }
  /* On narrow screens fall back to normal row flex wrapping */
  .targetingItem.tSegment .row.onlySegment,
  .targetingItem.tProductId .row.onlyProductId,
  .targetingItem.tProductSegment .row.onlyProductSegment,
  .targetingItem.tOperation .row.onlyOperation,
  .targetingItem.tVisit .row.onlyVisit,
  .targetingItem.tCategoryId .row.onlyCategoryId,
  .targetingItem.tCategorySegment .row.onlyCategorySegment { display: flex; }
  .hint { white-space: normal; }
  /* keep independent panel scroll; editor fills panel */
  .codeEditor { height: 100%; min-height: 0; }
}