/* ════════════════════════════════════════════════════════════════════
   HELIX — DeSci Protocol HUD (Decentralized Medical Development)
   Standalone site. Chrome ported from packages/ui-edex/src/client/**.
   Accent #18e0d0 · panel #0a252c · corner-bracket cards · CRT scanline.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --edex-bg: #071a21;
  --edex-panel: #0a252c;
  --edex-panel-2: #0a252c;
  --edex-border: #1a4a50;
  --edex-card: #2d9da2;
  --edex-green: #18e0d0;
  --edex-dim: #5e8587;
  --edex-amber: #20e878;
  --edex-red: #2bb3c8;
  --edex-cyan: #18e0d0;
  --edex-blue: #21b8d1;
  --text-primary: #d1e5e3;
  --edex-font: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--edex-bg);
  color: var(--edex-green);
  font-family: var(--edex-font);
  font-size: 11px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── Shell frame ──────────────────────────────────────────────────── */

#edex-shell {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: 17vw minmax(0, 1fr) 21.25vw;
  grid-template-rows: 30px minmax(0, 1fr) 36vh;
  grid-template-areas:
    "top   top    top"
    "left  center right"
    "bottom bottom bottom";
  background: var(--edex-panel);
}

.panel { position: relative; overflow: hidden; }

/* ── Top status strip ─────────────────────────────────────────────── */

.top-strip {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--edex-green) 10%, #0a252c);
  border-bottom: 1px solid color-mix(in srgb, var(--edex-green) 45%, transparent);
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;
}

.top-strip .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--edex-amber);
  box-shadow: 0 0 6px rgba(32, 232, 120, 0.9);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.strip-brand {
  flex: none;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-brand .brand-tag { color: var(--edex-dim); font-size: 9px; }
.strip-mid { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.strip-right { flex: none; display: flex; align-items: center; gap: 6px; }

.strip-right .sep { color: var(--edex-border); }

.fullscreen-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border: 1px solid var(--edex-border);
  border-radius: 0;
  background: transparent;
  color: var(--edex-green);
  font-family: inherit;
  cursor: pointer;
}

.fullscreen-btn:hover {
  background: color-mix(in srgb, var(--edex-green) 8%, transparent);
  border-color: var(--edex-green);
}

.dim { color: var(--edex-dim); }
.amber { color: var(--edex-amber); }

/* ── Shared widget section chrome ─────────────────────────────────── */
/* Corner brackets / L-brackets + broken lines (engineering-drawing HUD):
   1px cyan-teal #2d9da2, 0px radius, subtle cyan glow. Ported verbatim
   from WidgetSection.module.css. */

.section {
  position: relative;
  padding: 10px 12px;
  margin: 4px 2px;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, var(--edex-card) 12px, transparent 12px) 0 0 / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--edex-card) 12px, transparent 12px) 0 0 / 1px 100% no-repeat,
    linear-gradient(to left, var(--edex-card) 12px, transparent 12px) 100% 0 / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--edex-card) 12px, transparent 12px) 100% 0 / 1px 100% no-repeat,
    linear-gradient(to right, var(--edex-card) 12px, transparent 12px) 0 100% / 100% 1px no-repeat,
    linear-gradient(to top, var(--edex-card) 12px, transparent 12px) 0 100% / 1px 100% no-repeat,
    linear-gradient(to left, var(--edex-card) 12px, transparent 12px) 100% 100% / 100% 1px no-repeat,
    linear-gradient(to top, var(--edex-card) 12px, transparent 12px) 100% 100% / 1px 100% no-repeat;
}

