/* SOUL-O - Glass UI with swarm sphere background */
/* Dieter Rams: "Less, but better" */

:root {
  --accent: #c9956a;
  --dim: #7a8f6a;
  --err: #b57878;
  --bg: #080706;
  --glass-bg: rgba(13, 12, 11, 0.45);
  --glass-border: rgba(201, 149, 106, 0.18);
  --panel-border: rgba(201, 149, 106, 0.15);
  --kernel-bar-height: 52px;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --z-canvas: 0;
  --z-glass: 1;
  --z-kernel-bar: 2;
  --z-panels: 10;
  
  /* Design tokens - preserved */
  --color-primary: #c9956a;
  --color-primary-hover: #d4a57a;
  --color-primary-muted: rgba(201, 149, 106, 0.15);
  --color-bg: #080706;
  --color-surface: rgba(13, 12, 11, 0.6);
  --color-surface-elevated: rgba(13, 12, 11, 0.8);
  --color-text: #fff8e7;
  --color-text-secondary: #d4c4b0;
  --color-text-muted: #8a7a6a;
  --color-border: rgba(201, 149, 106, 0.2);
  --color-border-strong: rgba(201, 149, 106, 0.4);
  --color-glass-bg: rgba(13, 12, 11, 0.5);
  --color-glass-border: rgba(201, 149, 106, 0.15);
  --color-danger: #b57878;
  --color-danger-muted: rgba(181, 120, 120, 0.15);
  --color-warning: #ffb84d;
  --color-warning-muted: rgba(255, 184, 77, 0.15);
  --color-success: #7a8f6a;
  --color-success-muted: rgba(122, 143, 106, 0.15);
  --color-info: #ff8c2e;
  --color-info-muted: rgba(255, 140, 46, 0.15);
  --color-status-connected: #7a8f6a;
  --color-status-disconnected: #b57878;
  --color-status-pending: #ffb84d;
  
  /* Rams Geometry: Single unit system */
  --unit: 4px;
  
  /* Spacing scale */
  --space-0: 0;
  --space-1: calc(1 * var(--unit));
  --space-2: calc(2 * var(--unit));
  --space-3: calc(3 * var(--unit));
  --space-4: calc(4 * var(--unit));
  --space-5: calc(6 * var(--unit));
  --space-6: calc(8 * var(--unit));
  --space-7: calc(12 * var(--unit));
  --space-8: calc(16 * var(--unit));
  
  /* Typography */
  --font-family-mono: "Share Tech Mono", "JetBrains Mono", "Fira Code", monospace;
  --font-family-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-xs: 10px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --line-height-relaxed: 1.5;
  
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.03em;
  --letter-spacing-wider: 0.06em;
  
  /* Radius */
  --radius-none: 0;
  --radius-sharp: calc(1 * var(--unit));
  --radius-soft: calc(2 * var(--unit));
  --radius-pill: 9999px;
  
  /* Shadows */
  --shadow-level-1: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-level-2: 0 4px 8px rgba(0,0,0,0.2);
  --shadow-level-3: 0 8px 16px rgba(0,0,0,0.25);
  --shadow-focus: 0 0 0 2px var(--color-primary);
  
  /* Transitions */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  
  /* Z-Index */
  --z-base: 0;
  --z-canvas: 0;
  --z-glass: 1;
  --z-content: 10;
  --z-overlay: 100;
  --z-modal: 200;
  
  /* Layout */
  --session-sidebar-width: 240px;
  --session-sidebar-min-width: 200px;
  --session-sidebar-max-width: 360px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family-mono);
  background: var(--bg);
  color: var(--color-text);
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============ KERNEL BAR ============ */
soul-kernel-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-kernel-bar);
  height: var(--kernel-bar-height);
  font-family: var(--font-family-mono);
}

/* ============ MAIN APP LAYOUT ============ */
/* Two-column layout: Session Sidebar (LEFT) + Channel Area (RIGHT) */
#appLayout {
  position: fixed;
  top: var(--kernel-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-panels);
  display: flex;
  flex-direction: row;
}

/* ============ SESSION SIDEBAR (LEFT) - opencode CLI ============ */
.session-sidebar {
  position: relative;
  flex: 0 0 var(--session-sidebar-width);
  width: auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  overflow: hidden;
  z-index: calc(var(--z-content) + 1);
}

/* Session List (vertical stack) */
.session-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  background: var(--color-surface-elevated);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  flex: 1 1 auto;
}
.session-list::-webkit-scrollbar {
  width: 4px;
}
.session-list::-webkit-scrollbar-track {
  background: transparent;
}
.session-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.session-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-soft);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-standard);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.session-item:hover:not([aria-selected="true"]) {
  color: var(--color-text);
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
}
.session-item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-primary);
}
.session-item[aria-selected="true"] {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.session-item .session-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.session-item .session-label {
  display: inline;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* New session button */
.session-item.new-session-btn {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--panel-border);
  color: var(--color-primary);
  background: transparent;
  border-color: var(--color-primary);
}
.session-item.new-session-btn:hover {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.session-item.new-session-btn .session-icon {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* ============ CHANNEL AREA (RIGHT) - TV Channels ============ */
.channel-area {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  z-index: var(--z-content);
}

/* Channel Tabs (top bar) */
.channel-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--panel-border);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  flex-shrink: 0;
}
.channel-tabs::-webkit-scrollbar {
  height: 4px;
}
.channel-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.channel-tabs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.channel-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-soft);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-standard);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.channel-tab:hover:not([aria-selected="true"]) {
  color: var(--color-text);
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
}
.channel-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-primary);
}
.channel-tab[aria-selected="true"] {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.channel-tab .channel-icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}
.channel-tab .channel-label {
  display: none;
}
@media (min-width: 1024px) {
  .channel-tab .channel-label {
    display: inline;
  }
}

