/* Enhanced Pro Interface Additions */

/* Dropdown Menu System */
.ps-menu-item {
  position: relative;
}

.ps-menu-btn {
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--ps-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ps-menu-btn:hover {
  background: var(--ps-surface-hover);
  color: var(--ps-text);
}

.ps-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
  z-index: 1000;
  display: none;
}

.ps-dropdown.active {
  display: block;
}

.ps-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--ps-text);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ps-dropdown-item:hover:not(.disabled) {
  background: var(--ps-accent);
  color: white;
}

.ps-dropdown-item.disabled {
  color: var(--ps-text-dim);
  cursor: not-allowed;
}

.ps-dropdown-separator {
  height: 1px;
  background: var(--ps-border);
  margin: 4px 0;
}

.ps-dropdown-shortcut {
  font-size: 10px;
  color: var(--ps-text-dim);
  margin-left: 24px;
}

.ps-dropdown-item:hover:not(.disabled) .ps-dropdown-shortcut {
  color: rgba(255, 255, 255, 0.7);
}

.ps-header-menu .ps-dropdown.ps-dropdown-mobile {
  position: fixed !important;
  left: var(--ps-dropdown-mobile-left, 0px) !important;
  right: var(--ps-dropdown-mobile-right, 0px) !important;
  top: var(--ps-dropdown-mobile-top, 0px) !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  max-height: var(--ps-dropdown-mobile-max-height, calc(var(--app-vh, 1vh) * 70)) !important;
  overflow-y: auto !important;
  z-index: 99999 !important; /* Must be higher than canvas toolbar (100) */
  border-radius: 12px !important;
  padding: 12px 16px !important;
  background: var(--ps-surface) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  transform: translateZ(0) !important; /* Force hardware acceleration for better layering */
  will-change: transform !important;
  isolation: isolate !important; /* Create isolated stacking context */
}

/* Canvas Tool Cursors */
.ps-canvas-viewport.zoom-tool {
  cursor: zoom-in;
}

.ps-canvas-viewport.zoom-tool.zoom-out {
  cursor: zoom-out;
}

.ps-canvas-viewport.text-tool {
  cursor: text;
}

/* Hand tool cursor */
.ps-tool-btn[data-tool="hand"].active ~ .ps-canvas-area .ps-canvas-viewport {
  cursor: grab;
}

.ps-tool-btn[data-tool="hand"].active ~ .ps-canvas-area .ps-canvas-viewport:active {
  cursor: grabbing;
}

/* Interactive Text Box */
.ps-text-box {
  position: absolute;
  min-width: 100px;
  min-height: 40px;
  border: 2px dashed var(--ps-accent);
  background: rgba(20, 115, 230, 0.05);
  pointer-events: auto;
  cursor: move;
  box-sizing: border-box;
  /* Add padding for easier clicking - this scales with zoom */
  padding: 8px;
  margin: -8px;
}

.ps-text-box.editing {
  background: rgba(20, 115, 230, 0.1);
}

.ps-text-box textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: inherit;
  cursor: text;
}

/* Text Box Resize Handles */
.ps-text-box-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--ps-accent);
  box-sizing: border-box;
  z-index: 10;
  transition: all 0.2s ease;
}

/* Larger touch targets for mobile */
.ps-text-box-handle::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  /* Debug: uncomment to see touch area */
  /* background: rgba(255, 0, 0, 0.2); */
}

