body {
  font-family: Inter, sans-serif;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.text {
  color: #4b5563;
}

.tab {
  font-size: 0.875rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: white;
}

.pill {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  background: #f3f4f6;
  border-radius: 0.5rem;
}

/* Favorite Links hover lift */
#linksList a {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#linksList a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.dark #linksList a:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* -------------------------------
   STICKY BOTTOM NAV
-------------------------------- */

#stickyNavWrapper {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}

#stickyNavWrapper nav {
  pointer-events: auto;
}

/* Safe space so content never overlaps */
body {
  padding-bottom: 6rem;
}

/* Match card + nav style */
#stickyNavWrapper .tab {
  background: transparent;
  border: 0;
}

#stickyNavWrapper .tab:hover {
  background: rgba(99, 102, 241, 0.1);
}

/* Dark mode */
.dark #stickyNavWrapper {
  color: #e6edf3;
}

.sticky-nav-inner {
  transition:
    background 0.2s ease,
    backdrop-filter 0.2s ease;
}

/* -------------------------------
   STICKY NAV BACKDROP BLUR
-------------------------------- */

.sticky-nav-inner {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(229, 231, 235, 0.6);
}

/* Dark mode */
.dark .sticky-nav-inner {
  background: rgba(17, 22, 29, 0.75);
  border-color: rgba(34, 41, 56, 0.6);
}

/* Slight elevation polish */
.sticky-nav-inner {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.dark .sticky-nav-inner {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
  .sticky-nav-inner {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ================================
   DARK MODE CONTRAST FIX
   ================================ */

/* Page background */
.dark body {
  background-color: #0b0f14;
  /* near-black, not gray */
}

/* Cards */
.dark .card {
  background-color: #11161d;
  /* lifted from bg */
  border-color: #222938;
  /* visible separation */
}

/* Sections text */
.dark .text {
  color: #c9d1d9;
  /* brighter body text */
}

/* Headings */
.dark .title,
.dark h1,
.dark h2,
.dark h3 {
  color: #f0f6fc;
  /* strong contrast */
}

/* Borders (general) */
.dark .border {
  border-color: #222938 !important;
}

/* Tabs */
.dark .tab {
  background-color: #11161d;
  border-color: #222938;
  color: #c9d1d9;
}

.dark .tab:hover {
  background-color: #161b22;
}

/* Pills (skills) */
.dark .pill {
  background-color: #161b22;
  color: #e6edf3;
}

/* Chat bubbles */
.dark #chatBox > div > div {
  background-color: #11161d;
  border-color: #222938;
  color: #e6edf3;
}

/* Chat user bubble */
.dark .bg-indigo-600 {
  background-color: #6366f1;
  /* keep accent vivid */
}

/* Inputs */
.dark input {
  color: #e6edf3;
}

.dark input::placeholder {
  color: #8b949e;
}

/* Blog items hover */
.dark a:hover {
  background-color: #161b22;
}

/* Pinned Notes Hover */
.dark .pinned-note:hover,
.pinned-note:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

/* Social Icons */
.social-icon {
  width: 18px;
  height: 18px;
  color: #6b7280;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.social-icon:hover {
  color: #4f46e5;
  transform: translateY(-1px);
}

.dark .social-icon {
  color: #9ca3af;
}

.dark .social-icon:hover {
  color: #818cf8;
}

/* Tooltip */
.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.has-tooltip:hover::after {
  opacity: 1;
}

.dark .has-tooltip::after {
  background: #f9fafb;
  color: #111827;
}

/* Blinking animation for Dates Seconds */
.blink {
  animation: blink 1s steps(1, start) infinite;
}

/* Impossible Lists */
.category-title {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 16px;
  border-bottom: 1px dotted #e5e7eb;
  padding-bottom: 8px;
}

.goal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.goal-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.goal-item.completed .goal-check {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

.goal-text {
  border-bottom: 1px dotted #d1d5db;
  padding-bottom: 2px;
}

.goal-date {
  margin-left: auto;
  font-size: 11px;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 6px;
  color: #6b7280;
}

/* Failure Lists Style */
/* Failure Category */
.failure-category {
  margin-top: 2rem;
}

/* Failure Row */
.failure-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

/* Small red dot */
.failure-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

/* Failure text */
.failure-text {
  border-bottom: 1px dotted #d1d5db;
  padding-bottom: 2px;
}

/* Lesson text */
.failure-lesson {
  margin-left: 22px;
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}
/* Animated horizontal line */
.footer-line {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  animation: moveLine 6s linear infinite;
  opacity: 0.4;
}

.dark .footer-line {
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
}

@keyframes moveLine {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* Footer Social Icons */
.footer-socials {
  opacity: 0.85;
}

/* Footer Social Icons – FIXED SIZE */
.footer-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.footer-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.footer-icon:hover {
  color: #6366f1;
  transform: translateY(-2px);
}

.dark .footer-icon:hover {
  color: #818cf8;
}
.footer-icon::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.footer-icon:hover::after {
  opacity: 1;
}
/* LinkedIn Preview Card */
.linkedin-preview {
  width: 280px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  z-index: 50;
}
.footer-icon:hover {
  transform: translateY(-1px);
  color: #6366f1;
}

.dark .footer-icon:hover {
  color: #818cf8;
}

.dark .linkedin-preview {
  background: #0f141b;
  border-color: #1f2937;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.group:hover .linkedin-preview {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -4px);
}

@media print {
  /* Base print colors */
  body {
    background: white !important;
    color: black !important;
  }

  /* Hide interactive-only UI */
  nav,
  #chatBox,
  #clearChatBtn,
  #commandPalette,
  #stickyNavWrapper,
  button:not([data-print]),
  input {
    display: none !important;
  }

  /* IMPORTANT: show content sections */
  .section {
    display: block !important;
  }

  /* Reveal should NOT hide content in print */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Cards become flat (resume style) */
  .card {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Typography */
  h1,
  h2,
  h3 {
    color: black !important;
    page-break-after: avoid;
  }

  p {
    color: #000 !important;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
    margin-bottom: 1.2rem;
  }
}

/* Pinned Notes */
.pinned-note {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pinned-note:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .pinned-note:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Fixed UI should ALWAYS stay on top */
.fixed-ui {
  position: fixed;
  z-index: 9999 !important;
  transform: none !important;
}

@supports (-webkit-touch-callout: none) {
  .fixed-ui {
    transform: translateZ(0);
  }
}

/* Prevent sections from creating higher stacking contexts */
.section,
.card,
.reveal {
  position: relative;
  z-index: 1;
}

.cmd-item {
  padding: 10px 16px;
  cursor: pointer;
}

.cmd-item:hover {
  background: #f3f4f6;
}

.dark .cmd-item:hover {
  background: #1f2937;
}