/* Inline references decorate the existing native editor without changing its controls. */
.variable-editor-host { position:relative; }
.variable-editor-overlay { position:absolute; overflow:hidden; pointer-events:none; user-select:none; }
.variable-editor-mirror { box-sizing:border-box; color:transparent; overflow-wrap:break-word; }
.variable-editor-token { color:transparent; text-decoration:underline dotted var(--muted); text-underline-offset:3px; }
.variable-editor-token.is-missing { text-decoration-color:var(--danger); text-decoration-style:wavy; }
.variable-reference { text-decoration:underline dotted var(--muted); text-underline-offset:3px; cursor:help; }
.variable-reference.is-missing { text-decoration-color:var(--danger); text-decoration-style:wavy; }
.variable-value-tooltip { position:fixed; z-index:1000; display:grid; gap:var(--space-1); max-width:min(360px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--control-radius); background:var(--surface); box-shadow:var(--popup-shadow); overflow-wrap:anywhere; }
.variable-value-tooltip > strong { font-size:var(--control-font-size); font-weight:var(--control-font-weight); white-space:pre-wrap; }
.variable-value-tooltip.is-missing > strong { color:var(--danger); }

.variable-value-tooltip[hidden], .variable-value-tooltip > [hidden] { display: none; }
.variable-value-tooltip { pointer-events: auto; user-select: text; }
.variable-value-source-link { color: inherit; font: inherit; white-space: inherit; text-underline-offset: 3px; }
.variable-value-source-link:hover { text-decoration-thickness: 2px; }
.variable-value-source-link:focus { outline: none; box-shadow: none; }
.variable-value-source-link:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

.variable-value-source-link::after { content: "↗"; display: inline-block; margin-inline-start: .3em; text-decoration: none; }

.variable-mention-measure { position:fixed; box-sizing:border-box; visibility:hidden; pointer-events:none; overflow-wrap:break-word; }
.variable-mention-picker { position:fixed; z-index:1100; width:360px; max-width:calc(100vw - 16px); overflow:auto; overscroll-behavior:contain; padding:var(--space-1); border:1px solid var(--line); border-radius:var(--control-radius); background:var(--surface); box-shadow:var(--popup-shadow); color:var(--text); }
.variable-mention-heading,.variable-mention-status { padding:var(--space-2) var(--space-3); font-size:var(--small-font-size,12px); color:var(--muted); }
.variable-mention-heading { font-weight:600; }
.variable-mention-option { display:grid; gap:var(--space-1); padding:var(--space-2) var(--space-3); border-radius:var(--control-radius); cursor:pointer; }
.variable-mention-option.is-active { background:var(--surface-hover,#f3f4f6); outline:1px solid var(--line); outline-offset:-1px; }
.variable-mention-option > strong { font-size:var(--control-font-size); font-weight:var(--control-font-weight); overflow-wrap:anywhere; }
.variable-mention-detail { display:flex; align-items:baseline; gap:var(--space-2); color:var(--muted); font-size:var(--small-font-size,12px); }
.variable-mention-detail > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.variable-mention-detail > small { max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; }