/* ============================================================================
 * 冲击波英语 · 角色互动对话（样式）
 * ============================================================================
 * 第六十六轮（2026-10-19）
 *
 * 命名一律 crew- 前缀：本文件会被加到多个页面（首页 / 学科门户 / 学院页 /
 * 文渊阁），必须保证与既有样式零冲突。
 *
 * 配色：品牌色取自素材包的「品牌色彩规范」
 *   Impact Blue #1E88E5 / Orange #FF8A00 / Green #43B02A / Yellow #FDD835
 *   站点本身是暖米色系（--ink #14211c / --gold #f8c45d），所以角色色只用于
 *   点缀（圆环、按钮、强调），主体仍用站点既有配色，不能两张皮。
 * ==========================================================================*/

.crew {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  font-family: inherit;
  --crew-accent: #1e88e5;
}

/* ==== 悬浮按钮 ==== */
.crew-launch {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 33, 28, 0.28);
  cursor: pointer;
  /* 不要 overflow:hidden —— 右下角那个呼吸点的光晕会被裁掉，
     头像本身的圆角由 .crew-launch-av 自己负责。 */
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.crew-launch:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px rgba(20, 33, 28, 0.34);
}

/* 面板打开时把悬浮球让开。
   ★ 手机上尤其必须让：面板是贴底展开的，正好压在悬浮球身上，
     会把最下面一排「换人」头像挡住一半（第六十六轮实测踩到）。 */
.crew-launch.is-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.crew-launch-av {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 呼吸点：告诉学生「这里有人」 */
.crew-ping {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--crew-accent);
  box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.55);
  animation: crew-ping 2.4s ease-out infinite;
}

@keyframes crew-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(30, 136, 229, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(30, 136, 229, 0);
  }
}

/* ==== 招呼气泡 ==== */
.crew-teaser {
  position: absolute;
  right: 4px;
  bottom: 78px;
  width: max-content;
  max-width: 258px;
  padding: 12px 16px;
  border: 1px solid rgba(20, 33, 28, 0.1);
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  color: var(--ink, #14211c);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.55;
  box-shadow: 0 14px 34px rgba(20, 33, 28, 0.18);
  cursor: pointer;
  animation: crew-in 320ms ease both;
}

@keyframes crew-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==== 面板 ==== */
.crew-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  width: 366px;
  max-height: min(560px, calc(100vh - 120px));
  border: 1px solid rgba(20, 33, 28, 0.1);
  border-radius: 26px;
  background: #fffdf8;
  box-shadow: 0 30px 70px rgba(20, 33, 28, 0.3);
  overflow: hidden;
  animation: crew-in 220ms ease both;
}

.crew-panel[hidden] {
  display: none;
}

/* 头 */
.crew-head {
  display: grid;
  /* 四列：头像 / 名字·角色 / 语言开关 / 关闭。
     第六十七轮加了语言开关，所以原来是 3 列，现在是 4 列。 */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: linear-gradient(120deg, #fff6e2 0%, #eef7ff 100%);
  border-bottom: 1px solid rgba(20, 33, 28, 0.08);
}

/* ==== 语言开关：EN / 中文 ====
   杨老师要求「用 English / 中文 的选项在对话框上方，以英文为默认」。
   做成一颗小胶囊里的两段，比两个独立按钮更省地方，孩子也不会点错。 */
.crew-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(20, 33, 28, 0.07);
}

