@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');





:root {
  /* BACKGROUNDS */
  --bg-app: #030303;
  --bg-sidebar: rgba(5, 5, 5, 0.85); /* Darker, less transparent for readability */
  --bg-card: rgba(20, 20, 20, 0.6);
  --bg-input: rgba(10, 10, 10, 0.9);
  
  /* TEXT */
  --text-main: #ffffff;
  --text-muted: #94a3b8; /* Slate-400 */
  --text-dim: #475569;   /* Slate-600 */
  
  /* ACCENTS */
  --gold-primary: #EAB308;
  --gold-light: #FDE047;
  --gold-dark: #854D0E;
  --gold-glow: rgba(234, 179, 8, 0.3);
  --gold-gradient: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
  
  /* USER BUBBLE COLOR (Slate Blue) */
  --user-bubble-bg: #1E293B;
  --user-bubble-border: #334155;
  
  /* BORDERS & EFFECTS */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(234, 179, 8, 0.5);
  --glass-blur: blur(20px);
  --shadow-float: 0 10px 40px -10px rgba(0,0,0,0.7);
  
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}




.blurred-text {
  filter: blur(6px);
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}




.blurred-text:hover {
  filter: blur(6px); /* Wird etwas klarer beim Hovern */
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}




.hidden-slot {
  background: rgba(20, 20, 20, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}




.hidden-slot:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  background: rgba(234, 179, 8, 0.05);
}




/* RESET */




* { box-sizing: border-box; outline: none; -webkit-font-smoothing: antialiased; }




body, html { margin: 0; padding: 0; height: 100%; font-family: var(--font-main); background: var(--bg-app); color: var(--text-main); overflow: hidden; }




button, input, select, textarea { font-family: inherit; font-size: inherit; }




/* SCROLLBAR */




::-webkit-scrollbar { width: 6px; }




::-webkit-scrollbar-track { background: transparent; }




::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }




::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }




/* LAYOUT */




#app-root, .app-container { width: 100%; height: 100%; display: flex; flex-direction: row; position: relative; }




/* CINEMATIC BACKGROUND */




.app-container::before {
  content: '';
  position: absolute;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at 50% 50%, #111 0%, #000 100%);
  z-index: -1;
  pointer-events: none;
}




/* MAIN LAYOUT WRAPPER */




.main-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
  z-index: 1;
}




/* SIDEBAR SHARED STYLES */




.left-sidebar, .sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 40;
}




/* LEFT SIDEBAR: STATUS & CONTROL */




.left-sidebar {
  /* width: 340px;  <--- ENTFERNT (wird via React gesteuert) */
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  position: relative; /* <--- NEU: Damit der Resizer sich relativ hierzu positioniert */
  transition: width 0.1s ease-out; /* <--- NEU: Damit es nicht ruckelt */
}




.left-sidebar.resizing { transition: none; }




/* <--- NEU

/* NACHHER (Neu) */




.left-sidebar-resizer {
  position: absolute; 
  right: 0; /* <--- WICHTIG: Rechts statt Links */
  top: 0; 
  bottom: 0; 
  width: 4px;
  cursor: col-resize; 
  background: transparent; 
  z-index: 100;
  transition: background 0.2s;
}




.left-sidebar-resizer:hover, .left-sidebar-resizer:active { 
  background: var(--gold-primary); 
}




/* RIGHT SIDEBAR: NOTEBOOK */




.sidebar {
  border-left: 1px solid var(--border-subtle);
  border-right: none;
  position: relative;
  z-index: 50;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}




.sidebar.resizing { transition: none; }




.sidebar-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex; 
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.3s ease;
}




.sidebar.collapsed .sidebar-content { display: none; opacity: 0; }




.sidebar-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  cursor: col-resize; background: transparent; z-index: 100;
  transition: background 0.2s;
}




.sidebar-resizer:hover, .sidebar-resizer:active { background: var(--gold-primary); }




.sidebar-toggle-btn {
  position: absolute; top: 20px; left: 14px;
  width: 32px; height: 32px; border-radius: 6px;
  background: transparent; 
  border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 101; transition: all 0.2s;
}




.sidebar-toggle-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }




.sidebar-collapsed-visual {
  height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 80px; gap: 20px;
}




.sidebar-vertical-text {
  writing-mode: vertical-rl; text-orientation: mixed; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.2em; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap;
}




/* NOTEBOOK CONTROLS */




.notebook-maximize-btn {
  background: transparent;
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}




.notebook-maximize-btn:hover {
  background: var(--gold-primary);
  color: #000;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}




/* HEADERS */




.phase-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); position: relative; }




.meta-label {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}




.meta-label::before { content: ''; width: 4px; height: 4px; background: var(--gold-dark); border-radius: 50%; display: inline-block; }




.phase-number { 
  font-size: 4rem; font-weight: 800; color: rgba(255,255,255,0.04); 
  position: absolute; top: -10px; right: 0px; pointer-events: none; 
  font-family: var(--font-mono); line-height: 1;
}




.phase-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 2px; letter-spacing: -0.01em; position: relative; z-index: 2; }




.phase-subtitle { font-size: 0.85rem; color: var(--gold-primary); font-weight: 400; position: relative; z-index: 2; }




/* SPEECH BALANCE BAR (AMBIENT) */




.speech-balance-container {
  width: 100%;
  height: 4px; /* Slim and subtle */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}




.speech-balance-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease-out, background-color 0.5s ease;
}




/* THRESHOLD STYLES */




.speech-balance-fill.ideal {
  background-color: #10b981; /* Green */
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}




.speech-balance-fill.warning {
  background-color: #f59e0b; /* Yellow/Amber */
}




.speech-balance-fill.critical {
  background-color: #f97316; /* Orange */
  animation: pulse-orange 3s infinite;
}




.speech-balance-fill.danger {
  background-color: #ef4444; /* Red */
  animation: pulse-red 1.5s infinite;
}




/* ANIMATIONS */




@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); opacity: 0.8; }
  50% { box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); opacity: 1; }
  100% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); opacity: 0.8; }
}




@keyframes pulse-red {
  0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); opacity: 0.9; }
  50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); opacity: 1; }
  100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); opacity: 0.9; }
}




/* Tooltip helper */




.speech-balance-container:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  right: 0;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.2s;
}




.focus-box {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.08) 0%, transparent 100%);
  border-left: 2px solid var(--gold-primary);
  border-radius: 0 4px 4px 0; padding: 12px 16px; margin-bottom: 24px;
}




.focus-text { color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.5; }




/* INTERVENTION DECK */




.intervention-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}




.intervention-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  padding: 12px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}




.intervention-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}




/* DETECTED STATE (EAR) - BLUE */




.intervention-btn.detected {
  border-color: var(--gold-primary);
  background: rgba(59, 130, 246, 0.1);
  color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
}




/* RECOMMENDED STATE (TARGET) - GOLD (Overrides/Stacks with Blue) */




.intervention-btn.recommended {
  border-color: var(--gold-primary);
  background: rgba(234, 179, 8, 0.15);
  color: #fff;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.3), inset 0 0 10px rgba(234, 179, 8, 0.1);
  animation: pulse-gold 2s infinite;
}




.prio-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.5rem;
  background: var(--gold-primary);
  color: #000;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 800;
}




@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}




/* NOTEBOOK ACCORDION */




.notebook-section { border-bottom: 1px solid var(--border-subtle); }




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




.notebook-header {
  padding: 10px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: opacity 0.2s;
}




.notebook-header:hover { opacity: 1; }




