/* ==============================
   theme.css — Light / Dark Mode
   Dark mode is the DEFAULT (no attribute needed).
   Light mode overrides are scoped to html[data-theme="light"].
   The attribute is set by /js/theme.js before first paint.
============================== */


/* ==============================
   SMOOTH THEME TRANSITION
   Class is added by theme.js on user click, removed after 500ms.
   Keeps transitions off during initial page load (no FOUC).
============================== */

html.color-scheme-transitioning,
html.color-scheme-transitioning *,
html.color-scheme-transitioning *::before,
html.color-scheme-transitioning *::after {
    transition:
        background-color 0.3s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease !important;
}


/* ==============================
   1. BASE — Body & Page
============================== */

html[data-theme="light"] {
    background: #f1f3f9;
}

html[data-theme="light"] body {
    background: #f1f3f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .glow-purple,
html[data-theme="light"] .glow-pink {
    opacity: 0.12;
}


/* ==============================
   THEME TOGGLE BUTTON (always visible)
============================== */

.theme-toggle-btn {
    font-size: 16px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s, transform 0.15s;
}

.theme-toggle-btn:hover {
    transform: scale(1.15);
}


/* ==============================
   2. HEADER
============================== */

html[data-theme="light"] .app-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

html[data-theme="light"] .brand-block,
html[data-theme="light"] .brand-block:visited,
html[data-theme="light"] .brand-block:hover,
html[data-theme="light"] .brand-block:active {
    color: #0f172a;
    -webkit-text-fill-color: #0f172a;
}

/* Keep gradient on the logo text */
html[data-theme="light"] .brand-block .brand-logo {
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .brand-tagline {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1;
}

html[data-theme="light"] .icon-btn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    color: #374151;
}

html[data-theme="light"] .icon-btn:hover {
    background: rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .sound-btn {
    background: rgba(0,0,0,0.06);
    color: #374151;
}

html[data-theme="light"] .sound-btn:hover {
    background: rgba(0,0,0,0.1);
}

html[data-theme="light"] .account-status.guest {
    background: rgba(14,165,233,0.1);
    color: #0369a1;
    border: 1px solid rgba(14,165,233,0.25);
}

html[data-theme="light"] .account-status.premium {
    background: rgba(147,51,234,0.08);
    color: #7c3aed;
    border: 1px solid rgba(147,51,234,0.2);
}

html[data-theme="light"] .online {
    color: #374151;
}

html[data-theme="light"] .header-online {
    color: #374151;
}

/* Theme toggle button */
html[data-theme="light"] #themeToggleBtn {
    color: #374151;
}

html[data-theme="light"] #themeToggleBtn:hover {
    background: rgba(0,0,0,0.06);
    color: #0f172a;
}


/* ==============================
   3. PROFILE NAV DROPDOWN
============================== */

html[data-theme="light"] .profile-nav-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

html[data-theme="light"] .pnd-header {
    background: #f8fafc;
}

html[data-theme="light"] .pnd-name {
    color: #0f172a;
}

html[data-theme="light"] .pnd-tier {
    color: #64748b;
}

html[data-theme="light"] .pnd-divider {
    background: rgba(0,0,0,0.08);
}

html[data-theme="light"] .pnd-item {
    color: #374151;
}

html[data-theme="light"] .pnd-item:hover {
    background: rgba(0,0,0,0.05);
    color: #0f172a;
}

html[data-theme="light"] .pnd-logout {
    color: rgba(220,38,38,0.85);
}

html[data-theme="light"] .pnd-logout:hover {
    background: rgba(239,68,68,0.07);
    color: #ef4444;
}

html[data-theme="light"] .pnd-action-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #374151;
}

html[data-theme="light"] .pnd-action-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #0f172a;
}


/* ==============================
   4. SETUP CARD (Chat page)
============================== */

html[data-theme="light"] .setup-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

html[data-theme="light"] .setup-title {
    color: #0f172a;
}

html[data-theme="light"] .setup-subtitle {
    color: #64748b;
}

html[data-theme="light"] .field-label {
    color: #475569;
}

