/* 界面提示（2026-11-03 老板）：
 *   1. 引导泡泡：指着界面上某个"看不懂是什么"的地方说一句话（抽屉、图纸卷…）
 *   2. 安全提示：顶栏里的一格，字上下翻着换（数据安全 + 车间安全）
 *
 * 逻辑在 tips.js，这里只管长相。两者共用一套颜色：橙 = 提示，不是警告，
 * 所以不用红的——红色留给"这事要出错了"。
 */

/* ---- ① 引导泡泡 ---- */
.coach {
  position: fixed;
  z-index: 70;
  max-width: 244px;
  background: #fff;
  border: 1px solid #efe4d4;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(70, 50, 20, .16);
  padding: 11px 13px 9px;
  animation: coach-in .22s ease-out;
}
.coach .t {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a362e;
  margin-bottom: 4px;
}
.coach .b {
  display: block;
  font-size: 12.5px;
  line-height: 1.8;
  color: #6d675c;
}
.coach .ok {
  display: block;
  margin: 8px 0 0 auto;
  border: 0;
  background: none;
  color: #e8710a;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.coach .ok:hover { text-decoration: underline; }

/* 指向被说明的那个东西的小尖角 */
.coach::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  transform: rotate(45deg);
}
/* 泡泡在右边 → 尖角在左，朝左指 */
.coach[data-side="right"]::after {
  left: -6px;
  top: 16px;
  border-left: 1px solid #efe4d4;
  border-bottom: 1px solid #efe4d4;
}
/* 泡泡在下面 → 尖角在上，朝上指 */
.coach[data-side="bottom"]::after {
  top: -6px;
  right: 24px;
  border-left: 1px solid #efe4d4;
  border-top: 1px solid #efe4d4;
}

@keyframes coach-in {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---- ② 安全提示（顶栏里那一格）----
 *
 * 第一版是顶栏下面单独一条横幅、横向跑马灯。老板圈了顶栏里那块空白说
 * 「放在上面那层里，是上下滚动」——顶栏本来就空着大半截，再压一条横幅
 * 等于白占 30px。现在它是顶栏中间的一格：标签不动，字往上翻，
 * 5 秒换一条，鼠标放上去也不会跳（没做 hover 暂停，因为翻的是整句，
 * 停下来反而让人以为卡住了）。
 */
.safeslot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  overflow: hidden;
  font-size: 12.5px;
  color: #8a5a1e;
}
.safeslot .tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fde9cf;
  color: #a55e10;
  white-space: nowrap;
}
.safeslot .tag[data-kind="生产"] { background: #e7f1e4; color: #3d7a3a; }
/* 不 flex:1 —— 让它跟文字一样宽，× 才紧跟在句子后面。
   撑满会把 × 推到顶栏最右端，紧挨着公司名，看着像"关掉公司名"。 */
.safeslot .txtbox {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 20px;
  overflow: hidden;
  position: relative;
}
.safeslot .txt {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
  transition: transform .28s ease, opacity .28s ease;
}
.safeslot .txt.up { transform: translateY(-100%); opacity: 0; }
/* .down 是"已经挪到下面、还没开始动"的那一刻，不能有过渡，
   否则它会先从上面滑一层再下去。 */
.safeslot .txt.down { transform: translateY(100%); opacity: 0; transition: none; }
.safeslot .x {
  flex: none;
  margin-left: 4px;
  border: 0;
  background: none;
  color: #c9b79c;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: .75;
}
.safeslot .x:hover { color: #8a5a1e; opacity: 1; }

/* 860 → 720（2026-11-04）。

   原来卡在 860：老板那台机的窗口宽度正好落在这条线附近，于是顶栏中间
   空着一块、话术一个都不出现——他看着就是「滚动提示没了」。
   720 是这套界面真正开始挤的宽度（左栏 + 内容区），再窄才该让位。 */
@media (max-width: 720px) {
  .coach { max-width: 200px; }
  .safeslot { display: none; }
}