:root {
  --attachment-media-width: var(--size-480);
  --attachment-preview-ratio: 16 / 9;
  --attachment-dialog-width: 90vw;
  --attachment-dialog-media-height: 70dvh;
  --attachment-dialog-padding: var(--space-4);
  --attachment-media-gap: var(--space-2);
  --attachment-size: var(--size-120);
  --attachment-radius: var(--radius-12);
  --attachment-background: var(--color-surface);
  --attachment-border-color: var(--color-border);
  --attachment-failed-border-color: var(--color-error-border);
  --attachment-border: var(--control-border-width) solid var(--attachment-border-color);
  --attachment-failed-border: var(--control-border-width) solid var(--attachment-failed-border-color);
  --attachment-status-color: var(--color-info-text);
  --attachment-failed-status-color: var(--color-error-text);
  --attachment-edge-offset: calc(-1 * var(--control-border-width));
  --attachment-media-height: var(--size-72);
  --attachment-type-width: var(--size-50);
  --attachment-type-padding: var(--space-2);
  --attachment-caption-top: var(--size-71);
  --attachment-caption-height: var(--size-48);
  --attachment-caption-padding: var(--border-1) var(--space-2);
  /* Compact tile exception: filename + metadata + status share a 48px caption. */
  --attachment-filename-font: var(--font-sans-13-16-regular);
  --attachment-metadata-font: var(--font-sans-11-14-regular);
  --attachment-type-font: var(--font-sans-11-15-regular);
  --attachment-progress-top: var(--size-67);
  --attachment-progress-inset: var(--space-2);
  --attachment-progress-width: var(--size-102);
  --attachment-progress-height: var(--space-1);
  --attachment-progress-radius: var(--radius-2);
  --attachment-progress-track: var(--color-progress-track);
  --attachment-progress-fill: var(--color-progress-fill);
  --attachment-remove-border: 0;
}

.attachment-media {
  position: relative;
  margin: 0;
  inline-size: var(--attachment-media-width);
  max-inline-size: 100%;
}

.attachment-media__slot,
.attachment-media__frame {
  aspect-ratio: var(--attachment-preview-ratio);
}

.attachment-media__frame {
  overflow: hidden;
  background: var(--color-muted);
  border-radius: var(--attachment-radius);
}

.attachment-media__frame > a {
  display: block;
  block-size: 100%;
}

.attachment-media__preview {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.attachment-media__dialog {
  box-sizing: border-box;
  inline-size: var(--attachment-dialog-width);
  max-block-size: 90dvh;
  padding: var(--attachment-dialog-padding);
  border: var(--attachment-border);
  border-radius: var(--attachment-radius);
  background: var(--color-surface);
  color: var(--color-surface-foreground);
}

.attachment-media__dialog::backdrop {
  background: var(--color-scrim);
}

.attachment-media__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--attachment-media-gap);
  margin-block-end: var(--attachment-media-gap);
  overflow-wrap: anywhere;
}

.attachment-media__dialog-header .button-control {
  flex-shrink: 0;
}

.attachment-media__dialog .attachment-media__frame {
  aspect-ratio: auto;
  block-size: var(--attachment-dialog-media-height);
}

.attachment-media__overlay {
  position: absolute;
  inset-block-start: var(--attachment-media-gap);
  inset-inline: var(--attachment-media-gap);
  display: flex;
  align-items: center;
  gap: var(--attachment-media-gap);
  padding: var(--attachment-media-gap);
  border-radius: var(--attachment-radius);
  background: var(--color-surface);
  color: var(--color-surface-foreground);
}

.attachment-media__info {
  display: grid;
  flex: 1;
  min-inline-size: 0;
  font: var(--font-type-caption);
}

.attachment-media__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-media__overlay .button-control {
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .attachment-media__overlay {
    opacity: 0;
    pointer-events: none;
  }

  .attachment-media:hover .attachment-media__overlay,
  .attachment-media:focus-within .attachment-media__overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

.attachment-tile[data-state="failed"] {
  --attachment-border: var(--attachment-failed-border);
  --attachment-status-color: var(--attachment-failed-status-color);
}

.attachment-tile {
  box-sizing: border-box;
  position: relative;
  flex: none;
  inline-size: var(--attachment-size);
  block-size: var(--attachment-size);
  border: var(--attachment-border);
  border-radius: var(--attachment-radius);
  background: var(--attachment-background);
  color: var(--color-foreground);
}

.attachment-tile__media {
  position: absolute;
  inset-block-start: var(--attachment-edge-offset);
  inset-inline-start: var(--attachment-edge-offset);
  inline-size: var(--attachment-size);
  block-size: var(--attachment-media-height);
  overflow: hidden;
  border-start-start-radius: var(--attachment-radius);
  border-start-end-radius: var(--attachment-radius);
}

.attachment-tile__preview {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.attachment-tile__type {
  display: block;
  max-inline-size: var(--attachment-type-width);
  padding: var(--attachment-type-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted-foreground);
  font: var(--attachment-type-font);
}

.attachment-tile__caption {
  box-sizing: border-box;
  position: absolute;
  inset-block-start: var(--attachment-caption-top);
  inset-inline-start: var(--attachment-edge-offset);
  inline-size: var(--attachment-size);
  block-size: var(--attachment-caption-height);
  padding: var(--attachment-caption-padding);
}

.attachment-tile__filename {
  display: flex;
  font: var(--attachment-filename-font);
}

.attachment-tile__basename,
.attachment-tile__extension,
.attachment-tile__metadata {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-tile__basename { min-inline-size: 0; }
.attachment-tile__extension { flex: none; max-inline-size: 50%; }

.attachment-tile__metadata,
.attachment-tile__status {
  display: block;
  color: var(--color-muted-foreground);
  font: var(--attachment-metadata-font);
}

.attachment-tile__status { color: var(--attachment-status-color); }

.attachment-tile__progress {
  appearance: none;
  position: absolute;
  inset-block-start: var(--attachment-progress-top);
  inset-inline-start: var(--attachment-progress-inset);
  inline-size: var(--attachment-progress-width);
  block-size: var(--attachment-progress-height);
  border: 0;
  border-radius: var(--attachment-progress-radius);
  overflow: hidden;
  background: var(--attachment-progress-track);
  color: var(--attachment-progress-fill);
}

.attachment-tile__progress::-webkit-progress-bar { background: var(--attachment-progress-track); }
.attachment-tile__progress::-webkit-progress-value { background: var(--attachment-progress-fill); }
.attachment-tile__progress::-moz-progress-bar { background: var(--attachment-progress-fill); }

.attachment-tile__remove {
  --button-border: var(--attachment-remove-border);
  position: absolute;
  inset-block-start: var(--attachment-edge-offset);
  inset-inline-end: var(--attachment-edge-offset);
}