/**
 * Pixelite: Real-time collaborative pixel art editor with animation support
 * Copyright (C) RETORA 2026
 * Licensed under the Pixelite License (see LICENSE file for full terms)
 * 
 * Source: https://github.com/RetoraDev/pixelite
 * Version: v1.0.1 dev
 * Built: 3/27/2026, 5:57:11 AM
 * Platform: Development
 * Debug: false
 * Minified: false
 */

/*
  General Styles
*/
body {
  --primary-color: #ff5722;
  --secondary-color: #2196f3;
  --bg-color: #2d2d2d;
  --ui-color: #3d3d3d;
  --ui-highlight: #4d4d4d;
  --ui-backdrop: rgba(45, 45, 45, 0.9);
  --text-color: #e0e0e0;
  --text-dim: #a0a0a0;
  --border-color: #1d1d1d;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --svg-filter: none;
  --transparent-bg: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
}

/* Themes */
body.theme-light {
  --primary-color: #ff7036;
  --secondary-color: #2196f3;
  --bg-color: #e0e0e0;
  --ui-color: #f0f0f0;
  --ui-highlight: #ffffff;
  --ui-backdrop: rgba(192, 192, 192, 0.8);
  --text-color: #0e0e0e;
  --text-dim: #000000;
  --border-color: #d1d1d1;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --svg-filter: invert();
}

body.theme-dark {}

/* reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

input, select {
  outline: none;
}

a {
  color: var(--primary-color);
}

button {
  transition: filter 0.3s;
}

button:hover,
button:active {
  filter: brightness(120%);
}

/*
  Error Screen
*/
.editor-loading,
.editor-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.editor-error {
  padding: 20px;
  text-align: center;
}

.editor-error button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/*
  Loading Screen
*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: wait;
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  color: white;
  font-size: 16px;
}

/*
  App Containers
*/
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.pixel-art-editor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.editor-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

.editor-canvas {
  position: absolute;
  transform-origin: center center;
  background-color: #fff;
  background-image: var(--transparent-bg);
  background-size: 16px 16px;
  background-position: 0 0;
  box-shadow: 0 0 16px var(--shadow-color);
}

.canvas-wrapper {
  transition: transform var(--transform-transition);
}

#debug-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.editor-overlay-layer {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  overflow: hidden;
  touch-action: none;
  pointer-events: none;
}

.editor-overlay-layer > * {
  pointer-events: auto;
}

.editor-ui {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.editor-ui > * {
  pointer-events: auto;
}

.ui-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: var(--ui-color);
  box-shadow: 0 2px 5px var(--shadow-color);
  transition: transform 0.3s;
}

.ui-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: var(--ui-color);
  box-shadow: 0 -2px 5px var(--shadow-color);
}

.ui-button {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.ui-button:hover {
  background-color: var(--ui-highlight);
}

.ui-button.active {
  background-color: var(--primary-color);
}

.ui-button:disabled {
  opacity: 0.3;
}

.ui-button:disabled:hover {
  background-color: transparent;
}

.ui-button .icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ui-button.highlight {
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.undo-redo-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.canvas-resize-controls {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

.canvas-resize-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background-color: var(--primary-color);
  pointer-events: auto;
}

.canvas-resize-edge:hover,
.canvas-resize-edge:active {
  background-color: var(--secondary-color);
}

.canvas-resize-edge.vertical {
  width: 1px;
}

/*
  Brush Size Indicator
*/
.brush-size-indicator {
  position: absolute;
  top: 50px;
  right: 10px;
  background-color: var(--ui-color);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  text-align: center;
  gap: 5px;
}

.brush-size-text {
  font-size: 12px;
  color: var(--text-color);
}

.brush-size-indicator progress {
  width: 100%;
  height: 8px;
  border-radius: 3px;
  background-color: var(--bg-color);
}

.brush-size-indicator progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: 3px;
}

.brush-size-indicator progress::-webkit-progress-value {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.brush-size-indicator progress::-moz-progress-bar {
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* Color Indicator */
.color-indicator {
  display: flex;
  height: 30px;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 2px var(--border-color);
}

.color-primary,
.color-secondary {
  flex: 1;
}

.color-primary {
  background-color: var(--primary-color);
}

.color-secondary {
  background-color: var(--secondary-color);
}

.color-selector {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border: 2px solid white;
  box-sizing: border-box;
  transition: left 0.2s;
  pointer-events: none;
}

.color-selector.secondary {
  left: 50%;
}

/*
  Generic Add Button
*/
.add-button {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background-color: var(--ui-highlight);
  border: 2px dashed var(--border-color);
}

.add-button:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.add-button-icon {
  margin-bottom: 5px;
}

.add-button-icon svg {
  color: var(--text-dim);
}

.add-button:hover .add-button-icon svg {
  color: white;
}

/*
  Undo Toast
*/
.toast-with-button {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background-color: var(--ui-color);
  color: var(--text-color);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideUp 0.3s ease;
}

.toast-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.toast-button:hover {
  background-color: var(--primary-color);
}

/* Notification */
.notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ui-color);
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 10px var(--shadow-color);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.notification.visible {
  opacity: 1;
}

/* Operation message */
.operation-message {
  position: fixed;
  bottom: 60px;
  left: 8px;
  color: var(--text-color);
  font-size: 0.7em;
  transition: opacity 0.3s;
  background: var(--shadow-color);
  padding: 4px;
  opacity: 0;
  pointer-events: none;
}

.operation-message.visible {
  opacity: 1;
}

/*
  Bottom Menus
*/
.tool-selection-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-button-container {
  position: relative;
}

.tool-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--ui-color);
  border-radius: 4px;
  box-shadow: 0 2px 10px var(--shadow-color);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.tool-dropdown.visible {
  display: flex;
}

.tool-dropdown .ui-button {
  margin: 2px;
  width: 36px;
  height: 36px;
}

/* Tool Settings */
.tool-settings-popup {
  position: fixed;
  background-color: var(--ui-color);
  left: 0;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 10px var(--shadow-color);
  min-width: 200px;
  margin-bottom: 10px;
}

.tool-settings-popup h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text-color);
}

