/* ── The CoLearning Space – Global Styles ─────────────────────────────────── */

/* ── Smooth scrolling & selection ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: #B2EBF2; color: #87338b; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4DD0E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #01a6ba; }

/* ── Typography ── */
h1, h2, h3 { font-family: 'Lora', Georgia, serif; }
h4, h5, h6, button, input, select, textarea { font-family: 'Inter', sans-serif; }

/* ── Page transitions ── */
.page-enter  { animation: pageIn  0.25s ease forwards; }
.page-exit   { animation: pageOut 0.2s  ease forwards; }

@keyframes pageIn  { from { opacity:0; transform:translateY(8px);  } to { opacity:1; transform:translateY(0); } }
@keyframes pageOut { from { opacity:1; transform:translateY(0);    } to { opacity:0; transform:translateY(-4px); } }

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, #F3E5F5 25%, #FFF9C4 50%, #F3E5F5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ── Card hover lift ── */
.card-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(135,51,139,0.12);
}

/* ── Tag / badge ── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Avatar ── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
  background: #B2EBF2;
  color: #00838F;
  user-select: none;
  overflow: hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ── Progress bar ── */
.progress-bar {
  height: 6px;
  background: #F3E5F5;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #01a6ba, #26C6DA);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ── Sidebar ── */
#sidebar {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1023px) {
  #sidebar.hidden-mobile { transform: translateX(-100%); position:fixed; z-index:200; }
  #sidebar.visible-mobile { transform: translateX(0); }
}

/* ── Toast ── */
.toast {
  pointer-events: all;
  min-width: 280px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(135,51,139,0.15);
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.toast-success { background:#01a6ba; color:#fff; }
.toast-error   { background:#E76F51; color:#fff; }
.toast-info    { background:#87338b; color:#fff; }
.toast-warning { background:#f79422; color:#87338b; }

/* ── Form inputs ── */
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #F3E5F5;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #87338b;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.form-input:focus { border-color: #01a6ba; box-shadow: 0 0 0 3px rgba(42,157,143,0.12); }
.form-input::placeholder { color: #BA68C8; }
.form-input.error { border-color: #E76F51; }
.form-label { display:block; font-size:0.875rem; font-weight:500; color:#87338b; margin-bottom:6px; }
.form-hint  { font-size:0.8125rem; color:#7B1FA2; margin-top:4px; }
.form-error { font-size:0.8125rem; color:#E76F51; margin-top:4px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary  { background:#01a6ba; color:#fff; border-color:#01a6ba; }
.btn-primary:hover:not(:disabled)  { background:#0097A7; border-color:#0097A7; }
.btn-secondary { background:transparent; color:#01a6ba; border-color:#01a6ba; }
.btn-secondary:hover:not(:disabled) { background:#E0F7FA; }
.btn-ghost { background:transparent; color:#87338b; border-color:transparent; }
.btn-ghost:hover:not(:disabled) { background:#F4F1EB; }
.btn-danger { background:#E76F51; color:#fff; border-color:#E76F51; }
.btn-danger:hover:not(:disabled) { background:#D85730; border-color:#D85730; }
.btn-sm { padding: 6px 14px; font-size: 0.8125rem; border-radius: 8px; }
.btn-lg { padding: 14px 28px; font-size: 1.0625rem; border-radius: 12px; }

/* ── Active nav item ── */
.nav-item.active { background:#E0F7FA; color:#01a6ba; }
.nav-item.active .nav-icon { color:#01a6ba; }

/* ── Circle/project cards ── */
.level-badge-beginner    { background:#B2EBF2; color:#00838F; }
.level-badge-intermediate{ background:#FFAB91; color:#8F311E; }
.level-badge-advanced    { background:#E1BEE7; color:#4A148C; }
.level-badge-all         { background:#FFE0B2; color:#E65100; }

.status-open        { background:#B2EBF2; color:#00838F; }
.status-progress    { background:#FFAB91; color:#8F311E; }
.status-completed   { background:#E1BEE7; color:#4A148C; }

/* ── Activity indicator ── */
.activity-active   { background:#01a6ba; }
.activity-moderate { background:#f79422; }
.activity-low      { background:#BA68C8; }

/* ── Onboarding steps ── */
.step-dot { width:10px; height:10px; border-radius:999px; background:#F3E5F5; transition:all 0.3s ease; }
.step-dot.active { width:24px; background:#01a6ba; }
.step-dot.done   { background:#26C6DA; }

/* ── Matching score ring ── */
.score-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.125rem; font-weight:700;
  background: conic-gradient(#01a6ba var(--score), #E0F7FA var(--score));
  position: relative;
}
.score-ring::before {
  content:'';
  position:absolute; inset:6px;
  background:#fff; border-radius:50%;
}
.score-ring span { position:relative; z-index:1; color:#01a6ba; }

/* ── Skill pills ── */
.skill-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:0.8125rem; font-weight:500;
  background:#E0F7FA; color:#00838F;
  cursor:pointer; transition:all 0.15s;
}
.skill-pill.selected { background:#01a6ba; color:#fff; }
.skill-pill:hover:not(.selected) { background:#B2EBF2; }
.skill-pill-gold { background:#FFF3E0; color:#E65100; }
.skill-pill-gold.selected { background:#f79422; color:#87338b; }

/* ── Chat / messages ── */
.message-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.message-bubble.mine  { background:#01a6ba; color:#fff; border-bottom-right-radius:4px; margin-left:auto; }
.message-bubble.theirs{ background:#F4F1EB; color:#87338b; border-bottom-left-radius:4px; }

/* ── Habit streak ── */
.streak-dot { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; }
.streak-dot.done   { background:#01a6ba; color:#fff; }
.streak-dot.missed { background:#F4F1EB; color:#BA68C8; }
.streak-dot.today  { background:#f79422; color:#87338b; border:2px solid #F57C00; }

/* ── Landing hero ── */
.hero-gradient {
  background-color: #004D40 !important;
  background: linear-gradient(135deg, #004D40 0%, #00838F 40%, #01a6ba 70%, #26C6DA 100%) !important;
}
.hero-pattern {
  background-image: radial-gradient(circle at 20% 80%, rgba(233,196,106,0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 40%) !important;
}

/* ── Section divider ── */
.section-divider { height:1px; background:linear-gradient(90deg, transparent, #F3E5F5, transparent); margin:2rem 0; }

/* ── Empty state ── */
.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-state-icon { font-size:3rem; margin-bottom:1rem; display:block; }

/* ── Mobile nav overlay ── */
#mobile-nav-overlay {
  display:none; position:fixed; inset:0; background:rgba(135,51,139,0.4);
  z-index:199; backdrop-filter:blur(2px);
}
#mobile-nav-overlay.show { display:block; }

/* ── Tab bar (mobile) ── */
.tab-bar-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; font-size:0.6875rem; font-weight:500; color:#BA68C8; cursor:pointer; transition:color 0.15s; }
.tab-bar-item.active { color:#01a6ba; }
.tab-bar-item .tb-icon { font-size:1.3rem; }

/* ── Responsive utilities ── */
@media (max-width: 639px) { .hide-mobile { display:none !important; } }
@media (min-width: 640px) { .show-mobile-only { display:none !important; } }