:root {
    --bg-deep: #050b14;
    --primary: #00f2ff;
    --secondary: #bd00ff;
    --success: #00ff88;
    --gold: #ffd700;
    --text-main: #ffffff;
    --text-muted: #8b9bb4;
    --glass: rgba(20, 30, 50, 0.95);
    --border: rgba(255, 255, 255, 0.15);
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-heading);
    overflow-y: auto;
    /* عشان يسمح بالسكرول */
    min-height: 100vh;
    /* عشان الصفحة تطول براحتها */
    width: 100%;
    overflow-x: hidden;
    /* <--- تأمين إضافي عشان يقتل السكرول بالعافية */
}

/* --- Background --- */
.stars-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000 url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat top center;
    z-index: -2;
    opacity: 0.6;
}

.twinkling-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png') repeat top center;
    z-index: -1;
    animation: move-twink-back 200s linear infinite;
    opacity: 0.3;
}

@keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -10000px 5000px;
    }
}

/* --- UI Overlay --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(5, 11, 20, 0.9), transparent);
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
}

/* 1. The Icon: Neon Glow & Animation */
/* 1. The Icon: Neon Glow & Animation */
.logo-icon {
    font-size: 2.2rem;
    color: #00f2ff;
    margin-right: 12px;
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.6));
    transition: all 0.3s ease;
    /* No animation here by default */
}

.logo:hover .logo-icon {
    color: #bd00ff;
    filter: drop-shadow(0 0 15px rgba(189, 0, 255, 0.8));
    /* Animation starts only on hover, made it a bit faster (3s) for a cool effect */
    animation: rotate-infinity 3s linear infinite;
}

@keyframes rotate-infinity {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. The Text: Glassy Gradient */
.logo-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: -1px;

    /* Gradient Text */
    background: linear-gradient(to right, #ffffff, #00f2ff, #bd00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Text Glow */
    filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.3));
}

.user-panel {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    border: 1px solid var(--primary);
}

.btn-logout {
    background: #ff4757;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* --- Galaxy & Lines --- */
#galaxy-container {
    width: 100%;
    height: 100vh;
    /* Allow it to grow */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align to top so it flows down */
    padding-top: 60px;
    /* Space for header - reduced to align with side panel */
    padding-bottom: 100px;
}


#solar-systems {
    width: 90vw;
    height: 100%;
    /* Force height to enable scrolling */
    position: relative;
}

#constellation-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Planets */
.system-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 10;
    width: 100px;
}

.system-node:hover {
    transform: scale(1.1);
    z-index: 20;
}

.system-node:hover .node-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.planet {
    width: 70px;
    height: 70px;
    background-color: transparent;
    position: relative;
    transition: all 0.5s ease;
}

.planet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* REMOVED: brightness(0) invert(1) */
    filter: drop-shadow(0 0 5px #00f2ff) drop-shadow(0 0 10px rgba(0, 242, 255, 0.5));
    transition: 0.3s;
}