.tool-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tool-setting label {
  color: var(--text-color);
  margin-right: 10px;
}

.tool-setting input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.tool-setting input[type="number"] {
  width: 60px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
}

/* Current tool button */
#current-tool {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#current-tool .icon {
  width: 28px;
  height: 28px;
}

/* Tool switch button */
#switch-tool,
#tool-settings {
  background-color: var(--ui-highlight);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#switch-tool .icon,
#tool-settings .icon {
  width: 24px;
  height: 24px;
}

/*
  Color Pick Line Styles 
*/
.color-pick-line {
  position: fixed;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  pointer-events: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  transform-origin: 0 0;
}

.color-pick-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
  pointer-events: none;
}

.color-pick-line {
  animation: colorPickPulse 0.3s ease-in-out infinite;
}

/* Add visual feedback when dragging from color indicator */
.color-indicator.dragging {
  transform: scale(1.1);
  box-shadow: 0 0 10px #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
  Timelapse Export Progress
*/
.timelapse-progress progress {
  width: 100%;
  height: 20px;
  border-radius: 3px;
  background-color: var(--bg-color);
}

.timelapse-progress progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: 3px;
}

.timelapse-progress progress::-webkit-progress-value {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.timelapse-progress progress::-moz-progress-bar {
  background-color: var(--primary-color);
  border-radius: 3px;
}

.progress-text {
  font-size: 12px;
  color: var(--text-dim);
}

/* Bottom Confirmation buttons for transformation screens */
.bottom-confirmation {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 10px;
  background: var(--ui-color);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
}

.confirm-accept,
.confirm-cancel {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  min-width: 100px;
}

.confirm-accept {
  background-color: var(--ui-primary);
  color: var(--text-color);
}

.confirm-cancel {
  background-color: transparent;
  color: var(--text-color);
}

/* Floating Delete Zone */
.delete-zone {
  position: fixed;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  display: flex;
  background-color: var(--shadow-color);
  border: 2px dashed var(--border-color);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: default;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.delete-zone.visible {
  opacity: 1;
  pointer-events: auto;
  bottom: 80px;
}

.delete-zone.drag-over {
  background-color: rgba(255, 0, 0, 0.3);
  border-color: #ff4444;
  transform: translateX(-50%) scale(1.1);
  animation: pulse-delete-zone 0.5s ease-in-out infinite;
}

.delete-zone svg {
  width: 24px;
  height: 24px;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.delete-zone.drag-over svg {
  color: #ff4444;
  transform: scale(1.2);
}

/*
  Icons
*/
.icon {
  filter: var(--svg-filter);
}

/* General Icons */
.icon-menu {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>');
}
.icon-animation {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
}
.icon-layers {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg>');
}
.icon-grids {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 3h4v4H3V3zm7 0h4v4h-4V3zm7 0h4v4h-4V3zM3 10h4v4H3v-4zm7 0h4v4h-4v-4zm7 0h4v4h-4v-4zM3 17h4v4H3v-4zm7 0h4v4h-4v-4zm7 0h4v4h-4v-4z"/></svg>');
}
.icon-switch-tool {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/></svg>');
}
.icon-undo {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>');
}
.icon-redo {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>');
}
.icon-settings {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>');
}
.icon-palette {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 8.5H15.51M10.5 7.5H10.51M7.5 11.5H7.51M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.6569 19.6569 15 18 15H17.4C17.0284 15 16.8426 15 16.6871 15.0246C15.8313 15.1602 15.1602 15.8313 15.0246 16.6871C15 16.8426 15 17.0284 15 17.4V18C15 19.6569 13.6569 21 12 21ZM16 8.5C16 8.77614 15.7761 9 15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5ZM11 7.5C11 7.77614 10.7761 8 10.5 8C10.2239 8 10 7.77614 10 7.5C10 7.22386 10.2239 7 10.5 7C10.7761 7 11 7.22386 11 7.5ZM8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5Z" stroke="%23ffffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-add {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
}
.icon-remove {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.icon-copy {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}
.icon-cut {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></svg>');
}
.icon-paste {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>');
}
.icon-transform {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 18v-2H8V4h2L7 1 4 4h2v2H2v2h4v8c0 1.1.9 2 2 2h8v2h-2l3 3 3-3h-2v-2h4zM10 8h6v6h2V8c0-1.1-.9-2-2-2h-6v2z"/></svg>');
}
.icon-clear {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.icon-unselect {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.icon-close {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.icon-check {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}
.icon-play {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
}
.icon-pause {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
}
.icon-prev {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>');
}
.icon-next {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>');
}
.icon-up {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41z"/></svg>');
}
.icon-down {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42z"/></svg>');
}
.icon-visible {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z"/></svg>');
}
.icon-hidden {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.83 9L15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3 2 4.27z"/></svg>');
}
.icon-merge-up {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 14l5-5 5 5H7z"/><path d="M5 16h14v2H5z"/></svg>');
}
.icon-merge-down {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5H7z"/><path d="M5 6h14v2H5z"/></svg>');
}
.icon-trace {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.icon-floating {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 4h-4v4h4V7zm-6 0H7v4h4V7zm6 6h-4v4h4v-4zm-6 0H7v4h4v-4z"/></svg>');
}
.icon-download {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

/* Tool Icons */
.tool-pencil, .icon-pencil {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.tool-eraser {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 0 1-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0zM4.22 15.58l3.54 3.53c.78.79 2.04.79 2.83 0l3.53-3.53-4.95-4.95-4.95 4.95z"/></svg>');
}
.tool-line {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 13H5v-2h14v2z"/></svg>');
}
.tool-rect {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M4 6v12h16V6H4z" stroke="white" stroke-width="2"/></svg>');
}
.tool-ellipse {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 4C7.58 4 4 7.58 4 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>');
}
.tool-bucket {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="invisible_box" data-name="invisible box"><rect width="48" height="48" fill="none"/></g><g id="Layer_6" data-name="Layer 6"><g><path fill="white" d="M16.5,2.6A1.8,1.8,0,0,0,15.1,2a2,2,0,0,0-1.4.6,1.9,1.9,0,0,0,0,2.8L19.4,11,6.2,24.1a3.9,3.9,0,0,0,0,5.6L19.4,42.8A3.8,3.8,0,0,0,22.2,44,3.9,3.9,0,0,0,25,42.8L41,26.9ZM9.1,26.9l13.1-13,13,13Z"/><path fill="white" d="M41,32s-4,5.8-4,8a4,4,0,0,0,8,0C45,37.8,41,32,41,32Z"/></g></g></g></svg>');
}
.tool-pipette {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.71 5.63l-2.34-2.34a.996.996 0 0 0-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>');
}

/* File Browser Icons */
.folder {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}
.image-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-4.86 8.86l-3 3.87-1.14-1.33-3.58 4.6h12l-3.86-5.14z"/></svg>');
}
.text-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-8 18V4h7v5h5v11H6z"/></svg>');
}
.project-file {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235a6268" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-8 18V4h7l5 5v8.58l-1.84-1.84c1.28-1.94 1.07-4.57-.64-6.28a4.22 4.22 0 00-3-1.46c-1.28 0-2.55.49-3.53 1.46-1.95 1.95-1.95 5.11 0 7.05a4.22 4.22 0 003 1.46c.96 0 1.92-.28 2.75-.83L17.6 20H6z"/></svg>');
}

/* Settings Icons */
.icon-general {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>');
}
.icon-editor {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.icon-canvas {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 9h10V7H7v2zm0 4h10v-2H7v2zm0 4h6v-2H7v2z"/></svg>');
}
.icon-performance {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>');
}
.icon-accessibility {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></svg>');
}
.icon-collab {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-1 .05 1.16.84 2 1.87 2 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
}
.icon-user {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/></svg>');
}

/*
  Menu Panel
*/
.menu-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.menu-panel-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.menu-panel-overlay.visible .menu-panel {
  transform: translateX(0);
  box-shadow: 2px 0 5px var(--shadow-color);
}

.menu-panel {
  position: absolute;
  top: 40px;
  left: 0;
  width: 250px;
  height: calc(100% - 90px);
  background-color: var(--ui-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
}

.menu-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
  overflow-x: scroll;
}

.menu-tab {
  padding: 8px 15px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background 0.3s;
}

.menu-tab:hover {
  background: var(--ui-highlight);
}

.menu-tab.active {
  border-bottom-color: var(--primary-color);
}

.menu-content {
  flex: 1;
  overflow-y: auto;
}

.menu-section {
  margin-bottom: 15px;
}

.menu-section h3 {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-dim);
}

.menu-item {
  padding: 8px 5px;
  cursor: pointer;
  border-radius: 4px;
}

.menu-item:hover {
  background-color: var(--ui-highlight);
}

/* Layers Panel */
.layers-panel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 360px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.layers-panel.visible {
  transform: translateX(0);
  box-shadow: 0 -4px 10px var(--shadow-color);
}

/* Panel header */
.panel-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
  height: 40px;
}

.panel-header .ui-button {
  width: 32px;
  height: 32px;
}

.panel-title {
  font-weight: bold;
  color: var(--text-color);
  flex: 1;
}

.panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.panel-close:hover {
  background-color: var(--bg-color);
}

/* Layers header */
.layers-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  gap: 4px;
  flex-shrink: 0;
}

.layers-header .ui-button {
  width: 32px;
  height: 32px;
}

/* Layers container */
.layers-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
}

/* Layer item */
.layer-item {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background-color: var(--bg-color);
  cursor: pointer;
  min-width: 70px;
  transition: all 0.2s ease;
  position: relative;
  height: 50px;
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}

.layer-item:last-child {
  border-bottom: none;
}

.layer-item.active {
  background-color: var(--primary-color);
}

.layer-item.active .layer-name {
  color: white;
}

.layer-item.dragging {
  opacity: 0.6;
  background-color: var(--primary-color);
}

/* Layer thumbnail */
.layer-thumb {
  width: auto;
  max-width: 72px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  align-content: center;
}

.layer-thumb canvas {
  width: 44px;
  height: 44px;
  display: block;
}

/* Layer name */
.layer-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
}

/* Layer actions */
.layer-actions {
  display: flex;
  gap: 2px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.layer-item:hover .layer-actions {
  opacity: 1;
}

.layer-actions .ui-button {
  width: 28px;
  height: 28px;
  border-radius: 3px;
}

.layer-actions .ui-button .icon {
  width: 16px;
  height: 16px;
}

/* Scrollbar */
.layers-container::-webkit-scrollbar {
  width: 6px;
}

.layers-container::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.layers-container::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 3px;
}

.layers-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-color);
}

/*
  Animation panel 
*/
.animation-panel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 180px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.animation-panel.visible {
  transform: translateY(0);
  box-shadow: 0 -4px 10px var(--shadow-color);
}

.timeline-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

.timeline-header .ui-button {
  width: 32px;
  height: 32px;
}

.fps-control {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.fps-control input {
  width: 50px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
}

.timeline-content {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  flex: 1;
}

.timeline-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  background-color: var(--bg-color);
  border-radius: 6px;
  cursor: pointer;
  min-width: 80px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.3s, transform 0.3s;
  will-change: transform, opacity;
}

.timeline-frame.active {
  background-color: var(--primary-color);
  transform: scale(1.05);
}

.timeline-frame.dragging {
  opacity: 0.6;
}

.frame-thumb {
  width: auto;
  max-width: 72px;
  height: 60px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  align-content: center;
  text-align: center;
  align-items: center;
  margin-bottom: 5px;
}

.frame-thumb canvas {
  width: 60px;
  height: 60px;
  display: block;
}

.frame-time {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  margin-bottom: 3px;
  cursor: pointer;
}

.frame-time:active, .frame-time:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--text-color);
}

.frame-number {
  font-size: 11px;
  font-weight: bold;
}

.animation-preview {
  position: absolute;
  right: 0px;
  width: 120px;
  height: auto;
  transform: translateY(-100%);
  border: 2px solid var(--border-color);
  background-color: #fff;
  background-image: var(--transparent-bg);
  background-size: 16px 16px;
  background-position: 0 0;
  display: none;
}

.animation-preview.visible {
  display: block;
}

/* Scrollbar styling for timeline */
.timeline-content::-webkit-scrollbar {
  height: 6px;
}

.timeline-content::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.timeline-content::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 3px;
}

