/* EdgeFT · 输入区（<input-area>）：底部输入栏
   桌面：卡片内文档流末尾，发丝上缘。
   移动端：贴屏底玻璃条（fixed，z-index 高于消息流，内容从其下方穿过；
   键盘弹出由 lib/viewport.ts 补偿 bottom）。输入胶囊 iOS 化。 */

/* ---------- 桌面 ---------- */
.input-area {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border-top: 1px solid var(--ios-separator);
}
.input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-input);
  background: var(--ios-fill);
  border: 0.5px solid var(--ios-separator);
}
#chatInput {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-body);
  color: var(--text);
  outline: none;
  resize: none;
  max-height: 120px;
  padding: 8px 0;
}
#chatInput::placeholder {
  color: var(--ios-tertiary-label);
}
.input-area .icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--ios-fill);
  color: var(--ios-secondary-label);
}
/* @AI 快捷按钮：默认沿用 icon-btn 圆形灰底，标识用主色（可点击操作语义色）。
   开启后为"AI 模式"状态开关：主色填充 + 白色图标（明显的模式切换视觉） */
.input-area .ai-shortcut {
  color: var(--ios-blue);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.input-area .ai-shortcut.on {
  background: var(--ios-blue);
  color: #ffffff;
}
/* 语音遮罩：长按输入框后覆盖整个输入区（微信式录音界面）。
   蓝色渐变；上滑进入顶部取消区（60px）→ 整体变红"松开取消"；
   中部一排竖条：无声音=一行虚线（4px），有声音=随实时音量起伏的声波动效；底部计时。 */
.voice-overlay {
  position: absolute;
  inset: 0;
  z-index: 6; /* 高于输入区内部按钮/输入框 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.30), rgba(10, 132, 255, 0.92));
  transition: background var(--dur-fast) var(--ease-out);
}
.voice-overlay.cancel {
  background: linear-gradient(180deg, rgba(255, 59, 48, 0.38), rgba(255, 59, 48, 0.94));
}
.voice-overlay-cancel {
  width: 100%;
  height: 60px; /* 与 VOICE_CANCEL_PX=60 对应：上滑 60px 进入取消区 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: var(--font-aux);
  letter-spacing: 0.5px;
}
.voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 52px;
}
.voice-wave span {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff;
  transition: height 80ms linear;
}
.voice-overlay-tip {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--font-aux);
}
.voice-overlay-timer {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-bottom: 2px;
}
/* 语音模式期间锁定文本选择/长按菜单（录音手势接管） */
#chatInput.voice-lock {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.btn-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ios-blue);
  color: var(--text-on-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    filter var(--dur-fast) var(--ease-out);
}
.btn-send:active {
  transform: scale(0.95);
  filter: brightness(0.88);
}
.btn-send:disabled {
  background: var(--ios-fill);
  color: var(--ios-tertiary-label);
}

/* ---------- 移动端：贴底玻璃条 ---------- */
@media (max-width: 720px) {
  .input-area {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + var(--sab));
    z-index: 7;
    gap: var(--space-2);
    padding: 8px var(--space-3) 4px; /* 输入框贴输入区底、整体压矮（原 12px 12px 12px） */
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0.5px solid var(--ios-separator);
    /* 键盘弹出/收起时自己平滑上弹/回位（bottom 由 viewport.ts 控制） */
    transition: bottom 250ms var(--ease-spring);
  }
  /* 键盘弹起：输入区下方（键盘顶部安全区/间隙）填充白色，
     消除输入区与键盘之间突兀的灰色分隔条 */
  .keyboard-open .input-area::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: var(--panel);
    z-index: -1; /* 在输入区内容之下，仅填充下方区域 */
  }
  .btn-send {
    width: 40px;
    height: 40px;
    padding: 0;
  }
}