/* Make the main split work using CSS Grid */
#main-split {
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Left panel 350px, right panel takes rest */
    height: 100%;
}

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

/* Ensure panels can scroll independently if content overflows */
#left-panel {
    height: 100%;
    overflow-y: auto;
    /* Allow vertical scroll */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

#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);
}

/* --------------------------------------------------------
   GTranslate Custom Styling (Bootstrap Dark Theme)
   -------------------------------------------------------- */

/* 1. Target the selector inside the wrapper */
.gtranslate_wrapper select {
    /* Base Button Styling */
    background-color: #2b3035 !important;
    /* Bootstrap Dark Gray */
    color: #fff !important;
    /* White Text */
    border: 1px solid #495057 !important;
    /* Dark Border */
    border-radius: 6px !important;
    /* Bootstrap Rounded Corners */
    padding: 6px 36px 6px 12px !important;
    /* Padding (Right extra for arrow) */
    font-size: 14px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    outline: none !important;

    /* 2. Custom White Arrow (Replaces default black arrow) */
    appearance: none !important;
    /* Hides native browser arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 12px !important;
}

/* 3. Hover Effect */
.gtranslate_wrapper select:hover {
    background-color: #343a40 !important;
    border-color: #6c757d !important;
}

/* 4. Focus/Active Effect (Blue Glow) */
.gtranslate_wrapper select:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 5. Hide the floating popup if it ever tries to appear */
#goog-gt-tt {
    display: none !important;
}

/* STABILIZE THE GOOGLE GLOBE (Robust Version) */

/* 1. Target the first DIV inside your wrapper */
/* This catches the container regardless of its weird class name */
#google_translate_element>div {
    z-index: 10000 !important;
    position: fixed !important;

    /* Hardware acceleration to stop flickering */
    transform: translate3d(0, 0, 0) !important;
    will-change: transform;
    backface-visibility: hidden;

    /* Position settings */
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
}

/* 2. Target the SVG (The actual globe graphic) */
/* This ensures the vector graphic itself is stable */
#google_translate_element svg {
    transform: translateZ(0);
    shape-rendering: geometricPrecision;
    width: 48px !important;
    /* Optional: Enforce a stable size */
    height: 48px !important;
}

/* 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;
}

/* -------------------------------------------------------- */
/* 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 */
}