/* ================================================================================
   STYLESHEET: media.css
   CREATED:    2026-03-15
   MODIFIED:   2026-03-15
   PURPOSE:    Image viewer, zoom overlay, peek overlay, and file viewer styles
   ================================================================================ */

/* ========== IMAGE VIEWER (Phase 4) ========== */
/* 2026-02-25 - Canvas-based image renderer with navigation */

/* 2026-02-25 - Width fills column, height follows image aspect ratio */
.image-container {
    width: 100%;
    /* 2026-03-10 - flex:1 + min-height:0 lets CSS constrain height to available space */
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--container-padding);
}
.image-wrapper {
    position: relative;
    line-height: 0;
    border-radius: var(--img-corner);
    border: var(--img-outline-width) solid var(--img-outline-color);
    box-shadow: var(--img-shadow-offset-x) var(--img-shadow-offset-y)
                var(--img-shadow-blur) var(--img-shadow-spread) var(--img-shadow-color);
    overflow: hidden;
    display: none;
}
.image-wrapper.ready {
    display: block;
}
#sourceImg {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
#canvas {
    display: block;
}
/* 2026-02-25 - URL mode: show img directly, hide canvas */
.image-wrapper.url-mode #sourceImg {
    display: block;
}
.image-wrapper.url-mode #canvas {
    display: none;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--loading-overlay-bg);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.loading-overlay.active {
    display: flex;
}
.spinner {
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: 2.5px solid var(--spinner-bg-color);
    border-top-color: var(--spinner-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Navigation Arrows */
/* 2026-02-25 - Expand button: appears on image hover, opens zoom */
/* 2026-03-04 - Expand controls container: button + spinner, centered at bottom */
.expand-controls {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.image-wrapper:hover .expand-controls {
    opacity: 1;
}
.image-expand-btn {
    padding: 8px;
    background: rgba(44, 44, 46, 0.41);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 9999px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-expand-btn:hover {
    background: rgba(44, 44, 46, 0.65);
}

/* ---------- Comments (Apple Mail style, inline in info panel) ---------- */
/* 2026-02-25 - Flat rows, blue dot, hover-reveal delete */

/* Individual comment row — flat, no bubble */
/* 2026-02-26 - Comment list: Apple Music style rows */
/* 2026-02-26 - Left/right margins align highlight bar with comment input textarea */
/* 2026-02-26 - Symmetric margins matching input bar */
/* 2026-02-27 - Reduced horizontal margin (frame provides 8px) */
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 10px;
    margin: 0 4px;
    background: transparent;
    transition: background 0.15s ease;
}
/* 2026-02-27 - Apple-style hover: highlight hides both divider lines */
.comment-item:hover {
    background: #f5f5f5;
    border-radius: 8px;
}
.comment-item:hover .comment-body {
    border-top-color: transparent;
}
.comment-item:hover + .comment-item .comment-body {
    border-top-color: transparent;
}

/* 2026-02-26 - Unread dot: faint gray default, blue when unread, highlight on hover */
.comment-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d8d8;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.comment-unread-dot:hover {
    background: #007AFF;
}
/* Unread: blue dot */
.comment-item:not(.read) .comment-unread-dot {
    background: #007AFF;
}
/* Read: faint gray, highlights blue on hover */
.comment-item.read .comment-unread-dot {
    background: #d8d8d8;
}
.comment-item.read .comment-unread-dot:hover {
    background: #007AFF;
}

/* Comment body — divider spans text area only */
/* 2026-02-26 - Darker divider for better visibility between list items */
.comment-body {
    flex: 1;
    min-width: 0;
    padding: 9px 0;
    /* 2026-02-27 - Switched to border-top for Apple-style hover */
    border-top: 1px solid #e0e0e0;
}
.comment-item:first-child .comment-body {
    border-top: none;
}
/* 2026-02-26 - 3-line truncation with click-to-expand */
.comment-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.comment-text.expanded {
    -webkit-line-clamp: unset;
    display: block;
    max-height: 200px;
    overflow-y: auto;
}
/* Scrollbar for expanded comments */
.comment-text.expanded::-webkit-scrollbar {
    width: 6px;
}
.comment-text.expanded::-webkit-scrollbar-track {
    background: transparent;
}
.comment-text.expanded::-webkit-scrollbar-thumb {
    background: #c8c8cc;
    border-radius: 3px;
}
/* 2026-02-26 - Flex row: blue dot + user + date */
.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
/* Read state: slightly dimmed text, not invisible */
.comment-item.read .comment-text {
    color: var(--text-secondary);
}
/* 2026-03-03 - User initials tag for comments and notes */
.user-initials-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    background: #8e8e93;
    border-radius: 8px;
    cursor: default;
}


/* 2026-02-26 - Comments tab: input at top, comments scroll below */
#tabComments #commentsDisplay {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* 2026-02-27 - Scrollbar matching tab content frame style */
#tabComments #commentsDisplay::-webkit-scrollbar {
    width: 7px;
}
#tabComments #commentsDisplay::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 12px;
}
#tabComments #commentsDisplay::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
    border-right: 2px solid transparent;
    background-clip: padding-box;
}

