/* =============================================================================
   SOFTBOOK AI — SHARED GALLERY
   Loaded after bento.css on create-image, create-story and create-video.

   This file supersedes the "Gallery picker" block in bento.css. That block
   can be deleted once this is live; it is left in place for now so a partial
   deploy degrades rather than breaks.
============================================================================= */

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 11, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.gallery-modal.show,
.gallery-modal.open { display: flex; }

.gallery-content {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px;
  border-radius: var(--sb-r-lg);
  background: var(--sb-tile-solid);
  border: 1px solid var(--sb-line-strong);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1);
  -webkit-overflow-scrolling: touch;
}

.gallery-title { font-size: 1.1rem; font-weight: 650; margin-bottom: 18px; }

.gallery-close {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 5;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--sb-text-dim) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--sb-line) !important;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gallery-close:hover { color: #fff !important; background: rgba(255, 255, 255, .12) !important; }

.gallery-upload-box { text-align: center; margin-bottom: 14px; }
.gallery-spinner { text-align: center; margin-top: 15px; }

.gallery-empty {
  grid-column: 1 / -1;
  margin: 18px 0;
  text-align: center;
  color: var(--sb-text-dim);
}


/* -----------------------------------------------------------------------------
   QUOTA METER

   Replaces the old "12 / 150" count. The limit is bytes now, and a bare
   number of files said nothing about how close anyone was to it — someone
   with 140 thumbnails and someone with 12 photographs were shown the same
   reassuring figure while one of them had far more room than the other.
----------------------------------------------------------------------------- */
.gallery-quota {
  display: block;
  max-width: 320px;
}
.gallery-quota-text {
  display: block;
  font-size: .78rem;
  color: var(--sb-text-dim);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.gallery-quota-text strong { color: var(--sb-text); font-weight: 650; }
.gallery-quota-count { opacity: .65; }

.gallery-quota-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--sb-fill-2);
  overflow: hidden;
}
.gallery-quota-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sb-violet), #46c2ff);
  transition: width .35s ease;
}
.gallery-quota.is-tight .gallery-quota-fill {
  background: linear-gradient(90deg, #ff8a3d, #ff5f6d);
}


/* -----------------------------------------------------------------------------
   GRID
----------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}

.gallery-item {
  position: relative;
  border-radius: var(--sb-r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--sb-fill-2);
  border: 1px solid var(--sb-line);
  opacity: 0;
  animation: sbFade .25s ease forwards;
  transition: border-color var(--sb-t), transform var(--sb-t);
  -webkit-tap-highlight-color: transparent;
}

.gallery-item img,
.gallery-item video {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: cover;
  background: #000;
}

/* Scrim behind the size badge so it stays readable on a white product shot. */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

/* Hover lift is gated behind a real pointer. iOS has no hover state to
   leave, so a tap latched this on and the card stayed shifted 2px up with
   a violet border until something else was tapped — which is most of what
   looked broken on the phone. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover {
    transform: translateY(-2px);
    border-color: var(--sb-violet);
  }
}


/* -----------------------------------------------------------------------------
   SIZE BADGE
----------------------------------------------------------------------------- */
.gallery-size {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 4;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .94);
  background: rgba(12, 12, 20, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* Video marker, opposite corner to the delete button. */
.gallery-kind {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  color: rgba(255, 255, 255, .94);
  background: rgba(12, 12, 20, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  pointer-events: none;
}
.gallery-kind i { line-height: 1; display: block; }


/* -----------------------------------------------------------------------------
   DELETE BUTTON

   Three separate faults were making this look wrong on an iPhone Pro Max:

   1. Bootstrap Icons sets `vertical-align: -.125em` on .bi::before, which
      pushed the trash glyph below the centre of its circle. Under
      `place-items: center` that offset survives, so the icon sat low and
      slightly right. Zeroing it and centring with flex is the actual fix.
   2. 26px is under the 44px minimum touch target, so a thumb aiming at it
      often hit the card underneath and opened the file instead of deleting.
   3. The sticky :hover above made the whole card — and therefore this
      button — sit 2px off after any tap.
----------------------------------------------------------------------------- */
.gallery-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 60, 80, .88);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--sb-t), transform var(--sb-t);
}

.gallery-delete i {
  display: block;
  font-size: 13px;
  line-height: 1;
  vertical-align: 0;          /* overrides .bi { vertical-align: -.125em } */
}

.gallery-delete:hover { background: rgba(255, 60, 80, 1); }
.gallery-delete:active { transform: scale(.92); }

/* Touch devices: bigger target, and it cannot rely on hover to appear. */
@media (hover: none) {
  .gallery-delete {
    width: 34px;
    height: 34px;
    top: 5px;
    right: 5px;
  }
  .gallery-delete i { font-size: 15px; }
}


/* -----------------------------------------------------------------------------
   IN-MODAL NOTICES
----------------------------------------------------------------------------- */
.gallery-notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--sb-r-md);
  font-size: .86rem;
  color: #fff;
  background: rgba(12, 12, 20, .82);
  border: 1px solid var(--sb-line-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gallery-notice-success { border-color: rgba(60, 220, 150, .5); }
.gallery-notice-warning { border-color: rgba(255, 190, 80, .5); }
.gallery-notice-danger  { border-color: rgba(255, 90, 110, .55); }


@media (max-width: 575.98px) {
  .gallery-content { padding: 18px 14px; max-height: 94vh; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
  .gallery-item img,
  .gallery-item video { height: 108px; }
  .gallery-size { font-size: .58rem; padding: 2px 6px; left: 6px; bottom: 6px; }
  .gallery-quota { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item { animation: none; opacity: 1; }
  .gallery-quota-fill { transition: none; }
}

/* Duration badge, shown on video thumbnails next to the size.
   Kling's edit engine only accepts 3–10s clips, so the length is the
   single most useful thing to know before picking one. */
.gallery-duration {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 4;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .94);
  background: rgba(12, 12, 20, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .gallery-duration { font-size: .58rem; padding: 2px 6px; right: 6px; bottom: 6px; }
}

/* A clip Kling cannot use as a source — too narrow, or too wide. Dimmed and
   labelled rather than hidden: the file is still yours, still counts against
   your quota, and still deletable, so removing it from view would only make
   the storage figure look wrong. */
.gallery-item-unusable { opacity: .48; }
.gallery-item-unusable:hover { opacity: .72; }

.gallery-flag {
  position: absolute;
  top: 7px;
  right: 44px;
  z-index: 4;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(200, 60, 40, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .gallery-flag { font-size: .55rem; padding: 1px 6px; right: 42px; }
}