html[data-theme="light"] .field-label-hint {
    color: #94a3b8;
}

html[data-theme="light"] .setup-hint {
    color: #64748b;
}

/* Select elements */
html[data-theme="light"] select {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="light"] select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

html[data-theme="light"] select:focus {
    border-color: rgba(139,92,246,0.5);
}

html[data-theme="light"] .country-picker-btn {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="light"] .country-picker-btn:focus {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 0 2px rgba(139,92,246,0.18);
}

/* Tag input container */
html[data-theme="light"] .tag-input-container {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
}

html[data-theme="light"] #interestInput {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="light"] #interestInput::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .post-inline-link {
    color: #2563eb;
}

html[data-theme="light"] .post-inline-link:hover {
    color: #1d4ed8;
}

html[data-theme="light"] .link-preview-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}

html[data-theme="light"] .link-preview-media {
    background: #f8fafc;
}

html[data-theme="light"] .link-preview-site {
    color: #64748b;
}

html[data-theme="light"] .link-preview-title {
    color: #0f172a;
}

html[data-theme="light"] .link-preview-desc {
    color: #475569;
}

html[data-theme="light"] .tag-counter {
    color: #94a3b8;
}

/* Tags */
html[data-theme="light"] .tag {
    background: rgba(139,92,246,0.1);
    color: #6d28d9;
    border-color: rgba(139,92,246,0.25);
}


/* ==============================
   5. CHAT CONTAINER (Chat page)
============================== */

/* Container itself is transparent — avoids a white card floating above the controls */
html[data-theme="light"] #chat-container {
    background: transparent;
}

html[data-theme="light"] #messages {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 8px;
}

html[data-theme="light"] .bubble-system {
    background: #e2e8f0;
    color: #475569;
}

html[data-theme="light"] .bubble.stranger {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.07);
    color: #1e293b;
}

html[data-theme="light"] .bubble.me {
    color: white;
}

html[data-theme="light"] .bubble-meta {
    color: #64748b;
}

html[data-theme="light"] #input {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] #input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] #input-area {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    margin-top: 8px;
}

html[data-theme="light"] .typing {
    color: #64748b;
}

/* chat-header is transparent by default — only shows a border when it has content */
html[data-theme="light"] .chat-header {
    background: transparent;
    border-bottom-color: rgba(0,0,0,0.06);
}

/* Soften the dark drop-shadow on the controls bar */
html[data-theme="light"] #controls {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

html[data-theme="light"] #chatMatchInfo {
    color: #374151;
}

html[data-theme="light"] .search-text {
    color: #374151;
}

html[data-theme="light"] .search-hero {
    background: transparent;
}

/* White particle dots are invisible on light bg — hide the layer */
html[data-theme="light"] .search-hero::before {
    opacity: 0;
}

/* Searching progress bar track */
html[data-theme="light"] .search-progress {
    background: rgba(0,0,0,0.1);
}

/* Login button (setup card) */
html[data-theme="light"] .login-btn {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid rgba(0,0,0,0.1);
}

html[data-theme="light"] .login-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Captcha box */
html[data-theme="light"] .captcha-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Report / bad vibe button in chat header */
html[data-theme="light"] .report-btn {
    border-color: rgba(0,0,0,0.12);
    color: #94a3b8;
}

html[data-theme="light"] .report-btn:hover {
    color: #ef4444;
    border-color: rgba(239,68,68,0.5);
    background: rgba(239,68,68,0.07);
}

/* Skip (Next Vibe) button — transparent bg, needs readable text */
html[data-theme="light"] #skipBtn {
    color: #374151;
    border-color: rgba(99,102,241,0.45);
}

/* End Chat button */
html[data-theme="light"] #disconnectBtn {
    color: #64748b;
}

html[data-theme="light"] #editSetupBtn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
    color: #475569;
}

html[data-theme="light"] #editSetupBtn:hover {
    background: rgba(0,0,0,0.09);
    color: #0f172a;
}

/* Stop Finding button */
html[data-theme="light"] #stopSearchBtn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
    color: #374151;
}

html[data-theme="light"] #stopSearchBtn:hover {
    background: rgba(0,0,0,0.09);
}

