/* 茶座顶栏 + 夜间模式变量（对齐 chazuo.pages.css / user-header.js） */

:root {
    --primary-color: #059669;
    --secondary-color: #22c55e;
    --bg-color: #eef2f7;
    --card-bg: #ffffff;
    --text-color: #0f172a;
    --light-text: #64748b;
    --accent-color: #f39c12;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --sdy-header-height: 60px;
    --sdy-topbar-height: calc(54px + var(--sdy-sat, env(safe-area-inset-top, 0px)));
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --light-text: #b0b0b0;
    --border-color: #404040;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --primary-color: #34d399;
    --secondary-color: #6ee7b7;
}

html, body {
    background: var(--bg-color);
    color: var(--text-color);
}

.topbar.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: calc(10px + var(--sdy-sat, env(safe-area-inset-top, 0px))) 12px 10px 8px;
    min-height: var(--sdy-header-height);
    height: auto;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .topbar.header {
    background: #1a1a1a;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.topbar.header .left-nav {
    display: flex;
    align-items: center;
    min-width: auto;
    flex-shrink: 0;
}

.topbar.header .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 8px;
}

.topbar.header .search-container {
    flex-grow: 1;
    margin: 0 8px;
    min-width: 0;
}

.topbar.header .user-search,
.search-chrome-field .user-search {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.topbar.header .user-search input,
.search-chrome-field .user-search input {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    padding: 0 32px 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #fff;
    color: #333;
    outline: none;
    font-size: 14px;
}

.topbar.header .user-search input::placeholder,
.search-chrome-field .user-search input::placeholder {
    color: #555;
}

[data-theme="dark"] .topbar.header .user-search input,
[data-theme="dark"] .search-chrome-field .user-search input {
    background-color: #2d2d2d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .topbar.header .user-search input::placeholder,
[data-theme="dark"] .search-chrome-field .user-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.topbar.header .user-search button,
.search-chrome-field .user-search button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

[data-theme="dark"] .topbar.header .user-search button,
[data-theme="dark"] .search-chrome-field .user-search button {
    color: rgba(255, 255, 255, 0.7);
}

.topbar.header .right-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.header .message-bubble {
    position: relative;
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
    padding: 8px;
    background: none;
    border: none;
    font: inherit;
}

.message-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background-color: #ff4757;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0 6px;
    line-height: 1;
}

[data-theme="dark"] .app,
[data-theme="dark"] body,
[data-theme="dark"] html {
    background: #1a1a1a;
    color: #e0e0e0;
}

[data-theme="dark"] .main,
[data-theme="dark"] .panel,
[data-theme="dark"] .home-work-grid,
[data-theme="dark"] .search-empty,
[data-theme="dark"] .profile-page,
[data-theme="dark"] .profile-guest-card,
[data-theme="dark"] .profile-user-card,
[data-theme="dark"] .user-profile,
[data-theme="dark"] .panel-catalog {
    background: #1a1a1a;
    color: #e0e0e0;
}

[data-theme="dark"] .work-statistics-bar,
[data-theme="dark"] .profile-icon-region,
[data-theme="dark"] .sdy-profile-modal__panel,
[data-theme="dark"] .user-stats-card {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

[data-theme="dark"] .user-stat {
    background: #1a1a1a;
    border-color: #404040;
}

[data-theme="dark"] .user-stat .value,
[data-theme="dark"] .user-stat .label {
    color: #e0e0e0;
}

[data-theme="dark"] .work-stat-item,
[data-theme="dark"] .profile-name,
[data-theme="dark"] .profile-action-link {
    color: #e0e0e0;
}

[data-theme="dark"] .profile-level-action {
    background: #1a1a1a;
    color: #34d399;
    border-color: #34d399;
}

[data-theme="dark"] .sdy-profile-modal__panel input {
    background: #1a1a1a;
    color: #e0e0e0;
    border-color: #404040;
}

[data-theme="dark"] .bottom-nav {
    background: #1a1a1a;
    border-top-color: #404040;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .bottom-nav-item {
    color: #b0b0b0;
}

[data-theme="dark"] .bottom-nav-item.is-active {
    color: #34d399;
}

[data-theme="dark"] .home-category-nav {
    background: #1a1a1a;
    border-bottom-color: #404040;
}

[data-theme="dark"] .home-category-item {
    color: #b0b0b0;
}

[data-theme="dark"] .home-category-item.is-active {
    color: #34d399;
}

[data-theme="dark"] .mini-player {
    background: #2d2d2d;
    color: #e0e0e0;
}

[data-theme="dark"] .search-hot-tag,
[data-theme="dark"] .search-duration-tag,
[data-theme="dark"] .search-browse-any,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .home-load-more {
    background: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

[data-theme="dark"] .profile-icon-label,
[data-theme="dark"] .search-empty-hint,
[data-theme="dark"] .home-empty-desc {
    color: #b0b0b0;
}

[data-theme="dark"] .profile-download-card h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .profile-download-card .domain-note {
    background: #1a2e1a;
    color: #86efac;
}

[data-theme="dark"] .profile-download-logo {
    background: #2d2d2d;
}

.hidden {
    display: none !important;
}

.bottom-nav-item[hidden] {
    display: none !important;
}

#panel-discover.panel {
    min-height: 40vh;
}

.message-list-page,
.message-detail-page,
.comment-notifications-page,
.like-notifications-page,
.moment-detail-page {
    z-index: 80;
}

body.show-message-list .bottom-nav,
body.show-message-detail .bottom-nav,
body.show-comment-notifications .bottom-nav,
body.show-like-notifications .bottom-nav,
body.show-moment-detail .bottom-nav,
body.show-personal-home .bottom-nav,
body.sdy-search-focus .bottom-nav,
body.sdy-message-open .bottom-nav,
body.sdy-moment-compose-focus .bottom-nav {
    display: none !important;
}
body.sdy-moment-compose-focus .mini-player-container,
body.sdy-moment-compose-focus #mini-play-btn {
    display: none;
}

/* 消息栈独立全屏层：盖住首页顶栏，内部再切列表/详情/通知 */
#sdy-message-root {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 410;
    background: var(--card-bg, #fff);
}
#sdy-message-root.is-open {
    display: block;
}
#sdy-message-root .message-list-page,
#sdy-message-root .message-detail-page,
#sdy-message-root .comment-notifications-page,
#sdy-message-root .like-notifications-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 独立层里标题栏贴安全区，不要再给首页 60px 顶栏留空 */
#sdy-message-root .message-list-page .message-header,
#sdy-message-root .message-detail-page .message-header,
#sdy-message-root .comment-notifications-page .notification-header,
#sdy-message-root .like-notifications-page .notification-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    padding-top: var(--sdy-sat, env(safe-area-inset-top, 0px));
    height: calc(50px + var(--sdy-sat, env(safe-area-inset-top, 0px)));
    box-sizing: border-box;
    overflow: visible;
}
#sdy-message-root .message-detail-page .header-title,
#sdy-message-root .message-detail-page .blocked-badge,
#sdy-message-root .message-detail-page .header-menu-btn {
    top: calc(var(--sdy-sat, env(safe-area-inset-top, 0px)) + 10px);
    z-index: 3;
}
#sdy-message-root .message-detail-page .header-menu-dropdown {
    top: calc(var(--sdy-sat, env(safe-area-inset-top, 0px)) + 45px);
    z-index: 4;
}
#sdy-message-root .message-detail-page .message-content {
    padding-top: 15px;
    height: auto;
}

