/* === 全局和基础样式 === */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 14px;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f0f0f0;
}

/* === 主工具栏折叠按钮 === */
#mainToolbarToggleBtn {
    position: fixed;
    top: 5px;
    right: 10px;
    z-index: 1002; /* 高于 controls-container 和 floating-panel */
    padding: 6px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.3s ease-in-out, background-color 0.2s;
}

#mainToolbarToggleBtn:hover {
    background-color: #0056b3;
}

#mainToolbarToggleBtn.controls-collapsed {
    transform: rotate(180deg);
}

/* === 控件区域样式 === */
#controls-container {
  padding: 8px;
  background-color: #e8e8e8;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
  position: relative; /* 创建堆叠上下文 */
  z-index: 20;      /* 高于 live2d-wrapper */
  overflow: hidden; 
  max-height: 800px;
  transition: max-height 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out, border-width 0.35s ease-out;
}

#controls-container.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 4px 0;
  border-bottom: 1px dashed #d0d0d0;
  margin-bottom: 4px;
}
.control-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.control-row span, .control-row label,
.control-row-header span {
  margin-right: 3px;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
}

.control-row select,
.control-row button,
.control-row input[type="number"],
.control-row input[type="text"],
.control-row input[type="range"],
.control-row-header button {
  vertical-align: middle;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid #bbb;
  border-radius: 3px;
}

.control-row button,
.control-row-header button.toggle-collapse-btn {
  cursor: pointer;
  background-color: #f9f9f9;
}
.control-row button:hover,
.control-row-header button.toggle-collapse-btn:hover {
  background-color: #e0e0e0;
}
.control-row button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- 浮动面板 (通用样式，用于背景设置和自定义参数面板) --- */
.floating-panel {
  position: fixed; 
  top: 60px;      
  left: 50%;
  transform: translateX(-50%);
  width: 300px; 
  max-width: calc(100vw - 20px); 
  background-color: #f0f0f0;
  border: 1px solid #adadad;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1001;  
  display: none; /* Initially hidden, shown by adding .active class */
  flex-direction: column;
  max-height: 85vh; 
}

.floating-panel.active {
  display: flex;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background-color: #d8d8d8;
  border-bottom: 1px solid #c0c0c0;
  border-top-left-radius: 5px; /* Match parent's border-radius */
  border-top-right-radius: 5px; /* Match parent's border-radius */
  flex-shrink: 0; 
}

.panel-header span {
  font-weight: bold;
  font-size: 13px;
}

.close-panel-btn {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
  padding: 0 4px;
}
.close-panel-btn:hover {
  color: #000;
}

.panel-content {
  padding: 10px; 
  overflow-y: auto; 
  flex-grow: 1; 
}

/* Styles specific to controls INSIDE a floating panel's .control-row */
.floating-panel .control-row {
  border-bottom: 1px dashed #e0e0e0;
  padding: 6px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.floating-panel .control-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.floating-panel .control-row label {
  font-size: 12px;
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.floating-panel .control-row input[type="text"],
.floating-panel .control-row input[type="number"] {
  padding: 3px 5px;
  font-size: 12px;
  border: 1px solid #bbb;
  border-radius: 3px;
}

.floating-panel .control-row select {
  padding: 3px 5px;
  font-size: 12px;
  border: 1px solid #bbb;
  border-radius: 3px;
}

/* Specific input widths for BG panel (mobile first) */
.floating-panel #bgWidthInput,
.floating-panel #bgHeightInput {
  width: 65px; 
}

.floating-panel #bgPosXInput,
.floating-panel #bgPosYInput {
  width: 55px; 
}

.floating-panel #bgScaleInput {
  width: 50px; 
}

.floating-panel #bgObjectFitSelect {
  min-width: 90px; 
  flex-grow: 1; 
}

.floating-panel .control-row button {
  padding: 4px 8px;
  font-size: 12px;
  margin-top: 5px; /* Add some space if buttons wrap to new line */
  flex-basis: calc(50% - 4px); /* Two buttons per row with gap */
  box-sizing: border-box;
}