/* Add Friend button — light green text is too pale on white */
html[data-theme="light"] .friend-btn {
    color: #059669 !important;
    background: rgba(16,185,129,0.08) !important;
}


/* ==============================
   6. MODALS (Chat page — .modal-content)
============================== */

html[data-theme="light"] .modal-content {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    color: #0f172a;
}

html[data-theme="light"] .modal-content h3 {
    color: #0f172a;
}

html[data-theme="light"] .modal-content input[type="email"],
html[data-theme="light"] .modal-content input[type="password"],
html[data-theme="light"] .modal-content input[type="text"] {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.12);
    color: #0f172a;
}

html[data-theme="light"] .modal-content input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .modal-cancel {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.08);
    color: #374151;
}

html[data-theme="light"] .modal-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] .country-picker-option {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(0,0,0,0.1);
}

html[data-theme="light"] .country-picker-option:hover,
html[data-theme="light"] .country-picker-option.active {
    background: rgba(139,92,246,0.12);
    border-color: rgba(139,92,246,0.35);
    color: #6d28d9;
}

html[data-theme="light"] .premium-context {
    color: #64748b;
}

html[data-theme="light"] .modal-note {
    color: #64748b;
}

html[data-theme="light"] .forgot-link {
    color: #8b5cf6;
}

html[data-theme="light"] .auth-error {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
}

html[data-theme="light"] .auth-switch a {
    color: #64748b;
}

/* Report modal radio options */
html[data-theme="light"] .report-options label {
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.07);
    color: #374151;
}

html[data-theme="light"] .report-options label:hover {
    background: rgba(139,92,246,0.05);
    border-color: rgba(139,92,246,0.2);
}

html[data-theme="light"] .report-options input[type="radio"] {
    border: 2px solid rgba(0,0,0,0.25);
}


/* ==============================
   7. SIDE PANELS (Friends + Notifications)
============================== */

html[data-theme="light"] .side-panel {
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.08);
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}

