/* NanoVM Editor — header · main(chat | detail) · footer. Light theme.
   Bootstrap handles components; the app-shell archetype, shared toolbar
   (.nv-header / .nv-brand / .nv-header-actions) and .nv-panel surface live in
   application.css. This file owns the editor grid, the file tabs, the chat
   stream/input, the debug panel and the compiler modal. Sibling files in this
   editor/ folder: codemirror.css (CodeMirror theme) and briora-agent.css (briora agent
   bubbles + markdown). Theme tokens (--nv-*) live in application.css. */

/* ============================================================================
   App shell (grid: header / main / footer)
   ========================================================================= */
.nv-app {
  display: grid;
  grid-template-rows: var(--nv-header-h) 1fr var(--nv-footer-h);
  height: 100vh;
  background: var(--nv-bg);
  color: var(--nv-text);
}

/* ── Header — editor-specific widgets (.nv-header/.nv-brand are in application.css) ── */

/* Overflow-menu trigger: square icon-only button (hamburger). */
.nv-menu-toggle {
  width: 31px;
  height: 31px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* Editor page: the brand logo lines up with the chat header's content and
   the input-mode tabs below (.nv-input-modes, 18px). */
.nv-app .nv-header {
  padding-left: 18px;
}
.nv-project {
  font-size: 14px;
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--nv-text);
}

.nv-project:hover {
  background-color: rgba(var(--bs-black-rgb), 0.06);
}

.nv-project:focus {
  outline: 1px solid var(--nv-accent);
  background-color: var(--nv-bg);
}

.nv-project:empty::before {
  content: "Untitled";
  color: var(--nv-muted);
}

/* Combined connect/disconnect button with integrated status */
.nv-connect {
  white-space: nowrap;
  border: 1px solid transparent;
}

.nv-connect.is-disconnected {
  color: var(--bs-success);
  border-color: var(--nv-connect-border);
}

