/* ═══════════════════════════════════════════════════════════
   Cymela — Component Library
   Reusable UI components: nav, buttons, cards, modals, etc.
   ═══════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════╗
   ║  NAVIGATION                          ║
   ╚═══════════════════════════════════════╝ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
  padding-inline: var(--page-inset);
  background: transparent;
  transition: background var(--transition-base),
              border-color var(--transition-base);
  border-bottom: 1px solid transparent;
}

.nav--scrolled {
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom-color: var(--border);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--text-100);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.nav__logo-mark {
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.nav__logo-img {
  height: 30px;
  width: auto;
  display: block;
  /* the same bloom the hero mark carries, scaled down to this size */
  filter: drop-shadow(0 0 9px rgba(124, 92, 240, 0.55));
}

/* The card's lockup, brought onto the page. Inter rather than the mono the
   rest of .nav__logo sets, because that is what the card draws it in. */
.nav__logo-word {
  font-family: 'Syncopate', var(--font-sans);
  /* The card sets the wordmark at about 0.6x the mark's height; at 13px
     against a 30px butterfly this was sitting nearer 0.43 and reading small. */
  font-size: 1.125rem;
  font-weight: 700;
  /* Syncopate is drawn wide to begin with — it already carries most of the
     spacing the Inter version needed, so the tracking comes down or the
     wordmark runs into the nav links. */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-100);
}

@media (max-width: 480px) {
  .nav__logo-word {
    display: none;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  min-width: 140px;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-70);
  background: rgba(255, 255, 255, 0.04);
  border: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.nav__pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-100);
}

.nav__pill.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-100);
}

.nav__pill-num {
  color: var(--text-25);
  font-size: var(--text-2xs);
  transition: color var(--transition-fast);
}

.nav__pill:hover .nav__pill-num {
  color: var(--text-50);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text-100);
  background: var(--surface-300);
  cursor: pointer;
}

.nav__hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: all var(--transition-base);
  position: relative;
}

.nav__hamburger-line::before,
.nav__hamburger-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: all var(--transition-base);
}

.nav__hamburger-line::before { top: -6px; }
.nav__hamburger-line::after  { bottom: -6px; }

/* Hamburger active state */
.nav__hamburger.is-active .nav__hamburger-line {
  background: transparent;
}
.nav__hamburger.is-active .nav__hamburger-line::before {
  top: 0;
  transform: rotate(45deg);
}
.nav__hamburger.is-active .nav__hamburger-line::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* Mobile nav overlay */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
  background: rgba(5, 5, 5, 0.97);
  backdrop-filter: blur(var(--blur-lg));
  padding: var(--space-8) var(--space-5);
  flex-direction: column;
  gap: var(--space-2);
}

.nav__mobile.is-open {
  display: flex;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-70);
  border-bottom: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.nav__mobile-link:hover {
  color: var(--text-100);
  padding-left: var(--space-5);
}

.nav__mobile-num {
  font-size: var(--text-sm);
  color: var(--text-25);
}

/* 1180, not 1024. The bar needs about 1040px for the lockup, the five pills
   and Enter Lab before any gap between them — more on the home page, whose
   nav carries the hero's wider inset. Below that the row kept laying out
   anyway and pushed Enter Lab past the right edge, where body's
   overflow-x:hidden swallowed it: the button was simply missing between
   1025 and 1180, with nothing on screen to say so. The hamburger now takes
   over while everything still fits. */
@media (max-width: 1180px) {
  .nav__links,
  .nav__actions {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }
}


/* ╔═══════════════════════════════════════╗
   ║  BUTTONS                             ║
   ╚═══════════════════════════════════════╝ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  line-height: 1;
  min-height: 36px;
  position: relative;
  overflow: hidden;
}

.btn--solid {
  background: var(--text-100);
  color: var(--surface-100);
}

.btn--solid:hover {
  background: var(--accent);
  color: var(--surface-000);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--border-active);
  color: var(--text-70);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--text-50);
  color: var(--text-100);
}

.btn--ghost {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-70);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-100);
}

.btn--accent {
  background: var(--accent);
  color: var(--surface-000);
}

.btn--accent:hover {
  background: var(--accent-muted);
}

/* Button arrow animation */
.btn__arrow {
  display: inline-flex;
  width: 12px;
  height: 12px;
  overflow: hidden;
  position: relative;
}

