.file-input-visually-hidden {
  position: fixed;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}
/* message image grid */
.att-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.att-grid.single { grid-template-columns: 1fr; }

.att-item {
  position: relative;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  aspect-ratio: 4 / 3;           
  width:150px;
}

/* anchors are fully clickable and above any backgrounds */
.att-item a {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/* just in case a parent set pointer-events:none */
.att-grid a, .att-grid img { pointer-events: auto; }

.att-item img {
  width: 100%; height: 100%;
  border-radius:10px;
  object-fit: cover;
  display: block;
}

/* subtle hover */
.att-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.08));
  opacity: 0; transition: opacity .15s ease;
}
.att-item:hover::after { opacity: 1; }

/* single-image gets taller (optional) */
.att-grid.single .att-item { aspect-ratio: 16 / 10; }


/* Visually hidden file input (accessible) */
.file-input-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Attach (paperclip) button */
.toolBtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: inherit;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.toolBtn:hover { background: rgba(0,0,0,.07); }
.toolBtn:active { transform: translateY(1px); }
.toolBtn[disabled] { opacity: .55; cursor: not-allowed; }

/* Spinner when uploading */
.toolBtn.loading i { visibility: hidden; }
.toolBtn.loading::after {
  content: "";
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Count badge (queued attachments) */
.toolBtn .badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #0d6efd;  /* Bootstrap primary */
  color: #fff;
  font: 600 11px/18px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Dark theme tweak (optional) */
html[data-theme="dark"] .toolBtn {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
html[data-theme="dark"] .toolBtn:hover {
  background: rgba(255,255,255,.1);
}
/* Tray container */
.composer-attachments {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0;
  position: relative; /* helps with stacking if a parent has weird z-index */
  z-index: 2;
}

/* Each thumb MUST be positioned to anchor the chip */
.composer-attachments .att {
  position: relative;              /* <-- key */
  width: 40px; height: 40px;       /* your thumb size */
  overflow: visible;               /* allow chip to sit slightly outside */
}

.composer-attachments .att img {
  width: 100%; height: 100%;
  border-radius: 8px;
  object-fit: cover; display: block;
}

/* Fancy remove chip – anchored to the OUTER corner without negative offsets */
.composer-attachments .att .remove {
  /* themeable vars */
  --x-bg: rgba(20,20,22,.45);
  --x-bg-hover: rgba(20,20,22,.70);
  --x-border: rgba(255,255,255,.25);
  --x-shadow: 0 4px 14px rgba(0,0,0,.25);

  position: absolute;
  top: 0; right: 0;
  transform: translate(40%, -40%);  /* sits just outside the rounded corner */
  width: 22px; height: 22px;

  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--x-border);
  background: var(--x-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: var(--x-shadow);
  cursor: pointer;
  z-index: 10;

  font-size: 0; line-height: 0; /* we draw the X via pseudos */
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.composer-attachments .att .remove::before,
.composer-attachments .att .remove::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
}
.composer-attachments .att .remove::before { transform: translate(-50%,-50%) rotate(45deg); }
.composer-attachments .att .remove::after  { transform: translate(-50%,-50%) rotate(-45deg); }

.composer-attachments .att .remove:hover{
  background: var(--x-bg-hover);
  transform: translate(40%, -40%) scale(1.06);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.composer-attachments .att .remove:active{ transform: translate(40%, -40%) scale(0.98); }
.composer-attachments .att .remove:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,.45), var(--x-shadow);
}

/* Light theme */
html[data-theme="light"] .composer-attachments .att .remove {
  --x-bg: rgba(255,255,255,.85);
  --x-bg-hover: rgba(255,255,255,.95);
  --x-border: rgba(0,0,0,.10);
  color: #111;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .composer-attachments .att .remove{
    transition: background .15s ease, box-shadow .15s ease;
  }
}