.ps-text-box-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
.ps-text-box-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
.ps-text-box-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.ps-text-box-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
.ps-text-box-handle-n { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
.ps-text-box-handle-s { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
.ps-text-box-handle-w { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
.ps-text-box-handle-e { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }

/* Mobile: larger handles for touch */
@media (max-width: 768px) {
  .ps-text-box-handle {
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  .ps-text-box-handle-nw { top: -10px; left: -10px; }
  .ps-text-box-handle-ne { top: -10px; right: -10px; }
  .ps-text-box-handle-sw { bottom: -10px; left: -10px; }
  .ps-text-box-handle-se { bottom: -10px; right: -10px; }
  .ps-text-box-handle-n { top: -10px; margin-left: -10px; }
  .ps-text-box-handle-s { bottom: -10px; margin-left: -10px; }
  .ps-text-box-handle-w { left: -10px; margin-top: -10px; }
  .ps-text-box-handle-e { right: -10px; margin-top: -10px; }

  /* Even larger touch area on mobile */
  .ps-text-box-handle::after {
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
  }
}

/* Character Counter */
.ps-char-counter {
  font-size: 10px;
  color: var(--ps-text-dim);
  text-align: right;
  margin-top: 4px;
}

/* Mask Painter Canvas */
#maskPainterCanvas {
  cursor: crosshair;
  max-width: 100%;
  max-height: calc(var(--app-vh, 1vh) * 70);
  object-fit: contain;
  background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 20px 20px;
}

/* Tool Group Styling */
.ps-tool-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Form Hint */
.ps-form-hint {
  font-size: 10px;
  color: var(--ps-text-dim);
  margin-top: 4px;
}

/* Category Tabs */
.ps-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ps-category-tab {
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 11px;
  background: var(--ps-bg);
  border: 1px solid var(--ps-border-light);
  color: var(--ps-text-muted);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.ps-category-tab[draggable="true"]:active {
  cursor: grabbing;
}

.ps-category-tab:hover {
  background: var(--ps-surface-hover);
  border-color: var(--ps-accent);
}

.ps-category-tab.active {
  background: var(--ps-accent);
  border-color: var(--ps-accent);
  color: white;
}

/* Style Grid */
.ps-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

.ps-style-preset {
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 11px;
  background: var(--ps-bg);
  border: 1px solid var(--ps-border-light);
  color: var(--ps-text);
  text-align: left;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-style-preset:hover {
  background: var(--ps-surface-hover);
  border-color: var(--ps-accent);
  transform: translateY(-1px);
}

.ps-style-preset.active {
  background: var(--ps-accent-light);
  border-color: var(--ps-accent);
  color: var(--ps-accent);
}

/* Tag Groups */
.ps-tag-group {
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}

.ps-tag-group[draggable="true"] {
  cursor: move;
}

.ps-tag-group:hover .ps-drag-handle {
  color: var(--ps-text);
}

.ps-tag-group-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-text-muted);
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ps-border);
}

.ps-drag-handle {
  transition: color 0.2s ease;
}

.ps-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ps-tag {
  padding: 3px 8px;
  background: var(--ps-bg);
  border: 1px solid var(--ps-border-light);
  border-radius: 3px;
  font-size: 10px;
  color: var(--ps-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ps-tag:hover {
  background: var(--ps-surface-hover);
  border-color: var(--ps-accent);
  color: var(--ps-text);
}

.ps-tag.active {
  background: var(--ps-accent);
  border-color: var(--ps-accent);
  color: white;
}

/* Result Gallery - Collapsible */
.ps-result-gallery {
  position: absolute;
  bottom: calc(
    env(safe-area-inset-bottom, 0px) +
    var(--app-safe-bottom, 0px) +
    var(--keyboard-offset, 0px)
  );
  left: 0;
  right: 0;
  background: var(--ps-surface);
  border-top: 1px solid var(--ps-border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  max-height: calc(var(--app-vh, 1vh) * 45);
  min-height: 44px;
}

.ps-result-gallery[data-expanded="true"] {
  min-height: 110px;
}

body.ps-keyboard-open .ps-result-gallery {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

body.ps-keyboard-open .ps-canvas-viewport {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px)) !important;
}

.ps-result-header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ps-gap-md);
  border-bottom: 1px solid var(--ps-border);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.ps-result-header:hover {
  background: var(--ps-surface-hover);
}

.ps-result-toggle {
  font-size: 10px;
  color: var(--ps-text-muted);
  transition: transform 0.2s ease;
  user-select: none;
}

.ps-result-content {
  flex: 1;
  overflow: hidden;
  display: block;
  transition: all 0.3s ease;
}

.ps-result-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-text);
}

.ps-result-grid {
  display: flex;
  gap: var(--ps-gap-md);
  padding: var(--ps-gap-md);
  overflow-x: auto;
  overflow-y: hidden;
  max-height: calc(var(--app-vh, 1vh) * 45 - 36px);
}

.ps-result-item {
  flex-shrink: 0;
  width: 107px;
  height: 107px;
  background: var(--ps-bg);
  border: 2px solid var(--ps-border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.ps-result-item:hover {
  border-color: var(--ps-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ps-result-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-result-item-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ps-result-item:hover .ps-result-item-actions {
  opacity: 1;
}

.ps-result-item-btn {
  flex: 1;
  padding: 4px;
  border-radius: 2px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ps-result-item-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mask Painter */
.ps-mask-painter {
  display: flex;
  gap: var(--ps-gap-lg);
}

.ps-mask-toolbar {
  width: 200px;
  flex-shrink: 0;
}

.ps-mask-canvas-container {
  flex: 1;
  background:
    linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

#maskPainterCanvas {
  max-width: 100%;
  max-height: 600px;
  cursor: crosshair;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  touch-action: none;
}

/* Gallery Grid */
.ps-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.ps-gallery-item {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border-light);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  aspect-ratio: 1;
  position: relative;
}

.ps-gallery-item:hover {
  border-color: var(--ps-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ps-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-gallery-folder {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
}

.ps-gallery-folder:hover {
  background: var(--ps-surface-hover);
  border-color: var(--ps-accent);
}

.ps-gallery-folder-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.ps-gallery-folder-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ps-text);
  margin-bottom: 4px;
}

.ps-gallery-folder-count {
  font-size: 10px;
  color: var(--ps-text-dim);
}

.ps-gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 9px;
  color: white;
}

.ps-gallery-item:hover .ps-gallery-item-overlay {
  opacity: 1;
}

/* Reference Board / Compose */
.ps-reference-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.ps-reference-slot {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border-light);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ps-reference-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
}

.ps-reference-slot-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ps-text);
}

.ps-reference-slot-clear {
  font-size: 9px;
  color: var(--ps-text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 2px;
  background: transparent;
  border: none;
  transition: all 0.15s ease;
}

.ps-reference-slot-clear:hover {
  background: var(--ps-surface-hover);
  color: var(--ps-text);
}

.ps-reference-slot-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ps-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 120px;
}

.ps-reference-slot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-reference-slot-empty {
  font-size: 10px;
  color: var(--ps-text-dim);
  text-align: center;
  padding: 12px;
  cursor: pointer;
}

.ps-reference-slot-controls {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-reference-slot-type {
  width: 100%;
  font-size: 10px;
  padding: 4px 6px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 3px;
  color: var(--ps-text);
}

.ps-reference-slot-note {
  width: 100%;
  font-size: 10px;
  padding: 6px 8px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 3px;
  color: var(--ps-text);
  resize: vertical;
  min-height: 50px;
}

.ps-reference-upload {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.ps-reference-upload input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Crop Overlay */
.ps-crop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.ps-crop-toolbar {
  height: 48px;
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.ps-crop-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.ps-crop-box {
  position: absolute;
  border: 2px solid var(--ps-accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
  touch-action: none;
}

.ps-crop-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 1px solid var(--ps-accent);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  touch-action: none;
}

.ps-crop-handle-nw {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.ps-crop-handle-n {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
}

.ps-crop-handle-ne {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.ps-crop-handle-e {
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  cursor: e-resize;
}

.ps-crop-handle-se {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.ps-crop-handle-s {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
}

.ps-crop-handle-sw {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.ps-crop-handle-w {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  cursor: w-resize;
}

.ps-crop-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: move;
  touch-action: none;
}

/* Zoom Tool Cursor */
.ps-canvas-viewport.zoom-tool-active {
  cursor: zoom-in;
}

/* ========================================
   Mobile Optimizations - PWA Support
   ======================================== */

/* Hamburger Menu Button (Mobile Only) */
.ps-mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

.ps-mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ps-text);
  transition: all 0.3s ease;
}

.ps-mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.ps-mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.ps-mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Sidebar Toggle Button (Mobile Only) - Draggable */
.ps-mobile-sidebar-toggle {
  display: none;
  position: fixed;
  top: 60px;
  right: 12px;
  width: 40px;  /* Smaller size */
  height: 40px; /* Smaller size */
  background: var(--ps-accent);
  border: none;
  border-radius: 50%;
  cursor: move;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 16px; /* Smaller icon */
  touch-action: none;  /* Prevent all default touch behaviors for better drag */
  user-select: none;
  transition: box-shadow 0.2s ease;
  -webkit-user-drag: none; /* Prevent image drag on webkit */
}

.ps-mobile-sidebar-toggle:active {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  cursor: grabbing;
}

.ps-mobile-sidebar-toggle.dragging {
  opacity: 0.9;
  cursor: grabbing;
}

/* Tablet & Small Desktop (768px - 1024px) */
@media (max-width: 1024px) {
  .ps-sidebar {
    width: 240px;
  }

  .ps-toolbar {
    width: 48px;
  }

  .ps-tool-btn {
    width: 44px;
    height: 44px;
  }

  .ps-result-gallery {
    max-height: calc(var(--app-vh, 1vh) * 32);
  }
}

/* Tablet Portrait & Large Mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* Hide mobile menu button - no longer needed */
  .ps-mobile-menu-btn {
    display: none;
  }

  /* Show sidebar toggle */
  .ps-mobile-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Always show desktop menu in mobile - horizontal scroll like desktop */
  .ps-header-menu {
    display: flex !important; /* Always visible */
    position: fixed;
    top: 44px;
    left: 48px; /* Start after left toolbar */
    right: 0;
    background: var(--ps-surface) !important; /* Use dark theme like desktop */
    border-bottom: 1px solid var(--ps-border);
    z-index: 1001 !important; /* Above everything else */
    padding: 6px 4px; /* Reduced padding for compact layout */
    flex-direction: row;
    flex-wrap: nowrap; /* Single row, no wrapping */
    gap: 2px; /* Reduced gap between items */
    max-height: none;
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth; /* Smooth scroll animation */
  }

  /* Force hide scrollbar - Firefox */
  @media (max-width: 768px) {
    .ps-header-menu {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
  }

  /* Force hide scrollbar - Chrome/Safari/Edge */
  @media (max-width: 768px) {
    .ps-header-menu::-webkit-scrollbar {
      display: none !important;
      width: 0px !important;
      height: 0px !important;
      background: transparent !important;
    }
  }

  /* Menu items - compact width for one-row display */
  .ps-header-menu .ps-menu-item {
    font-size: 11px !important;
    padding: 0 !important;
    /* Compact width to fit all in one row */
    flex: 0 0 auto;
    min-width: auto; /* Auto width based on content */
    color: var(--ps-text-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  /* The actual clickable button inside menu item - compact for one row */
  .ps-header-menu .ps-menu-item .ps-menu-btn,
  .ps-header-menu .ps-menu-item button {
    font-size: 11px !important;
    padding: 6px 8px !important; /* Reduced horizontal padding */
    color: var(--ps-text-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
    width: auto !important; /* Auto width */
    text-align: center !important; /* Center text */
    white-space: nowrap !important; /* No wrapping */
    transition: all 0.15s ease !important;
  }

  .ps-header-menu .ps-menu-item:hover .ps-menu-btn,
  .ps-header-menu .ps-menu-item:active .ps-menu-btn,
  .ps-header-menu .ps-menu-item .ps-menu-btn:hover,
  .ps-header-menu .ps-menu-item .ps-menu-btn:active {
    background: var(--ps-surface-hover) !important;
    color: var(--ps-text) !important;
  }

  .ps-header-menu .ps-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    max-width: 300px !important;
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    padding: 4px 0 !important;
    z-index: 9999 !important; /* Above everything including canvas toolbar */
    pointer-events: auto !important;
  }

  .ps-header-menu .ps-dropdown-item {
    font-size: 10px !important;
    padding: 6px 12px !important;
    color: var(--ps-text) !important;
    background: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border: none !important;
    transition: all 0.15s ease !important;
  }

  .ps-header-menu .ps-dropdown-item:hover,
  .ps-header-menu .ps-dropdown-item:active {
    background: var(--ps-accent) !important;
    color: white !important;
  }

  /* Ensure spans inside buttons are also styled */
  .ps-header-menu .ps-menu-btn span,
  .ps-header-menu .ps-dropdown-item span {
    color: inherit !important;
    pointer-events: none !important; /* Let clicks pass through to button */
  }

  /* Hide keyboard shortcuts on mobile */
  .ps-header-menu .ps-dropdown-shortcut {
    display: none !important;
  }

  /* Hide filter and window menus on mobile portrait - not useful on mobile */
  .ps-header-menu .ps-menu-item[data-menu="filter"],
  .ps-header-menu .ps-menu-item[data-menu="window"] {
    display: none !important;
  }

  /* Show layer menu on mobile */
  .ps-header-menu .ps-menu-item[data-menu="layer"] {
    display: flex !important;
  }

  /* Adjust header - make room for status bar */
  .ps-header {
    padding: 6px 12px;
    height: auto;
    min-height: 44px;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .ps-header-logo {
    font-size: 13px;
    flex: 0 0 auto;
    max-width: 40%;
  }

  /* Mobile portrait: Use "NCS" abbreviation to save space */
  .ps-header-logo::before {
    content: "NCS";
  }

  .ps-header-logo {
    font-size: 0; /* Hide original text */
  }

  .ps-header-logo::before {
    font-size: 14px;
    font-weight: 600;
  }

  .ps-header-menu {
    display: none;
  }

  .ps-header-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Show header status item on mobile */
  .ps-header .ps-status-item {
    display: flex;
    font-size: 10px;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  .ps-status-dot {
    flex-shrink: 0;
  }

  /* Mobile: Canvas toolbar - fixed position, single row with horizontal scroll */
  .ps-canvas-toolbar {
    display: flex !important; /* Show on mobile */
    flex-wrap: nowrap !important; /* Single row, no wrapping - prevents vertical scrollbar */
    padding: 6px 8px !important; /* Compact padding */
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 44px !important; /* Fixed height - single row */
    position: fixed !important;
    top: 76px !important; /* Below header (44px) and menu bar (32px) = 76px */
    left: 48px !important; /* After left toolbar */
    right: 0 !important;
    background: var(--ps-surface) !important; /* Dark background */
    border-bottom: 1px solid var(--ps-border) !important;
    z-index: 50 !important; /* Much lower than dropdowns (99999) */
    overflow-y: hidden !important; /* Hide vertical scrollbar */
    overflow-x: auto !important; /* Allow horizontal scrolling only */
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    pointer-events: none !important; /* Allow dropdowns to pass through */
    isolation: auto !important; /* Don't create stacking context */
  }

  /* Re-enable pointer events for toolbar buttons */
  .ps-canvas-toolbar * {
    pointer-events: auto !important;
  }

  /* Mobile: Canvas toolbar groups - inline layout for compact display */
  .ps-canvas-toolbar-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Keep items in one line */
    gap: 4px !important;
    align-items: center !important;
    flex-basis: auto !important; /* Auto width, allow inline */
  }

  /* Mobile: Text properties panel as third row - horizontal scroll */
  #textPropertiesPanel {
    display: none !important; /* Hidden by default, shown when text tool is active */
    position: fixed !important;
    top: 120px !important; /* Below header (44px) + menu bar (32px) + toolbar (44px) = 120px */
    left: 48px !important;
    right: 0 !important;
    height: 44px !important;
    background: var(--ps-surface) !important;
    border-bottom: 1px solid var(--ps-border) !important;
    z-index: 899 !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: center !important;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* Hide scrollbar for Chrome/Safari */
  #textPropertiesPanel::-webkit-scrollbar {
    display: none !important;
  }

  /* Mobile: Extended text properties as additional collapsible section */
  #textPropertiesExtended {
    display: none; /* Can be toggled on demand */
    position: fixed !important;
    top: 165px !important; /* Below text properties panel */
    left: 48px !important;
    right: 0 !important;
    max-height: 200px !important;
    background: var(--ps-surface) !important;
    border-bottom: 1px solid var(--ps-border) !important;
    z-index: 898 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Mobile: Text properties controls compact sizing */
  #textPropertiesPanel select,
  #textPropertiesPanel input[type="number"],
  #textPropertiesPanel input[type="color"] {
    font-size: 11px !important;
    padding: 4px 6px !important;
    height: 32px !important;
    min-width: auto !important;
  }

  #textPropertiesPanel select {
    min-width: 100px !important;
  }

  #textPropertiesPanel input[type="number"] {
    width: 50px !important;
  }

  #textPropertiesPanel input[type="color"] {
    width: 36px !important;
    padding: 2px !important;
  }

  #textPropertiesPanel .ps-btn {
    font-size: 10px !important;
    padding: 6px 8px !important;
    height: 32px !important;
    min-width: auto !important;
  }

  #textPropertiesPanel .ps-canvas-toolbar-separator {
    height: 24px !important;
    margin: 0 4px !important;
  }

  /* Mobile: Buttons and controls responsive sizing */
  .ps-canvas-toolbar .ps-btn {
    font-size: 10px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Mobile: Ensure SVG icons display correctly */
  .ps-canvas-toolbar .ps-btn svg,
  .ps-canvas-toolbar .ps-btn-icon svg {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
  }

  .ps-canvas-toolbar .ps-btn-icon {
    padding: 6px !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .ps-canvas-toolbar select,
  .ps-canvas-toolbar input {
    font-size: 11px !important;
    min-width: auto !important;
  }

  /* Mobile: Hide toolbar separators - let buttons flow naturally */
  .ps-canvas-toolbar-separator {
    display: none !important;
  }

  /* Mobile: Hide zoom controls completely */
  #zoomLevel,
  #zoomText {
    display: none !important;
  }

  /* Hide desktop status bar on mobile */
  .ps-status-bar {
    display: none;
  }

  /* Sidebar as drawer */
  .ps-sidebar {
    position: fixed;
    top: 48px;
    right: -100%;
    width: 85%;
    max-width: 320px;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px)
    );
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
  }

  .ps-sidebar.open {
    right: 0;
  }

  /* Overlay when sidebar is open */
  .ps-mobile-overlay {
    display: none;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px)
    );
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .ps-mobile-overlay.active {
    display: block;
  }

  /* Canvas area - leave space for left toolbar */
  .ps-canvas-area {
    margin-left: 48px;  /* Width of left toolbar */
    margin-right: 0;
  }

  /* Toolbar to left side - vertical layout for mobile portrait */
  .ps-toolbar {
    position: fixed !important;
    left: 0 !important;
    top: 44px !important;  /* Below header (no canvas toolbar anymore) */
    bottom: 0 !important;
    right: auto !important;
    width: 48px !important;  /* Narrow vertical strip */
    height: auto !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 998 !important;
    border-right: 2px solid var(--ps-border) !important;
    border-top: none !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    background: var(--ps-surface) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* Hide scrollbar for Chrome/Safari */
  .ps-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  .ps-tool-btn {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    gap: 1px !important;
    padding: 2px !important;
  }

  .ps-tool-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .ps-tool-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* Show tool labels on mobile */
  .ps-tool-btn[data-tool="select"]::after { content: "选择"; }
  .ps-tool-btn[data-tool="text"]::after { content: "文字"; }
  .ps-tool-btn[data-tool="crop"]::after { content: "裁剪"; }
  .ps-tool-btn[data-tool="hand"]::after { content: "抓手"; }
  .ps-tool-btn[data-tool="zoom"]::after { content: "缩放"; }
  .ps-tool-btn[data-tool="ai-generate"]::after { content: "生成"; }
  .ps-tool-btn[data-tool="ai-edit"]::after { content: "编辑"; }
  .ps-tool-btn[data-tool="mask-paint"]::after { content: "遮罩"; }
  .ps-tool-btn[data-tool="variation"]::after { content: "变体"; }
  .ps-tool-btn[data-tool="expand"]::after { content: "扩展"; }
  .ps-tool-btn[data-tool="upscale"]::after { content: "增强"; }
  .ps-tool-btn[data-tool="remove-bg"]::after { content: "去背"; }
  .ps-tool-btn[data-tool="color-extract"]::after { content: "取色"; }
  .ps-tool-btn[data-tool="history"]::after { content: "历史"; }
  .ps-tool-btn[data-tool="gallery"]::after { content: "画廊"; }

  .ps-tool-btn::after {
    font-size: 9px;
    color: currentColor;
    white-space: nowrap;
    margin-top: 2px;
  }

  .ps-tool-separator {
    display: none;
  }

  /* Canvas viewport adjusted for left toolbar, menu bar, and canvas toolbar */
  .ps-canvas-viewport {
    padding-bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px) +
      var(--ps-gap-sm)
    );
    padding-top: 121px;  /* Space for header (44px) + menu bar (32px) + canvas toolbar (44px + 1px border) */
    max-height: calc(var(--app-vh, 1vh) * 100 - 44px); /* viewport - header only */
    overflow: auto;
    transition: padding-top 0.2s ease; /* Smooth transition when text tool activates */
  }

  /* When text tool is active, add extra padding for text properties panel (third row) */
  body.text-tool-active .ps-canvas-viewport {
    padding-top: 166px;  /* Add 45px (44px panel + 1px border) for text properties row */
  }

  /* Canvas container itself - more space with left toolbar */
  .ps-main-canvas {
    max-height: calc(var(--app-vh, 1vh) * 60); /* Can use more height with left toolbar */
    width: auto;
    height: auto;
  }

  /* Touch-friendly sizes */
  .ps-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .ps-form-control {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 44px;
  }

  textarea.ps-form-control {
    font-size: 16px;
  }

  .ps-sidebar-tab {
    font-size: 11px;
    padding: 10px 12px;
  }

  /* Result gallery - more vertical space on mobile */
  .ps-result-gallery {
    max-height: calc(var(--app-vh, 1vh) * 32); /* Mobile-friendly height */
    min-height: 44px;
    left: 48px; /* Start after left toolbar */
    right: 0;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px)
    );
  }

  .ps-result-gallery[data-expanded="true"] {
    min-height: 110px;
  }

  .ps-result-item {
    width: 67px; /* Smaller for mobile */
    height: 67px;
  }

  .ps-result-grid {
    gap: 8px; /* More compact */
    padding: 8px;
  }

  /* Style grid */
  .ps-style-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* Mask painter */
  .ps-mask-painter {
    flex-direction: column;
  }

  .ps-mask-toolbar {
    width: 100%;
  }

  /* Gallery grid */
  .ps-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  /* Crop handles larger */
  .ps-crop-handle {
    width: 16px;
    height: 16px;
  }

  /* Dropdowns full width on mobile */
  .ps-dropdown {
    left: 0;
    right: 0;
    min-width: 100%;
  }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) and (orientation: portrait) {
  /* Even more compact */
  .ps-header {
    height: 44px;
  }

  .ps-sidebar {
    width: 90%;
    max-width: 100%;
  }

  .ps-sidebar-tabs {
    font-size: 10px;
  }

  .ps-sidebar-tab {
    padding: 8px 6px;
    font-size: 10px;
  }

  /* Toolbar smaller */
  .ps-toolbar {
    height: 52px;
  }

  .ps-tool-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  /* Hide less important tools on very small screens */
  .ps-tool-btn[data-tool="eyedropper"],
  .ps-tool-btn[data-tool="hand"] {
    display: none;
  }

  /* Form controls */
  .ps-form-label {
    font-size: 11px;
  }

  .ps-panel-title {
    font-size: 11px;
  }

  /* Gallery smaller */
  .ps-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }

  .ps-result-item {
    width: 67px;
    height: 67px;
  }

  /* Modal full screen */
  .ps-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    height: calc(var(--app-vh, 1vh) * 90);
    max-height: calc(var(--app-vh, 1vh) * 90);
  }

  /* Text properties even more compact on very small screens */
  #textPropertiesExtended .ps-canvas-toolbar > div {
    min-width: 120px;
    font-size: 9px;
  }

  #textPropertiesExtended label {
    font-size: 9px !important;
    min-width: 28px !important;
  }

  #textPropertiesExtended input[type="number"] {
    width: 42px !important;
    height: 30px !important;
  }

  #textPropertiesExtended input[type="color"] {
    width: 36px !important;
    height: 30px !important;
  }
}

