/* Фото клиента (П30): миниатюры в карточке заявки и в диалоге, просмотр крупно. Разметка — public/panel/photos.js. */

.lsph[hidden] { display: none; }
.lsph-block { margin-top: 24px; }
.inbox-client-body .lsph-block { margin-top: 18px; }

.lsph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  gap: 8px;
  justify-content: start;
}
@media (max-width: 480px) {
  /* 390 px: ровно три колонки по 88 px */
  .lsph-grid { grid-template-columns: repeat(3, 88px); }
}

.lsph-thumb {
  width: 88px;
  height: 88px;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.lsph-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lsph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lsph-img:not([src]) { visibility: hidden; }
.lsph-thumb.is-failed { cursor: default; }
.lsph-note { margin-top: 8px; font-size: 12.5px; }

.lsph-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 13, .72);
}
.lsph-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(100%, 960px);
  max-height: 100%;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.lsph-dialog:focus { outline: none; }
.lsph-big-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 120px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.lsph-big-img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.lsph-big-img:not([src]) { display: none; }
.lsph-big-status { padding: 24px; font-size: 14px; }
.lsph-big-status[hidden] { display: none; }
.lsph-big-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lsph-big-actions .btn { min-height: 44px; }
.lsph-confirm { display: flex; flex-direction: column; gap: 8px; }
.lsph-confirm[hidden] { display: none; }
.lsph-confirm-text { font-size: 14px; color: var(--ink); }