/* ═══════════════════════════════════════════════════
   AuivaMedia — Design System v2
   Dark (default) · Light (toggle via html.light)
   Reference: Facebook · Instagram · Threads · Messenger
═══════════════════════════════════════════════════ */

/* ── Colour Tokens ─────────────────────────────── */
:root {
  --bg:    #0a0a0a;
  --sf:    #111111;
  --s2:    #1a1a1a;
  --bd:    #242424;
  --t1:    #e8eaed;
  --t2:    #9aa0a6;
  --t3:    #5f6368;
  --vi:    #E8621A;
  --vi-h:  #C4501A;
  --vi-l:  #f97316;
  --shd:   0 1px 3px rgba(0,0,0,.5);
}

html.light {
  --bg:    #f0f2f5;
  --sf:    #ffffff;
  --s2:    #f0f2f5;
  --bd:    #dee0e3;
  --t1:    #1c1e21;
  --t2:    #65676b;
  --t3:    #8a8d91;
  --shd:   0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}

/* ── Base ──────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .2s ease, color .2s ease;
  min-height: 100vh;
}

/* ── Sidebar Nav ───────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t2);
  transition: background .15s, color .15s;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  border: none;
  background: transparent;
  text-align: right;
}
.nav-item:hover  { background: var(--s2); color: var(--t1); }
.nav-active      { background: var(--s2); color: var(--t1); font-weight: 600; }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  flex: 1;
  padding: 4px 0;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color .15s;
}
.mobile-nav-item.active { color: var(--vi); }

/* ── Post Card ─────────────────────────────────── */
.post-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  box-shadow: var(--shd);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  transition: box-shadow .15s;
}
html.light .post-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* ── Action Button (Like/Comment/Share/Save) ───── */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--t2);
  transition: background .15s, color .15s;
  padding: 0.5rem 0.5rem;
  border-radius: 0.625rem;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
}
.action-btn:hover    { background: var(--s2); color: var(--t1); }
.action-btn.active   { color: #E8621A; }
.action-btn.liked    { color: #ef4444; }

/* ── Story Ring ────────────────────────────────── */
.story-ring       { background: linear-gradient(135deg,#E8621A 0%,#f97316 50%,#C4501A 100%); padding: 2.5px; border-radius: 9999px; display: inline-block; }
.story-ring-inner { background: var(--bg); padding: 2.5px; border-radius: 9999px; }
.story-ring-seen  { background: var(--bd); padding: 2.5px; border-radius: 9999px; display: inline-block; }

/* ── Input Fields ──────────────────────────────── */
.input-field {
  width: 100%;
  background: var(--s2);
  border: 1.5px solid var(--bd);
  color: var(--t1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-field::placeholder { color: var(--t3); }
.input-field:focus {
  border-color: var(--vi);
  box-shadow: 0 0 0 3px rgba(232,98,26,.12);
}

/* ── Buttons ───────────────────────────────────── */
.btn-primary {
  width: 100%;
  background: var(--vi);
  color: #fff;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(232,98,26,.35);
}
.btn-primary:hover  { background: var(--vi-h); box-shadow: 0 6px 18px rgba(232,98,26,.4); }
.btn-primary:active { transform: scale(.98); }

/* ── Create Option ─────────────────────────────── */
.create-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--t1);
  transition: background .15s;
  text-decoration: none;
}
.create-option:hover { background: var(--s2); }

/* ── Messenger Bubbles ─────────────────────────── */
.msg-sent {
  background: var(--vi);
  color: #fff;
  border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
  padding: 0.625rem 1rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}
.msg-received {
  background: var(--s2);
  color: var(--t1);
  border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
  padding: 0.625rem 1rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Reel Gradient ─────────────────────────────── */
.reel-gradient {
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.5)  35%,
    transparent     65%);
}

/* ── Thread Line ───────────────────────────────── */
.thread-line {
  position: absolute;
  width: 2px;
  background: var(--bd);
  top: 2.75rem;
  bottom: 0;
  right: 1.375rem;
}

/* ── Card Surface ──────────────────────────────── */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 1rem;
}

/* ── Hover Surface ─────────────────────────────── */
.hover-surface { transition: background .15s; }
.hover-surface:hover { background: var(--s2); }

/* ── Reaction Picker ───────────────────────────── */
.reaction-picker {
  background: var(--sf);
  border: 1px solid var(--bd);
  box-shadow: 0 -2px 24px rgba(0,0,0,.22), 0 8px 32px rgba(0,0,0,.18);
  border-radius: 1.5rem;
  padding: 0.5rem 0.375rem;
  display: flex;
  align-items: flex-end;
  gap: 0.125rem;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  z-index: 30;
  white-space: nowrap;
}

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }
html { scroll-behavior: smooth; }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Text Clamp ────────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Animations ────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp .2s ease both; }