/* ========================================
   AI Chat Assistant - Modern Redesign
   ======================================== */

/* Modal container */
.ai-chat-modal {
  width: 960px;
  max-width: 95vw;
  height: 720px;
  max-height: calc(var(--app-vh, 1vh) * 90);
  display: flex;
  flex-direction: column;
  background: #1f2228;
  border-radius: 10px;
  border: 1px solid #3a404a;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Header */
.ai-chat-header {
  background: linear-gradient(180deg, #2e333b 0%, #262b33 100%);
  color: #e8eaed;
  padding: 12px 16px;
  border-bottom: 1px solid #3a404a;
}

.ai-chat-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #4c5460;
  background: linear-gradient(180deg, #3e4652 0%, #343b46 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f1f3f4;
}

.ai-chat-tokens {
  font-size: 11px;
  background: #20242b;
  border: 1px solid #3a404a;
  padding: 4px 8px;
  border-radius: 6px;
  color: #aeb6c2;
}

/* Preview / Controls bar */
.ai-chat-preview-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 14px;
  background: #252a32;
  border-bottom: 1px solid #3a404a;
}

.ai-preview-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 8px 10px;
  background: #1d2128;
  border: 1px solid #373d47;
  border-radius: 6px;
}

.ai-preview-image {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  object-fit: cover;
  background: repeating-conic-gradient(#666 0% 25%, transparent 0% 50%) 50% / 10px 10px;
  border: 1px solid #4b5360;
}

.ai-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-preview-size {
  font-size: 12px;
  font-weight: 600;
  color: #e6e8eb;
}

.ai-preview-source {
  font-size: 11px;
  color: #9aa3af;
}

.ai-preview-settings {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-left: auto;
}

.ai-control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-label {
  font-size: 10px;
  color: #97a1ad;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ai-quality-select {
  width: 142px;
  font-size: 12px;
  min-height: 30px;
}

/* Chat Body */
.ai-chat-body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  background: #1f2228;
}