.nv-connect.is-disconnected:hover {
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

.nv-connect.is-connecting {
  color: black;
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.nv-connect.is-connected {
  color: white;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.nv-connect.is-connected:hover {
  background-color: #bb2d3b; /* Bootstrap's btn-danger active shade */
  border-color: #bb2d3b;
}

/* ── Device action clusters (header): [run|debug|CLI] ↔ [step|continue|stop].
     Visible only while a board is connected. data-device-panel on the group
     ("none" | "run" | "debug", set by the device controller) picks the
     cluster; each expands/collapses via an animatable 0fr grid track + fade
     (0.3s), the same pattern as the right-column collapse. When "none", the
     negative margin swallows the header's flex gap so the empty group leaves
     no phantom spacing. ────────────────────────────────────────────────────── */
.nv-device-actions {
  display: flex;
  align-items: center;
  margin-right: -0.5rem; /* cancels .nv-header-actions' gap while empty */
  transition: margin-right 0.3s ease;
}

/* Expanded: instead of swallowing the header gap, add to it — the cluster
   keeps at least 10px distance from the connect button. */
.nv-device-actions[data-device-panel="run"],
.nv-device-actions[data-device-panel="debug"],
.nv-device-actions[data-device-panel="kickstart"] {
  margin-right: 4px;
}

.nv-device-wrap {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.3s ease;
}

.nv-device-cluster {
  min-width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

.nv-device-cluster .btn {
  white-space: nowrap;
}

/* Run stays reachable while following a kickstart — clearly separated
   from the kickstart block. */
.nv-kickstart-run {
  margin-right: 12px;
}

/* "Debugger" prefix in front of the stepping controls. */
.nv-device-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nv-muted);
  white-space: nowrap;
  margin-right: 0.5rem;
}

.nv-device-actions[data-device-panel="run"] .nv-device-wrap[data-cluster="run"],
.nv-device-actions[data-device-panel="debug"] .nv-device-wrap[data-cluster="debug"],
.nv-device-actions[data-device-panel="kickstart"] .nv-device-wrap[data-cluster="kickstart"] {
  grid-template-columns: 1fr;
}

/* The expanded cluster lifts its overflow clip — the CLI dropdown menu must
   escape the box. Clipping is only needed while a cluster is collapsed or
   animating away; the opacity fade masks the brief expand overflow. */
.nv-device-actions[data-device-panel="run"] .nv-device-wrap[data-cluster="run"] .nv-device-cluster,
.nv-device-actions[data-device-panel="debug"] .nv-device-wrap[data-cluster="debug"] .nv-device-cluster,
.nv-device-actions[data-device-panel="kickstart"] .nv-device-wrap[data-cluster="kickstart"] .nv-device-cluster {
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

/* Compact popup style for the device-cluster menus (CLI, Kickstarts) —
   denser than the "…" menu, via Bootstrap's dropdown CSS-var contract. */
.nv-cluster-menu {
  --bs-dropdown-font-size: 14px;
  --bs-dropdown-item-padding-y: 0.2rem;
  --bs-dropdown-item-padding-x: 0.75rem;
}

/* A button row where some members are button_to forms: the forms dissolve
   (display: contents) and the buttons join up like a Bootstrap btn-group. */
.nv-form-group {
  display: inline-flex;
}

.nv-form-group form {
  display: contents;
}

.nv-form-group > * + * .btn,
.nv-form-group > * + *.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.nv-form-group > *:not(:last-child) .btn,
.nv-form-group > *:not(:last-child).btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── Main (chat | detail) — the chat/agent column is the primary workspace:
     wider than the code pane (prompting is the rule, hand-editing the
     exception). ─────────────────────────────────────────────────────────── */
.nv-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0fr;
  min-height: 0;
  overflow: hidden;
  /* Shared height of the top bars in all columns (chat header, file tabs,
     overview head, collapse handles) so their bottom borders align. */
  --nv-bar-h: 38px;
  /* Width of a collapse-handle strip — also a collapsed column's width. */
  --nv-collapse-w: 26px;
}

.nv-chat,
.nv-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.nv-chat {
  border-right: 1px dashed var(--br-faint);
  background: var(--nv-bg);
}

/* ── The two collapsible right columns (state on .nv-main, set by the panel
     controller): data-panel — hidden (default), code (file tabs + editor) or
     overview (the drilldown); data-files — shown | hidden (default). Both
     independent: any combination of open/collapsed works.

     Animation: a column collapses via an animatable 0fr track (not
     display:none) — its min-width floors the track at the collapse handle's
     strip, so collapsed columns remain as narrow bars on the right edge.
     Content sits absolute inside and cross-fades opacity/visibility.
     Transitions are gated behind .nv-anim, which the panel controller adds
     one frame after applying the stored state — the initial page load never
     animates. ─────────────────────────────────────────────────────────────── */
.nv-main[data-files="shown"] {
  grid-template-columns: 1.4fr 1fr 0.55fr;
}

.nv-main[data-panel="hidden"] {
  grid-template-columns: 1fr 0fr 0fr;
}

.nv-main[data-panel="hidden"][data-files="shown"] {
  grid-template-columns: 1fr 0fr 0.6fr;
}

.nv-main.nv-anim {
  transition: grid-template-columns 0.5s ease;
}

.nv-detail {
  position: relative;
  min-width: var(--nv-collapse-w);
}

.nv-files-col {
  position: relative;
  min-width: var(--nv-collapse-w);
  border-left: 1px dashed var(--br-faint);
  background: var(--nv-bg);
}

/* Icon identifying a collapsed column's strip (sits below the handle). */
.nv-strip-icon {
  position: absolute;
  top: calc(var(--nv-bar-h) + 10px);
  right: 0;
  width: var(--nv-collapse-w);
  text-align: center;
  color: var(--nv-muted);
  font-size: 13px;
  display: none;
}

.nv-main[data-panel="hidden"] .nv-detail > .nv-strip-icon,
.nv-main[data-files="hidden"] .nv-files-col > .nv-strip-icon {
  display: block;
}

/* ── Collapse handle: the right end cap of the file-tabs bar (matches its
     height + border-bottom). DOM-wise it stays a sibling of the cross-fading
     views — inside them it would inherit their opacity:0 when collapsed and
     the column could never be re-opened — but it renders as part of the bar;
     the views underneath keep the full column width. The panel controller
     flips the arrow (right = hide, left = show). ─────────────────────────── */
.nv-collapse-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--nv-collapse-w);
  height: var(--nv-bar-h);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-left: 1px solid var(--nv-border);
  border-bottom: 1px solid var(--nv-border);
  background: var(--nv-bg);
  color: var(--nv-muted);
  font-size: 14px;
}

