@layer components {
  #galleryComponent{ position:relative; }

  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(var(--gallery-size),1fr));
    gap:var(--gallery-gap);
    justify-content:start; align-items:start;
  }

  .gallery-item{
    position:relative; width:100%; aspect-ratio:1/1;
    border-radius:var(--gallery-radius); overflow:hidden;
    border:1px solid var(--gallery-border); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05);
  }
  .gallery-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

  .delete-button{
    position:absolute; top:8px; right:8px; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border-radius:999px; border:1px solid var(--gallery-border);
    background:#ffffffd9; color:inherit; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.12);
    transition:background .12s, filter .15s, transform .05s;
  }
  .delete-button:hover{ background:rgba(0,0,0,.75); color:#fff; }
  .delete-button:active{ transform:scale(.96); }

  .gallery-add-tile{
    width:var(--gallery-size); aspect-ratio:1/1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--gallery-radius); border:2px dashed #c7cdd8; background:#f8fafc; color:#374151; cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
  }
  .gallery-add-tile .plus{
    font-size:28px; line-height:1; width:56px; height:56px; border-radius:999px;
    background:var(--accent-blue); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.15);
  }
  .gallery-add-tile:hover{ background:#eef2ff; border-color:var(--accent-blue); box-shadow:0 0 0 4px rgba(37,99,235,.08) inset; }

  /* Owner/Visitor Toggles */
  #galleryContainer[data-show-upload="0"] #galleryAddTile{ display:none !important; }
  #galleryContainer[data-show-delete="0"] .delete-button{ display:none !important; }

  /* Delete-Dialog (spezifisch für Galerie) */
  .modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; z-index:9998; }
  .modal-backdrop.show{ display:block; }
  .confirm-modal{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(92vw,420px); background:#fff; border:1px solid var(--border);
    border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:14px; z-index:9999; display:none;
  }
  .confirm-modal.show{ display:block; }
  .confirm-modal .row{ margin:6px 0; }
  .confirm-modal .modal-title{ font-weight:700; font-size:16px; }
  .confirm-modal .modal-text{ color:#475569; font-size:14px; }
  .confirm-modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
  .confirm-modal .btn{ padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#f6f7fb; cursor:pointer; }
  .confirm-modal .btn.primary{ background:#ef4444; border-color:#ef4444; color:#fff; }
}

/* ===== Gallery: Toast-Messages ===== */
/* Anker */
.profile-gallery-wrapper { position: relative; }

/* Immer mittig – kein right/left-Wechsel, kein transform nötig */
#galleryMessageBox.message-box{
  position: absolute;
  top: 10px;
  left: 0;               /* beide Seiten setzen */
  right: 0;              /* … und mit margin:auto zentrieren */
  margin: 0 auto;
  width: fit-content;    /* schrumpft auf Inhalt */
  max-width: min(480px, calc(100% - 20px));
  display: none;         /* Sichtbarkeit nur über .show */
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  gap: 10px;
  align-items: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 5;
}

/* Varianten & Animation bleiben gleich */
#galleryMessageBox .msg-icon{ font-size: 18px; }
#galleryMessageBox .msg-text{ display:inline-block; }

#galleryMessageBox.is-success{ background:#16a34a; color:#fff; border:1px solid #15803d; }
#galleryMessageBox.is-error{   background:#dc2626; color:#fff; border:1px solid #b91c1c; }

#galleryMessageBox.show{
  display: inline-flex;  /* wichtig: NICHT per JS setzen */
  animation: gallery-toast-in .18s ease-out;
}
@keyframes gallery-toast-in{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}