.system-node:hover .planet img {
    /* REMOVED: brightness(0) invert(1) */
    filter: drop-shadow(0 0 10px #00f2ff) drop-shadow(0 0 20px #00f2ff);
}

.system-node[data-status="completed"] .planet {
    filter: drop-shadow(0 0 15px #00ff88);
}

.system-node[data-status="in-progress"] .planet {
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent;
}

.system-node[data-status="in-progress"] .planet img {
    /* Use drop-shadow filter so the glow follows the icon's PNG shape */
    filter: drop-shadow(0 0 15px #bd00ff) drop-shadow(0 0 30px #bd00ff);
    transition: all 0.4s ease-out;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 50px rgba(189, 0, 255, 0.9);
    }
}

.node-label {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    z-index: 100;

    width: max-content;
    min-width: 100px;

    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.95);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;

    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* HIDE DECORATIONS IN ADMIN MODE */
.admin-sort-mode .percentage-badge,
.admin-sort-mode .current-target {
    display: none !important;
}

/* DRAG HANDLE STYLING */
.drag-handle {
    display: none;
    /* Hidden by default */
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: grab;
}

.admin-sort-mode .drag-handle {
    display: block !important;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 4px;
}

/* Admin Sort Mode (Dual Layout) */
/* 1. The Container: Strict Flex Grid */
.admin-sort-mode {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    /* Packs rows tightly at the top */
    align-items: flex-start !important;
    gap: 20px !important;
    /* Consistent spacing */
    padding: 140px 20px 100px 20px !important;
    /* Space for header & panel */
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}



/* Admin Mode + Panel Open Layout Fix */
.edit-mode.panel-open .admin-sort-mode {
    margin-left: 340px !important;
    width: calc(100% - 340px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Focus Mode: Dim nodes when panel open */
.edit-mode.panel-open .admin-sort-mode .system-node {
    opacity: 0.4;
    transition: opacity 0.3s;
}

.edit-mode.panel-open .admin-sort-mode .system-node:hover {
    opacity: 1;
}

/* 2. The Node Card: Frozen Dimensions */
.admin-sort-mode .system-node {
    position: relative !important;
    /* Disable absolute positioning */
    left: auto !important;
    top: auto !important;

    /* FORCE SIZE - Crucial to stop exploding images */
    width: 100px !important;
    height: auto !important;
    /* Allow growth */
    min-height: 120px !important;

    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 100 !important;
}

/* 3. The Image Container: Strict Containment */
.admin-sort-mode .planet {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    /* Never shrink */
    margin-bottom: 10px !important;
}

/* 4. The Image Itself: Scale Down */
.admin-sort-mode .planet img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 5. The Label: Visible & Static */
.admin-sort-mode .node-label {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    white-space: normal !important;
    /* Allow wrapping */
    margin-top: 5px !important;
    width: 100% !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.6) !important;
    /* Softer background */
    border: none !important;
}



/* Hide connection lines in admin mode to reduce clutter */
.admin-sort-mode #constellation-lines {
    display: none !important;
}

/* --- Panels --- */
.side-panel {
    position: fixed;
    left: 20px;
    top: 100px;
    bottom: 180px;
    width: 320px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    z-index: 40;
    transition: transform 0.3s ease;
}

/* DevOps Tips Box */
.devops-tips-box {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 320px;
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.08) 0%, rgba(189, 0, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 242, 255, 0.2);
    border-radius: 12px;
    padding: 18px 20px;
    z-index: 40;
    transition: transform 0.3s ease;
}

.devops-tips-box.collapsed {
    transform: translateX(-340px);
}

.devops-tips-box .tip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 8px;
    font-family: var(--font-mono);
}

.devops-tips-box .tip-text {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.5;
    font-family: var(--font-heading);
    font-style: italic;
}

.side-panel.collapsed {
    transform: translateX(-340px);
}

.panel-toggle {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary);
    font-size: 1.2rem;
    backdrop-filter: blur(10px);
    transition: 0.2s;
}

.panel-toggle:hover {
    background: rgba(0, 242, 255, 0.1);
}

.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.panel-tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}

.panel-tab.active {
    background: transparent;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: none;
}

.panel-content.active {
    display: block;
}

/* Items */
.rank-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.rank-item.gold .rank-num {
    color: var(--gold);
}

.rank-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 5px;
}

.rank-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
}

.parallel-item {
    padding: 12px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.parallel-item:hover {
    border-color: var(--secondary);
    background: rgba(189, 0, 255, 0.1);
}

/* --- Modal & Tabs --- */
#mission-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

#mission-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Profile Modal */
#profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

#profile-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Parallel Track Modal */
#parallel-track-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

#parallel-track-modal.visible,
#course-edit-modal.visible,
#topic-edit-modal.visible,
#topic-resource-modal.visible,
#main-resource-edit-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Course Edit Modal (Main Roadmap) */
#course-edit-modal,
#topic-edit-modal,
#topic-resource-modal,
#main-resource-edit-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

/* Badge Styling */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    min-width: 80px;
    transition: all 0.3s;
}

