/* Разбор снимка: превью, рамка-видоискатель и полоска сканирования.
   Полоска бежит только пока идёт настоящий разбор — как закончился,
   останавливается. Иначе она врёт про работу, которой нет. */

.ph-wrap { margin: 14px 0 4px; display: flex; gap: 16px; align-items: flex-start; }

.ph-frame {
  position: relative; width: 132px; height: 132px; flex-shrink: 0;
  border-radius: 18px; overflow: hidden;
  background: var(--bg-secondary, #FBF8F3);
  box-shadow: 0 0 0 1px var(--border, rgba(31,36,46,.10));
  transition: box-shadow .25s ease;
}
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Уголки видоискателя — появляются только во время разбора */
.ph-corner {
  position: absolute; width: 16px; height: 16px; opacity: 0;
  border: 2px solid var(--gold, #F26A1A); transition: opacity .25s ease;
}
.ph-corner.tl { top: 9px;    left: 9px;    border-right: none; border-bottom: none; border-radius: 5px 0 0 0; }
.ph-corner.tr { top: 9px;    right: 9px;   border-left: none;  border-bottom: none; border-radius: 0 5px 0 0; }
.ph-corner.bl { bottom: 9px; left: 9px;    border-right: none; border-top: none;    border-radius: 0 0 0 5px; }
.ph-corner.br { bottom: 9px; right: 9px;   border-left: none;  border-top: none;    border-radius: 0 0 5px 0; }
.ph-frame.scanning .ph-corner { opacity: 1; }

/* Светящаяся полоска. Ходит сверху вниз и обратно, пока идёт разбор. */
.ph-beam {
  position: absolute; left: 0; right: 0; height: 34%; top: -34%;
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(242,106,26,0) 0%,
    rgba(242,106,26,.16) 42%,
    rgba(255,168,92,.52) 50%,
    rgba(242,106,26,.16) 58%,
    rgba(242,106,26,0) 100%);
}
.ph-frame.scanning .ph-beam { opacity: 1; animation: ph-sweep 1.5s ease-in-out infinite; }
@keyframes ph-sweep {
  0%   { top: -34%; }
  50%  { top: 100%; }
  100% { top: -34%; }
}

/* Мягкое дыхание рамки, пока считаем */
.ph-frame.scanning { animation: ph-pulse 1.5s ease-in-out infinite; }
@keyframes ph-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(242,106,26,.35), 0 0 0 0 rgba(242,106,26,.22); }
  50%      { box-shadow: 0 0 0 1px rgba(242,106,26,.55), 0 0 0 9px rgba(242,106,26,0); }
}

.ph-frame.good { box-shadow: 0 0 0 2px var(--cyan, #6E9A3E); }
.ph-frame.warn { box-shadow: 0 0 0 2px #E0A32E; }

/* Правая колонка: что происходит и что вышло */
.ph-side { flex: 1; min-width: 0; padding-top: 2px; }
.ph-status {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary, #20242E);
  min-height: 21px; display: flex; align-items: center; gap: 8px;
}
.ph-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #F26A1A); flex-shrink: 0;
  animation: ph-blink 1.1s ease-in-out infinite;
}
.ph-side.done .ph-status::before { animation: none; background: var(--cyan, #6E9A3E); }
.ph-side.done.has-warn .ph-status::before { background: #E0A32E; }
@keyframes ph-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.ph-facts { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.ph-fact {
  font-size: 12px; padding: 3px 9px; border-radius: 99px;
  background: var(--bg-secondary, #FBF8F3);
  border: 1px solid var(--border, rgba(31,36,46,.10));
  color: var(--text-secondary, #4A5060);
}
.ph-note {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary, #4A5060);
}
.ph-note b { color: #A8760F; }
.ph-replace {
  margin-top: 10px; font-size: 13px; color: var(--gold-dark, #D9560B);
  cursor: pointer; border-bottom: 1px solid currentColor; display: inline-block;
}

@media (max-width: 460px) {
  .ph-wrap { gap: 12px; }
  .ph-frame { width: 104px; height: 104px; border-radius: 15px; }
  .ph-status { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-frame.scanning, .ph-frame.scanning .ph-beam, .ph-status::before { animation: none; }
  .ph-frame.scanning .ph-beam { opacity: .35; top: 33%; }
}