/* Main Wrapper */
.pioneer-app-wrapper {
    display: flex; gap: 20px; font-family: Tahoma, Arial, sans-serif; height: 850px; box-sizing: border-box; background: #fff;
}

/* Sidebar Styling */
.pioneer-sidebar {
    width: 380px; background: #f8f9fa; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; overflow-y: auto; box-shadow: -2px 0 10px rgba(0,0,0,0.05); z-index: 10;
}
.sidebar-section { background: #ffffff; padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; }
.sidebar-section h3 { margin-top: 0; font-size: 16px; color: #004085; border-bottom: 2px solid #e3f2fd; padding-bottom: 5px; }
.help-text { font-size: 12px; color: #666; margin-bottom: 10px; }

/* Form Inputs & Buttons */
.input-group { margin-bottom: 10px; width: 100%; }
.input-group label { display: block; font-weight: bold; font-size: 13px; margin-bottom: 4px; color: #333; }
.input-group input, .input-group textarea, .input-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; box-sizing: border-box; }
.input-row { display: flex; gap: 10px; }
.file-input { margin-bottom: 10px; width: 100%; }

.btn { display: block; width: 100%; padding: 10px; border: none; border-radius: 6px; font-weight: bold; font-family: inherit; cursor: pointer; text-align: center; transition: 0.2s; }
.btn-primary { background: #0056b3; color: white; }
.btn-primary:hover { background: #004494; }
.btn-secondary { background: #6c757d; color: white; }
.btn-success { background: #28a745; color: white; padding: 12px; font-size: 15px;}
.btn-danger { background: #dc3545; color: white; padding: 5px; margin-top: 5px;}

/* AI Output Box */
.ai-text-result { background: #e3f2fd; padding: 10px; border: 1px solid #b6d4fe; border-radius: 6px; margin-top: 10px; min-height: 100px; font-size: 14px; white-space: pre-wrap; overflow-y: auto; max-height: 200px; outline: none; }

/* =========================================
   CANVAS & DOT GRID STYLING
   ========================================= */
.pioneer-canvas-area {
    flex: 1; border: 1px solid #ccc; border-radius: 8px; position: relative; overflow: hidden;
    /* Dot Grid Background */
    background-color: #f4f6f8;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 25px 25px;
}
#mindmap-container { width: 100%; height: 100%; }

/* =========================================
   TOP META BADGES (Pill Design)
   ========================================= */
#meta-badges-container {
    position: absolute; top: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; z-index: 100; pointer-events: none;
}
.meta-badge {
    padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: bold; border: 1px solid; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.badge-red { color: #e03131; border-color: #ffc9c9; background: #fff5f5; }
.badge-orange { color: #d9480f; border-color: #ffd8a8; background: #fff4e6; }
.badge-green { color: #2b8a3e; border-color: #b2f2bb; background: #ebfbee; }
.badge-purple { color: #862e9c; border-color: #eebefa; background: #f8f0fc; }
.badge-blue { color: #1864ab; border-color: #a5d8ff; background: #e7f5ff; }
.badge-gray { color: #495057; border-color: #ced4da; background: #f8f9fa; }

/* =========================================
   MIND ELIXIR NODE OVERRIDES
   ========================================= */
/* 1. The Central Title Node (Rounded Pill) */
me-root me-tpc {
    border-radius: 30px !important; border: 2px solid #ced4da !important; background: #ffffff !important;
    color: #333 !important; padding: 10px 20px !important; font-weight: bold !important; font-size: 18px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 2. Level 1 Nodes (Main Branches) */
me-children > me-wrapper > me-tpc {
    border-radius: 8px !important; background: #ffffff !important; color: #333 !important;
    padding: 8px 15px !important; font-weight: bold !important; font-size: 14px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); border: 1px solid #eee !important;
    /* We will use JS to add a colored left/right border dynamically based on the branch color */
}

/* 3. Level 2+ Nodes (Sub-branches / Bullet points) */
me-wrapper me-wrapper me-tpc {
    background: transparent !important; color: #555 !important; font-size: 13px !important; border: none !important; box-shadow: none !important;
}

/* 4. Thicken the lines slightly */
me-nodes svg path { stroke-width: 3px !important; }