/* =========================================================
   TWNN Nav
   Shared nav styling + responsive view switching
   ========================================================= */


/* ---------------------------------------------------------
   Root
   --------------------------------------------------------- */

.twnnNav {
  background-color: #2b3035;
  color: #adb5bd;
}


/* ---------------------------------------------------------
   Shared nav text
   --------------------------------------------------------- */

.twnn-nav-entry span {
  color: #adb5bd;
}


/* ---------------------------------------------------------
   Shared icon sizing
   --------------------------------------------------------- */

.twnnMenuItemIcon {
  display: inline-block;

  width: 12px;
  height: 12px;

  margin-right: 0.35rem;

  vertical-align: middle;
}


/* ---------------------------------------------------------
   Shared eye / image helpers
   --------------------------------------------------------- */

.wolf-container {
  position: relative;

  z-index: 1;
}


.eye-background {
  position: absolute;

  top: 40%;
  left: 25%;

  width: 35px;
  height: 10px;

  border-radius: 5px;

  background-color: blue;

  z-index: -1;
}


/* ---------------------------------------------------------
   Log status dot (beside the version name)
   data-status comes from twnnLog.status(): ok | busy | warn | error
   --------------------------------------------------------- */

.versionContainer {
  align-items: center;
  gap: 6px;
}

.twnnStatusDot {
  display: inline-block;
  flex-shrink: 0;

  width: 9px;
  height: 9px;
margin-left: 6px;
  border-radius: 50%;

  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);

  cursor: pointer;
}

.twnnStatusDot[data-status="busy"] {
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  animation: twnnStatusPulse 1s ease-in-out infinite;
}

.twnnStatusDot[data-status="warn"] {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.twnnStatusDot[data-status="error"] {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

@keyframes twnnStatusPulse {
  50% {
    opacity: 0.4;
  }
}


/* =========================================================
   Responsive Nav Views
   This file is the ONLY place that decides which view shows.
   ========================================================= */


/* Large view by default */

.twnnNav > .twnnLargeNavView {
  display: flex;
}

.twnnNav > .twnnSmallNavView {
  display: none;
}


/* Small viewport */

@media (max-width: 768px) {
  .twnnNav > .twnnLargeNavView {
    display: none;
  }

  .twnnNav > .twnnSmallNavView {
    display: flex;
  }
}