.badge-item.unlocked {
    border-color: var(--success);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.badge-item.locked {
    filter: grayscale(1) opacity(0.5);
}

.badge-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.badge-name {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

.modal-card {
    width: 700px;
    max-width: 90%;
    height: 85vh;
    background: #0d1423;
    border: 1px solid var(--primary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.duration-badge {
    font-size: 0.7em;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 6px 12px;
    border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 242, 255, 0.05);
    transition: 0.2s;
    margin-left: 15px;
}

.duration-badge:hover {
    background: rgba(0, 242, 255, 0.15);
    box-shadow: 0 0 5px var(--primary);
}

/* Obsidian Config Button in Header */
.obsidian-config-btn {
    background: rgba(122, 62, 232, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 62, 232, 0.3);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    text-decoration: none;
}

.obsidian-config-btn:hover {
    background: rgba(122, 62, 232, 0.2);
    border-color: #7A3EE8;
    box-shadow: 0 0 15px rgba(122, 62, 232, 0.5);
    transform: translateY(-1px);
}

.obsidian-header-btn {
    background: #7A3EE8;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* User Personal Links Section */
.user-links-section {
    margin-top: 10px;
    padding: 10px;
    background: rgba(138, 43, 226, 0.05);
    border-left: 2px solid #8a2be2;
    border-radius: 4px;
}

.user-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    margin-bottom: 5px;
}

.user-link-delete {
    color: #ff6b6b;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: auto;
    transition: 0.2s;
}

.user-link-delete:hover {
    color: #ff4444;
}

.modal-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
}

.modal-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.modal-tab-btn.active {
    color: white;
    border-bottom-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;
}

/* Modal Content Views */
.tab-view {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
}

.tab-view.active {
    display: flex;
}

.checklist-item {
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 4px;
}

.checklist-item.checked {
    text-decoration: line-through;
    color: var(--text-muted);
}

.check-box {
    width: 20px;
    height: 20px;
    border: 1px solid var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.checklist-item.checked .check-box {
    background: var(--success);
    border-color: var(--success);
    color: black;
    font-weight: bold;
}

.checklist-item.checked .check-box::after {
    content: '✓';
}

/* Notes & Resources Styles */
.log-entry {
    border-left: 3px solid var(--secondary);
    padding-left: 10px;
    margin-bottom: 15px;
}

.log-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.input-area {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: stretch;
}

.input-area .action-btn {
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

textarea.dark-input {
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-family: var(--font-heading);
}

input.dark-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: white;
    padding: 10px;
    border-radius: 6px;
}

select.dark-input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300f2ff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    transition: all 0.2s ease;
}

select.dark-input:hover {
    border-color: var(--secondary);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

select.dark-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 15px rgba(189, 0, 255, 0.4);
}

select.dark-input option {
    background: #0a0f1a;
    color: white;
    padding: 10px;
}

.action-btn {
    background: var(--primary);
    border: none;
    padding: 0 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.resource-link {
    display: block;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    margin-bottom: 5px;
    color: var(--primary);
    text-decoration: none;
    border-radius: 4px;
    transition: 0.2s;
}

.resource-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* Auth & Footer */
/* View State 1: Landing */
#landing-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: url('https://i.postimg.cc/Y2Lr57Lt/Gemini-Generated-Image-8vpfy88vpfy88vpf.jpg') no-repeat center center;
    background-size: cover;
}

/* Vignette Overlay */
#landing-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 30%, #050b14 100%);
    pointer-events: none;
}

#landing-nav {
    position: fixed;
    top: 40px;
    right: 50px;
    display: flex;
    gap: 20px;
    z-index: 1001;
}

#landing-nav .action-btn {
    padding: 12px 28px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(0, 242, 255, 0.05);
    border: 1px solid #00f2ff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#landing-nav .action-btn:hover {
    background: rgba(0, 242, 255, 0.2);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
}

/* Landing Footer - Holo Bar */
#landing-footer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 35px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    transition: all 0.3s ease;
}

#landing-footer:hover {
    border-color: rgba(0, 242, 255, 0.3);
}

#landing-footer span {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

#landing-footer .author-name {
    color: #00f2ff;
    font-weight: 700;
}

#landing-footer .social-icons {
    display: flex;
    gap: 15px;
}

#landing-footer .social-icons a {
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#landing-footer .social-icons a:hover {
    color: #00f2ff;
    transform: scale(1.2);
    text-shadow: 0 0 10px #00f2ff;
}

/* View State 2: Auth Overlay (Split) */
#auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: #050b14;
    display: grid;
    grid-template-columns: 65% 35%;
}

#auth-left {
    width: 100%;
    height: 100%;
    /* Gradient allows 95% visibility, Image anchored to the right */
    background: linear-gradient(to right, transparent 80%, #050b14 100%), url('https://i.postimg.cc/Znyc42Pk/devops.jpg') no-repeat right center;
    background-size: cover;
    position: relative;
}

