@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.recording-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: red;
    animation: pulse 1s infinite;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #4a86e8;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

    .copy-btn:hover {
        background: #e1e8ff;
    }

/*语音识别Recognizer 语音识别*/
.speech-wave {
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    width: 80px;
}

.voice-btn.active {
    background-color: #dc3545;
    color: white;
}
/* 聊天工具栏样式 */
.cancel-btn.hidden {
    display: none;
}

.cancel-btn.visible {
    display: flex;
}

.chat-toolbar {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* 输入组样式 - 集成所有元素 */
.input-group {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 24px;
    padding: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.3s ease;
    flex-wrap: nowrap; /* 防止元素换行 */
    margin-bottom: 0;
}


    .input-group:focus-within {
        box-shadow: 0 3px 8px rgba(0, 123, 255, 0.15);
    }

    .input-group input {
        flex: 1;
        border: none;
        background-color: transparent;
        padding: 8px 12px;
        font-size: 15px;
        outline: none;
        color: #495057;
    }

        .input-group input::placeholder {
            color: #adb5bd;
        }

/* 语音按钮样式优化 */
.voice-btn {
    border-radius: 50%;
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

    .voice-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .voice-btn.active {
        background-color: #dc3545;
        color: white;
    }

/* 发送按钮样式优化 */
.send-btn, .cancel-btn {
    border-radius: 50%;
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

    .send-btn:hover {
        background-color: #0069d9;
        transform: scale(1.05);
    }

    .cancel-btn:hover {
        background-color: #d43900;
        transform: scale(1.05);
    }

/* 语音识别容器改进 */
.voice-recognition-container {
    display: flex;
    width: 100%;
    background-color: #f8f9fa;
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

    .voice-recognition-container .voice-btn {
        margin-right: 8px;
    }

.recognition-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.speech-wave {
    width: 100%;
    height: 30px;
    margin: 5px 0;
}

.recognition-hint {
    color: #555;
    font-style: italic;
    font-size: 14px;
    text-align: left;
    width: 100%;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 基础布局样式 */
.ai-content-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
}

/* 预览容器样式 */
.preview-container {
    flex: 1;
    overflow: hidden;
    padding: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 确保在您的CSS文件中添加这些样式 */
.messages-container {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 10px;
    padding-bottom: 0 !important; /* 移除底部内边距 */
    margin-bottom: 0 !important; /* 移除底部外边距 */
}

.messages-container {
    flex: 1;
    overflow-y: auto !important; /* 强制启用垂直滚动 */
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 10px;
    max-height: calc(100vh - 140px); /* 适应屏幕高度减去头部和输入区域 */
}

    .messages-container::-webkit-scrollbar {
        width: 6px;
    }

    .messages-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .messages-container::-webkit-scrollbar-thumb {
        background: #d1d1d1;
        border-radius: 3px;
    }

/* 聊天消息样式 */
.chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}
    /* 确保最后一条消息没有底部间距 */
    .chat-message:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .chat-message.user {
        justify-content: flex-end;
    }

    .chat-message.assistant {
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
        gap: 5px;
    }

    /* 头像样式 */
    .chat-message .avatar {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #6c757d;
        color: white;
        margin: 0 5px 5px 5px;
        font-size: 14px;
        font-weight: bold;
        position: relative;
        gap: 5px;
    }

    .chat-message.assistant .avatar {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        height: 30px;
        background-color: transparent;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 0px;
    }

        .chat-message.assistant .avatar i {
            display: flex;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            background-color: steelblue;
        }

    .chat-message.user .avatar {
        display: none;
    }

    .chat-message .assistant-name {
        margin-left: 3px;
        font-size: 14px;
        color: #6c757d;
        font-weight: bold;
        align-self: center;
    }

    /* 气泡样式 */
    .chat-message .bubble {
        border-radius: 10px;
        font-size: 14px;
    }

    /* 用户消息气泡样式 */
    .chat-message.user .bubble {
        background-color: #e3f2fd;
        color: #0d47a1;
        border: none;
        padding: 10px 15px;
        display: inline-block;
        margin: 0; /* 移除默认边距 */
        min-height: 20px;
        word-break: break-word;
        font-weight: bold;
        border-radius: 18px 18px 0 18px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

        .chat-message.user .bubble > p:only-child {
            margin: 0;
            padding: 0;
            font-weight: inherit;
        }

    /* AI 消息气泡样式 */
    .chat-message.assistant .bubble {
        position: relative; /* 新增，作为绝对定位按钮的参照 */
        background-color: white;
        color: #333333;
        border: 1px solid #e0e0e0;
        margin: 0 0 10px 0;
        align-self: flex-start;
        padding: 10px 38px 10px 15px; /* 右侧增加空间，原为10px 15px */
        border-radius: 18px 18px 18px 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        max-width: 100%;
    }

        .chat-message.assistant .bubble p {
            padding: 0;
            margin: 0 0 10px 0;
        }

            .chat-message.assistant .bubble p:last-child {
                margin-bottom: 0;
            }

/* 思考中动画样式 */
.thinking-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    color: #6c757d;
}

.thinking-text {
    font-style: italic;
    margin-right: 5px;
}

.thinking-dots {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
}

/* 聊天输入区域样式 */
.chat-input-area {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    z-index: 10;
    margin-top: 0 !important; /* 移除上边距 */
    padding-top: 5px;
}

/* 移动设备优化 */
@media (max-width: 768px) {
    .chat-container {
        min-height: 400px;
        padding-bottom: 0;
    }

    .messages-container {
        padding-bottom: 45px;
    }

    .chat-input-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
    }

    .input-group {
        padding: 2px;
    }

        .input-group input {
            padding: 6px 10px;
        }

    .voice-btn, .send-btn, .cancel-btn {
        min-width: 34px;
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
}
/*这是语音波形*/
.recording-indicator {
    display: flex;
    align-items: center;
}

.recording-wave {
    display: flex;
    align-items: flex-end;
    height: 20px;
}

    .recording-wave span {
        display: inline-block;
        width: 3px;
        height: 5px;
        margin: 0 2px;
        background-color: #dc3545;
        border-radius: 1px;
        animation: wave 1s ease-in-out infinite;
    }

        .recording-wave span:nth-child(2) {
            animation-delay: 0.1s;
        }

        .recording-wave span:nth-child(3) {
            animation-delay: 0.2s;
        }

        .recording-wave span:nth-child(4) {
            animation-delay: 0.3s;
        }

        .recording-wave span:nth-child(5) {
            animation-delay: 0.4s;
        }

@keyframes wave {
    0% {
        height: 5px;
    }

    50% {
        height: 15px;
    }

    100% {
        height: 5px;
    }
}



/* 文件信息样式 */
.file-info {
    display: flex; /* 添加flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    background-color: #e3f2fd;
    font-size: 14px;
    color: #0d47a1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    gap: 5px; /* 现在gap属性会生效 */
    padding: 5px 0; /* 添加一些内边距 */
}

/* 文件提取进度样式 */
.extraction-progress {
    margin-bottom: 10px;
}

    .extraction-progress .progress {
        height: 10px;
        border-radius: 5px;
        margin-bottom: 5px;
        background-color: #e9ecef;
    }

    .extraction-progress .progress-bar {
        background-color: #007bff;
        border-radius: 5px;
    }

    .extraction-progress small {
        font-size: 12px;
        color: #6c757d;
    }

/* iframe 相关样式 */
.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin: 0;
    padding: 0px;
}

.iframe-container {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0 auto;
    padding: 10px 0 0 0;
    display: block;
    transform-origin: center top;
    overflow: auto;
}

/* 点动画 */
@keyframes blink {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.thinking-dots .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-radius: 50%;
    background-color: #6c757d;
    animation: blink 1.4s infinite both;
}

    .thinking-dots .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .thinking-dots .dot:nth-child(3) {
        animation-delay: 0.4s;
    }
.blessing-container {
    padding: 10px;
}

.blessing-inner {
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 10px;
    position: relative;
    overflow: hidden;
    border-left: 4px solid #4a86e8;
}

.blessing-icon {
    font-size: 16px;
    color: #4a86e8;
    opacity: 0.6;
    margin-bottom: 10px;
}

.loading-container {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666;
    padding: 20px 0;
}

.loading-indicator {
    margin-right: 5px;
    font-size: 18px;
    color: red;
    font-weight: bold;
}

.blessing-message-container {
    position: relative;
}

.blessing-message {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    transition: opacity 0.3s;
}

    .blessing-message.animating {
        border-right: 2px solid #4a86e8;
        animation: cursor-blink 0.8s infinite;
    }

    .blessing-message p {
        margin-bottom: 10px;
    }

.blessing-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.refresh-button {
    background-color: #f0f4ff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: #4a86e8;
    cursor: pointer;
    transition: all 0.3s;
}

    .refresh-button:hover {
        background-color: #e1e8ff;
    }

    .refresh-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/*kejian
*/
.recording-indicator-dot { /* 确保这是统一的指示灯类名 */
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: white; /* 确保点名按钮的指示灯也是红色 */
    border-radius: 50%;
    animation: blink 1s infinite;
    margin-left: 4px;
}

.recording-indicator-dot1 { /* 确保这是统一的指示灯类名 */
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: red; /* 确保点名按钮的指示灯也是红色 */
    border-radius: 50%;
    animation: blink 1s infinite;
    margin-left: 4px;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

.log-evaluation-good {
    color: green;
}

.log-evaluation-medium {
    color: orange;
}

.log-evaluation-bad {
    color: red;
}

.kejian-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 5px; /* 调整页脚内边距 */
}

    .kejian-footer .btn-custom.footer-btn,
    .kejian-footer .btn-group .btn-custom.footer-btn {
        flex: 1 1 0px; /* flex-grow, flex-shrink, flex-basis (0px 允许按钮根据内容和可用空间调整) */
        margin: 0 3px; /* 按钮之间的更小间距 */
        padding: 6px 10px; /* 调整内边距 */
        font-size: 0.8rem; /* 略微减小字体以适应更多内容 */
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 对溢出文本显示省略号 */
        display: inline-flex; /* 确保图标和文本在同一行并可对齐 */
        align-items: center; /* 垂直居中图标和文本 */
        justify-content: center; /* 水平居中内容 */
    }
    /* 确保 .kejian-footer .btn-custom.footer-btn 的样式与新的 flex 布局兼容 */
    .kejian-footer .btn-custom.footer-btn {
        /* flex: 1 1 0px; */ /* 您原有的flex属性，根据需要保留或调整 */
        /* margin: 0 3px; */
        /* padding: 6px 10px; */ /* 内边距可能需要调整以适应新的内部布局 */
        /* white-space: nowrap; */
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        /* display: inline-flex; */ /* 如果改为 flex column，这个可能需要调整 */
        /* align-items: center; */
        /* justify-content: center; */
    }
    .kejian-footer .btn-group {
        display: flex;
        flex: 3 1 0px; /* 让按钮组占据大约3个单位的空间 */
        justify-content: space-around;
    }

    /* 确保 .kejian-footer .btn-custom .fa 的全局边距不影响新布局 */
    .kejian-footer .btn-custom .fa {
        margin-right: 0; /* 重置或移除，因为 .icon-indicator-container 内的图标边距已处理 */
    }
/* 确保按钮内的文本span正常显示 */
.kejian-action-btn span {
    display: block; /* 确保文本在图标容器下方 */
    font-size: 0.8rem; /* 保持或调整文字大小 */
    line-height: 1.2; /* 调整行高以优化间距 */
}

.btn-primary {
    background-color: #4285f4;
    color: white;
    border-color: #4285f4;
}

.btn-danger {
    background-color: #ea4335;
    color: white;
    border-color: #ea4335;
}

/* 新增：为“好”按钮（btn-success）定义样式 */
.btn-success {
    background-color: #34a853; /* 绿色 */
    color: white;
    border-color: #34a853;
}
.btn-suijioryuyin {
    background-color:royalblue; /* 绿色 */
    color: white;
    border-color: #34a853;
}
/* 新增：为“中”按钮（btn-warning）定义样式 */
.btn-warning {
    background-color: #fbbc05; /* 黄色 */
    color: white; /* 深灰色文字，确保对比度 */
    border-color: #fbbc05;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    background-color: #3367d6;
}

.btn-danger:hover {
    background-color: #d23226;
}

/* 新增：为“好”按钮（btn-success）定义鼠标悬停样式 */
.btn-success:hover {
    background-color: #2c8f46;
}

/* 新增：为“中”按钮（btn-warning）定义鼠标悬停样式 */
.btn-warning:hover {
    background-color: #e0a800;
}

/* 新增：特定于课堂实录页面中带图标和指示灯的按钮 */
.kejian-action-btn {
    display: flex; /* 改为 flex 布局 */
    flex-direction: column; /* 使图标容器和文本垂直排列 */
    align-items: center; /* 水平居中内容 */
    justify-content: center; /* 垂直居中内容（如果按钮有固定高度且内容较少） */
    text-align: center; /* 确保文本也居中 */
}
/* 新增：特定于课堂实录页面中带图标和指示灯的按钮 */
.kejian-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* 修改：修正 .icon-indicator-container 的 display 属性 */
.icon-indicator-container {
    display: inline-flex; /* 正确的 display 属性 */
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    position: relative;
}

    .icon-indicator-container .fa {
        margin-right: 0;
        font-size: 1.2em;
    }
/* 当堂小结条目样式 */
.log-event-summary {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    color: #333333; /* 为普通文本设置一个清晰的颜色 */
    font-size: 1.1em; /* 明确字体大小，您可以根据需要调整 */
    line-height: 1.2; /* 增加行高，尝试 1.8 或更大值，直到不再重叠 */
    /* word-break: break-word; */ /* 如果需要处理长单词换行，可以取消注释 */
}

    .log-event-summary strong {
        color: #2a52be;
        margin-bottom: 5px; /* 标题和下方内容之间的间距 */
        line-height: 1.6; /* 标题本身也可以有自己的行高，如果需要的话 */
    }

    /* 
      这个规则 (.log-event-summary br + strong) 的目的是
      如果 "当堂小结" 标题后紧跟一个 <br> 然后又是一个 <strong>,
      避免那个 <strong> 的颜色被错误地重置。
      一般情况下，AI生成的小结内容在 <br> 之后不会立即是 <strong>。
    */
    .log-event-summary br + strong {
        color: inherit; /* 让其继承 .log-event-summary 的文本颜色 */
    }
.kejian-main-content-wrapper {
    display: flex;
    flex-direction: row; /* Default: children are in a row */
    gap: 1rem;
    flex-grow: 1; /* Takes available vertical space from .kejian-container */
    overflow: hidden; /* Children handle their own overflow */
    /* align-items: stretch; is the default, making children full height in row mode */
}

.kejian-input-area {
    flex: 1; /* Default: takes 50% width in row, allows growth/shrinkage */
    display: flex;
    flex-direction: column;
    min-width: 250px; /* Minimum width */
    overflow-y: auto; /* Scroll if content overflows */
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fff;
}

    .kejian-input-area .form-control {
        flex-grow: 1; /* Textarea fills the input area */
        resize: vertical;
        min-height: 100px; /* Minimum height for the textarea */
        border: none;
        padding: 0;
    }

.kejian-log-display-area {
    flex: 1; /* Default: takes 50% width in row, allows growth/shrinkage. Stretches to parent height. */
    min-width: 250px; /* Minimum width */
    overflow-y: auto; /* Allows log content to scroll */
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fff;
    display: flex; /* For its internal children (log entries) */
    flex-direction: column; /* Log entries stack vertically */
}

    .kejian-log-display-area .log-entry {
        margin-bottom: 0.5rem;
        word-break: break-word;
    }

    .kejian-log-display-area p {
        margin-top: 20px;
        color: #888;
        text-align: center;
    }

/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .kejian-main-content-wrapper {
        flex-direction: column; /* Stack children vertically */
        overflow: visible; /* Allow content to determine height if needed, or set to auto */
    }

    .kejian-input-area {
        flex-grow: 0; /* Input area does not grow, respects its content/min-height */
        flex-shrink: 0; /* Input area does not shrink beyond its content/min-height easily */
        flex-basis: auto; /* Height based on content */
        min-height: 100%; /* Specific min-height for small screens */
        width: 100%; /* Takes full width in column layout */
        margin-bottom: 1rem; /* Space below input area when stacked */
    }

    .kejian-log-display-area {
        flex-grow: 1; /* Log area grows to fill remaining vertical space */
        flex-shrink: 1; /* Log area can shrink if space is very limited */
        flex-basis: 0; /* Start from a basis of 0 and grow */
        width: 100%; /* Takes full width in column layout */
        min-height: 100%; /* Ensure a minimum visible area for logs */
        /* overflow-y: auto; is already in the base style and is crucial here */
    }
}