.control-row-header { /* For collapsible sections, not directly used by floating panels yet */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background-color: #e0e0e0;
    border-bottom: 1px solid #c0c0c0;
    cursor: pointer;
}

.toggle-collapse-btn {
    padding: 2px 8px;
    font-size: 14px;
    line-height: 1;
    min-width: 25px;
    background-color: #d0d0d0;
    border: 1px solid #b0b0b0;
}
.toggle-collapse-btn:hover {
    background-color: #c0c0c0;
}

.collapsible-content {
    padding: 8px 10px;
    border-top: none; /* Assuming header has bottom border */
}
.collapsible-content.collapsed {
    display: none;
}

.collapsible-content > .control-row {
    border-bottom: 1px dashed #d8d8d8;
    background-color: transparent; /* If parent has bg */
    padding: 6px 0;
}
.collapsible-content > .control-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Specific control adjustments in main toolbar */
#widthInput, #heightInput {
  width: 4.5em;
}
#zoom {
  width: 120px;
  vertical-align: middle;
}
a { /* For the github link */
  color: #007bff;
  text-decoration: none;
  margin-left: auto; /* Pushes it to the right */
}
a:hover {
  text-decoration: underline;
}

#character-selection-controls {
  background-color: #ddeeff;
}
#character-selection-controls label {
  margin-left: 2px;
  margin-right: 8px;
  cursor: pointer;
  font-weight: normal;
}
#character-selection-controls input[type="radio"] {
  vertical-align: middle;
  margin-right: 1px;
}
#character-selection-controls input[type="radio"]:checked + label {
  font-weight: bold;
  color: #0056b3;
}
#character-selection-controls button { /* Remove character button */
    margin-left: 15px;
}


/* === 位置控制面板样式 === */
#position-controls-wrapper {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 100; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#togglePositionControlsBtn { /* This button is in the main toolbar */
    /* Styles inherited from .control-row button */
}

#position-controls { /* The actual panel with move/rotate buttons */
    background: rgba(230, 230, 230, 0.85);
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 5px;
    justify-items: center;
    align-items: center;
}

#position-controls button {
    min-width: 60px;
    min-height: 30px;
    padding: 6px;
    font-size: 13px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#position-controls.collapsed {
        display: none;  /* Use !important if needed to override other display properties */
}

/* Grid positions for move/rotate buttons */
#rotateLeftBtn  { grid-column: 1; grid-row: 1; }
#moveUpBtn      { grid-column: 2; grid-row: 1; }
#rotateRightBtn { grid-column: 3; grid-row: 1; }

#moveLeftBtn    { grid-column: 1; grid-row: 2; }
#resetPosBtn    { grid-column: 2; grid-row: 2; }
#moveRightBtn   { grid-column: 3; grid-row: 2; }

#captureBtn       { grid-column: 1; grid-row: 3; }
#moveDownBtn      { grid-column: 2; grid-row: 3; }
#captureWithBgBtn { grid-column: 3; grid-row: 3; }


/* === Live2D 画布区域样式 === */
#live2d-wrapper {
  flex-grow: 1;
  position: relative; 
  overflow: hidden;
  background-color: #ffffff; /* Default background if no image */
  transition: margin-top 0.35s ease-out; /* If toolbar collapses */
  z-index: 10;     
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Default, can be changed by JS */
  object-position: center center;
  z-index: 0; 
  opacity: 0; /* Initially hidden, shown when src is set */
  transition: opacity 0.3s ease;
}

#live2dCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  background-color: transparent !important; /* Ensure canvas is transparent */
}


