/* ════════════════════════════════════════════════════════════════
   LINKLY – main stylesheet
   ------------------------------------------------------------
   Design language: crisp white surfaces, true black text,
   subtle grey accents, generous border-radius — with one
   accent used deliberately in two places only: the wordmark /
   auth screens (brand moments) and the AI assistant widget
   ("this is the smart part of the app"). Everywhere else stays
   quiet on purpose so those two moments still pop.

   TABLE OF CONTENTS (search for these exact headings to jump
   around — this file is long, but every section is independent):
     1. Design tokens (colors, radii, shadows)
     2. Reset & base
     3. Motion & accessibility (animations, reduced-motion)
     4. Shared building blocks (fields, buttons, page transitions)
     5. Page 1 — Auth
     6. Page 2 — Home / activity grid
     7. Page 3 — Activity detail
     8. Page 4 — Join form
     9. Page 5 — Community chat
     10. AI Assistant widget
     11. Responsive overrides
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
  /* Neutrals — unchanged from before, this is still a black &
     white product at its core. */
  --black:   #0a0a0a;
  --white:   #ffffff;
  --grey-1:  #f5f5f5;   /* page background */
  --grey-2:  #ebebeb;   /* card borders, dividers */
  --grey-3:  #9ca3af;   /* muted text */
  --grey-4:  #6b7280;   /* secondary text */

  /* Accent — the ONLY color in the app. Used for the wordmark,
     the auth/join background glow, and the AI assistant. Keeping
     it to one gradient family (violet → blue → teal) instead of
     a grab-bag of colors is what keeps it feeling designed. */
  --accent-1: #363636;  /* violet   */
  --accent-2: #4f5153;  /* blue     */
  --accent-3: #1a2423;  /* teal     */
  --accent-glow: rgba(252, 252, 255, 0.35);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-card: 0 4px 24px rgba(0,0,0,.07);
  --shadow-lift: 0 8px 32px rgba(0,0,0,.12);
  --shadow-glow: 0 8px 28px var(--accent-glow);

  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Centralised timing so every transition in the file agrees */
  --ease: cubic-bezier(.22, 1, .36, 1);
}


/* ────────────────────────────────────────────────────────────
   2. RESET & BASE
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--grey-1);
  color: var(--black);
  min-height: 100vh;
}

/* Visible keyboard focus everywhere (quality floor: don't ship
   a site that's unusable without a mouse). Buttons/fields already
   get their own focus treatment below; this is the fallback. */
:focus-visible {
  outline: 2.5px solid var(--accent-1);
  outline-offset: 2px;
}

/* ── Page visibility + transition ── */
.page { display: none; }
.page.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: pageIn .38s var(--ease);
}
.hidden { display: none !important; }


/* ────────────────────────────────────────────────────────────
   3. MOTION & ACCESSIBILITY
   ------------------------------------------------------------
   Every @keyframes used anywhere in this file lives here, so
   you only need to look in one place to see what's animating.
   ──────────────────────────────────────────────────────────── */

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

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes auroraDrift {
  0%   { transform: translate(-6%, -4%) rotate(0deg)   scale(1); }
  50%  { transform: translate(4%, 6%)   rotate(180deg) scale(1.08); }
  100% { transform: translate(-6%, -4%) rotate(360deg) scale(1); }
}

@keyframes fabPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 14px rgba(124, 107, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 107, 255, 0); }
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes typingDot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Respect the OS-level "reduce motion" setting: turn the
   decorative animations off, keep instant state changes. This
   is a hard requirement, not a nice-to-have. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ────────────────────────────────────────────────────────────
   4. SHARED BUILDING BLOCKS
   ──────────────────────────────────────────────────────────── */

/* ── Fields ── */
.field {
  width: 100%;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .95rem;
  font-family: var(--font);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 28px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  width: 100%;
  position: relative;
}
.btn-primary:hover:not(:disabled)  { opacity: .85; }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary:disabled { cursor: default; opacity: .6; }

/* Little spinner shown on the auth button while a request is in
   flight — swaps the label out via CSS so no extra markup needed. */
.btn-primary.is-loading { color: transparent; }
.btn-primary.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.btn-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
  width: 100%;
}
.btn-outline:hover { background: var(--black); color: var(--white); }

.btn-ghost {
  background: none;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--grey-4);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--black); color: var(--black); }

.btn-back {
  background: var(--white);
  border: 1.5px solid var(--grey-2);
  border-radius: var(--radius-xl);
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  position: absolute;
  top: 20px; left: 20px;
  transition: box-shadow .2s;
}
.btn-back:hover { box-shadow: var(--shadow-card); }