/* Channel Panels Container */
.channel-panels {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.channel-panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.channel-panel.active {
  display: flex;
}
.channel-panel[hidden] {
  display: none !important;
}

/* Terminal Panel fills channel */
.panel-main {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
}

terminal-panel {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

/* Chat Channel Wrapper */
.chat-channel-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-channel-wrapper soul-chat-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Channel Panel Header */
.channel-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--panel-border);
  background: var(--color-surface-elevated);
  flex-shrink: 0;
}
.channel-panel-header h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.channel-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.channel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-standard);
  -webkit-tap-highlight-color: transparent;
}
.channel-btn:hover {
  color: var(--color-primary-hover);
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
}
.channel-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.channel-btn[aria-pressed="true"] {
  color: var(--color-warning);
  background: var(--color-warning-muted);
  border-color: var(--color-warning);
}
#wireframeViewLabel {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: 0 var(--space-2);
}

/* Wireframe Channel */
#channel-wireframe {
  background: transparent;
}
#wireframeFlowCanvasContainer {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
#wireframeFlowCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#wireframeSwarmCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.25;
  z-index: 0;
}
#wireframeFlowCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 1;
}

/* Logs Channel */
#channel-logs {
  background: var(--color-surface);
}
#channel-logs .log-controls {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--panel-border);
  background: var(--color-surface-elevated);
  flex-shrink: 0;
}
#channel-logs .log-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

/* Agents Channel */
#channel-agents {
  background: var(--color-surface);
}
.agents-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}
.agent-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  background: var(--color-surface-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sharp);
  transition: all var(--duration-fast);
}
.agent-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
}
.agent-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-status.active { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.agent-status.idle { background: var(--color-warning); }
.agent-status.error { background: var(--color-danger); }
.agent-name {
  flex: 1 1 auto;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Metrics Channel */
#channel-metrics {
  background: var(--color-surface);
}
.metrics-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}
.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--panel-border);
}
.metric-row:last-child {
  border-bottom: none;
}
.metric-label {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}
.metric-value {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.metric-value.warn { color: var(--color-warning); }
.metric-value.crit { color: var(--color-danger); }
.metric-value.ok { color: var(--color-success); }

/* Flow Canvas Container */
.flow-canvas-container {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  :root {
    --session-sidebar-width: 280px;
  }
  .channel-tab .channel-label {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --session-sidebar-width: 100vw;
  }
  #appLayout {
    flex-direction: column;
  }
  .channel-area {
    flex: 1 1 auto;
    min-width: 0;
  }
  .session-sidebar {
    position: fixed;
    top: var(--kernel-bar-height);
    left: 0;
    bottom: 0;
    right: auto;
    width: var(--session-sidebar-width);
    height: calc(100dvh - var(--kernel-bar-height));
    max-height: calc(100dvh - var(--kernel-bar-height));
    border-right: none;
    border-bottom: 1px solid var(--panel-border);
    box-shadow: var(--shadow-level-3);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--easing-standard);
    z-index: var(--z-overlay);
  }
  .session-sidebar.open {
    transform: translateX(0);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --kernel-bar-height: 40px;
  }
  soul-kernel-bar {
    height: 40px;
  }
  #appLayout {
    top: 40px;
  }
  .session-sidebar {
    top: 40px;
    height: calc(100dvh - 40px);
    max-height: calc(100dvh - 40px);
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .session-item,
  .channel-tab,
  #wireframeSwarmCanvas {
    transition: none;
  }
}

/* ============ HIGH DPI ============ */
@media (min-resolution: 2dppx) {
  .session-sidebar {
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
  }
}

/* ============ WIREFRAME SELECT/BUTTON STYLES ============ */
.wireframe-select,
.wireframe-btn,
.wireframe-input {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sharp);
  color: var(--color-text);
  padding: var(--space-1) var(--space-3);
}
.wireframe-select:focus,
.wireframe-btn:focus-visible,
.wireframe-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.wireframe-btn:hover:not(:disabled) {
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.wireframe-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wireframe-input {
  width: 100%;
  min-height: 44px;
  resize: vertical;
}

/* Mobile sidebar toggle button in kernel bar */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-standard);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  color: var(--color-primary-hover);
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
  transform: scale(1.05);
}
.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .sidebar-toggle {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  .session-sidebar.open {
    transform: translateX(0);
  }
  .session-sidebar.open::before {
    content: '';
    position: fixed;
    top: var(--kernel-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
  }
}