@font-face {
    font-family: 'JF Open Huninn';
    src: url('/static/jf-openhuninn-2.1.woff2') format('woff2'),
        url('/static/jf-openhuninn-2.1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body,
#root {
    margin: 0;
    padding: 20px;
    background: transparent;
    font-family: 'JF Open Huninn', sans-serif;
}

.superchat-container {
    width: 400px;
    margin-top: 10px;
    margin-left: 10px;
    position: relative;
}

.pinned-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 移除 gap，改用每個元素的 margin-bottom */
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
    /* 為佈局變化添加平滑過渡 */
}

.superchat-scroll {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 移除 gap，改用每個元素的 margin-bottom */
    position: relative;
    transition: all 0.3s ease-in-out;
    /* 為佈局變化添加平滑過渡 */
}

/* 退出動畫 - 影響高度讓其他元素平滑向上滑動 */
.superchat-exit {
    animation: superchatExit 0.5s ease-out forwards;
    pointer-events: none;
    overflow: hidden;
    /* 確保內容不會溢出 */
}

@keyframes superchatExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 200px;
        /* 設定一個足夠的初始高度 */
        margin-bottom: 20px;
        /* 保持原始間距 */
    }

    60% {
        opacity: 0.3;
        transform: translateY(-10px) scale(0.98);
        max-height: 200px;
        margin-bottom: 20px;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        max-height: 0;
        /* 高度收縮到 0 */
        margin-bottom: 0;
        /* 間距也收縮到 0 */
        padding-top: 0;
        padding-bottom: 0;
    }
}

.superchat {
    background: transparent;
    border-radius: 13px;
    padding: 0;
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    /* 為每個 superchat 設定間距 */
    transition: all 0.3s ease-in-out;
    /* 為位置變化添加平滑過渡 */
}

/* 只有新的 SuperChat 才有滑入動畫 */
.superchat.is-new {
    opacity: 0;
    transform: translateX(-100px) scale(0.9);
    animation: slideIn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* 確保非新增的 superchat 有正確的最終狀態 */
.superchat:not(.is-new):not(.superchat-exit) {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.superchat::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.2));
    opacity: 0;
    z-index: -1;
    border-radius: 15px;
    transition: opacity 0.3s ease;
}

.superchat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0.08) 55%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.superchat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    padding: 10px 20px 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 13px 13px 0 0;
}

.avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease;
    z-index: 2;
}

.avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
    z-index: 1;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex-grow: 1;
    z-index: 2;
}

.superchat-username {
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
    text-shadow: -2px 0 #000,
        0 -2px #000,
        2px 0 #000,
        0 2px #000,
        -1.4px -1.4px #000,
        1.4px -1.4px #000,
        1.4px 1.4px #000,
        -1.4px 1.4px #000;
}

.superchat-amount {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    color: #fff !important;
    text-shadow: -2px 0 #000,
        0 -2px #000,
        2px 0 #000,
        0 2px #000,
        -1.4px -1.4px #000,
        1.4px -1.4px #000,
        1.4px 1.4px #000,
        -1.4px 1.4px #000;
}

.superchat-message {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 1);
    padding: 8px 20px 40px 20px;
    position: relative;
    margin-left: 0;
    z-index: 2;
    width: calc(100% - 40px);
    word-wrap: break-word;
    min-height: 40px;
    background: transparent;
    text-shadow: -2px 0 #000,
        0 -2px #000,
        2px 0 #000,
        0 2px #000,
        -1.4px -1.4px #000,
        1.4px -1.4px #000,
        1.4px 1.4px #000,
        -1.4px 1.4px #000;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateX(8px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.tier-1 {
    background: #60defb;
}

.tier-1 .superchat-amount {
    color: #fff;
}

.tier-1 .superchat-header {
    background: #4fb4d2;
}

.tier-1 .superchat-message {
    background: none;
}

.tier-2 {
    background: #4fe8c1;
}

.tier-2 .superchat-amount {
    color: #fff;
}

.tier-2 .superchat-header {
    background: #40bda9;
}

.tier-2 .superchat-message {
    background: none;
}

.tier-3 {
    background: #f5ff83;
}

.tier-3 .superchat-amount {
    color: #fff;
}

.tier-3 .superchat-header {
    background: #d0dd54;
}

.tier-3 .superchat-message {
    background: none;
}

.tier-4 {
    background: #e9851d;
}

.tier-4 .superchat-amount {
    color: #fff;
}

.tier-4 .superchat-header {
    background: #d95c00;
}

.tier-4 .superchat-message {
    background: none;
}

.tier-5 {
    background: #da3900;
}

.tier-5 .superchat-amount {
    color: #fff;
}

.tier-5 .superchat-header {
    background: #c42700;
}

.tier-5 .superchat-message {
    background: none;
}

.tier-6 {
    position: relative;
    background: linear-gradient(90deg,
            #ff6666, #ff9966, #ffff66, #99ff66, #66ff66, #66ff99,
            #66ffff, #6699ff, #6666ff, #9966ff, #ff66ff, #ff6699);
}

.tier-6 .superchat-header {
    background: rgba(0, 0, 0, 0.05);
}

.tier-6::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(8px);
    z-index: -1;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transition: width 0.2s ease-out;
    /* 更平滑的過渡 */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    will-change: width;
    /* 優化 GPU 加速 */
}

.tier-1 .progress-fill {
    background: #60defb;
    box-shadow: 0 0 8px #60defb;
}

.tier-2 .progress-fill {
    background: #4fe8c1;
    box-shadow: 0 0 8px #4fe8c1;
}

.tier-3 .progress-fill {
    background: #f5ff83;
    box-shadow: 0 0 8px #f5ff83;
}

.tier-4 .progress-fill {
    background: #e9851d;
    box-shadow: 0 0 8px #e9851d;
}

.tier-5 .progress-fill {
    background: #da3900;
    box-shadow: 0 0 8px #da3900;
}

.tier-6 .progress-fill {
    background: linear-gradient(90deg,
            #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80,
            #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
}

.floating-gif {
    position: absolute;
    bottom: 6px;
    right: 10px;
    pointer-events: none;
    z-index: 1;
    object-fit: contain;
    max-width: 140px;
}