/**
 * Token Display Plugin Styles
 * 令牌显示插件样式文件
 */

.token-display-plugin {
    display: none;
    opacity: 0;
    margin-left: 8px;
    font-size: 12px;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    user-select: none;
    cursor: default;
    font-family: inherit;
    vertical-align: middle;
    line-height: 1.2;
    flex-shrink: 0;
}

.token-display-plugin:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    .token-display-plugin {
        color: #aaa;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .token-display-plugin:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ccc;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .token-display-plugin {
        font-size: 11px;
        padding: 1px 4px;
        margin-left: 6px;
    }
}

/* 与朗读按钮的协调样式 */
.token-display-plugin + [class*="read"],
[class*="read"] + .token-display-plugin,
.token-display-plugin + [class*="speech"],
[class*="speech"] + .token-display-plugin,
.token-display-plugin + [class*="tts"],
[class*="tts"] + .token-display-plugin {
    margin-left: 6px;
}

/* 悬停状态下的显示效果 */
.token-display-plugin.visible {
    display: inline-block;
    opacity: 1;
}

/* 加载状态 */
.token-display-plugin.loading {
    background: rgba(0, 0, 0, 0.02);
    color: #999;
}

.token-display-plugin.loading::after {
    content: "...";
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0% { content: "..."; }
    33% { content: "."; }
    66% { content: ".."; }
    100% { content: "..."; }
}

/* 错误状态 */
.token-display-plugin.error {
    background: rgba(255, 0, 0, 0.05);
    color: #cc0000;
}

/* 与现有UI组件的兼容性 */
.chat-message .token-display-plugin,
.message-content .token-display-plugin,
.ai-response .token-display-plugin {
    margin-left: 8px;
    vertical-align: middle;
}

/* 确保在不同容器中的正确显示 */
.message-actions .token-display-plugin,
.message-toolbar .token-display-plugin,
.hover-actions .token-display-plugin,
.speech-controls .token-display-plugin,
.audio-controls .token-display-plugin,
.voice-controls .token-display-plugin {
    margin-left: 6px;
    margin-right: 0;
}