.timeline-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-color);
}

/* Grid Panel */
.grid-panel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 360px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.grid-panel.visible {
  transform: translateY(0);
  box-shadow: 0 -4px 10px var(--shadow-color);
}

/* Panel Header */
.grid-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: var(--ui-highlight);
  border-bottom: 1px solid var(--border-color);
  height: 40px;
}

.grid-panel-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
}

.grid-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* Toolbar */
.grid-toolbar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--ui-color);
}

.grid-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.grid-btn.primary {
  background-color: var(--primary-color);
  color: white;
}

/* Grid List - Compact like layers */
.grid-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Grid Item - Like layer-item */
.grid-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  min-height: 56px;
}

.grid-item:last-child {
  border-bottom: none;
}

/* Grid Info */
.grid-info {
  flex: 1;
  min-width: 0;
}

/* Title row with inline inputs */
.grid-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.grid-dimension-input {
  width: 45px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  font-family: monospace;
}

.grid-dimension-input:focus {
  outline: none;
  background-color: var(--ui-highlight);
  border-radius: 3px;
}

.grid-dimension-input::-webkit-inner-spin-button,
.grid-dimension-input::-webkit-outer-spin-button {
  opacity: 0.5;
}

.grid-dimension-sep {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: bold;
}

.grid-color-inline {
  width: 28px;
  height: 24px;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 4px;
}