.ai-chat-messages {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015)),
    #1f2228;
  scrollbar-width: thin;
  scrollbar-color: #47505c transparent;
}

.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: #47505c;
  border-radius: 3px;
}

/* Message Row */
.ai-message-row {
  display: flex;
  gap: 12px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message-row.ai-user {
  flex-direction: row-reverse;
}

.ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #3f4652 0%, #343b45 100%);
  border: 1px solid #4a5260;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #dce1e7;
}

.ai-message-row.ai-user .ai-avatar {
  background: linear-gradient(180deg, #636b77 0%, #565e6a 100%);
}

.ai-message-bubble {
  max-width: 70%;
  position: relative;
}

.ai-message-content {
  background: #272c34;
  border: 1px solid #3a414d;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #e5e9ef;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  white-space: pre-wrap;
}

.ai-message-row.ai-user .ai-message-content {
  background: #1f4f8b;
  border-color: #2c66ad;
  color: #f4f8ff;
}

/* Suggestions */
.ai-suggestions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #3b424d;
}

.ai-suggestion-item {
  padding: 7px 10px;
  margin-top: 6px;
  background: #20242b;
  border: 1px solid #3a414d;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
}

.ai-suggestion-item:hover {
  background: #2b69b5;
  color: #fff;
  border-color: #2f72c4;
}

