/* ============================================================
   共用版面（app shell）
   手機 / 平板（< 1024px）：側邊欄為懸浮玻璃抽屜，配遮罩與漢堡鍵
   電腦（>= 1024px）：側邊欄常駐，可用面板上的收起鍵收合（狀態記憶）
   材質走單純的磨砂玻璃：半透明底 + 高斯模糊。
   遊戲相關樣式不在本檔，維持原樣。
   ============================================================ */
:root {
    --sidebar-w: 288px;
    --topbar-h: 60px;
    --shell-line: #e7e5e4;
    --shell-gap: 12px;
    --glass-tint: 255, 255, 255;
    --brand: 139, 30, 30;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* ---------- 材質：單純的磨砂玻璃（高斯模糊） ---------- */
/* 底色只留一層很淡的暖光暈，讓磨砂面不會壓在死平的底色上。 */
.app-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(56vw 76vh at -12% 20%, rgba(176, 116, 62, 0.22), rgba(176, 116, 62, 0) 64%),
        radial-gradient(48vw 50vh at 6% 102%, rgba(64, 86, 122, 0.16), rgba(64, 86, 122, 0) 66%);
}

.glass-surface {
    position: relative;
    background: rgba(var(--glass-tint), 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(var(--glass-tint), 0.66);
    box-shadow: 0 18px 40px -24px rgba(58, 42, 28, 0.28);
}

/* ---------- 側邊欄（懸浮玻璃面板） ---------- */
#sidebar.app-sidebar {
    position: fixed;
    top: max(var(--shell-gap), env(safe-area-inset-top));
    bottom: max(var(--shell-gap), env(safe-area-inset-bottom));
    left: max(var(--shell-gap), env(safe-area-inset-left));
    width: min(calc(var(--sidebar-w) - var(--shell-gap) * 2), calc(86vw - var(--shell-gap)));
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    overflow: hidden;
    transform: translateX(calc(-100% - var(--shell-gap) * 2));
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.46s cubic-bezier(0.34, 1.34, 0.64, 1),
        opacity 0.32s ease,
        visibility 0s linear 0.46s;
    z-index: 70;
}
body.sidebar-open #sidebar.app-sidebar {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
}
/* 面板內容在材質之上 */
.app-sidebar-head,
.app-sidebar-body {
    position: relative;
    z-index: 2;
}
.app-sidebar-head {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
.app-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* 面板內的小卡與膠囊鍵：單層半透明，不再堆高光 */
#sidebar .app-glass-card {
    background: rgba(var(--glass-tint), 0.55);
    border-color: rgba(var(--glass-tint), 0.6) !important;
    box-shadow: 0 10px 24px -18px rgba(58, 42, 28, 0.3);
}
#sidebar .app-glass-card a {
    background: rgba(var(--glass-tint), 0.6);
    border-color: rgba(var(--glass-tint), 0.72) !important;
    transition: background 0.18s ease;
}
#sidebar .app-glass-card a:hover {
    background: rgba(var(--glass-tint), 0.88);
}
#sidebar .app-glass-card a[href="/logout.php"] {
    background: rgba(var(--brand), 0.1);
    border-color: rgba(var(--brand), 0.2) !important;
}
#sidebar .app-glass-card a[href="/logout.php"]:hover {
    background: rgba(var(--brand), 0.18);
}

/* 面板內項目（只作用在範文／工具連結） */
#sidebar .app-sidebar-body > .space-y-2 a {
    position: relative;
    border-radius: 14px;
    transition: background 0.18s ease, color 0.18s ease;
}
#sidebar .app-sidebar-body > .space-y-2 a:hover {
    background: rgba(var(--glass-tint), 0.6);
}
#sidebar .app-sidebar-body > .space-y-2 a.is-active {
    background: rgba(var(--glass-tint), 0.78);
    color: rgb(var(--brand)) !important;
    border-color: transparent !important;
}
/* 選中項左側一小道朱紅，視線一眼抓得到 */
#sidebar .app-sidebar-body > .space-y-2 a.is-active::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 3px;
    height: 17px;
    margin-top: -8.5px;
    border-radius: 2px;
    background: rgba(var(--brand), 0.85);
}

/* 分組標題：淡朱紅短線 + 字距，讓面板有編排感 */
#sidebar .app-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a8a29e;
    letter-spacing: 0.2em;
}
#sidebar .app-nav-label::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--brand), 0.55), rgba(var(--brand), 0.12));
    flex: 0 0 auto;
}

