@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
.nav-link .fa-solid { display: none; }
.nav-link.active-link .fa-solid { display: inline-block; }
.nav-link.active-link .fa-regular { display: none; }
html {
  background: #1A120B !important;
}

body {
  font-family: 'Inter', sans-serif;
  padding-bottom: 64px;
  background:
    radial-gradient(circle at 20% 20%, #5C5470 0%, #1A120B 60%),
    radial-gradient(circle at 80% 80%, #B9B4C7 0%, #1A120B 70%);
  background-blend-mode: screen;
  background-attachment: fixed;
  color: #FAF0E6;
}

@media (min-width: 640px) {
  body { padding-bottom: 0; }
}

/* ================= REMOVE WHITE WASH ================= */
body,
#app-view,
main,
#feed-view {
  background: #1A120B !important;
}

.max-w-5xl {
  background: transparent !important;
}

/* ================= FEED BACKGROUND (lighter than cards) ================= */
#feed-view,
#feed,
#stories-section,
#post-creator {
  background: linear-gradient(180deg, #2A1E14, #1A120B) !important;
}

/* ================= GLASS CARDS ================= */
.krazy-card {
  background: rgba(26,18,11,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(185,180,199,0.35);
  border-radius: 18px;
  box-shadow:
    inset 0 0 20px rgba(250,240,230,0.05),
    0 0 20px rgba(185,180,199,0.25),
    0 15px 35px rgba(0,0,0,0.7);
  transition: all 0.3s ease;
}

.krazy-card:hover {
  transform: translateY(-3px) scale(1.01);
}

/* ================= BUTTONS ================= */
.krazy-button {
  background: linear-gradient(135deg, #5C5470, #B9B4C7);
  color: #FAF0E6 !important;
  border-radius: 999px;
  border: none;
  box-shadow:
    inset 0 0 10px rgba(250,240,230,0.25),
    0 0 20px rgba(185,180,199,0.4);
  transition: all 0.25s ease;
}

.krazy-button:hover {
  box-shadow:
    inset 0 0 15px rgba(250,240,230,0.45),
    0 0 40px rgba(185,180,199,0.8);
}

.krazy-button:active {
  transform: scale(0.95);
}

/* ================= INPUTS ================= */
input, textarea, select {
  background: rgba(43,39,54,0.8) !important;
  border: 1px solid rgba(185,180,199,0.4) !important;
  color: #FAF0E6 !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(250,240,230,0.6);
}

/* ================= HEADER ================= */
header {
  background: rgba(26,18,11,0.95) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(185,180,199,0.4);
}

/* ================= TEXT ================= */
h1,h2,h3,h4,h5,p,span,label {
  color: #FAF0E6 !important;
}

small {
  color: #B9B4C7 !important;
}

/* ================= CHAT ================= */
#chat-view {
  background: #1A120B !important;
}

#chat-messages div {
  background: rgba(92,84,112,0.7) !important;
  border: 1px solid rgba(185,180,199,0.5);
}

#chat-messages div.self-end {
  border: 1px solid #B9B4C7;
  box-shadow: 0 0 15px rgba(185,180,199,0.7);

}
#active-chat-panel {
    background: rgba(26,18,11,0.85);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(185,180,199,0.25);
  }
  
  #chat-header {
    color: #FAF0E6;
  }
  
  #chat-messages {
    color: #FAF0E6;
  }

/* ================= STORY MODAL ================= */
#story-viewer-modal {
  backdrop-filter: blur(25px);
  background: radial-gradient(circle at top, #5C5470, #1A120B) !important;
}

#delete-story-btn {
  background: linear-gradient(135deg, #7a2e2e, #b91c1c);
  box-shadow: 0 0 15px rgba(250,100,100,0.7);
}

/* ================= NAV BAR ================= */
nav {
  background: rgba(26,18,11,0.95) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(185,180,199,0.3);
}

/* ================= PROFILE ================= */
#profile-view {
  background: #1A120B !important;
}

#profile-view .flex.justify-center > div {
  background: rgba(26,18,11,0.85);
  padding: 10px 20px;
  border-radius: 14px;
}

/* ================= SCROLL ================= */
.scroll-container::-webkit-scrollbar { display: none; }
.scroll-container { scrollbar-width: none; }

/* ================= RIPPLE EFFECT ================= */
@keyframes liquidRipple {
  0% { box-shadow: 0 0 0 rgba(250,240,230,0.5); }
  100% { box-shadow: 0 0 40px rgba(250,240,230,0); }
}