/* Quick Actions */
.ai-quick-actions {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: #252a32;
  border-top: 1px solid #3a404a;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.ai-quick-actions::-webkit-scrollbar {
  display: none;
}

.ai-quick-btn {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  background: linear-gradient(180deg, #3b434f 0%, #323944 100%);
  border: 1px solid #4a5260;
  border-radius: 5px;
  font-size: 11px;
  color: #e5e8ed;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.ai-quick-btn:hover {
  background: linear-gradient(180deg, #4b5563 0%, #3f4753 100%);
  border-color: #5a6677;
}

.ai-quick-btn.ai-quick-danger:hover {
  background: linear-gradient(180deg, #8a4048 0%, #75343b 100%);
  border-color: #994953;
}

.ai-quick-icon {
  font-size: 14px;
}

/* Input Area */
.ai-chat-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #252a32;
  border-top: 1px solid #3a404a;
  align-items: flex-end;
}

.ai-chat-textarea {
  flex: 1;
  resize: none;
  font-size: 13px;
  line-height: 1.5;
  min-height: 76px;
  padding: 10px;
  border: 1px solid #495261;
  border-radius: 6px;
  background: #1d2128;
  color: #e4e8ef;
  transition: all 0.2s;
}

.ai-chat-textarea:focus {
  border-color: #5f7fa7;
  box-shadow: 0 0 0 1px rgba(104, 149, 211, 0.4);
  outline: none;
}

.ai-send-btn {
  height: 36px;
  width: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  transition: all 0.2s;
}

.ai-send-btn:hover {
  transform: translateY(-1px);
}

.ai-send-btn:active {
  transform: scale(0.95);
}

/* Footer */
.ai-chat-footer {
  padding: 10px 14px;
  background: #252a32;
  border-top: 1px solid #3a404a;
}

.ai-status-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  color: #97a1ad;
}

.ai-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4da66f;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Copy Button */
.ai-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 8px;
  background: rgba(24, 27, 33, 0.75);
  border: 1px solid #4a5260;
  border-radius: 4px;
  font-size: 10px;
  color: #d8dee8;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
}