@keyframes pulse-vi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,98,26,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(232,98,26,0); }
}
.pulse-vi { animation: pulse-vi 2s infinite; }

/* ── Skeleton loader ───────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--s2) 25%, var(--bd) 50%, var(--s2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Badge ─────────────────────────────────────── */
.badge-vi {
  background: rgba(232,98,26,.15);
  color: var(--vi-l);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: .04em;
  display: inline-block;
}

/* ── Create Modal ──────────────────────────────── */
@media (min-width: 1024px) {
  #createModalCard { border-radius: 1.5rem !important; }
}

/* ── Auth Card ─────────────────────────────────── */
.auth-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: var(--shd);
}

/* ── Specialization Filter Pills ───────────────── */
.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.875rem;
  border-radius: 99px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--bd);
  background: var(--sf);
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: inherit;
}
.spec-pill:hover { border-color: var(--vi); color: var(--t1); background: var(--s2); }
.spec-pill.active { background: var(--vi); border-color: var(--vi); color: #fff; }

/* ── Architectural Reactions ───────────────────── */
.arch-reaction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0.625rem 0.75rem;
  border-radius: 1rem;
  transition: background .15s;
  border: none;
  background: transparent;
  font-family: inherit;
}
.arch-reaction:hover { background: var(--s2); }
.arch-reaction.active { background: rgba(255,255,255,.05); }

.arch-reaction .arch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.arch-reaction:hover .arch-icon {
  transform: scale(1.45) translateY(-6px);
}
.arch-reaction:active .arch-icon {
  transform: scale(0.88) translateY(-2px);
  transition: transform 0.08s ease;
}
.arch-reaction.active .arch-icon {
  filter: drop-shadow(0 0 5px currentColor);
}

.arch-reaction .arch-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: .02em;
  transition: color .15s;
}
.arch-reaction:hover .arch-label { color: var(--t1); }
.arch-reaction.active .arch-label { color: var(--t1); }

/* Pop on select */
@keyframes reaction-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.65) translateY(-10px); }
  60%  { transform: scale(0.85) translateY(-4px); }
  80%  { transform: scale(1.12) translateY(-6px); }
  100% { transform: scale(1); }
}
.arch-reaction.popping .arch-icon {
  animation: reaction-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Challenge Card ────────────────────────────── */
.challenge-card {
  background: linear-gradient(135deg, rgba(232,98,26,.08) 0%, rgba(124,58,237,.06) 100%);
  border: 1.5px solid rgba(232,98,26,.2);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
}
.challenge-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,98,26,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Platform Badge ────────────────────────────── */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.platform-badge:hover { opacity: .8; }
.platform-badge-lms  { background: rgba(124,58,237,.1); color: #7c3aed; border: 1px solid rgba(124,58,237,.2); }
.platform-badge-free { background: rgba(34,197,94,.1);  color: #16a34a; border: 1px solid rgba(34,197,94,.2); }
.platform-badge-proj { background: rgba(232,98,26,.1);  color: var(--vi); border: 1px solid rgba(232,98,26,.2); }
.platform-badge-bim  { background: rgba(59,130,246,.1); color: #3b82f6; border: 1px solid rgba(59,130,246,.2); }

/* ── Comment Type Pills ────────────────────────── */
.comment-type-btn {
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1.5px solid var(--bd);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.comment-type-btn:hover { border-color: var(--t2); color: var(--t2); }
.comment-type-btn.type-critique { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
.comment-type-btn.type-question { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,.08); }
.comment-type-btn.type-praise   { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.08); }

/* ── Post Type Tag ─────────────────────────────── */
.post-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.post-type-project  { background: rgba(232,98,26,.12);  color: var(--vi); }
.post-type-course   { background: rgba(124,58,237,.1);  color: #7c3aed; }
.post-type-progress { background: rgba(34,197,94,.1);   color: #16a34a; }
.post-type-challenge{ background: rgba(245,158,11,.1);  color: #d97706; }

/* ── Quote Share ───────────────────────────────── */
.share-menu {
  background: var(--sf);
  border: 1px solid var(--bd);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  border-radius: 0.875rem;
  padding: 0.375rem;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 180px;
}
.share-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
  transition: background .15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: right;
  font-family: inherit;
  text-decoration: none;
}
.share-menu-item:hover { background: var(--s2); }