/* ==========================================================================
   app/api-status.css —— 后端状态提示条样式
   --------------------------------------------------------------------------
   用项目已有 token，日夜两套主题自动跟随。

   位置：固定在顶部，避开首屏加载层与顶栏。
   配色：离线态用警示色，在线态用品牌色 —— 一眼能看出"这是演示还是真数据"。
   ========================================================================== */

.api-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: var(--fs-xs, 12px);
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

/* 离线：演示数据 —— 用警示色，让人一眼知道不是真数据 */
.api-status.is-offline {
  color: var(--warn-ink, #8A5A00);
  background: var(--warn-bg, #FFF6E0);
  /* 静态兜底在前、color-mix 在后：支持 color-mix 的浏览器用后者，
     不支持的（Chrome <111 / Safari <16.2 / Firefox <113）用前者，视觉几乎一致 */
  border-bottom-color: rgba(184, 134, 11, .3);
  border-bottom-color: color-mix(in srgb, #B8860B 30%, transparent);
}

/* 在线：已接后端 */
.api-status.is-online {
  color: var(--brand-on, #fff);
  background: var(--brand-500, #CB3A4D);
  border-bottom-color: transparent;
}

.api-status__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.api-status__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.api-status__actions {
  flex: none;
  display: flex;
  gap: 6px;
}

.api-status__btn {
  padding: 2px 10px;
  font-size: var(--fs-xs, 12px);
  font-family: inherit;
  line-height: 1.6;
  cursor: pointer;
  border-radius: 6px;
  color: inherit;
  background: rgba(138, 90, 0, .1);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid rgba(138, 90, 0, .32);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  transition: background 0.15s ease;
}

.api-status__btn:hover {
  background: rgba(138, 90, 0, .18);
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.api-status__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* 夜间模式下警示色要压暗一点，否则在深底上刺眼。
   选择器跟项目其他地方一致 —— 深色 token 只有 :root[data-theme="dark"] 一个真源，
   不要自己另起一套 .night 之类，那类选择器在本项目里根本不生效（踩过一次：
   条子写成了 .night，页面切夜间后它还是日间的亮黄，刺眼）。 */
:root[data-theme="dark"] .api-status.is-offline {
  color: #E8B563;
  background: #2A2113;
  border-bottom-color: rgba(232, 181, 99, 0.28);
}

:root[data-theme="dark"] .api-status.is-online {
  color: #FFFFFF;
  background: #7A2A38;
}

@media (max-width: 560px) {
  .api-status { flex-wrap: wrap; }
  .api-status__text { flex-basis: 100%; order: 2; }
}