@font-face {
  font-family: "8bit";
  src: url(./assets/Pixelva.ttf);
}

:root {
  --bg: #000000;
  --fg: #8fd4ff;
  --dim: #5aa6cc;
  --hi: #3b82f6;
  --err: #ff6b6b;
  --card: #0a0f12;
  --line: #14222b;
  --nav-h: 48px;
  --post-top: 24vh;
}

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Prevent any horizontal scrolling */
* {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Main app container */
#app {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  overscroll-behavior-x: none;
}

/* Prevent iOS double-tap zoom on buttons/inputs */
button, input, select, textarea { 
  touch-action: manipulation; 
  max-width: 100%;
}

/* Prevent horizontal scrolling on all containers */
.container, .screen, .card, .feed, .nav, .header {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* Ensure all text and content stays within bounds */
p, div, span, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Instagram-like static feel - prevent any horizontal movement */
* {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Ensure no element can cause horizontal overflow */
.card, .post, .comment, .input, .button, .chip, .nav-btn {
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
}

/* Prevent horizontal scrolling on the entire page */
html, body, #app, .screen {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  position: relative;
}

/* Utility */
.hidden { display: none !important; }

/* About Modal Fallback */
.about-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.about-modal-content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.about-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.about-modal-header h2 {
  margin: 0;
  color: var(--fg);
  font-family: '8bit', monospace;
}

.about-modal-close {
  background: none;
  border: none;
  color: var(--fg);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-modal-body {
  padding: 20px;
}

.about-modal-body p {
  margin: 0 0 16px 0;
  color: var(--fg);
  line-height: 1.5;
}

.about-modal-body p:last-child {
  margin-bottom: 0;
}


/* Welcome popup */
.welcome-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: '8bit', monospace;
}

.welcome-container {
  text-align: center;
  padding: 20px;
  max-width: 360px; /* Mobile-first, smaller width */
  margin: 0 auto; /* Center on desktop */
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .welcome-container {
    max-width: 100%;
    padding: 16px;
  }
  
  .screen {
    max-width: 100%;
  }
  
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 40px;
}

.ascii-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.vertical-line-loader {
  width: 2px;
  height: 180px;
  background: white;
  animation: pulse 2s ease-in-out infinite;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}


/* Navigation Arrows */
.nav-arrow {
  background: none;
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.nav-arrow:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  transform: scale(1.05);
}

.nav-spacer {
  width: 40px;
}


.welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.welcome-subtitle {
  margin-top: 8px;
}

.welcome-subtitle p {
  color: var(--dim);
  font-family: '8bit', monospace;
  font-size: 12px;
  margin: 0 0 12px 0;
  text-align: center;
  opacity: 0.8;
}

.how-it-works-btn {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--dim);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
  font-size: 11px;
  transition: all 0.2s ease;
  display: block;
  margin: 0 auto;
  opacity: 0.8;
}

.how-it-works-btn:hover {
  background: var(--dim);
  color: var(--bg);
  transform: translateY(-1px);
  opacity: 1;
}

.welcome-btn {
  background: var(--card);
  border: 2px solid var(--hi);
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
  padding: 16px 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-width: 250px;
  letter-spacing: 1px;
  z-index: 10001;
  pointer-events: auto;
}

.welcome-btn:hover {
  background: var(--hi);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.welcome-btn.coming-soon {
  opacity: 0.7;
}

.welcome-btn.coming-soon:hover {
  background: var(--card);
  color: var(--fg);
  transform: none;
  box-shadow: none;
  cursor: default;
}

.coming-soon-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--hi);
  color: white;
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 2px;
  letter-spacing: 1px;
}

.screen { 
  display: grid; 
  grid-template-rows: auto auto 1fr; 
  min-height: 100dvh; 
  width: 100vw; 
  max-width: 100vw;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  margin: 0; /* No centering to prevent horizontal movement */
  padding: 0; /* No padding for edge-to-edge */
  box-sizing: border-box;
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg); position: relative;
  width: 100vw;
  box-sizing: border-box;
}


