/* Chemie-Labor — App-spezifisch; Panel-/Dock-/Navbar-Look aus ../_shared/visukit.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; touch-action: none; overscroll-behavior: none; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body.theme-dark { background: #080a10; color: #e6e8f2; }
body.theme-light { background: #e9edf2; color: #1e293b; }
canvas#scene { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* Scrollbalken — heyprof-global, für jeden Scroll-Container */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; }
  body.theme-light { scrollbar-color: rgba(0,0,0,0.15) transparent; }
  body.theme-dark { scrollbar-color: rgba(255,255,255,0.15) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.panel::-webkit-scrollbar-track { margin: 15px 0; }
::-webkit-scrollbar-thumb { border-radius: 4px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-light ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.30); }
body.theme-dark ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.30); }
html::-webkit-scrollbar-thumb { background-color: rgba(127,127,160,0.35); }

@media (min-width: 769px) {
  #panel-experimente { top: 16px; left: 16px; width: 272px; }
  /* rechts übereinander: Höhen teilen, damit sich beide Panels nie überdecken */
  #panel-reagenzien { top: 16px; right: 16px; width: 300px; max-height: calc(40vh - 16px); }
  #panel-beobachtung { bottom: 78px; right: 16px; width: 300px; max-height: calc(60vh - 102px); }
  body:has(#panel-reagenzien.hidden) #panel-beobachtung { max-height: calc(100vh - 110px); }
  #panel-info { left: 50%; right: auto; bottom: 78px; transform: translateX(-50%); width: 400px; }
}

.panel .lab { margin: 12px 0 6px; }

/* Gruppen-Filter: Icon über Wort */
.panel .seg.groups button { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 10px; min-width: 0; white-space: normal; line-height: 1.1; }
.panel .seg.groups button svg { width: 15px; height: 15px; }

/* Experiment-Liste */
#exp-list { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.exp { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; cursor: pointer;
  border-radius: 10px; font: inherit; padding: 7px 9px; background: transparent; color: inherit; transition: background 0.14s; min-width: 0; }
body.theme-dark .exp:hover { background: rgba(255,255,255,0.06); }
body.theme-light .exp:hover { background: rgba(15,23,42,0.045); }
.exp.on { background: var(--vk-ui-active-bg) !important; color: var(--vk-ui-active-ink); }
.exp .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.exp .txt { display: flex; flex-direction: column; min-width: 0; }
.exp .en { font-size: 12.5px; font-weight: 650; line-height: 1.2; overflow-wrap: break-word; }
.exp .ed { font-size: 10.5px; opacity: 0.6; line-height: 1.25; margin-top: 1px; overflow-wrap: break-word; }

.panel .seg.salts button { font-size: 10.5px; padding: 6px 2px; gap: 4px; min-width: 0; white-space: nowrap; }
.panel .seg.salts .sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.panel .seg button { min-width: 0; line-height: 1.15; }
#pills-vessel button { white-space: normal; overflow-wrap: break-word; }

.panel .ghost.clear { margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.panel .ghost.clear svg { width: 14px; height: 14px; }

/* Reagenzien */
.panel .hint { margin: 0 0 9px; }
#reag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.rg { display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; border-radius: 9px; font: inherit; padding: 6px 7px;
  background: transparent; color: inherit; text-align: left; min-width: 0; transition: background 0.14s; }
body.theme-dark .rg { background: rgba(255,255,255,0.035); }
body.theme-light .rg { background: rgba(15,23,42,0.03); }
body.theme-dark .rg:hover { background: rgba(255,255,255,0.09); }
body.theme-light .rg:hover { background: rgba(15,23,42,0.07); }
.rg .bot, .rg .jar { flex: 0 0 auto; position: relative; background: var(--sw); }
.rg .bot { width: 12px; height: 17px; border-radius: 3px 3px 4px 4px; margin-top: 3px; }
.rg .bot::before { content: ''; position: absolute; top: -4px; left: 3px; width: 6px; height: 4px; border-radius: 1.5px 1.5px 0 0; background: rgba(140,148,160,0.9); }
.rg .jar { width: 15px; height: 14px; border-radius: 3px; margin-top: 2px; }
.rg .jar::before { content: ''; position: absolute; top: -3px; left: -1px; right: -1px; height: 4px; border-radius: 2px; background: rgba(140,148,160,0.9); }
body.theme-light .rg .bot, body.theme-light .rg .jar { box-shadow: inset 0 0 0 1px rgba(15,23,42,0.12); }
.rg .rt { display: flex; flex-direction: column; min-width: 0; }
.rg .rn { font-size: 11px; font-weight: 650; line-height: 1.18; overflow-wrap: break-word; }
.rg .rf { font-size: 10px; opacity: 0.7; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.rg .rgh { display: inline-flex; gap: 1px; }
.ghs { display: block; flex: 0 0 auto; }

/* Protokoll */
.vrow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0 5px; }
.vrow .vk { opacity: 0.6; flex: 0 0 auto; }
.vrow .vv { margin-left: auto; font-weight: 700; text-align: right; display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; min-width: 0; }
.vrow .vol { font-size: 10.5px; opacity: 0.55; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.chip { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--vk-panel-surface); }
.trow #spark { flex: 1; min-width: 0; height: 34px; }
.trow .tv { margin-left: 0; font-variant-numeric: tabular-nums; min-width: 52px; font-size: 13px; }