.nv-collapse-handle:hover {
  color: var(--nv-text);
  background: var(--nv-border-soft);
}

.nv-code-view,
.nv-overview-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.nv-main.nv-anim .nv-code-view,
.nv-main.nv-anim .nv-overview-view {
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

.nv-main[data-panel="code"] .nv-code-view,
.nv-main[data-panel="overview"] .nv-overview-view {
  opacity: 1;
  visibility: visible;
}

/* ── Files column content — same fade pattern as the source views. */
.nv-files-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.nv-main.nv-anim .nv-files-view {
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

.nv-main[data-files="shown"] .nv-files-view {
  opacity: 1;
  visibility: visible;
}

/* ============================================================================
   Detail pane: file tabs + editor
   ========================================================================= */
.nv-tabs {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: var(--nv-bar-h);
  overflow-x: auto;
  /* keep the last tab / "+" clear of the collapse handle capping the bar */
  padding-right: var(--nv-collapse-w);
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
  scrollbar-width: thin;
}

.nv-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  color: var(--nv-muted);
  user-select: none;
}

.nv-tab:hover {
  color: var(--nv-text);
}

.nv-tab.active {
  color: var(--nv-text);
  border-bottom-color: var(--nv-text);
}

.nv-tab-icon.main-file {
  color: var(--nv-file-main);
}

.nv-tab-icon.header-file {
  color: var(--nv-file-header);
}

.nv-tab-name {
  font-family: var(--nv-mono);
  font-size: 12.5px;
}

.nv-tab-actions {
  display: none;
  gap: 2px;
}

.nv-tab:hover .nv-tab-actions {
  display: inline-flex;
}

.nv-tab-actions button {
  padding: 0 2px;
  border: none;
  background: transparent;
  color: var(--nv-muted);
  line-height: 1;
  font-size: 12px;
}

.nv-tab-actions button:hover {
  color: var(--nv-text);
}

.nv-tab-actions .delete-btn:hover {
  color: var(--bs-danger);
}

.nv-tab-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--nv-muted);
  font-size: 13px;
  white-space: nowrap;
}

.nv-tab-new:hover {
  color: var(--nv-text);
  background-color: var(--nv-border-soft);
}

.nv-detail.drag-over {
  outline: 2px dashed var(--nv-accent);
  outline-offset: -2px;
}

/* ── Overview view: running log of the agent's approach / decisions / findings
     (<s> sections), one card per entry, filled by the panel controller. ───── */
.nv-overview-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nv-bar-h);
  padding: 4px calc(var(--nv-collapse-w) + 8px) 4px 12px;
  border-bottom: 1px solid var(--nv-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nv-muted);
}

.nv-overview-head .btn {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* the code view's switch buttons float over the tab row's right edge
   (.nv-code-view is already position:absolute, so it anchors the group) */
.nv-view-switches {
  position: absolute;
  top: 5px;
  right: calc(var(--nv-collapse-w) + 8px);
  z-index: 5;
  display: flex;
  gap: 4px;
}

.nv-view-switch {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nv-overview-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--nv-gap);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nv-overview-entry {
  background: var(--nv-panel);
  border: 1px solid var(--nv-border-soft);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--nv-text);
}

/* New entries fade in; history rebuilt on load doesn't (.nv-anim arrives a
   frame after the initial adoption). */
.nv-main.nv-anim .nv-overview-entry {
  animation: nv-fade-in 0.5s ease;
}

@keyframes nv-fade-in {
  from {
    opacity: 0;
  }
}

.nv-overview-empty {
  padding: var(--nv-gap);
  color: var(--nv-muted);
  font-size: 13px;
}

.nv-overview-list:not(:empty) + .nv-overview-empty {
  display: none;
}

/* ── Files view: binary assets synced to the device's LittleFS. ──────────── */
.nv-files-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--nv-gap);
  gap: 8px;
}

.nv-files-body.drag-over {
  outline: 2px dashed var(--nv-accent);
  outline-offset: -2px;
}

.nv-files-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* The column is narrow — the sync-status hint wraps below the buttons. */
  flex-wrap: wrap;
}

