/* ============================================================================
 * 冲击波英语 · 学习中心顶部条（通知 + 快捷入口）
 * 文件位置：/learn/assets/study-bar.css
 * ----------------------------------------------------------------------------
 * 这个文件被至少 5 个结构完全不同的页面引用：
 *   平台首页(index.html) / 我的成绩档案(me/) / 教师台(teacher/)
 *   家长报告(me/parent/) / 写作工坊(…/workshop/)
 *
 * 所以两条硬规矩：
 *   ① 所有类名一律 iesb- 前缀，绝不污染页面已有类名；
 *   ② 组件自己设定 font / box-sizing / line-height，不依赖页面变量
 *      （那几套页面的 CSS 变量名互不相同，靠不住）。
 *
 * 设计取向 —— 杨老师原话「很醒目但不会让学生分心」：
 *   · 不用滚动跑马灯（持续移动最耗注意力），改成**缓慢淡入淡出**，6.5 秒换一条；
 *   · 鼠标移上去就停住，学生要看哪条就能看哪条；
 *   · 一天只提醒一次：关掉后按通知 id 记住，同一条不再骚扰；
 *   · 一条只占一行（手机上最多两行），不挤压正文内容。
 * ========================================================================== */

.iesb-notice,
.iesb-quick {
  box-sizing: border-box;
  font-family: "Trebuchet MS", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- 通知条 */
.iesb-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(217, 107, 66, .22);
  border-left: 4px solid #d96b42;
  border-radius: 14px;
  background: linear-gradient(100deg, #fff6e0 0%, #fffdf6 52%, #f2fbf4 100%);
  box-shadow: 0 6px 18px rgba(20, 33, 28, .07);
  color: #14211c;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.iesb-notice[data-level="info"] {
  border-color: rgba(11, 59, 92, .2);
  border-left-color: #0B3B5C;
  background: linear-gradient(100deg, #eef5fb 0%, #fbfdff 52%, #f4fbf7 100%);
}

.iesb-notice[data-level="good"] {
  border-color: rgba(18, 134, 106, .22);
  border-left-color: #12866A;
  background: linear-gradient(100deg, #e9f8f1 0%, #fbfffd 52%, #f4fbf7 100%);
}

.iesb-notice[data-level="warn"] {
  border-color: rgba(200, 137, 42, .28);
  border-left-color: #C8892A;
  background: linear-gradient(100deg, #fff5df 0%, #fffdf6 52%, #fdf6ea 100%);
}

.iesb-notice[data-level="urgent"] {
  border-color: rgba(192, 57, 43, .26);
  border-left-color: #C0392B;
  background: linear-gradient(100deg, #fdece9 0%, #fffaf8 52%, #fdf3ee 100%);
}

/* 徽标 */
.iesb-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 33, 28, .86);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.iesb-badge .iesb-ic {
  font-size: 12px;
  line-height: 1;
}

/* 正文视口 */
.iesb-view {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  cursor: pointer;
}

.iesb-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .45s ease;
}

.iesb-line.is-out {
  opacity: 0;
}

.iesb-line b {
  font-weight: 900;
  color: #0B3B5C;
}

.iesb-line .iesb-body {
  margin-left: 8px;
  color: #4c5f56;
  font-weight: 600;
}

/* 英文对照行：中文在上、英文在下，小一号、灰一档，不抢中文的注意力 */
.iesb-line--en {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: #7c8c84;
  font-weight: 600;
}

.iesb-line--en b {
  font-weight: 800;
  color: #33566b;
}

.iesb-line--en .iesb-body {
  color: #8b9a92;
  font-weight: 600;
}

/* 展开看全文 */
.iesb-notice.is-open .iesb-line {
  white-space: normal;
}

.iesb-notice.is-open .iesb-line .iesb-body {
  display: block;
  margin: 4px 0 0;
}

/* 可点击提示：右侧一个小箭头，比多一行小字干净，也省一行高度 */
.iesb-go {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #b3c1ba;
  pointer-events: none;
  transition: transform .2s ease, color .2s ease;
}

.iesb-notice[data-clickable="0"] .iesb-go {
  visibility: hidden;
}

.iesb-notice.is-open .iesb-go {
  transform: rotate(90deg);
}

.iesb-notice:hover .iesb-go {
  color: #8b9a92;
}

/* 圆点指示 */
.iesb-dots {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.iesb-dots i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(20, 33, 28, .22);
  transition: background .2s ease, width .2s ease;
}

.iesb-dots i.is-on {
  width: 14px;
  border-radius: 999px;
  background: #d96b42;
}

/* 关闭 */
.iesb-x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 -2px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a9a92;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.iesb-x:hover {
  background: rgba(20, 33, 28, .08);
  color: #14211c;
}

/* ---------------------------------------------------------------- 快捷入口 */
.iesb-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.iesb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(20, 33, 28, .14);
  border-radius: 999px;
  background: #fff;
  color: #14211c;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20, 33, 28, .05);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.iesb-btn:hover {
  transform: translateY(-1px);
  background: #fffdf6;
  box-shadow: 0 6px 16px rgba(20, 33, 28, .1);
}

.iesb-btn .iesb-ic {
  font-size: 15px;
  line-height: 1;
}

/* 主按钮：我的成绩档案 —— 学生每天都要点的那一个，最醒目 */
.iesb-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #0B3B5C, #12557f);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 59, 92, .26);
}

.iesb-btn--primary:hover {
  background: linear-gradient(135deg, #0d466b, #17618f);
  color: #fff;
}

/* 管理员：发布通知 */
.iesb-btn--admin {
  border-color: rgba(217, 107, 66, .4);
  background: #fff6ea;
  color: #a3491f;
}

.iesb-btn--admin:hover {
  background: #ffeccf;
}

/* 中英对照：按钮里中文一行、英文一行。
 * 2026-10-30 杨老师要求「这些链接也要有英文对照」——
 * 所以英文**任何宽度都不隐藏**，只把字号缩小、改成竖排，省宽度又保留对照。 */
.iesb-btn .iesb-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.16;
}

.iesb-btn .iesb-cn {
  font-size: 13.5px;
  font-weight: 800;
}

.iesb-btn .iesb-en {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .62;
  white-space: nowrap;
}

.iesb-btn--primary .iesb-en {
  opacity: .8;
}

.iesb-btn--admin .iesb-en {
  opacity: .7;
}

/* ---------------------------------------------------------------- 平台首页顶栏
 * 平台首页的 .topbar--stacked 是两行栅格：
 *   "brand   actions"
 *   "nav     nav"
 * 杨老师截图里的红框，就是第一行 brand 与 actions 之间那块空。
 * 这里把栅格改成三列，把那块空正式让给快捷入口。
 * ★ 只在本文件里覆盖，不动共享的 portal.css —— 其余 20 多个页面零影响。
 */
.topbar--stacked {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "brand   quick  actions"
    "nav     nav    nav" !important;
}

.topbar--stacked .iesb-quick {
  grid-area: quick;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .topbar--stacked {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "quick"
      "nav"
      "actions" !important;
  }

  .topbar--stacked .iesb-quick {
    justify-content: flex-start;
  }
}

/* 手机上通知条：徽标缩到最小，正文两行封顶 */
@media (max-width: 620px) {
  .iesb-notice {
    padding: 9px 10px 9px 12px;
    gap: 8px;
    font-size: 13px;
  }

  .iesb-badge {
    padding: 3px 8px;
    font-size: 10px;
  }

  .iesb-badge .iesb-txt {
    display: none;
  }

  .iesb-line {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 手机上英文最多一行，避免通知条吃掉半屏 */
  .iesb-line--en {
    -webkit-line-clamp: 1;
    margin-top: 2px;
  }

  .iesb-dots {
    display: none;
  }

  .iesb-btn {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .iesb-btn .iesb-cn {
    font-size: 12.5px;
  }

  .iesb-btn .iesb-en {
    font-size: 10px;
  }
}

/* 打印时不显示 */
@media print {
  .iesb-notice,
  .iesb-quick {
    display: none !important;
  }
}