.notebook-title { font-size: 0.75rem; font-weight: 700; color: #e5e5e5; text-transform: uppercase; letter-spacing: 0.05em; }




.notebook-icon { color: var(--text-dim); transition: transform 0.3s; }




.notebook-icon.open { transform: rotate(180deg); }




.notebook-content {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 0;
}




.notebook-content.open { max-height: 500px; margin-bottom: 16px; }




.notebook-entry { margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; display: flex; flex-direction: column; }




.notebook-key { color: var(--text-muted); font-size: 0.7rem; margin-bottom: 2px; font-weight: 600; }




.notebook-val { color: #fff; }




/* CHECKPOINTS */




.checkpoints-list { display: flex; flex-direction: column; position: relative; padding-left: 8px; }




/* Dezentere Verbindungslinie */




.checkpoints-list::before {
  content: ''; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 1px; 
  background: rgba(255, 255, 255, 0.08); z-index: 0;
}




.checkpoint-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; position: relative; z-index: 1;
}




/* Active: High Visibility */




.checkpoint-item.active .checkpoint-icon { 
  border-color: var(--gold-primary); 
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15); 
  background: #000;
}




/* Done: Filled Gold */




.checkpoint-item.done .checkpoint-icon { 
  background: var(--gold-primary); 
  border-color: var(--gold-primary); 
  color: #000; 
}




/* NEW: CURRENT FOCUS HIGHLIGHT */




.checkpoint-item.current-focus {
  border-left: 2px solid var(--gold-primary);
  padding-left: 12px;
  margin-left: -12px; 
  background: rgba(234, 179, 8, 0.05);
  border-radius: 0 4px 4px 0;
}




.checkpoint-icon {
  width: 20px; height: 20px; border: 1.5px solid var(--text-dim); background: var(--bg-app);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; transition: all 0.3s;
}




/* Label Colors - High Contrast */




.checkpoint-label { 
  font-size: 0.9rem; 
  color: #F1F5F9; /* Almost white for readability */
  line-height: 1.4; 
  transition: color 0.3s;
  font-weight: 500;
}




.checkpoint-item.active .checkpoint-label { color: #fff; font-weight: 600; }




.checkpoint-item.done .checkpoint-label { color: var(--text-muted); text-decoration: none; opacity: 0.8; }




/* NEW: FEEDBACK REASON STYLE */




.checkpoint-reason {
  font-size: 0.75rem;
  color: #f59e0b; /* Amber-500 */
  margin-top: 4px;
  font-style: normal; /* Not italic */
  display: block;
  font-weight: 400; /* Not bold */
}




/* DEPTH GRID */




.depth-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px;
}




.depth-tag {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
  border-radius: 4px; padding: 6px 10px; font-size: 0.65rem; color: var(--text-muted);
  text-align: center; font-weight: 700; letter-spacing: 0.05em; transition: all 0.3s;
}




.depth-tag.active {
  background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #10b981;
}




/* DEBUG CONSOLE */




.debug-console {
  background: rgba(0,0,0,0.6); 
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.6rem; color: #4ade80; 
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 16px;
  max-height: 150px; 
  overflow-y: auto;  
  font-family: var(--font-mono);
  line-height: 1.4;
}




.debug-line { margin-bottom: 4px; word-break: break-all; }




/* STATUS BAR */




.status-bar { 
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center;
}




.status-dot { width: 6px; height: 6px; background: var(--gold-primary); border-radius: 50%; box-shadow: 0 0 8px var(--gold-primary); animation: pulse 2s infinite; }




/* CHAT AREA */




.chat-area { flex: 1; display: flex; flex-direction: column; position: relative; }




.chat-background { position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: 0; }




/* CHAT HEADER */




.chat-header {
  height: 70px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle); 
  background: rgba(10,10,10,0.6); backdrop-filter: blur(10px);
  position: absolute; width: 100%; top: 0; z-index: 10;
}




.header-actions { display: flex; align-items: center; gap: 8px; }




.agent-name { 
  font-weight: 800; letter-spacing: 0.1em; font-size: 0.9rem; color: #fff; 
  display: flex; align-items: center; gap: 10px; 
}




.agent-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; }




/* CHAT FEED */




.chat-feed {
  flex: 1; overflow-y: auto; padding: 100px 10% 160px 10%;
  display: flex; flex-direction: column; gap: 24px; 
  scroll-behavior: smooth;
  z-index: 1;
}




.bubble-row { display: flex; width: 100%; opacity: 0; animation: fadeSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }




@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }




.bubble-row.ai { justify-content: flex-start; }




.bubble-row.user { justify-content: flex-end; }




.bubble { 
  max-width: 75%; padding: 18px 24px; font-size: 1.05rem; line-height: 1.6; border-radius: 12px; 
  position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}




/* USER BUBBLE - SLATE BLUE (High Contrast) */




.bubble.user { 
  background: var(--user-bubble-bg); 
  color: #F8FAFC; 
  border: 1px solid var(--user-bubble-border);
  border-bottom-right-radius: 2px; 
}




/* AI BUBBLE - DARK & GOLD (High Contrast) */




.bubble.ai { 
  background: #050505;
  color: #FFFFFF; 
  border-bottom-left-radius: 2px; 
  border: 1px solid var(--gold-primary); 
  box-shadow: 0 4px 25px rgba(234, 179, 8, 0.15);
}




/* INPUT AREA */




.input-area {
  position: absolute; bottom: 30px; left: 10%; right: 10%;
  display: flex; gap: 16px; align-items: center; z-index: 20;
}




.mic-btn {
  width: 56px; height: 56px; border-radius: 50%; 
  background: rgba(20,20,20,0.9); 
  border: 1px solid var(--border-subtle);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
}




.mic-btn:hover { border-color: var(--gold-primary); color: var(--gold-primary); transform: scale(1.05); }




.mic-btn.recording {
  background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}




@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




.text-input-wrapper { 
  flex: 1; position: relative; 
  background: var(--bg-input); 
  border-radius: 12px; 
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-float);
  transition: all 0.3s;
}




.text-input-wrapper:focus-within {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.2), var(--shadow-float);
  background: #000;
}




.text-input {
  width: 100%; background: transparent; border: none; color: #fff;
  padding: 18px 60px 18px 24px; border-radius: 12px; font-size: 1rem; outline: none;
}




.text-input::placeholder { color: rgba(255,255,255,0.3); }




.send-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; background: var(--gold-primary); border-radius: 8px;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000;
  transition: all 0.2s; opacity: 0; pointer-events: none;
}




.text-input:not(:placeholder-shown) + .send-btn { opacity: 1; pointer-events: auto; }




.send-btn:hover { background: #fff; transform: translateY(-50%) scale(1.05); }




/* MODAL */




.notebook-modal {
  background: rgba(5, 5, 5, 0.95);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 50px 100px -20px rgba(0,0,0,0.9);
}




/* BUTTONS */




.btn-action {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 8px 14px; border-radius: 6px;
  background: rgba(255,255,255,0.08); color: #ccc;
  border: 1px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}




.btn-action:hover { background: rgba(255,255,255,0.15); color: #fff; }




.btn-action.primary { 
  background: var(--gold-primary); color: #000; border: none; 
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.2);
}




.btn-action.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(234, 179, 8, 0.3); background: #fff; }




/* ANALYSIS VIEW */




.analysis-container { 
  position: fixed; inset: 0; z-index: 200; background: #030303; overflow-y: auto; 
  padding: 40px; display: flex; flex-direction: column; gap: 32px;
}




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




.analysis-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0; }




.score-value { font-size: 4rem; font-weight: 800; line-height: 1; text-shadow: 0 0 30px rgba(255,255,255,0.1); }




.analysis-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }




.category-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 24px; margin-bottom: 16px; }




.turn-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px; margin-bottom: 12px; }




.turn-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; }




.turn-speaker.ai { color: var(--gold-primary); }




.turn-speaker.user { color: #94a3b8; }




/* ANIMATIONS */




@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }




@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }




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




.typing-dots { display: flex; gap: 4px; }




.dot { width: 4px; height: 4px; background: #888; border-radius: 50%; animation: bounce 1.4s infinite; }




.dot:nth-child(2) { animation-delay: 0.2s; }




.dot:nth-child(3) { animation-delay: 0.4s; }




@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }




/* FIX DROPDOWN OPTIONS (Dark Background) */




.form-control option {
  background-color: #080808; 
  color: #fff;
}