.nv-files-toolbar .btn {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nv-files-hint {
  font-size: 12px;
  color: var(--nv-muted);
}

.nv-files-errors {
  color: var(--bs-danger);
  font-size: 12.5px;
}

.nv-files-errors:empty {
  display: none;
}

.nv-files-list {
  display: flex;
  flex-direction: column;
}

.nv-files-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--nv-border-soft);
}

.nv-files-status.status-synced {
  color: var(--bs-success);
}

.nv-files-status.status-missing {
  color: var(--bs-warning);
}

.nv-files-status.status-unknown {
  color: var(--nv-muted);
}

.nv-files-name {
  font-family: var(--nv-mono);
  font-size: 12.5px;
  color: var(--nv-text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-files-size {
  font-size: 12px;
  color: var(--nv-muted);
  white-space: nowrap;
}

.nv-files-delete {
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--nv-muted);
  line-height: 1;
  font-size: 12px;
}

.nv-files-delete:hover {
  color: var(--bs-danger);
}

.nv-files-empty,
.nv-files-drop-hint {
  padding: var(--nv-gap);
  color: var(--nv-muted);
  font-size: 13px;
  text-align: center;
}

.nv-files-drop-hint {
  border: 1px dashed var(--nv-border);
  border-radius: 6px;
  margin-top: auto;
  flex-shrink: 0;
}

/* Device partition stats (filled by the assets controller; empty = unknown) */
.nv-files-footer {
  padding-top: 4px;
  color: var(--nv-muted);
  font-size: 12px;
  text-align: right;
  flex-shrink: 0;
}

.nv-editor {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--nv-gap);
}

/* ============================================================================
   Version indicator bar (bottom of the editor column, right-aligned)
   ========================================================================= */
.nv-version-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 2px 8px;
  background: var(--nv-panel);
  border-top: 1px solid var(--nv-border-soft);
}

.nv-version-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--nv-border-soft);
  background: var(--nv-bg);
  color: var(--nv-muted);
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}

.nv-version-chip:hover {
  color: var(--nv-text);
  border-color: var(--nv-border);
}

.nv-version-writer {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.nv-version-chip.writer-llm .nv-version-writer {
  color: var(--nv-writer-llm);
}

.nv-version-chip.writer-user .nv-version-writer {
  color: var(--nv-writer-user);
}

.nv-version-chip.writer-tutorial .nv-version-writer {
  color: var(--nv-writer-tutorial);
}

.nv-version-num {
  color: var(--nv-muted);
}

/* Version history table + writer tags */
.nv-version-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.nv-version-table th,
.nv-version-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--nv-border-soft);
  text-align: left;
  vertical-align: middle;
}

.nv-version-table th {
  color: var(--nv-muted);
  font-weight: 600;
}

.nv-version-row.is-current {
  background: rgba(var(--bs-primary-rgb), 0.06);
}

.nv-writer-tag {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 11px;
}

.nv-writer-tag.writer-llm {
  color: var(--nv-writer-llm);
}

.nv-writer-tag.writer-user {
  color: var(--nv-writer-user);
}

.nv-writer-tag.writer-tutorial {
  color: var(--nv-writer-tutorial);
}

.nv-version-badge-del {
  color: var(--bs-danger);
  font-size: 12px;
}

.nv-version-actions button {
  margin-left: 3px;
}

.nv-version-view {
  margin: 0;
  padding: 10px;
  background: var(--br-tint);
  color: var(--nv-text);
  border: 1px solid var(--nv-border-soft);
  border-radius: 4px;
  font-family: var(--nv-mono);
  font-size: 13px;
  white-space: pre;
  overflow: auto;
  max-height: 60vh;
}

/* ============================================================================
   Footer (status bar)
   ========================================================================= */
/* The screen's single Pflaume surface (same fill in both themes). */
.nv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  background: var(--br-plum);
  border-top: 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--nv-mono);
  font-size: 11px;
}

.status-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

/* Left-edge footer info: compiler utilization + last one-line board status. */
.nv-footer-stats,
.nv-footer-device-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.75);
}

.nv-footer-stats.d-none {
  display: none;
}

/* CLI hidden (default, toggled from the "…" menu): the multi-line console
   lines in the chat stream and the CLI popup in the header's run cluster
   disappear; agent bubbles and status updates stay. Lines keep being
   appended while hidden, so showing the CLI reveals the full history. */