html[data-theme="light"] .side-panel-header {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .panel-close {
    color: #64748b;
}

html[data-theme="light"] .panel-close:hover {
    background: rgba(0,0,0,0.05);
    color: #374151;
}

html[data-theme="light"] .panel-empty {
    color: #94a3b8;
}

/* Friend items */
html[data-theme="light"] .friend-item {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
}

html[data-theme="light"] .friend-item:hover {
    background: rgba(0,0,0,0.04);
}

html[data-theme="light"] .friend-name {
    color: #0f172a;
}

html[data-theme="light"] .friend-status {
    color: #64748b;
}

/* Notification items */
html[data-theme="light"] .notif-item {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
}

html[data-theme="light"] .notif-item.unread {
    background: rgba(139,92,246,0.05);
    border-color: rgba(139,92,246,0.12);
}

html[data-theme="light"] .notif-body.notif-clickable:hover {
    background: rgba(0,0,0,0.04);
}

html[data-theme="light"] .notif-text {
    color: #374151;
}
html[data-theme="light"] .notif-text strong {
    color: #374151;
}
html[data-theme="light"] .notif-subtext {
    color: #64748b;
}
html[data-theme="light"] .notif-time {
    color: #94a3b8;
}

html[data-theme="light"] .notif-actions .notif-accept {
    background: linear-gradient(135deg, #059669, #10b981);
}

html[data-theme="light"] .notif-actions .notif-decline {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #64748b;
}

html[data-theme="light"] .notif-actions .notif-decline:hover {
    background: #e2e8f0;
    color: #374151;
}


/* ==============================
   8. PROFILE PAGE
============================== */

html[data-theme="light"] .cover {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .avatar {
    border-color: #f1f3f9;
}

html[data-theme="light"] .avatar-online {
    border-color: #f1f3f9;
}

/* Reduce banner overlap so name/handle clear the dark cover — avatar still dips in */
html[data-theme="light"] .profile-header {
    margin-top: -30px;
}

html[data-theme="light"] .profile-name {
    color: #0f172a;
}

html[data-theme="light"] .profile-handle {
    color: #64748b;
}

html[data-theme="light"] .profile-stats {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .stat {
    border-right: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .stat-label {
    color: #64748b;
}

/* Profile tabs */
html[data-theme="light"] .tab {
    color: #64748b;
}

html[data-theme="light"] .tab:hover {
    background: rgba(0,0,0,0.05);
    color: #0f172a;
}

html[data-theme="light"] .tab.active {
    background: rgba(139,92,246,0.1);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,0.3);
}

/* Buttons on profile */
html[data-theme="light"] .btn-message {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid rgba(0,0,0,0.1);
}

html[data-theme="light"] .btn-message:hover {
    background: #e2e8f0;
}

html[data-theme="light"] .btn-lock-toggle {
    background: rgba(0,0,0,0.04);
    color: #64748b;
    border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .btn-lock-toggle:hover { background: rgba(0,0,0,0.08); color: #374151; }
html[data-theme="light"] .btn-lock-toggle.locked {
    background: rgba(139,92,246,0.07);
    color: #7c3aed;
    border-color: rgba(139,92,246,0.25);
}
html[data-theme="light"] .profile-lock-title { color: #0f172a; }
html[data-theme="light"] .profile-lock-sub   { color: #64748b; }

html[data-theme="light"] .btn-follow.following {
    background: #f1f5f9;
    color: #64748b;
    animation: none;
}

html[data-theme="light"] .btn-add-friend {
    background: #f8fafc;
    color: #334155;
    border: 1px solid rgba(0,0,0,0.1);
}

html[data-theme="light"] .btn-add-friend:hover {
    background: #eef2f7;
}

html[data-theme="light"] .btn-add-friend.following {
    background: #f1f5f9;
    color: #64748b;
}


/* ==============================
   9. CARDS (Profile sidebar & feed)
============================== */

html[data-theme="light"] .card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

html[data-theme="light"] .card-head {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .card-title {
    color: #94a3b8;
}

/* Community status */
html[data-theme="light"] .status-display {
    background: rgba(139,92,246,0.04);
    border: 1px solid rgba(139,92,246,0.15);
}

html[data-theme="light"] .status-text {
    color: #1e293b;
}

html[data-theme="light"] .status-time {
    color: #94a3b8;
}

/* Friend chip online indicator */
html[data-theme="light"] .friend-chip-online {
    border-color: #f1f3f9;
}

/* Friend cards (full grid) */
html[data-theme="light"] .friend-card {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="light"] .friend-card:hover {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

html[data-theme="light"] .friend-card-online {
    border-color: #f8fafc;
}

html[data-theme="light"] .friend-card-name {
    color: #0f172a;
    text-shadow: none;
}

html[data-theme="light"] .friend-card-handle {
    color: #64748b;
}

html[data-theme="light"] .friend-card-tier {
    color: #7c3aed;
    opacity: 0.9;
}

/* About rows */
html[data-theme="light"] .about-row {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="light"] .about-label {
    color: #94a3b8;
}

html[data-theme="light"] .about-value {
    color: #1e293b;
}

html[data-theme="light"] .friends-loading {
    color: #94a3b8;
}


/* ==============================
   10. COMPOSE BOX & POSTS
============================== */

html[data-theme="light"] .compose-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .compose-input {
    background: #f1f5f9;
    color: #374151;
}

html[data-theme="light"] .compose-input:hover {
    box-shadow: 0 0 0 2px rgba(14,165,233,0.4);
    color: #0f172a;
}

html[data-theme="light"] #feedComposeTags {
    background: #f1f5f9;
    color: #374151;
}

html[data-theme="light"] #feedComposeMood {
    background: #f1f5f9;
    color: #374151;
}

html[data-theme="light"] #feedComposeIntent {
    background: #f1f5f9;
    color: #374151;
}

html[data-theme="light"] #feedImageBtn {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="light"] .feed-load-more-btn {
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.1);
    color: #64748b;
}
html[data-theme="light"] .feed-load-more-btn:hover {
    background: rgba(0,0,0,0.08);
}

html[data-theme="light"] .post {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

html[data-theme="light"] .post:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.09);
}

html[data-theme="light"] .post-author {
    color: #0f172a;
}

html[data-theme="light"] .post-community-path {
    color: #64748b;
}

html[data-theme="light"] .post-community-link {
    color: #475569;
}

html[data-theme="light"] .post-community-link:hover {
    color: #7c3aed;
}

html[data-theme="light"] .post-time {
    color: #94a3b8;
}

html[data-theme="light"] .post-mood-badge {
    background: rgba(14,165,233,0.1);
    border-color: rgba(14,165,233,0.2);
    color: #0369a1;
}

html[data-theme="light"] .post-intent-badge {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.22);
    color: #b45309;
}

html[data-theme="light"] .post-body {
    color: #1e293b;
}

html[data-theme="light"] .post-community-source {
    background: rgba(124,58,237,0.09);
    border-color: rgba(124,58,237,0.16);
    color: #7c3aed;
}

html[data-theme="light"] .post-inline-link {
    color: #2563eb;
}

html[data-theme="light"] .post-actions {
    border-top: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="light"] .action-btn {
    color: #64748b;
}

html[data-theme="light"] .action-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #374151;
}

html[data-theme="light"] .post-more {
    color: #94a3b8;
}

html[data-theme="light"] .post-more:hover {
    color: #374151;
}

/* Reaction pills */
html[data-theme="light"] .post-reaction-pill {
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.07);
    color: #475569;
}

html[data-theme="light"] .post-reaction-pill:hover {
    background: rgba(0,0,0,0.08);
}

/* Post tags */
html[data-theme="light"] .post-tag {
    background: #f1f5f9;
    color: #475569;
}

html[data-theme="light"] .post-tag:hover {
    background: rgba(139,92,246,0.1);
    color: #7c3aed;
}

html[data-theme="light"] .post-badge-community-role {
    background: rgba(251,191,36,0.16);
    border-color: rgba(245,158,11,0.26);
    color: #b45309;
}

/* Post dropdown */
html[data-theme="light"] .post-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

html[data-theme="light"] .post-dropdown-item {
    color: #374151;
}

html[data-theme="light"] .post-dropdown-item:hover {
    background: rgba(0,0,0,0.05);
    color: #0f172a;
}

html[data-theme="light"] .post-dropdown-divider {
    background: rgba(0,0,0,0.07);
}

/* Post edit */
html[data-theme="light"] .post-edit-area {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .post-edit-cancel {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="light"] .post-edit-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Empty / loading states */
html[data-theme="light"] .empty-state {
    color: #94a3b8;
}

html[data-theme="light"] .empty-icon {
    opacity: 0.5;
}


/* ==============================
   11. REACTION PICKER
============================== */

html[data-theme="light"] .reaction-picker {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

html[data-theme="light"] .reaction-option.active {
    background: rgba(0,0,0,0.07);
}


/* ==============================
   12. COMMENT SECTION
============================== */

html[data-theme="light"] .comment-section {
    border-top: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="light"] .comment-input {
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .comment-input:focus {
    border-color: rgba(139,92,246,0.5);
    background: #ffffff;
}

html[data-theme="light"] .comment-input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .comments-sheet-overlay {
    background: rgba(148,163,184,0.32);
    backdrop-filter: blur(10px);
}

html[data-theme="light"] .comments-sheet {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a;
}

html[data-theme="light"] .comments-sheet-handle {
    background: rgba(148,163,184,0.55);
}

html[data-theme="light"] .comments-sheet-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

html[data-theme="light"] .comments-sheet-header h3 {
    color: #0f172a;
}

html[data-theme="light"] .comments-sheet-close {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.1);
    color: #475569;
}

html[data-theme="light"] .comments-sheet-close:hover {
    background: rgba(15,23,42,0.08);
    color: #0f172a;
}

html[data-theme="light"] .comment-bubble {
    background: rgba(0,0,0,0.04);
    color: #1e293b;
}

/* Report / repost modal */
html[data-theme="light"] .report-modal {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow: 0 22px 60px rgba(15,23,42,0.16);
}

html[data-theme="light"] .report-modal-header,
html[data-theme="light"] .report-modal-footer {
    border-color: rgba(15,23,42,0.08);
}

html[data-theme="light"] .report-modal-header {
    color: #0f172a;
}

html[data-theme="light"] .report-modal-close {
    color: #94a3b8;
}

html[data-theme="light"] .report-modal-close:hover {
    background: rgba(15,23,42,0.06);
    color: #475569;
}

html[data-theme="light"] .report-modal-desc {
    color: #64748b;
}

html[data-theme="light"] .report-reason-item {
    color: #0f172a;
}

html[data-theme="light"] .report-reason-item:hover {
    background: rgba(15,23,42,0.04);
}

html[data-theme="light"] .report-hide-row {
    background: #f8fafc;
    border-color: rgba(15,23,42,0.08);
    color: #334155;
}

html[data-theme="light"] .report-cancel-btn {
    border-color: rgba(15,23,42,0.10);
    color: #475569;
}

html[data-theme="light"] .report-cancel-btn:hover {
    background: rgba(15,23,42,0.05);
    color: #0f172a;
}

html[data-theme="light"] .report-modal .status-input,
html[data-theme="light"] .report-modal .repost-quote-input {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.10);
    color: #0f172a;
}

html[data-theme="light"] .repost-share-label {
    color: #64748b;
}

html[data-theme="light"] .repost-share-select {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.10);
    color: #0f172a;
}

html[data-theme="light"] .report-modal .status-input::placeholder,
html[data-theme="light"] .report-modal .repost-quote-input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .report-modal .repost-shell {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: none;
}

html[data-theme="light"] .report-modal .repost-preview-link,
html[data-theme="light"] .report-modal .repost-preview-link .post-author,
html[data-theme="light"] .report-modal .repost-preview-link .post-time,
html[data-theme="light"] .report-modal .repost-preview-link .post-body {
    color: inherit;
}

html[data-theme="light"] .repost-preview-slot {
    border-left-color: rgba(148,163,184,0.28);
}

html[data-theme="light"] .repost-shell {
    background: #ffffff;
    border-color: rgba(148,163,184,0.18);
}

html[data-theme="light"] .repost-preview-link,
html[data-theme="light"] .repost-preview-link:hover,
html[data-theme="light"] .repost-preview-link .post-author,
html[data-theme="light"] .repost-preview-link .post-time,
html[data-theme="light"] .repost-preview-link .post-body {
    text-decoration: none;
    color: inherit;
}

html[data-theme="light"] .repost-preview-image-wrap {
    border-color: rgba(148,163,184,0.20);
}

html[data-theme="light"] .comment-author {
    color: #0f172a;
}

html[data-theme="light"] .comment-body {
    color: #374151;
}

html[data-theme="light"] .comment-empty,
html[data-theme="light"] .comment-loading,
html[data-theme="light"] .comment-error {
    color: #94a3b8;
}

html[data-theme="light"] .comment-load-more-btn {
    background: #f8fafc;
    border-color: rgba(0,0,0,0.08);
    color: #475569;
}

html[data-theme="light"] .comment-load-more-btn:hover {
    background: #eef2f7;
    color: #0f172a;
}

html[data-theme="light"] .comment-composer-hint {
    color: #94a3b8;
}

html[data-theme="light"] .comment-skeleton-avatar,
html[data-theme="light"] .comment-skeleton-line {
    background: rgba(15,23,42,0.08);
}

html[data-theme="light"] .comment-skeleton-avatar::after,
html[data-theme="light"] .comment-skeleton-line::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
}

