/* Nebula default layout
 *
 * The whole app uses one layout shape:
 *   left rail     → Nodes launcher (panel is open by default)
 *   node flyout   → Inspector (attached to the selected canvas node)
 *   bottom-right  → Chat launcher
 *   bottom-center → Toolbar pill (text labels)
 *
 * Every panel uses clamp() with viewport units so it reflows on window
 * resize. User resize via the chat's edge handles or the native CSS
 * resize corners on the side panels writes inline width/height and
 * overrides these defaults — the toolbar's Reset button clears those
 * back to the defaults.
 */

:root {
  /* Spacing scale */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Page-level rhythm */
  --page-gutter: var(--space-4);

  /* Reservation for the bottom-center toolbar pill (pill height + bottom
   * margin + small buffer). Side panels and agent log anchor above this. */
  --toolbar-pad: 56px;

  /* Width tokens — one per column so panels in the same column align */
  --col-left-w:  clamp(220px, 16vw, 300px);
  --col-right-w: clamp(340px, 26vw, 460px);

  /* Right-column reservations: collapsed vs expanded agent log */
  --agent-h-closed: 44px;
  --agent-h-empty: 108px;
  --agent-h-open:   clamp(180px, 22vh, 280px);
  --stack-gap-sm:   var(--space-2);
  --stack-gap-lg:   var(--space-6);
}

/* =============== Toolbar: icon-only bottom-center pill =============== */
/*
 * Icons are hidden by default at the panels.css level (.toolbar__icon
 * { display: none }) and labels show. Here we flip both — icons shown,
 * labels hidden — so the pill stays narrow enough to never collide
 * horizontally with the agent log on small viewports. */

.toolbar__icon {
  display: inline-block !important;
  flex-shrink: 0;
}

.toolbar__label {
  display: none !important;
}

.toolbar__button {
  /* Tighter icon-only buttons */
  padding: 6px 8px !important;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.toolbar__divider {
  margin: 0 2px !important;
}

/* The Hermes "DAEDALUS" wordmark fits a roomier text-label pill; in the
 * compact icon-only mode it eats most of the width and forces the pill
 * to collide with the agent log. Hide it here — the chat panel's own
 * Hermes header still carries the wordmark prominently. */
body.app-hermes .toolbar::before {
  display: none !important;
}

/* =============== Panel launchers: off-canvas entry points =============== */

.panel-launcher {
  position: fixed;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
}

.panel-launcher--nodes {
  left: var(--page-gutter);
  top: var(--page-gutter);
}

.panel-launcher--nodes.panel-launcher--active {
  left: var(--page-gutter);
  top: var(--page-gutter);
}

.panel-launcher--create {
  left: calc(var(--page-gutter) + 52px);
  top: var(--page-gutter);
}

.panel-launcher--assets {
  left: calc(var(--page-gutter) + 104px);
  top: var(--page-gutter);
}

.panel-launcher--chat {
  right: var(--page-gutter);
  bottom: var(--space-4);
}

.panel-launcher__icon {
  display: block;
  flex-shrink: 0;
}

body:not(.app-slava-restraint) .panel-launcher {
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid #333;
  border-radius: 12px;
  color: #bbb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

body:not(.app-slava-restraint) .panel-launcher:hover,
body:not(.app-slava-restraint) .panel-launcher--active {
  border-color: #555;
  background: #252525;
  color: #eee;
}

/* =============== Chat panel: right column =============== */

.chat-panel {
  top: auto !important;
  right: var(--page-gutter) !important;
  left: auto !important;
  bottom: calc(var(--space-4) + 42px + var(--space-2)) !important;
  width: var(--col-right-w);
  min-width: 280px;
  max-width: 720px;
  height: clamp(
    360px,
    calc(100vh - var(--page-gutter) - var(--space-4) - 42px - var(--space-2)),
    760px
  );
}

/* When the user enables the agent log, reserve space for its collapsed row. */
body.agent-log-enabled .chat-panel {
  bottom: calc(var(--toolbar-pad) + var(--agent-h-closed) + var(--stack-gap-lg)) !important;
}

/* Once the user drags/resizes chat into an explicit position, it must escape
 * the right-column layout's important anchors. The actual numbers come from
 * ChatPanel inline CSS variables so React state can continue to own them. */
.chat-panel.chat-panel--free {
  top: var(--chat-panel-top, var(--page-gutter)) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--chat-panel-left, var(--page-gutter)) !important;
  width: var(--chat-panel-width, var(--col-right-w));
  height: var(--chat-panel-height, auto) !important;
}

/* Hide the chat panel's visual corner resize markers — the L-shape ::before
 * pseudo-elements draw inset from the border and make the chat look ~10px
 * narrower than the agent log. The drag regions stay active so resizing
 * still works. */
.chat-panel__resize-handle::before {
  display: none;
}

/* =============== Left column: Nodes + attached Inspector flyout ===============
 * Nodes own the left rail. The inspector is rendered as a fixed popover
 * anchored to the selected canvas node's ellipsis control, not as a second
 * left-column panel. */

/* Width / height drop !important here so the browser's CSS-resize gesture
 * (it writes inline width/height on drag) actually takes effect. The
 * Reset toolbar button clears the inline values to revert to defaults. */
.panel--library {
  position: fixed !important;
  top: calc(var(--page-gutter) + 42px + var(--space-2)) !important;
  left: var(--page-gutter) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--col-left-w);
  height: min(
    720px,
    calc(100vh - var(--page-gutter) - 42px - var(--space-2) - var(--toolbar-pad) - var(--space-4))
  );
  max-height: calc(100vh - var(--page-gutter) - 42px - var(--space-2) - var(--toolbar-pad) - var(--space-4));
}