.btn__arrow-inner {
  display: flex;
  transition: transform 0.3s var(--ease-out-expo);
  transform: translateX(-100%);
}

.btn:hover .btn__arrow-inner {
  transform: translateX(0);
}

.btn__arrow svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}


/* ╔═══════════════════════════════════════╗
   ║  CARDS                               ║
   ╚═══════════════════════════════════════╝ */

.card {
  position: relative;
  background: var(--surface-200);
  border: 1px solid var(--border);
  transition: all var(--transition-slow);
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-hover);
}

.card__image {
  position: relative;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

.card__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
  padding: var(--space-3) var(--space-4);
}

.card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.card__title {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-100);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--text-50);
  line-height: var(--leading-relaxed);
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
}

/* Card variant: featured */
.card--featured {
  grid-column: span 2;
}

.card--featured .card__image {
  height: 320px;
}

/* Card variant: data sheet */
.card--data {
  font-family: var(--font-mono);
}

.card--data .card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
}

.card--data .card__row:last-child {
  border-bottom: none;
}

.card--data .card__row-label {
  color: var(--text-25);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.card--data .card__row-value {
  color: var(--text-70);
}


/* ╔═══════════════════════════════════════╗
   ║  SECTION HEADERS                     ║
   ╚═══════════════════════════════════════╝ */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-100);
  margin-bottom: var(--space-4);
}

.section-header__title span {
  color: var(--text-50);
}

.section-header__desc {
  font-size: var(--text-base);
  color: var(--text-50);
  max-width: 55ch;
  line-height: var(--leading-relaxed);
}


/* ╔═══════════════════════════════════════╗
   ║  METRICS BAR                         ║
   ╚═══════════════════════════════════════╝ */

.metrics {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface-200);
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border-right: 1px solid var(--border);
}

.metric:last-child {
  border-right: none;
}

.metric__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-100);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.metric__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
}

@media (max-width: 768px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric {
    border-bottom: 1px solid var(--border);
  }

  .metric:nth-child(2n) {
    border-right: none;
  }

  .metric:nth-last-child(-n+2) {
    border-bottom: none;
  }
}


/* ╔═══════════════════════════════════════╗
   ║  BADGES                              ║
   ╚═══════════════════════════════════════╝ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: 1;
  border: 1px solid var(--border);
  color: var(--text-50);
  background: var(--surface-300);
}

.badge--critical {
  color: var(--status-critical);
  border-color: rgba(232, 69, 69, 0.25);
  background: rgba(232, 69, 69, 0.08);
}

.badge--warning {
  color: var(--status-warning);
  border-color: rgba(232, 164, 69, 0.25);
  background: rgba(232, 164, 69, 0.08);
}

.badge--contained {
  color: var(--status-contained);
  border-color: rgba(69, 232, 155, 0.25);
  background: rgba(69, 232, 155, 0.08);
}

.badge--dormant {
  color: var(--status-dormant);
  border-color: rgba(69, 150, 232, 0.25);
  background: rgba(69, 150, 232, 0.08);
}

.badge--accent {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(200, 216, 76, 0.06);
}

.badge--research-preview {
  color: var(--status-contained);
  border-color: rgba(69, 232, 155, 0.25);
  background: rgba(69, 232, 155, 0.08);
}

.badge--in-training {
  color: var(--text-100);
  border-color: rgba(30, 82, 158, 0.65);
  background: rgba(94, 168, 240, 0.20);
}

.badge--experimental {
  color: var(--status-critical);
  border-color: rgba(232, 69, 69, 0.25);
  background: rgba(232, 69, 69, 0.08);
}


/* ╔═══════════════════════════════════════╗
   ║  MODAL                               ║
   ╚═══════════════════════════════════════╝ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal.is-open {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(var(--blur-sm));
  cursor: pointer;
}

.modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--surface-200);
  border: 1px solid var(--border);
  animation: scaleIn 0.3s var(--ease-out-expo);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-100);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-50);
  background: var(--surface-400);
  transition: all var(--transition-fast);
  cursor: pointer;
  font-size: var(--text-lg);
}

.modal__close:hover {
  color: var(--text-100);
  background: var(--surface-500);
}

.modal__body {
  padding: var(--space-5);
}


/* ╔═══════════════════════════════════════╗
   ║  DATA TABLE                          ║
   ╚═══════════════════════════════════════╝ */

