@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: #06070A;
    background-image: radial-gradient(ellipse at 25% 0%, rgba(12, 22, 42, 0.7) 0%, transparent 55%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #28303F; border-radius: 2px; }
  ::-webkit-scrollbar-thumb:hover { background: #C5FF00; }

  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    @apply bg-ink-900 border border-ink-700 rounded text-ink-100 font-mono text-sm transition-colors outline-none w-full;
    padding: 0.5rem 0.75rem;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: #C5FF00;
    box-shadow: 0 0 0 1px rgba(197, 255, 0, 0.15);
  }

  input[type="number"] { -moz-appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

  input[type="checkbox"] {
    @apply rounded border-ink-600 bg-ink-800 text-acid cursor-pointer;
    accent-color: #C5FF00;
    width: 1rem;
    height: 1rem;
  }

  input[type="radio"] {
    accent-color: #C5FF00;
  }
}

@layer components {
  .nav-item {
    @apply font-condensed font-medium text-ink-300 transition-colors flex items-center;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0 0.875rem;
    border-bottom: 2px solid transparent;
    height: 100%;
  }
  .nav-item:hover { @apply text-ink-100; }
  .nav-item-cta {
    @apply font-condensed font-semibold flex items-center transition-opacity;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #C5FF00;
    padding: 0 0.875rem;
    border-bottom: 2px solid #C5FF00;
    height: 100%;
  }
  .nav-item-cta:hover { opacity: 0.75; }

  .card {
    @apply bg-ink-900 border border-ink-600 rounded-md;
    padding: 1.25rem 1.5rem;
  }

  .card-label {
    @apply font-condensed font-semibold text-ink-300 uppercase;
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
    display: block;
  }

  .section-heading {
    @apply font-condensed font-semibold text-ink-200 uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .metric-num {
    @apply font-display leading-none;
  }

  .btn-acid {
    @apply bg-acid font-condensed font-bold uppercase cursor-pointer rounded transition-all inline-block text-center;
    color: #06070A;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    padding: 0.65rem 1.75rem;
    border: none;
  }
  .btn-acid:hover { opacity: 0.85; transform: translateY(-1px); }
  .btn-acid:active { transform: translateY(0); opacity: 1; }
  .btn-acid:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

  .btn-ghost {
    @apply font-condensed text-ink-300 uppercase cursor-pointer transition-colors bg-transparent border-0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  .btn-ghost:hover { @apply text-ink-100; }

  .form-label {
    @apply font-condensed font-medium text-ink-300 uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.35rem;
  }

  .activity-row {
    @apply border-b border-ink-600 last:border-0 transition-colors;
  }
  .activity-row:hover { background: rgba(28, 34, 48, 0.4); }

  .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Info tooltip badge */
.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #8A95A3;
  color: #8A95A3;
  font-size: 0.6rem;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: help;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
}
.info-group:hover .info-badge,
.info-badge:hover { border-color: #C5FF00; color: #C5FF00; }

.info-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 7px);
  width: 230px;
  background: #141920;
  border: 1px solid #28303F;
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #AEBAC8;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  font-family: 'Barlow', sans-serif;
  font-style: normal;
  font-weight: 400;
  white-space: normal;
}
.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #28303F;
}
.info-group:hover .info-tooltip { opacity: 1; }

/* Morning brief markdown */
.brief-content { color: #D4DCE8; font-size: 0.875rem; line-height: 1.7; }
.brief-content h1, .brief-content h2, .brief-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.brief-content h1 { font-size: 1rem; }
.brief-content h2 { font-size: 0.9rem; }
.brief-content h3 { font-size: 0.8rem; color: #AEBAC8; }
.brief-content strong { color: #FFFFFF; font-weight: 600; }
.brief-content em { color: #AEBAC8; font-style: italic; }
.brief-content ul, .brief-content ol { padding-left: 1.25rem; margin: 0.5rem 0; }
.brief-content li { margin-bottom: 0.2rem; }
.brief-content ul li { list-style-type: disc; }
.brief-content ol li { list-style-type: decimal; }
.brief-content p { margin-bottom: 0.5rem; }
.brief-content p:last-child { margin-bottom: 0; }
.brief-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8em;
  background: #141920;
  border: 1px solid #28303F;
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: #C5FF00;
}
.brief-content hr { border: none; border-top: 1px solid #1C2230; margin: 0.75rem 0; }

/* Noise grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
}

/* Page entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp 0.35s ease both; }
.fade-up-1 { animation-delay: 0.04s; }
.fade-up-2 { animation-delay: 0.09s; }
.fade-up-3 { animation-delay: 0.14s; }
.fade-up-4 { animation-delay: 0.20s; }
.fade-up-5 { animation-delay: 0.27s; }
.fade-up-6 { animation-delay: 0.34s; }

/* Chat message fade in */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-in { animation: msgIn 0.2s ease both; }

/* Tension button ring glow on select */
.tension-btn-selected-1 { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4); }
.tension-btn-selected-5 { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4); }