/* Bedeutung: a fixed edge badge and a column beside the transcript (config/scripts/bedeutung.js), shared by every PDAI
   viewer. Colours and fonts come from the host's --k-* variables when it defines them (the Kármán viewer), else the
   ai-viewer book-sheet palette: warm paper, Oxford blue chrome, gold accents. The host places the column (its own
   layout rule); the ai-viewer placement is the last block of this file. */
#bd-badge, #bd-column {
  /* the Kármán viewer's --k-* tokens first, then the ai-viewer book sheet's (pdai-page.css, light and dark) */
  --bd-oxford: var(--k-oxford, var(--oxford, #002147));
  --bd-oxford-soft: var(--k-oxford-soft, var(--oxford-soft, #2c4a6e));
  --bd-ink: var(--k-ink, var(--ink, #1b2733));
  --bd-ink-muted: var(--k-ink-muted, var(--ink-muted, #4a4a6a));
  --bd-muted: var(--k-muted, var(--ink-muted, #5c5348));
  --bd-gold: var(--k-gold, var(--gold, #c8a22a));
  --bd-gold-pale: var(--k-gold-pale, var(--gold-pale, #efe3c4));
  --bd-gold-border: var(--k-gold-border, var(--gold-border, #d4b85c));
  --bd-sand: var(--k-sand, var(--paper-sunken, #f6f1e7));
  --bd-paper: var(--k-paper, var(--paper-sheet, #fffdf9));
  --bd-line: var(--k-line, var(--rule, #e6e0d4));
  --bd-line-strong: var(--k-line-strong, var(--rule-gold, #cdbfa4));
  --bd-radius: var(--k-radius, 3px);
  --bd-serif: var(--k-serif, var(--serif, "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif));
  --bd-sans: var(--k-sans, var(--sans, "Source Sans 3", "Avenir Next", system-ui, sans-serif));
}
#bd-badge {
  position: fixed; right: 0; top: calc(50% - 44px); z-index: 32;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--bd-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bd-gold-pale); background: var(--bd-oxford);
  border: 1px solid var(--bd-gold); border-right: 0; border-radius: 0 6px 6px 0;
  padding: 12px 6px; cursor: pointer; box-shadow: -2px 0 8px rgba(0, 21, 46, 0.18);
}
#bd-badge:hover { background: #01315f; }
#bd-badge.on { background: var(--bd-gold); color: var(--bd-oxford); border-color: var(--bd-gold); }
#bd-column { display: none; }
body.bd-offen #bd-column {
  display: flex; flex-direction: column; position: relative; min-width: 0;
  border-left: 1px solid var(--bd-line-strong); background: var(--bd-sand); overflow: hidden;
}
#bd-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
#bd-resizer::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; }
#bd-resizer:hover::before, body.bd-resizing #bd-resizer::before { background: var(--bd-gold); }
#bd-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 26px 7px 14px; flex-shrink: 0;
  font-family: var(--bd-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bd-oxford); border-bottom: 1px solid var(--bd-gold-border); background: var(--bd-paper);
}
#bd-head .bd-x { margin-left: auto; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--bd-muted); }
#bd-body { flex: 1; overflow: auto; padding: 12px 26px 18px 14px; font-family: var(--bd-serif); font-size: 14px; line-height: 1.45; color: var(--bd-ink); }
#bd-body > * + * { margin-top: 10px; }
.bd-rahmen { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-oxford-soft); }
.bd-rahmen b { font-weight: 650; color: var(--bd-oxford); }
.bd-rahmen.bd-dokument i { font-family: var(--bd-serif); font-size: 13.5px; color: var(--bd-ink); }
.bd-regest { font-size: 13px; color: var(--bd-muted); margin-top: 3px; }
.bd-hinweis { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-muted); }
.bd-fortschritt { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-oxford-soft); display: flex; gap: 10px; align-items: center; }
.bd-fortschritt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bd-gold); border-top-color: transparent; animation: bd-spin .9s linear infinite; flex-shrink: 0; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-satz { background: var(--bd-paper); border: 1px solid var(--bd-line); border-radius: var(--bd-radius); padding: 8px 10px; }
.bd-satz mark.bd-span { background: rgba(200, 162, 42, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 4px 2px; }
/* the chips (same look as normalkarte.css, so the column needs no other stylesheet) */
#bd-column .nk-chip { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11.5px; margin: 1px 3px 1px 0; background: rgba(128, 128, 128, .18); white-space: nowrap; }
#bd-column .nk-chip.ok { background: rgba(47, 133, 90, .2); color: #2f855a; }
#bd-column .nk-chip.warn { background: rgba(183, 121, 31, .2); color: #b7791f; }
#bd-column .nk-chip.acc { background: rgba(43, 108, 176, .18); color: #2b6cb0; }
.bd-chips .nk-chip { cursor: default; }
.bd-chips .nk-chip[data-ind-id] { cursor: pointer; border-bottom: 1px dotted currentColor; }
.bd-meaning { font-size: 15px; line-height: 1.5; }
.bd-about { font-size: 13px; color: var(--bd-ink); }
.bd-segment { margin: 3px 0; padding-left: 8px; border-left: 3px solid var(--bd-line-strong); font-size: 13px; }
.bd-segment b { font-weight: 560; }
.bd-segment .bd-rolle { font-family: var(--bd-sans); font-size: 11px; color: var(--bd-muted); margin-left: 4px; }
.bd-meta { font-family: var(--bd-sans); font-size: 11.5px; color: var(--bd-muted); }
.bd-vertiefen { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--bd-line); }
.bd-vertiefen button, .bd-knopf {
  font-family: var(--bd-sans); font-size: 12px; background: transparent; border: 1px solid var(--bd-line-strong);
  color: var(--bd-oxford); padding: 3px 9px; border-radius: var(--bd-radius); cursor: pointer;
}
.bd-vertiefen button.on, .bd-knopf.primaer { background: var(--bd-oxford); color: var(--bd-gold-pale); border-color: var(--bd-oxford); }
.bd-vertiefen button:disabled { opacity: .5; cursor: default; }
.bd-umfeld p { margin: 4px 0; font-size: 13px; color: var(--bd-ink-muted); }
.bd-umfeld p.aktuell { color: var(--bd-ink); background: rgba(200, 162, 42, 0.14); border-radius: 3px; padding: 2px 4px; }
.bd-dossier { padding: 6px 0; border-top: 1px solid var(--bd-line); font-size: 13px; }
.bd-dossier:first-child { border-top: 0; }
.bd-dossier b { font-weight: 600; cursor: pointer; border-bottom: 1px dotted var(--bd-gold); }
.bd-dossier .bd-meta { margin-top: 2px; }
.bd-mark { background: rgba(200, 162, 42, 0.18); border-radius: 3px; box-shadow: 0 0 0 3px rgba(200, 162, 42, 0.18); }

/* ── Host: ai-viewer (viewer.html; bedeutung.js sets body.bd-av). The column is the last flex child of the document
   view (.content-wrapper); facsimile and transcript share what is left. The badge joins the viewer's edge tabs
   (Query, Dictionary, Audit) in their form, above them, and is hidden with the document view (Agents mode). ── */
.content-wrapper > #bd-column { flex: 0 0 var(--bd-w, 380px); width: var(--bd-w, 380px); }
body.bd-offen .content-wrapper > .panel { min-width: 0; }
body.bd-av #bd-badge {
  top: calc(50% - 96px); transform: translateY(-100%); writing-mode: vertical-rl; z-index: 9000;
  font: 600 12px/1.1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  background: #002147; color: #efe3c4; border: 1px solid #c8a22a; border-right: 0; border-radius: 6px 0 0 6px;
  padding: 10px 6px; box-shadow: -2px 0 6px rgba(0, 0, 0, .15);
}
body.bd-av #bd-badge:hover { background: #01315f; }
body.bd-av #bd-badge.on { background: #c8a22a; color: #002147; }
body.bd-av #bd-body { padding-right: 34px; }
body:has(#documentView.hidden) #bd-badge { display: none; }
@media (prefers-color-scheme: dark) {
  body.bd-av #bd-column .nk-chip.ok { color: #7ee2a8; }
  body.bd-av #bd-column .nk-chip.warn { color: #f0c36b; }
  body.bd-av #bd-column .nk-chip.acc { color: #8fc1ff; }
  body.bd-av .bd-satz mark.bd-span { background: rgba(226, 186, 66, 0.35); }
}
@media (max-width: 900px) {
  body.bd-offen .content-wrapper > #bd-column { flex-basis: auto; width: auto; height: 34%; border-left: 0; border-top: 1px solid var(--bd-line-strong); }
}