.data-table {
  width: 100%;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
  background: var(--surface-300);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-70);
}

.data-table tr:hover td {
  background: var(--surface-300);
}

.data-table tr:last-child td {
  border-bottom: none;
}


/* ╔═══════════════════════════════════════╗
   ║  FOOTER                              ║
   ╚═══════════════════════════════════════╝ */

.footer {
  border-top: none;
  padding: var(--space-12) 0 var(--space-8);
  /* translucent so the aura carries through, still adds depth at the base */
  background: linear-gradient(to bottom, transparent, rgba(3, 3, 3, 0.55) 160px);
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.footer__brand {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--text-25);
  margin-top: var(--space-2);
  max-width: 30ch;
}

.footer__socials {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.footer__socials a {
  color: var(--text-50);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
}

.footer__socials a:hover {
  color: var(--text-100);
}

.footer__nav {
  display: flex;
  gap: var(--space-12);
}

.footer__nav-group h5 {
  margin-bottom: var(--space-4);
}

.footer__nav-group a {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--text-50);
  transition: color var(--transition-fast);
}

.footer__nav-group a:hover {
  color: var(--text-100);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-25);
}

@media (max-width: 768px) {
  .footer__top {
    flex-direction: column;
  }

  .footer__nav {
    gap: var(--space-8);
    flex-wrap: wrap;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}


/* ╔═══════════════════════════════════════╗
   ║  PAGE HEADER (interior pages)        ║
   ╚═══════════════════════════════════════╝ */

.page-header {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  padding: var(--space-20) 0 var(--space-12);
  overflow: hidden;
  /* transparent so the site-wide aura reads through */
}

.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.35;
}

.page-header__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.page-header__breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
  margin-bottom: var(--space-4);
}

.page-header__breadcrumb span {
  color: var(--text-50);
}

.page-header__title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: 500;
}

.page-header__subtitle {
  font-size: var(--text-lg);
  color: var(--text-50);
  max-width: 50ch;
  margin-top: var(--space-4);
}

/* ─── Site-wide Ambient Aura ───────────────────────────────
   A single fixed layer behind the ENTIRE site, not scoped to
   any section. z-index:-1 keeps it above the page background
   but under all content, so no content stacking changes are
   needed. Because it is fixed to the viewport it can never be
   clipped by a section boundary — there is no edge to cut.
   Section-level backgrounds are transparent so this reads
   through; cards keep their own surfaces and sit on top of it. */
.site-aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.site-aura__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Brightest pool — upper right */
.site-aura__blob--a {
  width: 70vw;
  height: 70vw;
  right: -14vw;
  top: -24vw;
  background: radial-gradient(circle, rgba(124, 92, 240, 0.30), transparent 62%);
  filter: blur(130px);
  animation: auraDriftA 28s ease-in-out infinite alternate;
}

/* Faint counter-light — mid left */
.site-aura__blob--b {
  width: 60vw;
  height: 60vw;
  left: -18vw;
  top: 22vh;
  background: radial-gradient(circle, rgba(157, 124, 240, 0.14), transparent 64%);
  filter: blur(140px);
  animation: auraDriftB 34s ease-in-out infinite alternate;
}

/* Deep indigo weight — lower right */
.site-aura__blob--c {
  width: 62vw;
  height: 62vw;
  right: -8vw;
  bottom: -26vw;
  background: radial-gradient(circle, rgba(76, 58, 158, 0.26), transparent 64%);
  filter: blur(130px);
  animation: auraDriftC 24s ease-in-out infinite alternate;
}

/* Barely-there centre lift, keeps the middle from going flat */
.site-aura__blob--d {
  width: 50vw;
  height: 50vw;
  left: 28vw;
  bottom: -18vw;
  background: radial-gradient(circle, rgba(124, 92, 240, 0.11), transparent 66%);
  filter: blur(150px);
  animation: auraDriftD 30s ease-in-out infinite alternate;
}

