/* PWA 安装横幅 + 移动端安全区域与触控尺寸适配 */

/* ---------- 安装 / 更新提示条 ---------- */
#pwa-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 24px);
  width: min(460px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6e1ef;
  border-radius: 15px;
  box-shadow: 0 14px 38px rgba(40, 34, 66, .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 190;
}
#pwa-hint.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.pwa-hint-icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  display: grid;
  place-items: center;
}
.pwa-hint-icon svg { width: 17px; height: 17px; }
.pwa-hint-text { flex: 1; min-width: 0; }
.pwa-hint-text strong { display: block; font-size: 12px; }
.pwa-hint-text span {
  display: block;
  font-size: 10px;
  color: #8b938c;
  line-height: 1.6;
  margin-top: 3px;
}
.pwa-hint-action {
  flex: none;
  border: 0;
  background: var(--purple);
  color: #fff;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 600;
}
.pwa-hint-action:hover { background: var(--purple-dark); }
.pwa-hint-close {
  flex: none;
  border: 0;
  background: transparent;
  color: #a2a69f;
  padding: 4px;
  display: grid;
  place-items: center;
}
.pwa-hint-close svg { width: 14px; height: 14px; }
.pwa-hint-close:hover { color: var(--ink); }

/* 移动端：提示条放在顶栏「下方」而不是顶部。
 * 顶栏右侧是身份入口（登录/注册），提示条一旦压上去，
 * 手机上就再也点不到登录按钮了 —— 提示条不能挡住任何顶栏控件。 */
@media (max-width: 820px) {
  #pwa-hint {
    top: calc(72px + env(safe-area-inset-top, 0px));
    bottom: auto;
    transform: translate(-50%, -8px);
    padding: 10px 12px;
    gap: 9px;
  }
  #pwa-hint.show { transform: translate(-50%, 0); }
  .pwa-hint-icon { width: 30px; height: 30px; border-radius: 9px; }
  .pwa-hint-icon svg { width: 15px; height: 15px; }
  .pwa-hint-text strong { font-size: 11px; }
  .pwa-hint-text span { font-size: 9px; }
  .pwa-hint-action { padding: 9px 12px; font-size: 10px; }
}

/* 更窄的屏幕上顶栏更矮，提示条跟着上移，仍不与顶栏重叠 */
@media (max-width: 650px) {
  #pwa-hint {
    top: calc(66px + env(safe-area-inset-top, 0px));
  }
}

/* ---------- 安全区域（刘海屏 / Home Indicator） ----------
 * 注意：只有在「装到桌面独立窗口」时才会出现真实刘海，
 * 浏览器标签页模式下 env() 恒为 0，不影响桌面观感。 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* 顶栏避开刘海 */
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(74px + env(safe-area-inset-top, 0px));
}
@media (max-width: 850px) {
  .topbar {
    height: calc(65px + env(safe-area-inset-top, 0px));
  }
}

/* 侧边栏在独立窗口下也需要避开刘海 */
.sidebar {
  padding-top: calc(30px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

/* 页面底部避开 Home Indicator */
.content-wrap {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* IP 挂件抬高，避免压住底部内容 */
.zd-dock {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Toast 也避开 Home Indicator */
.toast {
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 移动端触控尺寸 ----------
 * 手指点按的可点区域至少 44px，小图标靠 padding 撑开触达区而不改视觉大小。 */
@media (max-width: 650px) {
  .icon-button {
    width: 44px;
    height: 44px;
  }
  .start-button {
    min-height: 44px;
    height: 44px;
  }
  .id-entry {
    min-height: 40px;
    padding: 8px 12px 8px 8px;
  }
  .soft-button {
    padding: 11px 12px;
    min-height: 40px;
  }
  .audio-button {
    width: 40px;
    height: 40px;
  }
  .filter-pills button {
    padding: 9px 12px;
  }
  .thinking-tab {
    padding: 12px 8px;
  }
  .quick-row button {
    padding: 10px 9px;
    min-height: 40px;
  }
  .word-chips button {
    padding: 9px 11px;
  }
  .text-button {
    padding: 8px 4px;
  }
  .saved-item .delete-saved {
    padding: 12px;
  }
  /* 输入框在移动端默认字号 16px 以下会触发 iOS 自动放大页面 */
  .search-main input,
  .id-field,
  .practice-input {
    font-size: 16px;
  }
}

/* 触摸设备上不需要 hover 效果，改为点击反馈 */
@media (hover: none) {
  .soft-button:hover,
  .quick-row button:hover,
  .filter-pills button:hover,
  .word-chips button:hover {
    border-color: inherit;
    background: inherit;
    color: inherit;
    transform: none;
  }
  .idiom-card:hover {
    border-color: #e9e9e3;
    transform: none;
    box-shadow: none;
  }
  .start-button:hover { background: var(--ink); transform: none; }
}

/* ---------- 移动端顶栏 ----------
 * 顶栏左侧「互动讲解」在窄屏下会被挤成两行，这里改为不换行并允许收缩。 */
@media (max-width: 650px) {
  .topbar-left {
    flex: none;
    min-width: 0;
    white-space: nowrap;
  }
  .topbar-left strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-right {
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
  }
  /* 连续学习天数在窄屏优先让位给身份入口 */
  .streak {
    flex: none;
    white-space: nowrap;
  }
  .id-entry {
    flex: none;
  }
}

@media (max-width: 430px) {
  /* 更窄时隐藏连续学习，只保留核心入口 */
  .streak { display: none; }
  .topbar-left strong { font-size: 11px; }
}