/* convex lens imaging.html specific styles */

/* Override Tailwind for this page */
body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* Custom header styles - use !important to override Tailwind */
header {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #999 !important;
}

h1 {
    color: black !important;
    font-size: 2.5rem !important;
    margin-bottom: 10px !important;
    font-weight: normal !important;
    text-align: center !important;
}

/* Custom slider styles */
.slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

input[type='range']::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* 信息面板折叠样式: 仅添加折叠相关行为，避免覆盖原始样式（保留 HTML 中的背景/宽度等） */
#imageProperties {
    overflow: hidden; /* 折叠时隐藏内部内容 */
    transition: max-height 200ms ease, height 200ms ease;
    z-index: 40; /* 确保面板高于画布 */
}

/* collapsed 状态：只显示顶部区域（外框），隐藏内部正文内容 */
#imageProperties.collapsed {
    height: 44px; /* 仅显示 header 的高度（可根据实际 header 高度微调） */
    max-height: 44px;
}

#imageProperties.collapsed #imagePropertiesContent {
    display: none !important;
}

/* 不改变 header 的背景（HTML 里可能有内联样式），只确保内边距在需要时存在 */
#imageProperties #imagePropertiesHeader {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Prevent touch-driven page panning/zooming when interacting with the simulation
   canvas or the panel header (drag handles). This ensures touch drags only move
   simulation elements and do not scroll the page. */
#lensCanvas,
#imagePropertiesHeader {
    touch-action: none;
    -ms-touch-action: none; /* IE/Edge legacy */
}

#imageProperties.collapsed button,
#imageProperties.collapsed .controls {
    /* 如果 header 中有按钮，仍然可见 */
    display: inline-block;
}