/* ==========================================================================
   SETUP OVERLAY - AGGRESSIVE CYAN/SLATE THEME (ISOLATED)
   ========================================================================== */




/* Animation for Intro */




@keyframes introFloat {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}




.setup-overlay {
  position: fixed; inset: 0;
  /* AURORA GRADIENT BACKGROUND (From Aggressive Design) */
  background: radial-gradient(circle at 50% -10%, #312e81 0%, #1e1b4b 30%, #0f172a 60%, #000000 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
}




.setup-card {
  width: 100%;
  max-width: 1600px;
  height: 90vh;
  max-height: 950px;
  
  /* LIGHTER SURFACE - AGGRESSIVE CONTRAST (Deep Slate Blue) */
  background: #1e293b;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  
  /* HARD RIM LIGHT BORDER */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.5); /* Top highlight */
  border-radius: 24px;
  
  /* Massive Shadow to separate from dark BG + Cyan Glow */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 50px 100px -20px rgba(0, 0, 0, 1),
    0 0 120px rgba(34, 211, 238, 0.15);
    
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: introFloat 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}




/* --- HEADER --- */




.setup-header {
  height: 100px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
}




.brand-block h1 {
  font-family: var(--font-main); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.03em; margin: 0;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
}




.brand-block span {
  display: block; font-family: var(--font-mono); font-size: 0.75rem; color: #22d3ee; /* Cyan */
  letter-spacing: 0.3em; margin-top: 6px; font-weight: 700; 
  text-shadow: 0 0 15px #22d3ee;
}




.api-key-wrapper {
  display: flex; align-items: center; gap: 16px;
  background: rgba(0,0,0,0.5); 
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px 20px; border-radius: 12px;
  transition: all 0.3s ease;
}




.api-key-wrapper:focus-within { 
  border-color: #22d3ee; 
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
  background: rgba(0,0,0,0.8);
}




.api-key-label { font-family: var(--font-mono); font-size: 0.75rem; color: #fff; font-weight: 700; letter-spacing: 0.05em; }




.api-key-input {
  background: transparent; border: none; color: #fff;
  font-family: var(--font-mono); font-size: 0.9rem; width: 260px;
}




.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; transition: 0.3s; box-shadow: 0 0 5px rgba(0,0,0,0.5); }




.status-dot.active { background: #ef4444; box-shadow: 0 0 10px #ef4444; }




.status-dot.valid { background: #10b981; box-shadow: 0 0 10px #10b981; }




/* --- BODY FLEX --- */




.setup-body {
  flex: 1; overflow: hidden;
  display: flex; 
  padding: 50px;
  gap: 60px;
}




/* Columns */




.col-identity { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }




.col-config { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }




.col-context { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 32px; }




@media (max-width: 1400px) {
  .setup-body { padding: 30px; gap: 30px; }
  .col-identity { width: 300px; }
  .col-config { width: 350px; }
}




@media (max-width: 1200px) {
  .setup-body { flex-direction: column; overflow-y: auto; }
  .col-identity, .col-config, .col-context { width: 100%; }
}




.section-title {
  font-family: var(--font-mono); font-size: 0.9rem; color: #fff; /* PURE WHITE */
  letter-spacing: 0.15em; font-weight: 800; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; 
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}




.section-title::before {
  content: ''; display: block; width: 4px; height: 20px; background: #22d3ee;
  box-shadow: 0 0 15px #22d3ee;
}




/* --- FORM CONTROLS: BRIGHTER SURFACES (SCOPED TO SETUP) --- */




.setup-card .input-group { display: flex; flex-direction: column; gap: 10px; }




.setup-card .input-label { 
  font-size: 0.75rem; font-weight: 800; color: #ffffff; /* 100% OPACITY */
  letter-spacing: 0.05em; text-transform: uppercase; margin-left: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}




/* HIGH VISIBILITY INPUTS */




.setup-card .text-input, 
.setup-card .select-input, 
.setup-card .area-input, 
.setup-card .form-control {
  width: 100%;
  /* 15% WHITE BACKGROUND -> "Keys/Holes" Effect */
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  color: #fff;
  font-family: var(--font-main); font-size: 1rem; font-weight: 600;
  transition: all 0.2s ease-out;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}




.setup-card .text-input::placeholder, .setup-card .area-input::placeholder { color: rgba(255,255,255,0.5); font-weight: 400; }




.setup-card .text-input:hover, .setup-card .select-input:hover, .setup-card .area-input:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}




.setup-card .text-input:focus, .setup-card .select-input:focus, .setup-card .area-input:focus, .setup-card .form-control:focus {
  background: rgba(255, 255, 255, 0.25);
  border-color: #22d3ee;
  box-shadow: 0 0 0 1px #22d3ee, 0 0 20px rgba(34, 211, 238, 0.2);
  color: #fff;
}




.setup-card .area-input { resize: none; flex: 1; line-height: 1.6; min-height: 200px; }




/* Timeline: Brighter Container */




.timeline-row {
  display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, 0.08); /* Brighter group bg */
  border: 1px solid rgba(255,255,255,0.15);
  padding: 20px; border-radius: 16px;
}




.timeline-block { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }




