/*
 * 录音交互的样式：跳动声波 + "落进时间线"的小图标。
 *
 * 为什么单独一个文件、而且全部用简单类名：
 *   1. record.js 自己创建的元素（飞行画布、.record-landed）拿不到别人的选择器，
 *      必须有自己的样式；
 *   2. 结构（index.html）由别人在改，这里绝不写 `.record-panel > div:nth-child(2)`
 *      这类跟 DOM 形状绑死的选择器，只认类名，谁改结构都不会把这里改坏；
 *   3. 位置动画全部由 JS 逐帧写 transform，这里只给"长什么样"和"初始隐藏"。
 */

:root {
  --petphrase-recording: #C2643F;      /* 录音强调色，和卡片上的砖橘同源 */
  --petphrase-recording-soft: #F3E3D2;
  --petphrase-icon-size: 24px;         /* 声波收缩后的落地尺寸，和 record.js 的 LANDED_SCALE 对应 */
}

/* --------------------------------------------------------------------------
 * 按住才录的按钮
 * -------------------------------------------------------------------------- */

.petphrase-rec-btn {
  /* 长按录音最怕浏览器抢手势：选中文字、弹出放大镜、长按右键菜单都会把录音打断 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;                  /* 关掉滚动/双击缩放，按住才不会被系统吃掉 */
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.petphrase-rec-btn.recording {
  background: var(--petphrase-recording);
  color: #FDF8F1;
  /* 用外圈光晕代替改变尺寸：按钮一变大变小会让手指位置产生错觉 */
  box-shadow: 0 0 0 4px rgba(194, 100, 63, 0.22);
}

/* 减弱动态效果：连呼吸光晕也一起去掉，只留颜色反馈 */
@media (prefers-reduced-motion: reduce) {
  .petphrase-rec-btn.recording {
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
 * 声波画布与提示文字
 * -------------------------------------------------------------------------- */

.petphrase-wave {
  display: block;
  width: 100%;
  height: 64px;                        /* 高度固定，JS 读它来定像素尺寸（devicePixelRatio） */
  touch-action: none;
}

.petphrase-rec-hint,
.petphrase-rec-timer {
  font-variant-numeric: tabular-nums;  /* 计时数字等宽，跳动时不会左右抖 */
}

.petphrase-rec-hint {
  min-height: 1.4em;                   /* 文案换行时不要把下面的时间线顶下去 */
}

/* --------------------------------------------------------------------------
 * 飞行中的临时画布与落地的小方块
 * -------------------------------------------------------------------------- */

/* 飞行动画途中出现的临时画布：JS 已经写好 position/transform，
   这里只兜住"别挡住点击"和"别被父级裁剪"两件事 */
.petphrase-record-flight {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

/*
 * 声波落进时间线后的占位元素。
 * 它只是"这句话已经收进档案"的即时反馈，真正的内容由 app.js 之后替换。
 */
.record-landed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--petphrase-icon-size);
  height: var(--petphrase-icon-size);
  border-radius: 7px;
  background: var(--petphrase-recording-soft);
  color: var(--petphrase-recording);
  vertical-align: middle;
  flex: none;
  /* 落地后轻微"啪"一下，让人感觉东西真的放下了；
     不做位移，所以开了减弱动态效果时可以安全保留 */
  animation: petphrase-land 260ms ease-out;
}

.record-landed > svg,
.record-landed > img {
  display: block;
  width: 14px;
  height: 14px;
}

@keyframes petphrase-land {
  0% { transform: scale(1.25); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .record-landed {
    animation: none;                   /* 开了"减弱动态效果"就只做静态落位 */
  }
}

/* 时间线里每条记录前的图标位：给别的模块复用，别各写各的 */
.petphrase-timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--petphrase-icon-size);
  height: var(--petphrase-icon-size);
  border-radius: 7px;
  background: var(--petphrase-recording-soft);
  color: var(--petphrase-recording);
  flex: none;
}