/* ============================================
   NOVA — Global Styles
   ============================================ */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }

/* ---- Links ---- */
a { color: var(--violet-400); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--violet-300); }

/* ============================================
   3-Column Layout
   ============================================ */
.nova-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--panel-width);
  min-height: 100vh;
  gap: 0;
}

/* ---- Sidebar ---- */
.nova-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nova-sidebar__logo {
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.nova-sidebar__nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

.nova-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.nova-sidebar__link:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}
.nova-sidebar__link--active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: inset 3px 0 0 var(--violet-500);
}

.nova-sidebar__link svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---- Main ---- */
.nova-main {
  padding: 2rem;
  overflow-y: auto;
  min-height: 100vh;
}

/* ---- Right Panel ---- */
.nova-panel {
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.nova-panel__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-weight: 600;
}

/* ============================================
   Components
   ============================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--gradient-hero);
  color: #fff;
  box-shadow: var(--shadow-glow-rose);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.btn-gold {
  background: var(--gradient-gold);
  color: var(--text-inverse);
  box-shadow: var(--shadow-glow-gold);
}
.btn-gold:hover { opacity: 0.9; transform: translateY(-1px); color: var(--text-inverse); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { background: var(--bg-surface); color: var(--text-primary); }

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-full); }

/* ---- Cards ---- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}
.card:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); }
.card__body { padding: 1.25rem; }
.card__footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-subtle); }

/* ---- Avatar ---- */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-default);
}
.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 96px; height: 96px; }
.avatar--novame { border-color: var(--violet-500); box-shadow: var(--shadow-glow-violet); }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-rose { background: var(--rose-600); color: #fff; }
.badge-violet { background: var(--violet-600); color: #fff; }
.badge-gold { background: var(--gold-500); color: var(--text-inverse); }
.badge-success { background: #059669; color: #fff; }

/* ---- Form inputs ---- */
.form-input {
  width: 100%;
  padding: 0.65rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.form-input::placeholder { color: var(--text-muted); }

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-group { margin-bottom: 1.25rem; }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* ---- Media lock overlay ---- */
.media-locked {
  position: relative;
  overflow: hidden;
}
.media-locked__overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 10;
}
.media-locked__icon {
  width: 48px;
  height: 48px;
  color: var(--gold-400);
}

/* ---- Toast / Flash ---- */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.toast-success { background: rgba(5, 150, 105, 0.15); color: #34d399; border: 1px solid rgba(5, 150, 105, 0.3); }
.toast-error { background: rgba(244, 63, 94, 0.15); color: var(--rose-300); border: 1px solid rgba(244, 63, 94, 0.3); }
.toast-info { background: rgba(139, 92, 246, 0.15); color: var(--violet-300); border: 1px solid rgba(139, 92, 246, 0.3); }

/* ============================================
   Feed — Vertical snap cards
   ============================================ */
.feed-container {
  max-width: 420px;
  margin: 0 auto;
  height: calc(100vh - 4rem);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.feed-card {
  scroll-snap-align: start;
  height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}

.feed-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.feed-card__name {
  font-size: 1.5rem;
  font-weight: 700;
}

.feed-card__meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.feed-card__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.feed-action {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid;
}

.feed-action--nope {
  border-color: var(--rose-500);
  color: var(--rose-500);
  background: rgba(244, 63, 94, 0.1);
}
.feed-action--nope:hover { background: var(--rose-600); color: #fff; }

.feed-action--like {
  border-color: #34d399;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}
.feed-action--like:hover { background: #059669; color: #fff; }

.feed-action--gold {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(251, 191, 36, 0.1);
}
.feed-action--gold:hover { background: var(--gold-500); color: var(--text-inverse); }

.feed-action svg { width: 24px; height: 24px; }

/* ============================================
   Chat
   ============================================ */
.chat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.chat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.chat-item:hover { background: var(--bg-surface-hover); }
.chat-item__info { flex: 1; min-width: 0; }
.chat-item__name { font-weight: 600; font-size: 0.9rem; }
.chat-item__preview { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-bubble {
  max-width: 75%;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  line-height: 1.4;
}
.chat-bubble--mine {
  align-self: flex-end;
  background: var(--violet-600);
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
}
.chat-bubble--theirs {
  align-self: flex-start;
  background: var(--bg-surface);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}
.chat-bubble--novame {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--violet-700), var(--rose-700));
  color: #fff;
  border-bottom-left-radius: var(--radius-sm);
}

.chat-input-bar {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .nova-layout {
    grid-template-columns: 1fr;
  }
  .nova-sidebar, .nova-panel { display: none; }
}