html[data-theme="light"] .comment-reaction-pill {
    background: rgba(15,23,42,0.04);
    border-color: rgba(15,23,42,0.08);
    color: #475569;
}

html[data-theme="light"] .comment-reaction-badge {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}

html[data-theme="light"] .comment-reaction-total {
    color: #64748b;
}

html[data-theme="light"] .post-mention {
    color: #7c3aed;
}


/* ==============================
   13. PROFILE PAGE MODALS (modal-overlay / modal-box)
============================== */

html[data-theme="light"] .modal-overlay {
    background: rgba(0,0,0,0.45);
}

html[data-theme="light"] .modal-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

html[data-theme="light"] .modal-head h3 {
    color: #0f172a;
}

html[data-theme="light"] .modal-close {
    color: #94a3b8;
}

html[data-theme="light"] .modal-close:hover {
    background: rgba(0,0,0,0.05);
    color: #374151;
}

/* Status modal inputs */
html[data-theme="light"] .status-input {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .status-input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .status-charcount {
    color: #94a3b8;
}

html[data-theme="light"] .btn-cancel {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #374151;
}

html[data-theme="light"] .btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Tags modal */
html[data-theme="light"] .tags-modal-hint {
    color: #64748b;
}

html[data-theme="light"] .tag-input-row input {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.10);
    color: #0f172a;
}

