/* aanvul.css -- slim schrijven: de suggestielijst, de parameterhint, het spookblok en de
 * spooktekst. Maten en kleuren uit core.css; VS Code's suggest widget is de lat (430 px
 * breed, rijen van 22 px, een detailregel onderaan, geselecteerde rij in de accentkleur). */

/* ---- de suggestielijst ---- */
.av-list {
  position: absolute; z-index: 30;
  width: 430px; max-width: calc(100% - 16px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.36);
  font: var(--ui-fs) var(--font-ui);
  overflow: hidden;
}
.av-rows { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.av-row {
  display: flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px 0 6px;
  cursor: pointer; white-space: nowrap; overflow: hidden;
}
.av-row.on { background: var(--accent); color: var(--accent-tx); }
.av-row.on .av-detail, .av-row.on .av-inc { color: var(--accent-tx); opacity: .8; }
.av-ico {
  width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 10px var(--font-code); border-radius: 3px;
  color: var(--text-strong); background: var(--rule);
}
.av-k-procedure, .av-k-function { color: var(--syn-ident); background: transparent; border: 1px solid currentColor; }
.av-k-const   { color: var(--syn-const);   background: transparent; border: 1px solid currentColor; }
.av-k-type    { color: var(--syn-type);    background: transparent; border: 1px solid currentColor; }
.av-k-var     { color: var(--text);        background: transparent; border: 1px solid currentColor; }
.av-k-keyword { color: var(--syn-keyword); background: transparent; border: 1px solid currentColor; }
.av-k-snippet { color: var(--attn);        background: transparent; border: 1px solid currentColor; }
.av-name { font-family: var(--font-code); flex: none; }
.av-name b { font-weight: 600; color: var(--accent-hi); }
.av-row.on .av-name b { color: var(--accent-tx); }
.av-detail { color: var(--text-dim); font-family: var(--font-code); font-size: calc(var(--code-fs) * 12 / 14); overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.av-inc { color: var(--attn); font-size: calc(var(--code-fs) * 11 / 14); flex: none; }
.av-doc {
  border-top: 1px solid var(--rule); padding: 4px 8px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: calc(var(--code-fs) * 12 / 14); color: var(--text-dim);
  max-height: 64px; overflow: hidden;
}
.av-doc[hidden] { display: none; }
.av-doctext { color: var(--text); white-space: normal; }
.av-where { font-family: var(--font-code); font-size: calc(var(--code-fs) * 11 / 14); color: var(--text-muted); }
.av-where.attn { color: var(--attn); }

/* a snippet's own row in the list opens .av-doc taller: it carries a code preview, not
   just a doc line, so 64px (five-ish lines of prose) is not enough room -- VS Code's own
   suggest-detail panel for a snippet is a similar multi-line size. .av-doc.av-snip is set
   by listPaint() only while a snippet row is highlighted. */
.av-doc.av-snip { max-height: 180px; overflow-y: auto; }
.av-snippreview { font: var(--code-fs)/var(--line-h) var(--font-code); white-space: pre; margin-top: 2px; }
.av-sniprow { height: var(--line-h); }

/* ---- de parameterhint ---- */
.av-hint {
  position: absolute; z-index: 31;
  max-width: 420px; padding: 4px 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.36);
  font: 12px var(--font-code); white-space: normal;
  pointer-events: none;
}
.av-hname { color: var(--syn-ident); }
.av-hp.on { font-weight: 700; color: var(--text-strong); background: var(--selection); border-radius: 2px; padding: 0 2px; }
.av-hdoc { display: block; color: var(--text-dim); font: 12px var(--font-ui); margin-top: 2px; }

/* ---- het spookblok (code uit commentaar) ---- */
.av-block {
  position: absolute; z-index: 20; right: 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--accent-hi); border-left-width: 3px; border-radius: 3px;
  font: var(--code-fs)/var(--line-h) var(--font-code);
  white-space: pre; overflow: hidden;
}
.av-block[data-state="failed"] { border-color: var(--danger); }
.av-block[data-state="thinking"], .av-block[data-state="compiling"] { border-color: var(--rule); border-left-color: var(--attn); }
.av-code { padding: 2px 8px; }
.av-line { height: var(--line-h); color: var(--text-dim); font-style: italic; }
.av-bar, .av-wait, .av-fail {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 3px 8px; border-top: 1px solid var(--rule);
  font: var(--ui-fs) var(--font-ui); white-space: normal;
}
.av-wait, .av-fail { border-top: 0; }
.av-fail { flex-direction: column; align-items: flex-start; gap: 4px; }
.av-ok { color: var(--ok); }
.av-nok { color: var(--danger-tx); }
.av-att { color: var(--text-dim); }
.av-keys { margin-left: auto; display: flex; gap: 6px; }
.av-fail .av-keys { margin-left: 0; }
.av-keys button {
  font: var(--ui-fs) var(--font-ui); color: var(--text); background: var(--chrome);
  border: 1px solid var(--rule); border-radius: 3px; padding: 1px 8px; cursor: pointer;
}
.av-keys button:hover { background: var(--hover); color: var(--text-strong); }
.av-keys kbd { font: 11px var(--font-code); background: var(--rule); border-radius: 2px; padding: 0 4px; margin-right: 4px; }
.av-diag { margin: 0; white-space: pre-wrap; color: var(--text); font: 12px var(--font-code); max-height: 120px; overflow: auto; }
.av-spin {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--rule); border-top-color: var(--attn);
  animation: av-spin .9s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .av-spin { animation: none; } }

/* ---- spooktekst achter de caret ---- */
.av-ghost { color: var(--text-muted); font-style: italic; pointer-events: none; }
.av-ghostblock { border-color: transparent; background: transparent; right: auto; }
.av-ghostblock .av-line { color: var(--text-muted); }

/* light theme only (S-0000-0382): the floating suggest list, parameter hint and ghost
 * block become soft cards, same tokens and same guard as core.css' #menubar .dropdown --
 * dark is untouched, this never matches either selector below unless system light with no
 * override, or an explicit data-theme="light". .av-ghostblock keeps its own transparent
 * border/background (set above) so it is excluded here. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .av-list,
  :root:not([data-theme="dark"]) .av-hint,
  :root:not([data-theme="dark"]) .av-block:not(.av-ghostblock) {
    background: var(--surface-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .av-list,
:root[data-theme="light"] .av-hint,
:root[data-theme="light"] .av-block:not(.av-ghostblock) {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ---- de gloeilamp op een commentaarregel: in de GUTTER-rij, want een .ln is
   contain: strict (e1a.css) en knipt alles buiten zijn eigen vak af ---- */
#gutter .g { position: relative; }
.av-bulb {
  position: absolute; left: 0; top: 1px;
  width: 14px; height: 16px; padding: 0;
  border: 0; border-radius: 3px; background: transparent; color: var(--attn);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.av-bulb:hover { background: var(--hover); }