/* styles/gallery.css – grid, caption view, top-corner actions, single modal */

/* toolbar */
.album-toolbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 16px;
}
.album-toolbar .left-controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.album-toolbar .right-controls{ display:flex; gap:10px; }

/* uploader */
.uploader{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 16px;
}
.uploader .uploader-hint{ color:var(--muted); }
#file-caption{ flex:1 1 360px; max-width:520px; }

/* grid */
.gallery-grid{
  margin-top:16px;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gallery-empty{ padding:28px; color:var(--muted); text-align:center; }

/* tile */
.gallery-grid .tile{
  position:relative; display:block; isolation:isolate;
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow: var(--shadow-1);
  aspect-ratio: 4 / 3;
}
.gallery-grid .tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- Action chips (Move/Delete) --- */
/* Positioning is applied inline from JS; this ensures look + stacking */
.gallery-grid .tile .chip-btn{ z-index:6; }

.chip-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; line-height:1;
  border-radius:999px; border:1px solid var(--border);
  color:#fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  opacity:.97;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.chip-btn:hover{ transform: translateY(-1px); filter:brightness(1.05); }

/* higher-visibility tints */
.chip-btn.chip-move{
  background: rgba(70,140,255,.88);             /* bluish */
  border-color: rgba(120,170,255,.35);
}
.chip-btn.chip-move:hover{ background: rgba(70,140,255,1); }

.chip-btn.chip-delete{
  background: rgba(238,78,78,.90);              /* red */
  border-color: rgba(255,140,140,.4);
}
.chip-btn.chip-delete:hover{ background: rgba(238,78,78,1); }

.chip-btn.danger{ border-color: rgba(255,120,120,.45); color:#ffd1d1; }

/* --- Caption view (bottom-left) --- */
.gallery-grid .tile .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:10px;
  justify-content:flex-start;                     /* ensure left alignment */
  padding:10px 12px;
  color:#fff; font-size:14px; text-align:left;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 80%);
  pointer-events:none;                            /* chips remain clickable */
}
.cap-text{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);          /* readability on busy imgs */
}
.cap-placeholder{ opacity:.85; }

.cap-edit{
  pointer-events:auto;                            /* clickable even though bar ignores */
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.35); color:#fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.cap-edit:hover{ background:rgba(0,0,0,.55); }

/* --- Modal (shared) --- */
.modal-mask{
  position:fixed; inset:0; z-index:1000;
  background:rgba(2,6,15,.55); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
}
.modal{
  width:min(680px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(12,18,28,.96), rgba(7,10,19,.96));
  border:1px solid var(--border); border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  padding:22px;
}
.modal-title{
  font-size:28px; font-weight:800; letter-spacing:.01em; color:#e9f0ff;
}
.modal-body{ margin-top:16px; color:#cfe3ff; }
.modal-msg{ opacity:.9; }
.modal-actions{
  margin-top:22px; display:flex; gap:12px; justify-content:flex-end;
}
.modal-input, .modal-select{
  width:100%; box-sizing:border-box;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; outline:none;
}

/* buttons */
.cta{
  padding:10px 16px; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(135deg,#5cc9ff,#6f74ff 60%,#8a63ff);
  color:#08121c; font-weight:800;
}
.cta:hover{ filter:brightness(1.08); }
.cta.danger{
  background:linear-gradient(135deg,#ff7a7a,#ff5d7d 60%,#ff6a57);
  color:#2a0f14;
}
.tiny{
  padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:#cfe3ff;
}

/* toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(10px);
  bottom:18px; z-index:1200;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(12,18,28,.95); color:#e9f0ff;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }