/* ============================================================ Client Review Dashboard — reviewer-only styles (Phase 1). Two groups: 1) Overrides of editor classes, scoped under `.review-app` so they NEVER leak into the editor (both views share styles.css + this file on the same page). 2) Slideshow / comment / badge styles — unique class names that only ever appear in review mode, so they're safe unscoped (the slideshow portals to , outside .review-app). ============================================================ */ /* ---------- read-only grid overrides ---------- */ /* No side rail in the reviewer view — reclaim the gutter .main reserves for it. */ .review-app.app .main { margin-left: 0; } .review-app .shot-card.review-card { cursor: pointer; } .review-app .scene-header { cursor: pointer; } /* Pin the status + "View comments" row to the bottom of the card so it lines up across a row regardless of how many lines the description wraps to (1 vs 2). The grid stretches every card in a row to equal height; without this the status row floats right after the description and the leftover space lands below it, so the row sits at a different height card-to-card. */ .review-app .shot-card.review-card .shot-status-row { margin-top: auto; } /* Scene title rendered as static text (mirrors .scene-title-input font). */ .review-app .review-scene-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Static title + description inside a read-only card. */ .review-app .review-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; } .review-app .review-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Static field value (replaces the editor's .row-control input). Sized down and shared with the slideshow detail panel — the slideshow portals OUTSIDE .review-app, so without this it would inherit the 16px body default and the values would render much larger than on the cards. */ .review-app .row-value, .slideshow-details .row-value { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Slideshow detail rows: smaller labels + icons + tighter rows to match. */ .slideshow-details .row-label-full { font-size: 10.5px; min-width: 72px; } .slideshow-details .row-icon { width: 13px; height: 13px; } .slideshow-details.shot-form-grid.full .shot-form-row { padding: 4px 8px; } /* Empty-image placeholder in a card thumb. */ .review-app .review-empty, .slideshow-img.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-4); font-size: 12px; } .review-app .review-empty svg, .slideshow-img.empty svg { width: 26px; height: 26px; opacity: 0.7; } /* "View →" hint in the card status row. */ .review-app .review-open-hint { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.02em; } .review-app .review-open-hint svg { width: 12px; height: 12px; } .review-app .shot-card:hover .review-open-hint { color: var(--accent); } /* Comment count badge on a card thumb. */ .review-comment-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-2); } .review-comment-badge svg { width: 12px; height: 12px; } .review-comment-badge.has-open { color: var(--status-review); border-color: rgba(245, 194, 107, 0.4); } /* ---------- review toolbar ---------- */ .review-app .review-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border-hi); } .review-app .review-badge svg { width: 15px; height: 15px; } .review-app .review-comment-summary { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .review-app .review-comment-summary svg { width: 14px; height: 14px; } .review-app .review-open-count { color: var(--status-review); font-weight: 600; } /* ============================================================ Slideshow overlay (portaled to ) ============================================================ */ .slideshow-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 28px; animation: review-fade 0.18s var(--ease); } @keyframes review-fade { from { opacity: 0; } to { opacity: 1; } } .slideshow { position: relative; display: flex; width: min(1240px, 96vw); height: min(760px, 90vh); background: var(--surface-0); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .slideshow-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; transition: background 0.15s var(--ease); } .slideshow-close:hover { background: rgba(0, 0, 0, 0.7); } .slideshow-close svg { width: 17px; height: 17px; } /* left: image stage */ .slideshow-stage { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: #070a09; } .slideshow-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .slideshow-img.empty { position: static; width: 100%; height: 100%; } .slideshow-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .slideshow-nav:hover { background: rgba(0, 0, 0, 0.72); } .slideshow-nav.prev { left: 14px; } .slideshow-nav.next { right: 14px; } .slideshow-nav svg { width: 20px; height: 20px; } .slideshow-counter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 4px 11px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); } /* right: details + comments */ .slideshow-side { width: 380px; flex: 0 0 380px; display: flex; flex-direction: column; background: var(--surface-0); border-left: 1px solid var(--border); overflow-y: auto; } .slideshow-head { padding: 22px 22px 14px; border-bottom: 1px solid var(--border); } .slideshow-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .slideshow-title { margin: 6px 0 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; } .slideshow-desc { margin: 0; padding: 14px 22px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); border-bottom: 1px solid var(--border); } .slideshow-details.shot-form-grid.full { padding: 12px 14px; border-top: none; margin: 0; border-bottom: 1px solid var(--border); } /* ---------- comment thread ---------- */ .comment-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; } .comment-thread-head { display: flex; align-items: center; gap: 7px; padding: 14px 22px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .comment-thread-head svg { width: 14px; height: 14px; } .comment-thread-head .comment-count { margin-left: auto; font-family: var(--font-mono); color: var(--text-4); text-transform: none; letter-spacing: 0; } .comment-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 8px; display: flex; flex-direction: column; gap: 10px; } .comment-empty { padding: 18px 0; text-align: center; font-size: 12.5px; color: var(--text-4); } .comment { padding: 11px 12px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border); } .comment.resolved { opacity: 0.62; } .comment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .comment-author { font-size: 12.5px; font-weight: 600; color: var(--text); } .comment-time { font-size: 11px; color: var(--text-4); } .comment-resolve { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-3); background: transparent; border: 1px solid var(--border-2); cursor: pointer; transition: all 0.15s var(--ease); } .comment-resolve svg { width: 12px; height: 12px; } .comment-resolve:hover { color: var(--text); border-color: var(--border-hi); } .comment-resolve.on { color: var(--status-approved); background: var(--status-approved-bg); border-color: rgba(91, 214, 140, 0.3); } .comment-body { font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-word; } .comment.resolved .comment-body { text-decoration: line-through; } /* Reply action under each comment — focuses the composer and @-mentions the author. (Phase 1: a single flat thread, so reply is a mention shortcut.) */ .comment-actions { margin-top: 8px; } .comment-reply { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: transparent; border: 1px solid var(--border-2); cursor: pointer; transition: all 0.15s var(--ease); } .comment-reply svg { width: 12px; height: 12px; } .comment-reply:hover { color: var(--accent); border-color: var(--border-hi); background: var(--accent-soft); } .comment-add { padding: 12px 22px 18px; border-top: 1px solid var(--border); background: var(--surface-0); } .comment-as { font-size: 12px; color: var(--text-3); margin-bottom: 8px; } .comment-as strong { color: var(--text); } .comment-as .linklike { margin-left: 6px; background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 0; } .comment-name { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--border-2); color: var(--text); font-family: var(--font-sans); font-size: 13px; } .comment-add-row { display: flex; gap: 8px; align-items: flex-end; } .comment-input { flex: 1; resize: none; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--border-2); color: var(--text); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; } .comment-input:focus, .comment-name:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow); } .comment-send { flex: 0 0 auto; white-space: nowrap; } /* ---------- responsive: stack on narrow screens ---------- */ @media (max-width: 760px) { .slideshow-backdrop { padding: 0; } .slideshow { flex-direction: column; width: 100vw; height: 100vh; border-radius: 0; border: none; } .slideshow-stage { flex: 0 0 42vh; } .slideshow-side { width: 100%; flex: 1 1 auto; border-left: none; border-top: 1px solid var(--border); } .slideshow-nav { width: 38px; height: 38px; } } /* ============================================================ Phase 2 — sharing + gated commenting ============================================================ */ /* ---------- "Create share link" modal (editor) ---------- */ .share-link-row { display: flex; gap: 8px; margin: 4px 0 10px; } .share-link-input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--border-2); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; } .share-link-input:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow); } .share-copy-btn { flex: 0 0 auto; white-space: nowrap; } .share-link-hint { margin: 0; font-size: 12px; color: var(--text-4); } /* ---------- gated composer: "Sign in to comment" ---------- */ .comment-signin { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border-hi); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .comment-signin:hover { background: var(--accent-glow); border-color: var(--accent); } .comment-signin svg { width: 15px; height: 15px; } /* "Email me when someone replies" opt-in */ .comment-notify { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); cursor: pointer; user-select: none; } .comment-notify input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* "Replying to X" chip above the composer */ .comment-replying { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--text-3); } .comment-replying strong { color: var(--text); } /* Read-only "Resolved" tag shown to non-owners (no toggle). */ .comment-resolved-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--status-approved); background: var(--status-approved-bg); border: 1px solid rgba(91, 214, 140, 0.3); } .comment-resolved-tag svg { width: 12px; height: 12px; } /* ---------- full-page review states (loading / not-found / error) ---------- */ .review-state { flex: 1; display: grid; place-items: center; padding: 48px 24px; } .review-state-inner { text-align: center; max-width: 380px; color: var(--text-3); } .review-state-inner h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; color: var(--text); } .review-state-inner p { margin: 0; font-size: 13.5px; line-height: 1.5; } .review-spinner { width: 30px; height: 30px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--border-2); border-top-color: var(--accent); animation: review-spin 0.8s linear infinite; } @keyframes review-spin { to { transform: rotate(360deg); } } /* ---------- editor card "View comments" button (owner inbox) ---------- */ /* Keep the status pill + comments button grouped on the left of the row. */ .shot-status-row .status-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .card-comments-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface-1); border: 1px solid var(--border-2); cursor: pointer; white-space: nowrap; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease); } .card-comments-btn svg { width: 13px; height: 13px; } .card-comments-btn .cc-count { font-family: var(--font-mono); } .card-comments-btn:hover { color: var(--text); border-color: var(--border-hi); } /* Amber accent when there are unresolved client comments to address. */ .card-comments-btn.has-open { color: var(--status-review); border-color: rgba(245, 194, 107, 0.4); background: var(--status-review-bg); }