.section .title {
  position: relative;
  z-index: 2;
  flex: none;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin: -10px -12px 6px;
  padding: 2px 10px;
  background: color-mix(in srgb, var(--edex-green) 18%, #0a252c);
  border-bottom: 1px solid color-mix(in srgb, var(--edex-green) 45%, transparent);
  font-size: 10px;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section.fill { flex: 1; }
.section.compact { padding: 2px 4px; }
.section.compact .title { margin: -2px -4px 6px; padding: 2px 8px; }
.section.bleed { padding: 0; }
.section.bleed .title { margin: 0; padding: 2px 12px; }

.section-body { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.section.bleed .section-body { padding: 0; }

/* ── Panels scrollbars (theme-colored) ────────────────────────────── */

.panel::-webkit-scrollbar, .proc-scroll::-webkit-scrollbar, .files-list::-webkit-scrollbar,
.term-scroll::-webkit-scrollbar, .chat-body::-webkit-scrollbar, .preview-body::-webkit-scrollbar {
  width: 6px;
}
.panel::-webkit-scrollbar-track, .proc-scroll::-webkit-scrollbar-track, .files-list::-webkit-scrollbar-track,
.term-scroll::-webkit-scrollbar-track, .chat-body::-webkit-scrollbar-track, .preview-body::-webkit-scrollbar-track {
  background: var(--edex-panel-2);
}
.panel::-webkit-scrollbar-thumb, .proc-scroll::-webkit-scrollbar-thumb, .files-list::-webkit-scrollbar-thumb,
.term-scroll::-webkit-scrollbar-thumb, .chat-body::-webkit-scrollbar-thumb, .preview-body::-webkit-scrollbar-thumb {
  background: var(--edex-green);
  border-radius: 3px;
}

/* ── LEFT BAR · MONITORING ────────────────────────────────────────── */

.left-bar {
  grid-area: left;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) var(--edex-panel-2);
}

.clock {
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(24, 224, 208, 0.5);
}

.mrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.mlabel {
  width: 56px;
  flex: none;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--edex-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.mrow .track {
  flex: 1;
  height: 6px;
  background: #0f3035;
  min-width: 0;
}

.trackFill {
  display: block;
  height: 100%;
  background: var(--edex-green);
  box-shadow: 0 0 4px rgba(24, 224, 208, 0.6);
  transition: width 0.5s linear;
}

.trackFill.alert {
  background: var(--edex-amber);
  box-shadow: 0 0 5px rgba(32, 232, 120, 0.8);
}

.mval {
  width: 34px;
  flex: none;
  text-align: right;
  font-size: 10px;
  color: var(--text-primary);
}

.mval.alert { color: var(--edex-amber); }

/* ── LEFT BAR · RADAR ─────────────────────────────────────────────── */

.radar-body { align-items: center; }

.radar { width: 120px; height: 120px; }

.radar .ring { stroke: #1a4a50; stroke-width: 1; fill: none; }
.radar .axis { stroke: #1a4a50; stroke-width: 1; }
.radar .polygon {
  fill: rgba(24, 224, 208, 0.15);
  stroke: var(--edex-green);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(24, 224, 208, 0.5));
}

.legend { display: flex; gap: 8px; margin-top: 4px; }

.key {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--edex-dim);
  text-transform: uppercase;
}

/* ── LEFT BAR · DATA LOG ──────────────────────────────────────────── */

.datalog-body { flex: 1; min-height: 0; }

.proc-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.proc-scroll::-webkit-scrollbar { display: none; }

.procTable { width: 100%; border-collapse: collapse; }

.procTable th {
  text-align: left;
  color: var(--edex-dim);
  font-weight: normal;
  padding-bottom: 2px;
  font-size: 9px;
  letter-spacing: 1px;
}

.procTable td {
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.procName { max-width: 0; width: 100%; }
.num { text-align: right; width: 48px; }

.foot {
  margin: auto -12px -10px;
  padding: 8px 12px;
  border-top: 1px solid var(--edex-border);
}

.footText { color: var(--edex-dim); }

/* ── CENTER · MEDICAL WORKSPACE ───────────────────────────────────── */

.center-region {
  grid-area: center;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.center-title {
  flex: none;
  height: 18px;
  line-height: 18px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--edex-green) 18%, #0a252c);
  border-bottom: 1px solid color-mix(in srgb, var(--edex-green) 45%, transparent);
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) transparent;
}

/* Conversation message: terminal green text on the black surface. */
.msg { color: var(--edex-green); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg.dim { color: var(--edex-dim); }
.msg .accent { color: var(--edex-amber); }

/* Tool-call row (Bash / Read / …): dim icon + title, white detail. */
.toolrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--text-primary);
  border-left: 2px solid var(--edex-border);
  padding-left: 8px;
}
.toolrow .tool-icon { color: var(--edex-dim); flex: none; }
.toolrow .tool-title { color: var(--edex-dim); letter-spacing: 1px; text-transform: uppercase; flex: none; }
.toolrow .tool-detail { color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.composer {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--edex-border);
  background: transparent;
}

.path-prompt {
  flex: none;
  padding-top: 4px;
  font-size: 14px;
  line-height: 24px;
  color: var(--edex-amber);
  white-space: nowrap;
  user-select: none;
}

#composer-input {
  flex: 1;
  min-width: 0;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 0;
  color: var(--edex-green);
  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  caret-shape: block;
  caret-color: var(--edex-green);
}

#composer-input::placeholder { color: var(--edex-dim); }

.send-btn {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid var(--edex-border);
  border-radius: 0;
  background: transparent;
  color: var(--edex-green);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.send-btn:hover {
  background: color-mix(in srgb, var(--edex-green) 8%, transparent);
  border-color: var(--edex-green);
}

/* ── RIGHT BAR · SPECTRUM ─────────────────────────────────────────── */

.right-bar {
  grid-area: right;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) var(--edex-panel-2);
}

.specLine {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--edex-dim);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.specLine > span:last-child {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.barRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.barLabel {
  width: 46px;
  flex: none;
  color: var(--edex-dim);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.barRow .track {
  flex: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
}

.cellOff { flex: 1; height: 8px; background: #0f3035; min-width: 2px; }
.cellCyan { flex: 1; height: 8px; background: var(--edex-green); box-shadow: 0 0 4px rgba(24, 224, 208, 0.6); min-width: 2px; }
.cellGreen { flex: 1; height: 8px; background: var(--edex-amber); box-shadow: 0 0 4px rgba(32, 232, 120, 0.6); min-width: 2px; }
.cellBlue { flex: 1; height: 8px; background: var(--edex-blue); box-shadow: 0 0 4px rgba(33, 184, 209, 0.6); min-width: 2px; }

/* ── RIGHT BAR · GENOME SCAN ──────────────────────────────────────── */

.scan-body { align-items: center; justify-content: center; }

.scan-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* Double-helix backbones (generated by app.js). */
.helixA,
.helixB {
  stroke: var(--edex-green);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(24, 224, 208, 0.55));
}

/* Base-pair rungs between the two strands. */
.rung {
  stroke: rgba(24, 224, 208, 0.32);
  stroke-width: 0.7;
}

.crosshair { stroke: #1a4a50; stroke-width: 0.8; }
.innerGrid { stroke: rgba(24, 224, 208, 0.25); stroke-width: 0.6; }

.marker {
  fill: none;
  stroke: var(--edex-amber);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(32, 232, 120, 0.8));
}

.guide { stroke: var(--edex-green); stroke-width: 0.7; opacity: 0.7; }
.box { fill: none; stroke: var(--edex-green); stroke-width: 0.8; }

.scanline { fill: var(--edex-green); opacity: 0.3; }

.scan-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  margin-top: 2px;
}

.scan-tag { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; }

/* ── RIGHT BAR · WAVEFORMS ────────────────────────────────────────── */

.waveforms-body { min-height: 0; }

.waveHeader {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--text-primary);
}

.waveHost { flex: 1; min-height: 34px; position: relative; }

.waveSvg { display: block; width: 100%; height: 100%; }

.waveCyan { stroke: var(--edex-green); stroke-width: 1; fill: none; filter: drop-shadow(0 0 3px rgba(24, 224, 208, 0.5)); }
.waveGreen { stroke: var(--edex-amber); stroke-width: 1; fill: none; filter: drop-shadow(0 0 3px rgba(32, 232, 120, 0.5)); }

/* ── BOTTOM BAR ───────────────────────────────────────────────────── */

.bottom-bar {
  grid-area: bottom;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.bottom-bar .section { margin: 0; border-radius: 0; }
.bottom-bar .section[data-widget='files'] { flex: 0 0 17vw; }
.bottom-bar .section[data-widget='preview'] { flex: 1 1 0; min-width: 0; }
.bottom-bar .section[data-widget='terminal'] { flex: 0 0 21.25vw; }

.bleed-body { padding: 0; }

/* Files browser */

.files-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.files-title {
  flex: none;
  padding: 10px 12px 0;
  margin-bottom: 6px;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--edex-border);
  flex: none;
}

.upButton {
  flex: none;
  background: none;
  border: 1px solid var(--edex-border);
  color: var(--edex-green);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

.upButton:hover {
  background: var(--edex-panel-2);
  border-color: var(--edex-green);
}

.files-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) var(--edex-panel-2);
}