/* Native CSS resize on the side panels and agent log so each can be
 * dragged at the bottom-right corner. The chat panel has its own custom
 * resize handles already, so we don't double up there. */
.panel--library,
.agent-log {
  resize: both;
  overflow: auto;
  min-width: 200px;
  min-height: 80px;
  max-width: 600px;
  max-height: 80vh;
}

/* =============== Agent log accordion =============== */

.agent-log {
  position: fixed;
  z-index: 11;
  right: var(--page-gutter);
  bottom: var(--toolbar-pad);
  left: auto;
  width: var(--col-right-w);
  overflow: hidden;
}

body:not(.app-slava-restraint) .agent-log {
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #ccc;
  backdrop-filter: blur(8px);
}

/* When open, fill the full reservation so the gap above (chat-bottom)
 * stays consistent regardless of how much content is inside. */
body.agent-log-open .agent-log {
  height: var(--agent-h-open);
}

body.app-slava-restraint.agent-log-open.agent-log-empty .agent-log {
  height: var(--agent-h-empty);
}

.agent-log__drag-row {
  cursor: grab;
}

.agent-log__drag-row:active {
  cursor: grabbing;
}

.agent-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

body:not(.app-slava-restraint) .agent-log__header {
  font-size: 12px;
}

.agent-log__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body:not(.app-slava-restraint) .agent-log__title {
  letter-spacing: 0.4px;
  color: #ddd;
}

.agent-log__telemetry,
.agent-log__entry-marker,
.agent-log__empty-grid,
.agent-log__empty-status {
  display: none;
}

.agent-log__icon {
  display: inline-block;
}

body:not(.app-slava-restraint) .agent-log__icon {
  color: #7aa9ff;
  transform: rotate(-15deg);
}

.agent-log__chevron {
  display: inline-block;
  transition: transform 0.18s ease;
  font-size: 14px;
  line-height: 1;
}

body:not(.app-slava-restraint) .agent-log__chevron {
  color: #888;
}

.agent-log__chevron--open {
  transform: rotate(180deg);
}

.agent-log--open {
  padding-bottom: 0;
}

.agent-log__body {
  max-height: 240px;
  overflow-y: auto;
}

body:not(.app-slava-restraint) .agent-log__body {
  border-top: 1px solid #222;
  padding: 8px 12px 12px;
}

.agent-log__empty {
  padding: 14px 4px;
  text-align: center;
}

body:not(.app-slava-restraint) .agent-log__empty {
  color: #666;
  font-style: italic;
}

.agent-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-log__entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 11px;
}

body:not(.app-slava-restraint) .agent-log__entry {
  color: #bbb;
}

body:not(.app-slava-restraint) .agent-log__time {
  color: #666;
}

.agent-log__time {
  font-variant-numeric: tabular-nums;
}

body:not(.app-slava-restraint) .agent-log__source {
  color: #888;
}

.agent-log__source {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
}

body:not(.app-slava-restraint) .agent-log__msg {
  color: #ddd;
}

.agent-log__msg {
  word-break: break-word;
}