#auth-right {
    width: 100%;
    height: 100%;
    background: #050b14;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* View State 3: Main App */
#main-app-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
}

/* Glass Form Container */
.login-box {
    width: 100%;
    max-width: 400px;
    padding: 50px 40px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hidden {
    display: none !important;
}

/* Login Component Specifics */
.login-box h1 {
    background: linear-gradient(135deg, #00f2ff 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2rem;
    margin-bottom: 35px !important;
    font-family: 'Outfit', sans-serif;
}

.login-box .dark-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    margin-bottom: 20px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s;
}

.login-box .dark-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-box .dark-input:focus {
    outline: none;
    border-bottom: 2px solid #00f2ff;
    background: rgba(0, 242, 255, 0.05);
    box-shadow: 0 4px 15px -5px rgba(0, 242, 255, 0.3);
}

.login-box .action-btn {
    width: 100%;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #00f2ff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-top: 20px;
}

.login-box .action-btn:hover {
    background: rgba(0, 242, 255, 0.2);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5);
    transform: translateY(-2px);
}

.login-box .action-btn:active {
    transform: translateY(0);
}



/* Hide admin-only elements when not in edit mode */
body:not(.edit-mode) .admin-only {
    display: none !important;
}

/* Toast Notifications */
.toast {
    background: rgba(13, 20, 35, 0.95);
    border: 1px solid var(--primary);
    color: var(--secondary);
    padding: 12px 24px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeInUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.footer-controls {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 100;
}

.icon-btn {
    width: 40px;
    height: 40px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
}

.obsidian-btn {
    padding: 5px 12px;
    background: #7A3EE8;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    margin-left: auto;
}

/* Admin Panel */
#admin-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 200px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 20px;
    z-index: 900;
    backdrop-filter: blur(10px);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    border: 2px solid white;
}

.edit-node-btn {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--gold);
    color: black;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    border: 2px solid white;
    font-size: 0.8rem;
}

.drag-handle {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    cursor: grab;
    z-index: 99;
    font-size: 1.2rem;
    display: none;
}

.resource-icon {
    margin-right: 8px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    display: inline-block;
}

.system-node.sortable-ghost {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* --- CREATIVE FEATURES --- */

/* 1. Progress Percentage Badge */
.percentage-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    /* Moved from right to left */
    right: auto;
    /* Reset right property */
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--success);
    color: var(--success);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
    z-index: 102;
    backdrop-filter: blur(4px);
}

/* 2. Current Course Pointer */
/* 2. Sci-Fi Current Course Target */
.current-target {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    pointer-events: none;
    z-index: 1;
    /* Behind the planet */
}

.radar-ring {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--gold);
    border-radius: 50%;
    animation: spin-radar 10s linear infinite, pulse-radar 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.current-target::after {
    content: 'CURRENT COURSE';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--gold);
    font-family: var(--font-mono);
    letter-spacing: 2px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

@keyframes spin-radar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-radar {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* 3. Connection Duration Label */
.connection-label {
    fill: var(--text-muted);
    font-size: 0.75rem;
    font-family: var(--font-body);
    text-anchor: middle;
    dominant-baseline: middle;
    background: var(--bg-deep);
    /* SVG doesn't support background on text directly, handled via filter or rect if needed, but simple fill is okay for now */
    font-weight: bold;
    paint-order: stroke;
    stroke: var(--bg-deep);
    stroke-width: 3px;
}

/* --- Modern Glassy Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(5, 11, 20, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 255, 0.3);
    /* Glassy Cyan */
    border-radius: 4px;
    border: 1px solid rgba(0, 242, 255, 0.2);
    backdrop-filter: blur(5px);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 255, 0.6);
    /* Brighter on hover */
    border: 1px solid rgba(0, 242, 255, 0.5);
}

/* Markdown Styles (Used in Logs and Topic Notes) */
.log-entry,
.md-content,
.log-entry *,
.md-content * {
    unicode-bidi: plaintext;
    text-align: start;
}