.nv-cli-hidden .nv-line {
  display: none;
}

.nv-cli-hidden .nv-cli-group {
  display: none;
}

/* With the CLI popup gone, the debug button is the group's visual end —
   give it back the outer corner rounding Bootstrap strips off inner
   group members. */
.nv-cli-hidden #btn-debug {
  border-top-right-radius: var(--bs-btn-border-radius);
  border-bottom-right-radius: var(--bs-btn-border-radius);
}

/* The persisted [STATUS] board connect/disconnect info lines in the chat are
   CLI chrome too — the footer carries that information while hidden. */
.nv-cli-hidden .briora-agent-status-update {
  display: none;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}

.status-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.status-item.status-errors {
  color: var(--br-raspberry);
}

.status-item.status-warnings {
  color: #e8c268;
}

.device-info {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.device-info .platform {
  color: var(--br-turquoise);
  font-weight: 500;
}

.device-info .memory {
  font-size: 0.8rem;
}

.status-separator {
  color: var(--nv-muted);
  font-size: 0.8rem;
}

/* Compile status indicator dot */
.compile-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.compile-status-dot.status-empty,
.compile-status-dot.status-dirty {
  background-color: var(--bs-gray-500);
}

.compile-status-dot.status-compiling {
  background-color: var(--bs-warning);
  animation: pulse 1s ease-in-out infinite;
}

.compile-status-dot.status-error {
  background-color: var(--bs-danger);
}

.compile-status-dot.status-ready {
  background-color: var(--br-turquoise);
}

.compile-status-dot.status-running {
  background-color: var(--nv-accent);
  animation: pulse 1s ease-in-out infinite;
}

.compile-status-dot.status-debugging {
  background-color: var(--bs-info);
}

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

/* ============================================================================
   Scrollbars (global chrome)
   ========================================================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--nv-panel);
}
::-webkit-scrollbar-thumb {
  background: var(--nv-border);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--nv-muted);
}

/* ============================================================================
   Chat column: header · stream · status/notice · input
   ========================================================================= */
.chat-header {
  flex-shrink: 0;
  height: var(--nv-bar-h);
  /* left-aligned with the input-mode tabs below (.nv-input-modes, 18px) */
  padding-left: 18px;
  font-size: 14px;
  background-color: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
}

.chat-scroll {
  min-height: 0;
  padding: var(--nv-gap) var(--nv-gap) var(--nv-gap) var(--nv-chat-gutter);
}

/* Model dropdown in the chat toolbar — compact, content-width. */
.nv-model-select {
  width: auto;
  font-size: 11px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Unified output stream: every post is a rounded box with a distinct colour.
   Text-only posts cap at 60% of the chat width; assistant/program posts (which
   may carry code or data dumps) get a little more room. User-initiated posts
   (your text, CLI commands) align right; system/assistant posts align left. */
.nv-line {
  font-family: var(--nv-mono);
  line-height: 1.4;
  white-space: pre-wrap;
}

.nv-line .timestamp {
  color: var(--nv-muted);
  margin-right: 2px;
}

.nv-line--program {
  background-color: var(--nv-program-bg);
  color: var(--nv-program-fg);
  max-width: 80%;
  border-color: var(--nv-program-border);
}
.nv-line--cli {
  background-color: var(--nv-cli-bg);
  color: var(--nv-cli-fg);
  border-color: var(--nv-cli-border);
}
.nv-line--debug {
  background-color: var(--nv-debug-bg);
  color: var(--nv-debug-fg);
  border-color: var(--nv-debug-border);
  font-style: italic;
}
.nv-line--error {
  background-color: var(--nv-error-bg);
  color: var(--nv-error-fg);
  border-color: var(--nv-error-border);
}
.nv-line--warning {
  background-color: var(--nv-warning-bg);
  color: var(--nv-warning-fg);
  border-color: var(--nv-warning-border);
}
.nv-line--success {
  background-color: var(--nv-success-bg);
  color: var(--nv-success-fg);
  border-color: var(--nv-success-border);
}
.nv-line--info {
  background-color: var(--nv-info-bg);
  color: var(--nv-info-fg);
  border-color: var(--nv-info-border);
}

/* Input area = floating mode tabs + composer card. */
.nv-input-area {
  flex-shrink: 0;
}

/* Composer card — the screen's primary input: floating, flat, loud.
   3px Blaugrau outline + 10px radius (Pflaume on focus); constant height
   across the three modes, sized for a 3-row chat textarea. */
.nv-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 16px 16px;
  padding: 10px 12px;
  min-height: 96px;
  background-color: var(--nv-bg);
  border: 3px solid var(--br-bluegray);
  border-radius: 10px;
}

.nv-input:focus-within {
  border-color: var(--br-plum);
}

/* Mode tabs — tracked uppercase micro-labels with a Türkis underline.
   Also hosts the model dropdown, pushed to the row's right edge. */
.nv-input-modes {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 10px 18px 6px;
}

.nv-mode-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--br-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 5px;
  cursor: pointer;
  white-space: nowrap;
}

