/* StudyNest – Custom styles */
:root {
  --primary: #6C63FF;
  --primary-dark: #5752d1;
  --primary-light: #ede9ff;
  --accent: #FF6584;
}

* { box-sizing: border-box; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Star rating */
.stars { color: #f59e0b; }
.star-empty { color: #d1d5db; }

/* Rating input */
.star-input label { cursor: pointer; font-size: 1.5rem; color: #d1d5db; transition: color 0.15s; }
.star-input input[type="radio"] { display: none; }
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input[type="radio"]:checked ~ label { color: #f59e0b; }
.star-input { display: flex; flex-direction: row-reverse; gap: 2px; }

/* Smooth page transitions */
#app { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Chat bubbles */
.chat-bubble-user {
  background: var(--primary);
  color: white;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  max-width: 80%;
  align-self: flex-end;
  word-break: break-word;
}
.chat-bubble-ai {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px 18px 18px 4px;
  padding: 10px 16px;
  max-width: 80%;
  align-self: flex-start;
  word-break: break-word;
  line-height: 1.6;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 50%, #A78BFA 100%);
}

/* Card hover */
.card-hover {
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(108,99,255,0.15);
}

/* Scrollbar for chat */
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Country flag */
.country-flag { font-size: 1.2em; }

/* Loading spinner */
.spinner {
  border: 3px solid #e5e7eb;
  border-top-color: var(--primary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 0.7s linear infinite;
  margin: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile responsive tweaks */
@media (max-width: 640px) {
  .chat-bubble-user, .chat-bubble-ai { max-width: 92%; }
}