/* =========================
   🧠 整体聊天容器
========================= */
.tuina-chat {
    display: flex;
    flex-direction: column;
    height:70vh;
    background:#f6fbf8;
    overflow: hidden;
}

/* =========================
   💬 消息区域（核心滚动区）
========================= */
.tuina-messages {
    flex: 1;
    overflow-y: auto;
    padding:0.6rem;
    scroll-behavior: smooth;
}

/* =========================
   ⌨️ 输入区域（底部固定）
========================= */
.tuina-input-bar {
    display: flex;
    gap:0.7rem;
    padding-top:0.5rem;
    background:white;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* 输入框 */
.tuina-input {
    flex: 1;
    resize: none;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
}

/* 发送按钮 */
.tuina-send {
    background: #2d8cf0;
    color: #fff;
    border: none;
    padding: 0 0.7rem;
    border-radius:0.3rem;
    cursor: pointer;
    font-size:0.8rem;
}

.tuina-send:hover {
    background: #1f6fd6;
}

/* =========================
   💬 消息基础样式
========================= */
.msg {
    max-width: 75%;
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    position: relative;
    word-break: break-word;
    line-height: 1.5;
}

/* 用户消息（右侧蓝） */
.msg.user {
    margin-left: auto;
    background:#dfffec;
    color:black;
    border-bottom-right-radius:0.3rem;
}

/* AI消息（左侧灰） */
.msg.ai {
    margin-right: auto;
    background: #ffffff;
    border: 1px solid #eee;
    border-bottom-left-radius: 4px;
}

/* 系统提示 */
.msg.system {
    margin: 10px auto;
    background: #fffbe6;
    color: #8a6d3b;
    text-align: center;
    font-size: 12px;
    max-width: 60%;
}

/* =========================
   🧠 消息头（角色 + 时间）
========================= */
.msg-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}

.msg-role {
    font-weight: bold;
}

.msg-time {
    font-size: 11px;
}

/* =========================
   🧾 内容区
========================= */
.msg-text {
    font-size:0.8rem;
}

/* =========================
   🧠 医疗卡片（AI结构化结果）
========================= */
.ai-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius:0.5rem;
    padding:0.5rem;
    margin-top:0.7rem;
}

.ai-title {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom:0.4rem;
    color: #222;
}

.ai-content {
    font-size:0.7rem;
    color: #555;
    margin-bottom:0.8rem;
    line-height: 1.5;
}
.ai-content blockquote{
    font-size:0.7rem;
}
.ai-content blockquote h4{
    font-size: 0.8rem;
}
    /* =========================
       🧠 TCM结构区
    ========================= */
.ai-tcm {
    background: #f7f9fb;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    color: #333;
    margin-top: 6px;
}

.tcm-title {
    font-weight: bold;
    margin-top: 6px;
}

.tcm-item {
    margin-left: 8px;
    margin-top: 2px;
}

/* =========================
   📖 操作按钮
========================= */
.ai-actions {
    margin-top:1rem;
    display: flex;
    gap:0.5rem;
    align-items: center;
    justify-content: center;
}

.ai-btn-view {
    background: #fff;
    border: 1px solid #124934;
    color: #124934;
    padding: 4px 8px;
    border-radius: 6px;
    font-size:0.7rem;
    cursor: pointer;
}

.ai-btn-view:hover {
    background: #2d8cf0;
    color: #fff;
}

/* =========================
   📖 文章链接按钮
========================= */
.ai-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #2d8cf0;
    text-decoration: none;
}

/* =========================
   📱 移动端适配
========================= */
@media (max-width: 768px) {

    .tuina-chat {
        height:60vh;
    }

    .msg {
        max-width: 90%;
    }

    .tuina-input-bar {
        padding: 8px;
    }

    .tuina-send {
        padding: 0 10px;
    }
}