/* Opacity control */
.grid-controls-row {
  display: flex;
  align-items: center;
}

.grid-opacity-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.grid-opacity-label {
  color: var(--text-dim);
  font-size: 10px;
}

.grid-opacity-slider {
  width: 70px;
  height: 4px;
  -webkit-appearance: none;
  background: var(--ui-highlight);
  border-radius: 2px;
  outline: none;
}

.grid-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.grid-opacity-value {
  color: var(--text-dim);
  font-size: 10px;
  min-width: 32px;
}

/* Actions buttons - Like layer-actions */
.grid-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.grid-item:hover .grid-actions {
  opacity: 1;
}

.grid-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-action-btn:hover {
  background-color: var(--ui-highlight);
}

.grid-action-btn.disabled,
.grid-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.grid-action-btn .icon {
  width: 14px;
  height: 14px;
}

/* Empty state */
.grid-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-dim);
  font-style: italic;
}

/* Grid Overlay */
.grid-overlay {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

.grid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Scrollbar */
.grid-list::-webkit-scrollbar {
  width: 6px;
}

.grid-list::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.grid-list::-webkit-scrollbar-thumb {
  background: var(--ui-highlight);
  border-radius: 3px;
}

/*
  Popup
*/
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.popup-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Fullscreen overlay */
.popup-overlay.fullscreen {
  background-color: transparent;
  padding: 0;
}

.popup-content {
  background-color: var(--ui-color);
  border-radius: 4px;
  padding: 15px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.popup-overlay.fullscreen .popup-content {
  min-width: 100%;
  min-height: 100%;
  border-radius: 0;
  margin: 0;
}

.popup-title {
  margin-bottom: 15px;
  font-size: 18px;
  flex-shrink: 0;
}

.popup-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  flex-shrink: 0;
}

.popup-content input {
  width: 100%;
  padding: 5px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
  text-align: center;
}

.popup-buttons button {
  margin-left: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.popup-buttons .cancel {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.popup-buttons .confirm {
  background-color: var(--primary-color);
  border: none;
  color: var(--text-color);
}

/* Spritesheet Loader Styles */
.spritesheet-loader-container {
  width: 80vw;
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
}

@media (max-width: 600px) {
  .spritesheet-loader-container {
    width: 95vw;
    max-height: 85vh;
    padding: 12px;
  }
}

.spritesheet-main-content {
  display: flex;
  gap: 15px;
  flex: 0 0 auto;
  min-height: 0;
}

@media (max-width: 600px) {
  .spritesheet-main-content {
    flex-direction: column;
    gap: 15px;
    flex: 0 0 auto;
  }
}

.spritesheet-left-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 250px;
  max-height: 400px;
}

@media (max-width: 600px) {
  .spritesheet-left-side {
    min-height: 200px;
    max-height: 300px;
    width: 100%;
  }
}

.spritesheet-right-side {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  max-height: 400px;
}

@media (max-width: 600px) {
  .spritesheet-right-side {
    width: 100%;
    max-height: 350px;
    flex-shrink: 1;
  }
}

.spritesheet-section-label {
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 14px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .spritesheet-section-label {
    font-size: 13px;
    margin-bottom: 4px;
  }
}

.spritesheet-canvas-container {
  flex: 1;
  overflow: auto;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-color);
  position: relative;
  min-height: 150px;
  -webkit-overflow-scrolling: touch;
}

.spritesheet-full-canvas {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.spritesheet-preview-container {
  flex: 1;
  overflow-y: auto;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-color);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  max-height: none;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  .spritesheet-preview-container {
    min-height: 120px;
    max-height: 250px;
    padding: 6px;
  }
}

/* Scrollbar styling */
.spritesheet-preview-container::-webkit-scrollbar {
  width: 4px;
}

.spritesheet-preview-container::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.spritesheet-preview-container::-webkit-scrollbar-thumb {
  background: var(--ui-highlight);
  border-radius: 4px;
}

.spritesheet-preview-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Firefox scrollbar */
.spritesheet-preview-container {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-highlight) var(--bg-color);
}

.spritesheet-frame-count {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .spritesheet-frame-count {
    font-size: 11px;
  }
}

