/* PR #30 visual polish and crop overlay behavior */

.photo-quick-tools {
  position: relative;
  border-color: rgba(111, 155, 255, .16);
  background:
    radial-gradient(circle at top left, rgba(79, 140, 255, .08), transparent 38%),
    linear-gradient(180deg, rgba(13, 23, 55, .96), rgba(9, 16, 40, .96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.photo-quick-tools__heading {
  margin-bottom: 1rem;
}

.photo-quick-tools__heading h3 {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  letter-spacing: -.015em;
}

.photo-quick-tools__heading > span {
  padding: .34rem .58rem;
  border: 1px solid rgba(123, 249, 200, .13);
  border-radius: 999px;
  background: rgba(123, 249, 200, .055);
  color: #b9c6e3;
}

.photo-quick-tools__grid {
  gap: .72rem;
}

.photo-quick-tools__grid > button {
  position: relative;
  min-height: 72px;
  padding: .8rem;
  border-color: rgba(111, 155, 255, .17);
  background: linear-gradient(180deg, rgba(30, 48, 91, .56), rgba(20, 32, 67, .46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.photo-quick-tools__grid > button:hover,
.photo-quick-tools__grid > button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(123, 249, 200, .7);
  background: linear-gradient(180deg, rgba(36, 67, 99, .66), rgba(18, 47, 67, .56));
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}

.photo-quick-tools__grid > button.is-active {
  transform: none;
  border-color: #7bf9c8;
  background: linear-gradient(180deg, rgba(39, 91, 101, .58), rgba(18, 53, 67, .62));
  box-shadow: 0 0 0 1px rgba(123, 249, 200, .08), inset 0 1px 0 rgba(255,255,255,.05);
}

.photo-quick-tools__grid > button > span {
  background: linear-gradient(180deg, rgba(98, 126, 191, .25), rgba(70, 92, 151, .18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.photo-quick-tools__grid strong {
  font-size: .88rem;
}

.photo-quick-tools__grid small {
  color: #b7c2da;
  font-size: .7rem;
}

.photo-quick-tools__status {
  margin: .78rem 0 0;
  text-align: center;
  color: #9faccc;
}

.photo-quick-panel:not(.is-crop) {
  margin-top: .9rem;
  border-color: rgba(111, 155, 255, .14);
  background: linear-gradient(180deg, rgba(6, 12, 29, .94), rgba(7, 13, 31, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  animation: photoQuickReveal .2s ease both;
}

.photo-quick-panel:not(.is-crop) .photo-quick-panel__header {
  padding: 1rem 1.05rem .85rem;
  border-bottom-color: rgba(111, 155, 255, .1);
}

.photo-quick-panel:not(.is-crop) .photo-quick-panel__body {
  padding: 1rem 1.05rem 1.05rem;
}

.photo-quick-close {
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.photo-quick-close:hover,
.photo-quick-close:focus-visible {
  transform: scale(1.04);
  border-color: rgba(123, 249, 200, .65);
  background: rgba(123, 249, 200, .08);
  outline: none;
}

.photo-quick-fields select,
.photo-quick-fields input[type="number"] {
  border-color: rgba(111, 155, 255, .2);
  background: rgba(14, 24, 55, .94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.photo-quick-presets button,
.photo-crop-ratios button {
  background: rgba(40, 60, 108, .3);
}

body.photo-crop-panel-open {
  overflow: hidden;
}

.photo-quick-panel.is-crop {
  position: fixed;
  z-index: 10000;
  top: 50%;
  left: 50%;
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(123, 249, 200, .28);
  border-radius: 20px;
  background: linear-gradient(180deg, #09142f 0%, #071027 100%);
  box-shadow:
    0 0 0 100vmax rgba(2, 5, 15, .84),
    0 30px 100px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: photoCropDialogIn .2s ease both;
  overscroll-behavior: contain;
}

.photo-quick-panel.is-crop .photo-quick-panel__header {
  position: sticky;
  z-index: 4;
  top: 0;
  padding: 1rem 1.1rem .9rem;
  border-bottom: 1px solid rgba(111, 155, 255, .13);
  background: rgba(9, 20, 47, .96);
  backdrop-filter: blur(14px);
}

.photo-quick-panel.is-crop .photo-quick-panel__body {
  padding: 1rem 1.1rem max(1.1rem, env(safe-area-inset-bottom));
}

.photo-quick-panel.is-crop .photo-crop-stage {
  min-height: min(58vh, 640px);
  border-color: rgba(111, 155, 255, .13);
  background-color: #030713;
  box-shadow: inset 0 0 40px rgba(0,0,0,.28);
}

.photo-quick-panel.is-crop .photo-quick-panel__actions {
  position: sticky;
  z-index: 3;
  bottom: -.01px;
  margin: 1rem -1.1rem -1.1rem;
  padding: .85rem 1.1rem max(.85rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(111, 155, 255, .13);
  background: rgba(7, 16, 39, .96);
  backdrop-filter: blur(14px);
}

@keyframes photoQuickReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes photoCropDialogIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 820px) {
  .photo-quick-tools__grid > button {
    min-height: 68px;
  }
}

@media (max-width: 640px) {
  .photo-quick-tools {
    padding: .8rem;
  }

  .photo-quick-tools__grid {
    gap: .48rem;
  }

  .photo-quick-tools__grid > button {
    min-height: 64px;
    border-radius: 12px;
  }

  .photo-quick-tools__status {
    text-align: left;
  }

  .photo-quick-panel:not(.is-crop) {
    border-radius: 14px;
  }

  .photo-quick-panel.is-crop {
    inset: 0;
    width: 100%;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
    animation: photoCropMobileIn .18s ease both;
  }

  .photo-quick-panel.is-crop .photo-quick-panel__header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .photo-quick-panel.is-crop .photo-crop-stage {
    min-height: 48vh;
  }
}

@keyframes photoCropMobileIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .photo-quick-panel,
  .photo-quick-tools__grid > button,
  .photo-quick-close {
    animation: none !important;
    transition: none !important;
  }
}