JoyD/Claw/client/wechat_app/custom-tab-bar/index.wxss

/**
 * 自定义底部导航栏 - 公众号客服交互模式
 *
 * 两种状态：
 *   状态1（普通）：[首页] [设备] [任务] [⌨]
 *   状态2（聊天）：[☰] [🔊/⌨] [输入框........] [🎤] [😀] [+]
 *
 * 统一配色方案：
 *   主题色：#1677FF（蓝），用于高亮、选中态、交互反馈
 *   背景：#FFFFFF（白）/ #1A1A1A（深黑）
 *   边框：#E8E8E8（浅灰）/ #2E2E2E（深灰）
 *   文字：#333333（深灰）/ #999999（灰）/ #E8E8E8（浅白）
 */

/* ============================================================
   一、设计令牌（统一颜色变量）
   ============================================================ */

/* 状态1（普通模式）*/
.tab-bar {
  /* 背景与边框 */
  --bg-primary: #ffffff;
  --border-primary: #e8e8e8;
  /* Tab 文字 */
  --tab-inactive: #999999;
  --tab-active: #333333;
  /* 键盘按钮 */
  --kb-border: #bbbbbb;
  --kb-icon: #666666;
  --kb-border-left: #f0f0f0;
  /* 聊天模式工具按钮（浅色背景用深色图标） */
  --tool-bg: #f5f5f5;
  --tool-icon: #555555;
}

/* 聊天模式下：导航栏保持白色不变，工具按钮区用浅灰底色区分 */
.tab-bar.chat-mode {
  /* 背景与边框 — 导航栏保持白色，与整体布局统一 */
  --bg-primary: #ffffff;
  --border-primary: #e8e8e8;
  /* Tab 文字 */
  --tab-inactive: #999999;
  --tab-active: #333333;
  /* 键盘按钮 */
  --kb-border: #bbbbbb;
  --kb-icon: #666666;
  --kb-border-left: #f0f0f0;
  /* 聊天工具按钮 — 浅灰底色，与白色导航栏融合但不突兀 */
  --tool-bg: #f0f0f0;
  --tool-icon: #555555;
}

/* 全局统一色值 */
page {
  /* 主题蓝（唯一品牌色） */
  --brand-blue: #1677FF;
  --brand-blue-dark: #0958D9;
  --brand-blue-light: #73ADFF;
  --brand-blue-glow: rgba(22, 119, 255, 0.8);
  /* 深色面板 */
  --bg-dark: #0d0d0d;
  --bg-dark-2: #1e1e1e;
  --bg-dark-3: #2e2e2e;
  /* 文字（深色模式） */
  --text-dark: #e8e8e8;
  --text-dark-secondary: #cccccc;
  --text-dark-muted: #888888;
}

/* ============================================================
   二、底部导航栏容器（固定在底部）
   ============================================================ */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background-color: var(--bg-primary);
  border-top: 1rpx solid var(--border-primary);
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99999;
}

/* 聊天模式下切换为深色背景 */
.tab-bar.chat-mode {
  background-color: var(--bg-primary);
  border-top: 1rpx solid var(--border-primary);
}


/* ============================================================
   二、状态1：普通导航模式
   ============================================================ */

/* ---- Tab菜单项（3个平分剩余空间）---- */
.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tab-item:active {
  opacity: 0.6;
}

.tab-text {
  font-size: 28rpx;
  color: var(--tab-inactive);
  line-height: 1.2;
}

.tab-item.active .tab-text {
  color: var(--tab-active);
  font-weight: 500;
}

/* ---- 右侧键盘按钮（固定窄宽度）---- */
.keyboard-btn {
  width: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-left: 1rpx solid var(--kb-border-left);
  cursor: pointer;
  position: relative;
}

.keyboard-btn:active {
  opacity: 0.5;
  background-color: var(--border-primary);
}

.kb-circle {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  border: 2rpx solid var(--kb-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-icon {
  font-size: 26rpx;
  color: var(--kb-icon);
}


/* ============================================================
   三、状态2：聊天输入模式
   ============================================================ */

/* ---- 工具按钮（通用：菜单/语音/表情/更多等）---- */
.chat-tool-btn {
  flex-shrink: 0;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 浅灰底色，融入白色导航栏 */
  border-radius: 12rpx;
}

.chat-tool-btn:active {
  opacity: 0.6;
  background-color: rgba(0,0,0,0.08) !important;
}

.tool-icon {
  font-size: 40rpx;
  line-height: 1;
  color: var(--tool-icon);
}

.send-area .tool-icon {
  font-size: 36rpx;
  color: var(--tool-icon);
}

.send-area.disabled {
  opacity: 0.25;
}

/* ---- 🎤 语音转文字激活状态（高亮）---- */
.send-icon {
  transition: all 0.2s ease;
  display: inline-block;
}

.send-icon-active {
  animation: voice-pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--brand-blue-glow));
}

@keyframes voice-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px var(--brand-blue-glow));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 14px var(--brand-blue));
  }
}