.ai-message-bubble:hover .ai-copy-btn {
  opacity: 1;
}

.ai-copy-btn:hover {
  background: rgba(62, 71, 85, 0.95);
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .ai-chat-modal {
    width: 100vw;
    max-width: 100vw;
    height: calc(var(--app-vh, 1vh) * 100);
    max-height: calc(var(--app-vh, 1vh) * 100);
    border-radius: 0;
  }

  .ai-chat-header {
    padding: 10px 12px;
  }

  .ai-chat-icon {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .ai-chat-preview-bar {
    padding: 8px 12px;
    flex-wrap: wrap;
  }

  .ai-preview-card {
    padding: 6px 10px;
  }

  .ai-preview-image {
    width: 50px;
    height: 50px;
  }

  .ai-preview-size {
    font-size: 12px;
  }

  .ai-preview-source {
    font-size: 10px;
  }

  .ai-preview-settings {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .ai-quality-select {
    width: 100%;
    min-width: 120px;
  }

  .ai-chat-messages {
    padding: 12px;
    gap: 12px;
  }

  .ai-message-bubble {
    max-width: 85%;
  }

  .ai-message-content {
    font-size: 12px;
    padding: 10px 12px;
  }

  .ai-avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .ai-quick-actions {
    padding: 8px 12px;
    gap: 6px;
  }

  .ai-quick-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  .ai-quick-icon {
    font-size: 13px;
  }

  .ai-chat-input-area {
    padding: 10px 12px;
  }

  .ai-chat-textarea {
    font-size: 14px; /* Prevent iOS zoom */
    padding: 10px;
  }

  .ai-send-btn {
    height: 34px;
    width: 34px;
  }

  .ai-chat-footer {
    padding: 8px 12px;
  }

  .ai-suggestion-item {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Mobile Landscape (max-height: 600px in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact header */
  .ps-header {
    height: 40px;
  }

  .ps-header-logo {
    font-size: 12px;
  }

  /* Compact sidebar */
  .ps-sidebar {
    top: 40px;
    height: calc(100% - 40px);
    width: 280px;
  }

  /* No bottom toolbar in landscape */
  .ps-toolbar {
    position: fixed;
    left: 0;
    top: 40px;
    bottom: 0;
    width: 44px;
    height: auto;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--ps-border);
    border-top: none;
  }

  .ps-tool-btn {
    width: 40px;
    height: 40px;
  }

  .ps-canvas-area {
    margin-left: 44px;
  }

  .ps-canvas-viewport {
    padding-bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px) +
      var(--ps-gap-sm)
    );
  }

  /* Compact result gallery */
  .ps-result-gallery {
    max-height: calc(var(--app-vh, 1vh) * 20);
  }
}

/* PWA Standalone Mode Detection */
@media all and (display-mode: standalone) {
  /* Add extra top padding for notch on iPhone X+ */
  .ps-header {
    padding-top: env(safe-area-inset-top);
  }

  .ps-toolbar {
    padding-bottom: calc(
      env(safe-area-inset-bottom) +
      var(--keyboard-offset, 0px)
    );
  }

  .ps-sidebar {
    padding-bottom: calc(
      env(safe-area-inset-bottom) +
      var(--keyboard-offset, 0px)
    );
  }
}

/* Adjust for notch/safe areas */
@supports (padding: env(safe-area-inset-top)) {
  .ps-app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(
      env(safe-area-inset-bottom) +
      var(--app-safe-bottom, 0px) +
      var(--keyboard-offset, 0px)
    );
  }
}