.timeline-sublabel { font-size: 0.7rem; color: #fff; font-weight: 700; text-transform: uppercase; opacity: 0.7; }




.timeline-arrow { color: #fff; font-size: 1.2rem; opacity: 0.6; }




.timeline-info { 
  font-size: 0.85rem; color: #fff; margin-top: 12px; font-weight: 600; 
  background: rgba(34, 211, 238, 0.15); padding: 12px 16px; border-radius: 10px; 
  border: 1px solid rgba(34, 211, 238, 0.3); 
  display: flex; align-items: center; gap: 10px;
}




.timeline-info::before { content: 'i'; display: inline-flex; width: 18px; height: 18px; background: #22d3ee; color: #000; border-radius: 50%; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; }




/* Dropdown Options */




option { background: #1e293b; color: #fff; padding: 12px; }




/* --- FOOTER --- */




.setup-footer {
  height: 120px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px;
  border-top: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}




.audio-toggle {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.08); padding: 12px 24px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: 0.3s;
}




.audio-toggle:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); }




.switch {
  width: 48px; height: 26px; background: #475569; border-radius: 26px; position: relative; transition: 0.3s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}




.switch::after {
  content:''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}




.audio-toggle.active .switch { background: #22c55e; }




.audio-toggle.active .switch::after { transform: translateX(22px); }




.audio-label { font-size: 0.8rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; }




.btn-launch {
  height: 64px; padding: 0 64px;
  background: #334155;
  border: 1px solid #475569;
  color: #94a3b8;
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: 0.15em;
  border-radius: 16px;
  cursor: not-allowed;
  display: flex; align-items: center; gap: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}




.btn-launch.ready {
  background: #fff; /* POP */
  border: 1px solid #fff;
  color: #0f172a; /* Dark Text on White Button */
  cursor: pointer;
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 10px rgba(255, 255, 255, 0.8);
}




.btn-launch.ready:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
}




/* BACKGROUND HARMONIZATION (ANGLEICHUNG) - AGGRESSIVE FIX */




/* Force the aurora background from setup screen onto the main app container */




.app-container::before {
  background: radial-gradient(circle at 50% -20%, #312e81 0%, #1e1b4b 30%, #0f172a 60%, #000000 100%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}




.setup-overlay {
  overflow-y: auto;
  align-items: flex-start;
  padding: 20px;
}




.setup-card {
  height: auto;
  max-height: none;
  min-height: min-content;
  overflow: visible;
  margin-top: auto;
  margin-bottom: auto;
}




.setup-body {
  flex: none;
  overflow: visible;
  height: auto;
}




@media (max-width: 1200px) {
  .setup-card {
    width: 95%;
    height: auto;
  }
  
  .setup-header {
    height: auto;
    padding: 30px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .setup-body {
    padding: 30px;
    gap: 40px;
  }

  .setup-footer {
    height: auto;
    padding: 30px;
    flex-direction: column;
    gap: 24px;
  }

  .btn-launch {
    width: 100%;
    justify-content: center;
  }

  .api-key-wrapper {
    width: 100%;
    justify-content: center;
  }

  .api-key-input {
    width: 100% !important;
  }
}




@media (max-height: 800px) {
  .setup-card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}




/* NEU: Kritische Variable fehlt */




/* Pulsierender roter Rahmen um das Eingabefeld */




.variable-missing-critical .editable-span {
  border: 1px solid #ef4444 !important; /* Tailwind Red-500 */
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important; /* Helles Rot für Text */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  animation: pulse-red-border 2s infinite;
}




@keyframes pulse-red-border {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




.variable-missing-critical .editable-span {
  border: 1px solid #ef4444 !important; /* Harter roter Rahmen als Basis */
  background-color: rgba(239, 68, 68, 0.15) !important; /* Rötlicher Hintergrund */
  color: #fca5a5 !important; /* Textfarbe auf hellrot ändern */
  animation: pulse-red-border 2s infinite; /* Animation anwenden: 2 Sekunden, unendlich */
  border-radius: 4px; /* Konsistentes Design */
}




.longest-monolog-ring-slot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}




.member-profile-share-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}




.member-profile-main,
.member-referral-card {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
}




.member-profile-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}




.member-referral-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}




.member-referral-link {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.82rem;
  word-break: break-all;
}




@media (max-width: 768px) {
  .member-profile-share-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .member-profile-main,
  .member-referral-card {
    width: 100%;
  }
}




.cs-label {
display:block !important;

}




.v2_form_group {
gap: 0px !important;
}




.v2_trigger-label {
font-size:0.8rem;
}




.v2_input, .cs_trigger, .input_new {
background: #1f2937 !important;
border: 1px solid var(--tenant-border-strong) !important;
}




.v2-content {
background: #0f172a !important;

}




.cs-trigger {
background: #1f2937 !important;
}




.v2-header{
background: rgb(11,17,32) !important;
}




.v2-label {
color: #94a3b8 !important;
padding-bottom:8px !important;
}







:root {
  /* BACKGROUNDS */
  --bg-app: #030303;
  --bg-sidebar: rgba(5, 5, 5, 0.85); /* Darker, less transparent for readability */
  --bg-card: rgba(20, 20, 20, 0.6);
  --bg-input: rgba(10, 10, 10, 0.9);
  
  /* TEXT */
  --text-main: #ffffff;
  --text-muted: #94a3b8; /* Slate-400 */
  --text-dim: #475569;   /* Slate-600 */
  
  /* ACCENTS */
  --gold-primary: #EAB308;
  --gold-light: #FDE047;
  --gold-dark: #854D0E;
  --gold-glow: rgba(234, 179, 8, 0.3);
  --gold-gradient: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
  
  /* USER BUBBLE COLOR (Slate Blue) */
  --user-bubble-bg: #1E293B;
  --user-bubble-border: #334155;
  
  /* BORDERS & EFFECTS */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(234, 179, 8, 0.5);
  --glass-blur: blur(20px);
  --shadow-float: 0 10px 40px -10px rgba(0,0,0,0.7);
  
  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}




.blurred-text {
  filter: blur(6px);
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}




.blurred-text:hover {
  filter: blur(6px); /* Wird etwas klarer beim Hovern */
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}




.hidden-slot {
  background: rgba(20, 20, 20, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}




.hidden-slot:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  background: rgba(234, 179, 8, 0.05);
}




/* RESET */




* { box-sizing: border-box; outline: none; -webkit-font-smoothing: antialiased; }




body, html { margin: 0; padding: 0; height: 100%; font-family: var(--font-main); background: var(--bg-app); color: var(--text-main); overflow: hidden; }




button, input, select, textarea { font-family: inherit; font-size: inherit; }




/* SCROLLBAR */




::-webkit-scrollbar { width: 6px; }




::-webkit-scrollbar-track { background: transparent; }




::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }




::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }




/* LAYOUT */




#app-root, .app-container { width: 100%; height: 100%; display: flex; flex-direction: row; position: relative; }




/* CINEMATIC BACKGROUND */




.app-container::before {
  content: '';
  position: absolute;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at 50% 50%, #111 0%, #000 100%);
  z-index: -1;
  pointer-events: none;
}




/* MAIN LAYOUT WRAPPER */




.main-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
  z-index: 1;
}




/* SIDEBAR SHARED STYLES */




.left-sidebar, .sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 40;
}




/* LEFT SIDEBAR: STATUS & CONTROL */




.left-sidebar {
  /* width: 340px;  <--- ENTFERNT (wird via React gesteuert) */
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  position: relative; /* <--- NEU: Damit der Resizer sich relativ hierzu positioniert */
  transition: width 0.1s ease-out; /* <--- NEU: Damit es nicht ruckelt */
}




.left-sidebar.resizing { transition: none; }




/* <--- NEU

/* NACHHER (Neu) */




.left-sidebar-resizer {
  position: absolute; 
  right: 0; /* <--- WICHTIG: Rechts statt Links */
  top: 0; 
  bottom: 0; 
  width: 4px;
  cursor: col-resize; 
  background: transparent; 
  z-index: 100;
  transition: background 0.2s;
}




.left-sidebar-resizer:hover, .left-sidebar-resizer:active { 
  background: var(--gold-primary); 
}




/* RIGHT SIDEBAR: NOTEBOOK */




.sidebar {
  border-left: 1px solid var(--border-subtle);
  border-right: none;
  position: relative;
  z-index: 50;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}




.sidebar.resizing { transition: none; }




.sidebar-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex; 
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.3s ease;
}




.sidebar.collapsed .sidebar-content { display: none; opacity: 0; }




.sidebar-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  cursor: col-resize; background: transparent; z-index: 100;
  transition: background 0.2s;
}




.sidebar-resizer:hover, .sidebar-resizer:active { background: var(--gold-primary); }




.sidebar-toggle-btn {
  position: absolute; top: 20px; left: 14px;
  width: 32px; height: 32px; border-radius: 6px;
  background: transparent; 
  border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 101; transition: all 0.2s;
}




.sidebar-toggle-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }




.sidebar-collapsed-visual {
  height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 80px; gap: 20px;
}




.sidebar-vertical-text {
  writing-mode: vertical-rl; text-orientation: mixed; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.2em; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap;
}




/* NOTEBOOK CONTROLS */




.notebook-maximize-btn {
  background: transparent;
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}




.notebook-maximize-btn:hover {
  background: var(--gold-primary);
  color: #000;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}




/* HEADERS */




.phase-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); position: relative; }




.meta-label {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}




.meta-label::before { content: ''; width: 4px; height: 4px; background: var(--gold-dark); border-radius: 50%; display: inline-block; }




.phase-number { 
  font-size: 4rem; font-weight: 800; color: rgba(255,255,255,0.04); 
  position: absolute; top: -10px; right: 0px; pointer-events: none; 
  font-family: var(--font-mono); line-height: 1;
}




.phase-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 2px; letter-spacing: -0.01em; position: relative; z-index: 2; }




.phase-subtitle { font-size: 0.85rem; color: var(--gold-primary); font-weight: 400; position: relative; z-index: 2; }




/* SPEECH BALANCE BAR (AMBIENT) */




.speech-balance-container {
  width: 100%;
  height: 4px; /* Slim and subtle */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}




.speech-balance-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease-out, background-color 0.5s ease;
}




/* THRESHOLD STYLES */




.speech-balance-fill.ideal {
  background-color: #10b981; /* Green */
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}




.speech-balance-fill.warning {
  background-color: #f59e0b; /* Yellow/Amber */
}




.speech-balance-fill.critical {
  background-color: #f97316; /* Orange */
  animation: pulse-orange 3s infinite;
}




.speech-balance-fill.danger {
  background-color: #ef4444; /* Red */
  animation: pulse-red 1.5s infinite;
}




/* ANIMATIONS */




@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); opacity: 0.8; }
  50% { box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); opacity: 1; }
  100% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); opacity: 0.8; }
}