.spritesheet-controls {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .spritesheet-controls {
    padding-top: 8px;
    gap: 8px;
  }
}

.spritesheet-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .spritesheet-input-row {
    gap: 4px;
  }
}

.spritesheet-input-label {
  min-width: 55px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .spritesheet-input-label {
    min-width: 50px;
    font-size: 12px;
  }
}

.spritesheet-number-input {
  width: 65px;
  padding: 8px 6px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 14px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.spritesheet-number-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

@media (max-width: 600px) {
  .spritesheet-number-input {
    width: 60px;
    padding: 8px 4px;
    font-size: 14px;
  }
}

/* Remove spinner buttons */
.spritesheet-number-input::-webkit-outer-spin-button,
.spritesheet-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.spritesheet-x-label {
  margin: 0 2px;
  font-size: 14px;
  font-weight: bold;
}

@media (max-width: 600px) {
  .spritesheet-x-label {
    font-size: 13px;
  }
}

.spritesheet-selection-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .spritesheet-selection-row {
    gap: 6px;
    margin-top: 6px;
  }
}

.spritesheet-select-btn {
  flex: 1;
  padding: 12px 6px;
  background-color: var(--ui-highlight);
  border: none;
  border-radius: 6px;
  color: var(--text-color);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 44px;
}

.spritesheet-select-btn:active {
  background-color: var(--primary-color);
  transform: scale(0.98);
}

@media (max-width: 600px) {
  .spritesheet-select-btn {
    padding: 12px 4px;
    font-size: 12px;
    min-height: 44px;
  }
}

/* Frame preview items */
.frame-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  overflow: hidden;
}

.frame-preview-item:hover {
  background-color: var(--ui-highlight);
}

.frame-preview-item:active {
  background-color: var(--primary-color);
  transform: scale(0.99);
}

.frame-preview-item.selected {
  background-color: var(--primary-color);
  color: white;
}

@media (max-width: 600px) {
  .frame-preview-item {
    padding: 6px;
    gap: 8px;
  }
}

.frame-thumbnail-canvas {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  flex-shrink: 0;
  background-color: var(--bg-color);
}

@media (max-width: 600px) {
  .frame-thumbnail-canvas {
    width: 44px;
    height: 44px;
  }
}

.frame-info {
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 600px) {
  .frame-info {
    font-size: 12px;
  }
}

/* Load option dialog */
.load-option-dialog {
  padding: 15px 10px;
  text-align: center;
}

.load-option-dialog p {
  margin: 0 0 10px 0;
  font-size: 15px;
}

