/* css/toast.css - 修复版 */

/* 外层容器：固定定位、居中 */
.notify-container {
    position: fixed !important;
    top: 30px !important; /* 距离顶部距离 */
    left: 50% !important;
    transform: translateX(-50%) translateY(-20px); /* 初始位置 */
    
    /* 颜色配置 */
    background: rgba(97, 178, 255, 0.95) !important; /* 主题蓝 */
    color: #fff !important;
    
    /* 布局与尺寸 */
    padding: 12px 20px !important; /* 稍微减小左右内边距，给文字留更多空间 */
    width: auto !important;
    min-width: 200px !important; 
    max-width: 80vw !important; /* 使用 viewport width 限制最大宽度 */
    
    border-radius: 8px !important;
    z-index: 99999 !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(4px); 
    
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    pointer-events: none; 
}

/* 显示状态 */
.notify-container.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 文字样式 - 核心修复区域 */
.notify-text {
    position: relative;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    text-align: center !important; /* 多行文字居中 */
    
    /* --- 修复开始 --- */
    white-space: pre-wrap !important; /* 允许自动换行，且识别 \n */
    word-break: break-word !important; /* 强制长单词断行，防止撑开 */
    line-height: 1.5 !important;       /* 增加行高，多行更美观 */
    overflow-wrap: break-word !important;
    /* --- 修复结束 --- */
    
    margin-bottom: 0 !important;
    width: 100%; /* 确保文字容器占满父容器 */
}

/* 进度条背景 */
.notify-bar-bg {
    width: 100% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    margin-top: 10px !important; /* 稍微增加间距 */
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0; /* 防止多行文字挤压进度条高度 */
}

/* 进度条本体 */
.notify-bar {
    height: 100% !important;
    width: 100%; 
    background: #fff !important;
    border-radius: 2px;
}