/* ==== 冲击波英语成长研究中心 · 学生会话胶囊（登录 / 已登录 / 退出）====
   只作用于 .ie-chip 及其子元素，不修改页面其它任何样式。
   独立成文件（而不是塞进共享的 assets/styles.css）的原因：
     styles.css 没有版本串、且被服务器缓存 7 天，改它等于改不动；
     本文件用 ?v= 版本串引用，随时可更新。
   ======================================================================== */

/* 胶囊内的英文小字。
   与 lesson.css 里的「.member-pill .i18n-en」规则保持一致；
   在 /learn/ 首页这类没有加载 lesson.css 的页面，靠这条规则才能正确显示。 */
.ie-chip .i18n-en {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.82;
  line-height: 1.25;
  text-transform: none;
}

/* 已登录时名字与「退出」并排的容器 */
.ie-session {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ie-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

/* 未登录：沿用 .member-pill 的橙色底，仅保证两行排版稳定 */
.ie-chip-in {
  min-width: 104px;
}

/* 已登录：名字用柔和底色胶囊（浅底 + 深字，在深色顶栏上也清晰） */
.ie-chip-user {
  background: #f1efe7;
  color: #33443c;
  border: 1px solid #e3ded0;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(20, 33, 28, 0.08);
}

.ie-name {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 已登录：退出用描边胶囊，视觉重量低于「学生登录」 */
.ie-chip-out {
  background: transparent;
  border: 1px solid rgba(20, 33, 28, 0.2);
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 800;
  font-size: 0.92rem;
  color: #4a5a53;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ie-chip-out:hover {
  background: #f5f3ec;
  color: #1f6f5c;
  border-color: #1f6f5c;
}

@media (max-width: 720px) {
  .ie-name {
    max-width: 120px;
  }

  .ie-chip-user,
  .ie-chip-out {
    padding: 8px 14px;
    font-size: 0.86rem;
  }
}

/* ==== 手机端：胶囊不撑破顶栏（2026-09-16）==== */
.ie-session,
.ie-chip {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 720px) {
  .ie-chip-in {
    min-width: 0;
  }

  .ie-name {
    max-width: 42vw;
  }
}