/* EdgeFT · 顶栏组件（<top-bar>）：iOS 27 风格
   桌面：卡片顶部工具条；移动端：屏幕顶部的不透明固定工具条。
   层级约定（layout.css）：消息流 1 < 顶栏 6 < 输入栏 7。
   注：top-bar 自定义元素的 display:contents 归 layout.css。 */

/* ---------- 桌面工具条 ---------- */
.chat-header {
  position: relative;
  z-index: 5;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--ios-separator);
}
.chat-title {
  font-size: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.2px;
}
/* 副标题：状态点 + 文字 */
.chat-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  font-size: var(--font-caption-2);
  color: var(--muted);
}
.chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* 图标钮桌面 hover 反馈（移动端 :active 已在全局 base.css） */
.chat-header .icon-btn:hover {
  background: var(--ios-fill);
}

/* ---------- 设置菜单（玻璃浮层，.hidden 控制显隐） ---------- */
.settings-menu {
  pointer-events: auto;
  position: absolute;
  top: 46px;
  right: 0;
  min-width: 164px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  z-index: 50;
  border-radius: var(--radius-group);
  background: var(--panel);
  border: 0.5px solid var(--ios-separator);
  transform-origin: top right;
  animation: menu-pop var(--dur-med) var(--ease-spring) both;
}
@keyframes menu-pop {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.settings-menu button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  color: var(--ios-blue);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.settings-menu button + button {
  border-top: 0.5px solid var(--ios-separator);
}
.settings-menu button:active {
  background: var(--ios-fill);
}
.settings-menu button#leaveBtn,
.settings-menu button.danger {
  color: var(--ios-red);
}
/* 存储模式只读行（persist() 结果展示） */
.settings-mode {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: 13px;
  border-bottom: 0.5px solid var(--ios-separator);
}

/* ==================================================================
   移动端（≤720px）：不透明固定顶栏，与输入栏使用同一底色
   ================================================================== */
@media (max-width: 720px) {
  .chat-header {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: 100vw;
    height: calc(var(--sat) + 56px);
    padding: var(--sat) var(--space-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 6;
    background: var(--panel);
    border-bottom: 0.5px solid var(--ios-separator);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* 顶栏保持纯色，不使用沉浸模糊效果。 */
  .chat-header .icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--ios-fill);
    border: 1px solid var(--ios-separator);
    box-shadow: none;
    color: var(--text);
  }
  .chat-actions {
    margin-left: auto; /* 移动端：设置按钮固定在右上角（chat-heading 绝对居中不受影响） */
    margin-right: 0;
    position: relative;
  }
  /* 中间设备名居中 */
  .chat-heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--sat) + 7px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: min(52%, 260px);
    min-width: 0;
    padding: 8px var(--space-4) 8px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .chat-title {
    font-size: var(--font-caption);
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-subtitle {
    margin-left: 0;
    gap: 8px;
    font-size: 13px; /* 移动端副标题特调（紧凑胶囊内空间有限） */
    line-height: 1.2;
  }
  .chat-heading .status-dot {
    width: 6px;
    height: 6px;
  }
  .settings-menu {
    /* 固定定位：相对视口，避免容器位置导致菜单溢出屏幕 */
    position: fixed;
    top: calc(var(--sat) + 60px);
    right: var(--space-3);
    max-width: calc(100vw - 24px);
  }
}

/* ---------- 横屏矮窗：压矮悬浮区，收起副标题 ---------- */
@media (max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  .chat-header {
    height: calc(var(--sat) + 40px);
  }
  .chat-heading {
    top: calc(var(--sat) + 2px);
    padding: 4px var(--space-3) 4px;
  }
  .chat-subtitle {
    display: none;
  }
}