/* 面板頂部的分隔線改成亮面髮絲線 */
#sidebar .app-sidebar-head {
    border-bottom-color: rgba(var(--glass-tint), 0.65) !important;
}

/* 面板滾動條收細，不破壞玻璃面 */
#sidebar .app-sidebar-body::-webkit-scrollbar {
    width: 6px;
}
#sidebar .app-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}
#sidebar .app-sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.14);
    border-radius: 3px;
}
#sidebar .app-sidebar-body:hover::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.24);
}
#sidebar .sidebar-close {
    background: rgba(var(--glass-tint), 0.5);
    box-shadow: inset 0 1px 0 rgba(var(--glass-tint), 0.9);
}
#sidebar .sidebar-close:hover {
    background: rgba(var(--glass-tint), 0.85);
}

/* ---------- 遮罩 ---------- */
#sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(28, 25, 23, 0.34);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    backdrop-filter: blur(3px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s ease, visibility 0.34s ease;
}
body.sidebar-open #sidebar-overlay {
    opacity: 1;
    visibility: visible;
}
body.sidebar-open {
    overflow: hidden;
}

/* ---------- 統一的選單鍵 ---------- */
.sidebar-toggle {
    -webkit-tap-highlight-color: transparent;
}
/* 面板內收起鍵也要有 44px 觸控區（桌機也靠它把側邊欄收起來） */
#sidebar .sidebar-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #2C2420;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease;
}
.app-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}
.app-menu-btn:active {
    background: rgba(0, 0, 0, 0.08);
}
.app-menu-btn svg {
    width: 22px;
    height: 22px;
}

/* ---------- 共用頂欄（同樣是玻璃材質，但薄一點） ---------- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(252, 251, 249, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--shell-line);
}
.app-topbar-inner {
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}
.app-topbar-brand {
    font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #2C2420;
    text-decoration: none;
    white-space: nowrap;
}
.app-topbar-brand:hover {
    opacity: 0.75;
}
.app-topbar-slot {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- 主內容讓位 ---------- */
.app-content {
    position: relative;
    z-index: 1; /* 蓋在環境光暈之上，玻璃才透得到光暈 */
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

@media (min-width: 1024px) {
    #sidebar.app-sidebar {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
    #sidebar-overlay {
        display: none !important;
    }
    body.sidebar-open {
        overflow: auto;
    }
    .app-content {
        padding-left: var(--sidebar-w);
    }
    .app-topbar--mobile {
        display: none;
    }
    /* 固定式頂欄（文章頁）也要讓開側邊欄 */
    #navbar.app-fixed-offset {
        left: var(--sidebar-w);
    }
    /* 桌機的漢堡鍵只在側邊欄收起時出現 */
    .app-menu-btn.sidebar-toggle {
        display: none !important;
    }
    /* 桌機也能把側邊欄收起來，狀態記憶在瀏覽器 */
    body.sidebar-collapsed #sidebar.app-sidebar {
        transform: translateX(calc(-100% - var(--shell-gap) * 2));
        opacity: 0;
        visibility: hidden;
        transition:
            transform 0.46s cubic-bezier(0.34, 1.34, 0.64, 1),
            opacity 0.32s ease,
            visibility 0s linear 0.46s;
    }
    body.sidebar-collapsed .app-content {
        padding-left: 0;
    }
    body.sidebar-collapsed #navbar.app-fixed-offset {
        left: 0;
    }
    body.sidebar-collapsed .app-menu-btn.sidebar-toggle {
        display: inline-flex !important;
    }
    body.sidebar-collapsed .app-topbar--mobile {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    :root {
        --sidebar-w: 320px; /* iPad 直向：抽屜加寬，閱讀更寬鬆 */
    }
}

/* 文章頁的自訂固定頂欄：手機／平板要讓開劉海與圓角 */
@media (max-width: 1023.98px) {
    #navbar > div {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}

/* 不支援背景模糊時退回接近不透明的材質，避免文字糊在一起 */
/* 不支援背景模糊時就當成不透明的板子，至少讀得清楚 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #sidebar.app-sidebar,
    .glass-surface {
        background: rgba(255, 255, 255, 0.96);
    }
    .app-topbar {
        background: rgba(252, 251, 249, 0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar.app-sidebar,
    body.sidebar-collapsed #sidebar.app-sidebar,
    .app-sidebar-body a {
        transition: none;
    }
    #sidebar .app-sidebar-body a:hover {
        transform: none;
    }
}