.celebration-content {
  background: var(--card);
  border: 2px solid var(--hi);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: celebrationPulse 0.6s ease-out;
}

.celebration-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.celebration-text {
  font-family: '8bit', monospace;
  font-size: 20px;
  color: var(--hi);
  font-weight: bold;
  margin-bottom: 8px;
}

.celebration-subtext {
  font-family: '8bit', monospace;
  font-size: 14px;
  color: var(--fg);
}

@keyframes celebrationPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.brand { letter-spacing: 1px; }
.pfp { width: 36px; height: 36px; border: 2px solid var(--fg); background: var(--bg); cursor: pointer; }

.chips { 
  display: flex; 
  gap: 8px; 
  padding: 10px 16px; 
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  max-width: 100vw;
  background: var(--bg);
  box-sizing: border-box;
}

.chips::-webkit-scrollbar {
  display: none;
}

/* Mobile-specific chip scrolling */
@media (max-width: 768px) {
  .screen {
    max-width: 100vw;
    overflow-x: hidden; /* Keep horizontal scrolling disabled */
  }
  
  .chips {
    padding: 8px 16px;
    gap: 6px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: 100vw;
    margin: 0;
  }
  
  .chip {
    scroll-snap-align: start;
    min-width: fit-content;
  }
}
.chip { 
  background: var(--bg); 
  color: var(--fg); 
  border: 1px solid var(--line); 
  padding: 6px 10px; 
  cursor: pointer; 
  flex-shrink: 0;
  white-space: nowrap;
}
.chip.active { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg) inset; }
.chip.trending { 
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  color: white;
  font-weight: bold;
  animation: trendingPulse 2s ease-in-out infinite;
}
.chip.trending.active {
  background: linear-gradient(45deg, #ff8c42, #ffa726);
  border-color: #ff6b35;
}


@keyframes trendingPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
}
* { box-sizing: border-box; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around; align-items: center;
  height: var(--nav-h);
  padding: 4px 8px; background: var(--bg); border-top: 1px solid var(--line);
  z-index: 9999;
  overscroll-behavior: contain;
}
.nav-btn { 
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: '8bit', monospace; font-size: 14px;
}
.nav-plus {
  width: 38px; height: 38px; border-radius: 50%; font-size: 18px;
  background: var(--hi); color: white; border-color: var(--hi);
  box-shadow: 0 6px 20px rgba(59,130,246,.35);
}
.nav-plus:active { transform: scale(0.98); }

/* active state */
.nav-btn.active { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi) inset; color: var(--hi); }

/* Removed duplicate .feed rule - using the one below */
.card:not(.post) { background: var(--card); border: 1px solid var(--line); padding: 12px; }

/* Feed container */
.feed {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Restore gap between posts to prevent overlapping */
  width: 100%;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);
}

/* Instagram story-sized post container with black background */
.card.post { 
  background: #000000; /* Black background for quote posts */
  width: 100vw; /* Full viewport width for edge-to-edge */
  max-width: 100vw; 
  margin: 0; 
  transform: none; 
  padding: 20px 0; /* Only vertical padding, no horizontal padding for true edge-to-edge */
  border: none; /* No borders for clean look */
  border-radius: 0; /* No rounded corners */
}
.post-frame {
  width: 100%;
  max-width: 100%;
  min-height: 300px; /* Use min-height instead of aspect-ratio */
  background: #000000;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 16px;
  padding-top: 20px;
  position: relative;
  margin: 0 auto; /* Center without transform to prevent overlapping */
}
.post-line { width: 1px; height: clamp(120px, 24vh, 480px); background: #ffffff; opacity: 0.8; margin-bottom: 16px; }
.post-content { 
  font-size: 20px; 
  line-height: 1.4; 
  text-align: center; 
  max-width: 90%; 
  color: #ffffff !important; 
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
  font-weight: 400;
  letter-spacing: 0.2px;
  margin: 0 auto;
  padding: 0 16px; /* Add horizontal padding to content so text doesn't touch edges */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.post-content .underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .post-content { font-size: 22px; line-height: 1.5; }
  .post-header { padding: 10px 12px; }
  .post-actions { padding: 12px 8px; }
}
.muted { 
  color: var(--dim); 
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
}
.row { display: flex; align-items: center; gap: 8px; }
/* Instagram-style post header */
.post-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 12px 16px; 
  background: var(--card);
}

