:root {
    /* Match styles.css — left rail width for Effect Builder + Component Builder */
    --app-left-panel-width: 420px;
}

/* Make the main split work using CSS Grid */
#main-split {
    display: grid;
    grid-template-columns: var(--app-left-panel-width) 1fr;
    height: 100%;
}

#component-properties {
    overflow-x: hidden;
}

/* Ensure panels can scroll independently if content overflows */
#left-panel {
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#left-panel .tab-content {
    min-height: 0;
}

#right-panel {
    height: 100%;
    overflow: auto;
}

#right-panel-top {
    flex-grow: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: #2b3035;
    /* This is the main background */
}

/* --- UPDATED SECTION --- */
/* This forces the container from your HTML to fill the panel */
#component-canvas-container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent;
    /* CHANGED - removed !important */
    overflow: hidden !important;
    position: relative;
}

/* The canvas now fills its container */
#componentCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    touch-action: none;
}

/* --- END UPDATED SECTION --- */


/* SortableJS helper classes */
.sortable-ghost {
    opacity: 0.4;
    background: #555;
}

.sortable-drag {
    opacity: 0.9;
}

/* Custom styling for element list items */
.element-item {
    cursor: grab;
}

.element-item:active {
    cursor: grabbing;
}

/* Smaller form labels */
.form-label-sm {
    font-size: 0.875em;
    margin-bottom: 0.25rem;
}

/* Add these rules to your styles.css */
#json-preview {
    white-space: pre-wrap;
    word-wrap: break-word;
    user-select: all;
    /* Add this line */
    -webkit-user-select: all;
    /* For Safari/iOS */
    -moz-user-select: all;
    /* For Firefox */
    -ms-user-select: all;
    /* For IE/Edge */
}

/* Optional: Make the code block inside scroll if needed */
#json-preview code {
    display: block;
    /* Ensures the code block respects the pre tag's width */
    max-height: 300px;
    /* Keep the existing max-height */
    overflow: auto;
    /* Add scrollbars if content still overflows vertically */
}

/* --- Shape Gallery --- */
.shape-gallery {
    display: grid;
    /* Create columns at least 80px wide, fitting as many as possible */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    /* Space between buttons */
}

.shape-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
    height: 80px;
    /* Give buttons a consistent height */
}

.shape-gallery-item small {
    line-height: 1;
    /* Make text compact */
    font-size: 0.75rem;
}

/* Make the icon non-clickable so it doesn't interfere with the button click */
.shape-gallery-item i {
    pointer-events: none;
}

:root {
    /* Define a custom variable for the canvas background, initially set to a default dark color */
    --srgb-canvas-bg: #343a40;
}

/* Set the default container background */
#component-canvas-container {
    max-width: 100% !important;
    height: 100% !important;
    flex-grow: 1 !important;
    /* Forces the container to stretch to the bottom of the screen */
    aspect-ratio: auto !important;
    /* Removes the constrained box shape */
}

/* Ensure the tertiary background is defined by Bootstrap or your custom theme */
[data-bs-theme="dark"] {
    /* (This should be set by Bootstrap, often a darker shade of primary background) */
    --bs-tertiary-bg: #2b3035;
}

[data-bs-theme="light"] {
    /* (A lighter shade for panel/card backgrounds) */
    --bs-tertiary-bg: #f8f9fa;
}

#component-canvas-container {
    /* Uses the main body background color (light or dark) */
    background-color: var(--bs-body-bg);
}

.gallery-image-container {
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

.gallery-image-container:hover {
    filter: brightness(1.2);
}

/* --- Image Paste Zone --- */
#image-paste-zone {
    outline: none;
    /* Remove focus ring from contenteditable */
    caret-color: transparent;
    /* Hide cursor */
}

/* Hide placeholder when image is shown */
#image-paste-zone img:not([style*="display: none"])+#image-paste-placeholder {
    display: none;
}

/* Show placeholder when image is hidden */
#image-paste-zone img[style*="display: none"]+#image-paste-placeholder {
    display: block;
}

/* --- Image Paste Zone Fix --- */
/*
  This rule hides any direct child of the paste zone that is NOT
  our official image preview OR our official placeholder.
  This prevents the browser from inserting its own pasted
  image and messing up the layout.
*/
#image-paste-zone>*:not(#image-preview):not(#image-paste-placeholder) {
    display: none !important;
}

/* --- Drag and Drop Feedback --- */
#image-paste-zone.drag-over {
    border-color: var(--bs-primary) !important;
    border-width: 2px !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