.files-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 3px 10px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--edex-green);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.files-row:hover { background: var(--edex-panel-2); }
.files-row[data-selected] {
  border-left-color: var(--edex-green);
  background: color-mix(in srgb, var(--edex-green) 12%, transparent);
}

.files-icon { flex: none; display: inline-flex; color: var(--edex-green); }
.files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-kind { flex: none; color: var(--edex-dim); font-size: 9px; letter-spacing: 0.14em; }

.files-error { color: var(--edex-red); font-size: 10px; padding: 4px 10px; }
.files-hint { color: var(--edex-dim); padding: 4px 10px; }

.storageRow {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--edex-border);
}

.storageText { color: var(--edex-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storageBar { height: 8px; background: var(--edex-border); opacity: 0.6; }
.storageFill { height: 100%; background: var(--edex-green); box-shadow: 0 0 6px color-mix(in srgb, var(--edex-green) 50%, transparent); }

/* Preview */

.preview-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--edex-border);
  white-space: nowrap;
  overflow: hidden;
}

.preview-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--edex-green); }
.preview-mode { flex: none; font-size: 9px; letter-spacing: 0.14em; }

.preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) var(--edex-panel-2);
}

.preview-body .hint {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--edex-dim);
  letter-spacing: 1px;
}

.preview-text {
  margin: 0;
  padding: 8px 10px;
  font-family: var(--edex-font);
  font-size: 10px;
  line-height: 1.45;
  color: var(--edex-green);
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-error { padding: 8px 10px; color: var(--edex-red); font-size: 10px; white-space: pre-wrap; word-break: break-word; }

/* Terminal */

.term-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--edex-panel);
  overflow: hidden;
  cursor: text;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--edex-border);
  flex: none;
}