.crew-lang-b {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7d74;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.5;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.crew-lang-b:hover {
  color: var(--ink, #14211c);
}

.crew-lang-b.is-on {
  background: #fff;
  color: var(--ink, #14211c);
  box-shadow: 0 1px 4px rgba(20, 33, 28, 0.16);
}

.crew-head-av {
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(20, 33, 28, 0.16);
}

.crew-head-txt {
  min-width: 0;
  line-height: 1.3;
}

.crew-head-txt b {
  display: block;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.crew-head-txt span {
  display: block;
  color: #6b7d74;
  font-size: 0.72rem;
  font-weight: 850;
}

.crew-x {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(20, 33, 28, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #4d6155;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.crew-x:hover {
  background: #ffe9e1;
  color: #b04a2b;
}

/* 对话记录 */
.crew-log {
  flex: 1 1 auto;
  min-height: 150px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crew-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  max-width: 100%;
}

.crew-row--me {
  justify-content: flex-end;
}

.crew-row-av {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.crew-bub {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.62;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.crew-row--them .crew-bub {
  border: 1px solid rgba(20, 33, 28, 0.09);
  border-bottom-left-radius: 5px;
  background: #fff;
  color: var(--ink, #14211c);
}

.crew-row--me .crew-bub {
  border-bottom-right-radius: 5px;
  background: var(--crew-accent);
  color: #fff;
  font-weight: 850;
}

.crew-bub strong {
  color: #0d5fb0;
  font-weight: 950;
}

.crew-row--me .crew-bub strong {
  color: #fff;
}

/* 答案里的跳转按钮 */
.crew-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 33px;
  margin-top: -2px;
}

.crew-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(30, 136, 229, 0.45);
  border-radius: 999px;
  background: rgba(30, 136, 229, 0.08);
  color: #10639f;
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}

.crew-link:hover {
  background: rgba(30, 136, 229, 0.16);
  transform: translateY(-1px);
}

/* 话题按钮 */
.crew-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 132px;
  overflow-y: auto;
  padding: 11px 14px 12px;
  border-top: 1px solid rgba(20, 33, 28, 0.08);
  background: #fffdf8;
}

.crew-chip {
  border: 1px solid rgba(20, 33, 28, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #14211c);
  padding: 7px 13px;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.crew-chip:hover {
  border-color: var(--crew-accent);
  background: #fff;
}

.crew-chip.is-asked {
  color: #6b7d74;
  border-style: dashed;
}

/* 换人 */
.crew-cast {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 11px;
  border-top: 1px solid rgba(20, 33, 28, 0.08);
  background: #f7f4ec;
}

.crew-cast-b {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.crew-cast-b img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.crew-cast-b:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.crew-cast-b.is-on {
  border-color: var(--crew-accent);
  opacity: 1;
}

/* ==== 手机：面板变底部抽屉 ==== */
@media (max-width: 560px) {
  .crew {
    right: 12px;
    bottom: 12px;
  }

  .crew-launch {
    width: 56px;
    height: 56px;
  }

  .crew-teaser {
    bottom: 68px;
    max-width: 210px;
    font-size: 0.82rem;
  }

  .crew-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 76vh;
    border-radius: 22px;
  }

  .crew-log {
    min-height: 120px;
  }

  .crew-chips {
    /* 手机上面板是贴底抽屉，五个话题会折成三行（约 132px）。
       原来卡 108px，第三行被切掉一半，最后一条「你为什么会说话？」要滚才看得见
       —— 上线实测发现的。放到 152px，五条一次看全。 */
    max-height: 152px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew-ping,
  .crew-teaser,
  .crew-panel {
    animation: none;
  }
}

/* ============================================================================
 * 一分钟看懂 · 短视频区（cv- 前缀）
 * ============================================================================
 * 这一段是「视频还没录完也能上线」的关键：
 *   有 src 的卡片 → 封面 + 播放键，点开是弹层播放器；
 *   没 src 的卡片 → 封面 + 「录制中」小标，点它**不是死按钮**，
 *   而是把孩子领到右下角的 Imee 面前。
 * 所以八个位置现在就能全部摆好，杨老师录一条填一条，页面自己长出来。
 * ==========================================================================*/

/* 气泡里的「看视频讲解」按钮：和普通链接排在一起，但它是 button */
.crew-link--video {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--crew-accent, #1e88e5);
}

.crew-link--video:hover {
  filter: brightness(1.06);
}

/* ==== 区块 ==== */
.cv-wrap {
  display: grid;
  gap: 16px;
}

/* ==== 头条 ==== */
.cv-hero {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0;
  border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cv-hero:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 107, 66, 0.34);
  box-shadow: 0 16px 34px rgba(20, 33, 28, 0.12);
}

.cv-hero-txt {
  display: block;
  padding: 6px 26px 6px 0;
}

.cv-hero-txt em {
  display: block;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange, #d96b42);
  margin-bottom: 8px;
}

.cv-hero-txt b {
  display: block;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.3;
  color: var(--ink, #14211c);
  margin-bottom: 8px;
}

.cv-hero-txt span {
  display: block;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted, #65776f);
}

/* 「谁主讲」——把角色系统钉在视频上，家长一眼知道这是谁在带孩子 */
.cv-hero-by {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted, #65776f);
}

.cv-hero-by img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(20, 33, 28, 0.18);
}

/* ==== 缩略图（CSS 画的，不占一张图）==== */
.cv-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, #fff 0 32%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(140deg, #f8f5ee, #edf3f8);
}

.cv-thumb--hero {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.cv-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 人物头像版封面：把角色的脸放大摆在正中，比放一张假截图诚实得多 */
.cv-thumb > .cv-face {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 40%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(20, 33, 28, 0.18);
}

/* 章节卡的「编号版」封面。
   ★ 为什么不用同一张 Imee 脸连排七张：七个一模一样的圆脸会被当成占位图，
     而且完全分不出哪张是哪张。编号 + 小主持头像，一眼就知道是「第几集」。
   颜色只用角色色做一层很淡的底和水印数字，主体仍是站点的米白，不抢内容。 */
.cv-thumb > .cv-host {
  inset: auto;
  left: 11px;
  top: 11px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(20, 33, 28, 0.2);
}

.cv-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cv-a, #1e88e5);
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cv-thumb--plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cv-a, #1e88e5);
  opacity: 0.09;
}

.cv-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 33, 28, 0) 52%, rgba(20, 33, 28, 0.42) 100%);
}

.cv-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(20, 33, 28, 0.26);
}

.cv-play::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ink, #14211c);
}

.cv-thumb--hero .cv-play {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
}

.cv-thumb--hero .cv-play::after {
  left: 22px;
  top: 17px;
  border-width: 12px 0 12px 19px;
}

.cv-len {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(20, 33, 28, 0.62);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 「录制中」放右上角 —— 左上角留给主持人头像，两个都在左上会互相盖住，
   头像被白药丸压掉一半，看起来像抠图坏了（第一版实测）。 */
.cv-soon {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted, #65776f);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* 头条的卡片圆角是 18px，右上角正好在弧线上，药丸会被削掉一角；
   挪到右下角（那里没有播放键，播放键在正中）就干净了。 */
.cv-thumb--hero .cv-soon {
  top: auto;
  bottom: 12px;
  right: 14px;
}

/* ==== 章节卡 ==== */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cv-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 13px;
  border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cv-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 107, 66, 0.34);
  box-shadow: 0 12px 26px rgba(20, 33, 28, 0.11);
}

.cv-t {
  display: block;
  padding: 11px 13px 4px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink, #14211c);
}

.cv-s {
  display: block;
  padding: 0 13px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #65776f);
}

/* ==== 播放弹层 ==== */
.cv-dlg {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(20, 33, 28, 0.74);
}

.cv-dlg[hidden] {
  display: none;
}

.cv-dlg-in {
  position: relative;
  width: min(920px, 100%);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.cv-dlg-body {
  aspect-ratio: 16 / 9;
  background: #000;
  /* 别让竖版片子把对话框顶出屏幕：小屏笔记本上 16:9 也够高 */
  max-height: 78vh;
}

.cv-dlg-body video,
.cv-dlg-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ★ 第六十九轮：将来换成 HeyGen 数字人，很可能是**竖版 9:16**。
   容器是 16:9，原来 video 写死 width/height:100% —— 竖版会被横向压扁，
   人脸直接变形。object-fit: contain 让画面等比缩放、两侧留黑边，
   和 YouTube 放竖版视频一个表现。16:9 的片子 contain 就等于铺满，视觉零变化。
   （iframe 不吃 object-fit，但 HeyGen 嵌入页默认是 16:9 播放器，不受影响。） */
.cv-dlg-body video {
  object-fit: contain;
  background: #000;
}

.cv-dlg-x {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink, #14211c);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cv-dlg-cap {
  margin: 0;
  padding: 12px 18px 14px;
  font-size: 13px;
  color: var(--muted, #65776f);
}

@media (max-width: 1000px) {
  .cv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .cv-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cv-hero-txt {
    padding: 14px 18px 18px;
  }
}

@media (max-width: 560px) {
  .cv-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-thumb--hero .cv-play {
    width: 46px;
    height: 46px;
  }

  .cv-thumb--hero .cv-play::after {
    left: 17px;
    top: 13px;
    border-width: 10px 0 10px 15px;
  }

  .cv-dlg {
    padding: 10px;
  }
}

/* ============================================================================
 * 自由打字区（第七十五轮 · 2026-10-19）
 * ----------------------------------------------------------------------------
 * 杨老师原话：「学生又可以打字的地方吗？我怎么没看到有可以打字的框？
 *             只能点击预设语句来获得回复？？？」
 *
 * 位置：预设胶囊之下、换人头像之上。
 *   放这里有两个理由：
 *     ① 拇指/视线落点最自然 —— 手机上面板是底部抽屉，输入框正好在手边；
 *     ② 胶囊仍然是最显眼的入口，打字是「胶囊不够用时」的补充，
 *        视觉权重不能盖过胶囊（孩子打字慢，全靠打字会卡住）。
 *
 * ★ 未登录时整块 hidden（见 crew.js 的 buildCtx）——
 *   公开页永远不出现输入框，AI 接口就不会被路人刷。
 * ==========================================================================*/

.crew-compose {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 9px 14px 10px;
  border-top: 1px solid rgba(20, 33, 28, 0.08);
  background: #fffdf8;
}

/* 上面写了 display:flex，会把 [hidden] 的默认 display:none 覆盖掉，所以必须补这一条 */
.crew-compose[hidden] {
  display: none;
}

.crew-ta {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  /* 96px ≈ 4 行（行高 1.4 × 13px）。
     原来写 84px 时第 4 行会被拦腰截断 —— 截图里看着像坏了，其实是内部滚动。
     宁可多给 12px，让「四行整整齐齐」，再长才滚。 */
  max-height: 96px;
  padding: 9px 12px;
  border: 1px solid rgba(20, 33, 28, 0.16);
  border-radius: 13px;
  background: #fff;
  color: var(--ink, #14211c);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  resize: none;               /* 自己算高度，不要用户拖 */
  overflow-y: auto;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.crew-ta::placeholder {
  color: #9aa8a0;
  font-weight: 600;
}

.crew-ta:focus {
  border-color: var(--crew-accent);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
}

.crew-send {
  flex: 0 0 auto;
  position: relative;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--crew-accent);
  color: transparent;         /* ★ 文字里的 ↑ 只作无障碍后备，视觉上换成下面画的箭头 */
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

/* ★ 为什么不用 ↑ 直接显示：那个字形在多数系统里是**发丝细线**，
   38px 的圆里看着像一根竖杠（本地截图实测）。用两条边框拼一个箭头，
   线宽可控、任何字体下都长一样。 */
.crew-send::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid #fff;
  border-left: 2.5px solid #fff;
  transform: translate(-50%, -35%) rotate(45deg);
}

.crew-send:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.crew-send:active {
  transform: translateY(0);
}

/* 手机：面板是底部抽屉，输入框 16px 才不会让 iOS 自动放大页面。
   ★ 字号一变，同样的行数就需要更高的框 —— 所以 max-height 也跟着放大，
     否则第 4 行会被截掉半行（本地 390 宽截图实测过）。
     JS 是从 computed style 读这个上限的，改这里就够了，不用改 JS。 */
@media (max-width: 560px) {
  .crew-ta {
    font-size: 16px;
    font-weight: 600;
    max-height: 116px;
  }
}