/* 🎤激活时按钮高亮（浅色背景下的蓝色边框） */
.voice-active {
  background: rgba(22, 119, 255, 0.1) !important;
  border: 1.5px solid rgba(22, 119, 255, 0.6) !important;
  border-radius: 12rpx !important;
  box-shadow: 0 0 10px rgba(22, 119, 255, 0.25) !important;
}

/* ---- 发送按钮（替换+号） ---- */
.send-action-btn {
  background: #1677FF !important;
  border-radius: 16rpx !important;
  width: 96rpx !important;
  box-shadow: 0 4rpx 14rpx rgba(22, 119, 255, 0.3);
}

.send-action-btn:active {
  opacity: 0.85;
  transform: scale(0.95);
}

.send-icon-img {
  width: 42rpx;
  height: 42rpx;
  display: block;
}

.send-arrow-icon {
  font-size: 38rpx;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

.send-label {
  font-size: 26rpx;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2rpx;
}

/* ---- 输入框 ---- */
.chat-input {
  flex: 1;
  height: 68rpx;
  min-width: 0;
  background-color: #f0f0f0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333333;
  margin: 0 4rpx;
}

.placeholder-style {
  color: #999999;
  font-size: 28rpx;
}

/* ---- 语音录制按钮 ---- */
.voice-btn {
  flex: 1;
  height: 68rpx;
  min-width: 0;
  border-radius: 12rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 4rpx;
  transition: all 0.15s ease;
}

.voice-btn:active,
.voice-btn.recording {
  background-color: var(--brand-blue);
  box-shadow: 0 2rpx 16rpx rgba(22, 119, 255, 0.35);
}

.voice-text {
  font-size: 28rpx;
  color: #666666;
  letter-spacing: 2rpx;
}

.voice-btn.recording .voice-text {
  color: #ffffff;
}

/* 录音波纹动画 */
.record-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(22, 119, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: waveExpand 1.5s ease-out infinite;
}

.wave2 { animation-delay: 0.5s; }
.wave3 { animation-delay: 1s; }

@keyframes waveExpand {
  from { width: 60rpx; height: 60rpx; opacity: 1; border-width: 4rpx; }
  to { width: 200rpx; height: 200rpx; opacity: 0; border-width: 1rpx; }
}


/* ============================================================
   四、聊天消息面板（覆盖在页面内容上方）
   ============================================================ */

.chat-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(100rpx + env(safe-area-inset-bottom));
  top: 0;
  z-index: 99998;
  display: flex;
  flex-direction: column;
}

/* 消息列表 */
.chat-msg-list {
  flex: 1;
  background-color: var(--bg-dark);
  padding: 24rpx;
  overflow-y: auto;
}

.msg-bottom-pad {
  height: 20rpx;
  flex-shrink: 0;
}

/* ---- 单行消息 ---- */
.msg-row {
  display: flex;
  margin-bottom: 24rpx;
  align-items: flex-start;
}

.msg-user {
  flex-direction: row-reverse;
}

/* 头像 */
.msg-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: bold;
  flex-shrink: 0;
  margin: 0 10rpx;
}

.bot-avatar {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
}

.user-avatar {
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
  color: #fff;
}

/* 消息气泡 */
.msg-bubble {
  max-width: 65%;
  padding: 18rpx 22rpx;
  border-radius: 18rpx;
  word-break: break-all;
}

.bot-bubble {
  background-color: var(--bg-dark-2);
  border: 2rpx solid rgba(255,255,255,0.06);
  border-radius: 4rpx 18rpx 18rpx 18rpx;
}

.user-bubble {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  border-radius: 18rpx 4rpx 18rpx 18rpx;
  box-shadow: 0 4rpx 14rpx rgba(22, 119, 255, 0.22);
}

.msg-text {
  font-size: 27rpx;
  line-height: 1.5;
  word-break: break-all;
}

.bot-bubble .msg-text { color: var(--text-dark); }
.user-bubble .msg-text { color: #ffffff; }


/* ============================================================
   五、语音播放中提示
   ============================================================ */

.voice-playing-toast {
  position: fixed;
  top: 160rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0.85);
  border-radius: 20rpx;
  padding: 22rpx 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  z-index: 20000;
  backdrop-filter: blur(10rpx);
}

.playing-wave {
  display: flex;
  align-items: center;
  gap: 4rpx;
  height: 38rpx;
}

.p-bar {
  width: 6rpx;
  background-color: var(--brand-blue);
  border-radius: 3rpx;
  animation: barBounce 0.6s ease-in-out infinite alternate;
}
.p1{height:16rpx;animation-delay:0s} .p2{height:28rpx;animation-delay:.1s}
.p3{height:38rpx;animation-delay:.2s} .p4{height:26rpx;animation-delay:.3s}
.p5{height:18rpx;animation-delay:.4s}

@keyframes barBounce {
  from{transform:scaleY(.4)} to{transform:scaleY(1)}
}

.playing-text {
  font-size: 22rpx;
  color: var(--text-dark-secondary);
}