.btn-back-inline {
  background: none;
  border: none;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--black);
}

/* Error message */
.err-msg {
  color: #dc2626;
  font-size: .82rem;
  min-height: 1rem;
  text-align: center;
}

/* Gradient wordmark — reused on the auth logo and the AI panel
   header, the two "accent" moments described at the top of this
   file. Kept to text only; no glow/shadow so it stays crisp. */
.wordmark-gradient {
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft animated aurora blob, absolutely positioned by whoever
   uses it. Used behind the auth card and the join card only —
   see .auth-aurora / .join-aurora below for placement. */
.aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  animation: auroraDrift 22s ease-in-out infinite;
}
.aurora::before {
  top: -10%; left: -10%;
  background: radial-gradient(circle, var(--accent-1), transparent 70%);
}
.aurora::after {
  bottom: -15%; right: -10%;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  animation-duration: 26s;
  animation-direction: reverse;
}


/* ────────────────────────────────────────────────────────────
   5. PAGE 1 — AUTH
   ──────────────────────────────────────────────────────────── */
#page-auth {
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--grey-1);
  overflow: hidden;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  width: 360px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Wordmark */
.auth-logo {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -2px;
  text-align: center;
}

.auth-sub {
  text-align: center;
  color: var(--grey-3);
  font-size: .85rem;
  font-weight: 500;
  margin-top: -6px;
}

/* Login / signup tabs */
.tabs {
  display: flex;
  background: var(--grey-1);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: 4px;
}
.tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: .88rem;
  font-weight: 600;
  color: var(--grey-3);
  cursor: pointer;
  transition: all .2s;
}
.tab.active {
  background: var(--white);
  color: var(--black);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}


/* ────────────────────────────────────────────────────────────
   6. PAGE 2 — HOME / ACTIVITY GRID
   ──────────────────────────────────────────────────────────── */
#page-home { background: var(--grey-1); }

/* ── Topbar ── */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--grey-2);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-brand {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--black);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* Clickable username */
.uname {
  font-size: .87rem;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  border-bottom: 1.5px dashed var(--grey-3);
}

/* Section title */
.home-main { padding: 32px 28px; }
.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 24px;
}

/* Activity card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* Single activity card. Entrance animation is staggered per-card
   via inline `animation-delay` set in activities.js. */
.activity-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: cardIn .5s var(--ease) forwards;
}
.activity-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

/* Card image placeholder */
.card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--grey-2);
  display: block;
}

.card-img-placeholder {
  width: 100%;
  height: 160px;
  background: var(--grey-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--grey-3);
  transition: transform .3s var(--ease);
}
.activity-card:hover .card-img-placeholder { transform: scale(1.08); }

.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-title { font-size: 1rem; font-weight: 800; }
.card-snippet { font-size: .83rem; color: var(--grey-4); line-height: 1.5; flex: 1; }

.see-more-btn {
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 0;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
  width: 100%;
}
.see-more-btn:hover { opacity: .8; }


/* ────────────────────────────────────────────────────────────
   7. PAGE 3 — ACTIVITY DETAIL
   ──────────────────────────────────────────────────────────── */
#page-detail {
  position: relative;
  background: var(--grey-1);
  padding: 80px 28px 40px;
  align-items: center;
}

.detail-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 640px;
  width: 100%;
  box-shadow: var(--shadow-card);
}

.detail-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: var(--grey-2);
}

.detail-body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.detail-title { font-size: 1.7rem; font-weight: 900; letter-spacing: -.5px; }
.detail-info  { color: var(--grey-4); font-size: .95rem; line-height: 1.6; }

.detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }


/* ────────────────────────────────────────────────────────────
   8. PAGE 4 — JOIN FORM
   ──────────────────────────────────────────────────────────── */
#page-join {
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--grey-1);
  overflow: hidden;
}

.join-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  width: 360px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.join-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.5px; text-align: center; }
.join-sub   { text-align: center; color: var(--grey-3); font-size: .85rem; margin-top: -4px; }


/* ────────────────────────────────────────────────────────────
   9. PAGE 5 — COMMUNITY CHAT
   ──────────────────────────────────────────────────────────── */
#page-chat { background: var(--grey-1); }

