/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Söhne', 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft YaHei', sans-serif;
    background: #0e0e0e;
    color: #e4e4e7;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   LAYOUT
   ======================================== */
.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    background: #171717;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.app-container.blurred {
    filter: blur(10px);
    pointer-events: none;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: #0a0a0a;
    border-right: 1px solid #262626;
    display: flex;
    flex-direction: column;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.sidebar.collapsed {
    transform: translateX(-260px);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0e0e0e;
    width: 100%;
    min-width: 0;
    transition: margin-left 0.3s ease;
    margin-left: 0;
}

.sidebar.collapsed ~ .main-content {
    margin-left: -260px;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* ⭐ Logo 閃光動畫 */
@keyframes logoShine {
    0%, 100% {
        transform: translateX(-100%) translateY(-100%) rotate(25deg);
    }
    15% {
        transform: translateX(100%) translateY(100%) rotate(25deg);
    }
}

/* ⭐ 文字閃光動畫 */
@keyframes textShine {
    0%, 100% {
        left: -100%;
    }
    15% {
        left: 100%;
    }
}

/* ⭐ 狀態指示器脈衝動畫 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ⭐ 打字動畫 */
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-10px); opacity: 1; }
}

/* ⭐ 淡入縮放動畫 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}