/* ========================================================
   Mobile UI & Message Bubble Display Optimization for Rakazo
   ======================================================== */

/* 1. 修复消息气泡容器宽度：在移动端/窄屏展开至 94%，不再被死卡在极窄宽度 */
[data-testid="message-bubble-frame"] {
  max-width: min(94%, calc(100% - 1.25rem)) !important;
  width: fit-content;
}

@media (min-width: 768px) {
  [data-testid="message-bubble-frame"] {
    max-width: min(82%, calc(100% - 4rem)) !important;
  }
}

/* 2. 优化 Bot 消息气泡卡片：圆角、内边距与字体阶梯 */
[data-testid="message-bot-bubble"] {
  padding: 14px 18px !important;
  line-height: 1.65 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* 3. 增强 Markdown 排版与列表悬挂缩进 */
.rk-chat-markdown {
  line-height: 1.68 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.rk-chat-markdown ul,
.rk-chat-markdown ol {
  padding-left: 1.25em !important;
  margin: 0.5em 0 !important;
}

.rk-chat-markdown li {
  margin-top: 0.35em !important;
  margin-bottom: 0.35em !important;
  line-height: 1.6 !important;
}

.rk-chat-markdown li > p {
  margin: 0.15em 0 !important;
}

/* 4. 标题与段落层级与间距 */
.rk-chat-markdown h1,
.rk-chat-markdown h2,
.rk-chat-markdown h3,
.rk-chat-markdown h4 {
  margin: 0.85em 0 0.4em 0 !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

.rk-chat-markdown h1 { font-size: 1.3em !important; }
.rk-chat-markdown h2 { font-size: 1.18em !important; }
.rk-chat-markdown h3 { font-size: 1.08em !important; }

/* 5. 表格移动端自适应滚动与高对比度边框 */
.rk-chat-markdown table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0.75em 0 !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
}

.rk-chat-markdown th,
.rk-chat-markdown td {
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
}

.rk-chat-markdown th {
  background: var(--muted) !important;
  font-weight: 600 !important;
}

/* 6. 行内代码与代码块 */
.rk-chat-markdown code {
  font-size: 0.88em !important;
  padding: 0.15em 0.35em !important;
  border-radius: 4px !important;
}

.rk-chat-markdown pre {
  margin: 0.6em 0 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}