html[data-theme="light"] .tag-input-row input::placeholder {
    color: #94a3b8;
}

/* Details modal */
html[data-theme="light"] .details-label {
    color: #374151;
}

html[data-theme="light"] .details-hint {
    color: #94a3b8;
}

html[data-theme="light"] .details-input {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .details-input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .details-at {
    color: #94a3b8;
}

html[data-theme="light"] .details-charcount {
    color: #94a3b8;
}

html[data-theme="light"] .tag-remove-btn {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    color: #64748b;
}

html[data-theme="light"] .tags-add-btn {
    color: #64748b;
    border: 1px dashed rgba(0,0,0,0.15);
}

html[data-theme="light"] .tags-add-btn:hover {
    border-color: rgba(0,0,0,0.25);
    color: #374151;
}

/* Unfriend modal */
html[data-theme="light"] .unfriend-modal-overlay {
    background: rgba(0,0,0,0.45);
}

html[data-theme="light"] .unfriend-modal {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

html[data-theme="light"] .unfriend-modal-title {
    color: #0f172a;
}

html[data-theme="light"] .unfriend-modal-body {
    color: #64748b;
}

html[data-theme="light"] .unfriend-cancel {
    background: #f1f5f9;
    color: #374151;
}

/* Friends btn dropdown */
html[data-theme="light"] .friends-btn-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

html[data-theme="light"] .fbd-item {
    color: #374151;
}

html[data-theme="light"] .fbd-item:hover {
    background: rgba(0,0,0,0.05);
}


/* ==============================
   14. DM WINDOW
============================== */

html[data-theme="light"] .dm-window {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.1);
}

html[data-theme="light"] .dm-header {
    background: #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="light"] .dm-header-name {
    color: #0f172a;
}

html[data-theme="light"] .dm-header-status {
    color: #94a3b8;
}

html[data-theme="light"] .dm-close,
html[data-theme="light"] .dm-minimize {
    color: #64748b;
}

html[data-theme="light"] .dm-close:hover,
html[data-theme="light"] .dm-minimize:hover {
    background: rgba(0,0,0,0.06);
    color: #374151;
}

html[data-theme="light"] .dm-body {
    background: #f8fafc;
}

html[data-theme="light"] .dm-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
}

