/* =====================================================
   BASE STYLES - Reset, Body, Scrollbar
   ===================================================== */

* { box-sizing: border-box; }

/* Cross-browser smooth animations (especially Firefox) */
html {
    /* Enable smooth scrolling */
    scroll-behavior: smooth;
    /* Optimise text rendering on the root — inherited by all children */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU compositing ONLY for elements that actually animate.
   Applying translateZ(0) / will-change to * caused a layer explosion
   that consumed excessive VRAM and degraded performance. */
.floating-chat-panel,
.floating-chat-btn,
.modal-overlay,
.notification-toast,
.online-users-panel,
.emoji-picker-v2,
.floating-gif-picker,
.nav-dropdown-menu {
    will-change: transform, opacity;
}

/* Performance: Contain layout/paint for scrollable containers */
.floating-chat-messages,
.suggestions-feed,
.chat-body,
.online-users-list,
.modal-users-list,
.dashboard,
.tracker-container,
.skills-grid {
    contain: content;
}

/* Performance: content-visibility for offscreen elements */
.suggestion-card,
.chat-message-group,
.skill-card-detailed,
.card {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Reset link colors to prevent browser defaults (purple visited links) */
a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

/* Reset button styles to prevent browser defaults */
button {
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Pointer cursor for all clickable elements site-wide */
a, button, [onclick], .clickable, .clickable-username, .profile-link-btn,
.suggestion-header .user-name, .chat-user-name, .reply-header .user-name,
.online-user-card, .mention, .user-mention, [role="button"],
.notification-item, .reaction-btn, .category-btn, .tab-btn,
.nav-item, .modal-close, .close-btn, .toggle-btn {
    cursor: pointer !important;
}

/* Text cursor only for actual text inputs */
input[type="text"], input[type="email"], input[type="password"], 
input[type="search"], input[type="url"], textarea {
    cursor: text !important;
}

html { height: 100%; }
body { 
    background: var(--bg-body); margin: 0; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    color: var(--text-main); 
    min-height: 100vh; 
    overflow-x: hidden;
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
}

/* Specific layout for the Community Hub to fix chat input visibility */
body.community-page {
    height: 100vh;
    overflow: hidden;
    min-width: 320px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* COMPACT UI MODE */
body.compact-ui .card { min-height: 0; padding: 15px; }
body.compact-ui .dashboard { gap: 10px; }
body.compact-ui .card-main-text { font-size: 1.5rem; margin: 10px 0; }
body.compact-ui .skill-card-detailed { min-height: 80px; padding: 8px; flex: 0 1 140px; }
body.compact-ui .skill-lvl { font-size: 1.2rem; }
body.compact-ui .skill-icon-lg { width: 24px; height: 24px; }
body.compact-ui .task-item { padding: 6px 10px; }