/* 화면 아래 연결 상태 줄 */

.status {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.chip b { color: var(--text); font-weight: 600; }

/* 연결 상태 점: 초록=연결됨, 노랑=연결 중, 회색=로그아웃 */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.dot.ready { background: var(--ok); box-shadow: 0 0 0 3px rgb(48 164 108 / 0.2); }
.dot.connecting { background: var(--warn); animation: blink 1s infinite; }

@keyframes blink {
  50% { opacity: 0.3; }
}

/* 설명 페이지 링크 칩 */
.chip.link { text-decoration: none; color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.chip.link:hover { background: var(--primary); color: #fff; }
button.chip { font: inherit; cursor: pointer; }