body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent scroll on main body */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #1e1e1e;
    color: #e0e0e0;
}

#app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

#canvas-area {
    flex: 1;
    /* Takes remaining space */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.2s;

    /* Padding to prevent cramping */
    padding: 40px;
    box-sizing: border-box;

    /* Non-exported area: Solid #000 */
    background-color: #000000;
}

#canvas-area.drag-over {
    background-color: #222;
    /* Slightly lighter on drag over */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
}

#canvas-placeholder {
    text-align: center;
    color: #888;
    /* Lighter text for contrast on #666 */
    pointer-events: none;
    /* Let clicks pass through to container */
}

#main-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
    /* Hidden until loaded */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);

    /* Transparent area: Standard Light Checkerboard */
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bg-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #444;
    transition: all 0.2s;
    background-size: cover;
    /* For gradients */
}

.bg-thumb:hover {
    border-color: #888;
    transform: scale(1.05);
}

.bg-thumb.active {
    border-color: #0d6efd;
    /* Bootstrap Primary */
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.5);
}

/* Specific thumb styles will be set via JS inline styles or utility classes */
.bg-thumb.transparent {
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 10px 10px;
    background-color: #fff;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.iddqd-link {
    transition: color 0.2s;
}

.iddqd-link:hover {
    color: #e0e0e0 !important;
    /* Lighter than text-secondary */
    text-decoration: underline !important;
}

#control-panel {
    width: 320px;
    /* Fixed width for controls */
    background-color: #1e1e1e;
    border-left: 1px solid #333;
    /* padding: 20px; Moved to wrapper */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#panel-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}

#control-panel h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    flex-shrink: 0;
    /* Don't shrink title */
}

/* Scrollable content in control panel if needed */
.panel-content {
    flex: 1;
    overflow-y: visible;
    /* Let parent handle scroll */
}


/* --- Mobile Layout & Responsive Styles --- */

/* Tool Sections */
.tool-section {
    /* Desktop: Always visible by default (block) */
    display: block;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1.5rem;
}

.tool-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#tool-container {
    /* Removed individual scroll */
    /* Custom Scrollbar for dark theme */
    scrollbar-width: thin;
    scrollbar-color: #555 #1e1e1e;
}


/* Mobile Navigation Bar */
#mobile-nav-bar {
    height: 60px;
    background-color: #252525;
    border-top: 1px solid #333;
    display: flex;
    /* Overridden by d-md-none in HTML but good to have base */
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
}

.nav-btn {
    background: none;
    border: none;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    padding: 5px;
    flex: 1;
    height: 100%;
    transition: all 0.2s;
}

.nav-btn:hover {
    color: #bbb;
    background-color: #2a2a2a;
}

.nav-btn.active {
    color: #0d6efd;
    background-color: #2d2d2d;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #0d6efd;
}

/* Mobile Specific Overrides */
@media (max-width: 768px) {
    #app-container {
        flex-direction: column;
    }

    #canvas-area {
        width: 100%;
        flex: 1;
        /* Takes available space */
        padding: 20px;
        background-color: #000;
        /* Ensure bg is solid */
    }

    #control-panel {
        width: 100%;
        height: 45%;
        /* Usage of height in column layout. Adjust based on preference. User said "Canvas Top (Most), Function Bar Bottom". So panel should be small? Or Panel IS the area for function details? 
        The "Function Bar" is the bottom nav. When clicked, it shows the controls.
        So #control-panel needs to contain the active tool controls.
        Let's give it fixed height or max-height. 40-50% seems reasonable for controls. */
        border-left: none;
        border-top: 1px solid #333;
        display: flex;
        flex-direction: column;
        padding: 0;
        /* Remove container padding */
    }

    #panel-content-wrapper {
        padding: 15px;
        /* Apply padding to content */
    }

    #tool-container {
        padding-bottom: 10px;
    }

    /* In Mobile, hide all tools except active */
    .tool-section {
        display: none;
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
        animation: fadeIn 0.3s;
    }

    .tool-section.active {
        display: block;
    }

    .section-title {
        display: none;
        /* Hide repetitive title in tool if clearer context provided, or keep? User requested "Canvas Top, Function bar bottom".
        Usually mobile editors show just the slider/controls. Title is redundant if tab is active.
        Let's hide specific titles if they are redundant with buttons, but keep for now.
        Actually, let's keep them for clarity. */
        display: block;
        font-size: 0.9rem;
        color: #888;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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