/* User Menu Styles */
.ps-user-info {
  position: relative;
  margin-left: 16px;
}

.ps-user-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--ps-surface-hover);
  border: 1px solid var(--ps-border);
  border-radius: 4px;
  color: var(--ps-text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.ps-user-btn:hover {
  background: var(--ps-surface);
  border-color: var(--ps-accent);
}

.ps-user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 8px 0;
  z-index: 1000;
  display: none;
}

.ps-user-dropdown.active {
  display: block;
}

.ps-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 4px;
}

.ps-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--ps-accent);
  border-radius: 50%;
  color: white;
}

.ps-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-text);
}

.ps-user-role {
  font-size: 11px;
  color: var(--ps-text-muted);
}

/* Sidebar Toggle Button */
.ps-sidebar-toggle {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 60px;
  background: var(--ps-surface-hover);
  border: 1px solid var(--ps-border-light);
  border-right: none;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ps-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  opacity: 0;
}

.ps-sidebar:hover .ps-sidebar-toggle,
.ps-sidebar-toggle:hover {
  opacity: 1;
}

.ps-sidebar-toggle:hover {
  background: var(--ps-accent);
  color: white;
}

.ps-sidebar-toggle svg {
  transition: transform 0.3s ease;
}

/* Sidebar collapsed state */
.ps-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
  border-left: none !important;
}

