/**
 * TalkingAgent - 对话组件样式
 * 紧凑叠加布局：输入框叠加在圆环下部
 */

/* 主容器 */
.talking-agent {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif);
}

/* 内容区域（消息和 AgentCircle 的叠加容器） */
.talking-agent-content {
    position: relative;
    width: 100%;
    min-height: 160px; /* 进一步减小高度，使布局更紧凑 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

/* AgentCircle 容器 - 绝对定位，在底层，纵向居中 */
.talking-agent-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
}

/* AgentCircle Canvas 样式 */
.talking-agent-circle canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 消息显示区域 - 绝对定位，在上层，紧贴圆环中心 */
.talking-agent-messages {
    position: absolute;
    top: calc(50% - 15px); /* 向下偏移，更靠近输入框 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 12px; /* 进一步减小内边距 */
    min-height: 30px;
    max-height: 60px;
    background-color: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    scrollbar-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-align: center;
    pointer-events: auto;
}

/* 移除消息背景效果 - 完全透明 */
.talking-agent-messages::before {
    display: none; /* 移除背景效果 */
}

/* 消息显示区域 - Webkit 滚动条样式 */
.talking-agent-messages::-webkit-scrollbar {
    display: none;
}

/* 单条消息 */
.talking-agent-message {
    padding: 3px 15px; /* 减小内边距 */
    word-wrap: break-word;
    line-height: var(--line-height-base, 1.6);
    color: var(--text-color, rgba(255, 255, 255, 0.65));
    font-size: var(--font-size-small, 0.75rem);
    font-weight: var(--font-weight-normal, 400);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif);
    text-align: center;
    width: 100%;
    letter-spacing: var(--letter-spacing-base, 0.5px);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 3;
}

/* 用户消息样式（不显示） */
.talking-agent-message-user {
    display: none;
}

/* Agent 消息样式 */
.talking-agent-message-agent {
    text-align: center;
    color: var(--text-color, rgba(255, 255, 255, 0.65));
}

/* 默认消息样式 */
.talking-agent-message-default {
    color: var(--text-hover, rgba(255, 255, 255, 0.85));
}

/* 输入区域容器 - 绝对定位，紧贴圆环下部 */
.talking-agent-input {
    position: absolute;
    bottom: -5px; /* 大幅向上调整，紧贴圆环 */
    left: 50%;
    transform: translateX(-50%);
    padding: 0 12px; /* 减小左右内边距 */
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
}

/* 输入框 - 透明背景，无边框，仅保留底部边线 */
.talking-agent-input-field {
    width: 100%;
    padding: 8px 12px; /* 减小内边距 */
    font-size: var(--font-size-small, 0.75rem);
    font-weight: var(--font-weight-normal, 400);
    background-color: transparent; /* 透明背景 */
    border: none; /* 移除所有边框 */
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)); /* 仅保留底部边线 */
    border-radius: 0; /* 移除圆角 */
    color: rgba(255, 255, 255, 0.9);
    outline: none;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif);
    text-align: center;
    transition: border-bottom-color 0.3s ease;
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-base, 0.5px);
    box-sizing: border-box;
    /* 移除模糊效果和阴影 */
}

/* 输入框 focus 状态 - 仅增强底部边线 */
.talking-agent-input-field:focus {
    background-color: transparent; /* 保持透明 */
    border-bottom: 2px solid var(--text-hover, rgba(255, 255, 255, 0.6)); /* 加强底部边线 */
    font-weight: var(--font-weight-medium, 500);
    /* 移除阴影效果 */
}

/* 输入框占位文字 */
.talking-agent-input-field::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif);
}

/* 输入框 autofill 样式 - 透明背景 */
.talking-agent-input-field:-webkit-autofill,
.talking-agent-input-field:-webkit-autofill:hover,
.talking-agent-input-field:-webkit-autofill:focus {
    background-color: transparent !important; /* 强制透明背景 */
    -webkit-box-shadow: none; /* 移除阴影 */
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .talking-agent-content {
        min-height: 140px; /* 进一步减小移动端高度 */
    }

    .talking-agent-messages {
        top: calc(50% - 12px); /* 移动端进一步向下偏移 */
        min-height: 25px;
        max-height: 50px;
        padding: 3px 10px; /* 进一步减小内边距 */
        font-size: 11px;
    }

    .talking-agent-message {
        font-size: 11px;
        padding: 2px 8px; /* 减小内边距 */
    }

    .talking-agent-input {
        bottom: -3px; /* 移动端也紧贴圆环 */
        padding: 0 10px; /* 减小左右内边距 */
    }

    .talking-agent-input-field {
        font-size: 11px;
        padding: 5px 8px; /* 减小内边距 */
        /* 保持透明背景和底部边线 */
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
    }

    .talking-agent-circle {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
    .talking-agent-content {
        min-height: 120px; /* 进一步减小小屏幕高度 */
    }

    .talking-agent-messages {
        top: calc(50% - 10px); /* 小屏幕进一步向下偏移 */
        min-height: 20px;
        max-height: 40px;
        padding: 2px 8px; /* 进一步减小内边距 */
        font-size: 10px;
    }

    .talking-agent-message {
        font-size: 10px;
        padding: 1px 6px; /* 减小内边距 */
    }

    .talking-agent-input {
        bottom: -2px; /* 小屏幕上也紧贴圆环 */
        padding: 0 8px; /* 减小左右内边距 */
    }

    .talking-agent-input-field {
        font-size: 10px;
        padding: 4px 6px; /* 减小内边距 */
        /* 保持透明背景和底部边线 */
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
    }

    .talking-agent-circle {
        transform: translate(-50%, -50%) scale(0.7);
    }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
    /* 暗色主题适配（如果需要） */
}

/* 动画效果 - 消息淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.talking-agent-message {
    animation: fadeIn 0.3s ease-out;
}

/* 移除输入框输入时的微动效 - 保持透明背景 */
/* .talking-agent-input-field:not(:placeholder-shown) 规则已移除 */