.nv-mode-tab:hover {
  color: var(--nv-text);
}

.nv-mode-tab.active {
  color: var(--nv-text);
  border-bottom-color: var(--br-turquoise);
}

.nv-input-panel {
  min-height: 0;
}

/* Auto-growing chat composer (textarea grows to ~6 lines, then scrolls) */
.nv-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

/* The card itself is the field: the textarea inside is borderless. */
.nv-chat-input {
  resize: none;
  line-height: 1.4;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  color: var(--nv-text);
}

.nv-chat-input:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--nv-text);
}

.nv-chat-input::placeholder {
  color: var(--nv-muted);
}

.nv-composer .btn {
  flex-shrink: 0;
}

/* ============================================================================
   Debug symbols panel (call stack + variables)
   ========================================================================= */
.debug-panel {
  flex-shrink: 0;
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  background-color: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
}

.debug-panel-header {
  background-color: var(--nv-panel);
  font-size: 14px;
  flex-shrink: 0;
  color: var(--nv-text);
}

.debug-panel-content {
  overflow-y: auto;
  flex: 1;
  background-color: var(--nv-bg);
}

.debug-panel-content.collapsed {
  max-height: 0;
  overflow: hidden;
}

.debug-section {
  padding: 6px 10px;
  border-bottom: 1px solid var(--nv-border-soft);
}

.debug-section:last-child {
  border-bottom: none;
}

.debug-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nv-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.debug-section-content {
  font-family: var(--nv-mono);
  font-size: 12px;
}

.debug-frame {
  padding: 3px 6px;
  margin: 1px 0;
  border-radius: 3px;
}
.debug-frame-current {
  background-color: var(--nv-user-bg);
}
.debug-frame-name {
  color: var(--nv-syntax-def);
}
.debug-frame-line {
  color: var(--nv-muted);
  font-size: 11px;
}
.debug-var {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
  gap: 4px;
  flex-wrap: wrap;
}
.debug-var-section {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--nv-muted);
  margin-top: 8px;
  margin-bottom: 2px;
  padding-left: 2px;
}
.debug-var-section:first-child {
  margin-top: 0;
}
.debug-var-name {
  color: var(--nv-syntax-type);
}
.debug-var-type {
  color: var(--nv-muted);
  font-size: 11px;
}
.debug-var-eq {
  color: var(--nv-muted);
}
.debug-var-value {
  color: var(--nv-error-fg);
}

/* ============================================================================
   Compiler output (modal)
   ========================================================================= */
.compiler-output-content {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.compiler-output-content .error-line {
  color: var(--nv-error-fg);
  cursor: pointer;
}
.compiler-output-content .error-line:hover {
  text-decoration: underline;
}
.compiler-output-content .warning-line {
  color: var(--nv-warning-fg);
  cursor: pointer;
}
.compiler-output-content .warning-line:hover {
  text-decoration: underline;
}

/* ============================================================================
   Responsive: stack chat / detail on narrow viewports
   ========================================================================= */
@media (max-width: 768px) {
  .nv-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  /* Hidden right column: the chat keeps the whole height (0fr row keeps the
     track count stable so the collapse animates). */
  .nv-main[data-panel="hidden"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0fr;
  }

  .nv-main.nv-anim {
    transition: grid-template-rows 0.5s ease;
  }

  .nv-chat {
    border-right: none;
    border-bottom: 1px solid var(--nv-border);
  }

  .nv-main[data-panel="hidden"] .nv-chat {
    border-bottom: none;
  }

  .nv-project {
    max-width: 120px;
  }
}