@media (max-width: 600px) {
  .load-option-dialog {
    padding: 10px 5px;
  }
  
  .load-option-dialog p {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

/* Popup content adjustments */
.popup-content {
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

@media (max-width: 600px) {
  .popup-content {
    width: 95%;
    padding: 15px;
    max-height: 95vh;
  }
}

/* Ensure the popup content can scroll */
.popup-content > div {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Better touch scrolling */
.spritesheet-canvas-container,
.spritesheet-preview-container,
.popup-content > div {
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal overflow */
.spritesheet-loader-container,
.spritesheet-main-content,
.spritesheet-left-side,
.spritesheet-right-side,
.frame-preview-item {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Active states for touch */
@media (hover: none) and (pointer: coarse) {
  .frame-preview-item:active {
    background-color: var(--primary-color);
  }
  
  .spritesheet-select-btn:active {
    background-color: var(--primary-color);
  }
}

/* Landscape orientation */
@media (max-width: 900px) and (orientation: landscape) {
  .spritesheet-loader-container {
    max-height: 90vh;
  }
  
  .spritesheet-main-content {
    gap: 10px;
  }
  
  .spritesheet-left-side {
    min-height: 150px;
    max-height: 250px;
  }
  
  .spritesheet-right-side {
    max-height: 300px;
  }
  
  .spritesheet-preview-container {
    max-height: 200px;
  }
}

/* Small height devices */
@media (max-height: 700px) {
  .spritesheet-loader-container {
    max-height: 95vh;
  }
  
  .spritesheet-left-side {
    min-height: 150px;
    max-height: 250px;
  }
  
  .spritesheet-right-side {
    max-height: 300px;
  }
  
  .spritesheet-preview-container {
    min-height: 100px;
    max-height: 180px;
  }
  
  .spritesheet-controls {
    padding-top: 6px;
    gap: 6px;
  }
  
  .spritesheet-select-btn {
    padding: 8px 4px;
  }
}

/* Very small devices */
@media (max-width: 400px) {
  .spritesheet-input-row {
    flex-wrap: wrap;
  }
  
  .spritesheet-input-label {
    min-width: 100%;
    margin-bottom: 2px;
  }
  
  .spritesheet-number-input {
    width: calc(50% - 20px);
  }
  
  .frame-thumbnail-canvas {
    width: 40px;
    height: 40px;
  }
  
  .frame-info {
    font-size: 11px;
  }
}

/* Trace Reference Controls */
.trace-reference-controls {
  position: absolute;
  bottom: 60px;
  left: 10px;
  background-color: var(--ui-color);
  border-radius: 6px;
  padding: 8px;
  display: none;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 5px var(--shadow-color);
}

.trace-reference-controls.visible {
  display: flex;
}

.trace-opacity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trace-opacity-label {
  font-size: 12px;
  color: var(--text-color);
  white-space: nowrap;
}

.trace-opacity-slider {
  width: 100px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-color);
  outline: none;
  -webkit-appearance: none;
}

.trace-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.trace-opacity-value {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 30px;
  text-align: center;
}

/* Floating References */
.floating-references-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.floating-reference {
  position: absolute;
  transform-origin: center center;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: opacity 0.3s, scale 0.3s;
  filter: drop-shadow(0 4px 8px var(--shadow-color));
  pointer-events: auto;
}

.floating-reference img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-reference.resizing {
  cursor: se-resize;
}

.floating-reference.grabbing {
  scale: 1.1;
  cursor: grabbing;
}

.floating-reference.selected {
  /*filter: drop-shadow(0 0 2px var(--primary-color)) drop-shadow(0 4px 8px var(--shadow-color));*/
}

.floating-reference.over-delete {
  opacity: 0.5;
  scale: 0.5;
}

/* Resize handles */
.floating-reference .resize-handle {
  position: absolute;
  transition: background 0.3s;
  background: transparent;
  opacity: 0;
}

.floating-reference .resize-handle.nw {
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  cursor: nw-resize;
}

.floating-reference .resize-handle.n {
  top: -5px;
  left: 15px;
  right: 15px;
  height: 10px;
  cursor: n-resize;
  width: auto;
}

.floating-reference .resize-handle.ne {
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  cursor: ne-resize;
}

.floating-reference .resize-handle.e {
  right: -5px;
  top: 15px;
  bottom: 15px;
  width: 10px;
  cursor: e-resize;
  height: auto;
}

.floating-reference .resize-handle.se {
  bottom: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
}

.floating-reference .resize-handle.s {
  bottom: -5px;
  left: 15px;
  right: 15px;
  height: 10px;
  cursor: s-resize;
  width: auto;
}

.floating-reference .resize-handle.sw {
  bottom: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  cursor: sw-resize;
}

.floating-reference .resize-handle.w {
  left: -5px;
  top: 15px;
  bottom: 15px;
  width: 10px;
  cursor: w-resize;
  height: auto;
}

/* Visual indicator for handles on hover */
.resize-handle:active {
  background: var(--primary-color);
}

/*
  File Browser Styles 
*/
.file-browser-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-color);
  font-weight: bold;
  flex-shrink: 0;
}

.file-browser-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allows content to shrink properly */
  overflow: hidden; /* Contain the list */
}

.file-browser-list {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  border-radius: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 100px; /* Minimum height */
  max-height: 300px; /* Maximum height before scrolling */
}

.file-item {
  padding: 10px;
  cursor: pointer;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
  word-break: break-all;
}

.file-item:last-child {
  border-bottom: none;
}

.file-item:hover {
  background-color: var(--ui-highlight);
}

.file-item.directory {
  color: var(--secondary-color);
}

.file-item .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.cordova-path {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 10px;
  word-break: break-all;
  padding: 5px;
  background-color: var(--bg-color);
  border-radius: 3px;
  flex-shrink: 0;
}

.file-browser-filename {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.file-browser-type {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.file-browser-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 5px;
  margin-top: 15px;
}

.file-browser-cancel {
  padding: 8px 15px;
  background-color: var(--ui-highlight);
  border: none;
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.file-browser-confirm {
  padding: 8px 15px;
  background-color: var(--primary-color);
  border: none;
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.file-browser-browse {
  width: 100%;
  padding: 12px;
  background-color: var(--primary-color);
  border: none;
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
}

.loading,
.empty,
.error {
  padding: 20px;
  text-align: center;
  color: var(--text-dim);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error {
  color: var(--primary-color);
}

/* Scrollbar styling */
.file-browser-list::-webkit-scrollbar {
  width: 8px;
}

.file-browser-list::-webkit-scrollbar-track {
  background: var(--bg-color);
  border-radius: 0 4px 4px 0;
}

.file-browser-list::-webkit-scrollbar-thumb {
  background: var(--ui-color);
  border-radius: 4px;
}

.file-browser-list::-webkit-scrollbar-thumb:hover {
  background: var(--ui-highlight);
}

/*
  Color Picker Styles
*/
.color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-picker-overlay.drag-over {
  background-color: transparent;
}

.color-picker {
  background-color: var(--ui-color);
  border-radius: 8px;
  width: 300px;
  max-width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.color-picker-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.color-picker-title {
  font-weight: bold;
}

.color-picker-close {
  font-size: 24px;
  cursor: pointer;
  padding: 0 5px;
}

.color-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.color-picker-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.color-picker-tab.active {
  border-bottom-color: var(--primary-color);
}

.color-picker-content {
  padding: 15px;
  overflow-y: auto;
}

.color-picker-tab-content {
  display: none;
}

.color-slider-container {
  margin-bottom: 15px;
}

.color-slider-container label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.slider-btn {
  width: 24px;
  height: 24px;
  border: none;
  background-color: var(--ui-highlight);
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-slider {
  flex: 1;
}

.color-value {
  width: 50px;
  padding: 4px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 3px;
  text-align: center;
}

.suffix {
  width: 20px;
  text-align: center;
}

.palette-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.palette-actions button {
  flex: 1;
  padding: 8px;
  background-color: var(--ui-highlight);
  border: none;
  border-radius: 4px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow-y: auto;
  max-height: 250px;
  gap: 5px;
  min-height: 0;
  flex: 1;
}

.palette-color {
  aspect-ratio: 1;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.palette-color.dragging {
  opacity: 0.1;
}

.palette-color:hover {
  transform: scale(1.1);
  border: 1px solid #fff;
}

.palette-color.floating {
  position: fixed;
  top: 0px;
  left: 0px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.1s;
}

.palette-color.dragging.floating {
  opacity: 0.5;
}

.no-palette {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
}

.recent-colors {
  padding: 0 15px 15px;
}

.recent-colors-title {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-dim);
}

.recent-colors-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.recent-color {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.2s;
}

.recent-color:hover {
  transform: scale(1.1);
}

.color-picker-footer {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--border-color);
}

.current-color-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

#confirm-color {
  flex: 1;
  padding: 10px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

/* Palette Add Button */
.palette-add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--ui-highlight);
  border: 2px dashed var(--border-color);
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.palette-add-button:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

/* Update palette grid layout */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  padding: 10px;
  background-color: var(--bg-color);
  border-radius: 6px;
  min-height: 100px;
}

/* Ensure colors and add button are same size */
.palette-color, .palette-add-button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

/* Drag and drop improvements */
.palette-color.dragging {
  opacity: 0.5;
  transform: scale(1.1);
}

/* No palette message */
.no-palette {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-style: italic;
}

/* Palette Manager Styles */
.palette-manager-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 300px;
  max-height: 60vh;
  overflow-y: auto;
}

.palette-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  padding-right: 4px;
  overflow-y: auto;
}

.palette-manager-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background-color: var(--ui-highlight);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.palette-manager-item.active {
  background-color: var(--primary-color);
}

.palette-manager-preview {
  display: flex;
  gap: 0;
  width: 60px;
  height: 30px;
  overflow: hidden;
  border-radius: 4px;
}

.palette-manager-swatch {
  flex: 1;
}

.palette-manager-info {
  flex: 1;
}

.palette-manager-name {
  font-weight: bold;
}

.palette-manager-count {
  font-size: 11px;
  color: var(--text-dim);
}

.palette-manager-item.active .palette-manager-count {
  color: rgba(255, 255, 255, 0.8);
}

.palette-manager-actions {
  display: flex;
  gap: 4px;
}

.palette-manager-btn {
  width: 28px;
  height: 28px;
}

.palette-manager-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.palette-manager-action-btn {
  flex: 1;
  padding: 8px;
}

/* Palette Editor */
.palette-editor-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 70vh;
  overflow-y: auto;
  min-width: 280px;
}

.palette-editor-name-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.palette-editor-name-input {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  border: 2px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Settings */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  display: flex;
  animation: fadeIn 0.2s ease;
}

/* Settings Container */
.settings-container {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.settings-header {
  height: 40px;
  background-color: var(--ui-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0 2px 5px var(--shadow-color);
}

.settings-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
}

.settings-close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.settings-close:hover,
.settings-close:active {
  background-color: var(--ui-highlight);
}

/* Main content area */
.settings-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar - Like app bottom bar but vertical */
.settings-sidebar {
  width: 80px;
  background-color: var(--ui-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}

.settings-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-dim);
  gap: 4px;
}

.settings-category-item .icon {
  width: 24px;
  height: 24px;
  filter: brightness(0.8);
}

.settings-category-item span:last-child {
  font-size: 11px;
  text-align: center;
}

.settings-category-item:hover,
.settings-category-item:active {
  background-color: var(--ui-highlight);
  color: var(--text-color);
}

.settings-category-item.active {
  background-color: var(--primary-color);
  color: white;
}

.settings-category-item.active .icon {
  filter: brightness(1);
}

/* Content area */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: var(--bg-color);
}

.settings-category-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
}

