/* ==========================================================================
   首页访客 IP 提示条（配合 source/js/ip-greeting.js）
   配色全部取自 Fluid 主题的 CSS 变量，暗色模式自动跟随，不需要另写一套。
   ========================================================================== */

.ipg-bar {
  /* ---------- 主题变量派生 ---------- */
  --ipg-bg: var(--board-bg-color);
  --ipg-bg-mix: color-mix(in srgb, var(--board-bg-color) 87%, #667eea 13%);
  --ipg-border: color-mix(in srgb, var(--line-color) 62%, #667eea 38%);
  --ipg-text: var(--text-color);
  --ipg-muted: var(--sec-text-color);
  --ipg-accent: #4a6fd0;
  --ipg-accent-soft: rgba(102, 126, 234, 0.13);

  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 1040; /* 高于 Fluid header 的 1029 */

  display: flex;
  align-items: center;
  gap: 9px;
  /* width:max-content 让容器按内容撑开；max-width 防止长地名撑出屏幕 */
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 7px 7px 7px 13px;

  border: 1px solid var(--ipg-border);
  border-radius: 999px;
  background: var(--ipg-bg);
  background: var(--ipg-bg-mix);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(40, 60, 110, 0.10);

  color: var(--ipg-text);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;

  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ipg-bar.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ipg-bar.is-out {
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
}

/* ---------- 定位图标 ---------- */
.ipg-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ipg-accent-soft);
  color: var(--ipg-accent);
}

/* ---------- 文案 ---------- */
.ipg-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipg-text b {
  color: var(--ipg-accent);
  font-weight: 600;
}

/* ---------- IP ---------- */
.ipg-ip {
  flex: none;
  padding-left: 9px;
  border-left: 1px solid var(--ipg-border);
  color: var(--ipg-muted);
  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* IP 还没查到时不要留空位和分隔线 */
.ipg-ip:empty {
  display: none;
}

/* ---------- 关闭按钮 ---------- */
.ipg-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ipg-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ipg-close:hover {
  background: var(--ipg-accent-soft);
  color: var(--ipg-accent);
}

/* ---------- 暗色：跟着主题走 ---------- */
[data-user-color-scheme='dark'] .ipg-bar {
  --ipg-bg-mix: color-mix(in srgb, var(--board-bg-color) 88%, #667eea 12%);
  --ipg-border: color-mix(in srgb, var(--line-color) 55%, #667eea 45%);
  --ipg-accent: #8fa6e0;
  --ipg-accent-soft: rgba(125, 148, 209, 0.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: dark) {
  html:not([data-user-color-scheme='light']) .ipg-bar {
    --ipg-bg-mix: color-mix(in srgb, var(--board-bg-color) 88%, #667eea 12%);
    --ipg-border: color-mix(in srgb, var(--line-color) 55%, #667eea 45%);
    --ipg-accent: #8fa6e0;
    --ipg-accent-soft: rgba(125, 148, 209, 0.18);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
  }
}

/* ---------- 移动端 ---------- */
@media (max-width: 576px) {
  /* 窄屏一行装不下「文案 + IP」，改用两行 grid：
     第一行 图标 + 文案 + 关闭，第二行 IP 居中 */
  .ipg-bar {
    top: 64px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon text close"
      "ip   ip   ip";
    align-items: center;
    row-gap: 1px;
    column-gap: 7px;
    padding: 6px 8px 6px 10px;
    font-size: 13px;
    white-space: normal;
  }

  .ipg-icon {
    grid-area: icon;
    width: 23px;
    height: 23px;
  }

  .ipg-text {
    grid-area: text;
    text-align: center;
  }

  .ipg-ip {
    grid-area: ip;
    padding-left: 0;
    border-left: 0;
    text-align: center;
    font-size: 11px;
  }

  .ipg-close {
    grid-area: close;
  }
}