/**
 * xychat - 状态栏
 * 重构后的多风格状态栏，配合美化 APP 的样式切换
 */

:root {
  /* 默认样式图标 - 现代简洁线条风格 */
  --statusbar-icon-wifi-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Cpath%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%20d%3D%27M2%2012c2.5-2.5%206.5-4%209-4s6.5%201.5%209%204M5%2010c1.5-1.5%204-2.5%206-2.5s4.5%201%206%202.5M8%208c1-1%202.5-1.5%203-1.5s2%200.5%203%201.5%27/%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2713.5%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3C/svg%3E");
  --statusbar-icon-signal-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Cpath%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%20d%3D%27M2%2014h2v-2h-2zM6%2014h2v-4h-2zM10%2014h2v-6h-2zM14%2014h2v-8h-2zM18%2014h2v-10h-2z%27/%3E%3C/svg%3E");
  
  /* 安卓样式图标 - 几何填充风格 */
  --statusbar-icon-wifi-android: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Cpath%20fill%3D%27currentColor%27%20d%3D%27M11%202c-4%200-8%201.5-11%204l2%202c2-2%205-3%209-3s7%201%209%203l2-2c-3-2.5-7-4-11-4zM11%208c-2%200-4%200.5-6%202l2%202c1-1%202.5-1.5%204-1.5s3%200.5%204%201.5l2-2c-2-1.5-4-2-6-2z%27/%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2713.5%27%20r%3D%271.5%27%20fill%3D%27currentColor%27/%3E%3C/svg%3E");
  --statusbar-icon-signal-android: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Crect%20x%3D%272%27%20y%3D%2712%27%20width%3D%272.5%27%20height%3D%274%27%20rx%3D%270.5%27%20fill%3D%27currentColor%27/%3E%3Crect%20x%3D%276%27%20y%3D%2710%27%20width%3D%272.5%27%20height%3D%276%27%20rx%3D%270.5%27%20fill%3D%27currentColor%27/%3E%3Crect%20x%3D%2710%27%20y%3D%278%27%20width%3D%272.5%27%20height%3D%278%27%20rx%3D%270.5%27%20fill%3D%27currentColor%27/%3E%3Crect%20x%3D%2714%27%20y%3D%276%27%20width%3D%272.5%27%20height%3D%2710%27%20rx%3D%270.5%27%20fill%3D%27currentColor%27/%3E%3Crect%20x%3D%2718%27%20y%3D%274%27%20width%3D%272.5%27%20height%3D%2712%27%20rx%3D%270.5%27%20fill%3D%27currentColor%27/%3E%3C/svg%3E");
  
  /* 极简样式图标 - 简化点状风格 */
  --statusbar-icon-wifi-minimal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27currentColor%27%20opacity%3D%270.4%27/%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27currentColor%27%20opacity%3D%270.6%27/%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27currentColor%27%20opacity%3D%270.8%27/%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3C/svg%3E");
  --statusbar-icon-signal-minimal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2022%2016%27%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2713%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2711%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%277%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%275%27%20r%3D%271%27%20fill%3D%27currentColor%27/%3E%3C/svg%3E");
  
  /* 保持向后兼容 */
  --statusbar-icon-wifi-mask: var(--statusbar-icon-wifi-default);
  --statusbar-icon-signal-mask: var(--statusbar-icon-signal-default);
}

/* === 状态栏骨架 === */
.statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--statusbar-height);
  min-height: var(--statusbar-height);
  max-height: var(--statusbar-height);
  background: var(--statusbar-surface-bg, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 18px 2px 16px;
  z-index: var(--z-statusbar);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--statusbar-text-color, var(--text-primary));
  transition:
    height var(--transition-normal),
    min-height var(--transition-normal),
    max-height var(--transition-normal),
    opacity var(--transition-normal),
    transform var(--transition-normal);
}