.ps-sidebar.collapsed .ps-sidebar-toggle svg {
  transform: rotate(180deg);
}

.ps-sidebar.collapsed .ps-sidebar-toggle {
  left: -32px; /* Move further left when collapsed */
}

/* Desktop: Grid-based layout for non-overlapping panels */
@media (min-width: 769px) {
  .ps-container {
    display: grid;
    grid-template-columns: var(--ps-toolbar-width) 1fr var(--ps-sidebar-width);
    transition: grid-template-columns 0.3s ease;
  }

  body.sidebar-collapsed .ps-container {
    grid-template-columns: var(--ps-toolbar-width) 1fr 0px;
  }

  .ps-sidebar {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    position: relative;
  }

  /* Canvas area - proper layout */
  .ps-canvas-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header - sticky at top */
  .ps-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* Canvas toolbar - NOT sticky on desktop, just flex item */
  .ps-canvas-toolbar {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    flex-wrap: wrap !important; /* Allow wrapping on desktop */
    flex-shrink: 0 !important;
  }

  /* Text properties panel - NOT sticky on desktop, just flex item, hidden by default */
  #textPropertiesPanel {
    display: none !important; /* Hidden by default */
    position: relative !important;
    top: auto !important;
    background: var(--ps-surface) !important;
    border-bottom: 1px solid var(--ps-border) !important;
    padding: 6px 12px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }

  /* When text tool is active, show the panel */
  body.text-tool-active #textPropertiesPanel {
    display: flex !important;
  }

  /* Canvas viewport - take remaining space */
  .ps-canvas-viewport {
    flex: 1;
    overflow: auto;
  }

  /* Left toolbar */
  .ps-toolbar {
    z-index: 10;
  }
}

/* Hide toggle button on mobile */
@media (max-width: 768px) {
  .ps-sidebar-toggle {
    display: none !important;
  }
}

/* =============================================================================
   Favorites Styles
   ============================================================================= */

/* Favorite button in Generate panel */
#favoriteBtn {
  transition: all 0.2s ease;
}

#favoriteBtn:hover {
  background: var(--ps-accent-light) !important;
  color: var(--ps-accent) !important;
  transform: translateY(-1px);
}

#favoriteBtn svg {
  transition: fill 0.2s ease;
}

#favoriteBtn:hover svg {
  fill: var(--ps-accent);
}

/* Favorites container */
#favoritesContainer {
  padding: 8px;
}

.ps-favorite-category {
  margin-bottom: 16px;
}

/* Favorite item card */
.ps-favorite-item {
  transition: all 0.2s ease;
}

.ps-favorite-item:hover {
  border-color: var(--ps-accent) !important;
  background: var(--ps-surface-hover) !important;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ps-favorite-item:active {
  transform: scale(0.98);
}

/* Drag and drop states */
.ps-favorite-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.ps-favorite-item[draggable="true"] {
  cursor: move;
}

.ps-favorite-item[draggable="true"]:active {
  cursor: grabbing;
}

/* Favorite action buttons */
.ps-favorite-item .ps-btn {
  transition: all 0.2s ease;
}

.ps-favorite-item .ps-btn:hover {
  transform: scale(1.1);
}

.ps-favorite-item .ps-btn svg {
  transition: fill 0.2s ease;
}

/* Save Favorite Modal */
#saveFavoriteModal .ps-modal-content {
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Favorites count badge */
#favoritesCount {
  padding: 2px 6px;
  background: var(--ps-accent-light);
  color: var(--ps-accent);
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ps-panel[data-favorites-active="true"] #favoritesCount {
  background: var(--ps-accent);
  color: white;
}

/* Mobile optimizations for favorites */
@media (max-width: 768px) {
  .ps-favorite-item {
    padding: 8px !important;
  }

  .ps-favorite-item .ps-btn {
    padding: 6px !important;
    width: 32px;
    height: 32px;
  }

  .ps-favorite-item .ps-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Larger touch targets for mobile */
  #favoriteBtn {
    min-width: 44px;
    min-height: 44px;
  }

  #saveFavoriteModal .ps-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
  }
}