/**
 * 星野爱阅读积分 - 前端样式（灵动岛风格）
 */
.hoshinoai-readpost-timer {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: center;
    width: auto;
    /* 自动宽度 */
    max-width: 80%;
    /* 最大宽度限制 */
    height: 40px;
    background-color: #000;
    border-radius: 25px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.4s ease-in-out, height 0.6s ease-in-out, border-radius 0.6s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: visible;
    z-index: 1000;
    padding-left: 15px;
    padding-right: 15px;
    opacity: 0;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.45);
    flex: 1;
    /* 使宽度自动扩展 */
    white-space: nowrap;
    /* 防止文字换行 */
}

/* 不同状态下的灵动岛样式 */
.hoshinoai-readpost-timer.not-logged-in {
    background-color: #333;
}

.hoshinoai-readpost-timer.limit-reached {
    background-color: #541818;
}

.hoshinoai-readpost-timer.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.hoshinoai-readpost-timer.inactive {
    transform: translateX(-50%) scale(0);
    opacity: 0;
    pointer-events: none;
    /* 隐藏时不响应鼠标事件 */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.hoshinoai-readpost-timer .title-h-left {
    display: none;
}

.hoshinoai-readpost-timer .box-body {
    padding: 0 !important;
    width: 100%;
    opacity: 0;
    transition: opacity 0.9s ease-in-out, filter 0.8s ease-in-out;
    font-weight: bold;
    flex-grow: 1;
    text-align: left;
    /* 文字左对齐 */
    margin-left: 0;
    /* 移除左侧间距 */
    overflow: hidden;
    /* 防止溢出 */
    text-overflow: ellipsis;
    /* 溢出显示省略号 */
}

.hoshinoai-readpost-timer.active .box-body {
    opacity: 1;
}

.hoshinoai-readpost-timer .hoshinoai-icon {
    display: none;
}

.hoshinoai-readpost-timer:hover {
    height: 40px;
    border-radius: 25px;
}

.hoshinoai-readpost-timer .progress {
    display: none;
}

.hoshinoai-readpost-info {
    padding: 0;
    font-size: 14px;
}

.hoshinoai-readpost-info .mt10.mb10 {
    margin: 4px 0;
}

/* 扩展和最小化状态 */
.hoshinoai-readpost-timer.minimized {
    padding: 8px 15px;
    cursor: pointer;
    height: 40px;
    border-radius: 25px;
}

.hoshinoai-readpost-timer.minimized .hoshinoai-readpost-info div:not(:first-child) {
    display: none;
}

.hoshinoai-readpost-timer.minimized .progress {
    display: none;
}

.hoshinoai-readpost-timer .expand-toggle {
    display: none;
}

.hoshinoai-readpost-timer .points-info {
    display: none;
}

/* 灵动岛音频条 - 不同状态下的颜色 */
.hoshinoai-readpost-bars {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 40px;
    /* 最小宽度限制 */
    margin-left: 8px;
    /* 增加与文字的间距 */
}

.hoshinoai-readpost-bar {
    width: 2px;
    height: 13px;
    background-color: #4CAF50;
    animation: hoshinoai-bounce 1s infinite ease-in-out;
    animation-direction: alternate;
}

/* 未登录状态的音频条 */
.hoshinoai-readpost-timer.not-logged-in .hoshinoai-readpost-bar {
    background-color: #2196F3;
    animation: hoshinoai-bounce-blue 1s infinite ease-in-out;
    animation-direction: alternate;
}

/* 达到上限状态的音频条 */
.hoshinoai-readpost-timer.limit-reached .hoshinoai-readpost-bar {
    background-color: #F44336;
    animation: hoshinoai-bounce-red 1s infinite ease-in-out;
    animation-direction: alternate;
}

.hoshinoai-readpost-bar:nth-child(1) {
    animation-duration: 1s;
}

.hoshinoai-readpost-bar:nth-child(2) {
    animation-duration: 0.9s;
}

.hoshinoai-readpost-bar:nth-child(3) {
    animation-duration: 0.8s;
}

.hoshinoai-readpost-bar:nth-child(4) {
    animation-duration: 0.7s;
}

.hoshinoai-readpost-bar:nth-child(5) {
    animation-duration: 0.6s;
}

@keyframes hoshinoai-bounce {
    0% {
        transform: scaleY(0.3);
        background-color: #4CAF50;
    }

    50% {
        transform: scaleY(1);
        background-color: #FFC107;
    }

    100% {
        transform: scaleY(0.3);
        background-color: #4CAF50;
    }
}

@keyframes hoshinoai-bounce-blue {
    0% {
        transform: scaleY(0.3);
        background-color: #2196F3;
    }

    50% {
        transform: scaleY(1);
        background-color: #90CAF9;
    }

    100% {
        transform: scaleY(0.3);
        background-color: #2196F3;
    }
}

@keyframes hoshinoai-bounce-red {
    0% {
        transform: scaleY(0.3);
        background-color: #F44336;
    }

    50% {
        transform: scaleY(1);
        background-color: #FFCDD2;
    }

    100% {
        transform: scaleY(0.3);
        background-color: #F44336;
    }
}

/* 颜色样式 */
.c-blue {
    color: #2196F3;
}

.c-green {
    color: #4CAF50;
}

.c-yellow {
    color: #FFC107;
}

.c-red {
    color: #F44336;
}

/* 图标样式 */
.mr5 {
    margin-right: 5px;
}

/* 通知样式 */
.hoshinoai-notification {
    position: fixed;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 1000;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    min-width: 200px;
    animation: notification-slide-in 0.3s ease-out;
}

@keyframes notification-slide-in {
    0% {
        transform: translate(-50%, -20px);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hoshinoai-readpost-timer {
        min-width: 160px;
        max-width: 90%;
    }
}

/* 添加一个小的触发区域，即使灵动岛隐藏也能通过悬停显示 */
.hoshinoai-readpost-timer-trigger {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 10px;
    z-index: 999;
    cursor: pointer;
}