/* ============================================================
   TWNN LOG STATUS
   Compact status indicator (system and per app). The dot and the
   border follow data-status: busy, ok, warn, error.
============================================================ */

.twnnStatus {
  --twnn-status-color: #adb5bd;

  display: flex;
  align-items: center;
  gap: .25rem;
  width: 100%;
  justify-content: center;
  min-height: 1.5rem;
  padding: .1rem .35rem;
  box-sizing: border-box;
  border: 1px solid var(--twnn-status-color);
  border-radius: .35rem;
  color: #adb5bd;
  font-family: "Segoe UI", sans-serif;
  font-size: .8rem;
}

.twnnStatus[data-status="busy"]  { --twnn-status-color: #74c0fc; }
.twnnStatus[data-status="ok"]    { --twnn-status-color: #51cf66; }
.twnnStatus[data-status="warn"]  { --twnn-status-color: #fcc419; }
.twnnStatus[data-status="error"] { --twnn-status-color: #ff6b6b; }

.twnnStatus[hidden],
.twnnStatus [hidden] {
  display: none !important;
}

.twnnStatusMain,
.twnnStatusClose {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 .1rem;
}

.twnnStatusMain {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}

.twnnStatus .twnnStatusDot {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--twnn-status-color);
}

.twnnStatus[data-status="busy"] .twnnStatusDot {
  animation: twnnStatusThrob 1s ease-in-out infinite;
}

.twnnStatusText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twnnStatusCount {
  flex: 0 0 auto;
  opacity: .7;
}

.twnnStatusClose {
  opacity: .7;
  line-height: 1;
}

.twnnStatusClose:hover {
  opacity: 1;
}

@keyframes twnnStatusThrob {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.twnnStatus[data-status="busy"]  { --twnn-status-color: #3b82f6; }
.twnnStatus[data-status="ok"]    { --twnn-status-color: #10b981; }
.twnnStatus[data-status="warn"]  { --twnn-status-color: #f59e0b; }
.twnnStatus[data-status="error"] { --twnn-status-color: #ef4444; }