@keyframes pulse-red {
  0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); opacity: 0.9; }
  50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); opacity: 1; }
  100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); opacity: 0.9; }
}




/* Tooltip helper */




.speech-balance-container:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  right: 0;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.2s;
}




.focus-box {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.08) 0%, transparent 100%);
  border-left: 2px solid var(--gold-primary);
  border-radius: 0 4px 4px 0; padding: 12px 16px; margin-bottom: 24px;
}




.focus-text { color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.5; }




/* INTERVENTION DECK */




.intervention-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}




.intervention-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  padding: 12px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}




.intervention-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}




/* DETECTED STATE (EAR) - BLUE */




.intervention-btn.detected {
  border-color: var(--gold-primary);
  background: rgba(59, 130, 246, 0.1);
  color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
}




/* RECOMMENDED STATE (TARGET) - GOLD (Overrides/Stacks with Blue) */




.intervention-btn.recommended {
  border-color: var(--gold-primary);
  background: rgba(234, 179, 8, 0.15);
  color: #fff;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.3), inset 0 0 10px rgba(234, 179, 8, 0.1);
  animation: pulse-gold 2s infinite;
}




.prio-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.5rem;
  background: var(--gold-primary);
  color: #000;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 800;
}




@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}




/* NOTEBOOK ACCORDION */




.notebook-section { border-bottom: 1px solid var(--border-subtle); }




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




.notebook-header {
  padding: 10px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: opacity 0.2s;
}




.notebook-header:hover { opacity: 1; }




.notebook-title { font-size: 0.75rem; font-weight: 700; color: #e5e5e5; text-transform: uppercase; letter-spacing: 0.05em; }




.notebook-icon { color: var(--text-dim); transition: transform 0.3s; }




.notebook-icon.open { transform: rotate(180deg); }




.notebook-content {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 0;
}




.notebook-content.open { max-height: 500px; margin-bottom: 16px; }




.notebook-entry { margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; display: flex; flex-direction: column; }




.notebook-key { color: var(--text-muted); font-size: 0.7rem; margin-bottom: 2px; font-weight: 600; }




.notebook-val { color: #fff; }




/* CHECKPOINTS */




.checkpoints-list { display: flex; flex-direction: column; position: relative; padding-left: 8px; }




/* Dezentere Verbindungslinie */




.checkpoints-list::before {
  content: ''; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 1px; 
  background: rgba(255, 255, 255, 0.08); z-index: 0;
}




.checkpoint-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; position: relative; z-index: 1;
}




/* Active: High Visibility */




.checkpoint-item.active .checkpoint-icon { 
  border-color: var(--gold-primary); 
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15); 
  background: #000;
}




/* Done: Filled Gold */




.checkpoint-item.done .checkpoint-icon { 
  background: var(--gold-primary); 
  border-color: var(--gold-primary); 
  color: #000; 
}




/* NEW: CURRENT FOCUS HIGHLIGHT */




.checkpoint-item.current-focus {
  border-left: 2px solid var(--gold-primary);
  padding-left: 12px;
  margin-left: -12px; 
  background: rgba(234, 179, 8, 0.05);
  border-radius: 0 4px 4px 0;
}




.checkpoint-icon {
  width: 20px; height: 20px; border: 1.5px solid var(--text-dim); background: var(--bg-app);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; transition: all 0.3s;
}




/* Label Colors - High Contrast */




.checkpoint-label { 
  font-size: 0.9rem; 
  color: #F1F5F9; /* Almost white for readability */
  line-height: 1.4; 
  transition: color 0.3s;
  font-weight: 500;
}




.checkpoint-item.active .checkpoint-label { color: #fff; font-weight: 600; }




.checkpoint-item.done .checkpoint-label { color: var(--text-muted); text-decoration: none; opacity: 0.8; }




/* NEW: FEEDBACK REASON STYLE */




.checkpoint-reason {
  font-size: 0.75rem;
  color: #f59e0b; /* Amber-500 */
  margin-top: 4px;
  font-style: normal; /* Not italic */
  display: block;
  font-weight: 400; /* Not bold */
}




/* DEPTH GRID */




.depth-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px;
}




.depth-tag {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
  border-radius: 4px; padding: 6px 10px; font-size: 0.65rem; color: var(--text-muted);
  text-align: center; font-weight: 700; letter-spacing: 0.05em; transition: all 0.3s;
}




.depth-tag.active {
  background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #10b981;
}




/* DEBUG CONSOLE */




.debug-console {
  background: rgba(0,0,0,0.6); 
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.6rem; color: #4ade80; 
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 16px;
  max-height: 150px; 
  overflow-y: auto;  
  font-family: var(--font-mono);
  line-height: 1.4;
}




.debug-line { margin-bottom: 4px; word-break: break-all; }




/* STATUS BAR */




.status-bar { 
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center;
}




.status-dot { width: 6px; height: 6px; background: var(--gold-primary); border-radius: 50%; box-shadow: 0 0 8px var(--gold-primary); animation: pulse 2s infinite; }




/* CHAT AREA */




.chat-area { flex: 1; display: flex; flex-direction: column; position: relative; }




.chat-background { position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: 0; }




/* CHAT HEADER */




.chat-header {
  height: 70px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle); 
  background: rgba(10,10,10,0.6); backdrop-filter: blur(10px);
  position: absolute; width: 100%; top: 0; z-index: 10;
}




.header-actions { display: flex; align-items: center; gap: 8px; }




.agent-name { 
  font-weight: 800; letter-spacing: 0.1em; font-size: 0.9rem; color: #fff; 
  display: flex; align-items: center; gap: 10px; 
}




.agent-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; }




/* CHAT FEED */




.chat-feed {
  flex: 1; overflow-y: auto; padding: 100px 10% 160px 10%;
  display: flex; flex-direction: column; gap: 24px; 
  scroll-behavior: smooth;
  z-index: 1;
}




.bubble-row { display: flex; width: 100%; opacity: 0; animation: fadeSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }




@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }




.bubble-row.ai { justify-content: flex-start; }




.bubble-row.user { justify-content: flex-end; }




.bubble { 
  max-width: 75%; padding: 18px 24px; font-size: 1.05rem; line-height: 1.6; border-radius: 12px; 
  position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}




/* USER BUBBLE - SLATE BLUE (High Contrast) */




.bubble.user { 
  background: var(--user-bubble-bg); 
  color: #F8FAFC; 
  border: 1px solid var(--user-bubble-border);
  border-bottom-right-radius: 2px; 
}




/* AI BUBBLE - DARK & GOLD (High Contrast) */




.bubble.ai { 
  background: #050505;
  color: #FFFFFF; 
  border-bottom-left-radius: 2px; 
  border: 1px solid var(--gold-primary); 
  box-shadow: 0 4px 25px rgba(234, 179, 8, 0.15);
}




/* INPUT AREA */




.input-area {
  position: absolute; bottom: 30px; left: 10%; right: 10%;
  display: flex; gap: 16px; align-items: center; z-index: 20;
}




.mic-btn {
  width: 56px; height: 56px; border-radius: 50%; 
  background: rgba(20,20,20,0.9); 
  border: 1px solid var(--border-subtle);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
}




.mic-btn:hover { border-color: var(--gold-primary); color: var(--gold-primary); transform: scale(1.05); }




.mic-btn.recording {
  background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}




@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




.text-input-wrapper { 
  flex: 1; position: relative; 
  background: var(--bg-input); 
  border-radius: 12px; 
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-float);
  transition: all 0.3s;
}




.text-input-wrapper:focus-within {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.2), var(--shadow-float);
  background: #000;
}




.text-input {
  width: 100%; background: transparent; border: none; color: #fff;
  padding: 18px 60px 18px 24px; border-radius: 12px; font-size: 1rem; outline: none;
}




.text-input::placeholder { color: rgba(255,255,255,0.3); }




.send-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; background: var(--gold-primary); border-radius: 8px;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000;
  transition: all 0.2s; opacity: 0; pointer-events: none;
}