/* === 背景选择模态框样式 === */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1050; /* Highest layer */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Semi-transparent overlay */
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 85%;
  max-width: 1200px; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  max-height: 85vh; /* Limit height and enable scrolling */
}
.modal-content h2 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  text-align: center;
  flex-shrink: 0;
}
.close-button { /* For modal close */
  position: absolute;
  top: 10px;
  right: 15px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
}
.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
}
#backgroundGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
  overflow-y: auto; /* Enable scrolling for grid items */
  flex-grow: 1;
  min-height: 100px; /* Ensure it has some height even if empty */
}
.background-grid-item {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  align-items: center;
  overflow: hidden; /* Clip content like long names */
  aspect-ratio: 3 / 4; /* Maintain aspect ratio for items */
}
.background-grid-item:hover {
  box-shadow: 0 2px 8px rgba(0,100,200,0.4);
  transform: translateY(-2px);
}
.background-grid-item img {
  max-width: 100%;
  height: 100px; /* Fixed height for thumbnail consistency */
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
  border-radius: 3px;
  background-color: #e0e0e0; /* Placeholder color */
}
.background-grid-item span { /* For background name */
  font-size: 11px;
  color: #333;
  word-wrap: break-word; /* Allow long names to wrap */
  line-height: 1.3;
  display: block;
  width: 100%;
  margin-top: auto; /* Push name to bottom if image is short */
}
.background-grid-item.no-background-item { /* Special style for "No Background" option */
    justify-content: center;
    height: auto; /* Adjust height as it has no image */
    min-height: 120px; /* Or match other items if preferred */
}
.background-grid-item.no-background-item span {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
}

/* START: Added CSS for Custom Parameter Panel */
#custom-parameter-panel .panel-content { /* Target only the custom param panel's content */
    display: flex;
    flex-direction: column;
}

#custom-params-container { /* The div that will hold all sliders */
    flex-grow: 1;
    overflow-y: auto; /* Allow scrolling if many parameters */
    padding-right: 5px; /* Space for scrollbar to avoid content shift */
    margin-bottom: 10px; /* Space before the reset button */
}

.custom-param-slider-group { /* Styles for each parameter's label + slider + value */
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ccc;
}
.custom-param-slider-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.custom-param-slider-group label { /* Label for the parameter name */
    display: block; /* Make it take full width above slider */
    font-size: 12px; /* Match other panel labels */
    margin-bottom: 4px;
    color: #333;
    word-break: break-all; /* If param names are very long */
}

.custom-param-slider-group input[type="range"] { /* The slider itself */
    width: calc(100% - 55px); /* Full width minus space for value display */
    vertical-align: middle;
    margin-right: 5px; /* Space between slider and value */
}

.custom-param-slider-group .param-value-display { /* Span to show current numerical value */
    display: inline-block;
    width: 40px; /* Fixed width for number like "1.00" */
    font-size: 12px;
    text-align: right;
    vertical-align: middle;
    color: #1a1a1a; /* Darker text for value */
}

/* Ensure panel content can scroll if many parameters, already in .panel-content */
/* #custom-parameter-panel .panel-content {
    max-height: 70vh; 
} */

/* Button in top controls to open custom params panel */
#toggleCustomParamsBtn {
    /* Inherits .control-row button styles, add specific if needed */
}

/* Reset button at the bottom of the custom param panel */
#custom-parameter-panel #resetCustomParamsBtn {
    flex-basis: 100%; /* Make it full width */
    margin-top: 10px; /* Add some space above it if it's not in a .control-row */
}
/* END: Added CSS for Custom Parameter Panel */


