src/components/AIPanel.css

.ai-panel {
  background: #0a0a1e;
  border-top: 1px solid #2a1a4a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.ai-header:hover { background: #12123a; }

.ai-icon { color: #cc88ff; font-size: 13px; }
.ai-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #9966cc;
}

.error-count {
  background: #4a1a6a;
  color: #cc88ff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.ai-chevron { margin-left: auto; color: #555577; font-size: 9px; }

.ai-body {
  padding: 10px 14px;
  border-top: 1px solid #1e0e3a;
  max-height: 280px;
  overflow-y: auto;
}

.ai-body::-webkit-scrollbar { width: 3px; }
.ai-body::-webkit-scrollbar-thumb { background: #4a2a6a; border-radius: 2px; }

.api-key-row {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.api-key-input {
  flex: 1;
  background: #13132a;
  border: 1px solid #3a1a5a;
  border-radius: 5px;
  padding: 6px 8px;
  color: #cc88ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  outline: none;
}

.api-key-input:focus { border-color: #9966cc; }
.api-key-input::placeholder { color: #444466; }

.eye-btn {
  padding: 4px 8px;
  background: #1a0a2a;
  border: 1px solid #3a1a5a;
  border-radius: 5px;
  color: #9966cc;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}

.eye-btn:hover { border-color: #9966cc; }

.manual-input-row {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  align-items: flex-end;
}

.error-input {
  flex: 1;
  background: #13132a;
  border: 1px solid #2a2a4a;
  border-radius: 5px;
  padding: 6px 8px;
  color: #aaaacc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  resize: none;
  outline: none;
}

.error-input:focus { border-color: #9966cc; }
.error-input::placeholder { color: #333355; }

.resolve-manual-btn {
  padding: 6px 10px;
  background: #1a0a2a;
  border: 1px solid #7a44aa;
  border-radius: 5px;
  color: #cc88ff;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  transition: all 0.15s;
  white-space: nowrap;
}

.resolve-manual-btn:hover { background: #2a1a4a; border-color: #cc88ff; }

.error-logs { display: flex; flex-direction: column; gap: 7px; }

.no-errors {
  color: #333355;
  text-align: center;
  padding: 10px;
  font-size: 9px;
}

.error-entry {
  background: #110e1e;
  border: 1px solid #2a1a3a;
  border-radius: 5px;
  padding: 7px 9px;
}

.error-msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.err-icon { color: #ff8844; font-size: 11px; flex-shrink: 0; }
.err-text { color: #cc9977; font-size: 9px; line-height: 1.5; }

.resolution {
  background: #0e1e1a;
  border: 1px solid #1a3a2a;
  border-radius: 4px;
  padding: 6px 8px;
}

.res-label {
  color: #44cc88;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.res-text {
  color: #88ccaa;
  font-size: 9px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 100px;
  overflow-y: auto;
}

.resolve-btn {
  padding: 5px 12px;
  background: #160e26;
  border: 1px solid #5a2a8a;
  border-radius: 4px;
  color: #aa66ee;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  transition: all 0.15s;
}

.resolve-btn:hover { border-color: #cc88ff; color: #cc88ff; }
.resolve-btn.loading { opacity: 0.6; animation: pulse-ai 1s infinite; }

@keyframes pulse-ai {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.clear-btn {
  margin-top: 8px;
  width: 100%;
  padding: 5px;
  background: transparent;
  border: 1px solid #2a1a3a;
  border-radius: 4px;
  color: #443355;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  transition: all 0.15s;
}

.clear-btn:hover { border-color: #4a2a5a; color: #776688; }