html[data-theme="light"] .dm-loading,
html[data-theme="light"] .dm-empty {
    color: #94a3b8;
}

/* Received message bubble (sent bubble keeps its purple) */
html[data-theme="light"] .dm-theirs .dm-bubble {
    background: #f1f5f9;
    color: #1e293b;
}

html[data-theme="light"] .dm-time {
    color: #94a3b8;
}

html[data-theme="light"] .dm-typing-hint {
    background: #f8fafc;
    color: #64748b;
    border-top: 1px solid rgba(0,0,0,0.05);
}

html[data-theme="light"] .dm-footer {
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="light"] .dm-input {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}

html[data-theme="light"] .dm-input::placeholder {
    color: #94a3b8;
}

/* Minimized window (collapsed header stays in-place on desktop) */
html[data-theme="light"] .dm-window.dm-minimized {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Mobile chat bubbles */
html[data-theme="light"] .dm-chat-bubble {
    border: 2px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

html[data-theme="light"] .dm-bubble-badge {
    border-color: #ffffff;
}

html[data-theme="light"] .dm-win-badge {
    border: 1px solid rgba(255,255,255,0.4);
}

/* Quick reply button + popup */
html[data-theme="light"] .dm-qr-btn {
    background: rgba(139,92,246,0.08);
    color: #7c3aed;
    border-color: rgba(139,92,246,0.2);
}
html[data-theme="light"] .dm-qr-btn:hover {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.4);
}
html[data-theme="light"] .dm-qr-popup {
    background: #f8fafc;
    border-top: 1px solid rgba(0,0,0,0.06);
}
html[data-theme="light"] .dm-qr-chip {
    background: rgba(139,92,246,0.07);
    border-color: rgba(139,92,246,0.2);
    color: #6d28d9;
}
html[data-theme="light"] .dm-qr-chip:hover {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.4);
    color: #4c1d95;
}


