.sc-comment-editor { border-radius: 20px; overflow: hidden; }
.sc-comment-editor .modal-header, .sc-comment-editor .modal-footer { padding: 20px 24px; }
.sc-comment-editor .modal-body { padding: 24px; }
.sc-comment-editor textarea { min-height: 150px; resize: vertical; }
.sc-photo-section-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0 12px; }
.sc-photo-section-header p { margin:4px 0 0; font-size:12px; color:var(--sc-text-muted, #8493a7); }
.sc-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.sc-photo-card { padding:10px; border:1px solid var(--sc-border, #dae5ee); border-radius:14px; background:var(--sc-card, #fff); min-width:0; }
.sc-photo-card img, .sc-photo-placeholder { width:100%; height:126px; object-fit:cover; border-radius:9px; background:rgba(14,165,233,.07); }
.sc-photo-placeholder { display:grid; place-items:center; color:var(--sc-text-muted,#8493a7); font-size:13px; }
.sc-photo-card a { display:block; cursor:zoom-in; }
.sc-photo-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:9px 0; font-size:12px; }
.sc-photo-actions { display:flex; gap:6px; align-items:center; }
.sc-photo-actions .btn { font-size:12px; padding:6px 10px; margin:0; }
.sc-photo-upload { position:relative; overflow:hidden; cursor:pointer; }
.sc-photo-upload input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.sc-photo-upload:focus-within { outline:2px solid #0ea5e9; outline-offset:3px; }
.sc-comment-thumbs { display:flex; flex-wrap:wrap; gap:6px; }
.sc-comment-thumbs img { width:54px; height:54px; object-fit:cover; border-radius:9px; border:1px solid var(--sc-border,#dae5ee); }
.sc-photo-lightbox { width:min(1000px,94vw); max-height:92dvh; padding:16px; border:1px solid #334155; border-radius:20px; background:#0f172a; color:#f1f5f9; box-shadow:0 24px 90px #0008; }
.sc-photo-lightbox::backdrop { background:rgba(4,12,25,.82); backdrop-filter:blur(6px); }
.sc-photo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; overflow-wrap:anywhere; }
.sc-photo-lightbox button { flex-shrink:0; width:40px; height:40px; border:1px solid #334155; border-radius:12px; background:#1e293b; color:#e2e8f0; font-size:26px; cursor:pointer; }
.sc-photo-lightbox button:hover { background:#334155; }
.sc-photo-stage { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.sc-photo-stage img { max-width:calc(100% - 100px); max-height:65dvh; object-fit:contain; border-radius:10px; }
.sc-photo-stage button[hidden] { display:none; }
.sc-photo-hint { text-align:center; color:#94a3b8; font-size:12px; margin:14px 0 0; }
.salecore-theme .btn:hover, html:not(.dark-style) .salecore-theme .btn:hover { box-shadow:none !important; outline:none; }
.salecore-theme .btn:hover::before, .salecore-theme .btn:hover::after { box-shadow:none !important; }
.salecore-theme .btn:focus-visible, .sc-photo-lightbox button:focus-visible, [data-comment-photo]:focus-visible { outline:2px solid #0ea5e9 !important; outline-offset:3px; }
@media(max-width:575px) { .sc-comment-editor .modal-body { padding:16px; } .sc-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sc-photo-stage { gap:4px; } .sc-photo-stage img { max-width:calc(100% - 88px); } }

/* Keep controls usable inside the CRM theme and narrow modal columns. */
.salecore-theme .sc-photo-actions { flex-wrap:wrap; }
.salecore-theme .sc-photo-actions .btn { flex:1 1 auto; min-width:0 !important; width:auto !important; padding:8px 10px !important; white-space:normal; text-align:center; }
.sc-comment-editor .modal-body { min-width:0; }
.sc-comment-editor .modal-footer { flex-wrap:wrap; gap:8px; }
.sc-photo-section-header > div { min-width:0; }
.sc-photo-section-header > button { flex-shrink:0; white-space:nowrap; }
@media(max-width:575px) { .sc-photo-section-header { align-items:stretch; flex-direction:column; gap:10px; } .sc-photo-section-header > button { align-self:flex-start; } .sc-comment-editor .modal-header, .sc-comment-editor .modal-footer { padding:16px; } .sc-comment-editor .modal-title { font-size:16px; overflow-wrap:anywhere; } .sc-photo-lightbox { padding:10px; } }
@media(max-width:420px) { .sc-photo-grid { grid-template-columns:minmax(0,1fr); } .sc-photo-card img,.sc-photo-placeholder { height:180px; } }