.post-header-left { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

.post-header-user {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trending-badge {
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  font-family: '8bit', monospace;
  font-weight: bold;
  animation: trendingBadgePulse 1.5s ease-in-out infinite;
  align-self: flex-start;
}

@keyframes trendingBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.post-header .username { 
  font-weight: bold; 
  color: #fff; 
  font-size: 14px; 
  font-family: '8bit', monospace;
}

.post-header .badge { 
  font-size: 10px; 
  color: var(--dim); 
  font-family: '8bit', monospace;
}

.post-header-right { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.post-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.post-category {
  color: var(--hi);
  font-size: 12px;
  font-family: '8bit', monospace;
  font-weight: bold;
}

.clickable-hashtag {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  padding: 2px 6px;
  border-radius: 4px;
}

.clickable-hashtag:hover {
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.05);
}

.post-date { 
  color: var(--dim); 
  font-size: 11px; 
  font-family: '8bit', monospace;
}

.post-header-separator { 
  height: 1px; 
  background: var(--line); 
  margin: 0; 
}
.sp { flex: 1; }

.post-actions { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 12px 20px; 
}

.btn-share {
  background: var(--hi);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-weight: bold;
}

.btn-share:hover {
  background: var(--fg);
  transform: translateY(-1px);
}

/* Comments system */
.comments-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comment-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-add-comment {
  background: var(--hi);
  color: #000;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-input {
  flex: 1;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-family: '8bit', monospace;
  font-size: 12px;
  resize: none;
  min-height: 20px;
  max-height: 60px;
}

.comment-input:focus {
  outline: none;
  border-color: var(--hi);
}

.btn-submit-comment {
  background: var(--bg);
  color: var(--hi);
  border: 1px solid var(--hi);
  padding: 4px 8px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-weight: bold;
  font-size: 12px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 4px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.comment-header .retro-head {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.comment-header .username {
  font-size: 11px;
  font-weight: bold;
}

.comment-header .muted {
  font-size: 10px;
}

.comment-content {
  font-size: 12px;
  line-height: 1.3;
  margin-left: 22px;
}

/* Instagram-style comment viewer */
.comment-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hide body scroll when comment viewer is open */
body.comment-viewer-open {
  overflow: hidden;
}

/* Hide all other elements when comment viewer is open */
body.comment-viewer-open > *:not(.comment-viewer) {
  display: none !important;
}

.comment-viewer-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 375px;
  padding: 0 20px;
  z-index: 10;
}

.btn-close-comments {
  background: none;
  border: none;
  color: var(--fg);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.btn-close-comments:hover {
  background: var(--line);
}

.comment-count {
  color: var(--dim);
  font-size: 14px;
  font-family: 'Courier New', monospace;
}

.comment-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.comment-slide.active {
  opacity: 1;
}

.comment-post {
  width: 375px;
  height: 667px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.comment-post .comment-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--dim);
  flex-wrap: wrap;
  margin-left: 0;
}

.comment-post .comment-header .retro-head {
  font-size: 20px;
  width: auto;
  height: auto;
}

.comment-post .comment-header .username {
  color: var(--fg);
  font-weight: bold;
  font-size: 14px;
}

.comment-post .comment-header .you-badge {
  background: var(--hi);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.comment-post .comment-header .muted {
  color: var(--dim);
  font-size: 12px;
}

.comment-post .comment-content {
  color: var(--fg);
  font-size: 24px;
  line-height: 1.4;
  max-width: 280px;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  margin-left: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.comment-navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 375px;
  padding: 0 20px;
  z-index: 10;
}

.btn-prev-comment,
.btn-next-comment {
  background: var(--line);
  border: 1px solid var(--dim);
  color: var(--fg);
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  transition: all 0.2s ease;
}

.btn-prev-comment:hover,
.btn-next-comment:hover {
  background: var(--dim);
  border-color: var(--hi);
}

.comment-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease;
}

.dot.active {
  background: var(--hi);
}

.dot:hover {
  background: var(--dim);
}

/* BitChat-style composer container */
.composer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px auto;
  max-width: 600px;
  gap: 12px;
}

.add-post-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--hi);
  color: white;
  border: none;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-post-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Terminal-style composer */
.composer {
  background: var(--bg);
  border: none;
  padding: 8px;
  border-left: 2px solid var(--hi);
  width: 100%;
  transition: all 0.3s ease;
}

.composer.hidden {
  display: none;
}

.composer-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: '8bit', monospace;
}

