/* =========================================================
   Vibe AI Window – Professional Dark Theme (FINAL)
   Compatible with ai-router.js (.ai-msg / .ai-bubble)
   ========================================================= */

/* Window container */
#ai-window {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 450px;
  height: 600px;
  background: #111318;
  border: 1px solid #2a2d36;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #eaecef;
}

/* Header */
.ai-header {
  background: #171a21;
  padding: 14px 16px;
  border-radius: 14px 14px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-header span {
  font-weight: 600;
  font-size: 15px;
  color: #f5f7fa;
}

#ai-minimize {
  background: #2a2d36;
  border: none;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

#ai-minimize:hover {
  background: #3a3f4b;
}

/* Content wrapper */
.ai-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #111318;
}

/* Messages container */
#ai-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #0f1115;
}

/* Message row */
.ai-msg {
  display: flex;
  margin-bottom: 12px;
}

/* Bubble */
.ai-bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #f1f3f5;
  word-wrap: break-word;
  background: #1b1f2a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Assistant messages */
.ai-msg.assistant {
  justify-content: flex-start;
}

.ai-msg.assistant .ai-bubble {
  background: #1b1f2a;
  color: #f5f7fa;
}

/* User messages */
.ai-msg.user {
  justify-content: flex-end;
}

.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-radius: 14px 14px 6px 14px;
}

/* Typing indicator */
.ai-msg.assistant[data-typing="true"] .ai-bubble {
  font-style: italic;
  opacity: 0.85;
}

/* Ensure nested text stays readable */
.ai-bubble * {
  color: inherit;
}

/* Input area */
.ai-input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #171a21;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Input */
#ai-input {
  flex: 1;
  background: #0f1115;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

#ai-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#ai-input:focus {
  border-color: #4f7cff;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.35);
}

/* Buttons */
#ai-send,
#ai-save {
  background: #4f7cff;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#ai-send:hover,
#ai-save:hover {
  background: #5c88ff;
}

#ai-send:active,
#ai-save:active {
  transform: translateY(1px);
}

/* Scrollbar */
#ai-messages::-webkit-scrollbar {
  width: 8px;
}

#ai-messages::-webkit-scrollbar-track {
  background: #0f1115;
}

#ai-messages::-webkit-scrollbar-thumb {
  background: #2a2d36;
  border-radius: 4px;
}

#ai-messages::-webkit-scrollbar-thumb:hover {
  background: #3a3f4b;
}

/* Minimized state */
.ai-window.minimized .ai-content {
  display: none;
}