/*
 * AttachmentCard — full ATT-03 card. Token-only (var(--…)); mirrors the
 * TrashView row pattern for card chrome (bg, border, radius, padding).
 */

.attachment-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Left media square — fixed 64×64 (a media dimension, not spacing). */
.attachment-card-media {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.attachment-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Non-image placeholder: surface fill, centered muted type icon. */
.attachment-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* A previewable thumbnail is a button (opens the full preview) — strip the
 * default button chrome so it reads as the 64×64 media square. */
.attachment-card-thumb-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Filename + meta stack; min-width:0 lets the filename ellipsis-truncate. */
.attachment-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  flex: 1 1 auto;
}

.attachment-card-name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card-meta {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card-extract {
  display: inline-flex;
  min-width: 0;
}

.attachment-card-download {
  flex-shrink: 0;
}

/* Right-side action cluster: Download + (editor-only) Replace/Remove. */
.attachment-card-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Icon-only lifecycle actions — 44px touch target (--hit-min-icon). */
.attachment-card-action {
  flex-shrink: 0;
  min-width: var(--hit-min-icon);
  min-height: var(--hit-min-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* "Ask about this file" — same 44px icon button as the lifecycle actions
 * (inherits .attachment-card-action), available to readers AND editors. */
.attachment-card-ask {
  color: var(--color-text-muted);
}
