.klyp-AttachmentTile{--klyp-attachment-tile-width:8rem;--klyp-attachment-tile-row-thumb:2.5rem;--klyp-attachment-tile-remove-size:1.25rem;--klyp-attachment-tile-progress-height:.25rem;background:color-mix(in srgb, var(--color-bg-surface) 60%, transparent);border:var(--bw-default) solid var(--color-border-subtle);border-radius:var(--r-card,var(--radius-md));position:relative;overflow:hidden}.klyp-AttachmentTile[data-status=error]{border-color:color-mix(in srgb, var(--color-status-danger) 40%, transparent)}.klyp-AttachmentTile[data-variant=tile]{width:var(--klyp-attachment-tile-width);flex-direction:column;display:flex}.klyp-AttachmentTile[data-variant=tile]:hover .klyp-AttachmentTile__remove,.klyp-AttachmentTile[data-variant=tile] .klyp-AttachmentTile__remove:focus-visible{opacity:1}.klyp-AttachmentTile[data-variant=row]{align-items:center;gap:var(--space-12);padding:var(--space-4) var(--space-12) var(--space-4) var(--space-4);display:flex}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__thumb{width:var(--klyp-attachment-tile-row-thumb);height:var(--klyp-attachment-tile-row-thumb);border-radius:var(--r-card,var(--radius-md));background:var(--color-bg-glass-deep,var(--color-bg-glass));color:var(--color-fg-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__thumb>.klyp-AttachmentTile__thumbIcon>svg{width:1rem;height:1rem}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__thumbImage{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__meta{flex-direction:column;flex:1;gap:.125rem;min-width:0;padding:0;display:flex}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__name{font-size:var(--font-size-13,.8125rem);color:var(--color-fg-primary)}.klyp-AttachmentTile[data-variant=row] .klyp-AttachmentTile__status{font-size:var(--font-size-12,.75rem);color:var(--color-fg-subtle)}.klyp-AttachmentTile__frame{background:var(--color-bg-glass-deep,var(--color-bg-glass))}.klyp-AttachmentTile__placeholder{width:100%;height:100%;color:var(--color-fg-muted);place-items:center;display:grid}.klyp-AttachmentTile__placeholderIcon>svg{width:1.5rem;height:1.5rem}.klyp-AttachmentTile__overlay{top:var(--space-4,.25rem);right:var(--space-4,.25rem);z-index:10;position:absolute}.klyp-AttachmentTile__remove{top:var(--space-4,.25rem);left:var(--space-4,.25rem);z-index:10;width:var(--klyp-attachment-tile-remove-size);height:var(--klyp-attachment-tile-remove-size);color:var(--color-fg-primary);background:color-mix(in srgb, var(--color-bg-surface) 80%, transparent);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);cursor:pointer;opacity:0;transition:opacity var(--duration-fast,.12s) ease;border:0;justify-content:center;align-items:center;display:inline-flex;position:absolute}.klyp-AttachmentTile__remove>svg{width:.75rem;height:.75rem}.klyp-AttachmentTile__remove:focus-visible{box-shadow:0 0 0 var(--bw-emphasis,2px) color-mix(in srgb, var(--color-accent) 50%, transparent);outline:none}.klyp-AttachmentTile__progress{z-index:10;height:var(--klyp-attachment-tile-progress-height);background:color-mix(in srgb, var(--color-bg-glass-deep,var(--color-bg-glass)) 80%, transparent);position:absolute;bottom:0;left:0;right:0}.klyp-AttachmentTile__progressBar{background:var(--color-accent);height:100%;transition:width var(--duration-fast,.12s) ease}.klyp-AttachmentTile[data-variant=tile] .klyp-AttachmentTile__meta{padding:var(--space-8,.5rem);flex-direction:column;gap:.125rem;display:flex}.klyp-AttachmentTile[data-variant=tile] .klyp-AttachmentTile__name{font-size:var(--font-size-12,.75rem);font-weight:var(--font-weight-medium);color:var(--color-fg-primary)}.klyp-AttachmentTile[data-variant=tile] .klyp-AttachmentTile__status{font-size:var(--font-size-12,.75rem);color:var(--color-fg-subtle)}.klyp-AttachmentTile__name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}