/**
 * 通用图片预览组件 - 独立样式（仅本组件，类名前缀 iv-）
 * 约定：不显示标题；遮罩压黑半透明；缩放不受窗口限制；关闭入口在底部工具栏缩放比例右侧，文字「退出」，与工具栏一栏适配
 * 字体：Microsoft YaHei
 */
.iv-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
    font-size: 14px;
}
.iv-overlay.iv-open {
    display: flex;
    animation: iv-overlay-fade-in 0.22s ease-out;
}
@keyframes iv-overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.iv-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.iv-container > * {
    pointer-events: auto;
}

/* 首期不展示标题，兼容旧 DOM 中可能存在的 .iv-header */
.iv-header {
    display: none !important;
}

.iv-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: visible;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iv-body.iv-dragging {
    cursor: grabbing;
}

/* 操作提示：在底部工具栏左侧常显，与工具栏一栏样式一致 */
.iv-hint {
    color: #8a8a8a;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.2px;
}
.iv-hint.iv-hint-show {
    color: #8a8a8a;
}

.iv-image-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transform-origin: center center;
    z-index: 1;
    opacity: 0;
    will-change: transform;
    transition: opacity 0.15s ease-out;
}
.iv-image-wrap.iv-loaded {
    opacity: 1;
}

.iv-image {
    display: block;
    max-width: none;
    max-height: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.iv-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    font-size: 12px;
}

.iv-toolbar-left,
.iv-toolbar-right,
.iv-toolbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.iv-toolbar-left {
    flex-shrink: 0;
}

.iv-toolbar-center {
    flex: 1;
    justify-content: center;
    color: #b0b0b0;
    text-align: center;
}

.iv-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.iv-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.iv-zoom-percentage {
    min-width: 52px;
    text-align: right;
    color: #b0b0b0;
}

/* 退出按钮：在底部工具栏、缩放比例右侧，与一栏尺寸适配，文字「退出」 */
.iv-btn-exit {
    padding: 4px 10px;
    margin-left: 4px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    font-size: 12px;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.iv-btn-exit:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.iv-overlay.iv-open .iv-container {
    animation: iv-container-scale-in 0.28s ease-out;
    backface-visibility: hidden;
}

@keyframes iv-container-scale-in {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}