/* ============================================================================
   Brein: levend netwerk van herinneringen. Alles staat onder #brainview.
   ========================================================================== */
#brainview {
  --b-line: rgba(0,229,255,.16); --b-surface: rgba(255,255,255,.04); --b-surface-2: rgba(255,255,255,.08);
  --k-fact: 0,229,255; --k-episode: 179,136,255; --k-preference: 255,183,3; --k-entity: 160,215,255;
  z-index: 15; display: flex; flex-direction: column; padding: 0; place-items: stretch;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(45,123,255,.12), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(179,136,255,.10), transparent 50%),
    radial-gradient(ellipse at 50% 40%, rgba(8,26,44,.97), rgba(3,9,15,.99));
  backdrop-filter: blur(8px);
}
[data-theme="light"] #brainview {
  --b-line: rgba(10,100,140,.2); --b-surface: rgba(255,255,255,.6); --b-surface-2: rgba(255,255,255,.9);
  --k-fact: 10,134,166; --k-episode: 110,70,200; --k-preference: 190,120,0; --k-entity: 33,89,201;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(45,123,255,.10), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(110,70,200,.08), transparent 50%),
    radial-gradient(ellipse at 50% 40%, rgba(246,251,254,.98), rgba(226,238,247,.99));
}
#brainview :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- kop ------------------------------------------------------------------- */
.bv-top { display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; border-bottom: 1px solid var(--b-line); flex-wrap: wrap; background: linear-gradient(var(--b-surface), transparent); }
.bv-title { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; }
.bv-title svg { color: var(--cyan); flex: none; }
.bv-title strong { display: block; color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; }
.bv-status { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.3; }
.bv-search { position: relative; display: flex; align-items: center; flex: 0 1 280px; min-width: 150px; }
.bv-search svg { position: absolute; left: 12px; color: var(--dim); pointer-events: none; }
.bv-search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border-radius: 999px; border: 1px solid var(--b-line); background: var(--b-surface); color: inherit; font: inherit; font-size: 14px; }
.bv-search input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }
.bv-search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }
.bv-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.bv-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--text); background: var(--b-surface); border: 1px solid var(--b-line); }
.bv-chip i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgba(var(--c), .9); }
[data-theme="light"] .bv-chip i { box-shadow: none; }
.bv-chip.k-fact { --c: var(--k-fact); } .bv-chip.k-episode { --c: var(--k-episode); } .bv-chip.k-preference { --c: var(--k-preference); } .bv-chip.k-entity { --c: var(--k-entity); }
.bv-chip[aria-pressed="false"] { opacity: .45; background: transparent; }
.bv-chip[aria-pressed="false"] i { background: transparent; box-shadow: none; border: 1.5px solid rgb(var(--c)); }
.bv-actions { display: flex; gap: 8px; }
#brainview .icon-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 10px; background: transparent; }

/* ---- tekengebied ------------------------------------------------------------ */
.bv-stage { position: relative; flex: 1; min-height: 0; }
#bv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.bv-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; border: 1px solid var(--b-line); border-radius: 12px; overflow: hidden; background: var(--b-surface-2); backdrop-filter: blur(6px); }
.bv-zoom button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; display: grid; place-items: center; box-shadow: none; }
.bv-zoom button + button { border-top: 1px solid var(--b-line); }
.bv-hint { position: absolute; left: 18px; bottom: 14px; font-size: 12.5px; color: var(--dim); pointer-events: none; opacity: .85; transition: opacity .6s; }
.bv-hint.gone { opacity: 0; }

/* ---- infokaart --------------------------------------------------------------- */
.bv-tip { position: absolute; z-index: 3; width: max-content; max-width: min(340px, 82vw); padding: 12px 14px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; pointer-events: none;
  background: rgba(7,20,33,.9); backdrop-filter: blur(10px); border: 1px solid rgba(var(--tipc, 0,229,255), .45); border-top: 3px solid rgb(var(--tipc, 0,229,255));
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 24px rgba(var(--tipc, 0,229,255), .18); }
.bv-tip .kind { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--tipc, 0,229,255)); margin-bottom: 4px; font-weight: 600; }
.bv-tip .kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.bv-tip .meta { margin-top: 6px; font-size: 12px; color: var(--dim); }
.bv-tip .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bv-tip .tag { padding: 1px 9px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(var(--k-entity), .5); color: rgb(var(--k-entity)); background: rgba(var(--k-entity), .1); }
[data-theme="light"] .bv-tip { background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(20,60,90,.22); }

/* ---- tijdbalk ------------------------------------------------------------------ */
.bv-time { display: flex; align-items: center; gap: 12px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--b-line); background: linear-gradient(transparent, var(--b-surface)); }
.bv-time input[type=range] { flex: 1; min-width: 80px; accent-color: var(--cyan); height: 28px; }
.bv-time button { flex: none; }
#bv-play { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
#bv-play .i-pause, #bv-play.on .i-play { display: none; } #bv-play.on .i-pause { display: block; }
.bv-when { font-size: 13px; color: var(--dim); white-space: nowrap; min-width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
#bv-new { border-color: rgba(255,183,3,.55); color: #ffb703; font-size: 13px; } #bv-new[aria-pressed="true"] { background: rgba(255,183,3,.2); box-shadow: 0 0 12px rgba(255,183,3,.4); }
[data-theme="light"] #bv-new { color: #a86a00; border-color: rgba(190,120,0,.6); }

@media (max-width: 760px) {
  .bv-top { gap: 10px 12px; flex-wrap: wrap; }
  .bv-title { flex: 1 1 0; min-width: 0; margin-right: 0; }
  .bv-title > div { min-width: 0; }
  .bv-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bv-actions { flex: none; }
  .bv-search { flex: 1 1 100%; order: 5; }
  .bv-legend { order: 6; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 2px; }
  .bv-legend::-webkit-scrollbar { display: none; }
  .bv-chip { flex: none; height: 38px; padding: 0 14px; font-size: 14px; }
  #brainview .icon-btn { width: 40px; height: 40px; }
}
@media (max-width: 600px) {
  .bv-time { flex-wrap: wrap; } .bv-when { order: 3; flex-basis: 100%; text-align: left; min-width: 0; }
  .bv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bv-hint { transition: none; } }
@media (max-width: 600px) { #bv-play { width: 40px; height: 40px; } .bv-search input { height: 40px; } }
@media (max-height: 520px) { .bv-top { padding-top: 8px; padding-bottom: 8px; } .bv-legend { flex-wrap: nowrap; } }