.liquid-ripple {
  animation: liquidRipple 0.6s ease;
}
/* ===== FIX COMMENT MODAL WHITE ===== */
#comment-modal > div {
    background: rgba(26,18,11,0.95) !important;
    border: 1px solid rgba(185,180,199,0.35);
    backdrop-filter: blur(14px);
  }
  
  /* ===== FIX NOTIFICATION PANEL WHITE ===== */
  #notifications-panel {
    background: rgba(26,18,11,0.95) !important;
    border: 1px solid rgba(185,180,199,0.35);
    backdrop-filter: blur(14px);
  }
  
  #notifications-panel div {
    background: transparent !important;
    color: #FAF0E6 !important;
  }
  
  #notifications-panel h3,
  #notifications-panel p,
  #notifications-panel span {
    color: #FAF0E6 !important;
  }
  
  /* ===== FIX COMMENT INPUT BAR ===== */
  #comment-modal input {
    background: rgba(43,39,54,0.9) !important;
    color: #FAF0E6 !important;
  }
  
  /* ================= CHAT VIEW ================= */
  #chat-view,
  #chat-sidebar,
  #active-chat-panel {
    background: #1A120B !important;
  }
  
  #chat-sidebar {
    border-right: 1px solid rgba(185,180,199,0.3) !important;
  }
  
  /* Chat list items */
  #chat-list-container > div {
    background: rgba(26,18,11,0.75) !important;
    border: 1px solid rgba(185,180,199,0.3);
    border-radius: 12px;
  }
  
  /* Chat header */
  #chat-header {
    background: rgba(26,18,11,0.95) !important;
    border-bottom: 1px solid rgba(185,180,199,0.3);
    color: #FAF0E6;
  }
  
  /* Chat input bar */
  #active-chat-panel > div:last-child {
    background: rgba(26,18,11,0.95) !important;
    border-top: 1px solid rgba(185,180,199,0.3);
  }
  
  /* ================= REQUESTS & GROUPS ================= */
  #tab-requests,
  #tab-groups {
    background: linear-gradient(135deg, #5C5470, #B9B4C7) !important;
    color: #FAF0E6 !important;
  }
  
  /* Request / group cards */
  #chat-list-container div {
    background: rgba(26,18,11,0.8) !important;
    border: 1px solid rgba(185,180,199,0.3);
    color: #FAF0E6;
  }
  
  /* Accept / Ignore buttons */
  #chat-list-container button {
    background: linear-gradient(135deg, #5C5470, #B9B4C7) !important;
    color: #FAF0E6 !important;
  }
  
  /* ================= STORY VIEWER ================= */
  #story-viewer-modal > div {
    background: rgba(26,18,11,0.9) !important;
    border: 1px solid rgba(185,180,199,0.3);
  }
  
  /* ================= REMOVE ANY WHITE ================= */
  #comment-modal,
  #chat-view,
  #chat-sidebar,
  #active-chat-panel {
    background-color: #1A120B !important;
  }

  /* Login glow when typing */
.glow-active {
    box-shadow: 0 0 25px rgba(185,180,199,0.8),
                0 0 50px rgba(92,84,112,0.8) !important;
  }
  
  /* COOL LOADER */
  .spinner {
    border: 3px solid rgba(250,240,230,0.2);
    border-top: 3px solid #B9B4C7;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 0.8s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  /* ================= MOBILE FIX FOR NOTIFICATION PANEL ================= */
#notifications-panel {
  position: fixed !important;
  top: 60px !important;   /* below header */
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: none !important;
}

/* Desktop behavior */
@media (min-width: 768px) {
  #notifications-panel {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 20rem !important; /* w-80 */
  }
}
/* ===== FIX REGISTER MODAL WHITE WASH ===== */
#register-modal > div {
  background: rgba(26,18,11,0.95) !important;   /* dark glass */
  border: 1px solid rgba(185,180,199,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 30px rgba(185,180,199,0.3);
}

/* Headings */
#register-modal h2,
#register-modal h3,
#register-modal label {
  color: #FAF0E6 !important;
}

/* Inputs */
#register-modal input,
#register-modal select {
  background: rgba(43,39,54,0.85) !important;
  color: #FAF0E6 !important;
  border: 1px solid rgba(185,180,199,0.4) !important;
}

/* Placeholder */
#register-modal input::placeholder {
  color: rgba(250,240,230,0.6);
}

/* Buttons */
#register-modal button {
  background: linear-gradient(135deg, #5C5470, #B9B4C7) !important;
  color: #FAF0E6 !important;
  border: none;
  box-shadow: 0 0 15px rgba(185,180,199,0.5);
}

/* Cancel button (text only) */
#register-modal .cancel-btn {
  background: transparent !important;
  color: #B9B4C7 !important;
}

@media (max-width: 640px) {

  #chat-view {
    position: relative;
    height: calc(100vh - 56px); /* leave space for bottom nav */
    overflow: hidden;
  }

  #chat-sidebar {
    width: 100%;
    height: 100%;
  }

  #active-chat-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #1A120B;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  #active-chat-panel.mobile-active {
    transform: translateX(0);
  }
}
#chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.message-row {
  display: flex;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.theirs {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
  font-size: 14px;
  line-height: 1.4;
}

.message-row.mine .message-bubble {
  background: #2563eb;   /* blue */
  color: white;
  border-bottom-right-radius: 4px;
}

.message-row.theirs .message-bubble {
  background: #e5e7eb;   /* light grey */
  color: black;
  border-bottom-left-radius: 4px;
}

.message-time {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}