/* 2026-02-27 - Notes tab: input sticky at top, notes scroll below */
#tabNotes #notesDisplay {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
#tabNotes #notesDisplay::-webkit-scrollbar {
    width: 7px;
}
#tabNotes #notesDisplay::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 12px;
}
#tabNotes #notesDisplay::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
    border-right: 2px solid transparent;
    background-clip: padding-box;
}

/* 2026-02-26 - Input bar: symmetric left/right padding */
/* 2026-02-27 - Removed divider, equal spacing above and below bubble */
.comments-input-bar {
    flex-shrink: 0;
    padding: 8px 4px 2px 4px;
    background: transparent;
}
/* 2026-02-26 - Wrapper positions send btn inside textarea bubble */
.comments-textarea-wrap {
    position: relative;
}
/* 2026-02-25 - Manual resize only, no max-height limit */
.comments-input-bar textarea {
    width: 100%;
    /* 2026-02-26 - Two-line height with padding */
    min-height: 62px;
    overflow-y: auto;
    /* 2026-02-26 - Bottom padding for breathing room below last line */
    padding: 12px 40px 14px 14px;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    outline: none;
    resize: none;
    line-height: 1.4;
    box-sizing: border-box;
}
/* 2026-02-26 - Hide resize grip but keep resize functionality */
.comments-input-bar textarea::-webkit-resizer {
    display: none;
}
/* 2026-02-26 - Scrollbar matching note editor style */
.comments-input-bar textarea::-webkit-scrollbar {
    width: 5px;
}
.comments-input-bar textarea::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 4px;
}
.comments-input-bar textarea::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}
.comments-input-bar textarea:focus {
    border-color: var(--accent-color);
}
.comments-input-bar textarea::placeholder {
    color: var(--text-tertiary);
}
/* 2026-02-27 - Centered drag pill below textarea, hidden until hover */
.comments-resize-handle {
    display: flex;
    justify-content: center;
    height: 8px;
    cursor: ns-resize;
}
.comments-resize-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin-top: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.2s ease, width 0.15s ease;
}
.comments-resize-handle:hover::after {
    background: #a8a8ac;
    width: 48px;
}
.comments-resize-handle:active::after {
    background: var(--accent-color);
}
/* 2026-02-26 - Send button: inside textarea, pill shape matching pin/review */
/* 2026-02-26 - Positioned bottom-right, matching three-dot menu placement */
.comments-send-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: #007AFF;
    color: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
}
.comments-send-btn.active {
    display: flex;
}
.comments-send-btn.active:hover {
    filter: brightness(1.1);
}
.comments-send-btn.active:active {
    transform: scale(0.9);
}
.comments-send-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2026-03-15 - Visible text Save button below comment textarea */
.comments-save-btn {
    display: none;
    margin: 6px 0 0 auto;
    padding: 6px 18px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--accent-color, #6B8190);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.comments-save-btn.active {
    display: block;
}
.comments-save-btn:hover {
    opacity: 0.85;
}