.prompt {
  color: var(--hi);
  font-weight: bold;
  font-size: 14px;
}

.input-category {
  background: var(--bg);
  color: var(--fg);
  border: none;
  padding: 4px 6px;
  font-size: 12px;
  font-family: '8bit', monospace;
  border-bottom: 1px solid var(--line);
}

.input-category:focus {
  outline: none;
  border-bottom-color: var(--hi);
}

.btn-post {
  background: var(--bg);
  color: var(--hi);
  border: 1px solid var(--hi);
  padding: 4px 8px;
  font-family: '8bit', monospace;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.btn-post:disabled {
  color: var(--dim);
  border-color: var(--dim);
  cursor: not-allowed;
}

.input-content {
  flex: 1;
  background: var(--bg);
  color: var(--fg);
  border: none;
  padding: 4px 0;
  min-height: 20px;
  resize: none;
  font-family: '8bit', monospace;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

.input-content:focus {
  outline: none;
  border-bottom-color: var(--hi);
}

.composer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}


/* Auth popup */
.auth-popup, .signup-form {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.auth-popup.hidden, .signup-form.hidden {
  display: none;
}

.auth-box, .signup-box {
  background: var(--card);
  border: 2px solid var(--hi);
  padding: 24px;
  max-width: 400px;
  width: 90vw;
  text-align: center;
}

.auth-header, .signup-header {
  margin-bottom: 24px;
}

.auth-header h2, .signup-header h2 {
  color: var(--hi);
  font-family: '8bit', monospace;
  font-size: 18px;
  margin: 0;
  text-transform: lowercase;
}

.back-btn {
  position: absolute;
  left: 16px;
  top: 16px;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 20px;
  cursor: pointer;
  font-family: '8bit', monospace;
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-option {
  background: var(--bg);
  border: 2px solid var(--line);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.auth-option:hover {
  border-color: var(--hi);
  transform: translateY(-2px);
}

.auth-option.anon:hover {
  border-color: var(--hi);
  box-shadow: 0 0 20px rgba(168, 255, 96, 0.3);
}

.auth-option.signup:hover {
  border-color: var(--fg);
  box-shadow: 0 0 20px rgba(143, 212, 255, 0.3);
}

.auth-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.auth-label {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 16px;
  font-weight: bold;
}

.auth-desc {
  color: var(--dim);
  font-family: '8bit', monospace;
  font-size: 12px;
}

/* Signup form */
.signup-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup-option {
  background: var(--bg);
  border: 2px solid var(--line);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.signup-option:hover {
  border-color: var(--hi);
  transform: translateY(-2px);
}

.signup-option.google:hover {
  border-color: #4285f4;
  box-shadow: 0 0 20px rgba(66, 133, 244, 0.3);
}

.signup-icon {
  width: 24px;
  height: 24px;
  background: #4285f4;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: '8bit', monospace;
}

.signup-label {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
}

.divider {
  color: var(--dim);
  font-family: '8bit', monospace;
  font-size: 12px;
  text-align: center;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  z-index: -1;
}

.email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  position: relative;
}

.email-form input {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--line);
  padding: 12px;
  font-family: '8bit', monospace;
  font-size: 14px;
}

.email-form input:focus {
  outline: none;
  border-color: var(--hi);
}

.username-status {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-family: '8bit', monospace;
}

.username-status.available {
  color: var(--hi);
}

.username-status.taken {
  color: var(--err);
}

.username-status.checking {
  color: var(--dim);
}

.create-btn {
  background: var(--hi);
  color: #000;
  border: none;
  padding: 12px;
  font-family: '8bit', monospace;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.create-btn:disabled {
  background: var(--dim);
  cursor: not-allowed;
}

.create-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 255, 96, 0.3);
}

.drawer { 
  position: fixed; 
  top: 0; 
  right: -100%; 
  width: 360px; 
  height: 100dvh; 
  background: var(--card); 
  border-left: 1px solid var(--line); 
  display: flex; 
  flex-direction: column; 
  transition: right .2s linear, opacity .2s linear, visibility .2s linear;
  opacity: 0;
  visibility: hidden;
}
.drawer.open { 
  right: 0; 
  opacity: 1;
  visibility: visible;
}
.drawer-head { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--line); }
.tabs { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.tabs.vertical { flex-direction: column; gap: 8px; }
.tab { background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:20px 16px; cursor:pointer; transition: all 0.2s ease; font-size: 16px; font-weight: bold; text-align: center; }
.tab:hover { background: var(--line); }
.tab.active { border-color: var(--fg); background: var(--line); }
.drawer-body { flex:1; overflow:auto; padding:12px; display:grid; gap:10px; }
.panel { display:none; }
.panel.active { display:grid; gap:10px; }
.drawer-foot { padding:12px; border-top:1px solid var(--line); }
.close, .ghost, .primary { background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:6px 10px; cursor:pointer; }
.primary { border-color: var(--fg); }



/* tiny badges */
.badge { border:1px solid var(--line); padding:2px 6px; color:var(--dim); }
.count { color: var(--hi); }
.username { color: var(--hi); font-weight: bold; font-size: 12px; }
.username .you-indicator { color: var(--fg); font-weight: normal; }

.fingerprint {
  margin-right: 8px;
}

.fingerprint-img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}

.retro-head {
  width: 24px;
  height: 24px;
  background: var(--hi);
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #000;
  font-family: '8bit', monospace;
}

.panel-content {
  padding: 8px;
  line-height: 1.5;
}

.panel-content h3 {
  color: var(--hi);
  font-size: 16px;
  margin-bottom: 12px;
  font-family: '8bit', monospace;
}

.panel-content h4 {
  color: var(--fg);
  font-size: 14px;
  margin: 16px 0 8px 0;
  font-family: '8bit', monospace;
}

.panel-content p {
  margin: 8px 0;
  font-size: 12px;
}

.panel-content ul, .panel-content ol {
  margin: 8px 0;
  padding-left: 16px;
}

.panel-content li {
  margin: 4px 0;
  font-size: 12px;
}

.panel-content a {
  color: var(--hi);
  text-decoration: none;
}

.panel-content a:hover {
  text-decoration: underline;
}

/* Enhanced animations for better UX */
.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

.card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.chip {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, background-color;
}

.chip:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--line);
}

