/* Launcher Button */
.sf-flip-btn-container { text-align: center; padding: 15px; border-bottom: 1px solid #e3e3e3; background-color: #f8f9fa; margin-bottom: 20px; }
.sf-flip-launcher-btn { background-color: #000000 !important; color: #ffffff !important; font-weight: bold !important; font-size: 18px !important; padding: 8px 24px !important; border: none !important; display: inline-block !important; text-decoration: none !important; border-radius: 4px; }
.sf-flip-launcher-btn:hover { background-color: #222222 !important; color: #ffffff !important; }

/* Core Page Structure */
body.sf-viewer-body { background: #1a1a1a; color: #ffffff; font-family: Arial, sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; margin: 0; padding: 0; }
#topbar { height: 50px; background: #222222; border-bottom: 1px solid #333333; display: flex; align-items: center; padding: 0 20px; }
#documentTitle { font-size: 15px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#mainWorkspace { display: flex; flex: 1; overflow: hidden; width: 100%; }

/* Image Canvas & Background Colors */
#imagePane { flex: 2; display: flex; align-items: center; justify-content: center; padding: 30px; position: relative; transition: background-color 0.3s; }
#imagePane.bg-black { background-color: #000000; }
#imagePane.bg-dark { background-color: #111111; }
#imagePane.bg-white { background-color: #ffffff; }
#imagePane img { max-width: 100%; max-height: 85vh; object-fit: contain; }

/* Sidebar & Text Layout */
#metaSidebar { flex: 1; max-width: 420px; min-width: 320px; background: #222222; border-left: 1px solid #333333; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; }
.meta-scroll-wrapper { overflow-y: auto; flex: 1; margin-bottom: 15px; padding-right: 5px; }
.meta-scroll-wrapper h2 { font-size: 18px; margin-bottom: 15px; line-height: 1.4; color: #ffffff; border-bottom: 1px solid #333333; padding-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.description-text { font-size: 14px; line-height: 1.6; color: #cccccc; white-space: pre-wrap; }
.action-footer { border-top: 1px solid #333333; padding-top: 15px; flex: none; }
#copyrightNotice { font-size: 11px; color: #666666; text-align: center; margin-top: 10px; }
.error-msg { color: #ff5555; font-weight: bold; }

/* Compact Controls Layout */
.compact-controls { display: flex; flex-direction: column; gap: 8px; }
.ctrl-group { display: flex; gap: 8px; align-items: center; }
.dual-btn { display: flex; width: 100%; }
.flex-row { background: #2a2a2a; padding: 8px; border-radius: 4px; }
.ctrl-label { font-size: 12px; color: #aaa; width: 50px; }

/* Compact Buttons */
.c-btn { flex: 1; text-align: center; padding: 10px; font-size: 14px; font-weight: bold; background: #444; color: #fff; text-decoration: none; border-radius: 3px; border: none; cursor: pointer; transition: background 0.2s; }
.c-btn:hover:not(.disabled) { background: #555; }
.c-btn.disabled { background: #333; color: #666; cursor: not-allowed; }
.c-btn-primary { background: #ffffff; color: #000000; }
.c-btn-primary:hover { background: #e5e5e5; }
.c-btn-danger { background: #d9534f; color: #ffffff; display: block; width: 100%; }
.c-btn-danger:hover { background: #c9302c; }
.c-btn-blue { background: #007bff; color: #ffffff; }
.c-btn-blue:hover { background: #0056b3; }
.small-btn { flex: none; padding: 6px 10px; font-size: 12px; }

/* Canvas Toggle Buttons */
.bg-toggles { display: flex; gap: 8px; flex: 1; align-items: center; }
.bg-btn { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; }
.bg-btn:hover { transform: scale(1.1); }
.bg-btn[data-bg="bg-white"] { background-color: #ffffff; border-color: #cccccc; }
.bg-btn[data-bg="bg-dark"] { background-color: #111111; border-color: #555555; }
.bg-btn[data-bg="bg-black"] { background-color: #000000; border-color: #444444; }
.bg-btn.active { box-shadow: 0 0 0 2px #2a2a2a, 0 0 0 4px #007bff; }

/* Zoom Range Input */
input[type="range"] { flex: 1; margin: 0 10px; cursor: pointer; }

/* ========================================= */
/* Scroll Management & Zoom Mechanics FIX    */
/* ========================================= */

#imagePane { overflow: auto; }
/* When zoomed, remove padding so the scrollbars sit perfectly on the edges */
#imagePane.is-zoomed { align-items: flex-start; justify-content: flex-start; padding: 0; }

/* Prevent flexbox from squashing the image */
.viewer-img { transition: width 0.1s ease; flex-shrink: 0; margin: auto; }
/* Strip constraints entirely when zoomed */
.viewer-img.zoomed { height: auto !important; object-fit: unset !important; max-height: none !important; max-width: none !important; margin: 0; }

/* Forced Zoom Scales */
.zoom-100 { width: 100%; height: 85vh; object-fit: contain; max-height: 85vh; max-width: 100%; }
.zoom-125 { width: 125% !important; } 
.zoom-150 { width: 150% !important; } 
.zoom-175 { width: 175% !important; }
.zoom-200 { width: 200% !important; } 
.zoom-225 { width: 225% !important; } 
.zoom-250 { width: 250% !important; }
.zoom-275 { width: 275% !important; } 
.zoom-300 { width: 300% !important; }

/* Mobile */
@media (max-width: 900px) {
    #mainWorkspace { flex-direction: column; }
    #metaSidebar { max-width: 100%; min-width: 100%; flex: none; height: 50vh; }
    #imagePane { flex: 1; padding: 15px; }
    #imagePane img { max-height: 40vh; }
}