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

:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --accent: #e94560;
  --accent-hover: #ff6b6b;
  --text-primary: #eee;
  --text-secondary: #aaa;
  --border: #333;
  --success: #4caf50;
  --warning: #ff9800;
}

body {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

header {
  background: var(--bg-secondary);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

header h1 {
  font-size: 1.5rem;
  color: var(--accent);
}

header .subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.workspace-selector {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workspace-selector select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
}

/* App Layout with Sidebar */
.app-layout {
  display: flex;
  height: calc(100vh - 60px);
}

.sidebar {
  width: 220px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
}

.btn-icon:hover {
  color: var(--text-primary);
}

.sidebar-actions {
  display: flex;
  gap: 0.25rem;
}

.frames-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.frames-list.hidden {
  display: none;
}

/* File Tree */
.file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.file-tree.hidden {
  display: none;
}

.file-tree-item {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-tree-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.file-tree-item.active {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.file-tree-item .file-icon {
  opacity: 0.7;
  font-size: 0.9rem;
}

.file-tree-folder {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
}

.file-tree-folder:first-child {
  margin-top: 0;
}

.frame-item {
  margin-bottom: 0.25rem;
  border-radius: 4px;
  overflow: hidden;
}

.frame-item.active {
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent);
}

.frame-item-header {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0;
}

.frame-item-header:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.frame-item.active .frame-item-header {
  color: var(--accent);
}

.frame-expand-icon {
  font-size: 0.6rem;
  opacity: 0.6;
  cursor: pointer;
  padding: 0.25rem 0.4rem 0.25rem 0;
  transition: opacity 0.15s;
}

.frame-expand-icon:hover {
  opacity: 1;
}

.frame-item .frame-item-name {
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  padding: 0.1rem 0;
}

.frame-item .frame-item-name:hover {
  text-decoration: underline;
}

/* Files within expanded frame */
.frame-files {
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
}

.frame-file-item {
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.frame-file-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.frame-file-item.active {
  background: var(--bg-primary);
  color: var(--accent);
}

.frame-file-item .file-icon {
  opacity: 0.7;
  font-size: 0.85rem;
}

.frame-file-folder {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.frame-no-files {
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.6;
}

/* API Section in Frame */
.frame-api-section {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.25rem;
}

.frame-api-header {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.frame-api-item {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.frame-api-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.frame-api-item.pure .api-purity-icon {
  color: var(--success);
}

.frame-api-item.impure .api-purity-icon {
  color: var(--warning);
}

.api-purity-icon {
  font-size: 0.7rem;
  width: 1em;
}

.api-fn-name {
  font-weight: 500;
  color: #61afef;
}

.api-fn-params {
  opacity: 0.6;
  font-size: 0.7rem;
}

/* Function Details View */
.function-details {
  padding: 1rem;
}

.function-details > div {
  margin-bottom: 1rem;
}

.fn-purity {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
}

.fn-purity.pure {
  background: rgba(76, 175, 80, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.fn-purity.impure {
  background: rgba(255, 152, 0, 0.2);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.fn-violations {
  background: rgba(255, 152, 0, 0.1);
  padding: 0.75rem;
  border-radius: 4px;
  border-left: 3px solid var(--warning);
}

.fn-violations ul {
  margin: 0.5rem 0 0 1.5rem;
  padding: 0;
}

.fn-violations li {
  margin: 0.25rem 0;
  font-size: 0.85rem;
}

.fn-description {
  color: var(--text-secondary);
  font-style: italic;
}

.fn-signature code {
  display: block;
  background: var(--bg-tertiary);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #61afef;
}

.fn-params ul {
  margin: 0.5rem 0 0 1.5rem;
  padding: 0;
}

.fn-params li {
  margin: 0.25rem 0;
}

.fn-params code {
  background: var(--bg-tertiary);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  color: #e06c75;
}

.fn-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fn-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Specs in Function Details */
.fn-specs-section {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.fn-specs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.fn-specs-title {
  font-weight: 600;
}

.fn-specs-header .spec-count {
  color: var(--text-secondary);
  font-weight: normal;
}

.btn-run-specs {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-run-specs:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.fn-specs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fn-spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-tertiary);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.fn-spec-item.spec-error {
  background: rgba(244, 67, 54, 0.1);
}

.fn-spec-item.passed {
  background: rgba(76, 175, 80, 0.15);
}

.fn-spec-item.failed {
  background: rgba(244, 67, 54, 0.15);
}

.fn-spec-item.running {
  opacity: 0.6;
}

.spec-expr {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.btn-spec-run, .btn-spec-reject {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 2px;
  line-height: 1;
  font-size: 0.75rem;
}

.btn-spec-run:hover {
  background: rgba(76, 175, 80, 0.2);
  color: var(--success);
}

.btn-spec-reject:hover {
  background: rgba(244, 67, 54, 0.2);
  color: var(--error);
}

.no-specs {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
}

/* Specs View */
.specs-view {
  padding: 1rem;
}

.specs-section {
  margin-bottom: 1.5rem;
}

.specs-section h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.spec-card.pending {
  border-left: 3px solid var(--warning);
}

.spec-card.validated {
  border-left: 3px solid var(--success);
}

.spec-card.rejected {
  border-left: 3px solid var(--accent);
  opacity: 0.6;
}

.spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.spec-fn {
  font-weight: 600;
  color: #61afef;
}

.spec-status {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
}

.spec-status.pending {
  background: rgba(255, 152, 0, 0.2);
  color: var(--warning);
}

.spec-status.validated {
  background: rgba(76, 175, 80, 0.2);
  color: var(--success);
}

.spec-status.rejected {
  background: rgba(233, 69, 96, 0.2);
  color: var(--accent);
}

.spec-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.spec-io pre {
  background: var(--bg-primary);
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.25rem 0 0 0;
  max-height: 100px;
  overflow: auto;
  font-size: 0.75rem;
}

.spec-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: flex-end;
}

.spec-actions .btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}

/* Test Run View */
.test-run-view {
  padding: 1rem;
}

.test-run-summary {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  font-weight: 600;
}

.test-run-summary.pass {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid var(--success);
}

.test-run-summary.fail {
  background: rgba(233, 69, 96, 0.2);
  border: 1px solid var(--accent);
}

.summary-passed {
  color: var(--success);
}

.summary-failed {
  color: var(--accent);
}

.test-fn-group {
  margin-bottom: 1rem;
}

.test-fn-group h3 {
  font-size: 0.9rem;
  color: #61afef;
  margin-bottom: 0.5rem;
}

.test-result {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

.test-result.pass {
  background: rgba(76, 175, 80, 0.1);
}

.test-result.fail {
  background: rgba(233, 69, 96, 0.1);
}

.test-icon {
  margin-right: 0.5rem;
  font-weight: bold;
}

.test-result.pass .test-icon {
  color: var(--success);
}

.test-result.fail .test-icon {
  color: var(--accent);
}

.test-inputs {
  color: var(--text-secondary);
}

.test-diff {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-primary);
  border-radius: 4px;
  font-size: 0.75rem;
}

.test-diff code {
  background: var(--bg-tertiary);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.empty-state {
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 1rem;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* Allow flex item to shrink for scrolling */
}

/* Frame Header */
.frame-header {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frame-header.hidden {
  display: none;
}

.frame-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.frame-title h2 {
  font-size: 1.1rem;
  color: var(--accent);
}

.frame-status {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 3px;
}

.frame-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Header Prompt Container */
.header-prompt-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 400px;
  margin: 0 1rem;
  position: relative;
}

.header-prompt-container input {
  flex: 1;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
}

.header-prompt-container input:focus {
  outline: none;
  border-color: var(--accent);
}

.header-chat-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.header-chat-dropdown.hidden {
  display: none;
}

.header-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 240px;
}

.header-chat-message {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.8rem;
}

.header-chat-message .author {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.header-chat-message .content {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-chat-dropdown .btn-text {
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.8rem;
}

/* Frame Version Navigation (in header) */
.frame-version-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  margin-left: auto;
  margin-right: 1rem;
}

.btn-use,
.btn-text {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7rem;
  font-family: inherit;
  margin-left: 0.5rem;
}

.btn-text:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-use:hover {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.btn-use.active {
  background: var(--success);
  border-color: var(--success);
  color: white;
  cursor: default;
}

.version-used-indicator {
  font-size: 0.7rem;
  color: var(--success);
  margin-left: 0.25rem;
}

.version-used-indicator.hidden {
  display: none;
}

/* DAG Visualization */
.dag-container {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
  max-height: 180px;
  overflow: auto;
}

.dag-container.hidden {
  display: none;
}

.dag-graph {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dag-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dag-node {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dag-node:hover {
  border-color: var(--text-secondary);
}

.dag-node.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.dag-node .node-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dag-arrow {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.dual-pane {
  display: grid;
  grid-template-columns: 1fr;  /* Single column - generator moved to sidebar */
  gap: 1px;
  background: var(--border);
  flex: 1;
  min-height: 0;
}

/* Hide generator pane - now in sidebar */
.generator-pane {
  display: none;
}

.dual-pane.hidden {
  display: none;
}

.pane {
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Master pane uses chat container instead of pane-content */
.master-pane {
  display: flex;
  flex-direction: column;
}

.pane-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pane-header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.version-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.version-info select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
}

.pane-content {
  flex: 1;
  padding: 0.5rem;
  min-height: 0;
  overflow: hidden;
}

.pane-content textarea {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: none;
  line-height: 1.5;
}

.pane-content textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.pane-content textarea::placeholder {
  color: var(--text-secondary);
}

.pane-actions {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn.primary {
  background: var(--accent);
  color: white;
}

.btn.primary:hover {
  background: var(--accent-hover);
}

.btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: var(--border);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Output Section */
.output-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.output-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.output-controls select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
}

.output-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.output-header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.output-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.output-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

/* Output Files */
.output-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.output-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.output-file:hover {
  border-color: var(--accent);
}

.output-file.active {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.output-file .file-icon {
  opacity: 0.7;
}

.response-text {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.6;
}

.response-text code {
  background: var(--bg-tertiary);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.response-text pre {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 4px;
  margin: 0.5rem 0;
  overflow-x: auto;
}

/* File Preview */
.file-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.file-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.file-preview-path {
  color: var(--accent);
  font-weight: 600;
}

.file-preview-content {
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 400px;
  overflow: auto;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
}

.modal-content h3 {
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.modal-content p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.modal-content textarea {
  width: 100%;
  min-height: 150px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 1rem;
}

.modal-content textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.modal-actions .web-search-toggle {
  margin-right: auto;
}

.modal-field {
  margin-bottom: 1rem;
}

.modal-field label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.modal-field input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: inherit;
}

.modal-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* Dependency frame list in modal */
.dep-frame-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.dep-frame-item {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dep-frame-item:last-child {
  border-bottom: none;
}

.dep-frame-item:hover {
  background: var(--bg-tertiary);
}

.dep-frame-item.selected {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent);
}

.dep-frame-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dep-frame-name {
  font-weight: 500;
}

.dep-frame-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Frame dependencies in header */
.frame-deps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  font-size: 0.85rem;
}

.deps-label {
  color: var(--text-secondary);
}

.deps-list {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.dep-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-tertiary);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  gap: 0.3rem;
}

.dep-tag .remove-dep {
  cursor: pointer;
  color: var(--text-secondary);
  margin-left: 0.2rem;
}

.dep-tag .remove-dep:hover {
  color: var(--accent);
}

/* Dependency warning in sidebar */
.dep-warning-icon {
  color: var(--warning);
  margin-left: auto;
  font-size: 0.9rem;
}

.frame-item.has-dep-warning .frame-item-header {
  border-left: 3px solid var(--warning);
  padding-left: calc(0.75rem - 3px);
}

/* Dependency notification banner */
.dep-notification {
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid var(--warning);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.dep-notification-icon {
  color: var(--warning);
}

.dep-notification-text {
  flex: 1;
}

.dep-notification-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.2rem;
  font-size: 1rem;
}

.dep-notification-dismiss:hover {
  color: var(--text-primary);
}

.dep-notification.hidden {
  display: none;
}

/* Loading */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 1001;
}

.loading.hidden {
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Master pane styling */
.master-pane .pane-header h2 {
  color: var(--accent);
}

/* Chat UI Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 0;
  align-content: flex-start;
}

.chat-message {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 85%;
}

.chat-message.other-message {
  align-self: flex-start;
  border-left: 3px solid var(--text-secondary);
  border-radius: 2px 6px 6px 2px;
}

.chat-message.own-message {
  align-self: flex-end;
  border-right: 3px solid var(--accent);
  border-radius: 6px 2px 2px 6px;
}

.chat-author {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.chat-message.own-message .chat-author {
  text-align: right;
}

.chat-content {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-message.highlighted {
  background: rgba(233, 69, 96, 0.15);
}

.chat-message.other-message.highlighted {
  border-left-color: var(--accent);
}

.chat-message.own-message.highlighted {
  border-right-color: var(--accent);
}

.chat-message:hover {
  background: var(--bg-primary);
}

.chat-input-container {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}

.chat-input-container textarea {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.85rem;
  resize: none;
  line-height: 1.4;
  min-height: 38px;
  max-height: 100px;
}

.chat-input-container textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-input-container textarea::placeholder {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.chat-input-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
}

.chat-input-actions .web-search-toggle {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  margin-right: auto;
}

.chat-input-actions .web-search-toggle .toggle-icon {
  font-size: 0.85rem;
}

.chat-input-actions .web-search-toggle .toggle-label {
  font-size: 0.7rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  height: auto;
}

.chat-empty {
  color: var(--text-secondary);
  font-style: italic;
  padding: 1rem;
  font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 900px) {
  .dual-pane {
    grid-template-columns: 1fr;
    height: auto;
  }

  .pane {
    min-height: 300px;
  }

  .output-section {
    height: auto;
    min-height: 300px;
  }
}

/* File Viewer */
.file-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  min-height: 0; /* Allow flex item to shrink for scrolling */
}

.file-viewer.hidden {
  display: none;
}

.file-viewer-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.file-viewer-path {
  color: var(--accent);
  font-weight: 500;
  flex: 1;
}

.file-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-viewer-controls select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
}

.file-viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.file-viewer-actions .btn-icon.copied {
  color: var(--success);
}

.file-viewer-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  background: var(--bg-primary);
  font-size: 0.85rem;
  line-height: 1.6;
  min-height: 0; /* Allow flex item to shrink for scrolling */
}

.file-viewer-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Syntax Highlighting */
.syntax-keyword { color: #c678dd; }
.syntax-string { color: #98c379; }
.syntax-number { color: #d19a66; }
.syntax-comment { color: #5c6370; font-style: italic; }
.syntax-function { color: #61afef; }
.syntax-class { color: #e5c07b; }
.syntax-operator { color: #56b6c2; }
.syntax-punctuation { color: #abb2bf; }
.syntax-property { color: #e06c75; }
.syntax-tag { color: #e06c75; }
.syntax-attr-name { color: #d19a66; }
.syntax-attr-value { color: #98c379; }

.line-number {
  display: inline-block;
  width: 3em;
  color: var(--text-secondary);
  text-align: right;
  padding-right: 1em;
  margin-right: 1em;
  border-right: 1px solid var(--border);
  user-select: none;
  opacity: 0.5;
}

/* Diff View Styles */
.generator-diff {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: auto;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  min-height: 0;
}

.generator-diff.hidden {
  display: none;
}

.generator-pane .pane-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.diff-view {
  padding: 0.5rem 0;
}

.diff-line {
  display: flex;
  padding: 0 0.75rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.diff-marker {
  flex-shrink: 0;
  width: 1.5em;
  text-align: center;
  font-weight: bold;
  user-select: none;
}

.diff-content {
  flex: 1;
  padding-left: 0.5rem;
}

.diff-added {
  background: rgba(76, 175, 80, 0.15);
}

.diff-added .diff-marker {
  color: #4caf50;
}

.diff-added .diff-content {
  color: #a5d6a7;
}

.diff-removed {
  background: rgba(244, 67, 54, 0.15);
}

.diff-removed .diff-marker {
  color: #f44336;
}

.diff-removed .diff-content {
  color: #ef9a9a;
  text-decoration: line-through;
  opacity: 0.8;
}

.diff-unchanged {
  background: transparent;
}

.diff-unchanged .diff-marker {
  color: var(--text-secondary);
  opacity: 0.3;
}

.diff-unchanged .diff-content {
  color: var(--text-secondary);
}

.diff-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

/* Toggle diff button active state */
#toggle-diff.active,
#toggle-file-diff.active {
  color: var(--accent);
  background: rgba(233, 69, 96, 0.2);
  border-radius: 3px;
}

/* Version Navigation */
.version-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.btn-nav {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-nav:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.btn-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-version {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
  min-width: 40px;
}

.btn-version:hover {
  border-color: var(--text-secondary);
}

/* Version button status indicators */
.btn-version.version-truncated {
  border-color: #ff5252;
  background: rgba(255, 82, 82, 0.15);
}

.btn-version.version-error {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.15);
}

.btn-version.version-incomplete {
  border-color: #64b5f6;
  background: rgba(100, 181, 246, 0.15);
}

/* Version dropdown item status */
.version-item.version-truncated {
  border-left: 3px solid #ff5252;
}

.version-item.version-filtered,
.version-item.version-blocked {
  border-left: 3px solid #f44336;
}

.version-item.version-incomplete {
  border-left: 3px solid #64b5f6;
}

.version-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.version-dropdown.hidden {
  display: none;
}

.version-list {
  padding: 0.25rem;
}

.version-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.version-item.active {
  background: var(--accent);
  color: white;
}

.version-item .version-label {
  font-weight: 500;
}

.version-item .version-meta {
  font-size: 0.7rem;
  opacity: 0.7;
}


/* File List Diff */
.file-list-diff {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.file-list-diff.hidden {
  display: none;
}

.file-diff-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.file-diff-item.added {
  background: rgba(76, 175, 80, 0.15);
  color: #a5d6a7;
}

.file-diff-item.removed {
  background: rgba(244, 67, 54, 0.15);
  color: #ef9a9a;
  text-decoration: line-through;
}

.file-diff-item .file-diff-marker {
  font-weight: bold;
}

.file-diff-item.added .file-diff-marker {
  color: #4caf50;
}

.file-diff-item.removed .file-diff-marker {
  color: #f44336;
}

/* Sidebar Output Navigation */
.frame-output-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-primary);
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.btn-nav-sm {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-nav-sm:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.btn-nav-sm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.output-version-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  min-width: 60px;
  text-align: center;
}

/* Special file items */
.frame-file-item.special {
  color: var(--accent);
  font-style: italic;
}

.frame-file-item.special:hover {
  background: rgba(233, 69, 96, 0.1);
}

/* Raw output styling */
.raw-output {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Raw text view for generator (non-diff mode) */
.raw-text-view {
  padding: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.raw-line {
  display: flex;
  padding: 0 0.75rem;
}

.raw-line .line-num {
  flex-shrink: 0;
  width: 3em;
  color: var(--text-secondary);
  text-align: right;
  padding-right: 0.75rem;
  border-right: 1px solid var(--border);
  margin-right: 0.75rem;
  user-select: none;
  opacity: 0.5;
}

.raw-line .line-content {
  flex: 1;
  color: var(--text-primary);
}

/* Diff section labels */
.diff-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-right: 0.5rem;
}

/* AST View Styles */
.ast-view {
  padding: 1rem;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

.ast-purity-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.ast-purity-badge.pure {
  background: rgba(76, 175, 80, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.ast-purity-badge.impure {
  background: rgba(255, 152, 0, 0.2);
  color: var(--warning);
  border: 1px solid var(--warning);
}

/* Inline violation highlighting */
.ast-violation {
  color: var(--warning);
  background: rgba(255, 152, 0, 0.2);
  padding: 0 0.2rem;
  border-radius: 2px;
  border-bottom: 1px dashed var(--warning);
  cursor: help;
}

.ast-violation:hover {
  background: rgba(255, 152, 0, 0.35);
}

.ast-description {
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
}

/* AST Code Block - Tree View */
.ast-code {
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 0.75rem 0;
  overflow-x: auto;
  font-size: 0.85rem;
}

.ast-tree {
  display: flex;
  flex-direction: column;
}

/* Function Header */
.ast-fn-header {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.ast-fn-name {
  color: #61afef;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Parameter row - tag style */
.ast-params-row {
  padding: 0.35rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ast-param-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.8rem;
  cursor: default;
}

.ast-param-tag:hover {
  box-shadow: 0 0 0 1px var(--border);
}

.ast-param-type {
  background: rgba(86, 182, 194, 0.2);
  color: #56b6c2;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.ast-param-tag .ast-param-name {
  color: #e06c75;
  padding: 0.2rem 0.5rem;
}

.ast-type {
  color: #56b6c2;
  font-size: 0.9em;
}

.ast-returns {
  color: var(--text-secondary);
  margin-left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ast-type-tag {
  background: rgba(86, 182, 194, 0.15);
  color: #56b6c2;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.ast-default {
  color: #5c6370;
}

.ast-sep {
  color: var(--text-secondary);
}

.ast-rest {
  color: #c678dd;
}

.ast-hint {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-left: 0.15rem;
  cursor: help;
  opacity: 0.5;
}

.ast-hint:hover {
  opacity: 1;
}

.ast-destructure {
  color: var(--text-secondary);
}

/* Badges */
.ast-fn-badges {
  padding: 0.25rem 1rem 0.5rem;
  display: flex;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.ast-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}

.ast-badge.async {
  background: rgba(156, 39, 176, 0.2);
  color: #ce93d8;
}

.ast-badge.gen {
  background: rgba(0, 188, 212, 0.2);
  color: #80deea;
}

/* Function Body - Tree Lines */
.ast-fn-body {
  display: flex;
  flex-direction: column;
}

.ast-line {
  display: flex;
  align-items: flex-start;
  padding: 0.2rem 1rem;
  padding-left: calc(1rem + var(--depth, 0) * 1.25rem);
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  cursor: default;
  position: relative;
}

.ast-line::before {
  content: '';
  position: absolute;
  left: calc(0.75rem + var(--depth, 0) * 1.25rem);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.3;
}

.ast-line:first-child::before {
  top: 50%;
}

.ast-line:last-child::before {
  bottom: 50%;
}

.ast-line:only-child::before {
  display: none;
}

.ast-line:hover {
  background: rgba(255,255,255,0.03);
  border-left-color: var(--accent);
}

.ast-content {
  flex: 1;
  line-height: 1.5;
}

/* Keywords */
.ast-kw {
  color: #c678dd;
  font-weight: 500;
}

/* Variables */
.ast-var {
  color: #e5c07b;
}

/* Expressions */
.ast-expr {
  color: var(--text-primary);
}

.ast-ident {
  color: #e06c75;
}

.ast-string {
  color: #98c379;
}

.ast-number {
  color: #d19a66;
}

.ast-bool {
  color: #d19a66;
}

.ast-null {
  color: #d19a66;
  font-style: italic;
}

.ast-literal {
  color: #98c379;
}

.ast-op {
  color: #56b6c2;
}

.ast-call {
  color: #61afef;
}

.ast-call-expr {
  color: var(--text-primary);
}

/* Special statement styles */
.ast-return {
  color: var(--text-primary);
}

.ast-return .ast-kw {
  color: #c678dd;
}

.ast-throw {
  color: #e06c75;
}

.ast-unknown {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.7;
}

.ast-node-type {
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.5;
  margin-right: 0.5rem;
}

/* AST Specs Section */
.ast-specs-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ast-specs-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ast-specs-title {
  font-family: system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
}

.ast-spec-count {
  background: var(--bg-tertiary);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ast-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ast-spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.85rem;
}

.ast-spec-item.passed {
  background: rgba(76, 175, 80, 0.15);
  border-left: 3px solid var(--success);
}

.ast-spec-item.failed {
  background: rgba(244, 67, 54, 0.15);
  border-left: 3px solid var(--accent);
}

.ast-spec-item .spec-io {
  color: #61afef;
}

.ast-spec-item .spec-arrow {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ast-spec-item .spec-output {
  color: #98c379;
  flex: 1;
}

.ast-spec-item .spec-actions {
  margin-left: auto;
}

.ast-no-specs {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
  font-family: system-ui, sans-serif;
}

.ast-raw-source {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-primary);
}

.ast-reextract-hint {
  color: var(--text-secondary);
  font-style: italic;
  padding: 1rem;
  text-align: center;
  font-family: system-ui, sans-serif;
}

/* Preview iframe styles */
.preview-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.preview-toolbar .btn-icon {
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
}

.preview-url {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

.preview-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
}

.preview-empty-state .empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.preview-empty-state h3 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.preview-empty-state p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.preview-empty-state .empty-state-hint {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.preview-item {
  color: var(--success) !important;
}

.preview-item .file-icon {
  filter: none;
}

/* Web Search Toggle */
.web-search-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
}

.web-search-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.web-search-toggle input[type="checkbox"] {
  display: none;
}

.web-search-toggle .toggle-icon {
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.web-search-toggle .toggle-label {
  font-size: 0.8rem;
}

.web-search-toggle:has(input:checked) {
  background: rgba(76, 175, 80, 0.15);
  color: var(--success);
}

.web-search-toggle:has(input:checked) .toggle-icon {
  opacity: 1;
}

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 450px;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  z-index: 1000;
  animation: toast-slide-in 0.3s ease-out;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-warning {
  border-color: #ffa726;
  background: rgba(255, 167, 38, 0.1);
}

.toast-error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.toast-success {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

.toast-message {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.toast-warning .toast-message {
  color: #ffa726;
}

.toast-error .toast-message {
  color: #ff6b6b;
}

.toast-success .toast-message {
  color: #4caf50;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.toast-close:hover {
  opacity: 1;
}

/* Output warning and meta banners */
.output-warning-banner {
  background: rgba(255, 167, 38, 0.1);
  border: 1px solid #ffa726;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.output-warning {
  color: #ffa726;
  font-size: 0.9rem;
  line-height: 1.4;
}

.output-warning + .output-warning {
  margin-top: 0.5rem;
}

.output-meta-banner {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.raw-output-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.raw-output-actions .btn {
  flex-shrink: 0;
}

.reparse-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Output Status Banners (truncated, filtered, etc.) */
.output-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border-left: 4px solid;
}

.output-status-banner .status-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.output-status-banner .status-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.output-status-banner .status-content strong {
  font-size: 0.95rem;
}

.output-status-banner .status-message {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Truncated - error/warning style */
.output-status-banner.status-truncated {
  background: rgba(255, 82, 82, 0.15);
  border-left-color: #ff5252;
  color: #ff8a80;
}

.output-status-banner.status-truncated strong {
  color: #ff5252;
}

/* Filtered - safety style */
.output-status-banner.status-filtered {
  background: rgba(255, 167, 38, 0.15);
  border-left-color: #ffa726;
  color: #ffcc80;
}

.output-status-banner.status-filtered strong {
  color: #ffa726;
}

/* Blocked - severe style */
.output-status-banner.status-blocked {
  background: rgba(244, 67, 54, 0.15);
  border-left-color: #f44336;
  color: #ef9a9a;
}

.output-status-banner.status-blocked strong {
  color: #f44336;
}

/* Incomplete - info style */
.output-status-banner.status-incomplete {
  background: rgba(100, 181, 246, 0.15);
  border-left-color: #64b5f6;
  color: #90caf9;
}

.output-status-banner.status-incomplete strong {
  color: #64b5f6;
}

/* Schema outdated - purple/version style */
.output-status-banner.status-schema-outdated {
  background: rgba(171, 71, 188, 0.15);
  border-left-color: #ab47bc;
  color: #ce93d8;
  align-items: center;
}

.output-status-banner.status-schema-outdated strong {
  color: #ab47bc;
}

.schema-migrate-btn {
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  background: #ab47bc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.schema-migrate-btn:hover {
  background: #9c27b0;
}

.schema-migrate-btn:disabled {
  background: #7b1fa2;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Web Search Details */
.websearch-item {
  color: #61afef !important;
}

.websearch-details {
  padding: 1rem;
}

.websearch-section {
  margin-bottom: 1.5rem;
}

.websearch-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.websearch-queries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.websearch-query {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.websearch-query .query-icon {
  font-size: 1rem;
}

.websearch-query .query-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #61afef;
}

.websearch-sources {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.websearch-source {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.websearch-source .source-link {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.websearch-source .source-link:hover {
  background: var(--bg-secondary);
}

.websearch-source .source-title {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.websearch-source .source-url {
  display: block;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.websearch-supports {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.websearch-support {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 4px;
  border-left: 3px solid #61afef;
}

.websearch-support .support-segment {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.websearch-support .support-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.websearch-support .support-source-link {
  font-size: 0.75rem;
  color: #61afef;
  background: rgba(97, 175, 239, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
}

.websearch-support .support-source-link:hover {
  background: rgba(97, 175, 239, 0.2);
}

.websearch-more {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.5rem;
}

/* Outdated entity indicators */
.frame-item.outdated::after,
.workspace-option.outdated::after {
  content: "old";
  font-size: 0.65rem;
  background: #ff9800;
  color: #1a1a2e;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* Welcome Modal */
.welcome-modal {
  background: rgba(0, 0, 0, 0.85);
}

.welcome-content {
  max-width: 550px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
}

.welcome-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.welcome-header h2 {
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
}

.welcome-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.welcome-form .modal-field {
  margin-bottom: 0;
}

.welcome-form .modal-field label {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.welcome-form textarea {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  transition: border-color 0.2s;
}

.welcome-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.welcome-form textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  opacity: 0.8;
}

.welcome-form .modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.welcome-form .btn.primary {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Workspace Info View */
.workspace-info {
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.workspace-info.hidden {
  display: none;
}

.workspace-info-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.workspace-info-header h2 {
  color: var(--accent);
  font-size: 1.5rem;
  margin: 0;
}

.workspace-info-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.workspace-info-section {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.25rem;
  border-left: 3px solid var(--accent);
}

.workspace-info-section h3 {
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}

.workspace-purpose-text,
.workspace-description-text {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.workspace-info-hint {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: 6px;
  text-align: center;
}

.workspace-info-hint p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

/* Web search no data message */
.websearch-no-data {
  background: var(--bg-tertiary);
  border-left-color: var(--warning);
}

.websearch-no-data-msg {
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.websearch-no-data-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

/* User info in header */
.user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#user-display {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0.25rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

/* Registration Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
}

.registration-modal-content h2 {
  margin: 0 0 0.5rem 0;
  color: var(--accent);
}

.registration-modal-content p {
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
}

.registration-modal-content input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.registration-modal-content input:focus {
  outline: none;
  border-color: var(--accent);
}

.registration-modal-content .hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
}

.registration-modal-content .error {
  color: var(--error);
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
  min-height: 1.2em;
}

.registration-modal-content button {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.registration-modal-content button:hover {
  background: var(--accent-hover);
}

/* Version display */
.version-display {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.6;
  margin-left: 0.5rem;
}

/* Welcome View (inline, not modal) */
.welcome-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  height: 100%;
}

.welcome-view.hidden {
  display: none;
}

.welcome-content-inline {
  max-width: 550px;
  width: 100%;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

/* Sidebar hidden state */
.sidebar.hidden {
  display: none;
}

/* Frame Configuration View */
.frame-config {
  flex: 1;
  padding: 2rem;
  max-width: 600px;
  overflow-y: auto;
}

.frame-config.hidden {
  display: none;
}

.frame-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.frame-config-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.frame-config-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.config-section {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.25rem;
}

.config-section h4 {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.config-rename {
  display: flex;
  gap: 0.75rem;
}

.config-rename input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.config-rename input:focus {
  outline: none;
  border-color: var(--accent);
}

.config-metadata {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metadata-row {
  display: flex;
  gap: 0.75rem;
}

.metadata-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 120px;
}

.metadata-value {
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: monospace;
}

.config-danger {
  border-left: 3px solid var(--error);
}

.config-danger h4 {
  color: var(--error);
}

.config-danger p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.btn-danger {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}

.btn-danger:hover {
  background: var(--error);
  color: white;
}

/* Workspace Configuration View (reuses frame-config styles) */
.workspace-config {
  flex: 1;
  padding: 2rem;
  max-width: 600px;
  overflow-y: auto;
}

.workspace-config.hidden {
  display: none;
}

/* Participants list */
.participants-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.participant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.participant-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.participant-name {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.participant-role {
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: var(--bg-secondary);
  border-radius: 3px;
}

.participant-role.admin {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.15);
}

.participant-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.9rem;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}

.participant-remove:hover {
  opacity: 1;
  color: var(--error);
}

/* Add participant search */
.add-participant {
  position: relative;
}

.add-participant input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.add-participant input:focus {
  outline: none;
  border-color: var(--accent);
}

.participant-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.participant-search-results.hidden {
  display: none;
}

.search-result-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.search-result-item:hover {
  background: var(--bg-tertiary);
}

.search-no-results {
  padding: 0.5rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Workspace Header Actions */
.workspace-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Invite View */
.invite-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 100;
}

.invite-view.hidden {
  display: none;
}

.invite-content {
  max-width: 450px;
  width: 100%;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.invite-header h2 {
  color: var(--accent);
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.invite-message {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.invite-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 1rem;
  color: var(--error);
  font-size: 0.9rem;
}

.invite-error.hidden {
  display: none;
}

.invite-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.invite-actions .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}