@keyframes auraDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate3d(-5vw, 4vw, 0) scale(1.12); opacity: 1; }
}

@keyframes auraDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); opacity: 0.65; }
  100% { transform: translate3d(5vw, -4vw, 0) scale(0.94); opacity: 1; }
}

@keyframes auraDriftC {
  0%   { transform: translate3d(0, 0, 0) scale(0.94); opacity: 0.6; }
  100% { transform: translate3d(-4vw, -5vw, 0) scale(1.12); opacity: 0.95; }
}

@keyframes auraDriftD {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate3d(6vw, -3vw, 0) scale(1.14); opacity: 0.9; }
}

/* Technical grid across the whole viewport, vignetted so it never
   presents a straight edge anywhere. */
.site-aura__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 62% 34%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 62% 34%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-aura__blob {
    animation: none;
  }
}

/* ╔═══════════════════════════════════════╗
   ║  MULTITHINK TERMINAL SIMULATION      ║
   ╚═══════════════════════════════════════╝ */

.multithink-wrapper {
  position: relative;
  width: 100%;
  height: 550px;
  background: #000;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.multithink-terminal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Critical for scrollable children */
  width: 100%;
}

.multithink-panes {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0; /* Critical for scrollable children */
}

.terminal-pane {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0; /* Prevents stretching */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: #0d0d0f;
}
.terminal-pane.right {
  border-right: none;
  background: #121214;
}

.terminal-header {
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #3b82f6; 
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: center;
  letter-spacing: 1px;
}
.terminal-pane.right .terminal-header {
  color: #d1d5db;
}

.terminal-content {
  flex: 1;
  padding: 20px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: #d1d5db;
  overflow-y: auto;
  line-height: 1.5;
}

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

/* Chat Message Styles */
.msg-block {
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeInTerminal 0.2s forwards;
}
.msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.msg-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-x1 { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.avatar-x2 { background: #ec4899; box-shadow: 0 0 8px #ec4899; }
.avatar-agent { background: #3b82f6; }
.avatar-check { background: #22c55e; }
.avatar-user { background: #6b7280; box-shadow: 0 0 8px #6b7280; }

.msg-body {
  padding-left: 22px;
}

.msg-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: #d4d4d8;
  background: #050505;
  border: 1px solid #27272a;
  border-radius: 3px;
  padding: 0 4px;
}

/* Code block */
.code-block {
  background: #050505;
  border: 1px solid #27272a;
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.code-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  background: #18181b;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #71717a;
  border-bottom: 1px solid #27272a;
}
.code-content {
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre;
  overflow-x: auto;
}

.c-kw { color: #c678dd; } 
.c-func { color: #61afef; } 
.c-str { color: #98c379; } 
.c-comment { color: #5c6370; } 
.c-var { color: #e06c75; }

/* Dispatch Block */
.dispatch-block {
  border: 1px solid #27272a;
  border-radius: 6px;
  padding: 12px;
  background: #121214;
  margin-top: 12px;
}
.dispatch-title {
  color: #a1a1aa;
  margin-bottom: 8px;
}
.dispatch-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.dispatch-item:last-child {
  margin-bottom: 0;
}

/* Status dots */
.status-live {
  font-size: 11px;
  color: #22c55e;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-live::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}
.status-time {
  font-size: 11px;
  color: #71717a;
  margin-left: auto;
}

/* Files row */
.files-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.file-pill {
  padding: 6px 10px;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

/* Input Bar */
.multithink-input {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #09090b;
  border-top: 1px solid var(--border);
}
.chatbar-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 24px;
  padding: 8px 16px;
  width: 100%;
}

.chatbar-pill .left-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.chatbar-pill .right-section {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #d1d5db;
}

/* Scramble overlay inside panes */
.scramble-overlay {
  position: absolute;
  top: 44px; /* below header */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: transparent;
}
#scramble-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.typographic-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
  font-size: 2rem;
  letter-spacing: 0.15em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  transition: opacity 1s ease;
}

@media (min-width: 768px) {
  .typographic-reveal {
    font-size: 3rem;
  }
}