.statusbar.statusbar-hidden {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.statusbar.statusbar-hidden .statusbar-left,
.statusbar.statusbar-hidden .statusbar-right {
  opacity: 0;
  visibility: hidden;
}

.statusbar-left {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: inherit;
}

.statusbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.statusbar-right {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.statusbar-icon {
  width: 22px;
  height: 16px;
  min-width: 22px;
  min-height: 16px;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.statusbar-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width var(--transition-fast), opacity var(--transition-fast);
  flex-shrink: 0;
  object-fit: contain;
}

/* === Style: Default === */
.statusbar.statusbar-style-default {
  letter-spacing: 0.06em;
}

.statusbar.statusbar-style-default .statusbar-left {
  font-size: var(--font-size-base-lg);
}

.statusbar.statusbar-style-default .statusbar-right {
  gap: 12px;
}

.statusbar.statusbar-style-default .statusbar-icon svg {
  stroke-width: 1;
}

/* 默认样式图标 */
.statusbar.statusbar-style-default .statusbar-icon.icon-wifi {
  -webkit-mask-image: var(--statusbar-icon-wifi-default);
  mask-image: var(--statusbar-icon-wifi-default);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-default .statusbar-icon.icon-signal {
  -webkit-mask-image: var(--statusbar-icon-signal-default);
  mask-image: var(--statusbar-icon-signal-default);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-default .statusbar-icon.icon-wifi svg,
.statusbar.statusbar-style-default .statusbar-icon.icon-signal svg {
  display: none;
}

/* 确保图标对齐和显示正确 */
.statusbar-icon.icon-wifi svg,
.statusbar-icon.icon-signal svg {
  display: block;
}

/* === Style: Android inspired === */
.statusbar.statusbar-style-android {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

.statusbar.statusbar-style-android .statusbar-left {
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.statusbar.statusbar-style-android .statusbar-right {
  gap: 6px;
}

.statusbar.statusbar-style-android .statusbar-icon {
  width: 20px;
  height: 12px;
  min-width: 20px;
  min-height: 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 4px 1px 2px;
}

.statusbar.statusbar-style-android .statusbar-icon svg {
  stroke-width: 1;
}

/* 安卓样式图标 */
.statusbar.statusbar-style-android .statusbar-icon.icon-wifi {
  -webkit-mask-image: var(--statusbar-icon-wifi-android);
  mask-image: var(--statusbar-icon-wifi-android);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-android .statusbar-icon.icon-signal {
  -webkit-mask-image: var(--statusbar-icon-signal-android);
  mask-image: var(--statusbar-icon-signal-android);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-android .statusbar-icon.icon-wifi svg,
.statusbar.statusbar-style-android .statusbar-icon.icon-signal svg {
  display: none;
}

/* === Style: Minimal pills === */
.statusbar.statusbar-style-minimal {
  padding: 0 18px 0 18px;
  letter-spacing: 0.04em;
}

.statusbar.statusbar-style-minimal .statusbar-left,
.statusbar.statusbar-style-minimal .statusbar-right {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 2px 12px 2px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  height: 20px;
  min-height: 20px;
}

[data-theme="dark"] .statusbar.statusbar-style-minimal .statusbar-left,
[data-theme="dark"] .statusbar.statusbar-style-minimal .statusbar-right {
  background: rgba(255, 255, 255, 0.08);
}
.statusbar.statusbar-style-minimal .statusbar-right {
  gap: 4px;
}

/* 极简样式图标 */
.statusbar.statusbar-style-minimal .statusbar-icon.icon-wifi {
  -webkit-mask-image: var(--statusbar-icon-wifi-minimal);
  mask-image: var(--statusbar-icon-wifi-minimal);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-minimal .statusbar-icon.icon-signal {
  -webkit-mask-image: var(--statusbar-icon-signal-minimal);
  mask-image: var(--statusbar-icon-signal-minimal);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar.statusbar-style-minimal .statusbar-icon.icon-wifi svg,
.statusbar.statusbar-style-minimal .statusbar-icon.icon-signal svg {
  display: none;
}

/* 通用图标样式 - 当没有特定样式时使用默认图标 */
.statusbar-icon.icon-wifi:not(.statusbar-style-default .statusbar-icon):not(.statusbar-style-android .statusbar-icon):not(.statusbar-style-minimal .statusbar-icon) {
  -webkit-mask-image: var(--statusbar-icon-wifi-default);
  mask-image: var(--statusbar-icon-wifi-default);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.statusbar-icon.icon-signal:not(.statusbar-style-default .statusbar-icon):not(.statusbar-style-android .statusbar-icon):not(.statusbar-style-minimal .statusbar-icon) {
  -webkit-mask-image: var(--statusbar-icon-signal-default);
  mask-image: var(--statusbar-icon-signal-default);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}