.chip.active {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-post {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

.btn-post:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.nav-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, background-color;
}

.nav-btn:hover {
  transform: scale(1.1);
  background: var(--line);
}

.nav-btn.active {
  transform: scale(1.15);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Smooth page transitions */
.screen {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.screen.hidden {
  opacity: 0;
  transform: translateY(20px);
}


/* User Display */
.user-display {
  color: var(--hi);
  font-family: '8bit', monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  margin: 0 16px;
}

/* Comment System */
.post-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.comment-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: '8bit', monospace;
}

.comment-btn:hover {
  background: var(--hi);
  color: var(--bg);
  border-color: var(--hi);
}

/* Like and Save buttons */
.like-btn, .save-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: '8bit', monospace;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}

.like-btn:hover, .save-btn:hover {
  background: var(--hi);
  color: var(--bg);
  border-color: var(--hi);
}

.like-btn.liked {
  background: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
}

.save-btn.saved {
  background: #4ecdc4;
  color: white;
  border-color: #4ecdc4;
}

.like-icon, .save-icon {
  font-size: 14px;
}

.like-count {
  font-size: 11px;
  font-weight: bold;
}

.comments-section {
  padding: 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.comments-list {
  margin-bottom: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.comment {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.comment:hover {
  border-color: var(--hi);
  transform: translateY(-1px);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  color: var(--hi);
  font-family: '8bit', monospace;
  font-size: 11px;
  font-weight: bold;
}

.comment-date {
  color: var(--muted);
  font-size: 10px;
}

.comment-content {
  color: var(--fg);
  font-size: 13px;
  line-height: 1.4;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-input {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  max-height: 120px;
}

.comment-input:focus {
  outline: none;
  border-color: var(--hi);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.comment-submit {
  background: var(--hi);
  color: var(--bg);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: '8bit', monospace;
  align-self: flex-end;
}

.comment-submit:hover {
  background: var(--fg);
  transform: translateY(-1px);
}

.comment-submit:disabled {
  background: var(--muted);
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

/* About Page Styles */
#aboutScreen {
  background: #000000;
  color: #ffffff;
  min-height: 100vh;
}

.about-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 80px; /* Account for bottom nav */
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: var(--hi);
}

.about-section h2 {
  color: var(--hi);
  font-family: '8bit', monospace;
  font-size: 18px;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.about-section p {
  color: var(--fg);
  line-height: 1.6;
  margin-bottom: 12px;
  font-size: 14px;
}

.about-section ul {
  margin: 12px 0;
  padding-left: 20px;
}

.about-section li {
  color: var(--fg);
  line-height: 1.5;
  margin-bottom: 8px;
  font-size: 14px;
}

.about-section a {
  color: var(--hi);
  text-decoration: none;
  transition: color 0.2s ease;
}

.about-section a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 15px 0;
}

.category-item {
  background: var(--bg);
  border: 1px solid var(--dim);
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 768px) {
  .about-container {
    padding: 16px;
  }
  
  .about-section {
    padding: 20px;
  }
  
  .about-section h2 {
    font-size: 16px;
  }
  
  .about-section p,
  .about-section li {
    font-size: 13px;
  }
}

/* Loading animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@media (max-width: 480px) {
  .drawer { width: 90vw; }
  .pfp { width: 30px; height: 30px; }
  
  .composer {
    margin: 6px 12px;
    padding: 6px;
  }
}

/* Cancel button for composer */
.btn-cancel {
  background: var(--err);
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: #ff5555;
}

/* Instagram-style posting modal */
.post-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 60vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Mobile keyboard handling */
@media screen and (max-height: 600px) {
  .post-modal {
    padding-top: 2vh;
    align-items: flex-start;
  }
  
  .modal-content {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Better mobile keyboard handling with viewport units */
@media screen and (max-height: 700px) {
  .post-modal {
    padding-top: 1vh;
    align-items: flex-start;
  }
  
  .modal-content {
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .post-composer textarea {
    min-height: 80px;
    max-height: 120px;
  }
}

/* Very small screens (keyboard visible) */
@media screen and (max-height: 500px) {
  .post-modal {
    padding-top: 0;
    align-items: flex-start;
  }
  
  .modal-content {
    max-height: 90vh;
    margin: 10px;
  }
  
  .post-composer textarea {
    min-height: 60px;
    max-height: 100px;
  }
}

/* Just posted badge */
.just-posted-badge {
  display: inline-block;
  background: #0080ff;
  color: #fff;
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border: 1px solid #0080ff;
  border-radius: 0;
  margin-left: 6px;
  animation: retro-blink 1.5s infinite;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 4px #0080ff;
  position: relative;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.just-posted-badge.fade-out {
  animation: retro-blink 1.5s infinite, fade-away 1s ease-out 3s forwards;
}

@keyframes fade-away {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes retro-blink {
  0% { 
    background: #0080ff;
    border-color: #0080ff;
    box-shadow: 0 0 4px #0080ff;
  }
  50% { 
    background: #000;
    border-color: #0080ff;
    box-shadow: 0 0 8px #0080ff;
  }
  100% { 
    background: #0080ff;
    border-color: #0080ff;
    box-shadow: 0 0 4px #0080ff;
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.modal-header h2 {
  margin: 0;
  color: var(--fg);
  font-size: 18px;
  font-family: '8bit', monospace;
}

.modal-close {
  background: none;
  border: none;
  color: var(--fg);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: var(--line);
}

.share-btn {
  background: var(--hi);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 14px;
  transition: all 0.2s ease;
}

.share-btn:hover:not(:disabled) {
  background: var(--dim);
}

.share-btn:disabled {
  background: var(--line);
  color: var(--dim);
  cursor: not-allowed;
}

.modal-body {
  padding: 20px;
}

.category-selector {
  margin-bottom: 20px;
}

.category-selector label {
  display: block;
  color: var(--fg);
  font-size: 14px;
  margin-bottom: 12px;
  font-family: '8bit', monospace;
}

.category-pills {
  display: flex;
  gap: 8px;
    flex-wrap: wrap;
}

.category-pill {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 12px;
  transition: all 0.2s ease;
}

.category-pill:hover {
  background: var(--line);
}

.category-pill.active {
  background: var(--hi);
  color: white;
  border-color: var(--hi);
}

.post-composer {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.post-composer textarea {
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: none;
  font-family: '8bit', monospace;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 120px;
  outline: none;
}

.post-composer textarea::placeholder {
  color: var(--dim);
}

.post-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.post-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.progress-bar {
  width: 200px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--hi);
  width: 0%;
  border-radius: 2px;
  transition: width 0.3s ease;
  animation: progressAnimation 2s ease-in-out;
}

@keyframes progressAnimation {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.progress-text {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
}

/* Success notification */
.success-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: notificationSlideIn 0.3s ease-out;
}

@keyframes notificationSlideIn {
  from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.notification-content {
  background: var(--hi);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  font-family: '8bit', monospace;
  font-size: 14px;
}

.success-icon {
  background: white;
  color: var(--hi);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

/* Error notification */
.error-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: notificationSlideIn 0.3s ease-out;
}

/* 18+ Warning Popup */
.adult-warning-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
}

.adult-warning-container {
  background: var(--card);
  border: 2px solid var(--err);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: warningSlideIn 0.3s ease-out;
}

@keyframes warningSlideIn {
  from {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.adult-warning-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.adult-warning-title {
  color: var(--err);
  font-size: 20px;
  margin-bottom: 16px;
  font-weight: bold;
}

.adult-warning-text {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.adult-warning-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.adult-warning-btn {
  padding: 12px 24px;
  border: 2px solid;
  border-radius: 6px;
  cursor: pointer;
  font-family: '8bit', 'Courier New', 'Monaco', 'Consolas', monospace;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.adult-warning-btn.accept {
  background: var(--hi);
  color: white;
  border-color: var(--hi);
}

.adult-warning-btn.accept:hover {
  background: var(--fg);
  border-color: var(--fg);
  transform: translateY(-2px);
}

.adult-warning-btn.decline {
  background: var(--bg);
  color: var(--err);
  border-color: var(--err);
}

.adult-warning-btn.decline:hover {
  background: var(--err);
  color: white;
  transform: translateY(-2px);
}

.error-notification .notification-content {
  background: var(--err);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  font-family: '8bit', monospace;
  font-size: 14px;
}

.error-icon {
  background: white;
  color: var(--err);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  }
  
  .input-content {
    min-width: 200px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Terminal boot screen */
.boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  font-family: '8bit', monospace;
}

.terminal-container {
  width: 100%;
  max-width: 720px;
  padding: 0 16px;
}

.terminal-header { display: none; }

.terminal-body {
  padding: 20px 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  min-height: 300px;
}

/* Boot progress bar - vertical like posts */
.boot-progress { 
  width: 2px; 
  height: 200px; 
  background: var(--line); 
  margin: 20px auto; 
  position: relative;
}
.boot-progress .fill { 
  width: 100%; 
  height: 0%; 
  background: var(--hi); 
  transition: height .25s ease;
  position: absolute;
  bottom: 0;
}

.boot-text {
  margin-bottom: 10px;
  white-space: pre; /* preserve spaces */
  font-family: 'Courier New', monospace; /* fixed-width for ASCII */
  font-variant-ligatures: none;
}

/* Boot checks */
.boot-check { display: flex; align-items: center; gap: 8px; white-space: pre; }
.boot-check .label { color: var(--fg); }
.boot-check .status { font-weight: bold; }
.boot-check.ok .status { color: #6ee787; }
.boot-check.fail .status { color: var(--err); }
.boot-check .dots { animation: dots 1.2s steps(3,end) infinite; color: var(--dim); }
@keyframes dots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } }

.cursor-blink {
  display: inline-block;
  animation: blink 1s infinite;
  color: var(--hi);
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Load more button */
.load-more-container {
  display: flex;
  justify-content: center;
  padding: 16px 20px;
  margin-top: 12px;
  margin-bottom: 80px; /* Account for bottom nav */
}

.load-more-btn {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--dim);
  padding: 12px 32px;
  border-radius: 8px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 14px;
  transition: all 0.2s ease;
  font-weight: normal;
}

.load-more-btn:hover {
  background: var(--line);
  border-color: var(--fg);
  color: var(--fg);
}

.load-more-btn:disabled {
  background: var(--line);
  color: var(--dim);
  cursor: not-allowed;
  border-color: var(--line);
}

.load-more-btn.loading {
  background: var(--hi);
  color: white;
  border-color: var(--hi);
  }
  
  .input-category {
    min-width: 40px;
  }
}

/* Direct Messaging System */
.messages-screen, .chat-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.messages-screen.hidden, .chat-screen.hidden {
  display: none !important;
}

.messages-screen:not(.hidden), .chat-screen:not(.hidden) {
  display: flex !important;
}

.messages-header, .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.back-btn {
  background: none;
  border: none;
  color: var(--hi);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  font-family: '8bit', monospace;
}

.messages-header h2 {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 16px;
  margin: 0;
}

.new-message-btn {
  background: var(--hi);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: '8bit', monospace;
  font-size: 14px;
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s ease;
}

.conversation-item:hover {
  background: var(--line);
}

.conversation-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hi);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 16px;
}

.conversation-info {
  flex: 1;
}

.conversation-username {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
  font-weight: bold;
}

.conversation-preview {
  color: var(--dim);
  font-size: 12px;
  margin-top: 4px;
}

.conversation-time {
  color: var(--dim);
  font-size: 11px;
  font-family: '8bit', monospace;
}

.unread-indicator {
  width: 8px;
  height: 8px;
  background: var(--hi);
  border-radius: 50%;
  margin-left: 8px;
}

/* Chat Screen */
.chat-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.chat-username {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
  font-weight: bold;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-bubble.sent {
  background: var(--hi);
  color: white;
  align-self: flex-end;
  margin-left: auto;
}

.message-bubble.received {
  background: var(--line);
  color: var(--fg);
  align-self: flex-start;
}

.message-time {
  font-size: 10px;
  color: var(--dim);
  margin-top: 4px;
  font-family: '8bit', monospace;
}

.message-input-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.message-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 12px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  max-height: 100px;
  min-height: 36px;
}

.send-message-btn {
  background: var(--hi);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* New Message Modal */
.new-message-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-search-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--fg);
  font-family: inherit;
  margin-bottom: 16px;
}

.user-search-results {
  max-height: 300px;
  overflow-y: auto;
}

.user-result-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.user-result-item:hover {
  background: var(--line);
}

.user-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hi);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 14px;
}

.user-result-username {
  color: var(--fg);
  font-family: '8bit', monospace;
  font-size: 14px;
}

.loading-conversations, .loading-messages {
  text-align: center;
  color: var(--dim);
  padding: 40px 20px;
  font-family: '8bit', monospace;
}