.signs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sign { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 9px; background: var(--vk-panel-surface); min-width: 0; transition: background 0.3s; }
.sign .si { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; opacity: 0.45; }
.sign .si svg { width: 15px; height: 15px; }
.sign .sl { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sign .sl b { font-size: 11px; font-weight: 700; line-height: 1.15; }
.sign .sl span { font-size: 10px; opacity: 0.6; line-height: 1.2; overflow-wrap: break-word; }
.sign .ck { width: 14px; height: 14px; flex: 0 0 auto; }
.sign .ck svg { width: 14px; height: 14px; }
.sign.yes { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
.sign.yes .si, .sign.phys .si, .sign.info .si { opacity: 1; }
.sign.yes .sl span { opacity: 0.85; }
.sign.phys .sl span, .sign.info .sl span { opacity: 0.8; }
.sign.phys .ck, .sign.info .ck { opacity: 0.6; }

.verdict { margin-top: 8px; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: 9px; background: var(--vk-panel-surface); }
.verdict.new { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
.verdict b { font-weight: 700; }
.obs { font-size: 11.5px; line-height: 1.5; margin-top: 8px; opacity: 0.85; }
.obs b { font-weight: 700; }
.eq { font-size: 11.5px; line-height: 1.5; padding: 7px 9px; border-radius: 9px; background: var(--vk-panel-surface); overflow-x: auto; overflow-y: hidden; }
.eq .eqw { font-size: 10.5px; opacity: 0.7; margin-bottom: 3px; }
.eq .eqw.muted { margin: 0; }
.eq .eqline { font-weight: 650; white-space: normal; overflow-wrap: break-word; }
.eq .eqline + .eqline { margin-top: 3px; }
.arr { position: relative; display: inline-block; padding: 0 3px; }
.arr::before { content: attr(data-o); position: absolute; left: 50%; bottom: 72%; transform: translateX(-50%); font-size: 8.5px; font-weight: 600; opacity: 0.75; white-space: nowrap; }
.eqline:has(.arr) { padding-top: 7px; }
.safety .sfrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.safety .sfn { font-size: 11px; font-weight: 700; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.safety .sfn i { font-style: normal; font-weight: 500; font-size: 9.5px; opacity: 0.55; }
.safety .sfp { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.safety .none { font-size: 10px; opacity: 0.5; }
.safety .sfnote { font-size: 10.5px; line-height: 1.45; opacity: 0.75; margin-top: 5px; }

.info-p { font-size: 12px; line-height: 1.55; opacity: 0.8; margin-bottom: 9px; }
.info-p:last-child { margin-bottom: 0; }
.info-p.muted { opacity: 0.6; font-size: 11px; }
.info-p b { font-weight: 700; }
.info-p .k { color: var(--vk-ui-active-ink); font-weight: 700; }

/* Tooltip an den Flaschen */
#tip { position: fixed; z-index: 40; pointer-events: none; padding: 6px 9px; border-radius: 9px; font-size: 11.5px; line-height: 1.35;
  opacity: 0; transition: opacity 0.12s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 240px; }
#tip.on { opacity: 1; }
#tip span { display: block; font-size: 10px; opacity: 0.6; }
body.theme-dark #tip { background: rgba(10,13,26,0.86); color: #e6e8f2; }
body.theme-light #tip { background: rgba(255,255,255,0.94); color: #1e293b; }

/* Brenner an: Aktions-Pill bleibt gleich hoch; das Icon pulsiert, das Wort wechselt zu „Brenner aus“ */
.dock-pill.act.on svg, .nav-btn.act.on svg, #film-burner.on svg { animation: flick 0.9s ease-in-out infinite; }
/* Im Film ist die Bedienleiste weg: Beim Interagieren steht der Brenner deshalb im Panel */
#film-burner { display: none; }
#panel-experimente.film-frei #film-burner { display: flex; }
#film-burner.on { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
#film-burner.on:hover { filter: brightness(1.12); }
@keyframes flick { 50% { opacity: 0.55; } }