/* /simulate — Neural System dark theme */

body.bg-black { background: #000; }

.panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(2, 6, 23, 0.9) 100%);
  border: 1px solid rgba(30, 41, 59, 0.8);
  border-radius: 10px;
  min-height: 0;
  backdrop-filter: blur(8px);
}

.panel-header {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: rgba(2, 6, 23, 0.4);
}
.panel-title {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Feed items */
.feed-item {
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(30, 41, 59, 0.3);
  border-left: 2px solid #475569;
  font-size: 10px;
  animation: feedIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feed-item.type-session { border-left-color: #60A5FA; }
.feed-item.type-crisis  { border-left-color: #EF4444; background: rgba(239, 68, 68, 0.12); }
.feed-item.type-kader   { border-left-color: #10B981; }
.feed-item.type-ai      { border-left-color: #8B5CF6; }
.feed-item .time { color: #64748b; font-family: 'JetBrains Mono', monospace; font-size: 8px; }
.feed-item .actor { color: #cbd5e1; font-weight: 500; }
.feed-item .msg { color: #94a3b8; margin-top: 1px; font-size: 10px; }
@keyframes feedIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Spotlight chat area */
.spot-container {
  display: flex; flex-direction: column;
  padding: 8px 12px;
  gap: 4px;
  overflow-y: auto;
  width: 100%;
}
.spot-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.spot-header .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.spot-msg {
  max-width: 75%;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.4;
  animation: msgIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  word-wrap: break-word;
}
.spot-msg-user { background: #2563eb; color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.spot-msg-ai { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; border-bottom-left-radius: 4px; }
.spot-msg-ai.crisis { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }

.spot-typing {
  display: inline-flex; gap: 3px;
  padding: 4px 10px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 12px; border-bottom-left-radius: 4px;
  align-items: center;
  width: fit-content;
}
.spot-typing span {
  width: 4px; height: 4px; border-radius: 50%;
  background: #64748b;
  animation: typingBounce 1.4s infinite ease-in-out;
}
.spot-typing span:nth-child(2) { animation-delay: 0.15s; }
.spot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Crisis cards */
.crisis-card {
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 10px;
  animation: crisisIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.crisis-card.resolved { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); }
.crisis-card.in-progress { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); }
@keyframes crisisIn {
  from { opacity: 0; transform: translateX(12px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Kader row */
.kader-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 10px;
}
.kader-row:hover { background: rgba(30, 41, 59, 0.4); }
.kader-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 9px; font-weight: 700;
  flex-shrink: 0;
  position: relative;
}
.kader-avatar::after {
  content: '';
  position: absolute; right: -1px; bottom: -1px;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid #020617;
}
.kader-avatar.online::after { background: #10B981; }
.kader-avatar.busy::after { background: #F59E0B; }
.kader-avatar.offline::after { background: #64748b; }

/* Metric compact */
.metric-mini {
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(30, 41, 59, 0.6);
}
.metric-mini-label { color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; font-size: 8px; }
.metric-mini-value { color: #f1f5f9; font-size: 16px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric-mini-hint { color: #94a3b8; font-size: 9px; margin-top: 1px; }
.metric-mini.span-2 { grid-column: span 2; }

/* Toggle buttons */
.scn-btn.active, .spd-btn.active, .tier-btn.active {
  background: #334155 !important; color: white !important;
}

/* PDF loading dots */
.pdf-load-line {
  display: flex; align-items: center; gap: 8px;
  color: #94a3b8;
}
.pdf-load-line.done { color: #10B981; }
.pdf-load-line .icon {
  display: inline-block; width: 14px; text-align: center;
  animation: pdfLoad 1s linear infinite;
}
.pdf-load-line.done .icon { animation: none; }
@keyframes pdfLoad {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Scrollbar */
.panel ::-webkit-scrollbar { width: 4px; }
.panel ::-webkit-scrollbar-track { background: transparent; }
.panel ::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
.panel ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Toast dark */
body.bg-black .toast {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}
body.bg-black .toast .font-semibold { color: #f8fafc; }
body.bg-black .toast .text-slate-600 { color: #cbd5e1; }