/* Chat topbar reuses .topbar */

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual message bubble */
.msg {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
  word-break: break-word;
  animation: bubbleIn .25s var(--ease);
}
.msg.mine {
  align-self: flex-end;
  background: var(--black);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.msg.theirs {
  align-self: flex-start;
  background: var(--white);
  color: var(--black);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* Sender label inside bubble */
.msg-who {
  font-size: .7rem;
  font-weight: 700;
  opacity: .55;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: flex;
  justify-content: space-between;
}

/* Delete button on own messages */
.del {
  background: none;
  border: none;
  cursor: pointer;
  opacity: .5;
  color: inherit;
  font-size: .7rem;
  padding-left: 8px;
  transition: opacity .2s;
}
.del:hover { opacity: 1; }

/* Bottom input row */
.chat-bar {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  background: var(--white);
  border-top: 1px solid var(--grey-2);
}

.chat-input {
  flex: 1;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .93rem;
  font-family: var(--font);
  resize: none;
  max-height: 120px;
  outline: none;
  transition: border-color .2s;
}
.chat-input:focus { border-color: var(--black); }

/* Override btn-primary width only inside chat-bar */
.chat-bar .btn-primary { width: auto; padding: 10px 22px; }


/* ────────────────────────────────────────────────────────────
   10. AI ASSISTANT WIDGET
   ------------------------------------------------------------
   Floating button (#ai-fab) + slide-up panel (#ai-panel).
   Lives outside the .page divs in index.html so it stays on
   screen no matter which page is active.
   ──────────────────────────────────────────────────────────── */

/* Floating action button, bottom-right corner */
#ai-fab {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 1000;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 55%, var(--accent-3));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  animation: fabPulse 2.6s ease-out infinite;
  transition: transform .2s var(--ease);
}
#ai-fab:hover  { transform: scale(1.06); }
#ai-fab:active { transform: scale(.96); }
#ai-fab svg { width: 26px; height: 26px; }

/* Swap icon + slightly shrink the ring animation while the panel is open */
#ai-fab.is-active { animation: none; }
#ai-fab .icon-chat  { display: block; }
#ai-fab .icon-close { display: none; }
#ai-fab.is-active .icon-chat  { display: none; }
#ai-fab.is-active .icon-close { display: block; }

/* Chat panel */
#ai-panel {
  position: fixed;
  right: 24px;
  bottom: 160px;
  z-index: 999;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 140px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
#ai-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-header {
  flex-shrink: 0;
  padding: 16px 18px;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2) 55%, var(--accent-3));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-header-title { font-size: .98rem; font-weight: 800; }
.ai-header-sub   { font-size: .72rem; opacity: .85; margin-top: 1px; }
.ai-close-btn {
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 8px;
  color: var(--white);
  width: 26px; height: 26px;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.ai-close-btn:hover { background: rgba(255,255,255,.32); }

.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--grey-1);
}

.ai-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg-user {
  align-self: flex-end;
  background: var(--black);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.ai-msg-bot {
  align-self: flex-start;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  border-bottom-left-radius: 4px;
}
.ai-msg-error {
  color: #dc2626;
  box-shadow: 0 0 0 1.5px rgba(220,38,38,.25) inset;
}

/* Typing indicator (three bouncing dots). Sits as its own row
   between the message list and the input bar — see the HTML
   comment in index.html for why it's not inside #ai-msgs. */
#ai-typing {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 16px;
  background: var(--grey-1);
}
#ai-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grey-3);
  animation: typingDot 1.2s ease-in-out infinite;
}
#ai-typing span:nth-child(2) { animation-delay: .15s; }
#ai-typing span:nth-child(3) { animation-delay: .3s; }

.ai-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border-top: 1px solid var(--grey-2);
}
#ai-input {
  flex: 1;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: .87rem;
  font-family: var(--font);
  resize: none;
  max-height: 90px;
  outline: none;
  transition: border-color .2s;
}
#ai-input:focus { border-color: var(--accent-1); }

#ai-send-btn {
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  width: 38px; height: 38px;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
#ai-send-btn:hover:not(:disabled)  { opacity: .8; }
#ai-send-btn:disabled { opacity: .5; cursor: default; }
#ai-send-btn svg { width: 16px; height: 16px; }


/* ────────────────────────────────────────────────────────────
   11. RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .auth-card, .join-card { width: 94%; padding: 36px 24px; }
  .grid { grid-template-columns: 1fr; }
  .detail-wrap { border-radius: var(--radius-md); }
  .home-main { padding: 20px 16px; }
  .msg { max-width: 88%; }

  /* AI panel goes full-screen on small viewports instead of a
     floating card, so it's actually usable on a phone. */
  #ai-panel {
    right: 12px;
    left: 12px;
    bottom: 150px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100vh - 120px);
  }
  #ai-fab { right: 18px; bottom: 78px; }
}