.text-input:not(:placeholder-shown) + .send-btn { opacity: 1; pointer-events: auto; }




.send-btn:hover { background: #fff; transform: translateY(-50%) scale(1.05); }




/* MODAL */




.notebook-modal {
  background: rgba(5, 5, 5, 0.95);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 50px 100px -20px rgba(0,0,0,0.9);
}




/* BUTTONS */




.btn-action {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 8px 14px; border-radius: 6px;
  background: rgba(255,255,255,0.08); color: #ccc;
  border: 1px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}




.btn-action:hover { background: rgba(255,255,255,0.15); color: #fff; }




.btn-action.primary { 
  background: var(--gold-primary); color: #000; border: none; 
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.2);
}




.btn-action.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(234, 179, 8, 0.3); background: #fff; }




/* ANALYSIS VIEW */




.analysis-container { 
  position: fixed; inset: 0; z-index: 200; background: #030303; overflow-y: auto; 
  padding: 40px; display: flex; flex-direction: column; gap: 32px;
}




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




.analysis-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0; }




.score-value { font-size: 4rem; font-weight: 800; line-height: 1; text-shadow: 0 0 30px rgba(255,255,255,0.1); }




.analysis-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }




.category-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 24px; margin-bottom: 16px; }




.turn-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px; margin-bottom: 12px; }




.turn-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; }




.turn-speaker.ai { color: var(--gold-primary); }




.turn-speaker.user { color: #94a3b8; }




/* ANIMATIONS */




@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }




@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }




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




.typing-dots { display: flex; gap: 4px; }




.dot { width: 4px; height: 4px; background: #888; border-radius: 50%; animation: bounce 1.4s infinite; }




.dot:nth-child(2) { animation-delay: 0.2s; }




.dot:nth-child(3) { animation-delay: 0.4s; }




@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }




/* FIX DROPDOWN OPTIONS (Dark Background) */




.form-control option {
  background-color: #080808; 
  color: #fff;
}




/* ==========================================================================
   SETUP OVERLAY - AGGRESSIVE CYAN/SLATE THEME (ISOLATED)
   ========================================================================== */




/* Animation for Intro */




@keyframes introFloat {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}




.setup-overlay {
  position: fixed; inset: 0;
  /* AURORA GRADIENT BACKGROUND (From Aggressive Design) */
  background: radial-gradient(circle at 50% -10%, #312e81 0%, #1e1b4b 30%, #0f172a 60%, #000000 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
}




.setup-card {
  width: 100%;
  max-width: 1600px;
  height: 90vh;
  max-height: 950px;
  
  /* LIGHTER SURFACE - AGGRESSIVE CONTRAST (Deep Slate Blue) */
  background: #1e293b;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  
  /* HARD RIM LIGHT BORDER */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.5); /* Top highlight */
  border-radius: 24px;
  
  /* Massive Shadow to separate from dark BG + Cyan Glow */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 50px 100px -20px rgba(0, 0, 0, 1),
    0 0 120px rgba(34, 211, 238, 0.15);
    
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: introFloat 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}




/* --- HEADER --- */




.setup-header {
  height: 100px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
}




.brand-block h1 {
  font-family: var(--font-main); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.03em; margin: 0;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
}




.brand-block span {
  display: block; font-family: var(--font-mono); font-size: 0.75rem; color: #22d3ee; /* Cyan */
  letter-spacing: 0.3em; margin-top: 6px; font-weight: 700; 
  text-shadow: 0 0 15px #22d3ee;
}




.api-key-wrapper {
  display: flex; align-items: center; gap: 16px;
  background: rgba(0,0,0,0.5); 
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px 20px; border-radius: 12px;
  transition: all 0.3s ease;
}




.api-key-wrapper:focus-within { 
  border-color: #22d3ee; 
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
  background: rgba(0,0,0,0.8);
}




.api-key-label { font-family: var(--font-mono); font-size: 0.75rem; color: #fff; font-weight: 700; letter-spacing: 0.05em; }




.api-key-input {
  background: transparent; border: none; color: #fff;
  font-family: var(--font-mono); font-size: 0.9rem; width: 260px;
}




.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; transition: 0.3s; box-shadow: 0 0 5px rgba(0,0,0,0.5); }




.status-dot.active { background: #ef4444; box-shadow: 0 0 10px #ef4444; }




.status-dot.valid { background: #10b981; box-shadow: 0 0 10px #10b981; }




/* --- BODY FLEX --- */




.setup-body {
  flex: 1; overflow: hidden;
  display: flex; 
  padding: 50px;
  gap: 60px;
}




/* Columns */




.col-identity { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }




.col-config { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }




.col-context { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 32px; }




@media (max-width: 1400px) {
  .setup-body { padding: 30px; gap: 30px; }
  .col-identity { width: 300px; }
  .col-config { width: 350px; }
}




@media (max-width: 1200px) {
  .setup-body { flex-direction: column; overflow-y: auto; }
  .col-identity, .col-config, .col-context { width: 100%; }
}




.section-title {
  font-family: var(--font-mono); font-size: 0.9rem; color: #fff; /* PURE WHITE */
  letter-spacing: 0.15em; font-weight: 800; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; 
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}




.section-title::before {
  content: ''; display: block; width: 4px; height: 20px; background: #22d3ee;
  box-shadow: 0 0 15px #22d3ee;
}




/* --- FORM CONTROLS: BRIGHTER SURFACES (SCOPED TO SETUP) --- */




.setup-card .input-group { display: flex; flex-direction: column; gap: 10px; }




.setup-card .input-label { 
  font-size: 0.75rem; font-weight: 800; color: #ffffff; /* 100% OPACITY */
  letter-spacing: 0.05em; text-transform: uppercase; margin-left: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}




/* HIGH VISIBILITY INPUTS */




.setup-card .text-input, 
.setup-card .select-input, 
.setup-card .area-input, 
.setup-card .form-control {
  width: 100%;
  /* 15% WHITE BACKGROUND -> "Keys/Holes" Effect */
  background: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  color: #fff;
  font-family: var(--font-main); font-size: 1rem; font-weight: 600;
  transition: all 0.2s ease-out;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}




.setup-card .text-input::placeholder, .setup-card .area-input::placeholder { color: rgba(255,255,255,0.5); font-weight: 400; }




.setup-card .text-input:hover, .setup-card .select-input:hover, .setup-card .area-input:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}




.setup-card .text-input:focus, .setup-card .select-input:focus, .setup-card .area-input:focus, .setup-card .form-control:focus {
  background: rgba(255, 255, 255, 0.25);
  border-color: #22d3ee;
  box-shadow: 0 0 0 1px #22d3ee, 0 0 20px rgba(34, 211, 238, 0.2);
  color: #fff;
}




.setup-card .area-input { resize: none; flex: 1; line-height: 1.6; min-height: 200px; }




/* Timeline: Brighter Container */




.timeline-row {
  display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, 0.08); /* Brighter group bg */
  border: 1px solid rgba(255,255,255,0.15);
  padding: 20px; border-radius: 16px;
}




.timeline-block { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }




.timeline-sublabel { font-size: 0.7rem; color: #fff; font-weight: 700; text-transform: uppercase; opacity: 0.7; }




.timeline-arrow { color: #fff; font-size: 1.2rem; opacity: 0.6; }




.timeline-info { 
  font-size: 0.85rem; color: #fff; margin-top: 12px; font-weight: 600; 
  background: rgba(34, 211, 238, 0.15); padding: 12px 16px; border-radius: 10px; 
  border: 1px solid rgba(34, 211, 238, 0.3); 
  display: flex; align-items: center; gap: 10px;
}




.timeline-info::before { content: 'i'; display: inline-flex; width: 18px; height: 18px; background: #22d3ee; color: #000; border-radius: 50%; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; }




/* Dropdown Options */




option { background: #1e293b; color: #fff; padding: 12px; }




/* --- FOOTER --- */




.setup-footer {
  height: 120px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px;
  border-top: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}




.audio-toggle {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.08); padding: 12px 24px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: 0.3s;
}




.audio-toggle:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); }




.switch {
  width: 48px; height: 26px; background: #475569; border-radius: 26px; position: relative; transition: 0.3s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}




.switch::after {
  content:''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}




.audio-toggle.active .switch { background: #22c55e; }




.audio-toggle.active .switch::after { transform: translateX(22px); }




.audio-label { font-size: 0.8rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; }




.btn-launch {
  height: 64px; padding: 0 64px;
  background: #334155;
  border: 1px solid #475569;
  color: #94a3b8;
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: 0.15em;
  border-radius: 16px;
  cursor: not-allowed;
  display: flex; align-items: center; gap: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}




.btn-launch.ready {
  background: #fff; /* POP */
  border: 1px solid #fff;
  color: #0f172a; /* Dark Text on White Button */
  cursor: pointer;
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 10px rgba(255, 255, 255, 0.8);
}




.btn-launch.ready:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
}




/* BACKGROUND HARMONIZATION (ANGLEICHUNG) - AGGRESSIVE FIX */




/* Force the aurora background from setup screen onto the main app container */




.app-container::before {
  background: radial-gradient(circle at 50% -20%, #312e81 0%, #1e1b4b 30%, #0f172a 60%, #000000 100%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}




.setup-overlay {
  overflow-y: auto;
  align-items: flex-start;
  padding: 20px;
}




.setup-card {
  height: auto;
  max-height: none;
  min-height: min-content;
  overflow: visible;
  margin-top: auto;
  margin-bottom: auto;
}




.setup-body {
  flex: none;
  overflow: visible;
  height: auto;
}




@media (max-width: 1200px) {
  .setup-card {
    width: 95%;
    height: auto;
  }
  
  .setup-header {
    height: auto;
    padding: 30px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .setup-body {
    padding: 30px;
    gap: 40px;
  }

  .setup-footer {
    height: auto;
    padding: 30px;
    flex-direction: column;
    gap: 24px;
  }

  .btn-launch {
    width: 100%;
    justify-content: center;
  }

  .api-key-wrapper {
    width: 100%;
    justify-content: center;
  }

  .api-key-input {
    width: 100% !important;
  }
}




@media (max-height: 800px) {
  .setup-card {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}




/* NEU: Kritische Variable fehlt */




/* Pulsierender roter Rahmen um das Eingabefeld */




.variable-missing-critical .editable-span {
  border: 1px solid #ef4444 !important; /* Tailwind Red-500 */
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important; /* Helles Rot für Text */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  animation: pulse-red-border 2s infinite;
}




@keyframes pulse-red-border {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




.variable-missing-critical .editable-span {
  border: 1px solid #ef4444 !important; /* Harter roter Rahmen als Basis */
  background-color: rgba(239, 68, 68, 0.15) !important; /* Rötlicher Hintergrund */
  color: #fca5a5 !important; /* Textfarbe auf hellrot ändern */
  animation: pulse-red-border 2s infinite; /* Animation anwenden: 2 Sekunden, unendlich */
  border-radius: 4px; /* Konsistentes Design */
}




.longest-monolog-ring-slot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}




.member-profile-share-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}




.member-profile-main,
.member-referral-card {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
}




.member-profile-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}




.member-referral-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}




.member-referral-link {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.82rem;
  word-break: break-all;
}




@media (max-width: 768px) {
  .member-profile-share-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .member-profile-main,
  .member-referral-card {
    width: 100%;
  }
}




.cs-label {
display:block !important;

}




.v2_form_group {
gap: 0px !important;
}




.v2_trigger-label {
font-size:0.8rem;
}




.v2_input, .cs_trigger, .input_new {
background: #1f2937 !important;
border: 1px solid var(--tenant-border-strong) !important;
}




.v2-content {
background: #0f172a !important;

}




.cs-trigger {
background: #1f2937 !important;
}




.v2-header{
background: rgb(11,17,32) !important;
}




.v2-label {
color: #94a3b8 !important;
padding-bottom:8px !important;
}

/* =========================================================================================
   MISSION CONTROL THEME (Deep Space & Amber)
   Overrides for styles.css
   ========================================================================================= */

:root {
  --mc-bg-deep: #02040a;
  --mc-bg-panel: rgba(8, 12, 20, 0.98);
  --mc-gold: #f59e0b;
  --mc-gold-glow: rgba(245, 158, 11, 0.15);
  --mc-blue-accent: #0ea5e9;
  --mc-text-main: #f8fafc;
  --mc-border: rgba(255, 255, 255, 0.15);
  
  /* SCORE HUD COLORS */
  --hud-gold: #F59E0B;
  --hud-red: #EF4444;
  --hud-bg: rgba(0,0,0,0.6);
}

/* --- SCORE HUD: OVERLAY (Die schwebenden Impulse) --- */
.score-float-zone {
    position: absolute;
    right: 24px;
    bottom: 100%;
    width: 250px;
    height: 200px;
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    z-index: 9999;
    overflow: visible;
    padding-bottom: 10px;
}

.score-hud-item {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 
        0 2px 0 #000,
        0 0 15px rgba(0,0,0,0.8);
    opacity: 0;
    transform: translateY(20px);
    animation: hudRiseFade 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.score-hud-item.positive { color: var(--hud-gold); }
.score-hud-item.negative { color: var(--hud-red); }

.hud-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.hud-value {
    letter-spacing: -0.05em;
}

@keyframes hudRiseFade {
    0% { opacity: 0; transform: translateY(20px) scale(0.8); }
    10% { opacity: 1; transform: translateY(0) scale(1.1); }
    15% { transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(-20px); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

/* --- SCORE HUD: VAULT (Der Zähler in der Sidebar) --- */
.score-vault-container {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    width: 100%;
}

.vault-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: flex; 
    align-items: center; 
    gap: 6px;
    width: 100%;
}

.vault-label::before { 
    content: ''; 
    width: 4px; 
    height: 4px; 
    background: #854D0E;
    border-radius: 50%; 
    display: inline-block; 
}

.vault-value-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    height: 36px; 
    background: rgba(10, 10, 10, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 !important;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s ease;
    z-index: 2;
}

.score-vault-container.vault-active .vault-value-wrapper {
    opacity: 1;
    border: 1px solid #F59E0B !important; 
    background: rgba(245, 158, 11, 0.08); 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.score-vault-container.vault-blurred .vault-value-wrapper {
    opacity: 0; 
    transition: opacity 0.5s ease;
    user-select: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.vault-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 800;
    color: #F59E0B;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    line-height: 1;
    text-align: right;
}

.vault-unit {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 6px;
}

.vault-shine {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s;
}

.score-vault-container.vault-active .vault-shine {
    opacity: 1;
}

.vault-shine::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
    transform: skewX(-20deg);
}

.score-vault-container.vault-active .vault-shine::after {
    animation: shine 4s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* --- SIDEBAR OVERRIDES --- */
.checkpoint-label {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #64748b !important; 
  transition: color 0.3s ease;
}

.checkpoint-item.current-focus .checkpoint-label {
  font-size: 1rem !important;
  color: #cbd5e1 !important; 
  font-weight: 600;
  text-shadow: none !important;
}

.checkpoints-list .checkpoint-reason {
  display: none !important;
}

.checkpoint-item.current-focus {
  border-left-color: rgba(255,255,255,0.15) !important; 
  background: transparent !important;
  padding-left: 12px; 
}

.checkpoint-item:not(.current-focus) {
  opacity: 0.85 !important; 
  transition: opacity 0.3s;
}
.checkpoint-item:not(.current-focus):hover {
  opacity: 1;
}
.checkpoint-item:not(.current-focus) .checkpoint-label {
    color: #94a3b8 !important; 
}

/* SIDEBAR HINT BOX */
.sidebar-hint-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--mc-gold);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
    position: relative;
}

.sidebar-hint-box:hover {
    background: rgba(245, 158, 11, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
}

.sidebar-hint-box:active {
    transform: translateY(0);
}

.sidebar-hint-box .hint-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mc-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.sidebar-hint-box .hint-content {
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.4;
    font-style: italic;
}

/* SIDEBAR TURN DOTS */
.sidebar-turn-dots-container {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    height: 6px;
    align-items: center;
}

.sidebar-turn-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #334155;
}

/* --- MODULE VARIABLES GROUPING --- */

.notebook-module-group {
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    transition: all 0.3s ease;
    overflow: hidden;
}

.module-group-header {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid transparent;
}

.module-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #cbd5e1;
}

.notebook-module-group.active-module {
    border: 1px solid var(--mc-gold);
    background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.08) 0%, transparent 80%);
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.5);
    margin-bottom: 24px;
}

