/* =================================================================
   PHOTO MEMORIES — Styles & Effects
   ================================================================= */

/* ─── Camera Button ─────────────────────────────────────────────── */
.btn-photo-attach {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    margin-right: 6px;
}

.btn-photo-attach:hover {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-photo-attach.at-max {
    opacity: 0.4;
    pointer-events: none;
}

.photo-count.has-photos {
    color: var(--text-primary);
    font-weight: 500;
}

/* ─── Preview Strip (below textarea) ───────────────────────────── */
.photo-preview-strip {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.photo-preview-item {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.photo-preview-item.processing {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.photo-processing {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.photo-preview-item:hover .photo-preview-remove {
    opacity: 1;
}

/* ─── Entry Photos (Timeline Display) ──────────────────────────── */
.entry-photos {
    display: flex;
    gap: 8px;
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.entry-photo {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.entry-photo:hover {
    transform: scale(1.05);
    z-index: 1;
}

.photo-thumb {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 2px;
}

/* Diary view: larger photos */
.diary-entry .entry-photos {
    margin-top: 6px;
}

.diary-entry .photo-thumb {
    width: 200px;
    height: 200px;
}

/* ─── Display Effects ──────────────────────────────────────────── */

/* TORN: jagged paper edges with shadow */
.photo-effect-torn {
    transform: rotate(var(--photo-rotate, -1.5deg));
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.15));
}

.photo-effect-torn .photo-thumb {
    border: 3px solid var(--bg-paper, #f5f2eb);
    clip-path: polygon(
        0% 2%, 3% 0%, 8% 3%, 12% 0%, 18% 2%, 22% 0%, 28% 1%, 33% 0%,
        38% 3%, 43% 0%, 48% 2%, 53% 0%, 58% 1%, 63% 0%, 68% 3%, 73% 0%,
        78% 2%, 83% 0%, 88% 1%, 93% 0%, 97% 2%, 100% 0%,
        100% 3%, 98% 8%, 100% 13%, 98% 18%, 100% 23%, 99% 28%, 100% 33%,
        98% 38%, 100% 43%, 99% 48%, 100% 53%, 98% 58%, 100% 63%, 99% 68%,
        100% 73%, 98% 78%, 100% 83%, 99% 88%, 100% 93%, 98% 97%, 100% 100%,
        97% 100%, 93% 98%, 88% 100%, 83% 98%, 78% 100%, 73% 99%, 68% 100%,
        63% 98%, 58% 100%, 53% 98%, 48% 100%, 43% 99%, 38% 100%, 33% 98%,
        28% 100%, 23% 99%, 18% 100%, 12% 98%, 8% 100%, 3% 98%, 0% 100%,
        2% 97%, 0% 93%, 1% 88%, 0% 83%, 2% 78%, 0% 73%, 1% 68%, 0% 63%,
        2% 58%, 0% 53%, 1% 48%, 0% 43%, 2% 38%, 0% 33%, 1% 28%, 0% 23%,
        2% 18%, 0% 13%, 1% 8%, 0% 3%
    );
}

/* PIN: pushpin at top center */
.photo-effect-pin {
    transform: rotate(var(--photo-rotate, 2deg));
}

.photo-effect-pin .photo-thumb {
    border: 2px solid var(--bg-paper, #f5f2eb);
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
}

.photo-effect-pin::before {
    content: '📌';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* TAPE: translucent tape strip */
.photo-effect-tape {
    transform: rotate(var(--photo-rotate, -1deg));
}

.photo-effect-tape .photo-thumb {
    border: 2px solid var(--bg-paper, #f5f2eb);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-effect-tape::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 25%;
    width: 50%;
    height: 16px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 240, 0.5) 0%,
        rgba(255, 255, 230, 0.35) 100%
    );
    border: 1px solid rgba(200, 190, 170, 0.25);
    z-index: 2;
    transform: rotate(-1deg);
}

/* POLAROID: instant film look */
.photo-effect-polaroid {
    background: white;
    padding: 5px 5px 22px 5px;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
    transform: rotate(var(--photo-rotate, -1.5deg));
}

.photo-effect-polaroid .photo-thumb {
    width: 70px;
    height: 70px;
    border-radius: 0;
}

.diary-entry .photo-effect-polaroid .photo-thumb {
    width: 110px;
    height: 110px;
}

/* CLEAN: minimal border */
.photo-effect-clean .photo-thumb {
    border: 1px solid var(--border-light);
}

/* ─── Lightbox ─────────────────────────────────────────────────── */
.photo-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbFadeIn 0.2s ease;
}

@keyframes lbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.photo-lightbox {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.photo-lightbox-img {
    display: inline-block;
}

.photo-lightbox-img img {
    max-width: 80vw;
    max-height: 75vh;
    object-fit: contain;
}

.photo-lightbox-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    min-width: 200px;
}

.lb-prev, .lb-next {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 14px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-mono);
}

.lb-prev:hover, .lb-next:hover {
    border-color: white;
}

.lb-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-family: var(--font-mono);
}

.lb-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
}

.lb-close:hover {
    color: white;
}

/* ─── Dark Theme Adjustments ───────────────────────────────────── */
[data-theme="dark"] .photo-effect-torn .photo-thumb,
[data-theme="midnight"] .photo-effect-torn .photo-thumb {
    border-color: var(--bg-secondary);
}

[data-theme="dark"] .photo-effect-polaroid,
[data-theme="midnight"] .photo-effect-polaroid {
    background: var(--bg-secondary);
}

[data-theme="dark"] .photo-effect-tape::before,
[data-theme="midnight"] .photo-effect-tape::before {
    background: linear-gradient(180deg, rgba(60, 60, 50, 0.45) 0%, rgba(50, 50, 40, 0.3) 100%);
    border-color: rgba(80, 80, 70, 0.3);
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .photo-thumb {
        width: 60px;
        height: 60px;
    }

    .diary-entry .photo-thumb {
        width: 90px;
        height: 90px;
    }

    .photo-effect-polaroid {
        padding: 3px 3px 16px 3px;
    }

    .photo-effect-polaroid .photo-thumb {
        width: 54px;
        height: 54px;
    }

    .photo-lightbox-img img {
        max-width: 95vw;
    }
}