/* Hair Try‑On page scoped styles */

/* Ensure the Try‑On page honors the purple brand palette even when global styles redefine variables */
.tryon-page {
  --color-primary: var(--primary-main);
  --color-primary-dark: var(--primary-dark);
  --accent-color: var(--primary-main);
  --accent-hover: var(--primary-dark);
  --brand-primary: var(--primary-main);
  --color-info: var(--primary-main);
  --color-info-dark: var(--primary-dark);
  --color-surface-hover: var(--color-primary-soft);
}

/* Give Save/Download (timelineActions) breathing room above camera buttons */
#timelineActions {
  margin-bottom: 12px !important;
  justify-content: center;
}

.tryon-page .btn.btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-contrast, #fff);
}

.tryon-page .btn.btn-primary:hover,
.tryon-page .btn.btn-primary:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Layout */
#studioLayout.studio-layout.tryon {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
  height: calc(100vh - var(--header-height, 64px));
  min-height: calc(100vh - var(--header-height, 64px));
}
#studioLayout.studio-layout.tryon.tools-collapsed {
  grid-template-columns: 1fr 84px;
}

/* Right panel */
#studioLayout .right-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border-left: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  height: 100%;
  min-height: 0; /* allow inner scroll container to shrink */
}
#studioLayout .right-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
#studioLayout .right-panel .panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden; /* ensure inner container handles scroll */
}

/* Keep a slim tools column when collapsed so icons remain visible */
#studioLayout .right-panel.collapsed {
  width: 84px;
  min-width: 84px;
  overflow: hidden;
}
#studioLayout .right-panel.collapsed .panel-header h3 { display: none; }
#studioLayout .right-panel.collapsed .panel-content { display: block; }
#studioLayout .right-panel.collapsed .ai-tools-container { padding: 8px; }
#studioLayout .right-panel.collapsed .tool-category h4 { 
  display: block; 
  font-size: 9px; 
  margin: 6px 0; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
#studioLayout .right-panel.collapsed .tool-category { margin-bottom: 8px; }
#studioLayout .right-panel.collapsed .ai-tool-grid { grid-template-columns: 1fr !important; gap: 6px; }
#studioLayout .right-panel.collapsed .ai-tool span { display: block; font-size: 6px; line-height: 1.1; white-space: normal; }
#studioLayout .right-panel.collapsed .ai-tool { padding: 8px; justify-content: center; }

/* Tools container */
#studioLayout #aiToolsContainer.ai-tools-container {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 8px;
  display: block;
  box-sizing: border-box;
  visibility: visible;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
#studioLayout #aiToolsContainer *,
#studioLayout #aiToolsContainer .ai-tool * {
  box-sizing: border-box;
}

/* Categories */
#studioLayout #aiToolsContainer .tool-category {
  margin-bottom: 16px;
}
#studioLayout #aiToolsContainer .tool-category h4 {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

/* Grid */
#studioLayout #aiToolsContainer .ai-tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  grid-auto-rows: minmax(44px, auto);
}

/* Buttons */
#studioLayout #aiToolsContainer .ai-tool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary, var(--color-surface));
  color: var(--color-text-primary);
  width: 100%;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#studioLayout #aiToolsContainer .ai-tool i {
  font-size: 14px;
  color: var(--color-primary);
}
#studioLayout #aiToolsContainer .ai-tool span {
  font-size: 10px;
  color: var(--color-text-secondary);
}
#studioLayout #aiToolsContainer .ai-tool:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
#studioLayout #aiToolsContainer .ai-tool.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
}
#studioLayout #aiToolsContainer .ai-tool.active i { 
  color: var(--color-primary-contrast, #fff); 
}
#studioLayout #aiToolsContainer .ai-tool.active span { 
  color: var(--color-primary-contrast, #fff); 
}

/* Ensure scoped active styles win over global overrides */
#studioLayout .ai-tools-container .ai-tool.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
#studioLayout .ai-tools-container .ai-tool.active,
#studioLayout .ai-tools-container .ai-tool.active i,
#studioLayout .ai-tools-container .ai-tool.active span {
  color: var(--color-primary-contrast, #fff) !important;
}

/* Ensure the layout stays above canvas overlays */
#studioLayout { position: relative; z-index: 100002; isolation: isolate; }
#studioLayout .right-panel, #studioLayout .right-panel .panel-content, #studioLayout #aiToolsContainer { position: relative; z-index: 20001; }

/* Center panel styling to match app theme */
#studioLayout .center-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to shrink for scroll calculations */
  position: relative;
}
#studioLayout .center-panel .info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
#studioLayout .canvas-container {
  flex: 1;
  display: flex;
  flex-direction: column; /* vertical flow so holder can flex */
  align-items: center;
  justify-content: center;
  /* Reserve space for top Choose File and bottom Take Picture/action bar */
  --canvas-top-gap: 72px;
  --canvas-bottom-gap: 120px;
  padding: 16px;
  padding-top: calc(16px + var(--canvas-top-gap));
  padding-bottom: calc(16px + var(--canvas-bottom-gap));
  position: relative;
  overflow: hidden;
}
#studioLayout .center-panel .canvas-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  flex: 1 1 auto; /* fill available vertical space between top/bottom gaps */
  min-height: 0;   /* allow child to compute max-height properly */
  height: 100%;
  max-height: 100%;
  padding: 12px;
  margin: 0 auto;
  background: var(--background-paper, var(--color-surface));
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--box-shadow-sm, var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06)));
  overflow: hidden;
}
#studioLayout #resultImage {
  max-width: 100%;
  max-height: 100%; /* constrained by flexed canvas-holder height */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  image-orientation: from-image;
}

/* Keep tools header visible while scrolling */
#studioLayout .right-panel .panel-header {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
  font-size: 13px;
  font-weight: 600;
}

/* Tablet: keep tools on the right with single column */
@media (max-width: 1024px) {
  #studioLayout.studio-layout.tryon {
    grid-template-columns: 1fr 100px;
    height: auto;
    min-height: calc(100vh - var(--header-height, 64px));
  }
  /* Ensure no reordering on tablet */
  #studioLayout .center-panel { order: 0; }
  #studioLayout .right-panel { order: 0; }
  #studioLayout #aiToolsContainer.ai-tools-container {
    height: 100%;
    max-height: none;
  }
  #studioLayout #aiToolsContainer .ai-tool-grid {
    grid-template-columns: 1fr;
  }
  /* Keep collapsed width narrow */
  #studioLayout .right-panel.collapsed {
    width: 84px;
    min-width: 84px;
  }
}
/* Mobile: single column, tools remain on the right */
@media (max-width: 768px) {
  #studioLayout #aiToolsContainer .ai-tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(42px, auto);
  }
  #studioLayout #aiToolsContainer .ai-tool {
    min-height: 42px;
  }
  /* Provide extra space for camera buttons on mobile */
  #studioLayout .canvas-container {
    --canvas-bottom-gap: 164px;
  }
  #studioLayout .canvas-fab {
    bottom: 96px;
  }
}

/* Very small devices */
@media (max-width: 400px) {
  #studioLayout #aiToolsContainer .ai-tool-grid {
    grid-template-columns: 1fr;
  }
}

/* Canvas sizing breakpoints */
@media (min-width: 768px) {
  #studioLayout .canvas-container {
    --canvas-top-gap: 64px;
    --canvas-bottom-gap: 120px;
  }
  #studioLayout .center-panel .canvas-holder {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  #studioLayout .canvas-container {
    --canvas-top-gap: 56px;
    --canvas-bottom-gap: 112px;
  }
  #studioLayout .center-panel .canvas-holder {
    max-width: 720px;
  }
}

/* --- Page header and action bar: align with main application theme --- */
.tryon-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--background-paper);
  border-bottom: 1px solid var(--border-color);
  height: var(--header-height, 64px);
}
.tryon-page .header-left { display: flex; align-items: center; gap: 8px; }
.tryon-page .nav-logo { height: 40px; width: auto; }
.tryon-page .nav-logo.dark-logo { display: none; }
[data-theme="dark"] .tryon-page .nav-logo.light-logo { display: none; }
[data-theme="dark"] .tryon-page .nav-logo.dark-logo { display: inline-block; }
.tryon-page .header-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.tryon-page .header-center h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.tryon-page .header-right { display: flex; align-items: center; gap: 8px; }

/* Canvas action bar */
#studioLayout .action-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.1));
  display: flex;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
}
#studioLayout .action-bar .action-divider { width: 1px; height: 20px; background: var(--color-border); }
#studioLayout .action-bar .action-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
#studioLayout .action-bar .action-btn:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
#studioLayout .action-bar .action-btn i { color: var(--color-primary); font-size: 14px; }

/* Canvas top control (Choose File) */
#studioLayout .canvas-top-controls {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

/* Floating Take Picture button above the action bar */
#studioLayout .canvas-fab {
  position: absolute;
  left: 50%;
  bottom: 76px; /* just above action bar */
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#studioLayout .canvas-fab .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Placeholder styling */
#studioLayout .center-panel #noImage.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-secondary);
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}
#studioLayout .center-panel #noImage.placeholder i { color: var(--color-primary); opacity: 0.9; }

/* Subtle scrollbar styling for tools container */
#studioLayout #aiToolsContainer::-webkit-scrollbar { width: 8px; }
#studioLayout #aiToolsContainer::-webkit-scrollbar-track { background: transparent; }
#studioLayout #aiToolsContainer::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
#studioLayout #aiToolsContainer:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); }

/* Tools panel toggle icon button */
#studioLayout .right-panel .btn-icon {
  background: var(--color-surface-secondary, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  cursor: pointer;
}
#studioLayout .right-panel .btn-icon:hover { background: var(--color-surface-hover); }

/* Collapsed grid for layout (desktop) */
#studioLayout.studio-layout.tryon.tools-collapsed { grid-template-columns: 1fr 84px; }