/* 2026-02-27 - Notes input bar (matches comments-input-bar pattern) */
.notes-input-bar {
    flex-shrink: 0;
    padding: 8px 4px 2px 4px;
    background: transparent;
}
.notes-textarea-wrap {
    position: relative;
}
.notes-input-bar textarea {
    width: 100%;
    min-height: 62px;
    overflow-y: auto;
    padding: 12px 40px 14px 14px;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    outline: none;
    resize: none;
    line-height: 1.4;
    box-sizing: border-box;
}
.notes-input-bar textarea::-webkit-resizer {
    display: none;
}
.notes-input-bar textarea::-webkit-scrollbar {
    width: 5px;
}
.notes-input-bar textarea::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 4px;
}
.notes-input-bar textarea::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
    /* 2026-02-27 - Inset from right edge to match comments scrollbar */
    border-right: 2px solid transparent;
    background-clip: padding-box;
}
.notes-input-bar textarea:focus {
    border-color: var(--accent-color);
}
.notes-input-bar textarea::placeholder {
    color: var(--text-tertiary);
}
/* 2026-02-27 - Send button: bottom-right of notes textarea */
.notes-send-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: #007AFF;
    color: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
}
.notes-send-btn.active {
    display: flex;
}
.notes-send-btn.active:hover {
    filter: brightness(1.1);
}
.notes-send-btn.active:active {
    transform: scale(0.9);
}
.notes-send-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2026-02-27 - Clear button: bottom-left, appears when text entered */
.notes-clear-btn {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #b0b0b0;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.notes-clear-btn.active {
    display: flex;
}
.notes-clear-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.notes-clear-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2026-02-27 - Expand button: bottom-right, shifts left when send visible */
.notes-expand-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #b0b0b0;
    border-radius: 6px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease,
                right 0.15s ease;
}
.notes-expand-btn.visible {
    display: flex;
}
.notes-expand-btn.shifted {
    right: 40px;
}
.notes-expand-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.notes-expand-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2026-02-27 - Files action bar (subtle upload buttons) */
.files-action-bar {
    flex-shrink: 0;
    /* 2026-02-27 - Left padding aligns button with file text below */
    padding: 8px 4px 4px 14px;
    background: transparent;
    display: flex;
    gap: 8px;
}
.files-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: var(--font-family);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease;
}
.files-action-btn:hover {
    background: #f5f5f5;
    color: var(--text-primary);
    border-color: #c0c0c5;
}
.files-action-btn:active {
    background: #ebebeb;
}
.files-action-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2026-03-16 - File upload progress bar */
.file-upload-progress {
    padding: 8px 12px;
}
.file-upload-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.file-upload-progress-label {
    font-size: 11px;
    color: var(--text-secondary);
}
.file-upload-dismiss {
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.file-upload-dismiss:hover {
    color: var(--text-primary);
}
.file-upload-progress-track {
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.file-upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-color, #007aff);
    border-radius: 2px;
    transition: width 0.15s ease;
}

/* ========== ZOOM OVERLAY (Phase 6) ========== */
/* 2026-02-25 - Full-screen zoom/pan/exposure overlay */

/* 2026-02-26 - PDF/File Viewer Overlay */
.file-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 900;
    display: none;
    flex-direction: column;
}
.file-viewer-overlay.active {
    display: flex;
}
.file-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(30, 30, 30, 0.95);
    flex-shrink: 0;
}
.file-viewer-title {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-viewer-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.file-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.file-viewer-body {
    flex: 1;
    background: #fff;
    overflow: hidden;
}
.file-viewer-body object {
    width: 100%;
    height: 100%;
    border: none;
}

.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.zoom-overlay.active {
    display: block;
}

.zoom-viewer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
}
.zoom-viewer.dragging {
    cursor: grabbing;
}

.zoom-container {
    will-change: transform;
    transform-origin: 0 0;
}

.zoom-container canvas {
    display: block;
}

/* Zoom Controls Bar — frosted glass pills */
/* 2026-02-26 - Fixed at bottom center, does not track image pan */
.zoom-controls {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    opacity: 1;
    transition: opacity 0.8s ease;
}
.zoom-controls.hidden {
    opacity: 0;
    pointer-events: none;
}