/* 媒体查询，用于桌面端样式 */
@media (min-width: 768px) {
  .floating-panel { /* Applies to all floating panels including custom params */
    width: 380px; 
    top: 70px;    
  }

  .floating-panel .panel-content {
    padding: 15px; 
  }

  .floating-panel .panel-header {
    padding: 8px 12px;
  }
  .floating-panel .panel-header span {
    font-size: 14px;
  }
  .floating-panel .close-panel-btn {
    font-size: 20px;
    padding: 0 5px;
  }

  .floating-panel .control-row {
    padding: 8px 0;
    gap: 6px 10px; 
  }
  .floating-panel .control-row label {
    font-size: 13px; 
  }

  .floating-panel .control-row input[type="text"],
  .floating-panel .control-row input[type="number"],
  .floating-panel .control-row select {
    padding: 4px 8px; 
    font-size: 13px;  
  }

  /* Desktop specific input widths for BG panel */
  .floating-panel #bgWidthInput,
  .floating-panel #bgHeightInput {
    width: 75px;
  }
  .floating-panel #bgPosXInput,
  .floating-panel #bgPosYInput {
    width: 65px;
  }
  .floating-panel #bgScaleInput {
    width: 60px;
  }
  .floating-panel #bgObjectFitSelect {
    min-width: 110px; 
  }

  .floating-panel .control-row button {
    font-size: 13px; 
    padding: 4px 8px;
    flex-basis: auto; /* Reset flex-basis for desktop if needed, or keep 50% */
    margin-top: 0; 
  }
  /* Ensure two buttons in BG panel still fit well */
  .floating-panel .control-row button#applyBgTransformBtn,
  .floating-panel .control-row button#resetBgTransformBtn {
      flex-basis: calc(50% - 5px); /* Keep them side-by-side */
  }

  /* Desktop specific for custom param panel (if needed, inherits most from .floating-panel) */
  #custom-parameter-panel .custom-param-slider-group label {
      font-size: 13px; /* Slightly larger label on desktop */
  }
  #custom-parameter-panel .custom-param-slider-group .param-value-display {
      font-size: 13px; /* Slightly larger value display on desktop */
  }
}
/* === 浮动面板拖拽和调整大小功能增强 === */

.floating-panel .panel-header {
  cursor: move; /* 表示头部可以拖动 */
}

.panel-resize-handle {
  position: absolute; /* 绝对定位，相对于面板 */
  bottom: 0;          /* 放置在右下角 */
  right: 0;
  width: 15px;        /* 拖拽柄的宽度 */
  height: 15px;       /* 拖拽柄的高度 */
  background-color: rgba(0, 0, 0, 0.1); /* 给拖拽柄一个微妙的背景色 */
  border-bottom-right-radius: 5px; /* 如果面板有圆角，使其匹配面板的右下角圆角 */
  border-top-left-radius: 5px;    /* 可选：让它看起来更独特一点 */
  cursor: nwse-resize; /* 用于右下角调整大小的标准鼠标指针样式 */
  z-index: 1;          /* 确保它在面板内容之上（如果内容溢出） */
}
.panel-footer {
  height: 20px; /* 给页脚一个明确的高度 */
  background-color: #d8d8d8; /* 与头部颜色一致或略有区别 */
  border-top: 1px solid #c0c0c0;
  border-bottom-left-radius: 5px; /* 如果面板底部有圆角 */
  border-bottom-right-radius: 5px; /* 如果面板底部有圆角 */
  cursor: move; /* 表示可以拖动 */
  flex-shrink: 0; /* 防止内容过多时被压缩 */
  display: flex; /* 用于未来可能在页脚添加内容 */
  align-items: center;
  justify-content: center;
}
.panel-resize-handle {
  position: absolute;
  bottom: 0; /* 依然在最底部 */
  right: 0;
  width: 15px;
  height: 15px; /* 可以考虑让它只占据页脚的一部分高度，或者覆盖在页脚上 */
  /* 如果希望拖拽柄在页脚的右下角，并且页脚有高度，可以这样: */
  /* bottom: 2px; */ /* 稍微向上偏移一点，使其在页脚内 */
  /* right: 2px;  */ /* 稍微向左偏移一点 */
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom-right-radius: 5px;
  /* border-top-left-radius: 5px; */ /* 这个可能不需要了，除非想让它看起来不一样 */
  cursor: nwse-resize;
  z-index: 1; 
}

.floating-panel {
  /* ... 其他 .floating-panel 样式 ... */
  /* 确保页脚和调整大小拖拽柄能正确显示 */
  padding-bottom: 0; /* 如果之前有padding-bottom，现在由页脚和拖拽柄占据 */
}
.floating-panel {
  /* 
     确保 overflow: hidden，如果面板内容超出，可以裁剪，
     并确保拖拽柄不会导致面板本身出现意外的滚动条。
     .panel-content 已经有自己的 overflow-y: auto 用于内容滚动。
     现有的 position: fixed 对于拖拽是好的。
  */
  overflow: hidden; 
}