.comment-item {
    display: flex;
    gap: 0.75rem;
    /* 12px */
    margin-bottom: 1rem;
    /* 16px */
    font-size: 0.875rem;
    /* 14px */
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Prevent avatar from shrinking */
}

.comment-body {
    flex-grow: 1;
}

.comment-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    /* 8px */
    margin-bottom: 0.25rem;
}

.comment-author {
    font-weight: 600;
    color: var(--bs-body-color);
}

.comment-date {
    font-size: 0.75rem;
    /* 12px */
    color: var(--bs-secondary-color);
}

.comment-text {
    color: var(--bs-body-color);
    white-space: pre-wrap;
    /* Respect newlines */
    word-break: break-word;
    /* Break long words */
}

.comment-delete a {
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.comment-delete a:hover {
    opacity: 1;
}

/* --- Kebab Menu Button --- */
.btn-kebab {
    background: transparent;
    border: none;
    color: var(--bs-body-color);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    font-size: 1.25rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-kebab:hover,
.btn-kebab:focus {
    opacity: 1;
    color: var(--bs-primary);
}

/* Make the brand area look like a clickable button on hover */
.brand-dropdown-toggle {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Subtle background highlight */
.brand-dropdown-toggle:hover,
.brand-dropdown-toggle[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Base style for the chevron icon */
.dropdown-indicator {
    font-size: 0.8rem;
    opacity: 0.8;
    transition: transform 0.3s ease-in-out;
}

/* Rotate the arrow 180 degrees when the menu is open */
.brand-dropdown-toggle[aria-expanded="true"] .dropdown-indicator {
    transform: rotate(-180deg);
    color: var(--bs-primary);
}

/* Creates a radar-like ripple effect */
@keyframes load-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.8);
        background-color: rgba(13, 110, 253, 0.2);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(13, 110, 253, 0);
        background-color: transparent;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
        background-color: transparent;
    }
}

/* Apply this class to the element you want to grab attention */
.pulse-on-load {
    /* Runs the 1.5 second animation exactly 2 times, then stops forever */
    animation: load-pulse 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 2;
    border-radius: 0.5rem;
}

/* Navbar above app toolbar so dropdowns (language, brand, etc.) are not covered */
nav.navbar {
    position: relative;
    z-index: 1030;
}

/* Secondary toolbar below navbar — match Effect Builder */
#toolbar.app-subtoolbar {
    z-index: 2;
}

/* Canvas toolbar — same rules as www/styles.css (outline / disabled / active) */
#toolbar.app-subtoolbar .btn-group.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14) !important;
}

#toolbar.app-subtoolbar .btn-group > .btn {
    position: relative;
    box-sizing: border-box;
    --bs-btn-border-width: 1px;
    border-width: 1px !important;
    box-shadow: none !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#toolbar.app-subtoolbar .btn-group > .btn:not(:disabled):not(.disabled) {
    border-style: solid !important;
}

#toolbar.app-subtoolbar .btn-group > .btn:hover:not(:disabled):not(.disabled),
#toolbar.app-subtoolbar .btn-group > .btn:focus-visible {
    z-index: 1;
    box-shadow: none !important;
}

#toolbar.app-subtoolbar .btn-group > .btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

#toolbar.app-subtoolbar .btn-group > .btn.active:not(:disabled) {
    z-index: 2;
}

#toolbar.app-subtoolbar .btn-group > .btn.btn-primary {
    box-shadow: none !important;
}

#toolbar.app-subtoolbar .btn.btn-outline-secondary:not(:disabled):not(.disabled) {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-border-color: rgba(var(--bs-emphasis-rgb), 0.45);
    --bs-btn-bg: rgba(var(--bs-emphasis-rgb), 0.07);
}

#toolbar.app-subtoolbar .btn.btn-outline-secondary:not(:disabled):not(.disabled):hover {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
}

#toolbar.app-subtoolbar .btn.btn-outline-info:not(:disabled):not(.disabled):not(.active) {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: rgba(var(--bs-info-rgb), 0.65);
    --bs-btn-bg: rgba(var(--bs-info-rgb), 0.08);
}

#toolbar.app-subtoolbar .btn.btn-outline-info:not(:disabled):not(.disabled):not(.active):hover {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-color: var(--bs-white);
}

#toolbar.app-subtoolbar .btn.btn-outline-danger:not(:disabled):not(.disabled) {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: rgba(var(--bs-danger-rgb), 0.65);
    --bs-btn-bg: rgba(var(--bs-danger-rgb), 0.06);
}

#toolbar.app-subtoolbar .btn.btn-outline-danger:not(:disabled):not(.disabled):hover {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-color: #fff;
}

