/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(51, 65, 85, 0.5);
    /* slate-700 */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 65, 85, 0.8);
}

/* Textarea specific adjustments */
textarea.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

textarea.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 3px solid #1e293b;
    /* match panel bg */
}

/* Split.js Gutter */
.gutter {
    background-color: #334155;
    /* theme border */
    background-repeat: no-repeat;
    background-position: 50%;
    transition: background-color 0.2s;
    position: relative;
    z-index: 20;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="24" viewBox="0 0 10 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="8" x2="3" y2="16"></line><line x1="7" y1="8" x2="7" y2="16"></line></svg>');
    cursor: col-resize;
    width: 6px !important;
}

.gutter.gutter-vertical {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="10" viewBox="0 0 24 10" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="3" x2="16" y2="3"></line><line x1="8" y1="7" x2="16" y2="7"></line></svg>');
    cursor: row-resize;
    height: 6px !important;
}

.gutter:hover,
.gutter.is-dragging {
    background-color: #3b82f6;
    /* theme primary */
}

/* Device Frame Animation */
#device-frame {
    /* Adding a subtle border to the frame that separates it from canvas */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Checkerboard Background for Canvas */
.bg-checkerboard {
    background-color: #0f172a;
    /* Base dark bg */
    background-image:
        linear-gradient(45deg, #1e293b 25%, transparent 25%),
        linear-gradient(-45deg, #1e293b 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1e293b 75%),
        linear-gradient(-45deg, transparent 75%, #1e293b 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Code area tweaks */
#code-input {
    tab-size: 2;
}

/* Active Device Button */
.device-btn.active {
    background-color: #3b82f6;
    /* primary */
    color: white;
}