.term-cwd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.term-busy { flex: none; color: var(--edex-cyan); font-size: 10px; letter-spacing: 0.14em; }

.term-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.55;
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: var(--edex-green) var(--edex-panel-2);
}

.term-cmd { color: var(--edex-green); white-space: pre-wrap; word-break: break-word; }
.term-out { color: var(--edex-dim); white-space: pre-wrap; word-break: break-word; }
.term-err { color: var(--edex-red); white-space: pre-wrap; word-break: break-word; }
.term-info { color: var(--edex-cyan); white-space: pre-wrap; word-break: break-word; }
.term-amber { color: var(--edex-amber); white-space: pre-wrap; word-break: break-word; }

.term-prompt { color: var(--edex-amber); user-select: none; }

.term-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 7px;
  border-top: 1px solid var(--edex-border);
  flex: none;
}

.term-in .term-prompt {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#term-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  color: var(--edex-green);
  font-family: inherit;
  font-size: 12px;
  caret-shape: block;
  caret-color: var(--edex-green);
}

/* ── CRT scanline texture ─────────────────────────────────────────── */

.crt {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    color-mix(in srgb, var(--edex-green) 5%, transparent) 3px
  );
}

/* ── Responsive fallback ──────────────────────────────────────────── */

@media (max-width: 900px) {
  #edex-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 30px minmax(0,1fr) 30vh;
    grid-template-areas:
      "top"
      "center"
      "bottom";
  }
  .left-bar, .right-bar { display: none; }
}