#panel-moments .moments-page {
    display: block;
    position: relative;
    height: auto;
    min-height: calc(100vh - 120px);
    top: auto;
    overflow: visible;
    padding-bottom: 24px;
}

#panel-moments .moments-page.show {
    display: block;
}

html.sdy-logged-in .bottom-login-prompt {
    display: none !important;
}
html:not(.sdy-logged-in) #bottomInputBar {
    display: none !important;
}
html:not(.sdy-logged-in) .bottom-login-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
}
body:not(.show-moment-detail) .bottom-login-prompt {
    display: none;
}

#personal-home-container.personal-home-page.hidden,
#moment-detail-container.moment-detail-page.hidden {
    display: none !important;
}
body.show-personal-home #personal-home-container.personal-home-page,
body.show-moment-detail #moment-detail-container.moment-detail-page {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 400;
    overflow: hidden;
    min-height: 0;
    width: auto;
}
body.show-personal-home #personal-home-container.personal-home-page {
    overflow-y: auto;
    background: #f7f8fb;
    padding-top: var(--sdy-sat, env(safe-area-inset-top, 0px));
    padding-bottom: var(--sdy-sab);
}
[data-theme="dark"] body.show-personal-home #personal-home-container.personal-home-page {
    background: #1a1a1a;
}
body.show-moment-detail #moment-detail-container.moment-detail-page {
    background: var(--card-bg, #fff);
}
/* 详情层 400 盖过顶栏 100；迷你条平时 30，这里抬到 401，不把详情整层压到条下面（否则顶栏会穿出来）。评论条仍是 10002。 */
body.show-moment-detail #mini-player {
    z-index: 401;
    pointer-events: auto;
}
body.show-moment-detail #moment-detail-container > .moment-detail-page {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
body.show-moment-detail #moment-detail-container .moment-detail-container {
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
body.show-moment-detail #moment-detail-container .moment-header {
    padding-top: var(--sdy-sat, env(safe-area-inset-top, 0px));
    height: calc(35px + var(--sdy-sat, env(safe-area-inset-top, 0px)));
    box-sizing: border-box;
}
body.show-moment-detail #moment-detail-container .moment-content-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.show-moment-detail #moment-detail-container .bottom-input-bar,
body.show-moment-detail #moment-detail-container .bottom-login-prompt {
    padding-bottom: calc(7px + var(--sdy-sab));
}
body.show-personal-home #personal-home-container .vip-text {
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
}