#toolbar.app-subtoolbar .btn.btn-outline-secondary.active:not(:disabled),
#toolbar.app-subtoolbar .btn.btn-outline-info.active:not(:disabled) {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: #fff;
}

#toolbar.app-subtoolbar .btn.btn-outline-secondary.active:not(:disabled):hover,
#toolbar.app-subtoolbar .btn.btn-outline-info.active:not(:disabled):hover {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
}

#toolbar.app-subtoolbar .btn.btn-outline-secondary:disabled,
#toolbar.app-subtoolbar .btn.btn-outline-secondary.disabled,
#toolbar.app-subtoolbar .btn.btn-outline-info:disabled,
#toolbar.app-subtoolbar .btn.btn-outline-danger:disabled {
    opacity: 0.4;
    border-style: dashed;
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-bg: transparent;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS (Read-Only View Mode)              */
/* -------------------------------------------------------- */
@media (max-width: 992px) {
    /* Stack layout */
    #main-split {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 1. HIDE the editing tools: Left Panel & Canvas Toolbar */
    #left-panel,
    #toolbar {
        display: none !important;
    }

    /* 2. Expand Canvas to take up the whole screen */
    #right-panel {
        width: 100% !important;
        height: 100% !important; 
        flex-grow: 1;
    }

    /* 3. SHOW the read-only component header */
    #mobile-component-header {
        display: block !important;
    }

    /* 4. Canvas sizing fixes */
    #component-canvas-container {
        max-width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important; 
    }

    #componentCanvas {
        max-width: 100% !important;
        height: 100% !important;
    }

    /* 5. Hide Top Nav editing actions (optional, keeps nav clean) */
    #new-component-btn,
    #save-component-btn,
    #import-json-btn {
        display: none !important;
    }
}

/* Extra small devices */
@media (max-width: 576px) {

    /* Hide the coordinate tracker */
    #coords-display,
    .bi-crosshair {
        display: none !important;
    }

    .navbar-brand img {
        height: 1.2em !important;
    }
}

/* Prevent navbar button text from wrapping under the icons */
.navbar .btn {
    white-space: nowrap;
}

/* --- Featured Component Highlight --- */
.card.border-warning {
    border-width: 2px !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
    /* Subtle gold glow */
}

.featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    /* Ensure it stays above the kebab menu and image */
    pointer-events: none;
    /* Allows clicks to pass through to the image below */
}

/* Adjust the kebab menu position so it doesn't fight with the badge */
.card.position-relative .dropdown {
    z-index: 21;
}

#component-canvas-container {
    touch-action: none;
    /* CRITICAL: Prevents browser scrolling when touching canvas */
}

/* --- Refactored Inline Styles --- */
.brand-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.brand-toggle-btn {
    cursor: pointer;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
}

.brand-logo-img {
    height: 1.5em;
}

.custom-dropdown-menu {
    right: 0;
    left: auto;
    margin-top: 10px;
    min-width: 220px;
}

.notification-dropdown-menu {
    min-width: 300px;
}

.scrollable-list-large {
    max-height: 400px;
    overflow-y: auto;
}

.scrollable-list-medium {
    max-height: 250px;
    overflow-y: auto;
}

.pointer-events-none {
    pointer-events: none;
}

.profile-photo-sm {
    width: 24px;
    height: 24px;
}

.image-paste-zone {
    cursor: copy;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    transition: all 0.2s ease;
}

.img-preview-max {
    max-width: 100%;
}

.canvas-hud-panel {
    background: rgba(33, 37, 41, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10 !important; /* Force it to the front */
}

.coords-min-width {
    min-width: 70px;
}

.hud-vertical-divider {
    height: 20px;
}

.view-count-static {
    opacity: 1;
    border-color: var(--bs-border-color);
}

.textarea-no-resize {
    resize: none;
}

.toast-container-top {
    z-index: 99999;
}

.toast-large {
    width: 350px;
    font-size: 1.1rem;
}

.offcanvas-wide {
    width: 500px;
}

.json-preview-box {
    max-height: 300px;
    overflow: auto;
    background-color: var(--bs-tertiary-bg);
    padding: 10px;
    border-radius: 5px;
}

/* --- Attention-grabbing pulse for the New badge --- */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.8);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.pulse-badge {
    animation: pulse-red 2s infinite;
}

/* --- Rainbow RGB Animation --- */
@keyframes rainbow-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.rgb-animate {
    color: #ff0000 !important; /* Base color for hue-rotation */
    animation: rainbow-shift 5s linear infinite;
}

/* Optional: Make it only animate when you hover over the button */
.shape-gallery-item:hover .rgb-animate {
    animation-duration: 1.5s; /* Speeds up on hover */
}