.zoom-pill {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(44, 44, 46, 0.41);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 9999px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.zoom-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 300;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.zoom-btn:active {
    opacity: 0.6;
}

/* Zoom value with hover-reveal reset */
/* fixed width so the control never resizes when the text changes
   (either a numeric value or the RESET button). also prevents the
   reset button from spilling out and failing to cover the underlying
   element). 50px was chosen to comfortably fit the widest expected
   content including the "RESET" label. */
.zoom-value-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}
.zoom-value {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    /* take full width of the wrapper so it never changes size */
    width: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
.zoom-reset-btn {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    /* fill the wrapper and never extend past it */
    width: 100%;
    max-width: 100%;
}
.zoom-value-wrapper:hover .zoom-value {
    display: none;
}
.zoom-value-wrapper:hover .zoom-reset-btn {
    display: block;
}

/* Exposure value with hover-reveal reset */
/* same fixed-width treatment as zoom so both controls are stable and
   the reset button fully covers the area without overlapping adjacent
   UI elements */
/* 2026-03-16 - Collapse button: upper-left, always visible, prominent */
.zoom-collapse-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1002;
    padding: 10px;
    background: rgba(44, 44, 46, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 9999px;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.zoom-collapse-btn:hover {
    background: rgba(44, 44, 46, 0.75);
    opacity: 1;
}

/* 2026-03-06 - Peek overlay v2: no transitions on image, no border-radius on img.
   Image hidden until loaded, then shown instantly. No flicker possible. */
.peek-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 900;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}
.peek-overlay.active {
    display: flex;
}
.peek-img-wrap {
    position: relative;
    display: none;
}
.peek-img-wrap.loaded {
    display: block;
}
.peek-img {
    display: block;
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.peek-title {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
    border-radius: 8px;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 2026-03-06 - Instagram-style dots for multi-image objects */
.peek-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
}
.peek-dots:empty {
    display: none;
}
.peek-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.15s, transform 0.15s;
}
.peek-dot.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.25);
}
/* 2026-03-06 - Nav arrows inside image for wide peek (hidden on narrow) */
.peek-nav-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.peek-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}
.peek-nav-left { left: 18px; }
.peek-nav-right { right: 18px; }
/* 2026-03-14 - Peek nav arrows always visible (desktop-only, no narrow hide) */
.peek-nav-arrow.visible {
    display: flex;
}
.peek-actions {
    display: flex;
    gap: 8px;
}
.peek-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
}
.peek-btn:active {
    background: rgba(255, 255, 255, 0.3);
}
/* 2026-03-06 - Creator button: show name, truncate if too long */
.peek-creator-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
}
.peek-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    animation: peek-spin 0.6s linear infinite;
}
.peek-spinner.hidden { display: none; }
@keyframes peek-spin { to { transform: rotate(360deg); } }

/* 2026-03-14 - home-topbar-spacer CSS removed (narrow mode removed) */
/* 2026-03-09 - Creator search icon on home topbar */
.home-creator-wrap {
    position: relative;
    flex-shrink: 0;
}
.home-creator-btn {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ececee;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #999;
    align-items: center;
    justify-content: center;
}
.home-creator-btn:hover { color: #666; }
/* 2026-03-09 - Dim backdrop for creator search */
.home-creator-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 199;
}
.home-creator-backdrop.open { display: block; }
/* 2026-03-15 - Flex column: search pinned top, list scrolls below */
.home-creator-dropdown {
    display: none;
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    width: 432px;
    box-sizing: border-box;
    max-height: 400px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9d9dd;
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 200;
    padding: 4px 0;
    flex-direction: column;
}
.home-creator-dropdown.open { display: flex; }
.home-creator-dropdown .creator-pill-search {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: #fff;
}
.home-creator-dropdown #homeCreatorList {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
/* 2026-03-14 - Home/gallery responsive @media queries removed (desktop-only) */

/* ========== 2026-03-14 - THREE-TIER RESPONSIVE LAYOUT ========== */

/* 2026-03-14 - Three-tier detail responsive layout removed (desktop-only, wide layout only) */