KakaoTalk聊天

/* ================= KakaoTalk 聊天气泡与正文美化 ================= */
kakaotalk {
  display: flex;
  flex-direction: column;
  background-color: #cde5fa; /* 经典 KakaoTalk 蓝灰色背景 */
  border-radius: 16px;
  margin: 10px 0;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
  overflow: hidden; /* 确保顶部黄色大框的圆角能完美贴合外框 */
  padding-bottom: 16px;
}

/* 顶部黄色大框 (显示姓名) */
k-header {
  display: block;
  background-color: #FEE500; /* Kakao 经典黄 */
  color: #3C1E1E; /* 深褐文字 */
  padding: 14px 16px;
  font-size: 15px;
  font-weight: bold;
  text-align: center; /* 居中显示姓名 */
  border-bottom: 1.5px solid rgba(60, 30, 30, 0.15);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* 顶部状态栏 */
k-status {
  display: inline-block;
  align-self: center;
  font-size: 11px;
  color: #556677;
  background-color: rgba(255, 255, 255, 0.45);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  font-weight: 500;
}

/* 聊天容器 (增加左右边距，防止内容贴边) */
k-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
}

/* 动态多气泡样式 */
bubble {
  display: inline-block;
  background-color: #FFFFFF;
  color: #191919;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  border-radius: 2px 14px 14px 14px;
  margin-right: auto;
  max-width: 85%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  word-break: break-all;
  position: relative;
  animation: bubblePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* 连续发送气泡时，后续气泡圆角微调 */
bubble ~ bubble {
  border-radius: 14px;
}

@keyframes bubblePop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 重点动作加粗渲染 (改为粉色字体，无底色高亮) */
bubble strong, bubble b {
  color: #FF69B4; /* 甜美粉色 */
  font-weight: bold;
  background: transparent !important; /* 彻底移除背景高亮 */
  padding: 0;
}

/* 旁白与环境动作字条 */
k-action {
  display: block;
  text-align: center;
  font-size: 11.5px;
  color: #FFFFFF;
  background-color: rgba(60, 102, 151, 0.652);
  padding: 6px 16px;
  border-radius: 18px;
  margin: 12px auto;
  max-width: 90%;
  line-height: 1.4;
  font-style: normal;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ================= KakaoTalk 平台输入框与按钮美化 ================= */
div[class*="input-container"], 
div[class*="footer"], 
.chat-input-wrapper {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E5E5E5 !important;
  padding: 10px 14px !important;
}

div[class*="input-container"] textarea, 
div[class*="footer"] textarea, 
.chat-input-wrapper textarea,
textarea[class*="chat-input"] {
  background-color: #F2F2F2 !important;
  border: 1.5px solid #E2E2E2 !important;
  border-radius: 18px !important;
  color: #3C1E1E !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  transition: all 0.25s ease !important;
}

div[class*="input-container"] textarea:focus, 
div[class*="footer"] textarea:focus,
textarea[class*="chat-input"]:focus {
  border-color: #3C1E1E !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 5px rgba(60, 30, 30, 0.1) !important;
}

div[class*="input-container"] button, 
div[class*="footer"] button, 
button[class*="send-btn"],
.send-button {
  background-color: #FEE500 !important;
  color: #3C1E1E !important;
  font-weight: bold !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 6px 16px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

div[class*="input-container"] button:active, 
button[class*="send-btn"]:active {
  background-color: #FADA0A !important;
  transform: scale(0.95) !important;
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。