.log-entry h1,
.log-entry h2,
.log-entry h3,
.md-content h1,
.md-content h2,
.md-content h3 {
    color: var(--primary);
    margin-top: 15px;
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.log-entry p,
.md-content p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.log-entry code,
.md-content code {
    background: rgba(0, 0, 0, 0.5);
    color: var(--gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    unicode-bidi: bidi-override;
}

.log-entry pre,
.md-content pre {
    background: #0d1423;
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 15px 0;
    direction: ltr;
    text-align: left;
}

.log-entry pre code,
.md-content pre code {
    background: transparent;
    color: #e6e6e6;
    padding: 0;
}

.log-entry ul,
.log-entry ol,
.md-content ul,
.md-content ol {
    margin-bottom: 15px;
    padding-inline-start: 25px;
}

.log-entry li,
.md-content li {
    margin-bottom: 5px;
}

.log-entry blockquote,
.md-content blockquote {
    border-inline-start: 4px solid var(--secondary);
    background: rgba(189, 0, 255, 0.05);
    margin: 15px 0;
    padding: 12px 15px;
    border-radius: 4px;
}

.log-entry a,
.md-content a {
    color: var(--success);
    text-decoration: underline;
}

.topic-note-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* Auth Separator */
.auth-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.auth-separator:not(:empty)::before {
    margin-right: .5em;
}

.auth-separator:not(:empty)::after {
    margin-left: .5em;
}

/* --- Heatmap --- */
#activity-heatmap-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.heatmap-sq {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.2s, background 0.3s;
}

.heatmap-sq.active {
    background: var(--success);
    box-shadow: 0 0 5px var(--success);
}

.heatmap-sq:hover {
    transform: scale(1.3);
    z-index: 5;
}

/* --- Proof of Work --- */
.proof-link-btn {
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    filter: grayscale(1);
    opacity: 0.3;
    margin: 0 8px;
}

.proof-link-btn.has-proof {
    color: var(--gold);
    filter: grayscale(0);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.proof-link-btn:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--gold));
    opacity: 1;
}

.proof-remove-btn {
    font-size: 0.7rem;
    color: #ff4444;
    cursor: pointer;
    margin-left: 2px;
    opacity: 0;
    transition: opacity 0.2s;
    vertical-align: super;
}

.checklist-item:hover .proof-remove-btn {
    opacity: 1;
}

/* Modal Overlay Base */
.modal-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-card-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.external-proof-link {
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    margin-left: 5px;
}

.external-proof-link:hover {
    color: var(--primary);
    transform: scale(1.1);
}

/* --- Dashboard / Observability Styles --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 10px;
}

.status-widget {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.widget-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
}

.widget-value {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-footer {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: auto;
}

.neon-amber {
    color: #ffab00;
    text-shadow: 0 0 10px rgba(255, 171, 0, 0.5);
}

.neon-green {
    color: var(--success);
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.neon-red {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

.health-dot {
    width: 12px;
    height: 12px;
    background: #ffab00;
    border-radius: 50%;
    display: inline-block;
}

.health-dot.healthy {
    background: var(--success);
    box-shadow: 0 0 15px var(--success);
    animation: pulse-health 2s infinite;
}

@keyframes pulse-health {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Circular Progress Widget */
.circular-progress-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.conic-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--secondary) 0% 0%, rgba(255, 255, 255, 0.05) 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 1s ease-out;
}

.inner-circle {
    width: 80%;
    height: 80%;
    background: #0d1423;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
}

/* Chart Styles */
.cpu-chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#cpu-load-path {
    transition: points 0.5s ease-in-out;
}

/* CRT Effects */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg,
            rgba(255, 0, 0, 0.03),
            rgba(0, 255, 0, 0.01),
            rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 10;
}

.scanlines::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 0.2;
    }

    10% {
        opacity: 0.1;
    }

    15% {
        opacity: 0.15;
    }

    20% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.11;
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Skeleton Loading Themes --- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: #1a1a2e;
    /* Dark base color */
    background-image: linear-gradient(90deg,
            #1a1a2e 0px,
            #252a40 80px,
            /* Slightly lighter highlight */
            #1a1a2e 160px);
    background-size: 400% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
    opacity: 0.7;
}

/* Specific Skeleton Shapes */
.skeleton-text {
    height: 16px;
    margin-bottom: 10px;
    width: 100%;
}

.skeleton-text.short {
    width: 50%;
}