/* ==============================
   15. GLOBAL FEED SIDEBAR CARDS
============================== */

html[data-theme="light"] .gf-stat-row {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="light"] .gf-stat-label {
    color: #64748b;
}

html[data-theme="light"] .gf-stat-value {
    color: #1e293b;
}

html[data-theme="light"] .gf-profile-name {
    color: #0f172a;
}

html[data-theme="light"] .gf-profile-link {
    color: #7c3aed;
}

html[data-theme="light"] .gf-profile-link:hover {
    color: #6d28d9;
}

html[data-theme="light"] .gf-subtitle {
    color: #64748b;
}


/* ==============================
   16. FOOTER
============================== */

html[data-theme="light"] .site-footer {
    background: linear-gradient(to top, #e8ebf4, #f1f3f9);
    border-top: 1px solid rgba(0,0,0,0.07);
}

html[data-theme="light"] .footer-logo {
    color: #0f172a;
}

html[data-theme="light"] .footer-tagline {
    color: #64748b;
}

html[data-theme="light"] .footer-links a {
    color: #64748b;
}

html[data-theme="light"] .footer-links a:hover {
    color: #8b5cf6;
}

html[data-theme="light"] .footer-trust {
    color: #64748b;
}

html[data-theme="light"] .footer-copy {
    color: #94a3b8;
}


/* ==============================
   17. TOAST / MISC
============================== */

html[data-theme="light"] .toast {
    background: #1e293b;
    color: #f1f5f9;
}

/* SEO page content */
html[data-theme="light"] .seo-content {
    color: #374151;
}

html[data-theme="light"] .seo-content h2,
html[data-theme="light"] .seo-content h3 {
    color: #0f172a;
}

html[data-theme="light"] .seo-heading {
    color: transparent;
}

/* Cooldown notice */
html[data-theme="light"] .cooldown-notice {
    background: rgba(239,68,68,0.07);
    color: #dc2626;
    border-color: rgba(239,68,68,0.18);
}

/* Spinner overlay */
html[data-theme="light"] .spinner-overlay {
    background: rgba(255,255,255,0.85);
    color: #374151;
}

/* Skeleton vars */
:root {
    --skel-base:  rgba(255,255,255,0.05);
    --skel-shine: rgba(255,255,255,0.13);
}
html[data-theme="light"] {
    --skel-base:  rgba(0,0,0,0.07);
    --skel-shine: rgba(0,0,0,0.15);
}
html[data-theme="light"] .skel-post {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.04);
}
html[data-theme="light"] .profile-community-row {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .profile-community-sub {
  color: #64748b;
}

html[data-theme="light"] .gf-vibe-summary,
html[data-theme="light"] .status-subtitle,
html[data-theme="light"] .status-tags-label,
html[data-theme="light"] .community-identity-copy.subtle {
  color: #64748b;
}

html[data-theme="light"] .gf-vibe-chip {
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  color: #334155;
}

html[data-theme="light"] .gf-vibe-chip.active {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
  color: #6d28d9;
}

html[data-theme="light"] .gf-vibe-action.secondary {
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  color: #334155;
}

html[data-theme="light"] .community-identity-tag {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.14);
  color: #6d28d9;
}

html[data-theme="light"] .community-prompt-card {
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  color: #334155;
}

html[data-theme="light"] .community-prompt-copy {
  color: #334155;
}