/* ── Comment form overlay ──────────────────────────────────────── */
.comment-overlay {
    position: fixed; inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.comment-overlay.is-open {
    opacity: 1; pointer-events: auto;
}
.comment-panel {
    position: relative;
    background: #fff; color: #222;
    border-radius: 10px;
    width: 90%; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.comment-close {
    position: absolute; top: .75rem; right: .75rem;
    background: none; border: none; cursor: pointer;
    color: #666; padding: 4px;
}
.comment-close:hover { color: #222; }

.comment-heading {
    margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 600;
}

/* Auth step */
.comment-auth-label {
    margin: 0 0 1rem; color: #555; font-size: .95rem;
}

/* Compose step */
.comment-user-info {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1rem; font-size: .85rem; color: #666;
}
.comment-user-name { flex: 1; }
.comment-sign-out {
    background: none; border: none; cursor: pointer;
    color: #888; font-size: .8rem; text-decoration: underline;
}
.comment-sign-out:hover { color: #333; }

.comment-label {
    display: block; font-size: .8rem; font-weight: 500;
    color: #555; margin-bottom: .25rem;
}
.comment-input,
.comment-textarea {
    display: block; width: 100%;
    padding: .5rem .65rem;
    border: 1px solid #ccc; border-radius: 6px;
    font: inherit; font-size: .95rem;
    margin-bottom: .75rem;
    box-sizing: border-box;
    transition: border-color .15s;
}
.comment-input:focus,
.comment-textarea:focus {
    outline: none; border-color: #555;
}
.comment-textarea {
    resize: vertical; min-height: 100px;
}

.comment-mailing-list {
    margin-bottom: .75rem; font-size: .85rem; color: #555;
}
.comment-mailing-list label {
    display: flex; align-items: center; gap: .4rem; cursor: pointer;
}

.comment-actions {
    display: flex; justify-content: flex-end; margin-top: .25rem;
}
.comment-submit {
    background: #222; color: #fff; border: none;
    padding: .55rem 1.5rem; border-radius: 6px;
    font: inherit; font-size: .95rem; cursor: pointer;
    transition: background .15s;
}
.comment-submit:hover { background: #444; }
.comment-submit:disabled { opacity: .5; cursor: wait; }

.comment-status {
    margin-top: .75rem; font-size: .85rem;
    padding: .5rem .65rem; border-radius: 6px;
}
.comment-status-error {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}
.comment-status-info {
    background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}

/* Thanks step */
.comment-thanks-msg {
    text-align: center; padding: 1.5rem 0;
    font-size: 1rem; color: #333;
}

/* ── Dark-theme override (photoblog uses dark bg) ──────────────── */
@media (prefers-color-scheme: dark) {
    .comment-panel {
        background: #1a1a1a; color: #ddd;
    }
    .comment-close { color: #999; }
    .comment-close:hover { color: #eee; }
    .comment-auth-label { color: #aaa; }
    .comment-user-info { color: #999; }
    .comment-sign-out { color: #888; }
    .comment-sign-out:hover { color: #ccc; }
    .comment-label { color: #aaa; }
    .comment-input,
    .comment-textarea {
        background: #2a2a2a; border-color: #444; color: #ddd;
    }
    .comment-input:focus,
    .comment-textarea:focus {
        border-color: #888;
    }
    .comment-mailing-list { color: #aaa; }
    .comment-submit { background: #ddd; color: #111; }
    .comment-submit:hover { background: #fff; }
    .comment-status-error { background: #2d1b1b; color: #f87171; border-color: #5c2121; }
    .comment-status-info { background: #1b2d3d; color: #60a5fa; border-color: #1e3a5f; }
    .comment-thanks-msg { color: #ccc; }
}