/* Port of old/css/hviewer_gui.css, scoped to the second viewer. */
.classic-viewer { background: #222; color: #ddd; border: 1px solid #111; border-radius: 6px; overflow: hidden; font: 12px/1.45 system-ui, sans-serif; }
.classic-viewer:fullscreen { width: 100%; height: 100%; display: flex; flex-direction: column; }
.classic-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: #1e1e1e; }
.classic-toolbar button { color: #eee; background: #333; border: 1px solid #777; border-radius: 5px; padding: 5px 10px; }
.classic-toolbar button:hover { background: #555; }
.classic-toolbar button:focus-visible, .classic-node:focus-visible { outline: 3px solid #ffcb6b; }
.classic-help { color: #bbb; margin-left: auto; }
.classic-workspace { display: flex; height: 72vh; min-height: 380px; }
.classic-viewer:fullscreen .classic-workspace { flex: 1; min-height: 0; }
.classic-frame { flex: 1; min-width: 0; position: relative; overflow: hidden; background: #222; cursor: grab; touch-action: none; }
.classic-world { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; width: 16000px; height: 9000px; background-image: linear-gradient(to right,#333 1px,transparent 1px),linear-gradient(to bottom,#333 1px,transparent 1px); background-size: 20px 20px; }
.classic-connections { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.classic-node { position: absolute; width: 330px; background: #444; color: #eee; border-radius: 8px; box-shadow: 0 3px 6px #1118; touch-action: none; }
.classic-node.classic-deprecated { outline: 2px dashed #f44; background: #5e2727; }
.classic-node.classic-selected { box-shadow: 0 0 0 3px #ffcb6b; }
.classic-node-title { background: #22c55e; color: #101010; padding: 8px; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 600; cursor: move; overflow-wrap: anywhere; }
.classic-node-event .classic-node-title { background: #facc15; }
.classic-node-condition .classic-node-title { background: #93c5fd; }
.classic-node-output .classic-node-title { background: #ef4444; }
.classic-ports { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; min-height: 64px; }
.classic-port-list { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.classic-port { position: relative; min-height: 20px; }
.classic-input { padding-left: 20px; }
.classic-output { padding-right: 5px; text-align: right; }
.classic-port::before { content: ''; position: absolute; top: 0; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 12px solid #aaa; }
.classic-input::before { left: 0; }
.classic-output::before { right: -12px; }
.classic-output-success::before { border-left-color: #0a0; }
.classic-output-fail::before { border-left-color: #a00; }
.classic-parameters { border-top: 1px solid #999; padding: 8px 16px; max-height: 400px; overflow: auto; user-select: text; }
.classic-parameter-value { color: #b8bec8; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 6px; }
.classic-sidebar { width: 300px; flex: 0 0 300px; background: #1e1e1e; border-left: 1px solid #444; padding: 12px; overflow: auto; }
.classic-sidebar h2 { color: #6cf; }
.classic-sidebar pre { color: #ddd; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.classic-sidebar a { color: #9cf; }
.classic-message, .classic-footer { padding: 7px 12px; color: #bbb; border-top: 1px solid #444; }
.classic-message:empty { display: none; }
@media (max-width: 850px) { .classic-workspace { flex-direction: column; height: 78vh; } .classic-frame { min-height: 300px; } .classic-sidebar { width: 100%; flex: 0 0 170px; border-left: 0; border-top: 1px solid #444; } }