/* Setting Items */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 8px;
  background-color: var(--ui-color);
  border-radius: 4px;
  transition: background-color 0.2s;
  box-shadow: 0 2px 5px var(--shadow-color);
}

.setting-item:hover {
  background-color: var(--ui-highlight);
}

.setting-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.setting-info {
  flex: 1;
  margin-right: 16px;
}

.setting-label {
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.setting-description {
  font-size: 12px;
  color: var(--text-dim);
}

.setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle Switch - App style */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  border-radius: 14px;
  border: 2px solid var(--border-color);
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-dim);
  transition: .2s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(24px);
  background-color: white;
}

/* Range Input */
.range-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.range-wrapper input[type="range"] {
  flex: 1;
  height: 4px;
  background: var(--bg-color);
  border-radius: 2px;
  -webkit-appearance: none;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}

.range-value {
  min-width: 40px;
  text-align: center;
  font-weight: bold;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.range-value:hover {
  color: var(--text-color);
  background-color: var(--ui-highlight);
}

/* Select Input */
.setting-control select {
  padding: 8px 32px 8px 12px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 150px;
}

.setting-control select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Text Input */
.setting-control input[type="text"] {
  padding: 8px 12px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
  min-width: 150px;
}

.setting-control input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Color Input */
.color-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-wrapper input[type="color"] {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.color-wrapper input[type="text"] {
  min-width: 100px;
}

/* Footer */
.settings-footer {
  height: 50px;
  background-color: var(--ui-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 10px;
  box-shadow: 0 -2px 5px var(--shadow-color);
}

.settings-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.settings-btn.primary:hover,
.settings-btn.primary:active {
  filter: brightness(1.1);
}

.settings-btn.secondary {
  background-color: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-color);
}

.settings-btn.secondary:hover,
.settings-btn.secondary:active {
  background-color: var(--ui-highlight);
}

.settings-btn.small {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Scrollbar styling */
.settings-content::-webkit-scrollbar,
.settings-sidebar::-webkit-scrollbar {
  width: 8px;
}

.settings-content::-webkit-scrollbar-track,
.settings-sidebar::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.settings-content::-webkit-scrollbar-thumb,
.settings-sidebar::-webkit-scrollbar-thumb {
  background: var(--ui-highlight);
  border-radius: 4px;
}

.settings-content::-webkit-scrollbar-thumb:hover,
.settings-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .settings-sidebar {
    width: 60px;
  }
  
  .settings-category-item span:last-child {
    font-size: 10px;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .setting-control {
    width: 100%;
    justify-content: flex-end;
  }
  
  .range-wrapper {
    min-width: 100%;
  }
}

/*
  Collab Styles
*/
.collab-session-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  display: none;
  flex-direction: column;
  animation: fadeIn 0.2s ease;
}

.collab-session-header {
  height: 50px;
  background-color: var(--ui-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.collab-session-title {
  font-size: 18px;
  color: var(--text-color);
}

.collab-close-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collab-close-btn:hover {
  background-color: var(--ui-highlight);
}

.collab-session-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.collab-info-card {
  background-color: var(--ui-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.collab-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.collab-info-label {
  color: var(--text-dim);
}

.collab-info-value {
  color: var(--text-color);
  font-weight: bold;
  margin-left: 8px;
}

.collab-info-value.token {
  font-family: monospace;
  font-weight: normal;
  user-select: auto;
  background-color: var(--bg-color);
  padding: 4px 8px;
  border-radius: 4px;
  flex: 1;
  font-size: 12px;
}

.collab-copy-btn {
  background: var(--ui-highlight);
  border: none;
  border-radius: 4px;
  color: var(--text-color);
  padding: 4px 8px;
  cursor: pointer;
}

.collab-copy-btn:hover {
  background-color: var(--primary-color);
}

.collab-members-section {
  background-color: var(--ui-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.collab-members-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text-color);
}

.collab-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: var(--bg-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-color);
}

.collab-member-item:hover {
  background-color: var(--ui-highlight);
}

.collab-member-item.current-user {
  background-color: var(--primary-color);
  color: white;
}

.collab-member-name {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.collab-host-badge {
  background-color: gold;
  color: black;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 6px;
}

.collab-you-badge {
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

.collab-kick-button {
  background-color: #ff4444;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: filter 0.2s;
}

.collab-kick-button:hover {
  filter: brightness(1.2);
}

.collab-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.collab-disconnect-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  color: var(--text-color);
  background-color: var(--ui-highlight);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: filter 0.2s;
}

.collab-disconnect-btn.danger {
  background-color: #ff4444;
  color: white;
}

.collab-disconnect-btn:hover {
  filter: brightness(1.2);
}

/* Chat */
.collab-chat-button {
  position: absolute;
  left: 10px;
  transform: translateY(-120%);
  background: var(--ui-highlight);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  padding: 4px 8px;
  cursor: pointer;
  display: none;
}

.collab-chat-button.new-message {
  animation: newMessage 0.3s linear infinite;
}

.collab-chat-container {
  position: absolute;
  left: 10px;
  width: 200px;
  height: 250px;
  background-color: var(--ui-backdrop);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(-105%);
  border: 1px solid var(--border-color);
}

.collab-chat-messages {
  flex: 1;
  overflow-y: auto;
  height: auto;
  max-height: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collab-chat-message {
  font-size: 12px;
  word-break: break-word;
  margin-bottom: 4px;
}

.collab-chat-name {
  font-weight: bold;
  margin-right: 4px;
}

.collab-chat-text {
  color: var(--text-color);
}

.collab-chat-input-container {
  display: flex;
  padding: 8px;
  gap: 4px;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

.collab-chat-input {
  flex: 1;
  padding: 6px;
  background-color: var(--ui-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 12px;
  pointer-events: auto;
}

.collab-chat-input:focus {
  border-color: var(--primary-color);
}

.collab-chat-send {
  flex: 1;
  display: flex;
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.collab-chat-send:hover {
  filter: brightness(1.1);
}

.collab-chat-close {
  position: absolute;
  top: 4px;
  right: 8px;
  display: block;
  font-size: 16px;
  aspect-ratio: 1 / 1;
  padding: 4px;
  pointer-events: auto;
}

/* Ping Indicator */
.collab-ping-indicator {
  position: absolute;
  top: 45px;
  right: 10px;
  background-color: var(--ui-backdrop);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  display: none;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(5px);
}

.ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ping-value {
  color: var(--text-color);
}

/* Cursors */
.collab-cursor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.collab-cursor-item {
  position: absolute;
  transform: translate(-5px, -5px);
  pointer-events: none;
  transition: all 0.05s ease;
}

.collab-cursor-ping {
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-radius: 2px;
  transform: rotate(45deg);
}

.collab-cursor-name {
  position: absolute;
  top: -20px;
  left: 0;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/*
  z-index order - Organized by layer stack
*/

/* ========== Base Layer (0-9) ========== */
/* Base canvas and containers */
.editor-canvas-container {
  z-index: 1;
}

/* Reference controls */
.reference-controls {
  z-index: 5;
}

.grid-overlay {
  z-index: 5;
}

/* ========== UI Elements (10-19) ========== */
/* Floating references container */
.floating-references-container {
  z-index: 12;
}

/* Animation and layers panels */
.layers-panel {
  z-index: 14;
}

.animation-panel {
  z-index: 15;
}

/* Collaboration cursors */
.collab-cursor-container {
  z-index: 15;
}

.collab-cursor-item {
  z-index: 15;
}

/* Grid panel */
.grid-panel {
  z-index: 20;
}

.floating-reference {
  z-index: 20; /* dynamically updated by javascript */
}

/* Trace reference controls */
.trace-reference-controls {
  z-index: 21;
}

/* Brush size indicator */
.brush-size-indicator {
  z-index: 25;
}

.menu-panel-overlay {
  z-index: 25;
}

.collab-ping-indicator {
  z-index: 25;
}

.editor-overlay-layer {
  z-index: 25;
}

/* ========== Top Bars & Dropdowns (30-99) ========== */
.ui-top-bar,
.ui-bottom-bar,
.settings-header,
.settings-footer {
  z-index: 30;
}

.tool-dropdown {
  z-index: 30;
}

/* Tool settings popup */
.tool-settings-popup {
  z-index: 100;
}

/* ========== Overlays (200-999) ========== */
.editor-ui {
  z-index: 200;
}

.canvas-resize-controls {
  z-index: 200;
}

/* Color pick line and bottom confirmation */
.color-pick-line,
.bottom-confirmation {
  z-index: 1000;
}

.delete-zone {
  z-index: 1001;
}

/* ========== Popups & Dialogs (2000-10000) ========== */

/* Color picker overlay */
.color-picker-overlay {
  z-index: 10000;
}

/* Collaboration session overlay */
.collab-session-overlay {
  z-index: 10000;
}

.settings-overlay {
  z-index: 10000;
}

.editor-loading,
.editor-error,
.popup-overlay {
  z-index: 10001;
}
/* ========== Notifications & Debug (10000+) ========== */
.operation-message {
  z-index: 10001;
}

.notification {
  z-index: 10002;
}

.toast-with-button {
  z-index: 10003;
}

/* Loading overlay (highest during load) */
.loading-overlay {
  z-index: 10004;
}

/* Debug canvas (only visible during development) */
#debug-canvas {
  z-index: 9999;
}

/*
  Animations
*/

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes colorPickPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes pulse-delete-zone {
  0% {
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 6px 25px rgba(255, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
  }
}

@keyframes newMessage {
  from {
    background-color: var(--ui-highlight);
    border-color: var(--border-color);
  }
  to {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
}