/* static/css/custom.css */

/* ==========================================
   1. 隐藏滚动条 (保持主战场的极致沉浸感)
   ========================================== */
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ==========================================
   2. 移动端刘海屏/底部横条安全区适配
   ========================================== */
.pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
}

/* ==========================================
   3. 聊天气泡丝滑弹出动画 (配合 app.js)
   ========================================== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 这个类名已经在刚才的 app.js 里埋好了 */
.animate-fade-in-up {
    animation: fadeInUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ==========================================
   4. 细节微调 (可选)
   ========================================== */
/* 让多行文本框的拉伸更丝滑 */
textarea {
    transition: height 0.1s ease-in-out;
}


/* ==========================================
   5. 终极商业级毛玻璃 (修复抽屉卡死问题)
   ========================================== */
.super-glass {
    /* 保持 0.3 的通透度 */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(8px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
    /* 玻璃边缘微光保留 */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4) !important;
}

/* 适配暗黑模式 */
html[data-theme="dark"] .super-glass {
    background-color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}


/* ========================================================= */
/* === TTS 播放时消息气泡呼吸灯动画 === */
/* ========================================================= */
@keyframes ttsBubbleBreath {
    0% { background-color: oklch(var(--b2)); } /* 基础 base-200 颜色 */
    50% { background-color: oklch(var(--s) / 0.15); } /* 甜甜的 secondary 颜色透明状态 */
    100% { background-color: oklch(var(--b2)); }
}

/* 当 .chat-bubble 同时被挂载了 .tts-active 类时触发动画 */
.chat-bubble.tts-active {
    animation: ttsBubbleBreath 1.5s ease-in-out infinite;
    /* 增加一个甜甜的边框阴影，更有呼吸感 */
    box-shadow: 0 0 10px oklch(var(--s) / 0.3) !important;
}

/* ========================================================= */
/* === 文字流畅渐变出现（非复古打字机） === */
/* ========================================================= */
@keyframes textCharFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 前端 js 会自动把文本拆分成一颗颗带 .char 类的 span 标签 */
.char {
    opacity: 0;
    transform: translateY(2px); /* 轻轻向上的位移，更有灵动感 */
    display: inline-block; /* 保证位移动画生效 */
    animation: textCharFadeIn 0.3s ease forwards;
    /* 🌟 下面的 opacity 关键：通过 JS 动态计算每一个字的 animation-delay 来实现队列出现 */
}

/* 防止打字时页面抖动，让文字气泡容器具有渐变高度，但这需要 JS 配合 */

/* ========================================================= */
/* === 生图容器 Skeleton Loading 占位屏 === */
/* ========================================================= */
.image-loading-placeholder {
    @apply aspect-[9/16] rounded-xl flex items-center justify-center bg-base-300 animate-pulse; /* DaisyUI 自带 loading 动画 */
    width: 100%;
    max-width: 24rem; /* 约 384px，和图片卡片尺寸保持一致 */
}

.image-loading-placeholder::after {
    @apply loading loading-spinner loading-lg text-secondary; /* 居中显示 loading 转圈 */
    content: "";
}

/* 图片气泡本身的 loading 效果 (图片未完全 onLoad 前展示) */
.generated-image.loading {
    filter: blur(5px); /* 还没加载完先模糊一下，防止撕裂感 */
    opacity: 0; /* 配合 .image-loading-placeholder 使用 */
}


/* ========================================================= */
/* === 左侧会话列表置顶动画 (FLIP 视觉替代) === */
/* ========================================================= */
@keyframes popToTop {
    0% { 
        transform: scale(0.95) translateY(10px); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.02) translateY(0); 
    }
    100% { 
        transform: scale(1) translateY(0); 
        opacity: 1; 
    }
}

.animate-pop-top {
    animation: popToTop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================================= */
/* === 导航条 TTS 按钮样式同步 === */
/* ========================================================= */

/* 1. 全局样式设置 */
#nav-tts-btn .material-symbols-outlined {
    transition: all 0.2s ease-in-out;
}

/* 2. 喇叭 Icon：开启时，颜色变成 Success 绿色，提醒用户会产生费用 */
#nav-tts-btn.tts-enabled {
    color: oklch(var(--su)); /* DaisyUI 的 Success 绿色 */
}

/* 3. 禁音 Icon：关闭时，颜色灰化降噪 */
#nav-tts-btn.tts-disabled {
    color: oklch(var(--bc) / 0.5); /* 基础颜色的 50% 透明度，看起来是灰色 */
}

input.input-bordered, textarea.textarea-bordered {
    border-color: rgba(var(--bc), 0.2);
    background-color: rgba(var(--b2), 0.5);
}
input:focus, textarea:focus {
    border-color: hsl(var(--p));
}