.skeleton-title {
    height: 24px;
    width: 70%;
    margin-bottom: 15px;
}

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    /* Mimics the main roadmap card structure */
    padding: 20px;
    border: 1px solid var(--border);
    background: rgba(13, 20, 35, 0.5);
    border-radius: 16px;
    height: 150px;
    /* Approximate height */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.skeleton-checklist-item {
    /* Mimics a topic item inside modal */
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- CHATBOT & NEW ADMIN STYLES --- */

/* Chat Window (Floating Glass Panel) */
#ai-chat-window {
    position: fixed;
    right: 20px;
    top: 100px;
    bottom: 100px;
    /* Aligned with side panel */
    width: 340px;
    /* Compact width */
    background: var(--glass);
    border: 1px solid var(--primary);
    border-radius: 12px;
    z-index: 50;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

#ai-chat-window.visible {
    transform: translateX(0);
}

.chat-header {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px 12px 0 0;
    font-weight: bold;
    color: var(--primary);
}

.close-chat-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.close-chat-btn:hover {
    color: white;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Chat Messages */
.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--primary);
    color: #000;
    border-radius: 10px 10px 0 10px;
}

.chat-msg.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border);
    color: #e6e6e6;
    border-radius: 10px 10px 10px 0;
}

/* Input Area */
.chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 12px 12px;
}

#chat-input {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    padding: 0 15px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid var(--border);
    outline: none;
}

#chat-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

#chat-send-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0 5px;
}

#chat-send-btn:hover {
    transform: scale(1.1);
}

/* Trigger Button */
/* Trigger Button - Neon Glassy & Floating */
@keyframes floatIcon {
    0% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

#chatbot-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 255, 0.2);

    /* Center Icon */
    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 90;
    cursor: pointer;

    /* Neon Glow Shadow */
    box-shadow:
        0 0 15px rgba(0, 242, 255, 0.3),
        inset 0 0 15px rgba(0, 242, 255, 0.1);

    transition: all 0.3s ease;

    /* Floating Animation */
    animation: floatIcon 4s ease-in-out infinite;
}

#chatbot-trigger:hover {
    /* Enhance Glow on Hover */
    box-shadow:
        0 0 30px rgba(0, 242, 255, 0.6),
        inset 0 0 20px rgba(0, 242, 255, 0.3);
    border-color: rgba(0, 242, 255, 0.8);

    /* Pause animation or just let it float? Let's scale slightly via animation override or wrapper.
        Since animation uses transform, simple scale here might conflict unless we use variables or !important.
        We'll just boost the glow.
    */
    animation-play-state: paused;
    transform: translateY(-5px) scale(1.1);
}

#chatbot-trigger svg {
    filter: drop-shadow(0 0 5px rgba(0, 242, 255, 0.5));
    /* Make the ship glow */
    transition: filter 0.3s;
}

#chatbot-trigger:hover svg {
    filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.9));
}

#chatbot-trigger.hidden {
    display: none !important;
}

/* Ghost Node */
/* Ghost Node Wrapper (Inherits .system-node) */
.ghost-node {
    /* No layout overrides needed - aligns like standard nodes */
}

/* Ghost Inner Planet */
.ghost-planet {
    /* Inherits .planet width/height (70px) & positioning */
    display: flex;
    /* Centers the '+' text */
    justify-content: center;
    align-items: center;

    border: 2px dashed var(--primary);
    border-radius: 50%;

    font-size: 2.5rem;
    color: var(--primary);

    background: rgba(0, 242, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);

    transition: all 0.3s ease;
}

.ghost-node:hover .ghost-planet {
    opacity: 1;
    background: rgba(0, 242, 255, 0.15);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5);
    transform: scale(1.1);
    border-style: solid;
    border-color: #fff;
    color: #fff;
}

.chat-msg {
    unicode-bidi: plaintext;
    /* بيحسن التعامل مع اللغات المختلطة */
    text-align: start;
    /* بيظبط المحاذاة حسب الـ dir */
}

.chat-msg pre,
.chat-msg code {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: normal !important;
}

.chat-msg ul,
.chat-msg ol {
    margin-inline-start: 20px;
    margin-inline-end: 0;
    padding-inline-start: 20px;
}


#chatbot-trigger.pushed-down {
    bottom: 10px !important;
    opacity: 0.8;
}

body.edit-mode #chatbot-trigger,
body.edit-mode #ai-chat-window {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}