.notebook-module-group.active-module .module-title {
    color: #fff;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    font-size: 0.95rem;
}

.notebook-module-group.active-module .module-group-header {
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding-bottom: 12px;
}

.notebook-module-group.past-module {
    opacity: 0.9;
    border-color: rgba(255,255,255,0.08);
}
.notebook-module-group.past-module:hover {
    opacity: 1;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.02);
}

.module-group-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.variable-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variable-label {
    font-size: 0.8rem; 
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.variable-value {
    width: 100%;
}

.variable-value input,
.variable-value textarea,
.editable-input {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 10px !important;
    color: #fff !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.variable-value textarea {
    min-height: 80px;
}

.variable-value span.editable-span {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 4px 0;
    display: block;
}

.status-dot.active-pulse {
    background: var(--mc-gold);
    box-shadow: 0 0 8px var(--mc-gold);
    animation: pulse 2s infinite;
}
.status-dot.done {
    background: #10b981;
}
.status-dot.partial {
    background: #64748b;
}

/* --- NOTEBOOK ACCORDION --- */
.notebook-section {
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.notebook-section.current-focus {
    border-left: 3px solid var(--mc-gold);
    background: radial-gradient(circle at left, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
}

.notebook-section.current-focus .notebook-header {
    opacity: 1 !important;
}

.notebook-section.current-focus .notebook-title {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* --- LIFE MODE VIDEO HANDLING --- */
.life-mode-video-container {
  display: none;
}

.layout-mode-life .life-mode-video-container {
  display: flex;
  flex: 1;
  width: 100%;
  position: relative;
  background: #000;
  z-index: 5; 
  overflow: hidden;
  border-bottom: 1px solid var(--mc-border);
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/*.layout-mode-life .chat-feed { display: none !important; } */

/* STATIC ROLE SELECTOR */
.role-selector-static {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-self: flex-start;
}

/* --- MISSION CONTROL DECK --- */
.mission-control-deck {
  flex-shrink: 0;
  background: #05080f; 
  border: none;
  border-top: 1px solid var(--mc-gold); 
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 60;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.9);
  align-items: center; 
}

.mc-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;   
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start; 
  text-align: left;        
}

.mc-active-goal-card {
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05); 
  margin-bottom: 16px;
}

.deck-row {
  display: flex;
  width: 100%;
}

.deck-row.top {
  align-items: flex-start; 
  justify-content: flex-start; 
  gap: 20px; 
  flex-direction: row; 
}

/* --- ACTIVE GOAL SECTION --- */
.mc-goal-icon {
  width: 28px;
  height: 28px;
  border: 2px solid var(--mc-gold); 
  border-radius: 50%;
  background: transparent; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
  animation: none; 
  color: transparent;
}

.mc-goal-icon::after {
  content: none;
  display: none;
}

.mc-goal-icon svg {
  display: none;
}

.mc-goal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.1); 
  padding-left: 32px; 
}

.mc-goal-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mc-goal-label {
  display: block; 
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; 
  font-weight: 700;
  color: var(--mc-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0 !important;
  line-height: 1;
}

.mc-goal-body {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
}

.mc-text-column {
  width: 70%;
  flex: 0 0 70%; 
  max-width: 70%;
  padding-right: 40px;
  display: block !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden; 
  position: relative;
  box-sizing: border-box;
}

.mc-metrics-column {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px; 
  box-sizing: border-box;
}

.mc-goal-text-autofit {
  font-family: 'Inter', sans-serif;
  font-weight: 400; 
  color: #ffffff; 
  line-height: 1.3;
  text-align: left;
  width: 100%;
  display: block !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  text-shadow: none;
  animation: none;
  height: auto !important;
  min-height: 0;
  max-height: 160px !important; 
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  hyphens: auto;
}

.mc-goal-text-autofit strong {
    color: var(--mc-gold) !important; 
    font-weight: 700; 
    text-decoration: none; 
    text-shadow: none;
}

.mc-goal-fail-reason {
  color: #fca5a5;
  font-size: 1.0rem; 
  display: block !important;
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  line-height: 1.4;
  padding: 0 0 0 16px; 
  background: transparent; 
  border-left: 2px solid rgba(239, 68, 68, 0.5);
  width: 100%; 
  text-align: left;
}

.mc-goal-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: #94a3b8;
  background: transparent;
  border-left: 2px solid #334155; 
  padding: 0 0 0 16px;
  line-height: 1.4;
  display: block !important;
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  width: 100%; 
  text-align: left;
}

.mc-goal-hint:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-left-color: var(--mc-gold);
}

.hint-prefix {
  font-weight: 700;
  color: var(--mc-gold);
  margin-right: 8px;
}

.mc-turn-dots-container {
    display: inline-flex;
    gap: 4px; 
    position: static;
    margin: 0;
    padding: 0;
    align-items: center;
    vertical-align: middle;
}

.mc-turn-dot {
    width: 6px; 
    height: 6px;
    border-radius: 50%;
    background-color: #475569; 
    transition: background-color 0.3s ease;
}

.mc-embedded-deepness {
  display: flex;
  flex-direction: column;
  gap: 12px; 
  width: 100%;
}

.mc-deepness-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.mc-deepness-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.mc-deepness-label {
  font-size: 0.65rem;
  color: #cbd5e1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mc-deepness-val {
  display: none; 
}

.mc-deepness-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

.mc-deepness-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  background-color: #475569;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.mc-deepness-threshold {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background-color: #ffffff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  z-index: 5;
  border-radius: 1px;
}

/* INPUT AREA OVERRIDE */
.input-area {
  position: relative; 
  bottom: auto; 
  left: auto; 
  right: auto;
  margin-top: 0; 
  z-index: 10;
  width: 100%;
  margin-left: 0; 
}

/* --- SIDEBAR GENERAL --- */
.left-sidebar, .sidebar {
  background: var(--mc-bg-panel);
  border-right-color: var(--mc-border);
  border-left-color: var(--mc-border);
}

.phase-header {
  border-bottom-color: var(--mc-border);
}

.phase-title {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #cbd5e1; 
}

.checkpoint-item {
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 12px; 
  padding-top: 4px;
  padding-bottom: 4px;
}

.app-container::before {
  background: radial-gradient(circle at 60% 30%, #0f172a 0%, #020617 100%) !important;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1100px) {
  .mission-control-deck {
    padding: 24px;
  }


  .deck-row.top {
    gap: 12px;
  }
  
  .mc-goal-body {
    flex-direction: column;
    gap: 0;
  }
  
  .mc-text-column {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 24px;
    height: auto !important;
    min-height: auto !important; 
    max-height: none !important;
  }
  
  .mc-metrics-column {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 24px;
  }
  
  .mc-embedded-deepness {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .mc-deepness-item {
    flex: 1;
    min-width: 120px;
  }

  .mc-goal-content {
    border-left: none;
    padding-left: 0;
  }
  
  .mc-goal-text-autofit {
    font-size: 1.2rem !important;
  }
  
  .mc-turn-dots-container {
    margin-top: 8px;
  }


  /* Stoppt das Flackern/Hüpfen der Streaming-Bubble */
.bubble-row.interim-bubble {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
}
.v2_input, .cs_trigger, .input_new {
background: #1f2937 !important;
border: 1px solid var(--tenant-border-strong) !important;
}

.v2-label {
color: #94a3b8 !important;
padding-bottom:8px !important;
}