/* What waits to be sent floats just above the composer, outside its pill, as WhatsApp's thumbnails: side by side, each with its X, and a + for more. */
.ds-attachment-tray {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% + var(--ds-space-2));
  z-index: var(--ds-z-dropdown);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--ds-space-2);
  overflow-x: auto;
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  scrollbar-width: thin;
}

.ds-attachment-tray[hidden] { display: none; }

.ds-attachment-tray__tiles { display: contents; }

.ds-attachment-tile {
  --tile-size: 88px;
  position: relative;
  display: grid;
  flex-shrink: 0;
  inline-size: var(--tile-size);
  block-size: var(--tile-size);
  overflow: hidden;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-fill);
}

.ds-attachment-tile__media {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ds-attachment-tile__media[hidden], .ds-attachment-tile [hidden] { display: none; }

.ds-attachment-tile__play {
  grid-area: 1 / 1;
  place-self: center;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-media-badge);
  color: var(--ds-on-media);
}

.ds-attachment-tile__doc {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: var(--ds-space-1);
  min-inline-size: 0;
  padding: var(--ds-space-4) var(--ds-space-1) var(--ds-space-1);
}

.ds-attachment-tile__icon { display: grid; place-items: center; color: var(--ds-text-secondary); }
.ds-attachment-tile__icon[data-tile-icon="file-pdf"] { color: var(--ds-negative); }

.ds-attachment-tile__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-inline-size: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: var(--ds-font-size-2xs);
  line-height: 1.2;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
}

.ds-attachment-tile__remove {
  --hover-size: 0;
  position: absolute;
  inset-block-start: var(--ds-space-1);
  inset-inline-end: var(--ds-space-1);
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-media-badge);
  color: var(--ds-on-media);
  cursor: pointer;
}

.ds-attachment-tile__remove:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

@media (any-hover: hover) {
  .ds-attachment-tile__remove:hover { background: oklch(0 0 0 / 0.75); }
}

.ds-attachment-tray__add {
  --hover-size: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 88px;
  block-size: 88px;
  padding: 0;
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-xl);
  background: transparent;
  color: var(--ds-text-secondary);
  cursor: pointer;
}

.ds-attachment-tray__add:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

@media (any-hover: hover) {
  .ds-attachment-tray__add:hover { background: var(--ds-menu-hover); color: var(--ds-text); }
}

.ds-attachment-tray > .ds-chip { flex-shrink: 0; align-self: flex-end; }

@media (max-width: 99.99ch) {
  .ds-attachment-tile, .ds-attachment-tray__add { --tile-size: 72px; }
  .ds-attachment-tray__add { inline-size: 72px; block-size: 72px; }
}